Skip to content
This repository was archived by the owner on May 8, 2018. It is now read-only.

Commit b0c63c0

Browse files
afshinmafshinm
committed
Add step bullets option for tour
1 parent 27c7dcd commit b0c63c0

File tree

4 files changed

+237
-13
lines changed

4 files changed

+237
-13
lines changed

‎example/hello-world/withoutBullets.html

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Without Bullets</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
8+
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
9+
10+
<!-- styles -->
11+
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
12+
<link href="../assets/css/demo.css" rel="stylesheet">
13+
14+
<!-- Add IntroJs styles -->
15+
<link href="../../introjs.css" rel="stylesheet">
16+
17+
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
18+
</head>
19+
20+
<body>
21+
22+
<div class="container-narrow">
23+
24+
<div class="masthead">
25+
<ul class="nav nav-pills pull-right" data-step="5" data-intro="Get it, use it.">
26+
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
27+
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
28+
<li><a href="https://twitter.com/usablica">@usablica</a></li>
29+
</ul>
30+
<h3 class="muted">Intro.js</h3>
31+
</div>
32+
33+
<hr>
34+
35+
<div class="jumbotron">
36+
<h1 data-step="1" data-intro="This is a tooltip!">Without Bullets</h1>
37+
<p class="lead" data-step="4" data-intro="Another step.">This is the basic usage of IntroJs, with <code>data-step</code> and <code>data-intro</code> attributes.</p>
38+
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().setOption('showBullets', false).start();">Show me how</a>
39+
</div>
40+
41+
<hr>
42+
43+
<div class="row-fluid marketing">
44+
<div class="span6" data-step="2" data-intro="Ok, wasn't that fun?" data-position='right'>
45+
<h4>Section One</h4>
46+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
47+
48+
<h4>Section Two</h4>
49+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
50+
51+
<h4>Section Three</h4>
52+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
53+
</div>
54+
55+
<div class="span6" data-step="3" data-intro="More features, more fun." data-position='left'>
56+
<h4>Section Four</h4>
57+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
58+
59+
<h4>Section Five</h4>
60+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
61+
62+
<h4>Section Six</h4>
63+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
64+
65+
</div>
66+
</div>
67+
68+
<hr>
69+
</div>
70+
<script type="text/javascript" src="../../intro.js"></script>
71+
</body>
72+
</html>

‎example/hello-world/withoutButtons.html

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Without Buttons</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
8+
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
9+
10+
<!-- styles -->
11+
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
12+
<link href="../assets/css/demo.css" rel="stylesheet">
13+
14+
<!-- Add IntroJs styles -->
15+
<link href="../../introjs.css" rel="stylesheet">
16+
17+
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
18+
</head>
19+
20+
<body>
21+
22+
<div class="container-narrow">
23+
24+
<div class="masthead">
25+
<ul class="nav nav-pills pull-right" data-step="5" data-intro="Get it, use it.">
26+
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
27+
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
28+
<li><a href="https://twitter.com/usablica">@usablica</a></li>
29+
</ul>
30+
<h3 class="muted">Intro.js</h3>
31+
</div>
32+
33+
<hr>
34+
35+
<div class="jumbotron">
36+
<h1 data-step="1" data-intro="This is a tooltip!">Without Buttons</h1>
37+
<p class="lead" data-step="4" data-intro="Another step.">This is the basic usage of IntroJs, with <code>data-step</code> and <code>data-intro</code> attributes.</p>
38+
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().setOption('showButtons', false).start();">Show me how</a>
39+
</div>
40+
41+
<hr>
42+
43+
<div class="row-fluid marketing">
44+
<div class="span6" data-step="2" data-intro="Ok, wasn't that fun?" data-position='right'>
45+
<h4>Section One</h4>
46+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
47+
48+
<h4>Section Two</h4>
49+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
50+
51+
<h4>Section Three</h4>
52+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
53+
</div>
54+
55+
<div class="span6" data-step="3" data-intro="More features, more fun." data-position='left'>
56+
<h4>Section Four</h4>
57+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
58+
59+
<h4>Section Five</h4>
60+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
61+
62+
<h4>Section Six</h4>
63+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
64+
65+
</div>
66+
</div>
67+
68+
<hr>
69+
</div>
70+
<script type="text/javascript" src="../../intro.js"></script>
71+
</body>
72+
</html>

‎intro.js

Lines changed: 62 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,11 @@
4949
/* Show step numbers in introduction? */
5050
showStepNumbers: true,
5151
/* Let user use keyboard to navigate the tour? */
52-
keyboardNavigation: true
52+
keyboardNavigation: true,
53+
/* Show tour control buttons? */
54+
showButtons: true,
55+
/* Show tour bullets? */
56+
showBullets: true
5357
};
5458
}
5559

@@ -222,7 +226,7 @@
222226
++this._currentStep;
223227
}
224228

