Skip to content

Commit 7a59063

Browse files
afshinmafshinm
committed
Merge pull request usablica#339 from connyay/add-progress-bar
add progress bar support
2 parents c2848f9 + c4d055e commit 7a59063

File tree

6 files changed

+107
-30
lines changed

6 files changed

+107
-30
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -349,6 +349,7 @@ introJs().onafterchange(function(targetElement) {
349349
- `keyboardNavigation`: Navigating with keyboard or not, `true` or `false`
350350
- `showButtons`: Show introduction navigation buttons or not, `true` or `false`
351351
- `showBullets`: Show introduction bullets or not, `true` or `false`
352+
- `showProgress`: Show introduction progress or not, `true` or `false`
352353
- `scrollToElement`: Auto scroll to highlighted element if it's outside of viewport, `true` or `false`
353354
- `overlayOpacity`: Adjust the overlay opacity, `Number`
354355
- `disableInteraction`: Disable an interaction inside element or not, `true` or `false`

‎intro.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,8 @@
5656
showButtons: true,
5757
/* Show tour bullets? */
5858
showBullets: true,
59+
/* Show tour progress? */
60+
showProgress: false,
5961
/* Scroll to highlighted element? */
6062
scrollToElement: true,
6163
/* Set the overlay opacity */
@@ -729,6 +731,8 @@
729731
oldReferenceLayer.querySelector('.introjs-bullets li > a.active').className = '';
730732
oldReferenceLayer.querySelector('.introjs-bullets li > a[data-stepnumber="' + targetElement.step + '"]').className = 'active';
731733

734+
oldReferenceLayer.querySelector('.introjs-progress .introjs-progressbar').setAttribute('style', 'width:' + _getProgress.call(self) + '%;');
735+
732736
//show the tooltip
733737
oldtooltipContainer.style.opacity = 1;
734738
if (oldHelperNumberLayer) oldHelperNumberLayer.style.opacity = 1;
@@ -741,6 +745,7 @@
741745
tooltipLayer = document.createElement('div'),
742746
tooltipTextLayer = document.createElement('div'),
743747
bulletsLayer = document.createElement('div'),
748+
progressLayer = document.createElement('div'),
744749
buttonsLayer = document.createElement('div');
745750

746751
helperLayer.className = highlightClass;
@@ -788,6 +793,17 @@
788793

789794
bulletsLayer.appendChild(ulContainer);
790795

796+
progressLayer.className = 'introjs-progress';
797+
798+
if (this._options.showProgress === false) {
799+
progressLayer.style.display = 'none';
800+
}
801+
var progressBar = document.createElement('div');
802+
progressBar.className = 'introjs-progressbar';
803+
progressBar.setAttribute('style', 'width:' + _getProgress.call(this) + '%;');
804+
805+
progressLayer.appendChild(progressBar);
806+
791807
buttonsLayer.className = 'introjs-tooltipbuttons';
792808
if (this._options.showButtons === false) {
793809
buttonsLayer.style.display = 'none';
@@ -796,6 +812,7 @@
796812
tooltipLayer.className = 'introjs-tooltip';
797813
tooltipLayer.appendChild(tooltipTextLayer);
798814
tooltipLayer.appendChild(bulletsLayer);
815+
tooltipLayer.appendChild(progressLayer);
799816

800817
//add helper layer number
801818
if (this._options.showStepNumbers == true) {
@@ -1078,6 +1095,19 @@
10781095
return elementPosition;
10791096
}
10801097

1098+
/**
1099+
* Gets the current progress percentage
1100+
*
1101+
* @api private
1102+
* @method _getProgress
1103+
* @returns current progress percentage
1104+
*/
1105+
function _getProgress() {
1106+
// Steps are 0 indexed
1107+
var currentStep = parseInt((this._currentStep + 1), 10);
1108+
return ((currentStep / this._introItems.length) * 100);
1109+
}
1110+
10811111
/**
10821112
* Overwrites obj1's values with obj2's and adds obj2's if non existent in obj1
10831113
* via: http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically

‎introjs.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -311,6 +311,24 @@ tr.introjs-showElement > th {
311311
.introjs-bullets ul li a.active {
312312
background: #999;
313313
}
314+
315+
.introjs-progress {
316+
overflow: hidden;
317+
height: 10px;
318+
margin: 10px 0 5px 0;
319+
border-radius: 4px;
320+
background-color: #ecf0f1
321+
}
322+
.introjs-progressbar {
323+
float: left;
324+
width: 0%;
325+
height: 100%;
326+
font-size: 10px;
327+
line-height: 10px;
328+
text-align: center;
329+
background-color: #08c;
330+
}
331+
314332
.introjsFloatingElement {
315333
position: absolute;
316334
height: 0;

‎themes/introjs-nassim.css

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
z-index: 999999;
44
background: #181818;
55
opacity: 0;
6-
6+
77
-webkit-transition: all 0.3s ease-out;
88
-moz-transition: all 0.3s ease-out;
99
-ms-transition: all 0.3s ease-out;
@@ -128,7 +128,7 @@
128128

129129
.introjs-tooltiptext {
130130
margin-left: -10px;
131-
131+
132132
margin-right: -10px;
133133
/* border-top: 1px solid #FFFFFF; */
134134
/* background: #FAFAFA; */
@@ -144,8 +144,8 @@
144144
padding-bottom: 10px;
145145
}
146146

147-
/*
148-
Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
147+
/*
148+
Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
149149
Changed by Afshin Mehrabani
150150
*/
151151
.introjs-button {
@@ -185,13 +185,13 @@
185185
.introjs-button:hover {
186186
color: #fff;
187187
background: #2671A2;
188-
text-decoration: none;
188+
text-decoration: none;
189189
border-color: #235677;
190190
}
191191

192192
.introjs-button:focus,
193193
.introjs-button:active {
194-
background: #23587A; text-decoration: none;
194+
background: #23587A; text-decoration: none;
195195
color: #fff;
196196
/* bottom: -1px; */
197197
box-shadow: none;
@@ -211,15 +211,15 @@
211211
}
212212

213213
.introjs-skipbutton:hover {
214-
background: #EB1540;
214+
background: #EB1540;
215215
border-color: #B91D0D;
216-
216+
217217
}
218218

219219
.introjs-skipbutton:active, .introjs-skipbutton:focus {
220-
background: #C02312;
220+
background: #C02312;
221221
/* box-shadow: 0 1px 0px -0px #6F1309; */
222-
222+
223223
}
224224

225225
.introjs-prevbutton {
@@ -279,6 +279,15 @@
279279
.introjs-bullets ul li a.active {
280280
background: #999;
281281
}
282+
283+
.introjs-progress {
284+
background-color: #FAFAFA;
285+
margin: 5px 20px;
286+
}
287+
.introjs-progressbar {
288+
background-color: #2980b9;
289+
}
290+
282291
.introjsFloatingElement {
283292
position: absolute;
284293
height: 0;

‎themes/introjs-nazanin.css

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
z-index: 999999;
44
background: #525252;
55
opacity: 0;
6-
6+
77
-webkit-transition: all 0.3s ease-out;
88
-moz-transition: all 0.3s ease-out;
99
-ms-transition: all 0.3s ease-out;
@@ -112,7 +112,7 @@
112112

113113
.introjs-tooltiptext {
114114
margin-left: -10px;
115-
115+
116116
margin-right: -10px;
117117
border-top: 1px solid #FFFFFF;
118118
background: #FAFAFA;
@@ -125,8 +125,8 @@
125125
text-align: center;
126126
}
127127

128-
/*
129-
Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
128+
/*
129+
Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
130130
Changed by Afshin Mehrabani
131131
*/
132132
.introjs-button {
@@ -160,13 +160,13 @@
160160
.introjs-button:hover {
161161
color: #fff;
162162
background: #2671A2;
163-
text-decoration: none;
163+
text-decoration: none;
164164
box-shadow: 0 2px 0px -0px #235677;
165165
}
166166

167167
.introjs-button:focus,
168168
.introjs-button:active {
169-
background: #23587A; text-decoration: none;
169+
background: #23587A; text-decoration: none;
170170
/* bottom: -1px; */
171171
box-shadow: 0 2px 0px 0px #173B53;
172172
}
@@ -186,13 +186,13 @@
186186

187187
.introjs-skipbutton:hover {
188188
background: #EB1540; box-shadow: 0 2px 0px -0px #B91D0D;
189-
189+
190190
}
191191

192192
.introjs-skipbutton:active, .introjs-skipbutton:focus {
193-
background: #C02312;
193+
background: #C02312;
194194
box-shadow: 0 1px 0px -0px #6F1309;
195-
195+
196196
}
197197

198198
.introjs-prevbutton {
@@ -248,10 +248,18 @@
248248
.introjs-bullets ul li a.active {
249249
background: #999;
250250
}
251+
252+
.introjs-progress {
253+
background-color: #FAFAFA;
254+
}
255+
.introjs-progressbar {
256+
background-color: #2980b9;
257+
}
258+
251259
.introjsFloatingElement {
252260
position: absolute;
253261
height: 0;
254262
width: 0;
255263
left: 50%;
256264
top: 50%;
257-
}
265+
}

‎themes/introjs-royal.css

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
z-index: 999999;
44
background: #525252;
55
opacity: 0;
6-
6+
77
-webkit-transition: all 0.3s ease-out;
88
-moz-transition: all 0.3s ease-out;
99
-ms-transition: all 0.3s ease-out;
@@ -122,7 +122,7 @@
122122

123123
.introjs-tooltiptext {
124124
margin-left: -10px;
125-
125+
126126
margin-right: -10px;
127127
/* border-top: 1px solid #FFFFFF; */
128128
/* background: #FAFAFA; */
@@ -138,8 +138,8 @@
138138
top: 0;
139139
}
140140

141-
/*
142-
Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
141+
/*
142+
Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
143143
Changed by Afshin Mehrabani
144144
*/
145145
.introjs-button {
@@ -173,13 +173,13 @@
173173
.introjs-button:hover {
174174
color: #fff;
175175
background: #2671A2;
176-
text-decoration: none;
176+
text-decoration: none;
177177
box-shadow: 0 2px 0px -0px #235677;
178178
}
179179

180180
.introjs-button:focus,
181181
.introjs-button:active {
182-
background: #23587A; text-decoration: none;
182+
background: #23587A; text-decoration: none;
183183
/* bottom: -1px; */
184184
box-shadow: 0 2px 0px 0px #173B53;
185185
}
@@ -199,13 +199,13 @@
199199

200200
.introjs-skipbutton:hover {
201201
background: #EB1540; box-shadow: 0 2px 0px -0px #B91D0D;
202-
202+
203203
}
204204

205205
.introjs-skipbutton:active, .introjs-skipbutton:focus {
206-
background: #C02312;
206+
background: #C02312;
207207
box-shadow: 0 1px 0px -0px #6F1309;
208-
208+
209209
}
210210

211211
.introjs-prevbutton {
@@ -265,10 +265,21 @@
265265
.introjs-bullets ul li a.active {
266266
background: #999;
267267
}
268+
269+
.introjs-progress {
270+
width: 20%;
271+
position: absolute;
272+
bottom: 10px;
273+
background-color: #fff;
274+
}
275+
.introjs-progressbar {
276+
background-color: #2980b9;
277+
}
278+
268279
.introjsFloatingElement {
269280
position: absolute;
270281
height: 0;
271282
width: 0;
272283
left: 50%;
273284
top: 50%;
274-
}
285+
}

0 commit comments

Comments
 (0)