Skip to main content

UI_CONSTANTS

FitFileViewer - API Documentation v30.0.1

FitFileViewer - API Documentation / utils/config/constants / UI_CONSTANTS

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"