@evermade/overflow-slider 3.3.1 → 4.1.0

package/src/plugins/classnames/index.ts

@@ -0,0 +1,147 @@
+import { Slider, DeepPartial } from '../../core/types';
+
+export type ClassnameOptions = {
+	classNames: {
+		visible: string;
+		partlyVisible: string;
+		hidden: string;
+	},
+	freezeStateOnVisible: boolean;
+};
+
+const DEFAULT_CLASS_NAMES: ClassnameOptions['classNames'] = {
+	visible: 'is-visible',
+	partlyVisible: 'is-partly-visible',
+	hidden: 'is-hidden',
+}
+
+type VisibilityState = keyof ClassnameOptions['classNames'];
+
+export default function ClassNamesPlugin( args?: DeepPartial<ClassnameOptions> ) {
+	return ( slider: Slider ) => {
+
+		const providedClassNames = args?.classNames ?? (args as { classnames?: DeepPartial<ClassnameOptions['classNames']> })?.classnames;
+
+		const options = <ClassnameOptions>{
+			classNames: {
+				...DEFAULT_CLASS_NAMES,
+				...providedClassNames ?? {},
+			},
+			freezeStateOnVisible: args?.freezeStateOnVisible ?? false,
+		};
+
+		const slideStates = new WeakMap<HTMLElement, VisibilityState>();
+		const uniqueClassNames = Array.from(
+			new Set(
+				Object.values( options.classNames ).filter( ( className ): className is string => Boolean( className ) )
+			)
+		);
+
+		const getTargetBounds = () => {
+			const sliderRect = slider.container.getBoundingClientRect();
+			const sliderWidth = sliderRect.width;
+			if (!sliderWidth) {
+				return { targetStart: sliderRect.left, targetEnd: sliderRect.right };
+			}
+
+			let targetWidth = 0;
+			if ( typeof slider.options.targetWidth === 'function' ) {
+				try {
+					targetWidth = slider.options.targetWidth( slider );
+				} catch ( error ) {
+					targetWidth = 0;
+				}
+			}
+
+			if ( !Number.isFinite( targetWidth ) || targetWidth <= 0 ) {
+				targetWidth = sliderWidth;
+			}
+
+			const effectiveTargetWidth = Math.min( targetWidth, sliderWidth );
+			const offset = ( sliderWidth - effectiveTargetWidth ) / 2;
+			const clampedOffset = Math.max( offset, 0 );
+
+			return {
+				targetStart: sliderRect.left + clampedOffset,
+				targetEnd: sliderRect.right - clampedOffset,
+			};
+		};
+
+		const update = () => {
+			const { targetStart, targetEnd } = getTargetBounds();
+
+			console.log( 'targetStart:', targetStart, 'targetEnd:', targetEnd );
+
+			slider.slides.forEach( ( slide ) => {
+				const slideRect = slide.getBoundingClientRect();
+				const slideLeft = slideRect.left;
+				const slideRight = slideRect.right;
+
+				const tolerance = 2;
+				const overlapsTarget = (slideRight - tolerance) > targetStart && (slideLeft + tolerance) < targetEnd;
+				const fullyInsideTarget = (slideLeft + tolerance) >= targetStart && (slideRight - tolerance) <= targetEnd;
+
+				let nextState: VisibilityState = 'hidden';
+				if ( overlapsTarget ) {
+					nextState = fullyInsideTarget ? 'visible' : 'partlyVisible';
+				}
+
+				const prevState = slideStates.get( slide );
+
+				// If freezeStateOnVisible is enabled and slide was previously visible, keep it frozen
+				if ( options.freezeStateOnVisible && prevState === 'visible' ) {
+					return;
+				}
+
+				if ( prevState === nextState ) {
+					return;
+				}
+
+				const nextClass = options.classNames[ nextState ];
+				if ( prevState ) {
+					const prevClass = options.classNames[ prevState ];
+					if ( prevClass !== nextClass && prevClass ) {
+						slide.classList.remove( prevClass );
+					}
+				} else {
+					uniqueClassNames.forEach( ( className ) => {
+						if ( className !== nextClass ) {
+							slide.classList.remove( className );
+						}
+					} );
+				}
+
+				if ( nextClass && !slide.classList.contains( nextClass ) ) {
+					slide.classList.add( nextClass );
+				}
+
+				slideStates.set( slide, nextState );
+			});
+		};
+
+		slider.on( 'created', update );
+		slider.on( 'pluginsLoaded', update );
+		slider.on( 'fullWidthPluginUpdate', update );
+		slider.on( 'contentsChanged', update );
+		slider.on( 'containerSizeChanged', update );
+		slider.on( 'detailsChanged', update );
+		slider.on( 'scrollEnd', update );
+		slider.on( 'scrollStart', update );
+
+		requestAnimationFrame(() => {
+			requestAnimationFrame(() => update());
+		});
+
+		let requestId = 0;
+		const debouncedUpdate = () => {
+			if ( requestId ) {
+				window.cancelAnimationFrame( requestId );
+			}
+			requestId = window.requestAnimationFrame(() => {
+				update();
+			});
+		};
+		slider.on('scroll', debouncedUpdate);
+
+	};
+}

