Merge pull request usablica#1118 from usablica/fix-next-button-single-step

fix(showElement): next/done button needs to be displayed when tour has one step

Author: afshinm

.jshintrc

@@ -5,17 +5,32 @@
   "eqeqeq": true,
   "globals": {
     "window": true,
-    "jest": true,
-    "describe": true,
-    "expect": true,
-    "test": true,
     "document": true,
     "exports": true,
     "define": true,
     "SVGElement": true,
+    "Element": true,
     "module": true,
     "console": true,
     "global": true,
-    "self": true
+    "self": true,
+
+    "afterAll": false,
+    "afterEach": false,
+    "beforeAll": false,
+    "beforeEach": false,
+    "check": false,
+    "describe": false,
+    "expect": false,
+    "gen": false,
+    "it": false,
+    "fit": false,
+    "jest": false,
+    "pit": false,
+    "require": false,
+    "test": false,
+    "xdescribe": false,
+    "xit": false,
+    "xtest": false
   }
 }

src/core/addOverlayLayer.js

@@ -12,7 +12,7 @@ import setStyle from "../util/setStyle";
  */
 export default function addOverlayLayer(targetElm) {
   const overlayLayer = createElement("div", {
-    className: "introjs-overlay"
+    className: "introjs-overlay",
   });
 
   const self = this;
@@ -24,7 +24,7 @@ export default function addOverlayLayer(targetElm) {
       bottom: 0,
       left: 0,
       right: 0,
-      position: 'fixed'
+      position: "fixed",
     });
   } else {
     // set overlay layer position
@@ -34,7 +34,7 @@ export default function addOverlayLayer(targetElm) {
         width: `${elementPosition.width}px`,
         height: `${elementPosition.height}px`,
         top: `${elementPosition.top}px`,
-        left: `${elementPosition.left}px`
+        left: `${elementPosition.left}px`,
       });
     }
   }
