Skip to content

Commit 2a0e609

Browse files
bozdozbozdoz
authored
Merge pull request usablica#763 from usablica/crowdlab-upstream
Re-added PR usablica#80 for groups
2 parents 61f4e60 + 73f8dbd commit 2a0e609

File tree

2 files changed

+101
-7
lines changed

2 files changed

+101
-7
lines changed

‎example/groups/index.html

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Groups</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>Groups</h1>
37+
<p class="lead">An example of grouping, with <code>data-intro-group</code> attributes.</p>
38+
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start('odd');">Show me odds</a>
39+
<a class="btn btn-large btn-info" href="javascript:void(0);" onclick="javascript:introJs().start('even');">Show me evens</a>
40+
</div>
41+
42+
<hr>
43+
44+
<div class="row-fluid marketing">
45+
<div class="span6">
46+
<div data-step="1" data-intro-group="odd" data-intro="Here we go">
47+
<h4>Section One</h4>
48+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
49+
</div>
50+
<div data-step="1" data-intro-group="even" data-intro="Here we go">
51+
<h4>Section Two</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+
<div data-step="2" data-intro-group="odd" data-intro="Through the list">
55+
<h4>Section Three</h4>
56+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
57+
</div>
58+
</div>
59+
60+
<div class="span6">
61+
<div data-step="2" data-intro-group="even" data-intro="Through the list">
62+
<h4>Section Four</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+
</div>
65+
<div data-step="3" data-intro-group="odd" data-intro="On and on...">
66+
<h4>Section Five</h4>
67+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
68+
</div>
69+
<div data-step="3" data-intro-group="even" data-intro="On and on...">
70+
<h4>Section Six</h4>
71+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
72+
</div>
73+
</div>
74+
</div>
75+
76+
<hr>
77+
</div>
78+
<script type="text/javascript" src="../../intro.js"></script>
79+
</body>
80+
</html>

‎intro.js

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -109,10 +109,12 @@
109109
* @api private
110110
* @method _introForElement
111111
* @param {Object} targetElm
112+
* @param {String} group
112113
* @returns {Boolean} Success or not?
113114
*/
114-
function _introForElement(targetElm) {
115-
var introItems = [],
115+
function _introForElement(targetElm, group) {
116+
var allIntroSteps = targetElm.querySelectorAll("*[data-intro]"),
117+
introItems = [],
116118
self = this;
117119

118120
if (this._options.steps) {
@@ -157,16 +159,22 @@
157159

158160
} else {
159161
//use steps from data-* annotations
160-
var allIntroSteps = targetElm.querySelectorAll('*[data-intro]');
161162
var elmsLength = allIntroSteps.length;
162163
var disableInteraction;
163-
164+
164165
//if there's no element to intro
165166
if (elmsLength < 1) {
166167
return false;
167168
}
168169

169170
_forEach(allIntroSteps, function (currentElement) {
171+
172+
// PR #80
173+
// start intro for groups of elements
174+
if (group && (currentElement.getAttribute("data-intro-group") !== group)) {
175+
return;
176+
}
177+
170178
// skip hidden elements
171179
if (currentElement.style.display === 'none') {
172180
return;
@@ -199,6 +207,13 @@
199207
var nextStep = 0;
200208

201209
_forEach(allIntroSteps, function (currentElement) {
210+
211+
// PR #80
212+
// start intro for groups of elements
213+
if (group && (currentElement.getAttribute("data-intro-group") !== group)) {
214+
return;
215+
}
216+
202217
if (currentElement.getAttribute('data-step') === null) {
203218

204219
while (true) {
@@ -209,7 +224,6 @@
209224
}
210225
}
211226

212-
213227
if (typeof (currentElement.getAttribute('data-disable-interaction')) !== 'undefined') {
214228
disableInteraction = !!currentElement.getAttribute('data-disable-interaction');
215229
} else {
@@ -2197,8 +2211,8 @@
21972211
this._options = _mergeOptions(this._options, options);
21982212
return this;
21992213
},
2200-
start: function () {
2201-
_introForElement.call(this, this._targetElement);
2214+
start: function (group) {
2215+
_introForElement.call(this, this._targetElement, group);
22022216
return this;
22032217
},
22042218
goToStep: function(step) {

0 commit comments

Comments
 (0)