225-
if((this._introItems.length) <= this._currentStep) {
229+
if ((this._introItems.length) <= this._currentStep) {
226230
//end of the intro
227231
//check if any callback is defined
228232
if (typeof (this._introCompleteCallback) === 'function') {
@@ -409,7 +413,7 @@
409413
skipTooltipButton = oldHelperLayer.querySelector('.introjs-skipbutton'),
410414
prevTooltipButton = oldHelperLayer.querySelector('.introjs-prevbutton'),
411415
nextTooltipButton = oldHelperLayer.querySelector('.introjs-nextbutton');
412-
416+
413417
//hide the tooltip
414418
oldtooltipContainer.style.opacity = 0;
415419

@@ -440,14 +444,22 @@
440444
oldtooltipLayer.innerHTML = targetElement.intro;
441445
//set the tooltip position
442446
_placeTooltip.call(self, targetElement.element, oldtooltipContainer, oldArrowLayer);
447+
448+
//change active bullet
449+
oldHelperLayer.querySelector('.introjs-bullets li > a.active').className = '';
450+
oldHelperLayer.querySelector('.introjs-bullets li > a[data-stepnumber="' + targetElement.step + '"]').className = 'active';
451+
443452
//show the tooltip
444453
oldtooltipContainer.style.opacity = 1;
445454
}, 350);
446455

447456
} else {
448-
var helperLayer = document.createElement('div'),
449-
arrowLayer = document.createElement('div'),
450-
tooltipLayer = document.createElement('div');
457+
var helperLayer = document.createElement('div'),
458+
arrowLayer = document.createElement('div'),
459+
tooltipLayer = document.createElement('div'),
460+
tooltipTextLayer = document.createElement('div'),
461+
bulletsLayer = document.createElement('div'),
462+
buttonsLayer = document.createElement('div');
451463

452464
helperLayer.className = 'introjs-helperLayer';
453465

@@ -459,9 +471,45 @@
459471

460472
arrowLayer.className = 'introjs-arrow';
461473

462-
tooltipLayer.innerHTML = '<div class="introjs-tooltiptext">' +
463-
targetElement.intro +
464-
'</div><div class="introjs-tooltipbuttons"></div>';
474+
tooltipTextLayer.className = 'introjs-tooltiptext';
475+
tooltipTextLayer.innerHTML = targetElement.intro;
476+
477+
bulletsLayer.className = 'introjs-bullets';
478+
479+
if (this._options.showBullets === false) {
480+
bulletsLayer.style.display = 'none';
481+
}
482+
483+
var ulContainer = document.createElement('ul');
484+
485+
for (var i = 0, stepsLength = this._introItems.length; i < stepsLength; i++) {
486+
var innerLi = document.createElement('li');
487+
var anchorLink = document.createElement('a');
488+
489+
anchorLink.onclick = function() {
490+
self.goToStep(this.getAttribute('data-stepnumber'));
491+
};
492+
493+
if (i === 0) anchorLink.className = "active";
494+
495+
anchorLink.href = 'javascript:void(0);';
496+
anchorLink.innerHTML = "&nbsp;";
497+
anchorLink.setAttribute('data-stepnumber', this._introItems[i].step);
498+
499+
innerLi.appendChild(anchorLink);
500+
ulContainer.appendChild(innerLi);
501+
}
502+
503+
bulletsLayer.appendChild(ulContainer);
504+
505+
buttonsLayer.className = 'introjs-tooltipbuttons';
506+
if (this._options.showButtons === false) {
507+
buttonsLayer.style.display = 'none';
508+
}
509+
510+
tooltipLayer.className = 'introjs-tooltip';
511+
tooltipLayer.appendChild(tooltipTextLayer);
512+
tooltipLayer.appendChild(bulletsLayer);
465513

466514
//add helper layer number
467515
if (this._options.showStepNumbers == true) {
@@ -515,15 +563,16 @@
515563
_exitIntro.call(self, self._targetElement);
516564
};
517565

518-
var tooltipButtonsLayer = tooltipLayer.querySelector('.introjs-tooltipbuttons');
519-
tooltipButtonsLayer.appendChild(skipTooltipButton);
566+
buttonsLayer.appendChild(skipTooltipButton);
520567

521568
//in order to prevent displaying next/previous button always
522569
if (this._introItems.length > 1) {
523-
tooltipButtonsLayer.appendChild(prevTooltipButton);
524-
tooltipButtonsLayer.appendChild(nextTooltipButton);
570+
buttonsLayer.appendChild(prevTooltipButton);
571+
buttonsLayer.appendChild(nextTooltipButton);
525572
}
526573

574+
tooltipLayer.appendChild(buttonsLayer);
575+
527576
//set proper position
528577
_placeTooltip.call(self, targetElement.element, tooltipLayer, arrowLayer);
529578
}

‎introjs.css

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -214,3 +214,34 @@
214214
background-image: none;
215215
text-decoration: none;
216216
}
217+
218+
.introjs-bullets {
219+
text-align: center;
220+
}
221+
.introjs-bullets ul {
222+
clear: both;
223+
margin: 15px auto 0;
224+
padding: 0;
225+
display: inline-block;
226+
}
227+
.introjs-bullets ul li {
228+
list-style: none;
229+
float: left;
230+
margin: 0 2px;
231+
}
232+
.introjs-bullets ul li a {
233+
display: block;
234+
width: 6px;
235+
height: 6px;
236+
background: #ccc;
237+
border-radius: 10px;
238+
-moz-border-radius: 10px;
239+
-webkit-border-radius: 10px;
240+
text-decoration: none;
241+
}
242+
.introjs-bullets ul li a:hover {
243+
background: #999;
244+
}
245+
.introjs-bullets ul li a.active {
246+
background: #999;
247+
}

0 commit comments

Comments
 (0)