add progress bar

danishin · Sep 29, 2014 · c4d055e · c4d055e
1 parent c2848f9
commit c4d055e
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -349,6 +349,7 @@ introJs().onafterchange(function(targetElement) {
  - `keyboardNavigation`: Navigating with keyboard or not, `true` or `false`
  - `showButtons`: Show introduction navigation buttons or not, `true` or `false`
  - `showBullets`: Show introduction bullets or not, `true` or `false`
+ - `showProgress`: Show introduction progress or not, `true` or `false`
  - `scrollToElement`: Auto scroll to highlighted element if it's outside of viewport, `true` or `false`
  - `overlayOpacity`: Adjust the overlay opacity, `Number`
  - `disableInteraction`: Disable an interaction inside element or not, `true` or `false`

diff --git a/intro.js b/intro.js
@@ -56,6 +56,8 @@
       showButtons: true,
       /* Show tour bullets? */
       showBullets: true,
+      /* Show tour progress? */
+      showProgress: false,
       /* Scroll to highlighted element? */
       scrollToElement: true,
       /* Set the overlay opacity */
@@ -729,6 +731,8 @@
         oldReferenceLayer.querySelector('.introjs-bullets li > a.active').className = '';
         oldReferenceLayer.querySelector('.introjs-bullets li > a[data-stepnumber="' + targetElement.step + '"]').className = 'active';
 
+        oldReferenceLayer.querySelector('.introjs-progress .introjs-progressbar').setAttribute('style', 'width:' + _getProgress.call(self) + '%;');
+
         //show the tooltip
         oldtooltipContainer.style.opacity = 1;
         if (oldHelperNumberLayer) oldHelperNumberLayer.style.opacity = 1;
@@ -741,6 +745,7 @@
           tooltipLayer      = document.createElement('div'),
           tooltipTextLayer  = document.createElement('div'),
           bulletsLayer      = document.createElement('div'),
+          progressLayer     = document.createElement('div'),
           buttonsLayer      = document.createElement('div');
 
       helperLayer.className = highlightClass;
@@ -788,6 +793,17 @@
 
       bulletsLayer.appendChild(ulContainer);
 
+      progressLayer.className = 'introjs-progress';
+
+      if (this._options.showProgress === false) {
+        progressLayer.style.display = 'none';
+      }
+      var progressBar = document.createElement('div');
+      progressBar.className = 'introjs-progressbar';
+      progressBar.setAttribute('style', 'width:' + _getProgress.call(this) + '%;');
+
+      progressLayer.appendChild(progressBar);
+
       buttonsLayer.className = 'introjs-tooltipbuttons';
       if (this._options.showButtons === false) {
         buttonsLayer.style.display = 'none';
@@ -796,6 +812,7 @@
       tooltipLayer.className = 'introjs-tooltip';
       tooltipLayer.appendChild(tooltipTextLayer);
       tooltipLayer.appendChild(bulletsLayer);
+      tooltipLayer.appendChild(progressLayer);
 
       //add helper layer number
       if (this._options.showStepNumbers == true) {
@@ -1078,6 +1095,19 @@
     return elementPosition;
   }
 
+  /**
+   * Gets the current progress percentage
+   *
+   * @api private
+   * @method _getProgress
+   * @returns current progress percentage
+   */
+  function _getProgress() {
+    // Steps are 0 indexed
+    var currentStep = parseInt((this._currentStep + 1), 10);
+    return ((currentStep / this._introItems.length) * 100);
+  }
+
   /**
    * Overwrites obj1's values with obj2's and adds obj2's if non existent in obj1
    * via: http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically

diff --git a/introjs.css b/introjs.css
@@ -311,6 +311,24 @@ tr.introjs-showElement > th {
 .introjs-bullets ul li a.active {
   background: #999;
 }
+
+.introjs-progress {
+  overflow: hidden;
+  height: 10px;
+  margin: 10px 0 5px 0;
+  border-radius: 4px;
+  background-color: #ecf0f1
+}
+.introjs-progressbar {
+  float: left;
+  width: 0%;
+  height: 100%;
+  font-size: 10px;
+  line-height: 10px;
+  text-align: center;
+  background-color: #08c;
+}
+
 .introjsFloatingElement {
   position: absolute;
   height: 0;

diff --git a/themes/introjs-nassim.css b/themes/introjs-nassim.css
@@ -3,7 +3,7 @@
   z-index: 999999;
   background: #181818;
   opacity: 0;
-  
+
   -webkit-transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
       -ms-transition: all 0.3s ease-out;
@@ -128,7 +128,7 @@
 
 .introjs-tooltiptext {
     margin-left: -10px;
-  
+
     margin-right: -10px;
     /* border-top: 1px solid #FFFFFF; */
     /* background: #FAFAFA; */
@@ -144,8 +144,8 @@
   padding-bottom: 10px;
 }
 
-/* 
- Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/ 
+/*
+ Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
  Changed by Afshin Mehrabani
 */
 .introjs-button {
@@ -185,13 +185,13 @@
 .introjs-button:hover {
   color: #fff;
   background: #2671A2;
-  text-decoration: none; 
+  text-decoration: none;
   border-color: #235677;
 }
 
 .introjs-button:focus,
 .introjs-button:active {
-    background: #23587A;  text-decoration: none;  
+    background: #23587A;  text-decoration: none;
     color: #fff;
     /* bottom: -1px; */
     box-shadow: none;
@@ -211,15 +211,15 @@
 }
 
 .introjs-skipbutton:hover {
-    background: #EB1540;  
+    background: #EB1540;
     border-color: #B91D0D;
-  
+
 }
 
 .introjs-skipbutton:active, .introjs-skipbutton:focus {
-    background: #C02312;  
+    background: #C02312;
     /* box-shadow: 0 1px 0px -0px #6F1309; */
-  
+
 }
 
 .introjs-prevbutton {
@@ -279,6 +279,15 @@
 .introjs-bullets ul li a.active {
   background: #999;
 }
+
+.introjs-progress {
+  background-color: #FAFAFA;
+  margin: 5px 20px;
+}
+.introjs-progressbar {
+  background-color: #2980b9;
+}
+
 .introjsFloatingElement {
   position: absolute;
   height: 0;

diff --git a/themes/introjs-nazanin.css b/themes/introjs-nazanin.css
@@ -3,7 +3,7 @@
   z-index: 999999;
   background: #525252;
   opacity: 0;
-  
+
   -webkit-transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
       -ms-transition: all 0.3s ease-out;
@@ -112,7 +112,7 @@
 
 .introjs-tooltiptext {
     margin-left: -10px;
-  
+
     margin-right: -10px;
     border-top: 1px solid #FFFFFF;
     background: #FAFAFA;
@@ -125,8 +125,8 @@
   text-align: center;
 }
 
-/* 
- Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/ 
+/*
+ Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
  Changed by Afshin Mehrabani
 */
 .introjs-button {
@@ -160,13 +160,13 @@
 .introjs-button:hover {
   color: #fff;
   background: #2671A2;
-  text-decoration: none; 
+  text-decoration: none;
   box-shadow: 0 2px 0px -0px #235677;
 }
 
 .introjs-button:focus,
 .introjs-button:active {
-    background: #23587A;  text-decoration: none;  
+    background: #23587A;  text-decoration: none;
     /* bottom: -1px; */
     box-shadow: 0 2px 0px 0px #173B53;
 }
@@ -186,13 +186,13 @@
 
 .introjs-skipbutton:hover {
     background: #EB1540;  box-shadow: 0 2px 0px -0px #B91D0D;
-  
+
 }
 
 .introjs-skipbutton:active, .introjs-skipbutton:focus {
-    background: #C02312;  
+    background: #C02312;
     box-shadow: 0 1px 0px -0px #6F1309;
-  
+
 }
 
 .introjs-prevbutton {
@@ -248,10 +248,18 @@
 .introjs-bullets ul li a.active {
   background: #999;
 }
+
+.introjs-progress {
+  background-color: #FAFAFA;
+}
+.introjs-progressbar {
+  background-color: #2980b9;
+}
+
 .introjsFloatingElement {
   position: absolute;
   height: 0;
   width: 0;
   left: 50%;
   top: 50%;
-}
+}
diff --git a/themes/introjs-royal.css b/themes/introjs-royal.css
@@ -3,7 +3,7 @@
   z-index: 999999;
   background: #525252;
   opacity: 0;
-  
+
   -webkit-transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
       -ms-transition: all 0.3s ease-out;
@@ -122,7 +122,7 @@
 
 .introjs-tooltiptext {
     margin-left: -10px;
-  
+
     margin-right: -10px;
     /* border-top: 1px solid #FFFFFF; */
     /* background: #FAFAFA; */
@@ -138,8 +138,8 @@
   top: 0;
 }
 
-/* 
- Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/ 
+/*
+ Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
  Changed by Afshin Mehrabani
 */
 .introjs-button {
@@ -173,13 +173,13 @@
 .introjs-button:hover {
   color: #fff;
   background: #2671A2;
-  text-decoration: none; 
+  text-decoration: none;
   box-shadow: 0 2px 0px -0px #235677;
 }
 
 .introjs-button:focus,
 .introjs-button:active {
-    background: #23587A;  text-decoration: none;  
+    background: #23587A;  text-decoration: none;
     /* bottom: -1px; */
     box-shadow: 0 2px 0px 0px #173B53;
 }
@@ -199,13 +199,13 @@
 
 .introjs-skipbutton:hover {
     background: #EB1540;  box-shadow: 0 2px 0px -0px #B91D0D;
-  
+
 }
 
 .introjs-skipbutton:active, .introjs-skipbutton:focus {
-    background: #C02312;  
+    background: #C02312;
     box-shadow: 0 1px 0px -0px #6F1309;
-  
+
 }
 
 .introjs-prevbutton {
@@ -265,10 +265,21 @@
 .introjs-bullets ul li a.active {
   background: #999;
 }
+
+.introjs-progress {
+  width: 20%;
+  position: absolute;
+  bottom: 10px;
+  background-color: #fff;
+}
+.introjs-progressbar {
+  background-color: #2980b9;
+}
+
 .introjsFloatingElement {
   position: absolute;
   height: 0;
   width: 0;
   left: 50%;
   top: 50%;
-}
+}