Move popover logic to separate class

assets/scripts/src/element.js

@@ -1,21 +1,26 @@
 import Position from './position';
 
+/**
+ * Wrapper around DOMElements to enrich them
+ * with the functionality necessary
+ */
 export default class Element {
   /**
    * DOM element object
    * @param node
    * @param options
+   * @param popover
    * @param overlay
    * @param window
    * @param document
    */
-  constructor(node, options, overlay, window, document) {
+  constructor(node, options, popover, overlay, window, document) {
     this.node = node;
     this.document = document;
     this.window = window;
     this.options = options;
     this.overlay = overlay;
-    this.popover = this.getPopover();
+    this.popover = popover;
   }
 
   /**
@@ -99,7 +104,7 @@ export default class Element {
 
   onDeselected() {
     // Will be called when element is about to be deselected
-    this.hidePopover();
+    this.popover.hide();
   }
 
   onHighlightStarted() {
@@ -125,42 +130,9 @@ export default class Element {
   }
 
   showPopover() {
-    this.resetPopover();
-
-    // Position at which the element is
     const position = this.getCalculatedPosition();
 
-    const popoverTip = this.popover.querySelector('.sholo-popover-tip');
-
-    const pageHeight = this.getFullPageSize().height;
-    const popoverHeight = this.getPopoverHeight();
-    const popoverMargin = this.options.padding + 10;
-
-    this.popover.style.left = `${position.left - this.options.padding}px`;
-
-    // Calculate different dimensions after attaching popover
-    const pageHeightAfterPopOver = position.bottom + popoverHeight + popoverMargin;
-
-    // If adding popover would go out of the window height, then show it to the top
-    if (pageHeightAfterPopOver >= pageHeight) {
-      this.popover.style.top = `${position.top - popoverHeight - popoverMargin}px`;
-      popoverTip.classList.add('bottom');
-    } else {
-      this.popover.style.top = `${position.bottom + popoverMargin}px`;
-      popoverTip.classList.add('top');
-    }
-  }
-
-  getPopover() {
-    // @todo: Create if not there
-    const popover = this.document.getElementById('sholo-popover-item');
-    popover.style.position = 'absolute';
-
-    return popover;
-  }
-
-  hidePopover() {
-    this.popover.style.display = 'none';
+    this.popover.show(position);
   }
 
   getFullPageSize() {
@@ -173,21 +145,4 @@ export default class Element {
       width: Math.max(body.scrollWidth, body.offsetWidth, html.scrollWidth, html.offsetWidth),
     };
   }
-
-  getPopoverHeight() {
-    return Math.max(this.popover.scrollHeight, this.popover.offsetHeight);
-  }
-
-  resetPopover() {
-    this.popover.style.display = 'block';
-    this.popover.style.left = '';
-    this.popover.style.top = '';
-    this.popover.style.bottom = '';
-    this.popover.style.right = '';
-
-    // Remove the positional classes from tip
-    this.popover
-      .querySelector('.sholo-popover-tip')
-      .className = 'sholo-popover-tip';
-  }
 }

assets/scripts/src/popover.js

@@ -0,0 +1,71 @@
+/**
+ * Popover that is displayed on top of the highlighted element
+ */
+import Element from './element';
+
+export default class Popover extends Element {
+  constructor(options = {
+    padding: 10,
+  }, window, document) {
+    super();
+
+    this.options = options;
+    this.window = window;
+    this.document = document;
+
+    this.node = this.getPopover();
+  }
+
+  getPopover() {
+    // @todo: Create if not there
+    const popover = this.document.getElementById('sholo-popover-item');
+    popover.style.position = 'absolute';
+
+    return popover;
+  }
+
+  getHeight() {
+    return Math.max(this.node.scrollHeight, this.node.offsetHeight);
+  }
+
+  hide() {
+    this.node.style.display = 'none';
+  }
+
+  reset() {
+    this.node.style.display = 'block';
+    this.node.style.left = '';
+    this.node.style.top = '';
+    this.node.style.bottom = '';
+    this.node.style.right = '';
+
+    // Remove the positional classes from tip
+    this.node
+      .querySelector('.sholo-popover-tip')
+      .className = 'sholo-popover-tip';
+  }
+
+  show(position) {
+    this.reset();
+
+    const popoverTip = this.node.querySelector('.sholo-popover-tip');
+
+    const pageHeight = this.getFullPageSize().height;
+    const popoverHeight = this.getHeight();
+    const popoverMargin = this.options.padding + 10;
+
+    this.node.style.left = `${position.left - this.options.padding}px`;
+
+    // Calculate different dimensions after attaching popover
+    const pageHeightAfterPopOver = position.bottom + popoverHeight + popoverMargin;
+
+    // If adding popover would go out of the window height, then show it to the top
+    if (pageHeightAfterPopOver >= pageHeight) {
+      this.node.style.top = `${position.top - popoverHeight - popoverMargin}px`;
+      popoverTip.classList.add('bottom');
+    } else {
+      this.node.style.top = `${position.bottom + popoverMargin}px`;
+      popoverTip.classList.add('top');
+    }
+  }
+}

assets/scripts/src/sholo.js

@@ -1,6 +1,7 @@
 import Overlay from './overlay';
 import Element from './element';
 import './polyfill';
+import Popover from './popover';
 
 /**
  * Plugin class that drives the plugin
@@ -172,7 +173,11 @@ export default class Sholo {
         return;
       }
 
-      const element = new Element(domElement, elementOptions, this.overlay, this.window, this.document);
+      // @todo pass the options such as position, button text etc
+      const popover = new Popover({
+        padding: this.options.padding,
+      }, this.window, this.document);
+      const element = new Element(domElement, elementOptions, popover, this.overlay, this.window, this.document);
 
       this.steps.push(element);
     });
@@ -199,7 +204,9 @@ export default class Sholo {
       return;
     }
 
-    const element = new Element(domElement, this.options, this.overlay, this.window, this.document);
+    // @todo add options such as position, button texts, additional classes etc
+    const popover = new Popover({}, this.window, this.document);
+    const element = new Element(domElement, this.options, popover, this.overlay, this.window, this.document);
     this.overlay.highlight(element);
   }
 }