package/src/plugins/dots/index.ts

@@ -1,4 +1,4 @@
-import { Slider } from '../../core/types';
+import { Slider, DeepPartial } from '../../core/types';
 
 export type DotsOptions = {
 	texts: {
@@ -20,7 +20,7 @@ const DEFAULT_CLASS_NAMES = {
 	dotsItem: 'overflow-slider__dot-item',
 };
 
-export default function DotsPlugin( args: { [key: string]: unknown } ) {
+export default function DotsPlugin( args?: DeepPartial<DotsOptions> ) {
 	return ( slider: Slider ) => {
 		const options = <DotsOptions>{
 			texts: {

package/src/plugins/drag-scrolling/index.ts

@@ -1,4 +1,4 @@
-import { Slider } from '../../core/types';
+import { Slider, DeepPartial } from '../../core/types';
 
 const DEFAULT_DRAGGED_DISTANCE_THAT_PREVENTS_CLICK = 20;
 
@@ -6,7 +6,7 @@ export type DragScrollingOptions = {
 	draggedDistanceThatPreventsClick: number,
 };
 
-export default function DragScrollingPlugin( args: { [key: string]: unknown } ) {
+export default function DragScrollingPlugin( args?: DeepPartial<DragScrollingOptions> ) {
 	const options = <DragScrollingOptions>{
 		draggedDistanceThatPreventsClick: args?.draggedDistanceThatPreventsClick ?? DEFAULT_DRAGGED_DISTANCE_THAT_PREVENTS_CLICK,
 	};
@@ -31,7 +31,7 @@ export default function DragScrollingPlugin( args: { [key: string]: unknown } )
 				return;
 			}
 			isMouseDown = true;
-			startX = e.pageX - slider.container.offsetLeft;
+			startX = e.pageX - slider.container.getBoundingClientRect().left;
 			scrollLeft = slider.container.scrollLeft;
 			// change cursor to grabbing
 			slider.container.style.cursor = 'grabbing';
@@ -55,7 +55,7 @@ export default function DragScrollingPlugin( args: { [key: string]: unknown } )
 				programmaticScrollStarted = true;
 				slider.emit('programmaticScrollStart');
 			}
-			const x = e.pageX - slider.container.offsetLeft;
+			const x = e.pageX - slider.container.getBoundingClientRect().left;
 			const walk = (x - startX);
 			const newScrollLeft = scrollLeft - walk;
 			mayNeedToSnap = true;

package/src/plugins/fade/index.ts

@@ -1,4 +1,4 @@
-import { Slider } from '../../core/types';
+import { Slider, DeepPartial } from '../../core/types';
 
 export type FadeOptions = {
 	classNames: {
@@ -11,7 +11,7 @@ export type FadeOptions = {
 	containerEnd: HTMLElement | null,
 };
 
-export default function FadePlugin( args: { [key: string]: unknown } ) {
+export default function FadePlugin( args?: DeepPartial<FadeOptions> ) {
 	return ( slider: Slider ) => {
 
 		const options = <FadeOptions>{

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

@@ -1,22 +1,33 @@
-import { Slider } from '../../core/types';
+import { Slider, DeepPartial } from '../../core/types';
 
 const DEFAULT_TARGET_WIDTH = ( slider: Slider ) => slider.container.parentElement?.offsetWidth ?? window.innerWidth;
 
 export type FullWidthOptions = {
-	targetWidth: ( slider: Slider ) => number,
+	targetWidth?: ( slider: Slider ) => number,
 	addMarginBefore: boolean,
 	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 ?? undefined,
 			addMarginBefore: args?.addMarginBefore ?? true,
 			addMarginAfter: args?.addMarginAfter ?? true,
 		};
 
+		if ( typeof slider.options.targetWidth !== 'function' ) {
+			slider.options.targetWidth = options.targetWidth ?? DEFAULT_TARGET_WIDTH;
+		}
+
+		const resolveTargetWidth = () => {
+			if ( typeof slider.options.targetWidth === 'function' ) {
+				return slider.options.targetWidth;
+			}
+			return options.targetWidth ?? DEFAULT_TARGET_WIDTH;
+		};
+
 		const update = () => {
 			const slides = slider.container.querySelectorAll( slider.options.slidesSelector );
 
@@ -24,22 +35,43 @@ export default function FullWidthPlugin( args: { [key: string]: unknown } ) {
 				return;
 			}
 
+			const targetWidthFn = resolveTargetWidth();
+			const rawMargin = ( window.innerWidth - targetWidthFn( slider ) ) / 2;
+			const marginAmount = Math.max( 0, Math.floor( rawMargin ) );
+			const marginValue = marginAmount ? `${marginAmount}px` : '';
+
+			slides.forEach( ( slide ) => {
+				const element = slide as HTMLElement;
+				element.style.marginInlineStart = '';
+				element.style.marginInlineEnd = '';
+			} );
+
 			const firstSlide = slides[0] as HTMLElement;
 			const lastSlide = slides[slides.length - 1] as HTMLElement;
 
-			const marginAmount = Math.floor((window.innerWidth - options.targetWidth(slider)) / 2);
 			if ( options.addMarginBefore ) {
-				firstSlide.style.marginInlineStart = `${marginAmount}px`;
+				firstSlide.style.marginInlineStart = marginValue;
+				slider.container.style.setProperty( 'scroll-padding-inline-start', marginValue || '0px' );
+			}
+			else {
+				slider.container.style.removeProperty( 'scroll-padding-inline-start' );
 			}
 			if ( options.addMarginAfter ) {
-				lastSlide.style.marginInlineEnd = `${marginAmount}px`;
+				lastSlide.style.marginInlineEnd = marginValue;
+				slider.container.style.setProperty( 'scroll-padding-inline-end', marginValue || '0px' );
 			}
-			slider.container.setAttribute( 'data-full-width-offset', marginAmount.toString() );
-			setCSS();
+			else {
+				slider.container.style.removeProperty( 'scroll-padding-inline-end' );
+			}
+
+			slider.container.setAttribute( 'data-full-width-offset', `${marginAmount}` );
+			setCSS( targetWidthFn );
+			slider.emit( 'fullWidthPluginUpdate' );
 		};
 
-		const setCSS = () => {
-			slider.container.style.setProperty('--slider-container-target-width', `${options.targetWidth(slider)}px`);
+		const setCSS = ( targetWidthFn: ( slider: Slider ) => number ) => {
+			const width = targetWidthFn( slider );
+			slider.options.cssVariableContainer.style.setProperty('--slider-container-target-width', `${width}px`);
 		};
 
 		update();

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};