Allow displaying buttons on single highlight elements

.eslintrc.json

@@ -4,7 +4,6 @@
     "browser": true
   },
   "rules": {
-    "no-console": "off",
     "no-underscore-dangle": "off",
     "no-plusplus": "off",
     "no-cond-assign": "off",

src/common/constants.js

@@ -27,6 +27,8 @@ export const CLASS_CLOSE_BTN = 'driver-close-btn';
 export const CLASS_NEXT_STEP_BTN = 'driver-next-btn';
 export const CLASS_PREV_STEP_BTN = 'driver-prev-btn';
 export const CLASS_BTN_DISABLED = 'driver-disabled';
+export const CLASS_CLOSE_ONLY_BTN = 'driver-close-only-btn';
+export const CLASS_NAVIGATION_BTNS = 'driver-navigation-btns';
 
 // NOTE: It must match the one set in the animations in CSS file
 export const ANIMATION_DURATION_MS = 300;
@@ -37,9 +39,9 @@ export const POPOVER_HTML = (className = '') => `
     <div class="${CLASS_POPOVER_TIP}"></div>
     <div class="${CLASS_POPOVER_TITLE}">Popover Title</div>
     <div class="${CLASS_POPOVER_DESCRIPTION}">Popover Description</div>
-    <div class="${CLASS_POPOVER_FOOTER}">
+    <div class="driver-clearfix ${CLASS_POPOVER_FOOTER}">
       <button class="${CLASS_CLOSE_BTN}">Close</button>
-      <span class="driver-btn-group">
+      <span class="driver-btn-group ${CLASS_NAVIGATION_BTNS}">
         <button class="${CLASS_PREV_STEP_BTN}">&larr; Previous</button>
         <button class="${CLASS_NEXT_STEP_BTN}">Next &rarr;</button>
       </span>

src/core/popover.js

@@ -2,6 +2,7 @@ import Element from './element';
 import {
   CLASS_BTN_DISABLED,
   CLASS_CLOSE_BTN,
+  CLASS_CLOSE_ONLY_BTN,
   CLASS_NEXT_STEP_BTN,
   CLASS_POPOVER_DESCRIPTION,
   CLASS_POPOVER_FOOTER,
@@ -190,12 +191,27 @@ export default class Popover extends Element {
     this.prevBtnNode.innerHTML = this.options.prevBtnText;
     this.closeBtnNode.innerHTML = this.options.closeBtnText;
 
+    const hasSteps = this.options.totalCount && this.options.totalCount !== 1;
+
     // If there was only one item, hide the buttons
-    if (!this.options.showButtons || !this.options.totalCount || this.options.totalCount === 1) {
+    if (!this.options.showButtons) {
       this.footerNode.style.display = 'none';
       return;
     }
 
+    // If this is just a single highlighted element i.e. there
+    // are no other steps to go to – just hide the navigation buttons
+    if (!hasSteps) {
+      this.nextBtnNode.style.display = 'none';
+      this.prevBtnNode.style.display = 'none';
+      this.closeBtnNode.classList.add(CLASS_CLOSE_ONLY_BTN);
+    } else {
+      // @todo modify CSS to use block
+      this.nextBtnNode.style.display = 'inline-block';
+      this.prevBtnNode.style.display = 'inline-block';
+      this.closeBtnNode.classList.remove(CLASS_CLOSE_ONLY_BTN);
+    }
+
     this.footerNode.style.display = 'block';
     if (this.options.isFirst) {
       this.prevBtnNode.classList.add(CLASS_BTN_DISABLED);

src/driver.scss

@@ -107,8 +107,7 @@ div#driver-popover-item {
 
   .driver-popover-footer {
     display: block;
-    clear: both;
-    margin-top: 5px;
+    margin-top: 10px;
 
     button {
       display: inline-block;
@@ -123,7 +122,6 @@ div#driver-popover-item {
       background-color: $button-bg;
       border-radius: 2px;
       zoom: 1;
-      margin: 10px 0 0;
       line-height: 1.3;
     }
 
@@ -137,6 +135,10 @@ div#driver-popover-item {
       float: left;
     }
 
+    .driver-close-only-btn {
+      float: right;
+    }
+
     .driver-btn-group {
       float: right;
     }
@@ -162,6 +164,17 @@ div#driver-popover-item {
   }
 }
 
+.driver-clearfix:before {
+  content: "";
+  display: table;
+}
+
+.driver-clearfix:after {
+  clear: both;
+  content: "";
+  display: table;
+}
+
 .driver-stage-no-animation {
   -webkit-transition: none !important;
   -moz-transition: none !important;

src/index.js

@@ -182,13 +182,17 @@ export default class Driver {
       return;
     }
 
-    // Arrow keys to only perform if it is stepped introduction
-    if (this.steps.length !== 0) {
-      if (event.keyCode === RIGHT_KEY_CODE) {
-        this.handleNext();
-      } else if (event.keyCode === LEFT_KEY_CODE) {
-        this.handlePrevious();
-      }
+    // If there is no highlighted element or there is a highlighted element
+    // without popover or if the popover does not allow buttons - ignore
+    const highlightedElement = this.getHighlightedElement();
+    if (!highlightedElement || !highlightedElement.popover || !highlightedElement.popover.options.showButtons) {
+      return;
+    }
+
+    if (event.keyCode === RIGHT_KEY_CODE) {
+      this.handleNext();
+    } else if (event.keyCode === LEFT_KEY_CODE) {
+      this.handlePrevious();
     }
   }
 
@@ -226,7 +230,7 @@ export default class Driver {
 
     // Call the bound `onNext` handler if available
     const currentStep = this.steps[this.currentStep];
-    if (currentStep.options.onNext) {
+    if (currentStep && currentStep.options && currentStep.options.onNext) {
       currentStep.options.onNext(this.overlay.highlightedElement);
     }
 
@@ -246,7 +250,7 @@ export default class Driver {
 
     // Call the bound `onPrevious` handler if available
     const currentStep = this.steps[this.currentStep];
-    if (currentStep.options.onPrevious) {
+    if (currentStep && currentStep.options && currentStep.options.onPrevious) {
       currentStep.options.onPrevious(this.overlay.highlightedElement);
     }
 
@@ -357,7 +361,7 @@ export default class Driver {
    * @private
    */
   prepareElementFromStep(currentStep, allSteps = [], index = 0) {
-    let elementOptions = {};
+    let elementOptions = { ...this.options };
     let querySelector = currentStep;
 
     // If the `currentStep` is step definition
@@ -388,23 +392,19 @@ export default class Driver {
       ].filter(c => c).join(' ');
 
       const popoverOptions = {
-        ...this.options,
+        ...elementOptions,
         ...elementOptions.popover,
         className: mergedClassNames,
         totalCount: allSteps.length,
         currentIndex: index,
         isFirst: index === 0,
-        isLast: index === allSteps.length - 1,
+        isLast: allSteps.length === 0 || index === allSteps.length - 1, // Only one item or last item
       };
 
       popover = new Popover(popoverOptions, this.window, this.document);
     }
 
-    const stageOptions = {
-      ...this.options,
-      ...elementOptions,
-    };
-
+    const stageOptions = { ...elementOptions };
     const stage = new Stage(stageOptions, this.window, this.document);
 
     return new Element({