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

Disable tour animation #1728

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

Disable tour animation #1728

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
05a8a88
add option to disable tour animation
sammuell Jul 18, 2022
3d08af4
implement smooth scrolling
sammuell Jul 18, 2022
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
72 changes: 72 additions & 0 deletions example/disable-animation/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Disable Tour Animation</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>

<div class="container-narrow">

<div class="masthead">
<ul class="nav nav-pills pull-right" data-step="5" data-intro="Get it, use it.">
<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 class="jumbotron">
<h1 data-step="1" data-intro="This is a tooltip!" data-title="A short title">Disable Tour Animation</h1>
<p class="lead" data-step="4" data-intro="Another step." data-title="foo">This example disables the tour animation using the <code>tourAnimation</code> option.</p>
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().setOption('tourAnimation', false).start();">Show me how</a>
</div>

<hr>

<div class="row-fluid marketing">
<div class="span6" data-step="2" data-title="A very long title containing a lot of unnecessary text so that the title spans over multiple lines" data-intro="Ok, wasn't that fun?" data-position='right' data-scrollTo='tooltip'>
<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>
</div>

<div class="span6" data-step="3" data-intro="More features, more fun." data-position='left'>
<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>

<hr>
</div>
<script type="text/javascript" src="../../dist/intro.js"></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 @@ -30,6 +30,7 @@ <h3 class="muted">Examples</h3>
<li><a href="multi-page/index.html" title='Multi-Page introduction'>Multi-Page introduction</a></li>
<li><a href="auto-position/index.html" title='Auto-positioning'>Auto-positioning</a></li>
<li><a href="disable-interaction/index.html" title='Disable interaction'>Disable interaction with elements</a></li>
<li><a href="disable-animation/index.html" title='Disable tour animation'>Disable tour animation</a></li>
<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>
Expand Down
3 changes: 3 additions & 0 deletions src/core/exitIntro.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import onKeyDown from "./onKeyDown";
import onResize from "./onResize";
import removeShowElement from "./removeShowElement";
import removeChild from "../util/removeChild";
import removeClass from "../util/removeClass";

/**
* Exit from intro
Expand Down Expand Up @@ -55,6 +56,8 @@ export default async function exitIntro(targetElement, force) {

removeShowElement();

removeClass(targetElement, "introjs-animated-tour");

//clean listeners
DOMEvent.off(window, "keydown", onKeyDown, this, true);
DOMEvent.off(window, "resize", onResize, this, true);
Expand Down
5 changes: 5 additions & 0 deletions src/core/introForElement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import DOMEvent from "./DOMEvent";
import { nextStep } from "./steps";
import onKeyDown from "./onKeyDown";
import onResize from "./onResize";
import addClass from "../util/addClass";
import fetchIntroSteps from "./fetchIntroSteps";

/**
Expand Down Expand Up @@ -32,6 +33,10 @@ export default async function introForElement(targetElm) {

//add overlay layer to the page
if (addOverlayLayer.call(this, targetElm)) {
if (this._options.tourAnimation) {
addClass(targetElm, "introjs-animated-tour");
}

//then, start the show
await nextStep.call(this);

Expand Down
3 changes: 2 additions & 1 deletion src/core/showElement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,6 +246,7 @@ export default async function _showElement(targetElement) {
removeShowElement();

//we should wait until the CSS3 transition is competed (it's 0.3 sec) to prevent incorrect `height` and `width` calculation
let timeout = (self._options.tourAnimation) ? 350 : 1;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would be amazing if the timeout can also be configurable, maybe a new prop tooltipTimeoutMs to customize the timemout ms can be defined

if (self._lastShowElementTimer) {
window.clearTimeout(self._lastShowElementTimer);
}
Expand Down Expand Up @@ -302,7 +303,7 @@ export default async function _showElement(targetElement) {
targetElement,
oldtooltipLayer
);
}, 350);
}, timeout);

// end of old element if-else condition
} else {
Expand Down
2 changes: 2 additions & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,8 @@ function IntroJs(obj) {
hintAutoRefreshInterval: 10,
/* Adding animation to hints? */
hintAnimation: true,
/* Whether to animate tour step transitions */
tourAnimation: true,
/* additional classes to put on the buttons */
buttonClass: "introjs-button",
/* additional classes to put on progress bar */
Expand Down
25 changes: 21 additions & 4 deletions src/styles/introjs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ $background_color_10: rgba(136, 136, 136, 0.24);
box-sizing: content-box;
z-index: 999999;
opacity: 0;
transition: all 0.3s ease-out;
}

.introjs-showElement {
Expand Down Expand Up @@ -54,7 +53,6 @@ tr.introjs-showElement {
position: absolute;
z-index: 9999998;
border-radius: 4px;
transition: all 0.3s ease-out;

* {
box-sizing: content-box;
Expand All @@ -76,13 +74,33 @@ tr.introjs-showElement {
visibility: hidden;
z-index: 100000000;
background-color: transparent;
transition: all 0.3s ease-out;

* {
font-family: $font_family;
}
}

// Enable introjs animations.
.introjs-animated-tour {
scroll-behavior: smooth;

.introjs-helperLayer {
transition: all 0.3s ease-out;
}

.introjs-tooltipReferenceLayer {
transition: all 0.3s ease-out;
}

.introjs-overlay {
transition: all 0.3s ease-out;
}

.introjs-tooltip {
transition: opacity 0.1s ease-out;
}
}

.introjs-helperNumberLayer {
font-family: $font_family;
color: $black500;
Expand Down Expand Up @@ -168,7 +186,6 @@ tr.introjs-showElement {
max-width: 300px;
border-radius: 5px;
box-shadow: 0 3px 30px rgba($black900, 0.3);
transition: opacity 0.1s ease-out;
}

.introjs-tooltiptext {
Expand Down
26 changes: 15 additions & 11 deletions src/util/scrollTo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,21 +30,25 @@ export default function scrollTo(scrollTo, { element }, tooltipLayer) {
// the center of the target element or tooltip.

if (top < 0 || element.clientHeight > winHeight) {
window.scrollBy(
0,
rect.top -
window.scrollBy({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be great if we add some Cypress tests

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. What would you test in this case? It still uses the same function window.scrollBy()

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for the delay @sammuell. We usually have a delay() between each step in the Cypress tests to make sure the transition is complete. Now that the transition can be enabled/disabled, we can probably have a test without that delay(), take a screenshot and that should capture the tooltip in its correct position. Would that be a useful test case?

top: rect.top -
(winHeight / 2 - rect.height / 2) -
this._options.scrollPadding
); // 30px padding from edge to look nice
// 30px padding from edge to look nice
this._options.scrollPadding,
left: 0,
behavior: 'smooth'
});

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