@evermade/overflow-slider 3.3.1 → 4.0.0

package/src/plugins/full-width/index.ts

@@ -1,4 +1,4 @@
-import { Slider } from '../../core/types';
+import { Slider, DeepPartial } from '../../core/types';
 
 const DEFAULT_TARGET_WIDTH = ( slider: Slider ) => slider.container.parentElement?.offsetWidth ?? window.innerWidth;
 
@@ -8,11 +8,11 @@ export type FullWidthOptions = {
 	addMarginAfter: boolean,
 };
 
-export default function FullWidthPlugin( args: { [key: string]: unknown } ) {
+export default function FullWidthPlugin( args?: DeepPartial<FullWidthOptions> ) {
 	return ( slider: Slider ) => {
 
 		const options = <FullWidthOptions>{
-			targetWidth: args?.targetWidth ?? DEFAULT_TARGET_WIDTH,
+			targetWidth: args?.targetWidth ?? null,
 			addMarginBefore: args?.addMarginBefore ?? true,
 			addMarginAfter: args?.addMarginAfter ?? true,
 		};
@@ -27,7 +27,7 @@ export default function FullWidthPlugin( args: { [key: string]: unknown } ) {
 			const firstSlide = slides[0] as HTMLElement;
 			const lastSlide = slides[slides.length - 1] as HTMLElement;
 
-			const marginAmount = Math.floor((window.innerWidth - options.targetWidth(slider)) / 2);
+			const marginAmount = Math.floor((window.innerWidth - getTargetWidth()) / 2);
 			if ( options.addMarginBefore ) {
 				firstSlide.style.marginInlineStart = `${marginAmount}px`;
 			}
@@ -38,8 +38,20 @@ export default function FullWidthPlugin( args: { [key: string]: unknown } ) {
 			setCSS();
 		};
 
+		const getTargetWidth = () => {
+			if ( typeof options.targetWidth === 'function' ) {
+				return options.targetWidth(slider);
+			}
+			if ( typeof slider.options.targetWidth  === 'function' ) {
+				return slider.options.targetWidth(slider);
+			}
+			return DEFAULT_TARGET_WIDTH(slider);
+		}
+
 		const setCSS = () => {
-			slider.container.style.setProperty('--slider-container-target-width', `${options.targetWidth(slider)}px`);
+			if ( typeof slider.options.targetWidth  === 'function' ) {
+				slider.options.cssVariableContainer.style.setProperty('--slider-container-target-width', `${getTargetWidth()}px`);
+			}
 		};
 
 		update();

package/src/plugins/infinite-scroll/index.ts

@@ -0,0 +1,109 @@
+/**
+ * Infinite‐scroll plugin
+ *
+ * Experimental work-in-progress not available for public use yet.
+ */
+import { Slider, SliderPlugin } from '../../core/types';
+
+/**
+ * @typedef {Object} InfiniteScrollOptions
+ * @property {number} [lookAheadCount=1] Number of slides to look ahead when deciding to reparent.
+ */
+
+/**
+ * Creates an infinite scroll plugin for a slider that re-parents multiple slides
+ * before hitting the container edge, to avoid blank space and keep the same
+ * active slide visible.
+ *
+ * @param {InfiniteScrollOptions} [options] Plugin configuration.
+ * @returns {SliderPlugin} The configured slider plugin.
+ */
+export default function InfiniteScrollPlugin(
+	options: { lookAheadCount?: number } = {}
+): SliderPlugin {
+	const { lookAheadCount = 1 } = options;
+
+	return (slider: Slider) => {
+		const { container, options: sliderOpts } = slider;
+		let rafId: number | null = null;
+
+		/**
+		 * Sum widths of the first or last N slides for lookahead.
+		 *
+		 * @param {HTMLElement[]} slides List of slide elements.
+		 * @param {boolean} fromEnd If true, sum last N; otherwise, first N.
+		 * @returns {number} Total pixel width of N slides.
+		 */
+		function getLookAheadWidth(
+			slides: HTMLElement[],
+			fromEnd: boolean
+		): number {
+			const slice = fromEnd
+				? slides.slice(-lookAheadCount)
+				: slides.slice(0, lookAheadCount);
+
+			return slice.reduce(
+				(total, slide) => total + slide.offsetWidth,
+				0
+			);
+		}
+
+		/**
+		 * Handler for slider.scrollEnd event that re-parents slides
+		 * and retains the active slide element by recalculating its
+		 * new index after DOM shifts.
+		 */
+		function onScroll(): void {
+				const activeSlideIdx = slider.activeSlideIdx;
+				const scrollLeft = slider.getScrollLeft();
+				const viewportWidth = slider.getInclusiveClientWidth();
+				const totalWidth = slider.getInclusiveScrollWidth();
+
+				// Grab current slide elements
+				let slides = Array.from(
+					container.querySelectorAll(
+						sliderOpts.slidesSelector
+					)
+				) as HTMLElement[];
+
+				if (slides.length === 0) return;
+
+				// Store reference to currently active slide element
+				const activeSlideEl = slides[activeSlideIdx];
+
+				const aheadRight = getLookAheadWidth(slides, false);
+				const aheadLeft = getLookAheadWidth(slides, true);
+
+				// 🐆 Tip: Batch DOM reads/writes inside requestAnimationFrame to avoid thrashing.
+				if (scrollLeft + viewportWidth >= totalWidth - aheadRight) {
+					for (let i = 0; i < lookAheadCount && slides.length; i++) {
+						container.append(slides.shift()!);
+					}
+				} else if (scrollLeft <= aheadLeft) {
+					for (let i = 0; i < lookAheadCount && slides.length; i++) {
+						container.prepend(slides.pop()!);
+					}
+				}
+
+				slider.setActiveSlideIdx();
+
+				// Re-query slides after DOM mutation
+				slides = Array.from(
+					container.querySelectorAll(
+						sliderOpts.slidesSelector
+					)
+				) as HTMLElement[];
+
+				const newIndex = slides.indexOf(activeSlideEl);
+				const newEl = slides[newIndex];
+
+				if (newIndex >= 0 && slider.canMoveToSlide(newIndex)) {
+					slider.moveToSlide(newIndex);
+				} else {
+					slider.snapToClosestSlide('next');
+				}
+		}
+
+		slider.on('scrollEnd', onScroll);
+	};
+}

package/src/plugins/scroll-indicator/index.ts

@@ -1,4 +1,4 @@
-import { Slider } from '../../core/types';
+import { Slider, DeepPartial } from '../../core/types';
 
 const DEFAULT_CLASS_NAMES = {
 	scrollIndicator: 'overflow-slider__scroll-indicator',
@@ -15,7 +15,7 @@ export type ScrollIndicatorOptions = {
 	container: HTMLElement | null,
 };
 
-export default function ScrollIndicatorPlugin(args: { [key: string]: unknown }) {
+export default function ScrollIndicatorPlugin(args?: DeepPartial<ScrollIndicatorOptions>) {
 	return (slider: Slider) => {
 
 		const options = <ScrollIndicatorOptions>{
@@ -112,10 +112,12 @@ export default function ScrollIndicatorPlugin(args: { [key: string]: unknown })
 			const scrollbarButtonWidth = scrollbarButton.offsetWidth;
 			const scrollbarButtonLeft = getScrollbarButtonLeftOffset();
 			const scrollbarButtonRight = scrollbarButtonLeft + scrollbarButtonWidth;
-			const clickX = e.pageX - Math.abs( scrollbarContainer.offsetLeft );
+			const clickX = (e as MouseEvent).pageX - scrollbarContainer.getBoundingClientRect().left;
 			if (Math.floor(clickX) < Math.floor(scrollbarButtonLeft)) {
+				console.log('move left');
 				slider.moveToDirection(slider.options.rtl ? 'next' : 'prev');
 			} else if (Math.floor(clickX) > Math.floor(scrollbarButtonRight)) {
+				console.log('move right');
 				slider.moveToDirection(slider.options.rtl ? 'prev' : 'next');
 			}
 		});

package/src/plugins/skip-links/index.ts

@@ -1,4 +1,4 @@
-import { Slider } from '../../core/types';
+import { Slider, DeepPartial } from '../../core/types';
 import { generateId } from '../../core/utils';
 
 const DEFAULT_TEXTS = {
@@ -22,7 +22,7 @@ export type SkipLinkOptions = {
 	containerAfter: HTMLElement | null,
 };
 
-export default function SkipLinksPlugin( args: { [key: string]: unknown } ) {
+export default function SkipLinksPlugin( args?: DeepPartial<SkipLinkOptions> ) {
 	return ( slider: Slider ) => {
 		const options = <SkipLinkOptions>{
 			texts: {

package/src/plugins/thumbnails/index.ts

@@ -1,10 +1,10 @@
-import { Slider } from '../../core/types';
+import { Slider, DeepPartial } from '../../core/types';
 
 export type ThumbnailsOptions = {
 	mainSlider: Slider,
 };
 
-export default function FullWidthPlugin( args: { [key: string]: unknown } ) {
+export default function FullWidthPlugin( args: DeepPartial<ThumbnailsOptions> ) {
 	return ( slider: Slider ) => {
 
 		const options = <ThumbnailsOptions>{

package/tsconfig.json

@@ -8,11 +8,13 @@
 			"sourceMap": false
 	},
 	"include": [
-			"src/**/*"
+			"src/**/*.ts"
 	],
 	"exclude": [
 			"node_modules",
 			"dist",
-			"**/*.spec.ts"
+			"**/*.spec.ts",
+			"**/*.scss",
+			"*.scss"
 	]
 }

package/changelog.md

@@ -1,5 +0,0 @@
-# Changelog
-
-## Version 1.0.0
-
-- Initial release

package/dist/core/details.esm.js

@@ -1,35 +0,0 @@
-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 (Math.floor(slider.getInclusiveScrollWidth()) > Math.floor(slider.getInclusiveClientWidth())) {
-        hasOverflow = true;
-    }
-    slideCount = (_a = slider.slides.length) !== null && _a !== void 0 ? _a : 0;
-    containerWidth = slider.container.offsetWidth;
-    scrollableAreaWidth = slider.getInclusiveScrollWidth();
-    amountOfPages = Math.ceil(scrollableAreaWidth / 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.getScrollLeft() + containerWidth) === Math.floor(scrollableAreaWidth)) {
-            currentPage = amountOfPages - 1;
-        }
-    }
-    instance = {
-        hasOverflow,
-        slideCount,
-        containerWidth,
-        scrollableAreaWidth,
-        amountOfPages,
-        currentPage,
-    };
-    return instance;
-}
-
-export { details as default };

package/dist/core/details.min.js

@@ -1 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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 > *",
-            emulateScrollSnap: false,
-            emulateScrollSnapMaxThreshold: 64,
-            rtl: false,
-        };
-        const sliderOptions = Object.assign(Object.assign({}, defaults), options);
-        // disable smooth scrolling if user prefers reduced motion
-        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
-            sliderOptions.scrollBehavior = "auto";
-        }
-        return Slider(container, sliderOptions, plugins);
-    }
-    catch (e) {
-        console.error(e);
-    }
-}
-
-export { OverflowSlider as default };

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

@@ -1 +0,0 @@
-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};