From 0a165676642c2ac71acbeb58fca77a54633a880e Mon Sep 17 00:00:00 2001 From: clemdesign Date: Wed, 15 Feb 2023 14:45:29 +0100 Subject: [PATCH 1/2] feat: add scrollElRef that can be used to define a custom element which manage scroll (instead determine it by getScrollParent) --- example/assets/css/demo.css | 16 ++++ example/custom-scroll-el/index.html | 133 ++++++++++++++++++++++++++++ example/index.html | 1 + src/index.ts | 2 + src/util/cloneObject.ts | 10 ++- src/util/scrollParentToElement.ts | 4 +- src/util/scrollTo.ts | 6 +- 7 files changed, 167 insertions(+), 5 deletions(-) create mode 100644 example/custom-scroll-el/index.html diff --git a/example/assets/css/demo.css b/example/assets/css/demo.css index bb5cb1127..f40139589 100644 --- a/example/assets/css/demo.css +++ b/example/assets/css/demo.css @@ -5,6 +5,9 @@ body { font-family: 'Raleway', sans-serif; padding-bottom: 40px; } +body.no-padding { + padding: 0; +} /* Custom container */ .container-narrow { @@ -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 { diff --git a/example/custom-scroll-el/index.html b/example/custom-scroll-el/index.html new file mode 100644 index 000000000..4b8735b95 --- /dev/null +++ b/example/custom-scroll-el/index.html @@ -0,0 +1,133 @@ + + + + + HTML in tooltip + + + + + + + + + + + + + + + + +
+ +
+
+ +

Intro.js

+
+ +
+
+ +
+
+

HTML in tooltip

+

We're going to use HTML codes in tooltips via Programmatic API

+ 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.

+
+ +
+

Section Seven

+

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

+ +

Section Eight

+

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

+ +

Section Nine

+

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

+ +

Section Ten

+

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

+ +

Section Eleven

+

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

+ +

Section Twelve

+

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..daf477961 100644 --- a/example/index.html +++ b/example/index.html @@ -33,6 +33,7 @@

Examples

  • RTL version
  • HTML in tooltip
  • Custom CSS Class
    • +
  • Custom Scroll Element
  • Introduction without focusing on elements
  • Using with Bootstrap v3.0
  • Using with SVG Elements (D3)
    • diff --git a/src/index.ts b/src/index.ts index 093cf1391..513e11f52 100644 --- a/src/index.ts +++ b/src/index.ts @@ -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 */ diff --git a/src/util/cloneObject.ts b/src/util/cloneObject.ts index 11bbf5564..c4b6558a0 100644 --- a/src/util/cloneObject.ts +++ b/src/util/cloneObject.ts @@ -10,9 +10,15 @@ export default function cloneObject(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]); } diff --git a/src/util/scrollParentToElement.ts b/src/util/scrollParentToElement.ts index 487f71201..d80ec422a 100644 --- a/src/util/scrollParentToElement.ts +++ b/src/util/scrollParentToElement.ts @@ -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; } diff --git a/src/util/scrollTo.ts b/src/util/scrollTo.ts index 0f32fd326..72a9a9b26 100644 --- a/src/util/scrollTo.ts +++ b/src/util/scrollTo.ts @@ -30,8 +30,10 @@ 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) - @@ -40,7 +42,7 @@ export default function scrollTo( //Scroll down } else { - window.scrollBy( + scrollEl.scrollBy( 0, rect.top - (winHeight / 2 - rect.height / 2) + From 858c920b70fbf676a33f5e9d20e7960bbbd3f39e Mon Sep 17 00:00:00 2001 From: clemdesign Date: Thu, 16 Feb 2023 10:04:37 +0100 Subject: [PATCH 2/2] clean: remove console.log --- src/util/scrollTo.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/util/scrollTo.ts b/src/util/scrollTo.ts index 72a9a9b26..faad85b8c 100644 --- a/src/util/scrollTo.ts +++ b/src/util/scrollTo.ts @@ -36,8 +36,8 @@ export default function scrollTo( 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 @@ -45,8 +45,8 @@ export default function scrollTo( 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 } }