@evermade/overflow-slider 3.1.0 → 3.2.1

package/README.md

@@ -9,8 +9,9 @@ Overflow Slider aims to be lightweight, mobile-first and accessible. It is desig
 ## Demos
 
 * [Example and demos](https://evermade.github.io/overflow-slider/)
+* [RTL demos](https://evermade.github.io/overflow-slider/index-rtl.html)
 
-### Usage
+## Getting started
 
 Markup:
 
@@ -32,7 +33,7 @@ npm install @evermade/overflow-slider
 
 Import the `OverflowSlider` along with plugins you want to use.
 
-```js
+```ts
 import { OverflowSlider } from '@evermade/overflow-slider';
 import DragScrollingPlugin from '@evermade/overflow-slider/plugins/drag-scrolling';
 import SkipLinksPlugin from '@evermade/overflow-slider/plugins/skip-links';
@@ -65,7 +66,7 @@ const slider = new OverflowSlider(
 const slider = new OverflowSlider(
 	document.querySelector( '.slider-container-here' ),
 	{
-		// options here
+		emulateScrollSnap: true,
 	},
 	[
 		ArrowsPlugin({
@@ -101,6 +102,328 @@ 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.
 
+## Slides per view
+
+You control slides per view in CSS. Set gap between slides via `gap` to slider. Slide layout/size is controlled by `width` property. You can use others but `width` is the most stable.
+
+### A) Fixed width
+
+Set fixed width for slides: `width: 200px;`. Note you can freely change this with media queries.
+
+### B) Relative width
+
+Set relative width for slides: `width: 100vw;`. Note that you cannot use percentages because they are relative to the container and not the viewport.
+
+### C) Variable based width
+
+This is most practical approach if you want to make sure exactly 3 slides are visible at all times or so. Or you want to display like 1.5 slides in mobile per view.
+
+This is based on getting the container width and dividing it by the number of slides you want to show and subtracting the gap. It's recommended to add SCSS mixin for this in case you are using SCSS.
+
+Mixin:
+
+```scss
+@mixin slideWidth($slidesPerView: 3, $gap: var(--slide-gap, 1rem), $containerWidth: var(--slider-container-width, 90vw)) {
+	width: calc( ( #{$containerWidth} / #{$slidesPerView} ) - calc( #{$slidesPerView} - 1 ) / #{$slidesPerView} * #{$gap});
+}
+```
+
+Usage:
+
+```scss
+.overflow-slider {
+	--gap: 1.5rem;
+	gap: var(--gap);
+	> * {
+		--slides-per-view: 3;
+		@include slideWidth(
+			var(--slides-per-view),
+			var(--gap),
+			var(--slider-container-width)
+		);
+	}
+}
+```
+
+Note that if you are using FullWidthPlugin, you should use container width from `--slider-container-target-width` instead of `--slider-container-width`.
+
+## Plugins
+
+### DragScrollingPlugin
+
+This plugin allows you to scroll the slider by dragging with a mouse. This works with items that have links or are links themselves.
+
+```ts
+import DragScrollingPlugin from '@evermade/overflow-slider/plugins/drag-scrolling';
+
+const slider = new OverflowSlider(
+	document.querySelector( '.slider-container-here' ),
+	{},
+	[
+		DragScrollingPlugin(), // add options here or don't
+	]
+);
+```
+
+All options are optional.
+
+```ts
+type DragScrollingOptions = {
+	draggedDistanceThatPreventsClick: number, // default 10, how much user can drag before it's considered a drag and not a click in case of links
+};
+```
+
+### ArrowsPlugin
+
+This plugin adds previous and next arrows to the slider. You can customize the text, icons and class names.
+
+```ts
+import ArrowsPlugin from '@evermade/overflow-slider/plugins/arrows';
+
+const slider = new OverflowSlider(
+	document.querySelector( '.slider-container-here' ),
+	{},
+	[
+		ArrowsPlugin(), // add options here or don't
+	]
+);
+```
+
+All options are optional.
+
+```ts
+type ArrowsOptions = {
+	texts: {
+		buttonPrevious: string;
+		buttonNext: string;
+	},
+	icons: {
+		prev: string; // SVG or other HTML
+		next: string; // SVG or other HTML
+	},
+	classNames: {
+		navContainer: string;
+		prevButton: string;
+		nextButton: string;
+	},
+	container: HTMLElement | null, // container for both arrows
+	containerPrev: HTMLElement | null, // container for previous arrow
+	containerNext: HTMLElement | null, // container for next arrow
+};
+```
+
+### ScrollIndicatorPlugin
+
+This plugin adds a scroll indicator to the slider. The indicator is a bar that shows how much of the slider is scrolled. Scroll indicator is like a custom scrollbar that is always visible.
+
+```ts
+import ScrollIndicatorPlugin from '@evermade/overflow-slider/plugins/scroll-indicator';
+
+const slider = new OverflowSlider(
+	document.querySelector( '.slider-container-here' ),
+	{},
+	[
+		ScrollIndicatorPlugin(), // add options here or don't
+	]
+);
+```
+
+All options are optional.
+
+```ts
+type ScrollIndicatorOptions = {
+	classNames: {
+		scrollIndicator: string;
+		scrollIndicatorBar: string;
+		scrollIndicatorButton: string;
+	},
+	container: HTMLElement | null, // container for the scroll indicator
+};
+```
+
+### DotsPlugin
+
+This plugin adds dots to the slider. Dots are like pagination that shows how many slides there are and which one is active. For usability, scroll indicator is preferable.
+
+```ts
+import DotsPlugin from '@evermade/overflow-slider/plugins/dots';
+
+const slider = new OverflowSlider(
+	document.querySelector( '.slider-container-here' ),
+	{},
+	[
+		DotsPlugin(), // add options here or don't
+	]
+);
+```
+
+All options are optional.
+
+```ts
+type DotsOptions = {
+	texts: {
+		dotDescription: string;
+	},
+	classNames: {
+		dotsContainer: string;
+		dotsItem: string;
+	},
+	container: HTMLElement | null,
+};
+```
+
+### SkipLinksPlugin
+
+This plugin adds skip links to the slider for keyboard users. Skip links are links that allow users to skip the whole slider and land after it. This is useful for accessibility.
+
+```ts
+import SkipLinksPlugin from '@evermade/overflow-slider/plugins/skip-links';
+
+const slider = new OverflowSlider(
+	document.querySelector( '.slider-container-here' ),
+	{},
+	[
+		SkipLinksPlugin(), // add options here or don't
+	]
+);
+```
+
+All options are optional.
+
+```ts
+type SkipLinkOptions = {
+	texts: {
+		skipList: string;
+	},
+	classNames: {
+		skipLink: string;
+		skipLinkTarget: string;
+	},
+	containerBefore: HTMLElement | null,
+	containerAfter: HTMLElement | null,
+};
+```
+
+### FullWidthPlugin
+
+This plugin allows you to make the slider full width but have the start of the sliders aligned to your content width. They are scrollable to the full width but the slides are aligned to the content width for the start and end.
+
+```ts
+import FullWidthPlugin from '@evermade/overflow-slider/plugins/full-width';
+
+const slider = new OverflowSlider(
+	document.querySelector( '.slider-container-here' ),
+	{},
+	[
+		FullWidthPlugin(), // add options here or don't
+	]
+);
+```
+
+All options are optional.
+
+```ts
+type FullWidthOptions = {
+	targetWidth: ( slider: Slider ) => number,
+	addMarginBefore: boolean,
+	addMarginAfter: boolean,
+};
+```
+
+Example of `targetWidth` function:
+
+```ts
+const sliderElement = document.querySelector( '.slider-container-here' );
+const sliderWrapper = document.querySelector( '.slider-wrapper' );
+if ( !sliderElement || !sliderWrapper ) {
+	throw new Error( 'Slider element or wrapper not found' );
+}
+const slider = new OverflowSlider(
+	sliderElement,
+	{},
+	[
+		FullWidthPlugin({
+			targetWidth: ( slider ) => {
+				return sliderWrapper.offsetWidth;
+			},
+		}),
+	]
+);
+```
+
+### FadePlugin
+
+This plugin adds a hint that there are more slides to scroll to. It fades the slides at the start and end of the slider to hint that there are more slides to scroll to.
+
+```ts
+import FadePlugin from '@evermade/overflow-slider/plugins/fade';
+
+const slider = new OverflowSlider(
+	document.querySelector( '.slider-container-here' ),
+	{},
+	[
+		FadePlugin(), // add options here or don't
+	]
+);
+```
+
+All options are optional.
+
+```ts
+type FadeOptions = {
+	classNames: {
+		fadeItem: string;
+		fadeItemStart: string;
+		fadeItemEnd: string;
+	},
+	container: HTMLElement | null,
+	containerStart: HTMLElement | null,
+	containerEnd: HTMLElement | null,
+};
+```
+
+### ThumbnailsPlugin
+
+This plugin adds synchronized thumbnails to the slider. Thumbnails are like dots but they are images of the slides. They are synchronized with the main slider.
+
+```ts
+import ThumbnailsPlugin from '@evermade/overflow-slider/plugins/thumbnails';
+
+const slider = new OverflowSlider(
+	document.querySelector( '.slider-container-here' ),
+	{},
+	[
+		ThumbnailsPlugin(), // add options here or don't
+	]
+);
+```
+
+You need to set mainSlider reference.
+
+```ts
+type ThumbnailsOptions = {
+	mainSlider: Slider,
+}
+```
+
+Example:
+
+```ts
+const mainSlider = new OverflowSlider(
+	document.querySelector( '.slider-container-here' ),
+);
+
+const thumbnailsSlider = new OverflowSlider(
+	document.querySelector( '.thumbnails-container-here' ),
+	{},
+	[
+		ThumbnailsPlugin({
+			mainSlider: mainSlider,
+		}),
+	]
+);
+```
+
 ## Known issues
 
 ### CSS grids and Overflow Slider
@@ -109,7 +432,7 @@ You can use use Overflow Slider within CSS grid but if you are using `fr` units
 
 ### CSS scroll-snap can be buggy
 
-If you are using `scroll-snap-type` CSS property, you might encounter some bugs like browser wants to snap to a slide regardless of margins.
+If you are using `scroll-snap-type` CSS property, you might encounter some bugs like browser wants to snap to a slide regardless of margins. It's most reliable when there's only one slide per view.
 
 ## Limitations
 
@@ -117,10 +440,6 @@ If you are using `scroll-snap-type` CSS property, you might encounter some bugs
 
 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.
@@ -137,6 +456,18 @@ Auto-play is not supported at the moment but can probably be implemented as a pl
 
 ## Changelog
 
+### 3.2.1
+
+* Add: Documentation on plugins
+* Fix: Make types more strict and remove all "any" types
+
+### 3.2.0
+
+* Add: RTL support
+* Add: `--slider-container-target-width` for FullWidthPlugin to allow CSS based on target size
+* Add: Documentation how to set slides per view in CSS
+* Fix: Attach ThumbnailsPlugin to scrollEnd which skips in-between slides when multiple slides are scrolled at once
+
 ### 3.1.0
 
 * Add: slider.getInclusiveScrollWidth and slider.getInclusiveScrollHeight methods to get widths including outermost childs outermost margins

package/dist/core/details.esm.js

@@ -14,10 +14,10 @@ function details(slider) {
     containerWidth = slider.container.offsetWidth;
     scrollableAreaWidth = slider.getInclusiveScrollWidth();
     amountOfPages = Math.ceil(scrollableAreaWidth / containerWidth);
-    if (Math.floor(slider.container.scrollLeft) >= 0) {
-        currentPage = Math.floor(slider.container.scrollLeft / containerWidth);
+    if (Math.floor(slider.getScrollLeft()) >= 0) {
+        currentPage = Math.floor(slider.getScrollLeft() / containerWidth);
         // consider as last page if the scrollLeft + containerWidth is equal to scrollWidth
-        if (Math.floor(slider.container.scrollLeft + containerWidth) === Math.floor(scrollableAreaWidth)) {
+        if (Math.floor(slider.getScrollLeft() + containerWidth) === Math.floor(scrollableAreaWidth)) {
             currentPage = amountOfPages - 1;
         }
     }

package/dist/core/details.min.js

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

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

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

package/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 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};
+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,rtl:!1},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/dist/core/slider.esm.js

@@ -78,7 +78,7 @@ function Slider(container, options, plugins) {
         let isScrolling = false;
         let isUserScrolling = false;
         let isProgrammaticScrolling = false;
-        // any scroll
+        // all types of scroll
         slider.container.addEventListener('scroll', () => {
             const newScrollLeft = slider.container.scrollLeft;
             if (Math.floor(scrollLeft) !== Math.floor(newScrollLeft)) {
@@ -184,6 +184,9 @@ function Slider(container, options, plugins) {
     }
     function setDataAttributes() {
         slider.container.setAttribute('data-has-overflow', slider.details.hasOverflow ? 'true' : 'false');
+        if (slider.options.rtl) {
+            slider.container.setAttribute('dir', 'rtl');
+        }
     }
     function ensureSlideIsInView(slide, scrollBehavior = null) {
         const behavior = scrollBehavior || slider.options.scrollBehavior;
@@ -215,19 +218,48 @@ function Slider(container, options, plugins) {
     }
     function setActiveSlideIdx() {
         const sliderRect = slider.container.getBoundingClientRect();
-        const scrollLeft = slider.container.scrollLeft;
+        const scrollLeft = slider.getScrollLeft();
         const slides = slider.slides;
         let activeSlideIdx = 0;
         let scrolledPastLastSlide = false;
-        for (let i = 0; i < slides.length; i++) {
-            const slideRect = slides[i].getBoundingClientRect();
-            const slideStart = slideRect.left - sliderRect.left + scrollLeft + getGapSize();
-            if (Math.floor(slideStart) >= Math.floor(scrollLeft)) {
-                activeSlideIdx = i;
-                break;
+        if (slider.options.rtl) {
+            const scrolledDistance = slider.getInclusiveScrollWidth() - scrollLeft - slider.getInclusiveClientWidth();
+            const slidePositions = [];
+            for (let i = slides.length - 1; i >= 0; i--) {
+                const slideRect = slides[i].getBoundingClientRect();
+                const slideEnd = Math.abs(slideRect.left) - Math.abs(sliderRect.left) + scrolledDistance;
+                slidePositions.push({
+                    slide: slides[i],
+                    slideEnd: slideEnd,
+                });
+            }
+            let closestSlide = null;
+            let closestDistance = null;
+            for (let i = 0; i < slidePositions.length; i++) {
+                const distance = Math.abs(slidePositions[i].slideEnd - scrolledDistance);
+                if (closestDistance === null || distance < closestDistance) {
+                    closestDistance = distance;
+                    closestSlide = slidePositions[i].slide;
+                }
+            }
+            if (closestSlide) {
+                activeSlideIdx = slides.indexOf(closestSlide);
+            }
+            else {
+                activeSlideIdx = slides.length - 1;
             }
-            if (i === slides.length - 1) {
-                scrolledPastLastSlide = true;
+        }
+        else {
+            for (let i = 0; i < slides.length; i++) {
+                const slideRect = slides[i].getBoundingClientRect();
+                const slideStart = slideRect.left - sliderRect.left + scrollLeft + getGapSize();
+                if (Math.floor(slideStart) >= Math.floor(scrollLeft)) {
+                    activeSlideIdx = i;
+                    break;
+                }
+                if (i === slides.length - 1) {
+                    scrolledPastLastSlide = true;
+                }
             }
         }
         if (scrolledPastLastSlide) {
@@ -235,6 +267,7 @@ function Slider(container, options, plugins) {
         }
         const oldActiveSlideIdx = slider.activeSlideIdx;
         slider.activeSlideIdx = activeSlideIdx;
+        // console.log('activeSlideIdx', activeSlideIdx);
         if (oldActiveSlideIdx !== activeSlideIdx) {
             slider.emit('activeSlideChanged');
         }
@@ -251,12 +284,18 @@ function Slider(container, options, plugins) {
     function getInclusiveClientWidth() {
         return slider.container.clientWidth + getOutermostChildrenEdgeMarginSum(slider.container);
     }
+    function getScrollLeft() {
+        return slider.options.rtl ? Math.abs(slider.container.scrollLeft) : slider.container.scrollLeft;
+    }
+    function setScrollLeft(value) {
+        slider.container.scrollLeft = slider.options.rtl ? -value : value;
+    }
     function getGapSize() {
         let gapSize = 0;
         if (slider.slides.length > 1) {
             const firstSlideRect = slider.slides[0].getBoundingClientRect();
             const secondSlideRect = slider.slides[1].getBoundingClientRect();
-            gapSize = Math.floor(secondSlideRect.left - firstSlideRect.right);
+            gapSize = slider.options.rtl ? Math.abs(Math.floor(secondSlideRect.right - firstSlideRect.left)) : Math.floor(secondSlideRect.left - firstSlideRect.right);
         }
         return gapSize;
     }
@@ -274,22 +313,23 @@ function Slider(container, options, plugins) {
         const sliderRect = slider.container.getBoundingClientRect();
         const containerWidth = slider.container.offsetWidth;
         let targetScrollPosition = scrollLeft;
-        if (direction === 'prev') {
+        const realDirection = slider.options.rtl ? (direction === 'prev' ? 'next' : 'prev') : direction;
+        if (realDirection === 'prev') {
             targetScrollPosition = Math.max(0, scrollLeft - slider.container.offsetWidth);
         }
-        else if (direction === 'next') {
+        else if (realDirection === 'next') {
             targetScrollPosition = Math.min(slider.getInclusiveScrollWidth(), scrollLeft + slider.container.offsetWidth);
         }
         if (scrollStrategy === 'fullSlide') {
             let fullSlideTargetScrollPosition = null;
             // extend targetScrollPosition to include gap
-            if (direction === 'prev') {
+            if (realDirection === 'prev') {
                 fullSlideTargetScrollPosition = Math.max(0, targetScrollPosition - getGapSize());
             }
             else {
                 fullSlideTargetScrollPosition = Math.min(slider.getInclusiveScrollWidth(), targetScrollPosition + getGapSize());
             }
-            if (direction === 'next') {
+            if (realDirection === 'next') {
                 let partialSlideFound = false;
                 for (let slide of slider.slides) {
                     const slideRect = slide.getBoundingClientRect();
@@ -347,12 +387,12 @@ function Slider(container, options, plugins) {
         setTimeout(() => slider.container.style.scrollBehavior = '', 50);
     }
     function snapToClosestSlide(direction = "prev") {
-        const isMovingForward = direction === 'next';
+        const isMovingForward = slider.options.rtl ? direction === 'prev' : 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 slideStart = slider.options.rtl ? Math.abs(slide.offsetLeft + slideWidth - slider.details.containerWidth) : slide.offsetLeft;
             const slideEnd = slideStart + slideWidth;
             const slideMiddle = slideStart + slideWidth / 2;
             const trigger = Math.min(slideMiddle, slideStart + slider.options.emulateScrollSnapMaxThreshold);
@@ -363,10 +403,14 @@ function Slider(container, options, plugins) {
                 width: slideWidth,
                 trigger: trigger,
                 slide: slide,
+                // debug
+                offSetleft: slide.offsetLeft,
+                rect: slide.getBoundingClientRect(),
             });
         }
+        console.log('slideReference', slideReference);
         let snapTarget = null;
-        const scrollPosition = slider.container.scrollLeft;
+        const scrollPosition = getScrollLeft();
         if (isMovingForward) {
             for (let i = 0; i < slideReference.length; i++) {
                 const item = slideReference[i];
@@ -374,7 +418,7 @@ function Slider(container, options, plugins) {
                     snapTarget = 0;
                     break;
                 }
-                if (Math.floor(slider.container.scrollLeft) <= Math.floor(item.trigger)) {
+                if (Math.floor(getScrollLeft()) <= Math.floor(item.trigger)) {
                     snapTarget = item.start;
                     break;
                 }
@@ -387,7 +431,7 @@ function Slider(container, options, plugins) {
                     snapTarget = item.start;
                     break;
                 }
-                if (Math.floor(slider.container.scrollLeft) >= Math.floor(item.trigger)) {
+                if (Math.floor(getScrollLeft()) >= Math.floor(item.trigger)) {
                     snapTarget = item.start;
                     break;
                 }
@@ -400,7 +444,7 @@ function Slider(container, options, plugins) {
             }
             const scrollBehavior = slider.options.scrollBehavior || 'smooth';
             slider.container.scrollTo({
-                left: snapTarget,
+                left: slider.options.rtl ? -snapTarget : snapTarget,
                 behavior: scrollBehavior
             });
         }
@@ -419,8 +463,9 @@ function Slider(container, options, plugins) {
             });
         }
         const optionCallBack = (_a = slider === null || slider === void 0 ? void 0 : slider.options) === null || _a === void 0 ? void 0 : _a[name];
+        // Type guard to check if the option callback is a function
         if (typeof optionCallBack === 'function') {
-            optionCallBack(slider);
+            optionCallBack(slider); // Type assertion here
         }
     }
     slider = {
@@ -430,6 +475,8 @@ function Slider(container, options, plugins) {
         snapToClosestSlide,
         getInclusiveScrollWidth,
         getInclusiveClientWidth,
+        getScrollLeft,
+        setScrollLeft,
         on,
         options,
     };

package/dist/core/slider.min.js

@@ -1 +1 @@
-import t from"./details.min.js";import{generateId as e,objectsAreEqual as o,getOutermostChildrenEdgeMarginSum as n}from"./utils.min.js";function l(l,i,r){let a,c={};function s(e=!1){const n=a.details,l=t(a);a.details=l,e||o(n,l)?e&&a.emit("detailsChanged"):a.emit("detailsChanged")}function f(){a.slides=Array.from(a.container.querySelectorAll(a.options.slidesSelector))}function d(){a.container.style.setProperty("--slider-container-width",`${a.details.containerWidth}px`),a.container.style.setProperty("--slider-scrollable-width",`${a.details.scrollableAreaWidth}px`),a.container.style.setProperty("--slider-slides-count",`${a.details.slideCount}`)}function h(){a.container.setAttribute("data-has-overflow",a.details.hasOverflow?"true":"false")}function u(t,e=null){const o=e||a.options.scrollBehavior,n=t.getBoundingClientRect(),l=a.container.getBoundingClientRect(),i=a.container.offsetWidth,r=a.container.scrollLeft,c=n.left-l.left+r,s=c+n.width;let f=null;f=Math.floor(c)<Math.floor(r)?c:Math.floor(s)>Math.floor(r)+Math.floor(i)?s-i:0===Math.floor(c)?0:c,null!==f&&setTimeout((t=>{a.emit("programmaticScrollStart"),a.container.scrollTo({left:t,behavior:o})}),50,f)}function m(){const t=a.container.getBoundingClientRect(),e=a.container.scrollLeft,o=a.slides;let n=0,l=!1;for(let i=0;i<o.length;i++){const r=o[i].getBoundingClientRect().left-t.left+e+g();if(Math.floor(r)>=Math.floor(e)){n=i;break}i===o.length-1&&(l=!0)}l&&(n=o.length-1);const i=a.activeSlideIdx;a.activeSlideIdx=n,i!==n&&a.emit("activeSlideChanged")}function g(){let t=0;if(a.slides.length>1){const e=a.slides[0].getBoundingClientRect(),o=a.slides[1].getBoundingClientRect();t=Math.floor(o.left-e.right)}return t}function M(){let t=0;const e=a.container.getAttribute("data-full-width-offset");return e&&(t=parseInt(e)),Math.floor(t)}return a={emit:function(t){var e;c&&c[t]&&c[t].forEach((t=>{t(a)}));const o=null===(e=null==a?void 0:a.options)||void 0===e?void 0:e[t];"function"==typeof o&&o(a)},moveToDirection:function(t="prev"){const e=a.options.scrollStrategy,o=a.container.scrollLeft,n=a.container.getBoundingClientRect(),l=a.container.offsetWidth;let i=o;if("prev"===t?i=Math.max(0,o-a.container.offsetWidth):"next"===t&&(i=Math.min(a.getInclusiveScrollWidth(),o+a.container.offsetWidth)),"fullSlide"===e){let e=null;if(e="prev"===t?Math.max(0,i-g()):Math.min(a.getInclusiveScrollWidth(),i+g()),"next"===t){let t=!1;for(let l of a.slides){const r=l.getBoundingClientRect(),a=r.left-n.left+o,c=a+r.width;if(Math.floor(a)<Math.floor(i)&&Math.floor(c)>Math.floor(i)){e=a,t=!0;break}}if(t||(e=Math.min(i,a.getInclusiveScrollWidth()-a.container.offsetWidth)),e)if(Math.floor(e)>Math.floor(o)){const t=Math.floor(a.getInclusiveScrollWidth())-Math.floor(l);i=Math.min(e,t)}else i=Math.min(a.getInclusiveScrollWidth(),o+l)}else{let t=!1;for(let i of a.slides){const r=i.getBoundingClientRect(),a=r.left-n.left+o,c=a+r.width;if(Math.floor(a)<Math.floor(o)&&Math.floor(c)>Math.floor(o)){e=c-l,t=!0;break}}t||(e=Math.max(0,o-l)),e&&Math.floor(e)<Math.floor(o)&&(i=e)}}const r=i-M();Math.floor(r)>=0&&(i=r),a.emit("programmaticScrollStart"),a.container.style.scrollBehavior=a.options.scrollBehavior,a.container.scrollLeft=i,setTimeout((()=>a.container.style.scrollBehavior=""),50)},moveToSlide:function(t){const e=a.slides[t];e&&u(e)},snapToClosestSlide:function(t="prev"){const e="next"===t,o=[];for(let t=0;t<a.slides.length;t++){const e=a.slides[t],n=e.offsetWidth,l=e.offsetLeft,i=l+n,r=l+n/2,c=Math.min(r,l+a.options.emulateScrollSnapMaxThreshold);o.push({start:l,middle:r,end:i,width:n,trigger:c,slide:e})}let n=null;const l=a.container.scrollLeft;if(e)for(let t=0;t<o.length;t++){const e=o[t];if(0===t&&Math.floor(l)<=Math.floor(e.trigger)){n=0;break}if(Math.floor(a.container.scrollLeft)<=Math.floor(e.trigger)){n=e.start;break}}else for(let t=o.length-1;t>=0;t--){const e=o[t];if(t===o.length-1&&Math.floor(l)>=Math.floor(e.trigger)){n=e.start;break}if(Math.floor(a.container.scrollLeft)>=Math.floor(e.trigger)){n=e.start;break}}if(null!==n){const t=n-M();Math.floor(t)>=0&&(n=t);const e=a.options.scrollBehavior||"smooth";a.container.scrollTo({left:n,behavior:e})}},getInclusiveScrollWidth:function(){return a.container.scrollWidth+n(a.container)},getInclusiveClientWidth:function(){return a.container.clientWidth+n(a.container)},on:function(t,e){c[t]||(c[t]=[]),c[t].push(e)},options:i},function(){a.container=l;let t=l.getAttribute("id");null===t&&(t=e("overflow-slider"),l.setAttribute("id",t)),f(),s(!0),m(),a.on("contentsChanged",(()=>{f(),s(),m()})),a.on("containerSizeChanged",(()=>s()));let o=0;if(a.on("scroll",(()=>{o&&window.cancelAnimationFrame(o),o=window.requestAnimationFrame((()=>{s(),m()}))})),function(){new MutationObserver((()=>a.emit("contentsChanged"))).observe(a.container,{childList:!0});let t,e,o;new ResizeObserver((()=>a.emit("containerSizeChanged"))).observe(a.container);let n=a.container.scrollLeft,l=a.container.scrollLeft,i=a.container.scrollLeft,r=!1,c=!1,s=!1;a.container.addEventListener("scroll",(()=>{const e=a.container.scrollLeft;Math.floor(n)!==Math.floor(e)&&(r||(r=!0,a.emit("scrollStart")),n=e,clearTimeout(t),t=setTimeout((()=>{r=!1,a.emit("scrollEnd")}),50),a.emit("scroll")),c&&f()}));const f=()=>{const t=a.container.scrollLeft;Math.floor(l)===Math.floor(t)||s||(c||(a.emit("nativeScrollStart"),c=!0),a.emit("nativeScroll"),l=t,clearTimeout(e),e=setTimeout((()=>{c=!1,a.emit("nativeScrollEnd"),i=l}),50))};a.container.addEventListener("touchmove",f),a.container.addEventListener("mousewheel",f),a.container.addEventListener("wheel",f),a.on("programmaticScrollStart",(()=>{s=!0})),a.container.addEventListener("scroll",(()=>{const t=a.container.scrollLeft;Math.floor(i)!==Math.floor(t)&&!c&&s&&(i=t,clearTimeout(o),o=setTimeout((()=>{s=!1,a.emit("programmaticScrollEnd"),l=i}),50),a.emit("programmaticScroll"))})),a.on("programmaticScrollStart",(()=>{a.container.style.scrollSnapType="none"})),a.on("nativeScrollStart",(()=>{a.container.style.scrollSnapType=""}));let d=!1;a.container.addEventListener("mousedown",(()=>{d=!0})),a.container.addEventListener("touchstart",(()=>{d=!0}),{passive:!0}),a.container.addEventListener("focusin",(t=>{if(!d){let e=t.target;for(;e.parentElement!==a.container&&e.parentElement;)e=e.parentElement;u(e,"auto")}d=!1}))}(),h(),d(),r)for(const t of r)t(a);a.on("detailsChanged",(()=>{h(),d()})),a.emit("created"),a.container.setAttribute("data-ready","true")}(),a}export{l as default};
+import t from"./details.min.js";import{generateId as e,objectsAreEqual as o,getOutermostChildrenEdgeMarginSum as n}from"./utils.min.js";function l(l,i,r){let a,s={};function c(e=!1){const n=a.details,l=t(a);a.details=l,e||o(n,l)?e&&a.emit("detailsChanged"):a.emit("detailsChanged")}function f(){a.slides=Array.from(a.container.querySelectorAll(a.options.slidesSelector))}function d(){a.container.style.setProperty("--slider-container-width",`${a.details.containerWidth}px`),a.container.style.setProperty("--slider-scrollable-width",`${a.details.scrollableAreaWidth}px`),a.container.style.setProperty("--slider-slides-count",`${a.details.slideCount}`)}function h(){a.container.setAttribute("data-has-overflow",a.details.hasOverflow?"true":"false"),a.options.rtl&&a.container.setAttribute("dir","rtl")}function u(t,e=null){const o=e||a.options.scrollBehavior,n=t.getBoundingClientRect(),l=a.container.getBoundingClientRect(),i=a.container.offsetWidth,r=a.container.scrollLeft,s=n.left-l.left+r,c=s+n.width;let f=null;f=Math.floor(s)<Math.floor(r)?s:Math.floor(c)>Math.floor(r)+Math.floor(i)?c-i:0===Math.floor(s)?0:s,null!==f&&setTimeout((t=>{a.emit("programmaticScrollStart"),a.container.scrollTo({left:t,behavior:o})}),50,f)}function g(){const t=a.container.getBoundingClientRect(),e=a.getScrollLeft(),o=a.slides;let n=0,l=!1;if(a.options.rtl){const l=a.getInclusiveScrollWidth()-e-a.getInclusiveClientWidth(),i=[];for(let e=o.length-1;e>=0;e--){const n=o[e].getBoundingClientRect(),r=Math.abs(n.left)-Math.abs(t.left)+l;i.push({slide:o[e],slideEnd:r})}let r=null,s=null;for(let t=0;t<i.length;t++){const e=Math.abs(i[t].slideEnd-l);(null===s||e<s)&&(s=e,r=i[t].slide)}n=r?o.indexOf(r):o.length-1}else for(let i=0;i<o.length;i++){const r=o[i].getBoundingClientRect().left-t.left+e+M();if(Math.floor(r)>=Math.floor(e)){n=i;break}i===o.length-1&&(l=!0)}l&&(n=o.length-1);const i=a.activeSlideIdx;a.activeSlideIdx=n,i!==n&&a.emit("activeSlideChanged")}function m(){return a.options.rtl?Math.abs(a.container.scrollLeft):a.container.scrollLeft}function M(){let t=0;if(a.slides.length>1){const e=a.slides[0].getBoundingClientRect(),o=a.slides[1].getBoundingClientRect();t=a.options.rtl?Math.abs(Math.floor(o.right-e.left)):Math.floor(o.left-e.right)}return t}function p(){let t=0;const e=a.container.getAttribute("data-full-width-offset");return e&&(t=parseInt(e)),Math.floor(t)}return a={emit:function(t){var e;s&&s[t]&&s[t].forEach((t=>{t(a)}));const o=null===(e=null==a?void 0:a.options)||void 0===e?void 0:e[t];"function"==typeof o&&o(a)},moveToDirection:function(t="prev"){const e=a.options.scrollStrategy,o=a.container.scrollLeft,n=a.container.getBoundingClientRect(),l=a.container.offsetWidth;let i=o;const r=a.options.rtl?"prev"===t?"next":"prev":t;if("prev"===r?i=Math.max(0,o-a.container.offsetWidth):"next"===r&&(i=Math.min(a.getInclusiveScrollWidth(),o+a.container.offsetWidth)),"fullSlide"===e){let t=null;if(t="prev"===r?Math.max(0,i-M()):Math.min(a.getInclusiveScrollWidth(),i+M()),"next"===r){let e=!1;for(let l of a.slides){const r=l.getBoundingClientRect(),a=r.left-n.left+o,s=a+r.width;if(Math.floor(a)<Math.floor(i)&&Math.floor(s)>Math.floor(i)){t=a,e=!0;break}}if(e||(t=Math.min(i,a.getInclusiveScrollWidth()-a.container.offsetWidth)),t)if(Math.floor(t)>Math.floor(o)){const e=Math.floor(a.getInclusiveScrollWidth())-Math.floor(l);i=Math.min(t,e)}else i=Math.min(a.getInclusiveScrollWidth(),o+l)}else{let e=!1;for(let i of a.slides){const r=i.getBoundingClientRect(),a=r.left-n.left+o,s=a+r.width;if(Math.floor(a)<Math.floor(o)&&Math.floor(s)>Math.floor(o)){t=s-l,e=!0;break}}e||(t=Math.max(0,o-l)),t&&Math.floor(t)<Math.floor(o)&&(i=t)}}const s=i-p();Math.floor(s)>=0&&(i=s),a.emit("programmaticScrollStart"),a.container.style.scrollBehavior=a.options.scrollBehavior,a.container.scrollLeft=i,setTimeout((()=>a.container.style.scrollBehavior=""),50)},moveToSlide:function(t){const e=a.slides[t];e&&u(e)},snapToClosestSlide:function(t="prev"){const e=a.options.rtl?"prev"===t:"next"===t,o=[];for(let t=0;t<a.slides.length;t++){const e=a.slides[t],n=e.offsetWidth,l=a.options.rtl?Math.abs(e.offsetLeft+n-a.details.containerWidth):e.offsetLeft,i=l+n,r=l+n/2,s=Math.min(r,l+a.options.emulateScrollSnapMaxThreshold);o.push({start:l,middle:r,end:i,width:n,trigger:s,slide:e,offSetleft:e.offsetLeft,rect:e.getBoundingClientRect()})}console.log("slideReference",o);let n=null;const l=m();if(e)for(let t=0;t<o.length;t++){const e=o[t];if(0===t&&Math.floor(l)<=Math.floor(e.trigger)){n=0;break}if(Math.floor(m())<=Math.floor(e.trigger)){n=e.start;break}}else for(let t=o.length-1;t>=0;t--){const e=o[t];if(t===o.length-1&&Math.floor(l)>=Math.floor(e.trigger)){n=e.start;break}if(Math.floor(m())>=Math.floor(e.trigger)){n=e.start;break}}if(null!==n){const t=n-p();Math.floor(t)>=0&&(n=t);const e=a.options.scrollBehavior||"smooth";a.container.scrollTo({left:a.options.rtl?-n:n,behavior:e})}},getInclusiveScrollWidth:function(){return a.container.scrollWidth+n(a.container)},getInclusiveClientWidth:function(){return a.container.clientWidth+n(a.container)},getScrollLeft:m,setScrollLeft:function(t){a.container.scrollLeft=a.options.rtl?-t:t},on:function(t,e){s[t]||(s[t]=[]),s[t].push(e)},options:i},function(){a.container=l;let t=l.getAttribute("id");null===t&&(t=e("overflow-slider"),l.setAttribute("id",t)),f(),c(!0),g(),a.on("contentsChanged",(()=>{f(),c(),g()})),a.on("containerSizeChanged",(()=>c()));let o=0;if(a.on("scroll",(()=>{o&&window.cancelAnimationFrame(o),o=window.requestAnimationFrame((()=>{c(),g()}))})),function(){new MutationObserver((()=>a.emit("contentsChanged"))).observe(a.container,{childList:!0});let t,e,o;new ResizeObserver((()=>a.emit("containerSizeChanged"))).observe(a.container);let n=a.container.scrollLeft,l=a.container.scrollLeft,i=a.container.scrollLeft,r=!1,s=!1,c=!1;a.container.addEventListener("scroll",(()=>{const e=a.container.scrollLeft;Math.floor(n)!==Math.floor(e)&&(r||(r=!0,a.emit("scrollStart")),n=e,clearTimeout(t),t=setTimeout((()=>{r=!1,a.emit("scrollEnd")}),50),a.emit("scroll")),s&&f()}));const f=()=>{const t=a.container.scrollLeft;Math.floor(l)===Math.floor(t)||c||(s||(a.emit("nativeScrollStart"),s=!0),a.emit("nativeScroll"),l=t,clearTimeout(e),e=setTimeout((()=>{s=!1,a.emit("nativeScrollEnd"),i=l}),50))};a.container.addEventListener("touchmove",f),a.container.addEventListener("mousewheel",f),a.container.addEventListener("wheel",f),a.on("programmaticScrollStart",(()=>{c=!0})),a.container.addEventListener("scroll",(()=>{const t=a.container.scrollLeft;Math.floor(i)!==Math.floor(t)&&!s&&c&&(i=t,clearTimeout(o),o=setTimeout((()=>{c=!1,a.emit("programmaticScrollEnd"),l=i}),50),a.emit("programmaticScroll"))})),a.on("programmaticScrollStart",(()=>{a.container.style.scrollSnapType="none"})),a.on("nativeScrollStart",(()=>{a.container.style.scrollSnapType=""}));let d=!1;a.container.addEventListener("mousedown",(()=>{d=!0})),a.container.addEventListener("touchstart",(()=>{d=!0}),{passive:!0}),a.container.addEventListener("focusin",(t=>{if(!d){let e=t.target;for(;e.parentElement!==a.container&&e.parentElement;)e=e.parentElement;u(e,"auto")}d=!1}))}(),h(),d(),r)for(const t of r)t(a);a.on("detailsChanged",(()=>{h(),d()})),a.emit("created"),a.container.setAttribute("data-ready","true")}(),a}export{l as default};