From e19661b899ff7ed4d891a32cb61ff0da10fda2b9 Mon Sep 17 00:00:00 2001 From: Mick Date: Thu, 13 Feb 2025 12:32:51 +0000 Subject: [PATCH] Add scroll point replay Housekeeping --- packages/scroll-points/.npmignore | 1 - packages/scroll-points/README.md | 13 ++-- packages/scroll-points/__tests__/unit.js | 12 ++++ packages/scroll-points/example/src/index.html | 65 ++----------------- .../scroll-points/example/src/js/index.js | 2 +- packages/scroll-points/src/lib/defaults.js | 3 +- packages/scroll-points/src/lib/factory.js | 2 +- 7 files changed, 30 insertions(+), 68 deletions(-) diff --git a/packages/scroll-points/.npmignore b/packages/scroll-points/.npmignore index 97d59ca6..e9c7665c 100644 --- a/packages/scroll-points/.npmignore +++ b/packages/scroll-points/.npmignore @@ -1,6 +1,5 @@ .DS_Store *.log -src __tests__ example coverage diff --git a/packages/scroll-points/README.md b/packages/scroll-points/README.md index 1527ec7e..4e107482 100644 --- a/packages/scroll-points/README.md +++ b/packages/scroll-points/README.md @@ -1,7 +1,7 @@ # Scroll points -Trigger className changes and callbacks based on element intersecting the viewport using IntersectionObservers. +Trigger className changes and callbacks based on scroll using IntersectionObservers. --- @@ -47,12 +47,13 @@ const [ instance ] = scrollPoints(elements); ## Options ``` { - root: null, //element that is used as the viewport for checking visiblity of the target + root: null, //element that is used as the viewport for checking visiblity of the target, defaults to viewport if null rootMargin: '0px 0px 0px 0px', //margin around the root, px or percentage values threshold: 0, //Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed - callback: false, //function executed when scrolled into view - className: 'is--scrolled-in', //className added when scrolled into view - unload: true //only callback once + callback: false, //function executed when target is intersecting + className: 'is--scrolled-in', //className added when target is intersecting + unload: true //unload intersection observer after target has intersected once + replay: false //remove className when target is not intersecting }; ``` @@ -62,7 +63,7 @@ npm t ``` ## Browser support -Depends on Object.assign and the [IntersectionObserver API](https://caniuse.com/#feat=intersectionobserver), IE11 will require polyfills. +Depends on [IntersectionObserver API](https://caniuse.com/#feat=intersectionobserver). ## License MIT diff --git a/packages/scroll-points/__tests__/unit.js b/packages/scroll-points/__tests__/unit.js index 019dcce2..29d65d94 100644 --- a/packages/scroll-points/__tests__/unit.js +++ b/packages/scroll-points/__tests__/unit.js @@ -49,5 +49,17 @@ describe('Scroll points > unit > callback', () => { expect(mockDisconnect).toBeCalledWith(node); }); + it('should remove className if entries[0] is not intersecting and replay and unload options set to allow replaying', () => { + document.body.innerHTML = '
'; + const node = document.querySelector('.test'); + const settings = { ...defaults, replay: true, unload: false }; + const observer = { disconnect: () => {} }; + callback({ settings, node })([{ isIntersecting: true }], observer); + expect(node.classList.contains(defaults.className)).toEqual(true); + + callback({ settings, node })([{ isIntersecting: false }], observer); + expect(node.classList.contains(defaults.className)).toEqual(false); + }); + }); \ No newline at end of file diff --git a/packages/scroll-points/example/src/index.html b/packages/scroll-points/example/src/index.html index 2c76e821..90a64abe 100644 --- a/packages/scroll-points/example/src/index.html +++ b/packages/scroll-points/example/src/index.html @@ -1,7 +1,7 @@ - StormID + Storm ID +
diff --git a/packages/scroll-points/example/src/js/index.js b/packages/scroll-points/example/src/js/index.js index a6c9f115..e9df6dcb 100644 --- a/packages/scroll-points/example/src/js/index.js +++ b/packages/scroll-points/example/src/js/index.js @@ -1,5 +1,5 @@ import scrollPoints from '../../../src'; window.addEventListener('DOMContentLoaded', () => { - scrollPoints('.js-scroll-point'); + scrollPoints('.js-scroll-point', { rootMargin: '0px 0px -50% 0px', unload: false, replay: true }); }); \ No newline at end of file diff --git a/packages/scroll-points/src/lib/defaults.js b/packages/scroll-points/src/lib/defaults.js index a8fd3147..e932f313 100644 --- a/packages/scroll-points/src/lib/defaults.js +++ b/packages/scroll-points/src/lib/defaults.js @@ -5,5 +5,6 @@ export default { threshold: 0, callback: false, className: 'is--scrolled-in', - unload: true + unload: true, + replay: false }; \ No newline at end of file diff --git a/packages/scroll-points/src/lib/factory.js b/packages/scroll-points/src/lib/factory.js index 5097864a..c86cda62 100644 --- a/packages/scroll-points/src/lib/factory.js +++ b/packages/scroll-points/src/lib/factory.js @@ -3,7 +3,7 @@ export const callback = ({ settings, node }) => (entries, observer) => { node.classList.add(settings.className); if (settings.callback && typeof settings.callback === 'function') settings.callback.call({ settings, node }); if (settings.unload) observer.disconnect(node); - } + } else if (settings.replay) node.classList.remove(settings.className); }; export default ({ settings, node }) => {