Rendering of buttons

assets/scripts/src/constants.js

@@ -15,6 +15,7 @@ export const CLASS_POPOVER_FOOTER = 'sholo-popover-footer';
 export const CLASS_CLOSE_BTN = 'sholo-close-btn';
 export const CLASS_NEXT_STEP_BTN = 'sholo-next-btn';
 export const CLASS_PREV_STEP_BTN = 'sholo-prev-btn';
+export const CLASS_BTN_DISABLED = 'sholo-disabled';
 
 // language=HTML
 export const POPOVER_HTML = `

assets/scripts/src/popover.js

 import Element from './element';
 import {
-  CLASS_POPOVER_DESCRIPTION,
+  CLASS_BTN_DISABLED,
+  CLASS_CLOSE_BTN,
+  CLASS_NEXT_STEP_BTN,
+  CLASS_POPOVER_DESCRIPTION, CLASS_POPOVER_FOOTER,
   CLASS_POPOVER_TIP,
-  CLASS_POPOVER_TITLE,
+  CLASS_POPOVER_TITLE, CLASS_PREV_STEP_BTN,
   ID_POPOVER,
-  OVERLAY_PADDING,
   POPOVER_HTML,
 } from './constants';
 
@@ -12,12 +14,20 @@ import {
  * Popover that is displayed on top of the highlighted element
  */
 export default class Popover extends Element {
-  constructor(options = {
-    padding: OVERLAY_PADDING,
-  }, window, document) {
+  constructor(options, window, document) {
     super();
 
-    this.options = options;
+    this.options = Object.assign({
+      isFirst: true,
+      isLast: true,
+      totalCount: 1,
+      currentIndex: 0,
+      doneBtnText: 'Done',
+      closeBtnText: 'Close',
+      nextBtnText: 'Next →',
+      prevBtnText: '← Previous',
+    }, options);
+
     this.window = window;
     this.document = document;
 
@@ -36,6 +46,10 @@ export default class Popover extends Element {
     this.tipNode = popover.querySelector(`.${CLASS_POPOVER_TIP}`);
     this.titleNode = popover.querySelector(`.${CLASS_POPOVER_TITLE}`);
     this.descriptionNode = popover.querySelector(`.${CLASS_POPOVER_DESCRIPTION}`);
+    this.footerNode = popover.querySelector(`.${CLASS_POPOVER_FOOTER}`);
+    this.nextBtnNode = popover.querySelector(`.${CLASS_NEXT_STEP_BTN}`);
+    this.prevBtnNode = popover.querySelector(`.${CLASS_PREV_STEP_BTN}`);
+    this.closeBtnNode = popover.querySelector(`.${CLASS_CLOSE_BTN}`);
   }
 
   /**
@@ -75,12 +89,16 @@ export default class Popover extends Element {
       .className = CLASS_POPOVER_TIP;
   }
 
+  /**
+   * Shows the popover at the given position
+   * @param position
+   */
   show(position) {
     this.reset();
 
     // Set the title and descriptions
-    this.titleNode.innerText = this.options.title;
-    this.descriptionNode.innerText = this.options.description;
+    this.titleNode.innerHTML = this.options.title;
+    this.descriptionNode.innerHTML = this.options.description;
 
     // Position the popover around the given position
     switch (this.options.position) {
@@ -101,6 +119,37 @@ export default class Popover extends Element {
         this.autoPosition(position);
         break;
     }
+
+    this.renderButtons();
+  }
+
+  /**
+   * Enables, disables buttons, sets the text and
+   * decides if to show them or not
+   */
+  renderButtons() {
+    this.nextBtnNode.innerHTML = this.options.nextBtnText;
+    this.prevBtnNode.innerHTML = this.options.prevBtnText;
+    this.closeBtnNode.innerHTML = this.options.closeBtnText;
+
+    // If there was only one item, hide the buttons
+    if (this.options.totalCount === 1) {
+      this.footerNode.style.display = 'none';
+      return;
+    }
+
+    this.footerNode.style.display = 'block';
+    if (this.options.isFirst) {
+      this.prevBtnNode.classList.add(CLASS_BTN_DISABLED);
+    } else {
+      this.prevBtnNode.classList.remove(CLASS_BTN_DISABLED);
+    }
+
+    if (this.options.isLast) {
+      this.nextBtnNode.innerHTML = this.options.doneBtnText;
+    } else {
+      this.nextBtnNode.innerHTML = this.options.nextBtnText;
+    }
   }
 
   /**
@@ -168,6 +217,7 @@ export default class Popover extends Element {
   /**
    * Automatically positions the popover around the given position
    * such that the element and popover remain in view
+   * @todo add the left and right positioning decisions
    * @param elementPosition
    */
   autoPosition(elementPosition) {

assets/scripts/src/sholo.js

@@ -183,8 +183,17 @@ export default class Sholo {
       }
 
       let popover = null;
-      const popoverOptions = Object.assign({}, this.options, elementOptions.popover || {});
       if (elementOptions.popover && elementOptions.popover.description) {
+        const popoverOptions = Object.assign(
+          {},
+          this.options,
+          elementOptions.popover, {
+            totalCount: steps.length,
+            currentIndex: index,
+            isFirst: index === 0,
+            isLast: index === steps.length - 1,
+          },
+        );
         popover = new Popover(popoverOptions, this.window, this.document);
       }
 

assets/styles/scss/demo.scss

@@ -119,6 +119,12 @@ div#sholo-popover-item {
       margin: 10px 0 0;
     }
 
+    a.sholo-disabled {
+      color: #808080;
+      cursor: default;
+      pointer-events: none;
+    }
+
     .sholo-close-btn {
       float: left;
     }

index.html

@@ -69,7 +69,7 @@
       popover: {
         title: 'Adding Introductions',
         description: 'You can use it to add popovers on top of the website',
-        position: 'left'
+        position: 'left',
       },
     },
     {