@evermade/overflow-slider 1.0.0 → 2.0.0

package/docs/assets/demo.css

@@ -94,7 +94,7 @@ textarea {
 }
 
 body {
-	background-color: #f7f7f7;
+	background-color: #fff;
 }
 
 a {
@@ -104,8 +104,7 @@ a {
 }
 
 a:hover,
-a:focus-visible,
-a:active {
+a:focus-visible {
 	color: var(--color-primary);
 }
 
@@ -366,9 +365,9 @@ h3:before {
    Content
 =========================================================================== */
 
-.example-container {
-	gap: var(--slide-gap);
+.overflow-slider {
 	margin-top: 1.5rem;
+	gap: 1rem;
 }
 
 .example-item {
@@ -486,6 +485,24 @@ h3:before {
 	scroll-snap-type: x proximity;
 }
 
+.example-container-3-entrance-animation a {
+	animation: slideEntrance, slideEntrance;
+	animation-direction: normal, reverse;
+	animation-timeline: view(inline);
+	animation-range: entry, exit;
+}
+
+@keyframes slideEntrance {
+	0% {
+		transform: scale(.75);
+		opacity: 0;
+	}
+	100% {
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+
 .overflow-slider__dots {
 	margin-top: 1.5rem;
 }
@@ -511,3 +528,132 @@ h3:before {
 	width: 1.625rem !important;
 	height: 1.625rem !important;
 }
+
+/* ===========================================================================
+  Example 4: Filters
+=========================================================================== */
+
+.example-4-filters-wrapper {
+	display: flex;
+	align-items: center;
+	gap: .5rem;
+	margin-top: 1.5rem;
+	position: relative;
+}
+
+.example-container-4-filters {
+	gap: .75rem;
+	margin: 0;
+}
+
+.example-4-filters-previous,
+.example-4-filters-next {
+	transition: .1s ease-in-out;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	width: var(--example-4-arrow-size);
+	display: flex;
+	align-items: center;
+	background: #fff;
+	padding-inline: .5rem;
+}
+
+.example-4-filters-previous {
+	left: 0;
+}
+
+.example-4-filters-next {
+	right: 0;
+}
+
+.example-4-filters-previous:has([data-has-content="false"]),
+.example-4-filters-next:has([data-has-content="false"]) {
+	opacity: 0;
+	pointer-events: none;
+	visibility: hidden;
+}
+
+.example-filter {
+	padding: .5rem 1rem;
+	border-radius: 2rem;
+	background: var(--color-grey-100);
+	cursor: pointer;
+	color: var(--color-grey-800);
+	white-space: nowrap;
+	text-decoration: none;
+}
+
+.example-filter:hover,
+.example-filter:focus-visible {
+	background: var(--color-grey-800);
+	color: var(--color-white);
+}
+
+/* ===========================================================================
+  Example 4: Grid On Desktop
+=========================================================================== */
+
+@media (min-width: 768px) {
+	.example-container-4-grid-or-slider {
+		width: 100%;
+		max-width: 100%;
+		grid-template-columns: repeat(4, minmax(0, 1fr));
+		grid-auto-flow: row;
+		overflow: clip;
+	}
+
+	.example-container-4-grid-or-slider .example-item {
+		width: 100%;
+	}
+}
+
+/* ===========================================================================
+  Example 4: Full Width
+=========================================================================== */
+
+.example-container-4-full-width {
+	width: 100vw;
+	margin-left: calc(-50vw + 50%);
+}
+
+/* ===========================================================================
+  Example 4: Synced Sliders
+=========================================================================== */
+
+.example-container-4-thumbnails-wrapper {
+
+}
+
+.example-container-4-synced-main {
+	grid-template-columns: repeat(var(--slider-slides-count, 1), var(--slider-container-width, 900px));
+	scroll-snap-type: x mandatory;
+}
+
+.example-container-4-synced-main .example-item {
+	aspect-ratio: 16/8;
+	width: 100%;
+	max-width: 100%;
+}
+
+.example-container-4-synced-thumbnails {
+	scroll-snap-type: x proximity;
+}
+
+.example-container-4-synced-thumbnails .example-item {
+	aspect-ratio: 1/1;
+	font-size: 1.5rem;
+	width: 120px;
+	opacity: .5;
+	cursor: pointer;
+}
+
+.example-container-4-synced-thumbnails .example-item:hover {
+	opacity: .875;
+}
+
+.example-container-4-synced-thumbnails .example-item[aria-current="true"] {
+	opacity: 1 !important;
+	background: var(--color-grey-800);
+	color: #fff;
+}

package/docs/assets/demo.js

@@ -1,11 +1,23 @@
-import {
-	OverflowSlider,
-	DragScrollingPlugin,
-	SkipLinksPlugin,
-	ArrowsPlugin,
-	ScrollIndicatorPlugin,
-	DotsPlugin
-} from '../dist/overflow-slider.esm.js';
+/**
+ * Hello!
+ *
+ * This is not how you import files in real project. This is only done this way
+ * to make it work with the demo page that cannot import the package from npm.
+ *
+ * In a real project, you would do something like this:
+ *
+ * import { OverflowSlider } from '@overflow-slider/core';
+ * import DragScrollingPlugin from '@overflow-slider/plugins/drag-scrolling';
+ * import SkipLinksPlugin from '@overflow-slider/plugins/skip-links';
+ */
+import { OverflowSlider } from '../dist/index.esm.js';
+import DragScrollingPlugin from '../dist/plugins/drag-scrolling/drag-scrolling/index.esm.js';
+import SkipLinksPlugin from '../dist/plugins/skip-links/skip-links/index.esm.js';
+import ArrowsPlugin from '../dist/plugins/arrows/arrows/index.esm.js';
+import ScrollIndicatorPlugin from '../dist/plugins/scroll-indicator/scroll-indicator/index.esm.js';
+import DotsPlugin from '../dist/plugins/dots/dots/index.esm.js';
+import FullWidthPlugin from '../dist/plugins/full-width/full-width/index.esm.js';
+import ThumbnailsPlugin from '../dist/plugins/thumbnails/thumbnails/index.esm.js';
 
 (function () {
 	const init = () => {
@@ -16,14 +28,24 @@ import {
 		console.log( '1-css', example1CSS );
 
 		const example1DragScrolling = new OverflowSlider(
-			document.querySelector( '.example-container-1-drag-scrolling' ),
+			document.querySelector( '.example-container-1-drag-scrolling-clickable' ),
 			{},
 			[
 				DragScrollingPlugin(),
 				SkipLinksPlugin(),
 			]
 		);
-		console.log( '1-drag-scrolling', example1DragScrolling );
+		console.log( '1-drag-scrolling-clickable', example1DragScrolling );
+
+		const example1DragScrollingNotClickable = new OverflowSlider(
+			document.querySelector( '.example-container-1-drag-scrolling-not-clickable' ),
+			{},
+			[
+				DragScrollingPlugin(),
+				SkipLinksPlugin(),
+			]
+		);
+		console.log( '1-drag-scrolling-not-clickable', example1DragScrollingNotClickable );
 
 		const example1Arrows = new OverflowSlider(
 			document.querySelector( '.example-container-1-arrows' ),
@@ -107,6 +129,81 @@ import {
 			]
 		);
 		console.log( '3-scroll-snapping-proximity', example3ScrollSnappingProximity );
+
+		const example3EntranceAnimation = new OverflowSlider(
+			document.querySelector( '.example-container-3-entrance-animation' ),
+			{},
+			[
+				DragScrollingPlugin(),
+				ScrollIndicatorPlugin(),
+			]
+		);
+		console.log( '3-entrance-animation', example3EntranceAnimation );
+
+		const example4Filters = new OverflowSlider(
+			document.querySelector( '.example-container-4-filters' ),
+			{},
+			[
+				DragScrollingPlugin(),
+				ArrowsPlugin({
+					containerPrev: document.querySelector( '.example-4-filters-previous' ),
+					containerNext: document.querySelector( '.example-4-filters-next' ),
+				})
+			]
+		);
+		console.log( '4-filters', example4Filters );
+
+		const example4GridOrSliders = new OverflowSlider(
+			document.querySelector( '.example-container-4-grid-or-slider' ),
+			{},
+			[
+				DragScrollingPlugin(),
+				ScrollIndicatorPlugin(),
+			]
+		);
+		console.log( '4-grid-or-slider', example4GridOrSliders );
+
+		const example4FullWidth = new OverflowSlider(
+			document.querySelector( '.example-container-4-full-width' ),
+			{},
+			[
+				DragScrollingPlugin(),
+				FullWidthPlugin(
+					{
+						targetWidth: (slider) => {
+							// copy the width of the parent element
+							return slider.container.parentElement.clientWidth;
+						}
+					}
+				),
+				ScrollIndicatorPlugin(),
+			]
+		);
+		console.log( '4-full-width', example4FullWidth );
+
+		const example4SyncedMain = new OverflowSlider(
+			document.querySelector( '.example-container-4-synced-main' ),
+			{},
+			[
+				DragScrollingPlugin(),
+			]
+		);
+		console.log( '4-synced-main', example4SyncedMain );
+
+		const example4SyncedThumbnails = new OverflowSlider(
+			document.querySelector( '.example-container-4-synced-thumbnails' ),
+			{},
+			[
+				DragScrollingPlugin(),
+				ThumbnailsPlugin({
+					mainSlider: example4SyncedMain,
+				}),
+			]
+		);
+		console.log( '4-synced-thumbnails', example4SyncedThumbnails );
+
+
+
 	};
 
 	init();

package/docs/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/docs/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/docs/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/docs/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/docs/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/docs/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/docs/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/docs/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};