Skip to content

Commit 52eeb3d

Browse files
afshinmafshinm
authored
Merge pull request usablica#739 from usablica/afshinm-onbeforechange
Adding an option to prevent displaying the next / previous step
2 parents cf080c1 + 50212ad commit 52eeb3d

File tree

4 files changed

+130
-10
lines changed

4 files changed

+130
-10
lines changed

‎docs/docs/getting-started/examples.md

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,22 +10,39 @@ We have prepared a list of common examples using Introjs for both hints and intr
1010

1111
#### Intros
1212

13+
##### Basics
14+
1315
* [Basic usage](http://introjs.com/example/hello-world/index.html "Basic usage")
1416
* [Basic usage with buttons](http://introjs.com/example/hello-world/withoutBullets.html "Basic usage with buttons")
1517
* [Basic usage with bullets](http://introjs.com/example/hello-world/withoutButtons.html "Basic usage with bullets")
1618
* [Basic usage with progress-bar](http://introjs.com/example/hello-world/withProgress.html "Basic usage with progress-bar")
19+
* [Introduction without focusing on elements](http://introjs.com/example/withoutElement/index.html "Introduction without focusing on elements")
20+
21+
22+
##### Callbacks
23+
24+
* [Onbeforechange callback](http://introjs.com/example/callbacks/onbeforechange.html "Onbeforechange callback")
1725
* [Confirm before exit](http://introjs.com/example/hello-world/exit-confirm.html "Shows a confirm before exit")
26+
27+
##### JSON configuration
28+
1829
* [Programmatic defining using JSON](http://introjs.com/example/programmatic/index.html "Programmatic defining using JSON")
30+
31+
##### Advanced
32+
1933
* [Multi-Page introduction](http://introjs.com/example/multi-page/index.html "Multi-Page introduction")
2034
* [Disabling interaction with elements](http://introjs.com/example/disable-interaction/index.html "Disabling interaction with elements")
2135
* [Auto-positioning](http://introjs.com/example/auto-position/index.html "Auto-positioning")
22-
* [RTL version](http://introjs.com/example/RTL/index.html "RTL version")
2336
* [HTML in tooltip](http://introjs.com/example/html-tooltip/index.html "HTML in tooltip")
2437
* [Custom CSS Class](http://introjs.com/example/custom-class/index.html "Custom CSS Class")
25-
* [Introduction without focusing on elements](http://introjs.com/example/withoutElement/index.html "Introduction without focusing on elements")
2638
* [Using with Bootstrap v3.0](http://introjs.com/example/bootstrap/v3/index.html "Using with Bootstrap v3.0")
2739
* [Using with SVG Element](http://introjs.com/example/svg/d3.htm "Using Introjs with SVG Element")
2840

41+
##### Localization
42+
43+
* [RTL version](http://introjs.com/example/RTL/index.html "RTL version")
44+
45+
2946
#### Hints
3047

3148
* [Basic hints usage](http://introjs.com/example/hint/index.html "Basic hints usage")

‎docs/docs/intro/api.md

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -356,6 +356,8 @@ introJs().onchange(function(targetElement) {
356356

357357
Given callback function will be called before starting a new step of introduction. The callback function receives the element of the new step as an argument.
358358

359+
If you want to prevent displaying the next / previous step, return `false` in `providedCallback`. See Examples page for more details. (Available since 2.7.0)
360+
359361
**Available since:** v0.4.0
360362

361363
**Parameters:**
@@ -369,8 +371,11 @@ Given callback function will be called before starting a new step of introductio
369371
**Example:**
370372

371373
```javascript
372-
introJs().onbeforechange(function(targetElement) {
373-
alert("before new step");
374+
introJs().onbeforechange(function() {
375+
alert("before new step. Step: " + this._currentStep);
376+
377+
// return false to stop displaying the next step
378+
// return false;
374379
});
375380
````
376381

‎example/callbacks/onbeforechange.html

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Callbacks: onbeforechange</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"> <link href="../assets/css/demo.css" rel="stylesheet">
12+
13+
<!-- Add IntroJs styles -->
14+
<link href="../../introjs.css" rel="stylesheet">
15+
16+
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
17+
</head>
18+
19+
<body>
20+
21+
<div class="container-narrow">
22+
23+
<div class="masthead">
24+
<ul class="nav nav-pills pull-right" data-step="5" data-intro="Get it, use it.">
25+
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
26+
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
27+
<li><a href="https://twitter.com/usablica">@usablica</a></li>
28+
</ul>
29+
<h3 class="muted">Intro.js</h3>
30+
</div>
31+
32+
<hr>
33+
34+
<div class="jumbotron">
35+
<h1 data-step="1" data-intro="This is a tooltip!">Usage of onbeforechange</h1>
36+
<p class="lead" data-step="4" data-intro="Another step.">In this example you learn how to use <code>onbeforechange</code> callback to prevent displaying a step.</p>
37+
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:startIntro();">Show me how</a>
38+
</div>
39+
40+
<hr>
41+
42+
<div class="row-fluid marketing">
43+
<div class="span6" data-step="2" data-intro="Ok, wasn't that fun?" data-position='right' data-scrollTo='tooltip'>
44+
<h4>Section One</h4>
45+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
46+
47+
<h4>Section Two</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+
50+
<h4>Section Three</h4>
51+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
52+
</div>
53+
54+
<div class="span6" data-step="3" data-intro="More features, more fun." data-position='left'>
55+
<h4>Section Four</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+
58+
<h4>Section Five</h4>
59+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
60+
61+
<h4>Section Six</h4>
62+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
63+
64+
</div>
65+
</div>
66+
67+
<hr>
68+
</div>
69+
<script type="text/javascript" src="../../intro.js"></script>
70+
71+
<script type="text/javascript">
72+
function startIntro(){
73+
var intro = introJs();
74+
intro.onbeforechange(function () {
75+
if (this._currentStep === 2) {
76+
alert('You cannot continue! :P')
77+
return false;
78+
}
79+
});
80+
intro.start();
81+
}
82+
</script>
83+
</body>
84+
</html>

‎intro.js

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -368,6 +368,16 @@
368368
++this._currentStep;
369369
}
370370

371+
if (typeof (this._introBeforeChangeCallback) !== 'undefined') {
372+
var continueStep = this._introBeforeChangeCallback.call(this);
373+
}
374+
375+
// if `onbeforechange` returned `false`, stop displaying the element
376+
if (continueStep === false) {
377+
--this._currentStep;
378+
return false;
379+
}
380+
371381
if ((this._introItems.length) <= this._currentStep) {
372382
//end of the intro
373383
//check if any callback is defined
@@ -379,10 +389,6 @@
379389
}
380390

381391
var nextStep = this._introItems[this._currentStep];
382-
if (typeof (this._introBeforeChangeCallback) !== 'undefined') {
383-
this._introBeforeChangeCallback.call(this, nextStep.element);
384-
}
385-
386392
_showElement.call(this, nextStep);
387393
}
388394

@@ -399,11 +405,19 @@
399405
return false;
400406
}
401407

402-
var nextStep = this._introItems[--this._currentStep];
408+
--this._currentStep;
409+
403410
if (typeof (this._introBeforeChangeCallback) !== 'undefined') {
404-
this._introBeforeChangeCallback.call(this, nextStep.element);
411+
var continueStep = this._introBeforeChangeCallback.call(this);
405412
}
406413

414+
// if `onbeforechange` returned `false`, stop displaying the element
415+
if (continueStep === false) {
416+
++this._currentStep;
417+
return false;
418+
}
419+
420+
var nextStep = this._introItems[this._currentStep];
407421
_showElement.call(this, nextStep);
408422
}
409423

0 commit comments

Comments
 (0)