@evermade/overflow-slider 2.0.2 → 3.0.0

package/dist/plugins/scroll-indicator/scroll-indicator/index.min.js

@@ -1 +1 @@
-const t={scrollIndicator:"overflow-slider__scroll-indicator",scrollIndicatorBar:"overflow-slider__scroll-indicator-bar",scrollIndicatorButton:"overflow-slider__scroll-indicator-button"};function e(e){return n=>{var o,r,a;const i={classNames:Object.assign(Object.assign({},t),(null==e?void 0:e.classNames)||[]),container:null!==(o=null==e?void 0:e.container)&&void 0!==o?o:null},s=document.createElement("div");s.setAttribute("class",i.classNames.scrollIndicator),s.setAttribute("tabindex","0"),s.setAttribute("role","scrollbar"),s.setAttribute("aria-controls",null!==(r=n.container.getAttribute("id"))&&void 0!==r?r:""),s.setAttribute("aria-orientation","horizontal"),s.setAttribute("aria-valuemax","100"),s.setAttribute("aria-valuemin","0"),s.setAttribute("aria-valuenow","0");const l=document.createElement("div");l.setAttribute("class",i.classNames.scrollIndicatorBar);const c=document.createElement("div");c.setAttribute("class",i.classNames.scrollIndicatorButton),c.setAttribute("data-is-grabbed","false"),l.appendChild(c),s.appendChild(l);const d=()=>{s.setAttribute("data-has-overflow",n.details.hasOverflow.toString())};d();const u=()=>{const t=c.offsetWidth/n.details.containerWidth;return n.container.scrollLeft*t};let v=0;const f=()=>{v&&window.cancelAnimationFrame(v),v=window.requestAnimationFrame((()=>{const t=n.details.containerWidth/n.details.scrollableAreaWidth*100,e=u();c.style.width=`${t}%`,c.style.transform=`translateX(${e}px)`;const o=n.container.scrollLeft/(n.container.scrollWidth-n.container.offsetWidth)*100;s.setAttribute("aria-valuenow",Math.round(Number.isNaN(o)?0:o).toString())}))};i.container?i.container.appendChild(s):null===(a=n.container.parentNode)||void 0===a||a.insertBefore(s,n.container.nextSibling),f(),n.on("scroll",f),n.on("contentsChanged",f),n.on("containerSizeChanged",f),n.on("detailsChanged",d),s.addEventListener("keydown",(t=>{"ArrowLeft"===t.key?n.moveToDirection("prev"):"ArrowRight"===t.key&&n.moveToDirection("next")})),s.addEventListener("click",(t=>{const e=c.offsetWidth,o=u(),r=o+e,a=t.pageX-s.offsetLeft;a<o?n.moveToDirection("prev"):a>r&&n.moveToDirection("next")}));let b=!1,m=0,h=0;const p=t=>{b=!0;const e=t.pageX||t.touches[0].pageX;m=e-s.offsetLeft,h=n.container.scrollLeft,c.style.cursor="grabbing",n.container.style.scrollSnapType="none",c.setAttribute("data-is-grabbed","true"),t.preventDefault(),t.stopPropagation()},w=t=>{if(!b)return;t.preventDefault();const e=(t.pageX||t.touches[0].pageX)-s.offsetLeft,o=n.details.scrollableAreaWidth/s.offsetWidth,r=(e-m)*o;n.container.scrollLeft=h+r},A=()=>{b=!1,c.style.cursor="",n.container.style.scrollSnapType="",c.setAttribute("data-is-grabbed","false")};c.addEventListener("mousedown",p),c.addEventListener("touchstart",p),window.addEventListener("mousemove",w),window.addEventListener("touchmove",w,{passive:!1}),window.addEventListener("mouseup",A),window.addEventListener("touchend",A)}}export{e as default};
+const t={scrollIndicator:"overflow-slider__scroll-indicator",scrollIndicatorBar:"overflow-slider__scroll-indicator-bar",scrollIndicatorButton:"overflow-slider__scroll-indicator-button"};function e(e){return n=>{var o,r,a;const i={classNames:Object.assign(Object.assign({},t),(null==e?void 0:e.classNames)||[]),container:null!==(o=null==e?void 0:e.container)&&void 0!==o?o:null},s=document.createElement("div");s.setAttribute("class",i.classNames.scrollIndicator),s.setAttribute("tabindex","0"),s.setAttribute("role","scrollbar"),s.setAttribute("aria-controls",null!==(r=n.container.getAttribute("id"))&&void 0!==r?r:""),s.setAttribute("aria-orientation","horizontal"),s.setAttribute("aria-valuemax","100"),s.setAttribute("aria-valuemin","0"),s.setAttribute("aria-valuenow","0");const l=document.createElement("div");l.setAttribute("class",i.classNames.scrollIndicatorBar);const c=document.createElement("div");c.setAttribute("class",i.classNames.scrollIndicatorButton),c.setAttribute("data-is-grabbed","false"),l.appendChild(c),s.appendChild(l);const d=()=>{s.setAttribute("data-has-overflow",n.details.hasOverflow.toString())};d();const u=()=>{const t=c.offsetWidth/n.details.containerWidth;return n.container.scrollLeft*t};let v=0;const f=()=>{v&&window.cancelAnimationFrame(v),v=window.requestAnimationFrame((()=>{const t=n.details.containerWidth/n.details.scrollableAreaWidth*100,e=u();c.style.width=`${t}%`,c.style.transform=`translateX(${e}px)`;const o=n.container.scrollLeft/(n.container.scrollWidth-n.container.offsetWidth)*100;s.setAttribute("aria-valuenow",Math.round(Number.isNaN(o)?0:o).toString())}))};i.container?i.container.appendChild(s):null===(a=n.container.parentNode)||void 0===a||a.insertBefore(s,n.container.nextSibling),f(),n.on("scroll",f),n.on("contentsChanged",f),n.on("containerSizeChanged",f),n.on("detailsChanged",d),s.addEventListener("keydown",(t=>{"ArrowLeft"===t.key?n.moveToDirection("prev"):"ArrowRight"===t.key&&n.moveToDirection("next")})),s.addEventListener("click",(t=>{const e=c.offsetWidth,o=u(),r=o+e,a=t.pageX-s.offsetLeft;a<o?n.moveToDirection("prev"):a>r&&n.moveToDirection("next")}));let b=!1,m=0,h=0;const w=t=>{b=!0;const e=t.pageX||t.touches[0].pageX;m=e-s.offsetLeft,h=n.container.scrollLeft,c.style.cursor="grabbing",c.setAttribute("data-is-grabbed","true"),t.preventDefault(),t.stopPropagation()},p=t=>{if(!b)return;t.preventDefault();const e=(t.pageX||t.touches[0].pageX)-s.offsetLeft,o=n.details.scrollableAreaWidth/s.offsetWidth,r=(e-m)*o;n.container.scrollLeft=h+r},A=()=>{b=!1,c.style.cursor="",c.setAttribute("data-is-grabbed","false")};c.addEventListener("mousedown",w),c.addEventListener("touchstart",w),window.addEventListener("mousemove",p),window.addEventListener("touchmove",p,{passive:!1}),window.addEventListener("mouseup",A),window.addEventListener("touchend",A)}}export{e as default};

