Skip to main content

UI_CONSTANTS

FitFileViewer - API Documentation v29.4.0

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

Variable: UI_CONSTANTS

const UI_CONSTANTS: { DEFAULT_THEME: string; THEMES: { DARK: string; LIGHT: string; SYSTEM: string; }; NOTIFICATION_TYPES: { ERROR: { ariaLabel: string; duration: number; icon: string; type: string; }; INFO: { ariaLabel: string; duration: number; icon: string; type: string; }; SUCCESS: { ariaLabel: string; duration: number; icon: string; type: string; }; WARNING: { ariaLabel: string; duration: number; icon: string; type: string; }; }; DOM_IDS: { ACTIVE_FILE_NAME: string; ACTIVE_FILE_NAME_CONTAINER: string; ALT_FIT_IFRAME: string; CONTENT_CHART: string; CONTENT_DATA: string; CONTENT_MAP: string; CONTENT_SUMMARY: string; DROP_OVERLAY: string; NOTIFICATION: string; TAB_CHART: string; TAB_SUMMARY: string; UNLOAD_FILE_BTN: string; ZWIFT_IFRAME: string; }; CSS_CLASSES: { ACTIVE: string; HIDDEN: string; LOADING: string; SHOW: string; THEMED_BTN: string; }; ANIMATION_DURATION: number; DEBOUNCE_DELAY: number; SUMMARY_COLUMN_SELECTOR_DELAY: number; SIDEBAR_WIDTH: number; HEADER_HEIGHT: number; }

Defined in: utils/config/constants.js:100

UI-related constants and configurations

Type Declaration​

DEFAULT_THEME​

DEFAULT_THEME: string = "dark"

Theme configuration

THEMES​

THEMES: { DARK: string; LIGHT: string; SYSTEM: string; }

THEMES.DARK​

DARK: string = "dark"

THEMES.LIGHT​

LIGHT: string = "light"

THEMES.SYSTEM​

SYSTEM: string = "system"

NOTIFICATION_TYPES​

NOTIFICATION_TYPES: { ERROR: { ariaLabel: string; duration: number; icon: string; type: string; }; INFO: { ariaLabel: string; duration: number; icon: string; type: string; }; SUCCESS: { ariaLabel: string; duration: number; icon: string; type: string; }; WARNING: { ariaLabel: string; duration: number; icon: string; type: string; }; }

Notification configurations

NOTIFICATION_TYPES.ERROR​

ERROR: { ariaLabel: string; duration: number; icon: string; type: string; }

NOTIFICATION_TYPES.ERROR.ariaLabel​

ariaLabel: string = "Error"

NOTIFICATION_TYPES.ERROR.duration​

duration: number = 6000

NOTIFICATION_TYPES.ERROR.icon​

icon: string = "❌"

NOTIFICATION_TYPES.ERROR.type​

type: string = "error"

NOTIFICATION_TYPES.INFO​

INFO: { ariaLabel: string; duration: number; icon: string; type: string; }

NOTIFICATION_TYPES.INFO.ariaLabel​

ariaLabel: string = "Information"

NOTIFICATION_TYPES.INFO.duration​

duration: number = 4000

NOTIFICATION_TYPES.INFO.icon​

icon: string = "ℹ️"

NOTIFICATION_TYPES.INFO.type​

type: string = "info"

NOTIFICATION_TYPES.SUCCESS​

SUCCESS: { ariaLabel: string; duration: number; icon: string; type: string; }

NOTIFICATION_TYPES.SUCCESS.ariaLabel​

ariaLabel: string = "Success"

NOTIFICATION_TYPES.SUCCESS.duration​

duration: number = 3000

NOTIFICATION_TYPES.SUCCESS.icon​

icon: string = "✅"

NOTIFICATION_TYPES.SUCCESS.type​

type: string = "success"

NOTIFICATION_TYPES.WARNING​

WARNING: { ariaLabel: string; duration: number; icon: string; type: string; }

NOTIFICATION_TYPES.WARNING.ariaLabel​

ariaLabel: string = "Warning"

NOTIFICATION_TYPES.WARNING.duration​

duration: number = 5000

NOTIFICATION_TYPES.WARNING.icon​

icon: string = "⚠️"

NOTIFICATION_TYPES.WARNING.type​

type: string = "warning"

DOM_IDS​

DOM_IDS: { ACTIVE_FILE_NAME: string; ACTIVE_FILE_NAME_CONTAINER: string; ALT_FIT_IFRAME: string; CONTENT_CHART: string; CONTENT_DATA: string; CONTENT_MAP: string; CONTENT_SUMMARY: string; DROP_OVERLAY: string; NOTIFICATION: string; TAB_CHART: string; TAB_SUMMARY: string; UNLOAD_FILE_BTN: string; ZWIFT_IFRAME: string; }

Common DOM element IDs

DOM_IDS.ACTIVE_FILE_NAME​

ACTIVE_FILE_NAME: string = "activeFileName"

DOM_IDS.ACTIVE_FILE_NAME_CONTAINER​

ACTIVE_FILE_NAME_CONTAINER: string = "activeFileNameContainer"

DOM_IDS.ALT_FIT_IFRAME​

ALT_FIT_IFRAME: string = "altfit-iframe"

DOM_IDS.CONTENT_CHART​

CONTENT_CHART: string = "content-chart"

DOM_IDS.CONTENT_DATA​

CONTENT_DATA: string = "content-data"

DOM_IDS.CONTENT_MAP​

CONTENT_MAP: string = "content-map"

DOM_IDS.CONTENT_SUMMARY​

CONTENT_SUMMARY: string = "content-summary"

DOM_IDS.DROP_OVERLAY​

DROP_OVERLAY: string = "drop-overlay"

DOM_IDS.NOTIFICATION​

NOTIFICATION: string = "notification"

DOM_IDS.TAB_CHART​

TAB_CHART: string = "tab-chart"

DOM_IDS.TAB_SUMMARY​

TAB_SUMMARY: string = "tab-summary"

DOM_IDS.UNLOAD_FILE_BTN​

UNLOAD_FILE_BTN: string = "unloadFileBtn"

DOM_IDS.ZWIFT_IFRAME​

ZWIFT_IFRAME: string = "zwift-iframe"

CSS_CLASSES​

CSS_CLASSES: { ACTIVE: string; HIDDEN: string; LOADING: string; SHOW: string; THEMED_BTN: string; }

Common CSS classes

CSS_CLASSES.ACTIVE​

ACTIVE: string = "active"

CSS_CLASSES.HIDDEN​

HIDDEN: string = "hidden"

CSS_CLASSES.LOADING​

LOADING: string = "loading"

CSS_CLASSES.SHOW​

SHOW: string = "show"

CSS_CLASSES.THEMED_BTN​

THEMED_BTN: string = "themed-btn"

ANIMATION_DURATION​

ANIMATION_DURATION: number = 300

Animation and timing

DEBOUNCE_DELAY​

DEBOUNCE_DELAY: number = 250

SUMMARY_COLUMN_SELECTOR_DELAY​

SUMMARY_COLUMN_SELECTOR_DELAY: number = 100

SIDEBAR_WIDTH: number = 250

Layout constants

HEADER_HEIGHT​

HEADER_HEIGHT: number = 60