Skip to main content

Variable: UI_CONSTANTS

const UI_CONSTANTS: {
 ANIMATION_DURATION: 300;
 CSS_CLASSES: {
  ACTIVE: "active";
  HIDDEN: "hidden";
  LOADING: "loading";
  SHOW: "show";
  THEMED_BTN: "themed-btn";
 };
 DEBOUNCE_DELAY: 250;
 DEFAULT_THEME: "dark";
 DOM_IDS: {
  ACTIVE_FILE_NAME: "active_file_name";
  ACTIVE_FILE_NAME_CONTAINER: "active_file_name_container";
  ALT_FIT_IFRAME: "altfit_iframe";
  CONTENT_CHART: "content_chart";
  CONTENT_DATA: "content_data";
  CONTENT_MAP: "content_map";
  CONTENT_SUMMARY: "content_summary";
  DROP_OVERLAY: "drop_overlay";
  NOTIFICATION: "notification";
  TAB_CHART: "tab_chart";
  TAB_SUMMARY: "tab_summary";
  UNLOAD_FILE_BTN: "unload_file_btn";
  ZWIFT_IFRAME: "zwift_iframe";
 };
 HEADER_HEIGHT: 60;
 NOTIFICATION_TYPES: {
  ERROR: {
   ariaLabel: "Error";
   duration: 6000;
   icon: "❌";
   type: "error";
  };
  INFO: {
   ariaLabel: "Information";
   duration: 4000;
   icon: "ℹ️";
   type: "info";
  };
  SUCCESS: {
   ariaLabel: "Success";
   duration: 3000;
   icon: "✅";
   type: "success";
  };
  WARNING: {
   ariaLabel: "Warning";
   duration: 5000;
   icon: "⚠️";
   type: "warning";
  };
 };
 SIDEBAR_WIDTH: 250;
 SUMMARY_COLUMN_SELECTOR_DELAY: 100;
 THEMES: {
  DARK: "dark";
  LIGHT: "light";
  SYSTEM: "system";
 };
};

Defined in: utils/config/constants.ts:54

UI-related constants and configurations.

Type Declaration​

ANIMATION_DURATION​

readonly ANIMATION_DURATION: 300 = 300;

CSS_CLASSES​

readonly CSS_CLASSES: {
  ACTIVE: "active";
  HIDDEN: "hidden";
  LOADING: "loading";
  SHOW: "show";
  THEMED_BTN: "themed-btn";
};

CSS_CLASSES.ACTIVE​

readonly ACTIVE: "active" = "active";

CSS_CLASSES.HIDDEN​

readonly HIDDEN: "hidden" = "hidden";

CSS_CLASSES.LOADING​

readonly LOADING: "loading" = "loading";

CSS_CLASSES.SHOW​

readonly SHOW: "show" = "show";

CSS_CLASSES.THEMED_BTN​

readonly THEMED_BTN: "themed-btn" = "themed-btn";

DEBOUNCE_DELAY​

readonly DEBOUNCE_DELAY: 250 = 250;

DEFAULT_THEME​

readonly DEFAULT_THEME: "dark" = "dark";

DOM_IDS​

readonly DOM_IDS: {
  ACTIVE_FILE_NAME: "active_file_name";
  ACTIVE_FILE_NAME_CONTAINER: "active_file_name_container";
  ALT_FIT_IFRAME: "altfit_iframe";
  CONTENT_CHART: "content_chart";
  CONTENT_DATA: "content_data";
  CONTENT_MAP: "content_map";
  CONTENT_SUMMARY: "content_summary";
  DROP_OVERLAY: "drop_overlay";
  NOTIFICATION: "notification";
  TAB_CHART: "tab_chart";
  TAB_SUMMARY: "tab_summary";
  UNLOAD_FILE_BTN: "unload_file_btn";
  ZWIFT_IFRAME: "zwift_iframe";
};

DOM_IDS.ACTIVE_FILE_NAME​

readonly ACTIVE_FILE_NAME: "active_file_name" = "active_file_name";

DOM_IDS.ACTIVE_FILE_NAME_CONTAINER​

readonly ACTIVE_FILE_NAME_CONTAINER: "active_file_name_container" = "active_file_name_container";

DOM_IDS.ALT_FIT_IFRAME​

readonly ALT_FIT_IFRAME: "altfit_iframe" = "altfit_iframe";

DOM_IDS.CONTENT_CHART​

readonly CONTENT_CHART: "content_chart" = "content_chart";

DOM_IDS.CONTENT_DATA​

readonly CONTENT_DATA: "content_data" = "content_data";

DOM_IDS.CONTENT_MAP​

