Move constants to separate file

assets/scripts/src/constants.js

@@ -0,0 +1,14 @@
+export const OVERLAY_OPACITY = 0.75;
+export const OVERLAY_PADDING = 10;
+export const OVERLAY_ANIMATE = true;
+export const OVERLAY_ZINDEX = '999999999';
+
+export const ESC_KEYCODE = 27;
+
+export const ID_POPOVER = 'sholo-popover-item';
+export const ID_OVERLAY = 'sholo-canvas-overlay';
+
+export const CLASS_POPOVER_TIP = 'sholo-popover-tip';
+export const CLASS_NEXT_STEP_BTN = 'sholo-next-btn';
+export const CLASS_PREV_STEP_BTN = 'sholo-prev-btn';
+export const CLASS_CLOSE_BTN = 'sholo-close-btn';

assets/scripts/src/overlay.js

@@ -1,4 +1,5 @@
 import Position from './position';
+import { ID_OVERLAY, OVERLAY_ANIMATE, OVERLAY_OPACITY, OVERLAY_PADDING, OVERLAY_ZINDEX } from './constants';
 
 /**
  * Responsible for overlay creation and manipulation i.e.
@@ -13,9 +14,9 @@ export default class Overlay {
    * @param document
    */
   constructor({
-    opacity = 0.75,
-    padding = 10,
-    animate = true,
+    opacity = OVERLAY_OPACITY,
+    padding = OVERLAY_PADDING,
+    animate = OVERLAY_ANIMATE,
   }, window, document) {
     this.opacity = opacity; // Fixed opacity for the layover
     this.padding = padding; // Padding around the highlighted item
@@ -42,7 +43,7 @@ export default class Overlay {
    */
   resetOverlay() {
     // Check and remove the canvas if it already exists
-    const canvasOverlay = this.document.getElementById('sholo-canvas-overlay');
+    const canvasOverlay = this.document.getElementById(ID_OVERLAY);
     if (canvasOverlay && canvasOverlay.parentNode) {
       canvasOverlay.parentNode.removeChild(canvasOverlay);
     }
@@ -52,13 +53,13 @@ export default class Overlay {
     this.overlay = overlay;
     this.context = overlay.getContext('2d');
 
-    this.overlay.id = 'sholo-canvas-overlay';
+    this.overlay.id = ID_OVERLAY;
     this.overlay.style.pointerEvents = 'none';
     this.overlay.style.background = 'transparent';
     this.overlay.style.position = 'fixed';
     this.overlay.style.top = '0';
     this.overlay.style.left = '0';
-    this.overlay.style.zIndex = '999999999';
+    this.overlay.style.zIndex = OVERLAY_ZINDEX;
   }
 
   /**

assets/scripts/src/popover.js

@@ -1,8 +1,9 @@
+import Element from './element';
+import { CLASS_POPOVER_TIP, ID_POPOVER } from './constants';
+
 /**
  * Popover that is displayed on top of the highlighted element
  */
-import Element from './element';
-
 export default class Popover extends Element {
   constructor(options = {
     padding: 10,
@@ -18,7 +19,7 @@ export default class Popover extends Element {
 
   getPopover() {
     // @todo: Create if not there
-    const popover = this.document.getElementById('sholo-popover-item');
+    const popover = this.document.getElementById(ID_POPOVER);
     popover.style.position = 'absolute';
 
     return popover;
@@ -41,14 +42,14 @@ export default class Popover extends Element {
 
     // Remove the positional classes from tip
     this.node
-      .querySelector('.sholo-popover-tip')
-      .className = 'sholo-popover-tip';
+      .querySelector(`.${CLASS_POPOVER_TIP}`)
+      .className = CLASS_POPOVER_TIP;
   }
 
   show(position) {
     this.reset();
 
-    const popoverTip = this.node.querySelector('.sholo-popover-tip');
+    const popoverTip = this.node.querySelector(`.${CLASS_POPOVER_TIP}`);
 
     const pageHeight = this.getFullPageSize().height;
     const popoverHeight = this.getHeight();

assets/scripts/src/sholo.js

@@ -2,6 +2,7 @@ import Overlay from './overlay';
 import Element from './element';
 import './polyfill';
 import Popover from './popover';
+import { CLASS_CLOSE_BTN, CLASS_NEXT_STEP_BTN, CLASS_PREV_STEP_BTN, ESC_KEYCODE, ID_POPOVER } from './constants';
 
 /**
  * Plugin class that drives the plugin
@@ -58,7 +59,7 @@ export default class Sholo {
     }
 
     const highlightedElement = this.overlay.getHighlightedElement();
-    const popover = this.document.getElementById('sholo-popover-item');
+    const popover = this.document.getElementById(ID_POPOVER);
 
     const clickedHighlightedElement = highlightedElement.node.contains(e.target);
     const clickedPopover = popover && popover.contains(e.target);
@@ -69,9 +70,9 @@ export default class Sholo {
       return;
     }
 
-    const nextClicked = e.target.classList.contains('sholo-next-btn');
-    const prevClicked = e.target.classList.contains('sholo-prev-btn');
-    const closeClicked = e.target.classList.contains('sholo-close-btn');
+    const nextClicked = e.target.classList.contains(CLASS_NEXT_STEP_BTN);
+    const prevClicked = e.target.classList.contains(CLASS_PREV_STEP_BTN);
+    const closeClicked = e.target.classList.contains(CLASS_CLOSE_BTN);
 
     if (closeClicked) {
       this.reset();
@@ -152,7 +153,7 @@ export default class Sholo {
    * @param event
    */
   onKeyUp(event) {
-    if (event.keyCode === 27) {
+    if (event.keyCode === ESC_KEYCODE) {
       this.overlay.clear();
     }
   }