@@ -43,7 +43,7 @@ export default function addOverlayLayer(targetElm) {
 
   if (self._options.exitOnOverlayClick === true) {
     setStyle(overlayLayer, {
-      cursor: 'pointer'
+      cursor: "pointer",
     });
 
     overlayLayer.onclick = () => {

src/core/hint.js

@@ -132,7 +132,7 @@ export function addHints() {
 
   if (hintsWrapper === null) {
     hintsWrapper = createElement("div", {
-      className: "introjs-hints"
+      className: "introjs-hints",
     });
   }
 
@@ -163,7 +163,7 @@ export function addHints() {
     }
 
     const hint = createElement("a", {
-      className: "introjs-hint"
+      className: "introjs-hint",
     });
     setAnchorAsButton(hint);
 
@@ -179,11 +179,11 @@ export function addHints() {
     }
 
     const hintDot = createElement("div", {
-      className: "introjs-hint-dot"
+      className: "introjs-hint-dot",
     });
 
     const hintPulse = createElement("div", {
-      className: "introjs-hint-pulse"
+      className: "introjs-hint-pulse",
     });
 
     hint.appendChild(hintDot);
@@ -294,7 +294,7 @@ export function showHintDialog(stepId) {
   }
 
   const tooltipLayer = createElement("div", {
-    className: "introjs-tooltip"
+    className: "introjs-tooltip",
   });
   const tooltipTextLayer = createElement("div");
   const arrowLayer = createElement("div");

src/core/introForElement.js

@@ -28,7 +28,7 @@ export default function introForElement(targetElm, group) {
       //set the step
       currentItem.step = introItems.length + 1;
 
-      currentItem.title = currentItem.title || '';
+      currentItem.title = currentItem.title || "";
 
       //use querySelector function only when developer used CSS selector
       if (typeof currentItem.element === "string") {
@@ -47,7 +47,7 @@ export default function introForElement(targetElm, group) {
 
         if (floatingElementQuery === null) {
           floatingElementQuery = createElement("div", {
-            className: "introjsFloatingElement"
+            className: "introjsFloatingElement",
           });
 
           document.body.appendChild(floatingElementQuery);
@@ -102,7 +102,7 @@ export default function introForElement(targetElm, group) {
       if (step > 0) {
         introItems[step - 1] = {
           element: currentElement,
-          title: currentElement.getAttribute("data-title") || '',
+          title: currentElement.getAttribute("data-title") || "",
           intro: currentElement.getAttribute("data-intro"),
           step: parseInt(currentElement.getAttribute("data-step"), 10),
           tooltipClass: currentElement.getAttribute("data-tooltipclass"),
@@ -148,7 +148,7 @@ export default function introForElement(targetElm, group) {
 
         introItems[nextStep] = {
           element: currentElement,
-          title: currentElement.getAttribute("data-title") || '',
+          title: currentElement.getAttribute("data-title") || "",
           intro: currentElement.getAttribute("data-intro"),
           step: nextStep + 1,
           tooltipClass: currentElement.getAttribute("data-tooltipclass"),

src/core/setHelperLayerPosition.js

@@ -38,7 +38,7 @@ export default function setHelperLayerPosition(helperLayer) {
       width: `${elementPosition.width + widthHeightPadding}px`,
       height: `${elementPosition.height + widthHeightPadding}px`,
       top: `${elementPosition.top - widthHeightPadding / 2}px`,
-      left: `${elementPosition.left - widthHeightPadding / 2}px`
+      left: `${elementPosition.left - widthHeightPadding / 2}px`,
     });
   }
 }

src/core/showElement.js

@@ -40,7 +40,7 @@ function _disableInteraction() {
 
   if (disableInteractionLayer === null) {
     disableInteractionLayer = createElement("div", {
-      className: "introjs-disableInteraction"
+      className: "introjs-disableInteraction",
     });
 
     this._targetElement.appendChild(disableInteractionLayer);
@@ -194,34 +194,34 @@ export default function _showElement(targetElement) {
     // end of old element if-else condition
   } else {
     const helperLayer = createElement("div", {
-      className: highlightClass
+      className: highlightClass,
     });
     const referenceLayer = createElement("div", {
-      className: "introjs-tooltipReferenceLayer"
+      className: "introjs-tooltipReferenceLayer",
     });
     const arrowLayer = createElement("div", {
-      className: "introjs-arrow"
+      className: "introjs-arrow",
     });
     const tooltipLayer = createElement("div", {
-      className: "introjs-tooltip"
+      className: "introjs-tooltip",
     });
     const tooltipTextLayer = createElement("div", {
-      className: "introjs-tooltiptext"
+      className: "introjs-tooltiptext",
     });
     const tooltipHeaderLayer = createElement("div", {
-      className: "introjs-tooltip-header"
+      className: "introjs-tooltip-header",
     });
     const tooltipTitleLayer = createElement("h1", {
-      className: "introjs-tooltip-title"
+      className: "introjs-tooltip-title",
     });
     const bulletsLayer = createElement("div", {
-      className: "introjs-bullets"
+      className: "introjs-bullets",
     });
     const progressLayer = createElement("div");
     const buttonsLayer = createElement("div");
 
     setStyle(helperLayer, {
-      'box-shadow': `0 0 1px 2px rgba(33, 33, 33, 0.8), rgba(33, 33, 33, ${self._options.overlayOpacity.toString()}) 0 0 0 5000px`
+      "box-shadow": `0 0 1px 2px rgba(33, 33, 33, 0.8), rgba(33, 33, 33, ${self._options.overlayOpacity.toString()}) 0 0 0 5000px`,
     });
 
     // scroll to element
@@ -284,11 +284,11 @@ export default function _showElement(targetElement) {
     }
 
     const progressBar = createElement("div", {
-      className: "introjs-progressbar"
+      className: "introjs-progressbar",
     });
 
     if (this._options.progressBarAdditionalClass) {
-      progressBar.className += ' ' + this._options.progressBarAdditionalClass;
+      progressBar.className += " " + this._options.progressBarAdditionalClass;
     }
     progressBar.setAttribute("role", "progress");
     progressBar.setAttribute("aria-valuemin", 0);
@@ -353,7 +353,7 @@ export default function _showElement(targetElement) {
 
     //skip button
     skipTooltipButton = createElement("a", {
-      className: 'introjs-skipbutton'
+      className: "introjs-skipbutton",
     });
 
     setAnchorAsButton(skipTooltipButton);
@@ -376,21 +376,18 @@ export default function _showElement(targetElement) {
 
     tooltipHeaderLayer.appendChild(skipTooltipButton);
 
-    //in order to prevent displaying next/previous button always
+    //in order to prevent displaying previous button always
     if (this._introItems.length > 1) {
       buttonsLayer.appendChild(prevTooltipButton);
-      buttonsLayer.appendChild(nextTooltipButton);
     }
 
+    // we always need the next button because this
+    // button changes to "Done" in the last step of the tour
+    buttonsLayer.appendChild(nextTooltipButton);
     tooltipLayer.appendChild(buttonsLayer);
 
     //set proper position
-    placeTooltip.call(
-      self,
-      targetElement.element,
-      tooltipLayer,
-      arrowLayer
-    );
+    placeTooltip.call(self, targetElement.element, tooltipLayer, arrowLayer);
 
     // change the scroll of the window, if needed
     scrollTo.call(this, targetElement.scrollTo, targetElement, tooltipLayer);
@@ -474,12 +471,14 @@ export default function _showElement(targetElement) {
       ) {
         if (this._options.nextToDone === true) {
           nextTooltipButton.innerHTML = this._options.doneLabel;
-          addClass(nextTooltipButton, "introjs-donebutton");
+          addClass(
+            nextTooltipButton,
+            `${this._options.buttonClass} introjs-nextbutton introjs-donebutton`
+          );
         } else {
           nextTooltipButton.className = `${this._options.buttonClass} introjs-nextbutton introjs-disabled`;
         }
       }
-
     }
   } else {
     // steps between start and end

src/core/steps.js

@@ -57,7 +57,10 @@ export function nextStep() {
   let continueStep = true;
 
   if (typeof this._introBeforeChangeCallback !== "undefined") {
-    continueStep = this._introBeforeChangeCallback.call(this, nextStep && nextStep.element);
+    continueStep = this._introBeforeChangeCallback.call(
+      this,
+      nextStep && nextStep.element
+    );
   }
 
   // if `onbeforechange` returned `false`, stop displaying the element
@@ -98,7 +101,10 @@ export function previousStep() {
   let continueStep = true;
 
   if (typeof this._introBeforeChangeCallback !== "undefined") {
-    continueStep = this._introBeforeChangeCallback.call(this, nextStep && nextStep.element);
+    continueStep = this._introBeforeChangeCallback.call(
+      this,
+      nextStep && nextStep.element
+    );
   }
 
   // if `onbeforechange` returned `false`, stop displaying the element

src/util/addClass.js

@@ -14,7 +14,10 @@ export default function addClass(element, className) {
     // svg
     const pre = element.getAttribute("class") || "";
 
-    element.setAttribute("class", `${pre} ${className}`);
+    if (!pre.match(className)) {
+      // check if element doesn't already have className
+      element.setAttribute("class", `${pre} ${className}`);
+    }
   } else {
     if (element.classList !== undefined) {
       // check for modern classList property

src/util/appendChild.js

@@ -9,15 +9,15 @@ import setStyle from "./setStyle";
  */
 export default function appendChild(parentElement, element, animate) {
   if (animate) {
-    const existingOpacity = element.style.opacity || '1';
+    const existingOpacity = element.style.opacity || "1";
 
     setStyle(element, {
-      'opacity': '0'
+      opacity: "0",
     });
 
     window.setTimeout(() => {
       setStyle(element, {
-        'opacity': existingOpacity
+        opacity: existingOpacity,
       });
     }, 10);
   }

src/util/createElement.js

@@ -1,6 +1,6 @@
 /**
  * Create a DOM element with various attributes
- * 
+ *
  * @param {String} tagname
  * @param {Object} attrs
  * @return Element
@@ -18,7 +18,7 @@ export default function _createElement(tagname, attrs) {
   for (const k in attrs) {
     let v = attrs[k];
 
-    if (k === 'style') {
+    if (k === "style") {
       setStyle(element, v);
     } else if (k.match(setAttRegex)) {
       element.setAttribute(k, v);

src/util/removeChild.js

@@ -13,7 +13,7 @@ export default function removeChild(element, animate) {
 
   if (animate) {
     setStyle(element, {
-      'opacity': '0',
+      opacity: "0",
     });
 
     window.setTimeout(() => {

src/util/setStyle.js

@@ -6,13 +6,13 @@
  * @return null
  */
 export default function setStyle(element, style) {
-  let cssText = '';
+  let cssText = "";
 
   if (element.style.cssText) {
     cssText += element.style.cssText;
   }
 
-  if (typeof style === 'string') {
+  if (typeof style === "string") {
     cssText += style;
   } else {
     for (const rule in style) {