Skip to content

Commit 2e5df0f

Browse files
clemdesignclemdesign
committed
feat: add scrollElRef that can be used to define a custom element which manage scroll (instead determine it by getScrollParent)
1 parent 81f8efb commit 2e5df0f

File tree

7 files changed

+169
-6
lines changed

7 files changed

+169
-6
lines changed

‎example/assets/css/demo.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ body {
55
font-family: 'Raleway', sans-serif;
66
padding-bottom: 40px;
77
}
8+
body.no-padding {
9+
padding: 0;
10+
}
811

912
/* Custom container */
1013
.container-narrow {
@@ -14,6 +17,19 @@ body {
1417
.container-narrow > hr {
1518
margin: 30px 0;
1619
}
20+
.container-narrow.flex {
21+
display: flex;
22+
flex-direction: column;
23+
height: 100%;
24+
}
25+
.header-main {
26+
height: 92px;
27+
}
28+
.container-main {
29+
height: calc(100vh - 92px);
30+
overflow: hidden;
31+
overflow-y: auto;
32+
}
1733

1834
/* Main marketing message and sign up button */
1935
.jumbotron {

‎example/custom-scroll-el/index.html

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>HTML in tooltip</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="../../dist/introjs.css" rel="stylesheet">
16+
17+
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
18+
</head>
19+
20+
<body class="no-padding">
21+
22+
<div class="container-narrow flex">
23+
24+
<div class="header-main">
25+
<div class="masthead">
26+
<ul id="step5" class="nav nav-pills pull-right">
27+
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
28+
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
29+
<li><a href="https://twitter.com/usablica">@usablica</a></li>
30+
</ul>
31+
<h3 class="muted">Intro.js</h3>
32+
</div>
33+
34+
<hr>
35+
</div>
36+
37+
<div class="container-main" id="containerMain">
38+
<div class="jumbotron">
39+
<h1 id="step1">HTML in tooltip</h1>
40+
<p id="step4" class="lead">We're going to use HTML codes in tooltips via Programmatic API</p>
41+
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="startIntro();">Show me how</a>
42+
</div>
43+
44+
<hr>
45+
46+
<div class="row-fluid marketing">
47+
<div id="step2" class="span6">
48+
<h4>Section One</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 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+
54+
<h4>Section Three</h4>
55+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
56+
57+
<h4>Section Four</h4>
58+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
59+
60+
<h4>Section Five</h4>
61+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
62+
63+
<h4>Section Six</h4>
64+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
65+
</div>
66+
67+
<div id="step3" class="span6">
68+
<h4>Section Seven</h4>
69+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
70+
71+
<h4>Section Eight</h4>
72+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
73+
74+
<h4>Section Nine</h4>
75+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
76+
77+
<h4>Section Ten</h4>
78+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
79+
80+
<h4>Section Eleven</h4>
81+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
82+
83+
<h4 id="section-twelve">Section Twelve</h4>
84+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
85+
</div>
86+
</div>
87+
88+
<hr>
89+
</div>
90+
</div>
91+
<script type="text/javascript" src="../../dist/intro.js"></script>
92+
<script type="text/javascript">
93+
function startIntro(){
94+
var intro = introJs();
95+
intro.setOptions({
96+
steps: [
97+
{
98+
element: '#step1',
99+
intro: "This is a <b>bold</b> tooltip."
100+
},
101+
{
102+
element: '#section-twelve',
103+
intro: "This is the section Twelve which managed by #containerMain container",
104+
position: 'top'
105+
},
106+
{
107+
element: '#step2',
108+
intro: "Ok, <i>wasn't</i> that fun?",
109+
position: 'right'
110+
},
111+
{
112+
element: '#step3',
113+
intro: 'More features, more <span style="color: red;">f</span><span style="color: green;">u</span><span style="color: blue;">n</span>.',
114+
position: 'left'
115+
},
116+
{
117+
element: '#step4',
118+
intro: "<span style='font-family: Tahoma'>Another step with new font!</span>",
119+
position: 'bottom'
120+
},
121+
{
122+
element: '#step5',
123+
intro: '<strong>Get</strong> it, <strong>use</strong> it.'
124+
}
125+
]
126+
});
127+
128+
intro.start();
129+
}
130+
</script>
131+
</body>
132+
</html>
133+

‎example/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ <h3 class="muted">Examples</h3>
3333
<li><a href="RTL/index.html" title='RTL version'>RTL version</a></li>
3434
<li><a href="html-tooltip/index.html" title='HTML in tooltip'>HTML in tooltip</a></li>
3535
<li><a href="custom-class/index.html" title='Custom CSS Class'>Custom CSS Class</a></li>
36+
<li><a href="custom-scroll-el/index.html" title='Custom Scroll Element'>Custom Scroll Element</a></li>
3637
<li><a href="withoutElement/index.html" title='Introduction without focusing on elements'>Introduction without focusing on elements</a></li>
3738
<li><a href="bootstrap/v3/index.html" title='Using with Bootstrap v3.0'>Using with Bootstrap v3.0</a></li>
3839
<li><a href="svg/d3.htm" title='Using Introjs with SVG Element'>Using with SVG Elements (D3)</a></li>

‎src/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,10 @@ function IntroJs(obj) {
8181
* Options are: 'element' or 'tooltip'
8282
*/
8383
scrollTo: "element",
84+
/**
85+
* Reference Element to manage scroll
86+
*/
87+
scrollElRef: null,
8488
/* Padding to add after scrolling when element is not in the viewport (in pixels) */
8589
scrollPadding: 30,
8690
/* Set the overlay opacity */

‎src/util/cloneObject.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,13 @@ export default function cloneObject(object) {
1414
const temp = {};
1515
for (const key in object) {
1616
if (
17-
typeof window.jQuery !== "undefined" &&
18-
object[key] instanceof window.jQuery
17+
(typeof window.jQuery !== "undefined" &&
18+
object[key] instanceof window.jQuery) ||
19+
key === "scrollElRef"
1920
) {
2021
temp[key] = object[key];
22+
} else if (key === "window") {
23+
temp[key] = window;
2124
} else {
2225
temp[key] = cloneObject(object[key]);
2326
}

‎src/util/scrollParentToElement.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ export default function scrollParentToElement(targetElement) {
1212

1313
const parent = getScrollParent(element);
1414

15-
if (parent === document.body) return;
15+
const scrollEl = this._introItems[this._currentStep].scrollElRef || this._options.scrollElRef || parent;
1616

17-
parent.scrollTop = element.offsetTop - parent.offsetTop;
17+
if (scrollEl === document.body) return;
18+
19+
scrollEl.scrollTop = element.offsetTop - scrollEl.offsetTop;
1820
}

‎src/util/scrollTo.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,12 @@ export default function scrollTo(scrollTo, { element }, tooltipLayer) {
2929
// I have changed the scroll option and now it scrolls the window to
3030
// the center of the target element or tooltip.
3131

32+
const scrollEl = this._introItems[this._currentStep].scrollElRef || this._options.scrollElRef || window;
33+
34+
console.log(scrollEl);
35+
3236
if (top < 0 || element.clientHeight > winHeight) {
33-
window.scrollBy(
37+
scrollEl.scrollBy(
3438
0,
3539
rect.top -
3640
(winHeight / 2 - rect.height / 2) -
@@ -39,7 +43,7 @@ export default function scrollTo(scrollTo, { element }, tooltipLayer) {
3943

4044
//Scroll down
4145
} else {
42-
window.scrollBy(
46+
scrollEl.scrollBy(
4347
0,
4448
rect.top -
4549
(winHeight / 2 - rect.height / 2) +

0 commit comments

Comments
 (0)