@evermade/overflow-slider 1.0.0 → 2.0.0

package/README.md

@@ -12,6 +12,18 @@ Overflow Slider aims to be lightweight, mobile-first and accessible. It is desig
 
 ### Usage
 
+Markup:
+
+```html
+<div class="overflow-slider">
+	<div>Slide 1</div>
+	<div>Slide 2</div>
+	<div>Slide 3</div>
+</div>
+```
+
+You don't have to use even class `overflow-slider` and slides can be whatever elements like `<a>`, `<li>`, or `article`.
+
 If you’re using a bundler (such as Webpack or Rollup), you can install through npm:
 
 ```bash
@@ -21,14 +33,12 @@ npm install @evermade/oveflow-slider
 Import the `OverflowSlider` along with plugins you want to use.
 
 ```js
-import {
-	OverflowSlider,
-	DragScrollingPlugin,
-	SkipLinksPlugin,
-	ArrowsPlugin,
-	ScrollIndicatorPlugin,
-	DotsPlugin
-} from "@evermade/overflow-slider";
+import { OverflowSlider } from '@evermade/overflow-slider';
+import DragScrollingPlugin from '@evermade/overflow-slider/plugins/drag-scrolling';
+import SkipLinksPlugin from '@evermade/overflow-slider/plugins/skip-links';
+import ArrowsPlugin from '@evermade/overflow-slider/plugins/arrows';
+import ScrollIndicatorPlugin from '@evermade/overflow-slider/plugins/scroll-indicator';
+import DotsPlugin from '@evermade/overflow-slider/plugins/dots';
 
 // minimal example
 const minimalSlider = new OverflowSlider(
@@ -91,6 +101,62 @@ You can use the CSS variables to override some values easily.
 
 Note that you can easily write styles from scratch if you want to. See source code from `src/overflow-slider.scss` for reference.
 
+## Known issues
+
+### Drag Scrolling and Smoothness
+
+Scroll snapping doesn't apply smoothly to drag scrolling. It might be browser limitation or some issue with implementation here. Should look into fixing it.
+
+## Limitations
+
+### Vertical scrolling
+
+The library is designed to work with horizontal scrolling. Vertical scrolling is not supported and likely never will because it is not a common use case for sliders.
+
+### RTL support
+
+RTL support is not implemented yet. In case need arises it can be implemented but requires changes to the core and plugins.
+
+### Looping slides
+
+Looping slides is not supported and likely never will be. It is a feature that is not very common and it is not very accessible.
+
+### Auto-play
+
+Auto-play is not supported at the moment but can probably be implemented as a plugin. It is not very accessible and should be avoided if possible.
+
+## To-do
+
+* Make drag scrolling snapping smooth
+* Make moveToSlide method smooth
+* Rethink dot amount calculation
+* Maybe split styles to separate files for plugins (but keep offering bundle as well)
+* Maybe add plugin that adds class for visible slides
+* Document all plugins and their parameters here
+
+## Changelog
+
+### 2.0.0
+
+* Breaking: Separate plugins to their own imports/files
+* Add: FullWidthPlugin to allow full width sliders
+* Add: ThumbnailsPlugin to show synchronized thumbnails
+* Add: Slider container 'data-ready' attribute when initialized to help writing CSS
+* Add: Support for optional separate containers for prev and next arrows
+* Add: Slides as array to Slider instance
+* Add: Active slide ID to Slider instance as activeSlideIdx and hook activeSlideChanged
+* Fix: DragScrollingPlugin dragging clickable slides in Firefox
+* Fix: DragScrollingPlugin dragging outside of container bugs in Firefox/Safari
+* Fix: ScrollIndicatorPlugin width calculation when scrollbar and container are not same width
+
+### 1.1.0
+
+* Add: Grab cursor when hovering slider that has DragScrollingPlugin
+* Add: Example of using entrance and exit animations for slides
+* Fix: ScrollIndicatorPlugin dragging works now with touch
+* Fix: Hide native scrollbar also in Firefox + Edge
+* Docs: Add more info on required markup and limitations
+
 ## Development
 
 Install tools `npm install` and build `npm run build` or develop with `npm run watch`.

package/dist/core/details.esm.js

@@ -0,0 +1,35 @@
+function details(slider) {
+    var _a;
+    let instance;
+    let hasOverflow = false;
+    let slideCount = 0;
+    let containerWidth = 0;
+    let scrollableAreaWidth = 0;
+    let amountOfPages = 0;
+    let currentPage = 1;
+    if (slider.container.scrollWidth > slider.container.clientWidth) {
+        hasOverflow = true;
+    }
+    slideCount = (_a = slider.slides.length) !== null && _a !== void 0 ? _a : 0;
+    containerWidth = slider.container.offsetWidth;
+    scrollableAreaWidth = slider.container.scrollWidth;
+    amountOfPages = Math.ceil(scrollableAreaWidth / containerWidth);
+    if (slider.container.scrollLeft >= 0) {
+        currentPage = Math.floor(slider.container.scrollLeft / containerWidth);
+        // consider as last page if the scrollLeft + containerWidth is equal to scrollWidth
+        if (slider.container.scrollLeft + containerWidth === scrollableAreaWidth) {
+            currentPage = amountOfPages - 1;
+        }
+    }
+    instance = {
+        hasOverflow,
+        slideCount,
+        containerWidth,
+        scrollableAreaWidth,
+        amountOfPages,
+        currentPage,
+    };
+    return instance;
+}
+
+export { details as default };

package/dist/core/details.min.js

@@ -0,0 +1 @@
+function t(t){var e;let n,l=!1,o=0,r=0,i=0,a=0,c=1;return t.container.scrollWidth>t.container.clientWidth&&(l=!0),o=null!==(e=t.slides.length)&&void 0!==e?e:0,r=t.container.offsetWidth,i=t.container.scrollWidth,a=Math.ceil(i/r),t.container.scrollLeft>=0&&(c=Math.floor(t.container.scrollLeft/r),t.container.scrollLeft+r===i&&(c=a-1)),n={hasOverflow:l,slideCount:o,containerWidth:r,scrollableAreaWidth:i,amountOfPages:a,currentPage:c},n}export{t as default};

package/dist/core/overflow-slider.esm.js

@@ -0,0 +1,26 @@
+import Slider from './slider.esm.js';
+
+function OverflowSlider(container, options, plugins) {
+    try {
+        // check that container HTML element
+        if (!(container instanceof Element)) {
+            throw new Error(`Container must be HTML element, found ${typeof container}`);
+        }
+        const defaults = {
+            scrollBehavior: "smooth",
+            scrollStrategy: "fullSlide",
+            slidesSelector: ":scope > *",
+        };
+        const sliderOptions = Object.assign(Object.assign({}, defaults), options);
+        // disable smooth scrolling if user prefers reduced motion
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            sliderOptions.scrollBehavior = "auto";
+        }
+        return Slider(container, sliderOptions, plugins);
+    }
+    catch (e) {
+        console.error(e);
+    }
+}
+
+export { OverflowSlider as default };