readonly CONTENT_MAP: "content_map" = "content_map";

DOM_IDS.CONTENT_SUMMARY​

readonly CONTENT_SUMMARY: "content_summary" = "content_summary";

DOM_IDS.DROP_OVERLAY​

readonly DROP_OVERLAY: "drop_overlay" = "drop_overlay";

DOM_IDS.NOTIFICATION​

readonly NOTIFICATION: "notification" = "notification";

DOM_IDS.TAB_CHART​

readonly TAB_CHART: "tab_chart" = "tab_chart";

DOM_IDS.TAB_SUMMARY​

readonly TAB_SUMMARY: "tab_summary" = "tab_summary";

DOM_IDS.UNLOAD_FILE_BTN​

readonly UNLOAD_FILE_BTN: "unload_file_btn" = "unload_file_btn";

DOM_IDS.ZWIFT_IFRAME​

readonly ZWIFT_IFRAME: "zwift_iframe" = "zwift_iframe";

HEADER_HEIGHT​

readonly HEADER_HEIGHT: 60 = 60;

NOTIFICATION_TYPES​

readonly NOTIFICATION_TYPES: {
  ERROR: {
     ariaLabel: "Error";
     duration: 6000;
     icon: "❌";
     type: "error";
  };
  INFO: {
     ariaLabel: "Information";
     duration: 4000;
     icon: "ℹ️";
     type: "info";
  };
  SUCCESS: {
     ariaLabel: "Success";
     duration: 3000;
     icon: "✅";
     type: "success";
  };
  WARNING: {
     ariaLabel: "Warning";
     duration: 5000;
     icon: "⚠️";
     type: "warning";
  };
};

NOTIFICATION_TYPES.ERROR​

readonly ERROR: {
  ariaLabel: "Error";
  duration: 6000;
  icon: "❌";
  type: "error";
};

NOTIFICATION_TYPES.ERROR.ariaLabel​

readonly ariaLabel: "Error" = "Error";

NOTIFICATION_TYPES.ERROR.duration​

readonly duration: 6000 = 6000;

NOTIFICATION_TYPES.ERROR.icon​

readonly icon: "❌" = "❌";

NOTIFICATION_TYPES.ERROR.type​

readonly type: "error" = "error";

NOTIFICATION_TYPES.INFO​

readonly INFO: {
  ariaLabel: "Information";
  duration: 4000;
  icon: "ℹ️";
  type: "info";
};

NOTIFICATION_TYPES.INFO.ariaLabel​

readonly ariaLabel: "Information" = "Information";

NOTIFICATION_TYPES.INFO.duration​

readonly duration: 4000 = 4000;

NOTIFICATION_TYPES.INFO.icon​

readonly icon: "ℹ️" = "ℹ️";

NOTIFICATION_TYPES.INFO.type​

readonly type: "info" = "info";

NOTIFICATION_TYPES.SUCCESS​

readonly SUCCESS: {
  ariaLabel: "Success";
  duration: 3000;
  icon: "✅";
  type: "success";
};

NOTIFICATION_TYPES.SUCCESS.ariaLabel​

readonly ariaLabel: "Success" = "Success";

NOTIFICATION_TYPES.SUCCESS.duration​

readonly duration: 3000 = 3000;

NOTIFICATION_TYPES.SUCCESS.icon​

readonly icon: "✅" = "✅";

NOTIFICATION_TYPES.SUCCESS.type​

readonly type: "success" = "success";

NOTIFICATION_TYPES.WARNING​

readonly WARNING: {
  ariaLabel: "Warning";
  duration: 5000;
  icon: "⚠️";
  type: "warning";
};

NOTIFICATION_TYPES.WARNING.ariaLabel​

readonly ariaLabel: "Warning" = "Warning";

NOTIFICATION_TYPES.WARNING.duration​

readonly duration: 5000 = 5000;

NOTIFICATION_TYPES.WARNING.icon​

readonly icon: "⚠️" = "⚠️";

NOTIFICATION_TYPES.WARNING.type​

readonly type: "warning" = "warning";

readonly SIDEBAR_WIDTH: 250 = 250;

SUMMARY_COLUMN_SELECTOR_DELAY​

readonly SUMMARY_COLUMN_SELECTOR_DELAY: 100 = 100;

THEMES​

readonly THEMES: {
  DARK: "dark";
  LIGHT: "light";
  SYSTEM: "system";
};

THEMES.DARK​

readonly DARK: "dark" = "dark";

THEMES.LIGHT​

readonly LIGHT: "light" = "light";

THEMES.SYSTEM​

readonly SYSTEM: "system" = "system";