File size: 2,254 Bytes
a63a502 920a3e5 7ee7519 4e74228 438fea8 e5c37ad a63a502 bdfd65a 8122c36 bdfd65a 2f7f50d fcd0eab cb89283 71c61ac 59d1882 8122c36 df9f42f 6a7ee1e 2d9f282 f3edffc 6a7ee1e cfadc6c 2d9f282 6a7ee1e df9f42f 3155c68 df9f42f 3155c68 6a7ee1e bdfd65a ef1f6b6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
export const OVERLAY_OPACITY = 0.75;
export const OVERLAY_PADDING = 10;
export const SHOULD_ANIMATE_OVERLAY = true;
export const SHOULD_OUTSIDE_CLICK_CLOSE = true;
export const ALLOW_KEYBOARD_CONTROL = true;
export const SHOULD_OUTSIDE_CLICK_NEXT = false;
export const ESC_KEY_CODE = 27;
export const LEFT_KEY_CODE = 37;
export const RIGHT_KEY_CODE = 39;
export const ID_OVERLAY = 'driver-page-overlay';
export const ID_STAGE = 'driver-highlighted-element-stage';
export const ID_POPOVER = 'driver-popover-item';
export const CLASS_DRIVER_HIGHLIGHTED_ELEMENT = 'driver-highlighted-element';
export const CLASS_POSITION_RELATIVE = 'driver-position-relative';
export const CLASS_FIX_STACKING_CONTEXT = 'driver-fix-stacking';
export const CLASS_STAGE_NO_ANIMATION = 'driver-stage-no-animation';
export const CLASS_POPOVER_TIP = 'driver-popover-tip';
export const CLASS_POPOVER_TITLE = 'driver-popover-title';
export const CLASS_POPOVER_DESCRIPTION = 'driver-popover-description';
export const CLASS_POPOVER_FOOTER = 'driver-popover-footer';
export const CLASS_CLOSE_BTN = 'driver-close-btn';
export const CLASS_NEXT_STEP_BTN = 'driver-next-btn';
export const CLASS_PREV_STEP_BTN = 'driver-prev-btn';
export const CLASS_BTN_DISABLED = 'driver-disabled';
export const CLASS_CLOSE_ONLY_BTN = 'driver-close-only-btn';
export const CLASS_NAVIGATION_BTNS = 'driver-navigation-btns';
// NOTE: It must match the one set in the animations in CSS file
export const ANIMATION_DURATION_MS = 300;
// language=HTML
export const POPOVER_HTML = (className = '') => `
<div id="${ID_POPOVER}" class="${className}">
<div class="${CLASS_POPOVER_TIP}"></div>
<div class="${CLASS_POPOVER_TITLE}">Popover Title</div>
<div class="${CLASS_POPOVER_DESCRIPTION}">Popover Description</div>
<div class="driver-clearfix ${CLASS_POPOVER_FOOTER}">
<button class="${CLASS_CLOSE_BTN}">Close</button>
<span class="driver-btn-group ${CLASS_NAVIGATION_BTNS}">
<button class="${CLASS_PREV_STEP_BTN}">← Previous</button>
<button class="${CLASS_NEXT_STEP_BTN}">Next →</button>
</span>
</div>
</div>`;
export const OVERLAY_HTML = `<div id="${ID_OVERLAY}"></div>`;
export const STAGE_HTML = `<div id="${ID_STAGE}"></div>`;
|