Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add scrollElRef to support custom scroll element view #1877

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

feat: add scrollElRef to support custom scroll element view #1877

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0a16567
feat: add scrollElRef that can be used to define a custom element whi…
clemdesign Feb 15, 2023
858c920
clean: remove console.log
clemdesign Feb 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions example/assets/css/demo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ body {
font-family: 'Raleway', sans-serif;
padding-bottom: 40px;
}
body.no-padding {
padding: 0;
}

/* Custom container */
.container-narrow {
Expand All @@ -14,6 +17,19 @@ body {
.container-narrow > hr {
margin: 30px 0;
}
.container-narrow.flex {
display: flex;
flex-direction: column;
height: 100%;
}
.header-main {
height: 92px;
}
.container-main {
height: calc(100vh - 92px);
overflow: hidden;
overflow-y: auto;
}

/* Main marketing message and sign up button */
.jumbotron {
Expand Down
133 changes: 133 additions & 0 deletions example/custom-scroll-el/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML in tooltip</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">

<!-- styles -->
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
<link href="../assets/css/demo.css" rel="stylesheet">

<!-- Add IntroJs styles -->
<link href="../../dist/introjs.css" rel="stylesheet">

<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
</head>

<body class="no-padding">

<div class="container-narrow flex">

<div class="header-main">
<div class="masthead">
<ul id="step5" class="nav nav-pills pull-right">
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
<li><a href="https://twitter.com/usablica">@usablica</a></li>
</ul>
<h3 class="muted">Intro.js</h3>
</div>

<hr>
</div>

<div class="container-main" id="containerMain">
<div class="jumbotron">
<h1 id="step1">HTML in tooltip</h1>
<p id="step4" class="lead">We're going to use HTML codes in tooltips via Programmatic API</p>
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="startIntro();">Show me how</a>
</div>

<hr>

<div class="row-fluid marketing">
<div id="step2" class="span6">
<h4>Section One</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>

<h4>Section Two</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>

<h4>Section Three</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>

<h4>Section Four</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>

<h4>Section Five</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>

<h4>Section Six</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
</div>

<div id="step3" class="span6">
<h4>Section Seven</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>

<h4>Section Eight</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>

<h4>Section Nine</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>

<h4>Section Ten</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>

<h4>Section Eleven</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>

<h4 id="section-twelve">Section Twelve</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
</div>
</div>

<hr>
</div>
</div>
<script type="text/javascript" src="../../dist/intro.js"></script>
<script type="text/javascript">
function startIntro(){
var intro = introJs();
intro.setOptions({
steps: [
{
element: '#step1',
intro: "This is a <b>bold</b> tooltip."
},
{
element: '#section-twelve',
intro: "This is the section Twelve which managed by #containerMain container",
position: 'top'
},
{
element: '#step2',
intro: "Ok, <i>wasn't</i> that fun?",
position: 'right'
},
{
element: '#step3',
intro: 'More features, more <span style="color: red;">f</span><span style="color: green;">u</span><span style="color: blue;">n</span>.',
position: 'left'
},
{
element: '#step4',
intro: "<span style='font-family: Tahoma'>Another step with new font!</span>",
position: 'bottom'
},
{
element: '#step5',
intro: '<strong>Get</strong> it, <strong>use</strong> it.'
}
]
});

intro.start();
}
</script>
</body>
</html>

1 change: 1 addition & 0 deletions example/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ <h3 class="muted">Examples</h3>
<li><a href="RTL/index.html" title='RTL version'>RTL version</a></li>
<li><a href="html-tooltip/index.html" title='HTML in tooltip'>HTML in tooltip</a></li>
<li><a href="custom-class/index.html" title='Custom CSS Class'>Custom CSS Class</a></li>
<li><a href="custom-scroll-el/index.html" title='Custom Scroll Element'>Custom Scroll Element</a></li>
<li><a href="withoutElement/index.html" title='Introduction without focusing on elements'>Introduction without focusing on elements</a></li>
<li><a href="bootstrap/v3/index.html" title='Using with Bootstrap v3.0'>Using with Bootstrap v3.0</a></li>
<li><a href="svg/d3.htm" title='Using Introjs with SVG Element'>Using with SVG Elements (D3)</a></li>
Expand Down
2 changes: 2 additions & 0 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,8 @@ class IntroJs {
* Options are: 'element' or 'tooltip'
*/
scrollTo: "element",
/* Reference Element to manage scroll */
scrollElRef: null,
/* Padding to add after scrolling when element is not in the viewport (in pixels) */
scrollPadding: 30,
/* Set the overlay opacity */
Expand Down
10 changes: 8 additions & 2 deletions src/util/cloneObject.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,15 @@ export default function cloneObject<T extends Object>(source: T): T {
const temp = {} as T;

for (const key in source) {
// @ts-ignore:next-line
if ("jQuery" in window && source[key] instanceof window.jQuery) {
if (
// @ts-ignore:next-line
("jQuery" in window && source[key] instanceof window.jQuery) ||
key === "scrollElRef"
) {
temp[key] = source[key];
} else if (key === "window") {
// @ts-ignore:next-line
temp[key] = window;
} else {
temp[key] = cloneObject(source[key]);
}
Expand Down
4 changes: 3 additions & 1 deletion src/util/scrollParentToElement.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ export default function scrollParentToElement(targetElement: HTMLElement) {

const parent = getScrollParent(targetElement);

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

if (scrollEl === document.body) return;

parent.scrollTop = targetElement.offsetTop - parent.offsetTop;
}
14 changes: 8 additions & 6 deletions src/util/scrollTo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,21 +30,23 @@ export default function scrollTo(
// I have changed the scroll option and now it scrolls the window to
// the center of the target element or tooltip.

const scrollEl = this._introItems[this._currentStep].scrollElRef || this._options.scrollElRef || window;

if (top < 0 || targetElement.clientHeight > winHeight) {
window.scrollBy(
scrollEl.scrollBy(
0,
rect.top -
(winHeight / 2 - rect.height / 2) -
this._options.scrollPadding
(winHeight / 2 - rect.height / 2) -
this._options.scrollPadding
); // 30px padding from edge to look nice

//Scroll down
} else {
window.scrollBy(
scrollEl.scrollBy(
0,
rect.top -
(winHeight / 2 - rect.height / 2) +
this._options.scrollPadding
(winHeight / 2 - rect.height / 2) +
this._options.scrollPadding
); // 30px padding from edge to look nice
}
}
Expand Down