package/dist/core/overflow-slider.min.js

@@ -0,0 +1 @@
+import e from"./slider.min.js";function o(o,r,t){try{if(!(o instanceof Element))throw new Error("Container must be HTML element, found "+typeof o);const s={scrollBehavior:"smooth",scrollStrategy:"fullSlide",slidesSelector:":scope > *"},n=Object.assign(Object.assign({},s),r);return window.matchMedia("(prefers-reduced-motion: reduce)").matches&&(n.scrollBehavior="auto"),e(o,n,t)}catch(e){console.error(e)}}export{o as default};

package/dist/core/slider.esm.js

@@ -0,0 +1,260 @@
+import details from './details.esm.js';
+import { generateId, objectsAreEqual } from './utils.esm.js';
+
+function Slider(container, options, plugins) {
+    let slider;
+    let subs = {};
+    function init() {
+        slider.container = container;
+        // ensure container has id
+        let containerId = container.getAttribute('id');
+        if (containerId === null) {
+            containerId = generateId('overflow-slider');
+            container.setAttribute('id', containerId);
+        }
+        setSlides();
+        setDetails(true);
+        setActiveSlideIdx();
+        slider.on('contentsChanged', () => {
+            setSlides();
+            setDetails();
+            setActiveSlideIdx();
+        });
+        slider.on('containerSizeChanged', () => setDetails());
+        let requestId = 0;
+        const setDetailsDebounce = () => {
+            if (requestId) {
+                window.cancelAnimationFrame(requestId);
+            }
+            requestId = window.requestAnimationFrame(() => {
+                setDetails();
+                setActiveSlideIdx();
+            });
+        };
+        slider.on('scroll', setDetailsDebounce);
+        addEventListeners();
+        setDataAttributes();
+        setCSSVariables();
+        if (plugins) {
+            for (const plugin of plugins) {
+                plugin(slider);
+            }
+        }
+        slider.on('detailsChanged', () => {
+            setDataAttributes();
+            setCSSVariables();
+        });
+        slider.emit('created');
+        slider.container.setAttribute('data-ready', 'true');
+    }
+    function setDetails(isInit = false) {
+        const oldDetails = slider.details;
+        const newDetails = details(slider);
+        slider.details = newDetails;
+        if (!isInit && !objectsAreEqual(oldDetails, newDetails)) {
+            slider.emit('detailsChanged');
+        }
+        else if (isInit) {
+            slider.emit('detailsChanged');
+        }
+    }
+    function setSlides() {
+        slider.slides = Array.from(slider.container.querySelectorAll(slider.options.slidesSelector));
+    }
+    function addEventListeners() {
+        // changes to DOM
+        const observer = new MutationObserver(() => slider.emit('contentsChanged'));
+        observer.observe(slider.container, { childList: true });
+        // container size changes
+        const resizeObserver = new ResizeObserver(() => slider.emit('containerSizeChanged'));
+        resizeObserver.observe(slider.container);
+        // scroll event with debouncing
+        slider.container.addEventListener('scroll', () => slider.emit('scroll'));
+        // Listen for mouse down and touch start events on the document
+        // This handles both mouse clicks and touch interactions
+        let wasInteractedWith = false;
+        slider.container.addEventListener('mousedown', () => {
+            wasInteractedWith = true;
+        });
+        slider.container.addEventListener('touchstart', () => {
+            wasInteractedWith = true;
+        }, { passive: true });
+        slider.container.addEventListener('focusin', (e) => {
+            // move target parents as long as they are not the container
+            // but only if focus didn't start from mouse or touch
+            if (!wasInteractedWith) {
+                let target = e.target;
+                while (target.parentElement !== slider.container) {
+                    if (target.parentElement) {
+                        target = target.parentElement;
+                    }
+                    else {
+                        break;
+                    }
+                }
+                ensureSlideIsInView(target);
+            }
+            wasInteractedWith = false;
+        });
+    }
+    function setCSSVariables() {
+        slider.container.style.setProperty('--slider-container-width', `${slider.details.containerWidth}px`);
+        slider.container.style.setProperty('--slider-scrollable-width', `${slider.details.scrollableAreaWidth}px`);
+        slider.container.style.setProperty('--slider-slides-count', `${slider.details.slideCount}`);
+    }
+    function setDataAttributes() {
+        slider.container.setAttribute('data-has-overflow', slider.details.hasOverflow ? 'true' : 'false');
+    }
+    function ensureSlideIsInView(slide) {
+        const slideRect = slide.getBoundingClientRect();
+        const sliderRect = slider.container.getBoundingClientRect();
+        const containerWidth = slider.container.offsetWidth;
+        const scrollLeft = slider.container.scrollLeft;
+        const slideStart = slideRect.left - sliderRect.left + scrollLeft;
+        const slideEnd = slideStart + slideRect.width;
+        let scrollTarget = null;
+        if (slideStart < scrollLeft) {
+            scrollTarget = slideStart;
+        }
+        else if (slideEnd > scrollLeft + containerWidth) {
+            scrollTarget = slideEnd - containerWidth;
+        }
+        else if (slideStart === 0) {
+            scrollTarget = 0;
+        }
+        if (scrollTarget !== null) {
+            slider.container.style.scrollSnapType = 'none';
+            slider.container.scrollLeft = scrollTarget;
+            // @todo resume scroll snapping but at least proximity gives a lot of trouble
+            // and it's not really needed for this use case but it would be nice to have
+            // it back in case it's needed. We need to calculate scrollLeft some other way
+        }
+    }
+    function setActiveSlideIdx() {
+        const sliderRect = slider.container.getBoundingClientRect();
+        const scrollLeft = slider.container.scrollLeft;
+        const slides = slider.slides;
+        let activeSlideIdx = 0;
+        for (let i = 0; i < slides.length; i++) {
+            const slideRect = slides[i].getBoundingClientRect();
+            const slideStart = slideRect.left - sliderRect.left + scrollLeft + getGapSize();
+            if (slideStart > scrollLeft) {
+                activeSlideIdx = i;
+                break;
+            }
+        }
+        const oldActiveSlideIdx = slider.activeSlideIdx;
+        slider.activeSlideIdx = activeSlideIdx;
+        if (oldActiveSlideIdx !== activeSlideIdx) {
+            slider.emit('activeSlideChanged');
+        }
+    }
+    function moveToSlide(idx) {
+        const slide = slider.slides[idx];
+        if (slide) {
+            ensureSlideIsInView(slide);
+        }
+    }
+    function getGapSize() {
+        let gapSize = 0;
+        if (slider.slides.length > 1) {
+            const firstSlideRect = slider.slides[0].getBoundingClientRect();
+            const secondSlideRect = slider.slides[1].getBoundingClientRect();
+            gapSize = secondSlideRect.left - firstSlideRect.right;
+        }
+        return gapSize;
+    }
+    function moveToDirection(direction = "prev") {
+        const scrollStrategy = slider.options.scrollStrategy;
+        const scrollLeft = slider.container.scrollLeft;
+        const sliderRect = slider.container.getBoundingClientRect();
+        const containerWidth = slider.container.offsetWidth;
+        let targetScrollPosition = scrollLeft;
+        if (direction === 'prev') {
+            targetScrollPosition = Math.max(0, scrollLeft - slider.container.offsetWidth);
+        }
+        else if (direction === 'next') {
+            targetScrollPosition = Math.min(slider.container.scrollWidth, scrollLeft + slider.container.offsetWidth);
+        }
+        if (scrollStrategy === 'fullSlide') {
+            let fullSldeTargetScrollPosition = null;
+            // extend targetScrollPosition to include gap
+            if (direction === 'prev') {
+                fullSldeTargetScrollPosition = Math.max(0, targetScrollPosition - getGapSize());
+            }
+            else {
+                fullSldeTargetScrollPosition = Math.min(slider.container.scrollWidth, targetScrollPosition + getGapSize());
+            }
+            if (direction === 'next') {
+                let partialSlideFound = false;
+                for (let slide of slider.slides) {
+                    const slideRect = slide.getBoundingClientRect();
+                    const slideStart = slideRect.left - sliderRect.left + scrollLeft;
+                    const slideEnd = slideStart + slideRect.width;
+                    if (slideStart < targetScrollPosition && slideEnd > targetScrollPosition) {
+                        fullSldeTargetScrollPosition = slideStart;
+                        partialSlideFound = true;
+                        break;
+                    }
+                }
+                if (!partialSlideFound) {
+                    fullSldeTargetScrollPosition = Math.min(targetScrollPosition, slider.container.scrollWidth - slider.container.offsetWidth);
+                }
+                if (fullSldeTargetScrollPosition && fullSldeTargetScrollPosition > scrollLeft) {
+                    targetScrollPosition = fullSldeTargetScrollPosition;
+                }
+            }
+            else {
+                let partialSlideFound = false;
+                for (let slide of slider.slides) {
+                    const slideRect = slide.getBoundingClientRect();
+                    const slideStart = slideRect.left - sliderRect.left + scrollLeft;
+                    const slideEnd = slideStart + slideRect.width;
+                    if (slideStart < scrollLeft && slideEnd > scrollLeft) {
+                        fullSldeTargetScrollPosition = slideEnd - containerWidth;
+                        partialSlideFound = true;
+                        break;
+                    }
+                }
+                if (!partialSlideFound) {
+                    fullSldeTargetScrollPosition = Math.max(0, scrollLeft - containerWidth);
+                }
+                if (fullSldeTargetScrollPosition && fullSldeTargetScrollPosition < scrollLeft) {
+                    targetScrollPosition = fullSldeTargetScrollPosition;
+                }
+            }
+        }
+        slider.container.style.scrollBehavior = slider.options.scrollBehavior;
+        slider.container.scrollLeft = targetScrollPosition;
+        setTimeout(() => slider.container.style.scrollBehavior = '', 50);
+    }
+    function on(name, cb) {
+        if (!subs[name]) {
+            subs[name] = [];
+        }
+        subs[name].push(cb);
+    }
+    function emit(name) {
+        var _a;
+        if (subs && subs[name]) {
+            subs[name].forEach(cb => {
+                cb(slider);
+            });
+        }
+        const optionCallBack = (_a = slider === null || slider === void 0 ? void 0 : slider.options) === null || _a === void 0 ? void 0 : _a[name];
+        if (typeof optionCallBack === 'function') {
+            optionCallBack(slider);
+        }
+    }
+    slider = {
+        emit,
+        moveToDirection,
+        moveToSlide,
+        on,
+        options,
+    };
+    init();
+    return slider;
+}
+
+export { Slider as default };

