Changes to tooltip buttons

fiveminuteargument · afshinm · commit 58c24d1fc572 · 2013-04-21T22:41:13.000+04:30
Support for alternative text for 'skip' button on last step, and
'disabling' of prev/next buttons on first/last step
diff --git a/intro.js b/intro.js
@@ -33,6 +33,7 @@
       nextLabel: 'Next &rarr;',
       prevLabel: '&larr; Back',
       skipLabel: 'Skip',
+      doneLabel: 'Done',
       tooltipPosition: 'bottom'
     };
   }
@@ -264,7 +265,10 @@
       var oldHelperNumberLayer = oldHelperLayer.querySelector('.introjs-helperNumberLayer'),
           oldtooltipLayer      = oldHelperLayer.querySelector('.introjs-tooltiptext'),
           oldArrowLayer        = oldHelperLayer.querySelector('.introjs-arrow'),
-          oldtooltipContainer  = oldHelperLayer.querySelector('.introjs-tooltip');
+          oldtooltipContainer  = oldHelperLayer.querySelector('.introjs-tooltip'),
+          skipTooltipButton    = oldHelperLayer.querySelector('.introjs-skipbutton'),
+          prevTooltipButton    = oldHelperLayer.querySelector('.introjs-prevbutton'),
+          nextTooltipButton    = oldHelperLayer.querySelector('.introjs-nextbutton');
 
       //hide the tooltip
       oldtooltipContainer.style.opacity = 0;
@@ -326,7 +330,6 @@
         _nextStep.call(self);
       };
 
-      nextTooltipButton.className = 'introjs-button introjs-nextbutton';
       nextTooltipButton.href = 'javascript:void(0);';
       nextTooltipButton.innerHTML = this._options.nextLabel;
 
@@ -337,7 +340,6 @@
         _previousStep.call(self);
       };
 
-      prevTooltipButton.className = 'introjs-button introjs-prevbutton';
       prevTooltipButton.href = 'javascript:void(0);';
       prevTooltipButton.innerHTML = this._options.prevLabel;
 
@@ -360,6 +362,20 @@
       _placeTooltip.call(self, targetElement, tooltipLayer, arrowLayer);
     }
 
+    if (this._currentStep == 0) {
+      prevTooltipButton.className = 'introjs-button introjs-prevbutton introjs-disabled';
+      nextTooltipButton.className = 'introjs-button introjs-nextbutton';
+      skipTooltipButton.innerHTML = this._options.skipLabel
+    } else if (this._introItems.length - 1 == this._currentStep) {
+      skipTooltipButton.innerHTML = this._options.doneLabel
+      prevTooltipButton.className = 'introjs-button introjs-prevbutton';
+      nextTooltipButton.className = 'introjs-button introjs-nextbutton introjs-disabled';
+    } else {
+      prevTooltipButton.className = 'introjs-button introjs-prevbutton';
+      nextTooltipButton.className = 'introjs-button introjs-nextbutton';
+      skipTooltipButton.innerHTML = this._options.skipLabel
+    }
+
     //add target element position style
     targetElement.className += ' introjs-showElement';
 
diff --git a/introjs.css b/introjs.css
@@ -187,4 +187,11 @@
   -webkit-border-radius: 0 0.2em 0.2em 0;
   -moz-border-radius: 0 0.2em 0.2em 0;
   border-radius: 0 0.2em 0.2em 0;
+}
+
+.introjs-disabled, .introjs-disabled:hover {
+  color: #9a9a9a;
+  border-color: #d4d4d4;
+  box-shadow: none;
+  cursor: default;
 }
