Buttons in the popover

.eslintrc.json

@@ -3,6 +3,9 @@
   "env": {
     "browser": true
   },
+  "ecmaFeatures": {
+    "experimentalObjectRestSpread": true
+  },
   "rules": {
     "no-console": "off",
     "no-underscore-dangle": "off",

assets/scripts/src/overlay.js

@@ -57,7 +57,7 @@ export default class Overlay {
    * @param animate bool
    */
   highlight(element, animate = true) {
-    if (!element) {
+    if (!element || !element.node) {
       return;
     }
 

assets/scripts/src/sholo.js

@@ -21,10 +21,13 @@ export default class Sholo {
     this.document = document;
     this.window = window;
 
+    this.steps = [];            // steps to be presented if any
+    this.currentStep = 0;       // index for the currently highlighted step
+
     this.onScroll = this.onScroll.bind(this);
     this.onResize = this.onResize.bind(this);
     this.onKeyUp = this.onKeyUp.bind(this);
-    this.onMouseUp = this.onMouseUp.bind(this);
+    this.onClick = this.onClick.bind(this);
 
     // Event bindings
     this.bind();
@@ -39,7 +42,7 @@ export default class Sholo {
     this.document.addEventListener('DOMMouseScroll', this.onScroll, false);
     this.window.addEventListener('resize', this.onResize, false);
     this.window.addEventListener('keyup', this.onKeyUp, false);
-    this.window.addEventListener('mouseup', this.onMouseUp, false);
+    this.window.addEventListener('click', this.onClick, false);
   }
 
   /**
@@ -47,23 +50,36 @@ export default class Sholo {
    * or outside the
    * @param e
    */
-  onMouseUp(e) {
-    const highlightedElement = this.overlay.getHighlightedElement();
-    const popover = document.getElementById('sholo-popover-item');
-
-    if (!highlightedElement || !highlightedElement.node) {
+  onClick(e) {
+    if (!this.hasHighlightedElement()) {
+      // Has no highlighted element so ignore the click
       return;
     }
 
+    const highlightedElement = this.overlay.getHighlightedElement();
+    const popover = document.getElementById('sholo-popover-item');
+
     const clickedHighlightedElement = highlightedElement.node.contains(e.target);
     const clickedPopover = popover && popover.contains(e.target);
 
     // Remove the overlay If clicked outside the highlighted element
     if (!clickedHighlightedElement && !clickedPopover) {
       this.overlay.clear();
+      return;
+    }
+
+    const nextClicked = e.target.classList.contains('sholo-next-btn');
+    if (nextClicked) {
+      this.currentStep += 1;
+      this.overlay.highlight(this.steps[this.currentStep]);
     }
   }
 
+  hasHighlightedElement() {
+    const highlightedElement = this.overlay.getHighlightedElement();
+    return highlightedElement && highlightedElement.node;
+  }
+
   /**
    * Handler for the onScroll event on document
    * Refreshes without animation on scroll to make sure
@@ -93,26 +109,50 @@ export default class Sholo {
     }
   }
 
+  defineSteps(steps) {
+    this.steps = [];
+
+    steps.forEach((step, index) => {
+      if (!step.element) {
+        throw new Error(`Element (query selector or a dom element) missing in step ${index}`);
+      }
+
+      const domElement = Sholo.findDomElement(step.element);
+      const element = new Element(domElement, Object.assign({}, this.options, step));
+
+      this.steps.push(element);
+    });
+  }
+
+  start() {
+    if (!this.steps || this.steps.length === 0) {
+      throw new Error('There are no steps defined to iterate');
+    }
+
+    this.currentStep = 0;
+    this.overlay.highlight(this.steps[0]);
+  }
+
   /**
    * Highlights the given selector
    * @param selector
    */
   highlight(selector) {
-    let domElement;
+    const domElement = Sholo.findDomElement(selector);
+
+    const element = new Element(domElement, this.options);
+    this.overlay.highlight(element);
+  }
 
+  static findDomElement(selector) {
     if (typeof selector === 'string') {
-      domElement = document.querySelector(selector);
-    } else if (typeof selector === 'object') {
-      domElement = selector;
-    } else {
-      throw new Error('Element can only be string or the dom element');
+      return document.querySelector(selector);
     }
 
-    if (domElement) {
-      const element = new Element(domElement, this.options);
-      this.overlay.highlight(element);
-    } else {
-      this.overlay.clear();
+    if (typeof selector === 'object') {
+      return selector;
     }
+
+    throw new Error('Element can only be string or the dom element');
   }
 }

assets/styles/scss/demo.scss

@@ -118,7 +118,7 @@ div#sholo-popover-item {
       margin: 10px 0 0;
     }
 
-    .sholo-close {
+    .sholo-close-btn {
       float: left;
     }
 

index.html

@@ -14,10 +14,10 @@
   <div class="sholo-popover-title">Did you know?</div>
   <div class="sholo-popover-description">You can make step by step introductions with sholo!</div>
   <div class="sholo-popover-footer">
-    <a href="javascript:void(0)" class="sholo-close">Close</a>
+    <a href="javascript:void(0)" class="sholo-close-btn">Close</a>
     <span class="sholo-btn-group">
-      <a href="javascript:void(0)">&larr; Previous</a>
-      <a href="javascript:void(0)">Next &rarr;</a>
+      <a class="sholo-prev-btn" href="javascript:void(0)">&larr; Previous</a>
+      <a class="sholo-next-btn" href="javascript:void(0)">Next &rarr;</a>
     </span>
   </div>
 </div>
@@ -75,10 +75,15 @@
     padding: 5
   });
 
+  sholo.defineSteps([
+    { element: '.section__header' },
+    { element: '.section__examples' },
+    { element: '.section__contributing' },
+  ]);
 
   document.querySelector('.btn__example')
     .addEventListener('click', function () {
-      sholo.highlight('.section__header');
+      sholo.start();
     });
 </script>
 </body>