Add popover functionality

.eslintrc.json

@@ -10,6 +10,7 @@
     "no-cond-assign": "off",
     "func-names": "off",
     "no-bitwise": "off",
+    "class-methods-use-this": "off",
     "no-param-reassign": [
       "off"
     ],

assets/scripts/src/element.js

@@ -11,6 +11,7 @@ export default class Element {
     this.document = document;
     this.window = window;
     this.options = options;
+    this.popover = this.getPopover();
   }
 
   /**
@@ -58,8 +59,38 @@ export default class Element {
     return position;
   }
 
+  onDeselected() {
+    // Will be called when element is about to be deselected
+    this.hidePopover();
+  }
+
+  onHighlightStarted() {
+    // Will be triggered when the element is about to be highlighted
+    // i.e. overlay has started transitioning towards this element
+    this.showPopover();
+  }
+
   onHighlighted() {
-    console.log('on highlighted');
-    console.log(this.getScreenCoordinates());
+    this.showPopover();
+  }
+
+  showPopover() {
+    const position = this.getCalculatedPosition();
+
+    this.popover.style.left = `${position.left}px`;
+    this.popover.style.top = `${position.bottom + 10}px`;
+    this.popover.style.display = 'block';
+  }
+
+  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';
   }
 }

assets/scripts/src/overlay.js

@@ -61,6 +61,14 @@ export default class Overlay {
       return;
     }
 
+    // Trigger the hook for highlight started
+    element.onHighlightStarted();
+
+    // Old element has been deselected
+    if (this.highlightedElement) {
+      this.highlightedElement.onDeselected();
+    }
+
     // get the position of element around which we need to draw
     const position = element.getCalculatedPosition();
     if (!position.canHighlight()) {
@@ -92,6 +100,7 @@ export default class Overlay {
    */
   clear() {
     this.positionToHighlight = new Position();
+    this.highlightedElement.onDeselected();
     this.highlightedElement = null;
 
     this.draw();
@@ -245,6 +254,7 @@ export default class Overlay {
     if (this.highlightedElement) {
       this.window.cancelAnimationFrame(this.redrawAnimation);
       this.highlight(this.highlightedElement, animate);
+      this.highlightedElement.onHighlighted();
     }
   }
 }

assets/scripts/src/sholo.js

@@ -42,6 +42,11 @@ export default class Sholo {
     this.window.addEventListener('mouseup', this.onMouseUp, false);
   }
 
+  /**
+   * Removes the popover if clicked outside the highlighted element
+   * or outside the
+   * @param e
+   */
   onMouseUp(e) {
     const highlightedElement = this.overlay.getHighlightedElement();
     const popover = document.getElementById('sholo-popover-item');
@@ -50,8 +55,11 @@ export default class Sholo {
       return;
     }
 
+    const clickedHighlightedElement = highlightedElement.node.contains(e.target);
+    const clickedPopover = popover && popover.contains(e.target);
+
     // Remove the overlay If clicked outside the highlighted element
-    if (!highlightedElement.node.contains(e.target) && (!popover || !popover.contains(e.target))) {
+    if (!clickedHighlightedElement && !clickedPopover) {
       this.overlay.clear();
     }
   }

assets/styles/scss/demo.scss

@@ -48,13 +48,7 @@ section {
 /////////////////////////////////////////
 div#sholo-popover-item {
 
-  //////// Temp style
-  position: absolute;
-  top: 285px;
-  left: 710px;
-  //////////////////
-
-  display: block;
+  display: none;
   background: white;
   margin: 0;
   padding: 15px;

index.html

@@ -19,8 +19,8 @@
     <h1>Sholo</h1>
     <p class="text-muted">A light-weight, no-dependency, vanilla JavaScript library to bring certain parts of page in
       spotlight</p>
-    <a href="#" class="btn btn__dark">Show an Example</a>
-    <a href="#" class="btn btn__light">Learn More</a>
+    <a href="javascript:void(0)" class="btn btn__example btn__dark">Show an Example</a>
+    <a href="javascript:void(0)" class="btn btn__light">Learn More</a>
   </section>
   <section class="section__purpose">
     <h1>Whats does it do?</h1>
@@ -62,12 +62,16 @@
 
 <script src="./assets/scripts/dist/sholo.js"></script>
 <script>
-  const sholo = new Sholo({
-    animate: true,
-    opacity: 0.8,
-    padding: 0
-  });
-  sholo.highlight('.section__header');
+    const sholo = new Sholo({
+      animate: true,
+      opacity: 0.8,
+      padding: 0
+    });
+
+  document.querySelector('.btn__example')
+    .addEventListener('click', function () {
+      sholo.highlight('.section__header');
+    });
 </script>
 </body>
 </html>