package/dist/plugins/thumbnails/thumbnails/index.esm.js

@@ -27,7 +27,8 @@ function FullWidthPlugin(args) {
         };
         setActiveThumbnail();
         addClickListeners();
-        mainSlider.on('activeSlideChanged', () => {
+        // @todo debounce on scroll
+        mainSlider.on('scrollEnd', () => {
             setTimeout(() => {
                 const activeSlideIdx = mainSlider.activeSlideIdx;
                 const activeThumbnail = slider.slides[activeSlideIdx];

package/dist/plugins/thumbnails/thumbnails/index.min.js

@@ -1 +1 @@
-function e(e){return i=>{const t={mainSlider:e.mainSlider}.mainSlider,l=(e=null)=>{null===e&&i.slides.length>0&&(e=i.slides[0]),null!==e&&(i.slides.forEach((e=>{e.setAttribute("aria-current","false")})),e.setAttribute("aria-current","true"))};l(),i.slides.forEach(((e,i)=>{e.addEventListener("click",(()=>{t.moveToSlide(i),l(e)}))})),t.on("activeSlideChanged",(()=>{setTimeout((()=>{const e=t.activeSlideIdx,n=i.slides[e];l(n),i.moveToSlide(e)}),50)}))}}export{e as default};
+function e(e){return i=>{const l={mainSlider:e.mainSlider}.mainSlider,t=(e=null)=>{null===e&&i.slides.length>0&&(e=i.slides[0]),null!==e&&(i.slides.forEach((e=>{e.setAttribute("aria-current","false")})),e.setAttribute("aria-current","true"))};t(),i.slides.forEach(((e,i)=>{e.addEventListener("click",(()=>{l.moveToSlide(i),t(e)}))})),l.on("scrollEnd",(()=>{setTimeout((()=>{const e=l.activeSlideIdx,r=i.slides[e];t(r),i.moveToSlide(e)}),50)}))}}export{e as default};

package/docs/assets/demo.css

@@ -446,6 +446,21 @@ h3:before {
 .example-container-2-perfect-fit {
 	grid-template-columns: repeat(var(--slider-slides-count, 1), calc( ( var(--slider-container-width, 900px) / 3 ) - 2/3 * var(--slide-gap, 1rem)));
 }
+.example-container-1-dots {
+	scroll-snap-type: x mandatory;
+	grid-template-columns: repeat(var(--slider-slides-count, 1), var(--slider-container-width, 900px));
+}
+
+.example-container-1-dots .example-item {
+	aspect-ratio: 16/7;
+	width: 100%;
+}
+
+.example-container-1-fade-wrap {
+	position: relative;
+}
+
+
 .example-container-2-perfect-fit .example-item {
 	aspect-ratio: 1/1;
 	width: 100%;
@@ -557,6 +572,7 @@ h3:before {
 	align-items: center;
 	background: #fff;
 	padding-inline: .5rem;
+	z-index: 1;
 }
 
 .example-4-filters-previous {

package/docs/assets/demo.js

@@ -18,6 +18,7 @@ import ScrollIndicatorPlugin from '../dist/plugins/scroll-indicator/scroll-indic
 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';
+import FadePlugin from '../dist/plugins/fade/fade/index.esm.js';
 
 (function () {
 	const init = () => {
@@ -45,7 +46,17 @@ import ThumbnailsPlugin from '../dist/plugins/thumbnails/thumbnails/index.esm.js
 				SkipLinksPlugin(),
 			]
 		);
-		console.log( '1-drag-scrolling-not-clickable', example1DragScrollingNotClickable );
+
+		const example1DragScrollingScrollSnap = new OverflowSlider(
+			document.querySelector( '.example-container-1-drag-scrolling-scroll-snap' ),
+			{
+				emulateScrollSnap: true,
+			},
+			[
+				DragScrollingPlugin(),
+			]
+		);
+		console.log( '1-drag-scrolling-scroll-snap', example1DragScrollingScrollSnap );
 
 		const example1Arrows = new OverflowSlider(
 			document.querySelector( '.example-container-1-arrows' ),
@@ -71,7 +82,9 @@ import ThumbnailsPlugin from '../dist/plugins/thumbnails/thumbnails/index.esm.js
 
 		const example1Dots = new OverflowSlider(
 			document.querySelector( '.example-container-1-dots' ),
-			{},
+			{
+				emulateScrollSnap: true,
+			},
 			[
 				DragScrollingPlugin(),
 				SkipLinksPlugin(),
@@ -80,6 +93,20 @@ import ThumbnailsPlugin from '../dist/plugins/thumbnails/thumbnails/index.esm.js
 		);
 		console.log( '1-dots', example1Dots );
 
+		const example1Fade = new OverflowSlider(
+			document.querySelector( '.example-container-1-fade' ),
+			{
+				emulateScrollSnap: true,
+			},
+			[
+				DragScrollingPlugin(),
+				FadePlugin({
+					containerEnd: document.querySelector( '.example-container-1-fade__end' ),
+				}),
+			]
+		);
+		console.log( '1-fade', example1Fade );
+
 		const example2PerfectFit = new OverflowSlider(
 			document.querySelector( '.example-container-2-perfect-fit' ),
 			{},
@@ -112,7 +139,9 @@ import ThumbnailsPlugin from '../dist/plugins/thumbnails/thumbnails/index.esm.js
 
 		const example3ScrollSnappingMandatory = new OverflowSlider(
 			document.querySelector( '.example-container-3-scroll-snapping-mandatory' ),
-			{},
+			{
+				emulateScrollSnap: true,
+			},
 			[
 				DragScrollingPlugin(),
 				ScrollIndicatorPlugin(),
@@ -122,7 +151,9 @@ import ThumbnailsPlugin from '../dist/plugins/thumbnails/thumbnails/index.esm.js
 
 		const example3ScrollSnappingProximity = new OverflowSlider(
 			document.querySelector( '.example-container-3-scroll-snapping-proximity' ),
-			{},
+			{
+				emulateScrollSnap: true,
+			},
 			[
 				DragScrollingPlugin(),
 				ScrollIndicatorPlugin(),
@@ -155,7 +186,9 @@ import ThumbnailsPlugin from '../dist/plugins/thumbnails/thumbnails/index.esm.js
 
 		const example4GridOrSliders = new OverflowSlider(
 			document.querySelector( '.example-container-4-grid-or-slider' ),
-			{},
+			{
+				emulateScrollSnap: true,
+			},
 			[
 				DragScrollingPlugin(),
 				ScrollIndicatorPlugin(),
@@ -183,7 +216,9 @@ import ThumbnailsPlugin from '../dist/plugins/thumbnails/thumbnails/index.esm.js
 
 		const example4SyncedMain = new OverflowSlider(
 			document.querySelector( '.example-container-4-synced-main' ),
-			{},
+			{
+				emulateScrollSnap: true,
+			},
 			[
 				DragScrollingPlugin(),
 			]
@@ -192,7 +227,9 @@ import ThumbnailsPlugin from '../dist/plugins/thumbnails/thumbnails/index.esm.js
 
 		const example4SyncedThumbnails = new OverflowSlider(
 			document.querySelector( '.example-container-4-synced-thumbnails' ),
-			{},
+			{
+				emulateScrollSnap: true,
+			},
 			[
 				DragScrollingPlugin(),
 				ThumbnailsPlugin({

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

@@ -10,6 +10,8 @@ function OverflowSlider(container, options, plugins) {
             scrollBehavior: "smooth",
             scrollStrategy: "fullSlide",
             slidesSelector: ":scope > *",
+            emulateScrollSnap: false,
+            emulateScrollSnapMaxThreshold: 64,
         };
         const sliderOptions = Object.assign(Object.assign({}, defaults), options);
         // disable smooth scrolling if user prefers reduced motion

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

@@ -1 +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};
+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 l={scrollBehavior:"smooth",scrollStrategy:"fullSlide",slidesSelector:":scope > *",emulateScrollSnap:!1,emulateScrollSnapMaxThreshold:64},s=Object.assign(Object.assign({},l),r);return window.matchMedia("(prefers-reduced-motion: reduce)").matches&&(s.scrollBehavior="auto"),e(o,s,t)}catch(e){console.error(e)}}export{o as default};

package/docs/dist/core/slider.esm.js

@@ -69,7 +69,87 @@ function Slider(container, options, plugins) {
         const resizeObserver = new ResizeObserver(() => slider.emit('containerSizeChanged'));
         resizeObserver.observe(slider.container);
         // scroll event with debouncing
-        slider.container.addEventListener('scroll', () => slider.emit('scroll'));
+        let scrollTimeout;
+        let nativeScrollTimeout;
+        let programmaticScrollTimeout;
+        let scrollLeft = slider.container.scrollLeft;
+        let nativeScrollLeft = slider.container.scrollLeft;
+        let programmaticScrollLeft = slider.container.scrollLeft;
+        let isScrolling = false;
+        let isUserScrolling = false;
+        let isProgrammaticScrolling = false;
+        // any scroll
+        slider.container.addEventListener('scroll', () => {
+            const newScrollLeft = slider.container.scrollLeft;
+            if (scrollLeft !== newScrollLeft) {
+                if (!isScrolling) {
+                    isScrolling = true;
+                    slider.emit('scrollStart');
+                }
+                scrollLeft = newScrollLeft;
+                clearTimeout(scrollTimeout);
+                scrollTimeout = setTimeout(() => {
+                    isScrolling = false;
+                    slider.emit('scrollEnd');
+                }, 50);
+                slider.emit('scroll');
+            }
+            // keep up nativeScrolling to take into account scroll-snap
+            if (isUserScrolling) {
+                nativeScrollHandler();
+            }
+        });
+        // user initted scroll (touchmove, mouse wheel, etc.)
+        const nativeScrollHandler = () => {
+            const newScrollLeft = slider.container.scrollLeft;
+            if (nativeScrollLeft !== newScrollLeft && !isProgrammaticScrolling) {
+                if (!isUserScrolling) {
+                    slider.emit('nativeScrollStart');
+                    isUserScrolling = true;
+                }
+                slider.emit('nativeScroll');
+                nativeScrollLeft = newScrollLeft;
+                clearTimeout(nativeScrollTimeout);
+                nativeScrollTimeout = setTimeout(() => {
+                    isUserScrolling = false;
+                    slider.emit('nativeScrollEnd');
+                    // update programmaticScrollLeft to match nativeScrollLeft
+                    // this prevents programmaticScroll triggering with no real change to scrollLeft
+                    programmaticScrollLeft = nativeScrollLeft;
+                }, 50);
+            }
+        };
+        slider.container.addEventListener('touchmove', nativeScrollHandler);
+        slider.container.addEventListener('mousewheel', nativeScrollHandler);
+        slider.container.addEventListener('wheel', nativeScrollHandler);
+        // programmatic scroll (scrollTo, etc.)
+        slider.on('programmaticScrollStart', () => {
+            isProgrammaticScrolling = true;
+        });
+        slider.container.addEventListener('scroll', () => {
+            const newScrollLeft = slider.container.scrollLeft;
+            if (programmaticScrollLeft !== newScrollLeft && !isUserScrolling && isProgrammaticScrolling) {
+                programmaticScrollLeft = newScrollLeft;
+                clearTimeout(programmaticScrollTimeout);
+                programmaticScrollTimeout = setTimeout(() => {
+                    isProgrammaticScrolling = false;
+                    slider.emit('programmaticScrollEnd');
+                    // update nativeScrollLeft to match programmaticScrollLeft
+                    // this prevents nativeScroll triggering with no real change to scrollLeft
+                    nativeScrollLeft = programmaticScrollLeft;
+                }, 50);
+                slider.emit('programmaticScroll');
+            }
+        });
+        // Fix issues on scroll snapping not working on programmatic scroll (it's not smooth)
+        // by disabling scroll snap if scrolling is programmatic
+        slider.on('programmaticScrollStart', () => {
+            slider.container.style.scrollSnapType = 'none';
+        });
+        // restore scroll snap if user scroll starts
+        slider.on('nativeScrollStart', () => {
+            slider.container.style.scrollSnapType = '';
+        });
         // Listen for mouse down and touch start events on the document
         // This handles both mouse clicks and touch interactions
         let wasInteractedWith = false;
@@ -123,18 +203,14 @@ function Slider(container, options, plugins) {
         else if (slideStart === 0) {
             scrollTarget = 0;
         }
+        else {
+            scrollTarget = slideStart;
+        }
         if (scrollTarget !== null) {
-            slider.container.style.scrollSnapType = 'none';
-            // seems like in order for scroll behavior: smooth to work, we need to wait a bit to disable scrollSnapType
             setTimeout((scrollTarget) => {
+                slider.emit('programmaticScrollStart');
                 slider.container.scrollTo({ left: scrollTarget, behavior: behavior });
             }, 50, scrollTarget);
-            setTimeout(() => {
-                // leave snapping off to fix issues with slide moving back on focus
-                if (behavior == 'smooth') {
-                    slider.container.style.scrollSnapType = '';
-                }
-            }, 500);
         }
     }
     function setActiveSlideIdx() {
@@ -171,6 +247,14 @@ function Slider(container, options, plugins) {
         }
         return gapSize;
     }
+    function getLeftOffset() {
+        let offset = 0;
+        const fullWidthOffset = slider.container.getAttribute('data-full-width-offset');
+        if (fullWidthOffset) {
+            offset = parseInt(fullWidthOffset);
+        }
+        return offset;
+    }
     function moveToDirection(direction = "prev") {
         const scrollStrategy = slider.options.scrollStrategy;
         const scrollLeft = slider.container.scrollLeft;
@@ -231,10 +315,75 @@ function Slider(container, options, plugins) {
                 }
             }
         }
+        // add left offset
+        const offsettedTargetScrollPosition = targetScrollPosition - getLeftOffset();
+        if (offsettedTargetScrollPosition >= 0) {
+            targetScrollPosition = offsettedTargetScrollPosition;
+        }
+        slider.emit('programmaticScrollStart');
         slider.container.style.scrollBehavior = slider.options.scrollBehavior;
         slider.container.scrollLeft = targetScrollPosition;
         setTimeout(() => slider.container.style.scrollBehavior = '', 50);
     }
+    function snapToClosestSlide(direction = "prev") {
+        const isMovingForward = direction === 'next';
+        const slideReference = [];
+        for (let i = 0; i < slider.slides.length; i++) {
+            const slide = slider.slides[i];
+            const slideWidth = slide.offsetWidth;
+            const slideStart = slide.offsetLeft;
+            const slideEnd = slideStart + slideWidth;
+            const slideMiddle = slideStart + slideWidth / 2;
+            const trigger = Math.min(slideMiddle, slideStart + slider.options.emulateScrollSnapMaxThreshold);
+            slideReference.push({
+                start: slideStart,
+                middle: slideMiddle,
+                end: slideEnd,
+                width: slideWidth,
+                trigger: trigger,
+                slide: slide,
+            });
+        }
+        let snapTarget = null;
+        const scrollPosition = slider.container.scrollLeft;
+        if (isMovingForward) {
+            for (let i = 0; i < slideReference.length; i++) {
+                const item = slideReference[i];
+                if (i === 0 && scrollPosition <= item.trigger) {
+                    snapTarget = 0;
+                    break;
+                }
+                if (slider.container.scrollLeft <= item.trigger) {
+                    snapTarget = item.start;
+                    break;
+                }
+            }
+        }
+        else {
+            for (let i = slideReference.length - 1; i >= 0; i--) {
+                const item = slideReference[i];
+                if (i === slideReference.length - 1 && scrollPosition >= item.trigger) {
+                    snapTarget = item.start;
+                    break;
+                }
+                if (slider.container.scrollLeft >= item.trigger) {
+                    snapTarget = item.start;
+                    break;
+                }
+            }
+        }
+        if (snapTarget !== null) {
+            const offsettedSnapTarget = snapTarget - getLeftOffset();
+            if (offsettedSnapTarget >= 0) {
+                snapTarget = offsettedSnapTarget;
+            }
+            const scrollBehavior = slider.options.scrollBehavior || 'smooth';
+            slider.container.scrollTo({
+                left: snapTarget,
+                behavior: scrollBehavior
+            });
+        }
+    }
     function on(name, cb) {
         if (!subs[name]) {
             subs[name] = [];
@@ -257,6 +406,7 @@ function Slider(container, options, plugins) {
         emit,
         moveToDirection,
         moveToSlide,
+        snapToClosestSlide,
         on,
         options,
     };

package/docs/dist/core/slider.min.js

@@ -1 +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,t=null){const n=t||r.options.scrollBehavior,i=e.getBoundingClientRect(),o=r.container.getBoundingClientRect(),l=r.container.offsetWidth,s=r.container.scrollLeft,a=i.left-o.left+s,c=a+i.width;let d=null;a<s?d=a:c>s+l?d=c-l:0===a&&(d=0),null!==d&&(r.container.style.scrollSnapType="none",setTimeout((e=>{r.container.scrollTo({left:e,behavior:n})}),50,d),setTimeout((()=>{"smooth"==n&&(r.container.style.scrollSnapType="")}),500))}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+m()>t){i=o;break}}const o=r.activeSlideIdx;r.activeSlideIdx=i,o!==i&&r.emit("activeSlideChanged")}function m(){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-m()):Math.min(r.container.scrollWidth,l+m()),"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,"auto")}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};
+import t from"./details.min.js";import{generateId as e,objectsAreEqual as n}from"./utils.min.js";function o(o,i,l){let r,a={};function s(e=!1){const o=r.details,i=t(r);r.details=i,e||n(o,i)?e&&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(t,e=null){const n=e||r.options.scrollBehavior,o=t.getBoundingClientRect(),i=r.container.getBoundingClientRect(),l=r.container.offsetWidth,a=r.container.scrollLeft,s=o.left-i.left+a,c=s+o.width;let d=null;d=s<a?s:c>a+l?c-l:0===s?0:s,null!==d&&setTimeout((t=>{r.emit("programmaticScrollStart"),r.container.scrollTo({left:t,behavior:n})}),50,d)}function m(){const t=r.container.getBoundingClientRect(),e=r.container.scrollLeft,n=r.slides;let o=0;for(let i=0;i<n.length;i++){if(n[i].getBoundingClientRect().left-t.left+e+h()>e){o=i;break}}const i=r.activeSlideIdx;r.activeSlideIdx=o,i!==o&&r.emit("activeSlideChanged")}function h(){let t=0;if(r.slides.length>1){const e=r.slides[0].getBoundingClientRect();t=r.slides[1].getBoundingClientRect().left-e.right}return t}function g(){let t=0;const e=r.container.getAttribute("data-full-width-offset");return e&&(t=parseInt(e)),t}return r={emit:function(t){var e;a&&a[t]&&a[t].forEach((t=>{t(r)}));const n=null===(e=null==r?void 0:r.options)||void 0===e?void 0:e[t];"function"==typeof n&&n(r)},moveToDirection:function(t="prev"){const e=r.options.scrollStrategy,n=r.container.scrollLeft,o=r.container.getBoundingClientRect(),i=r.container.offsetWidth;let l=n;if("prev"===t?l=Math.max(0,n-r.container.offsetWidth):"next"===t&&(l=Math.min(r.container.scrollWidth,n+r.container.offsetWidth)),"fullSlide"===e){let e=null;if(e="prev"===t?Math.max(0,l-h()):Math.min(r.container.scrollWidth,l+h()),"next"===t){let t=!1;for(let i of r.slides){const r=i.getBoundingClientRect(),a=r.left-o.left+n,s=a+r.width;if(a<l&&s>l){e=a,t=!0;break}}t||(e=Math.min(l,r.container.scrollWidth-r.container.offsetWidth)),e&&e>n&&(l=e)}else{let t=!1;for(let l of r.slides){const r=l.getBoundingClientRect(),a=r.left-o.left+n,s=a+r.width;if(a<n&&s>n){e=s-i,t=!0;break}}t||(e=Math.max(0,n-i)),e&&e<n&&(l=e)}}const a=l-g();a>=0&&(l=a),r.emit("programmaticScrollStart"),r.container.style.scrollBehavior=r.options.scrollBehavior,r.container.scrollLeft=l,setTimeout((()=>r.container.style.scrollBehavior=""),50)},moveToSlide:function(t){const e=r.slides[t];e&&u(e)},snapToClosestSlide:function(t="prev"){const e="next"===t,n=[];for(let t=0;t<r.slides.length;t++){const e=r.slides[t],o=e.offsetWidth,i=e.offsetLeft,l=i+o,a=i+o/2,s=Math.min(a,i+r.options.emulateScrollSnapMaxThreshold);n.push({start:i,middle:a,end:l,width:o,trigger:s,slide:e})}let o=null;const i=r.container.scrollLeft;if(e)for(let t=0;t<n.length;t++){const e=n[t];if(0===t&&i<=e.trigger){o=0;break}if(r.container.scrollLeft<=e.trigger){o=e.start;break}}else for(let t=n.length-1;t>=0;t--){const e=n[t];if(t===n.length-1&&i>=e.trigger){o=e.start;break}if(r.container.scrollLeft>=e.trigger){o=e.start;break}}if(null!==o){const t=o-g();t>=0&&(o=t);const e=r.options.scrollBehavior||"smooth";r.container.scrollTo({left:o,behavior:e})}},on:function(t,e){a[t]||(a[t]=[]),a[t].push(e)},options:i},function(){r.container=o;let t=o.getAttribute("id");null===t&&(t=e("overflow-slider"),o.setAttribute("id",t)),c(),s(!0),m(),r.on("contentsChanged",(()=>{c(),s(),m()})),r.on("containerSizeChanged",(()=>s()));let n=0;if(r.on("scroll",(()=>{n&&window.cancelAnimationFrame(n),n=window.requestAnimationFrame((()=>{s(),m()}))})),function(){new MutationObserver((()=>r.emit("contentsChanged"))).observe(r.container,{childList:!0});let t,e,n;new ResizeObserver((()=>r.emit("containerSizeChanged"))).observe(r.container);let o=r.container.scrollLeft,i=r.container.scrollLeft,l=r.container.scrollLeft,a=!1,s=!1,c=!1;r.container.addEventListener("scroll",(()=>{const e=r.container.scrollLeft;o!==e&&(a||(a=!0,r.emit("scrollStart")),o=e,clearTimeout(t),t=setTimeout((()=>{a=!1,r.emit("scrollEnd")}),50),r.emit("scroll")),s&&d()}));const d=()=>{const t=r.container.scrollLeft;i===t||c||(s||(r.emit("nativeScrollStart"),s=!0),r.emit("nativeScroll"),i=t,clearTimeout(e),e=setTimeout((()=>{s=!1,r.emit("nativeScrollEnd"),l=i}),50))};r.container.addEventListener("touchmove",d),r.container.addEventListener("mousewheel",d),r.container.addEventListener("wheel",d),r.on("programmaticScrollStart",(()=>{c=!0})),r.container.addEventListener("scroll",(()=>{const t=r.container.scrollLeft;l!==t&&!s&&c&&(l=t,clearTimeout(n),n=setTimeout((()=>{c=!1,r.emit("programmaticScrollEnd"),i=l}),50),r.emit("programmaticScroll"))})),r.on("programmaticScrollStart",(()=>{r.container.style.scrollSnapType="none"})),r.on("nativeScrollStart",(()=>{r.container.style.scrollSnapType=""}));let f=!1;r.container.addEventListener("mousedown",(()=>{f=!0})),r.container.addEventListener("touchstart",(()=>{f=!0}),{passive:!0}),r.container.addEventListener("focusin",(t=>{if(!f){let e=t.target;for(;e.parentElement!==r.container&&e.parentElement;)e=e.parentElement;u(e,"auto")}f=!1}))}(),f(),d(),l)for(const t of l)t(r);r.on("detailsChanged",(()=>{f(),d()})),r.emit("created"),r.container.setAttribute("data-ready","true")}(),r}export{o as default};

package/docs/dist/overflow-slider.css

@@ -1 +1 @@
-.overflow-slider{-ms-overflow-style:none;display:grid;grid-auto-flow:column;grid-template-columns:max-content;max-width:-moz-max-content;max-width:max-content;overflow:auto;scrollbar-width:none;width:100%}.overflow-slider::-webkit-scrollbar{display:none}.overflow-slider>*{outline-offset:-2px;scroll-snap-align:start}:root{--overflow-slider-arrows-size:1.5rem;--overflow-slider-arrows-gap:.5rem;--overflow-slider-arrows-inactive-opacity:0.5}.overflow-slider__arrows{display:flex;gap:var(--overflow-slider-arrows-gap)}.overflow-slider__arrows-button{align-items:center;cursor:pointer;display:flex;outline-offset:-2px}.overflow-slider__arrows-button svg{height:var(--overflow-slider-arrows-size);width:var(--overflow-slider-arrows-size)}.overflow-slider__arrows-button[data-has-content=false]{opacity:var(--overflow-slider-arrows-inactive-opacity)}:root{--overflow-slider-dots-gap:0.5rem;--overflow-slider-dot-size:0.75rem;--overflow-slider-dot-inactive-color:rgba(0,0,0,.1);--overflow-slider-dot-active-color:rgba(0,0,0,.8)}.overflow-slider__dots{align-items:center;display:flex;justify-content:center}.overflow-slider__dots ul{display:flex;flex-wrap:wrap;gap:var(--overflow-slider-dots-gap);list-style:none;margin:0;padding:0}.overflow-slider__dots li{line-height:0;margin:0;padding:0}.overflow-slider__dot-item{background:var(--overflow-slider-dot-inactive-color);border-radius:50%;cursor:pointer;height:var(--overflow-slider-dot-size);margin:0;outline-offset:2px;padding:0;position:relative;width:var(--overflow-slider-dot-size)}.overflow-slider__dot-item:after{bottom:calc(var(--overflow-slider-dots-gap)*-1);content:"";display:block;left:calc(var(--overflow-slider-dots-gap)*-1);position:absolute;right:calc(var(--overflow-slider-dots-gap)*-1);top:calc(var(--overflow-slider-dots-gap)*-1)}.overflow-slider__dot-item:focus,.overflow-slider__dot-item:hover,.overflow-slider__dot-item[aria-pressed=true]{background:var(--overflow-slider-dot-active-color)}[data-has-drag-scrolling][data-has-overflow=true]{cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none}:root{--overflow-slider-scroll-indicator-button-height:4px;--overflow-slider-scroll-indicator-padding:1rem;--overflow-slider-scroll-indicator-button-color:rgba(0,0,0,.75);--overflow-slider-scroll-indicator-bar-color:rgba(0,0,0,.25)}.overflow-slider__scroll-indicator{cursor:pointer;outline:0;padding-block:var(--overflow-slider-scroll-indicator-padding);position:relative;width:100%}.overflow-slider__scroll-indicator[data-has-overflow=false]{display:none}.overflow-slider__scroll-indicator:focus-visible .overflow-slider__scroll-indicator-button{outline:2px solid;outline-offset:2px}.overflow-slider__scroll-indicator-bar{background:var(--overflow-slider-scroll-indicator-bar-color);border-radius:3px;height:2px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:100%}.overflow-slider__scroll-indicator-button{background:var(--overflow-slider-scroll-indicator-button-color);border-radius:3px;cursor:grab;height:var(--overflow-slider-scroll-indicator-button-height);left:0;position:absolute;top:calc(50% - var(--overflow-slider-scroll-indicator-button-height)/2)}.overflow-slider__scroll-indicator-button:hover,.overflow-slider__scroll-indicator-button[data-is-grabbed=true]{--overflow-slider-scroll-indicator-button-height:6px}.overflow-slider__scroll-indicator-button:after{bottom:calc(var(--overflow-slider-scroll-indicator-padding)*-1);content:"";display:block;position:absolute;top:calc(var(--overflow-slider-scroll-indicator-padding)*-1);width:100%}
+.overflow-slider{-ms-overflow-style:none;display:grid;grid-auto-flow:column;grid-template-columns:max-content;max-width:-moz-max-content;max-width:max-content;overflow:auto;position:relative;scrollbar-width:none;width:100%}.overflow-slider::-webkit-scrollbar{display:none}.overflow-slider>*{outline-offset:-2px;scroll-snap-align:start}:root{--overflow-slider-arrows-size:1.5rem;--overflow-slider-arrows-gap:.5rem;--overflow-slider-arrows-inactive-opacity:0.5}.overflow-slider__arrows{display:flex;gap:var(--overflow-slider-arrows-gap)}.overflow-slider__arrows-button{align-items:center;cursor:pointer;display:flex;outline-offset:-2px}.overflow-slider__arrows-button svg{height:var(--overflow-slider-arrows-size);width:var(--overflow-slider-arrows-size)}.overflow-slider__arrows-button[data-has-content=false]{opacity:var(--overflow-slider-arrows-inactive-opacity)}:root{--overflow-slider-dots-gap:0.5rem;--overflow-slider-dot-size:0.75rem;--overflow-slider-dot-inactive-color:rgba(0,0,0,.1);--overflow-slider-dot-active-color:rgba(0,0,0,.8)}.overflow-slider__dots{align-items:center;display:flex;justify-content:center}.overflow-slider__dots ul{display:flex;flex-wrap:wrap;gap:var(--overflow-slider-dots-gap);list-style:none;margin:0;padding:0}.overflow-slider__dots li{line-height:0;margin:0;padding:0}.overflow-slider__dot-item{background:var(--overflow-slider-dot-inactive-color);border-radius:50%;cursor:pointer;height:var(--overflow-slider-dot-size);margin:0;outline-offset:2px;padding:0;position:relative;width:var(--overflow-slider-dot-size)}.overflow-slider__dot-item:after{bottom:calc(var(--overflow-slider-dots-gap)*-1);content:"";display:block;left:calc(var(--overflow-slider-dots-gap)*-1);position:absolute;right:calc(var(--overflow-slider-dots-gap)*-1);top:calc(var(--overflow-slider-dots-gap)*-1)}.overflow-slider__dot-item:focus,.overflow-slider__dot-item:hover,.overflow-slider__dot-item[aria-pressed=true]{background:var(--overflow-slider-dot-active-color)}:root{--overflow-slider-fade-color:#fff;--overflow-slider-fade-width:3rem}.overflow-slider-fade{height:100%;pointer-events:none;position:absolute;top:0;width:var(--overflow-slider-fade-width);z-index:1}.overflow-slider-fade--start{background:linear-gradient(to right,var(--overflow-slider-fade-color) 0,transparent 100%);left:0}.overflow-slider-fade--end{background:linear-gradient(to left,var(--overflow-slider-fade-color) 0,transparent 100%);right:0}[data-has-drag-scrolling][data-has-overflow=true]{cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none}:root{--overflow-slider-scroll-indicator-button-height:4px;--overflow-slider-scroll-indicator-padding:1rem;--overflow-slider-scroll-indicator-button-color:rgba(0,0,0,.75);--overflow-slider-scroll-indicator-bar-color:rgba(0,0,0,.25)}.overflow-slider__scroll-indicator{cursor:pointer;outline:0;padding-block:var(--overflow-slider-scroll-indicator-padding);position:relative;width:100%}.overflow-slider__scroll-indicator[data-has-overflow=false]{display:none}.overflow-slider__scroll-indicator:focus-visible .overflow-slider__scroll-indicator-button{outline:2px solid;outline-offset:2px}.overflow-slider__scroll-indicator-bar{background:var(--overflow-slider-scroll-indicator-bar-color);border-radius:3px;height:2px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:100%}.overflow-slider__scroll-indicator-button{background:var(--overflow-slider-scroll-indicator-button-color);border-radius:3px;cursor:grab;height:var(--overflow-slider-scroll-indicator-button-height);left:0;position:absolute;top:calc(50% - var(--overflow-slider-scroll-indicator-button-height)/2)}.overflow-slider__scroll-indicator-button:hover,.overflow-slider__scroll-indicator-button[data-is-grabbed=true]{--overflow-slider-scroll-indicator-button-height:6px}.overflow-slider__scroll-indicator-button:after{bottom:calc(var(--overflow-slider-scroll-indicator-padding)*-1);content:"";display:block;position:absolute;top:calc(var(--overflow-slider-scroll-indicator-padding)*-1);width:100%}

package/docs/dist/plugins/dots/dots/index.esm.js

@@ -20,8 +20,8 @@ function DotsPlugin(args) {
             dots.setAttribute('data-has-content', slider.details.hasOverflow.toString());
             dots.innerHTML = '';
             const dotsList = document.createElement('ul');
-            const pages = slider.details.amountOfPages;
-            const currentPage = slider.details.currentPage;
+            const pages = slider.details.slideCount;
+            const currentItem = slider.activeSlideIdx;
             if (pages <= 1) {
                 return;
             }
@@ -31,23 +31,23 @@ function DotsPlugin(args) {
                 dot.setAttribute('type', 'button');
                 dot.setAttribute('class', options.classNames.dotsItem);
                 dot.setAttribute('aria-label', options.texts.dotDescription.replace('%d', (i + 1).toString()).replace('%d', pages.toString()));
-                dot.setAttribute('aria-pressed', (i === currentPage).toString());
-                dot.setAttribute('data-page', (i + 1).toString());
+                dot.setAttribute('aria-pressed', (i === currentItem).toString());
+                dot.setAttribute('data-item', (i + 1).toString());
                 dotListItem.appendChild(dot);
                 dotsList.appendChild(dotListItem);
                 dot.addEventListener('click', () => activateDot(i + 1));
                 dot.addEventListener('focus', () => pageFocused = i + 1);
                 dot.addEventListener('keydown', (e) => {
                     var _a;
-                    const currentPageItem = dots.querySelector(`[aria-pressed="true"]`);
-                    if (!currentPageItem) {
+                    const currentItemItem = dots.querySelector(`[aria-pressed="true"]`);
+                    if (!currentItemItem) {
                         return;
                     }
-                    const currentPage = parseInt((_a = currentPageItem.getAttribute('data-page')) !== null && _a !== void 0 ? _a : '1');
+                    const currentItem = parseInt((_a = currentItemItem.getAttribute('data-item')) !== null && _a !== void 0 ? _a : '1');
                     if (e.key === 'ArrowLeft') {
-                        const previousPage = currentPage - 1;
+                        const previousPage = currentItem - 1;
                         if (previousPage > 0) {
-                            const matchingDot = dots.querySelector(`[data-page="${previousPage}"]`);
+                            const matchingDot = dots.querySelector(`[data-item="${previousPage}"]`);
                             if (matchingDot) {
                                 matchingDot.focus();
                             }
@@ -55,9 +55,9 @@ function DotsPlugin(args) {
                         }
                     }
                     if (e.key === 'ArrowRight') {
-                        const nextPage = currentPage + 1;
+                        const nextPage = currentItem + 1;
                         if (nextPage <= pages) {
-                            const matchingDot = dots.querySelector(`[data-page="${nextPage}"]`);
+                            const matchingDot = dots.querySelector(`[data-item="${nextPage}"]`);
                             if (matchingDot) {
                                 matchingDot.focus();
                             }
@@ -69,19 +69,18 @@ function DotsPlugin(args) {
             dots.appendChild(dotsList);
             // return focus to same page after rebuild
             if (pageFocused) {
-                const matchingDot = dots.querySelector(`[data-page="${pageFocused}"]`);
+                const matchingDot = dots.querySelector(`[data-item="${pageFocused}"]`);
                 if (matchingDot) {
                     matchingDot.focus();
                 }
             }
         };
-        const activateDot = (page) => {
-            const scrollTargetPosition = slider.details.containerWidth * (page - 1);
-            slider.container.style.scrollBehavior = slider.options.scrollBehavior;
-            slider.container.style.scrollSnapType = 'none';
-            slider.container.scrollLeft = scrollTargetPosition;
-            slider.container.style.scrollBehavior = '';
-            slider.container.style.scrollSnapType = '';
+        const activateDot = (item) => {
+            // const scrollTargetPosition = slider.details.containerWidth * ( page - 1 );
+            // slider.container.style.scrollBehavior = slider.options.scrollBehavior;
+            // slider.container.scrollLeft = scrollTargetPosition;
+            // slider.container.style.scrollBehavior = '';
+            slider.moveToSlide(item - 1);
         };
         buildDots();
         if (options.container) {
@@ -90,9 +89,9 @@ function DotsPlugin(args) {
         else {
             (_b = slider.container.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(dots, slider.container.nextSibling);
         }
-        slider.on('detailsChanged', () => {
-            buildDots();
-        });
+        slider.on('scrollEnd', buildDots);
+        slider.on('contentsChanged', buildDots);
+        slider.on('containerSizeChanged', buildDots);
     };
 }
 

package/docs/dist/plugins/dots/dots/index.min.js

@@ -1 +1 @@
-const t={dotDescription:"Page %d of %d"},e={dotsContainer:"overflow-slider__dots",dotsItem:"overflow-slider__dot-item"};function n(n){return o=>{var a,s;const r={texts:Object.assign(Object.assign({},t),(null==n?void 0:n.texts)||[]),classNames:Object.assign(Object.assign({},e),(null==n?void 0:n.classNames)||[]),container:null!==(a=null==n?void 0:n.container)&&void 0!==a?a:null},i=document.createElement("div");i.classList.add(r.classNames.dotsContainer);let l=null;const c=()=>{i.setAttribute("data-has-content",o.details.hasOverflow.toString()),i.innerHTML="";const t=document.createElement("ul"),e=o.details.amountOfPages,n=o.details.currentPage;if(!(e<=1)){for(let o=0;o<e;o++){const a=document.createElement("li"),s=document.createElement("button");s.setAttribute("type","button"),s.setAttribute("class",r.classNames.dotsItem),s.setAttribute("aria-label",r.texts.dotDescription.replace("%d",(o+1).toString()).replace("%d",e.toString())),s.setAttribute("aria-pressed",(o===n).toString()),s.setAttribute("data-page",(o+1).toString()),a.appendChild(s),t.appendChild(a),s.addEventListener("click",(()=>d(o+1))),s.addEventListener("focus",(()=>l=o+1)),s.addEventListener("keydown",(t=>{var n;const o=i.querySelector('[aria-pressed="true"]');if(!o)return;const a=parseInt(null!==(n=o.getAttribute("data-page"))&&void 0!==n?n:"1");if("ArrowLeft"===t.key){const t=a-1;if(t>0){const e=i.querySelector(`[data-page="${t}"]`);e&&e.focus(),d(t)}}if("ArrowRight"===t.key){const t=a+1;if(t<=e){const e=i.querySelector(`[data-page="${t}"]`);e&&e.focus(),d(t)}}}))}if(i.appendChild(t),l){const t=i.querySelector(`[data-page="${l}"]`);t&&t.focus()}}},d=t=>{const e=o.details.containerWidth*(t-1);o.container.style.scrollBehavior=o.options.scrollBehavior,o.container.style.scrollSnapType="none",o.container.scrollLeft=e,o.container.style.scrollBehavior="",o.container.style.scrollSnapType=""};c(),r.container?r.container.appendChild(i):null===(s=o.container.parentNode)||void 0===s||s.insertBefore(i,o.container.nextSibling),o.on("detailsChanged",(()=>{c()}))}}export{n as default};
+const t={dotDescription:"Page %d of %d"},e={dotsContainer:"overflow-slider__dots",dotsItem:"overflow-slider__dot-item"};function n(n){return o=>{var i,s;const a={texts:Object.assign(Object.assign({},t),(null==n?void 0:n.texts)||[]),classNames:Object.assign(Object.assign({},e),(null==n?void 0:n.classNames)||[]),container:null!==(i=null==n?void 0:n.container)&&void 0!==i?i:null},r=document.createElement("div");r.classList.add(a.classNames.dotsContainer);let d=null;const l=()=>{r.setAttribute("data-has-content",o.details.hasOverflow.toString()),r.innerHTML="";const t=document.createElement("ul"),e=o.details.slideCount,n=o.activeSlideIdx;if(!(e<=1)){for(let o=0;o<e;o++){const i=document.createElement("li"),s=document.createElement("button");s.setAttribute("type","button"),s.setAttribute("class",a.classNames.dotsItem),s.setAttribute("aria-label",a.texts.dotDescription.replace("%d",(o+1).toString()).replace("%d",e.toString())),s.setAttribute("aria-pressed",(o===n).toString()),s.setAttribute("data-item",(o+1).toString()),i.appendChild(s),t.appendChild(i),s.addEventListener("click",(()=>c(o+1))),s.addEventListener("focus",(()=>d=o+1)),s.addEventListener("keydown",(t=>{var n;const o=r.querySelector('[aria-pressed="true"]');if(!o)return;const i=parseInt(null!==(n=o.getAttribute("data-item"))&&void 0!==n?n:"1");if("ArrowLeft"===t.key){const t=i-1;if(t>0){const e=r.querySelector(`[data-item="${t}"]`);e&&e.focus(),c(t)}}if("ArrowRight"===t.key){const t=i+1;if(t<=e){const e=r.querySelector(`[data-item="${t}"]`);e&&e.focus(),c(t)}}}))}if(r.appendChild(t),d){const t=r.querySelector(`[data-item="${d}"]`);t&&t.focus()}}},c=t=>{o.moveToSlide(t-1)};l(),a.container?a.container.appendChild(r):null===(s=o.container.parentNode)||void 0===s||s.insertBefore(r,o.container.nextSibling),o.on("scrollEnd",l),o.on("contentsChanged",l),o.on("containerSizeChanged",l)}}export{n as default};

package/docs/dist/plugins/drag-scrolling/drag-scrolling/index.esm.js

@@ -8,9 +8,13 @@ function DragScrollingPlugin(args) {
         let isMouseDown = false;
         let startX = 0;
         let scrollLeft = 0;
+        let isMovingForward = false;
+        let programmaticScrollStarted = false;
+        let mayNeedToSnap = false;
         // add data attribute to container
         slider.container.setAttribute('data-has-drag-scrolling', 'true');
         const mouseDown = (e) => {
+            programmaticScrollStarted = false;
             if (!slider.details.hasOverflow) {
                 return;
             }
@@ -22,7 +26,6 @@ function DragScrollingPlugin(args) {
             scrollLeft = slider.container.scrollLeft;
             // change cursor to grabbing
             slider.container.style.cursor = 'grabbing';
-            slider.container.style.scrollSnapType = 'none';
             slider.container.style.scrollBehavior = 'auto';
             // prevent focus going to the slides
             e.preventDefault();
@@ -30,15 +33,26 @@ function DragScrollingPlugin(args) {
         };
         const mouseMove = (e) => {
             if (!slider.details.hasOverflow) {
+                programmaticScrollStarted = false;
                 return;
             }
             if (!isMouseDown) {
+                programmaticScrollStarted = false;
                 return;
             }
             e.preventDefault();
+            if (!programmaticScrollStarted) {
+                programmaticScrollStarted = true;
+                slider.emit('programmaticScrollStart');
+            }
             const x = e.pageX - slider.container.offsetLeft;
             const walk = (x - startX);
-            slider.container.scrollLeft = scrollLeft - walk;
+            const newScrollLeft = scrollLeft - walk;
+            mayNeedToSnap = true;
+            if (slider.container.scrollLeft !== newScrollLeft) {
+                isMovingForward = slider.container.scrollLeft < newScrollLeft;
+            }
+            slider.container.scrollLeft = newScrollLeft;
             const absWalk = Math.abs(walk);
             const slides = slider.container.querySelectorAll(slider.options.slidesSelector);
             const pointerEvents = absWalk > options.draggedDistanceThatPreventsClick ? 'none' : '';
@@ -48,12 +62,13 @@ function DragScrollingPlugin(args) {
         };
         const mouseUp = () => {
             if (!slider.details.hasOverflow) {
+                programmaticScrollStarted = false;
                 return;
             }
             isMouseDown = false;
             slider.container.style.cursor = '';
             setTimeout(() => {
-                slider.container.style.scrollSnapType = '';
+                programmaticScrollStarted = false;
                 slider.container.style.scrollBehavior = '';
                 const slides = slider.container.querySelectorAll(slider.options.slidesSelector);
                 slides.forEach((slide) => {
@@ -64,6 +79,18 @@ function DragScrollingPlugin(args) {
         window.addEventListener('mousedown', mouseDown);
         window.addEventListener('mousemove', mouseMove);
         window.addEventListener('mouseup', mouseUp);
+        // emulate scroll snapping
+        if (slider.options.emulateScrollSnap) {
+            const snap = () => {
+                if (!mayNeedToSnap || isMouseDown) {
+                    return;
+                }
+                mayNeedToSnap = false;
+                slider.snapToClosestSlide(isMovingForward ? 'next' : 'prev');
+            };
+            slider.on('programmaticScrollEnd', snap);
+            window.addEventListener('mouseup', snap);
+        }
     };
 }