From 05a8a88ad19ab5cd3d83fc4d38cb464922c7a9e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Samuel=20M=C3=BCller?= Date: Mon, 18 Jul 2022 15:03:00 +0200 Subject: [PATCH 1/2] add option to disable tour animation --- example/disable-animation/index.html | 72 ++++++++++++++++++++++++++++ example/index.html | 1 + src/core/exitIntro.js | 3 ++ src/core/introForElement.js | 5 ++ src/core/showElement.js | 3 +- src/index.js | 2 + src/styles/introjs.scss | 23 +++++++-- 7 files changed, 104 insertions(+), 5 deletions(-) create mode 100644 example/disable-animation/index.html diff --git a/example/disable-animation/index.html b/example/disable-animation/index.html new file mode 100644 index 000000000..b9d6d36fc --- /dev/null +++ b/example/disable-animation/index.html @@ -0,0 +1,72 @@ + + + + + Disable Tour Animation + + + + + + + + + + + + + + + + +
+ +
+ +

Intro.js

+
+ +
+ +
+

Disable Tour Animation

+

This example disables the tour animation using the tourAnimation option.

+ Show me how +
+ +
+ +
+
+

Section One

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+ +

Section Two

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+ +

Section Three

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+
+ +
+

Section Four

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+ +

Section Five

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+ +

Section Six

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

+ +
+
+ +
+
+ + + diff --git a/example/index.html b/example/index.html index 5cb2809a6..6295dccb0 100644 --- a/example/index.html +++ b/example/index.html @@ -30,6 +30,7 @@

Examples

  • Multi-Page introduction
  • Auto-positioning
  • Disable interaction with elements
    • +
  • Disable tour animation
  • RTL version
  • HTML in tooltip
  • Custom CSS Class
    • diff --git a/src/core/exitIntro.js b/src/core/exitIntro.js index a2508aad5..8a1b705ba 100644 --- a/src/core/exitIntro.js +++ b/src/core/exitIntro.js @@ -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 @@ -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); diff --git a/src/core/introForElement.js b/src/core/introForElement.js index fd788f057..8b5ddf6d7 100644 --- a/src/core/introForElement.js +++ b/src/core/introForElement.js @@ -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"; /** @@ -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); diff --git a/src/core/showElement.js b/src/core/showElement.js index 700c0a976..76c1911af 100644 --- a/src/core/showElement.js +++ b/src/core/showElement.js @@ -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; if (self._lastShowElementTimer) { window.clearTimeout(self._lastShowElementTimer); } @@ -302,7 +303,7 @@ export default async function _showElement(targetElement) { targetElement, oldtooltipLayer ); - }, 350); + }, timeout); // end of old element if-else condition } else { diff --git a/src/index.js b/src/index.js index 40499292b..89c4e92e9 100644 --- a/src/index.js +++ b/src/index.js @@ -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 */ diff --git a/src/styles/introjs.scss b/src/styles/introjs.scss index fcc9f2f0f..01e3921b5 100644 --- a/src/styles/introjs.scss +++ b/src/styles/introjs.scss @@ -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 { @@ -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; @@ -76,13 +74,31 @@ 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 { + .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; @@ -168,7 +184,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 { From 3d08af4efce4bbca27cf7b985c69c871c89d59dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Samuel=20M=C3=BCller?= Date: Mon, 18 Jul 2022 16:10:47 +0200 Subject: [PATCH 2/2] implement smooth scrolling --- src/styles/introjs.scss | 2 ++ src/util/scrollTo.js | 26 +++++++++++++++----------- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/styles/introjs.scss b/src/styles/introjs.scss index 01e3921b5..776053dbc 100644 --- a/src/styles/introjs.scss +++ b/src/styles/introjs.scss @@ -82,6 +82,8 @@ tr.introjs-showElement { // Enable introjs animations. .introjs-animated-tour { + scroll-behavior: smooth; + .introjs-helperLayer { transition: all 0.3s ease-out; } diff --git a/src/util/scrollTo.js b/src/util/scrollTo.js index cb6720fd1..0ca4e73e8 100644 --- a/src/util/scrollTo.js +++ b/src/util/scrollTo.js @@ -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({ + 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' + }); } } }