package/dist/core/slider.min.js

@@ -0,0 +1 @@
+import e from"./details.min.js";import{generateId as t,objectsAreEqual as n}from"./utils.min.js";function i(i,o,l){let r,s={};function a(t=!1){const i=r.details,o=e(r);r.details=o,t||n(i,o)?t&&r.emit("detailsChanged"):r.emit("detailsChanged")}function c(){r.slides=Array.from(r.container.querySelectorAll(r.options.slidesSelector))}function d(){r.container.style.setProperty("--slider-container-width",`${r.details.containerWidth}px`),r.container.style.setProperty("--slider-scrollable-width",`${r.details.scrollableAreaWidth}px`),r.container.style.setProperty("--slider-slides-count",`${r.details.slideCount}`)}function f(){r.container.setAttribute("data-has-overflow",r.details.hasOverflow?"true":"false")}function u(e){const t=e.getBoundingClientRect(),n=r.container.getBoundingClientRect(),i=r.container.offsetWidth,o=r.container.scrollLeft,l=t.left-n.left+o,s=l+t.width;let a=null;l<o?a=l:s>o+i?a=s-i:0===l&&(a=0),null!==a&&(r.container.style.scrollSnapType="none",r.container.scrollLeft=a)}function h(){const e=r.container.getBoundingClientRect(),t=r.container.scrollLeft,n=r.slides;let i=0;for(let o=0;o<n.length;o++){if(n[o].getBoundingClientRect().left-e.left+t+g()>t){i=o;break}}const o=r.activeSlideIdx;r.activeSlideIdx=i,o!==i&&r.emit("activeSlideChanged")}function g(){let e=0;if(r.slides.length>1){const t=r.slides[0].getBoundingClientRect();e=r.slides[1].getBoundingClientRect().left-t.right}return e}return r={emit:function(e){var t;s&&s[e]&&s[e].forEach((e=>{e(r)}));const n=null===(t=null==r?void 0:r.options)||void 0===t?void 0:t[e];"function"==typeof n&&n(r)},moveToDirection:function(e="prev"){const t=r.options.scrollStrategy,n=r.container.scrollLeft,i=r.container.getBoundingClientRect(),o=r.container.offsetWidth;let l=n;if("prev"===e?l=Math.max(0,n-r.container.offsetWidth):"next"===e&&(l=Math.min(r.container.scrollWidth,n+r.container.offsetWidth)),"fullSlide"===t){let t=null;if(t="prev"===e?Math.max(0,l-g()):Math.min(r.container.scrollWidth,l+g()),"next"===e){let e=!1;for(let o of r.slides){const r=o.getBoundingClientRect(),s=r.left-i.left+n,a=s+r.width;if(s<l&&a>l){t=s,e=!0;break}}e||(t=Math.min(l,r.container.scrollWidth-r.container.offsetWidth)),t&&t>n&&(l=t)}else{let e=!1;for(let l of r.slides){const r=l.getBoundingClientRect(),s=r.left-i.left+n,a=s+r.width;if(s<n&&a>n){t=a-o,e=!0;break}}e||(t=Math.max(0,n-o)),t&&t<n&&(l=t)}}r.container.style.scrollBehavior=r.options.scrollBehavior,r.container.scrollLeft=l,setTimeout((()=>r.container.style.scrollBehavior=""),50)},moveToSlide:function(e){const t=r.slides[e];t&&u(t)},on:function(e,t){s[e]||(s[e]=[]),s[e].push(t)},options:o},function(){r.container=i;let e=i.getAttribute("id");null===e&&(e=t("overflow-slider"),i.setAttribute("id",e)),c(),a(!0),h(),r.on("contentsChanged",(()=>{c(),a(),h()})),r.on("containerSizeChanged",(()=>a()));let n=0;if(r.on("scroll",(()=>{n&&window.cancelAnimationFrame(n),n=window.requestAnimationFrame((()=>{a(),h()}))})),function(){new MutationObserver((()=>r.emit("contentsChanged"))).observe(r.container,{childList:!0});new ResizeObserver((()=>r.emit("containerSizeChanged"))).observe(r.container),r.container.addEventListener("scroll",(()=>r.emit("scroll")));let e=!1;r.container.addEventListener("mousedown",(()=>{e=!0})),r.container.addEventListener("touchstart",(()=>{e=!0}),{passive:!0}),r.container.addEventListener("focusin",(t=>{if(!e){let e=t.target;for(;e.parentElement!==r.container&&e.parentElement;)e=e.parentElement;u(e)}e=!1}))}(),f(),d(),l)for(const e of l)e(r);r.on("detailsChanged",(()=>{f(),d()})),r.emit("created"),r.container.setAttribute("data-ready","true")}(),r}export{i as default};

package/dist/core/utils.esm.js

@@ -0,0 +1,22 @@
+function generateId(prefix, i = 1) {
+    const id = `${prefix}-${i}`;
+    if (document.getElementById(id)) {
+        return generateId(prefix, i + 1);
+    }
+    return id;
+}
+function objectsAreEqual(obj1, obj2) {
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+    for (let key of keys1) {
+        if (obj2.hasOwnProperty(key) === false || obj1[key] !== obj2[key]) {
+            return false;
+        }
+    }
+    return true;
+}
+
+export { generateId, objectsAreEqual };

package/dist/core/utils.min.js

@@ -0,0 +1 @@
+function t(e,n=1){const r=`${e}-${n}`;return document.getElementById(r)?t(e,n+1):r}function e(t,e){const n=Object.keys(t),r=Object.keys(e);if(n.length!==r.length)return!1;for(let r of n)if(!1===e.hasOwnProperty(r)||t[r]!==e[r])return!1;return!0}export{t as generateId,e as objectsAreEqual};