adding two new options to hide next and previous button in the first and last steps, closes usablica#58 + adding cursor pointer to the bullet points

Author: afshinm

component.json

@@ -2,7 +2,7 @@
   "name": "intro.js",
   "repo": "usablica/intro.js",
   "description": "Better introductions for websites and features with a step-by-step guide for your projects",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "main": "intro.js",
   "scripts": [
     "intro.js"

intro.js

@@ -1,5 +1,5 @@
 /**
- * Intro.js v2.2.0
+ * Intro.js v2.3.0
  * https://github.com/usablica/intro.js
  *
  * Copyright (C) 2016 Afshin Mehrabani (@afshinmeh)
@@ -18,7 +18,7 @@
   }
 } (this, function (exports) {
   //Default config/variables
-  var VERSION = '2.2.0';
+  var VERSION = '2.3.0';
 
   /**
    * IntroJs main class
@@ -38,6 +38,10 @@
       skipLabel: 'Skip',
       /* Done button label in tooltip box */
       doneLabel: 'Done',
+      /* Hide previous button in the first step? Otherwise, it will be disabled button. */
+      hidePrev: true,
+      /* Hide next button in the last step? Otherwise, it will be disabled button. */
+      hideNext: true,
       /* Default tooltip box position */
       tooltipPosition: 'bottom',
       /* Next CSS class for tooltip boxes */
@@ -1009,14 +1013,28 @@
     nextTooltipButton.removeAttribute('tabIndex');
 
     if (this._currentStep == 0 && this._introItems.length > 1) {
-      prevTooltipButton.className = 'introjs-button introjs-prevbutton introjs-disabled';
-      prevTooltipButton.tabIndex = '-1';
       nextTooltipButton.className = 'introjs-button introjs-nextbutton';
+
+      if (this._options.hidePrev == true) {
+        prevTooltipButton.className = 'introjs-button introjs-prevbutton introjs-hidden';
+        nextTooltipButton.className += ' introjs-fullbutton';
+      } else {
+        prevTooltipButton.className = 'introjs-button introjs-prevbutton introjs-disabled';
+      }
+
+      prevTooltipButton.tabIndex = '-1';
       skipTooltipButton.innerHTML = this._options.skipLabel;
     } else if (this._introItems.length - 1 == this._currentStep || this._introItems.length == 1) {
       skipTooltipButton.innerHTML = this._options.doneLabel;
       prevTooltipButton.className = 'introjs-button introjs-prevbutton';
-      nextTooltipButton.className = 'introjs-button introjs-nextbutton introjs-disabled';
+
+      if (this._options.hideNext == true) {
+        nextTooltipButton.className = 'introjs-button introjs-nextbutton introjs-hidden';
+        prevTooltipButton.className += ' introjs-fullbutton';
+      } else {
+        nextTooltipButton.className = 'introjs-button introjs-nextbutton introjs-disabled';
+      }
+
       nextTooltipButton.tabIndex = '-1';
     } else {
       prevTooltipButton.className = 'introjs-button introjs-prevbutton';

introjs.css

@@ -276,12 +276,25 @@ tr.introjs-showElement > th {
   border-right: none;
 }
 
+.introjs-prevbutton.introjs-fullbutton {
+  border: 1px solid #d4d4d4;
+  -webkit-border-radius: 0.2em;
+  -moz-border-radius: 0.2em;
+  border-radius: 0.2em;
+}
+
 .introjs-nextbutton {
   -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-nextbutton.introjs-fullbutton {
+  -webkit-border-radius: 0.2em;
+  -moz-border-radius: 0.2em;
+  border-radius: 0.2em;
+}
+
 .introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus {
   color: #9a9a9a;
   border-color: #d4d4d4;
@@ -292,6 +305,10 @@ tr.introjs-showElement > th {
   text-decoration: none;
 }
 
+.introjs-hidden {
+     display: none;
+}
+
 .introjs-bullets {
   text-align: center;
 }
@@ -315,6 +332,7 @@ tr.introjs-showElement > th {
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   text-decoration: none;
+  cursor: pointer;
 }
 .introjs-bullets ul li a:hover {
   background: #999;