@evermade/overflow-slider 4.0.0 → 4.2.0

package/docs/index.html

@@ -158,7 +158,7 @@
 
 							<div class="entry__item">
 								<h3>Dots</h3>
-								<p>Display dots indicator. Uses DotsPlugin.</p>
+								<p>Display dots indicator (by slide). Uses DotsPlugin.</p>
 								<div class="overflow-slider example-container example-container-1-dots">
 									<a href="#1" class="example-item example-item--1">1</a>
 									<a href="#2" class="example-item example-item--2">2</a>
@@ -167,6 +167,19 @@
 									<a href="#5" class="example-item example-item--5">5</a>
 									<a href="#6" class="example-item example-item--6">6</a>
 								</div>
+								<p style="margin-top:1.5rem;">Display dots indicator (by view).</p>
+								<div class="overflow-slider example-container example-container-1-dots-view">
+									<a href="#1" class="example-item example-item--1">1</a>
+									<a href="#2" class="example-item example-item--2">2</a>
+									<a href="#3" class="example-item example-item--3">3</a>
+									<a href="#4" class="example-item example-item--4">4</a>
+									<a href="#5" class="example-item example-item--5">5</a>
+									<a href="#6" class="example-item example-item--6">6</a>
+									<a href="#7" class="example-item example-item--7">7</a>
+									<a href="#8" class="example-item example-item--8">8</a>
+									<a href="#9" class="example-item example-item--9">9</a>
+									<a href="#10" class="example-item example-item--10">10</a>
+								</div>
 							</div>
 
 							<div class="entry__item">
@@ -191,10 +204,23 @@
 							</div>
 
 							<div class="entry__item">
-								<h3>Autoplay (slide)</h3>
-								<p>Use autoplay and set delay. If user prefers reduced motion, autoplay does not execute.</p>
-								<div class="example-container-1-autoplay-wrap-slide">
-									<div class="overflow-slider example-container example-container-1-autoplay-slide">
+								<h3>Classnames</h3>
+								<p>Toggle classes when slides are visible, partly visible or hidden. Uses ClassNamesPlugin.</p>
+								<div class="overflow-slider example-container example-container-1-classname-opacity">
+									<a href="#1" class="example-item example-item--1">1</a>
+									<a href="#2" class="example-item example-item--2">2</a>
+									<a href="#3" class="example-item example-item--3">3</a>
+									<a href="#4" class="example-item example-item--4">4</a>
+									<a href="#5" class="example-item example-item--5">5</a>
+									<a href="#6" class="example-item example-item--6">6</a>
+									<a href="#7" class="example-item example-item--7">7</a>
+									<a href="#8" class="example-item example-item--8">8</a>
+									<a href="#9" class="example-item example-item--9">9</a>
+									<a href="#10" class="example-item example-item--10">10</a>
+								</div>
+								<p style="margin-top:1.5rem;">Display separate effects when slides are partly visible. freezeStateOnVisible: true which means we don't hide once visible slides</p>
+								<div class="example-container-1-classname-partly-wrapper">
+									<div class="overflow-slider example-container example-container-1-classname-partly">
 										<a href="#1" class="example-item example-item--1">1</a>
 										<a href="#2" class="example-item example-item--2">2</a>
 										<a href="#3" class="example-item example-item--3">3</a>
@@ -210,10 +236,10 @@
 							</div>
 
 							<div class="entry__item">
-								<h3>Autoplay (view)</h3>
+								<h3>Autoplay (slide)</h3>
 								<p>Use autoplay and set delay. If user prefers reduced motion, autoplay does not execute.</p>
-								<div class="example-container-1-autoplay-wrap-view">
-									<div class="overflow-slider example-container example-container-1-autoplay-view">
+								<div class="example-container-1-autoplay-wrap-slide">
+									<div class="overflow-slider example-container example-container-1-autoplay-slide">
 										<a href="#1" class="example-item example-item--1">1</a>
 										<a href="#2" class="example-item example-item--2">2</a>
 										<a href="#3" class="example-item example-item--3">3</a>
@@ -227,12 +253,12 @@
 									</div>
 								</div>
 							</div>
-<!--
+
 							<div class="entry__item">
-								<h3>Infinite scroll</h3>
-								<p>This is a bad idea. Please don't use.</p>
-								<div class="example-container-1-infinite-wrap">
-									<div class="overflow-slider example-container example-container-1-infinite">
+								<h3>Autoplay (view)</h3>
+								<p>Use autoplay and set delay. If user prefers reduced motion, autoplay does not execute.</p>
+								<div class="example-container-1-autoplay-wrap-view">
+									<div class="overflow-slider example-container example-container-1-autoplay-view">
 										<a href="#1" class="example-item example-item--1">1</a>
 										<a href="#2" class="example-item example-item--2">2</a>
 										<a href="#3" class="example-item example-item--3">3</a>
@@ -243,13 +269,9 @@
 										<a href="#8" class="example-item example-item--8">8</a>
 										<a href="#9" class="example-item example-item--9">9</a>
 										<a href="#10" class="example-item example-item--10">10</a>
-										<a href="#11" class="example-item example-item--11">11</a>
-										<a href="#12" class="example-item example-item--12">12</a>
-										<a href="#13" class="example-item example-item--13">13</a>
 									</div>
 								</div>
 							</div>
--->
 
 						</section>
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evermade/overflow-slider",
-	"version": "4.0.0",
+	"version": "4.2.0",
 	"description": "Accessible slider that is powered by overflow: auto.",
 	"type": "module",
 	"main": "dist/index.js",
@@ -37,6 +37,11 @@
 			"require": "./dist/plugins/autoplay/index.min.js",
 			"types": "./dist/plugins/autoplay/index.d.ts"
 		},
+		"./plugins/classnames": {
+			"import": "./dist/plugins/classnames/index.esm.js",
+			"require": "./dist/plugins/classnames/index.min.js",
+			"types": "./dist/plugins/classnames/index.d.ts"
+		},
 		"./plugins/full-width": {
 			"import": "./dist/plugins/full-width/index.esm.js",
 			"require": "./dist/plugins/full-width/index.min.js",
@@ -57,11 +62,6 @@
 			"require": "./dist/plugins/fade/index.min.js",
 			"types": "./dist/plugins/fade/index.d.ts"
 		},
-		"./plugins/infinite-scroll": {
-			"import": "./dist/plugins/infinite-scroll/index.esm.js",
-			"require": "./dist/plugins/infinite-scroll/index.min.js",
-			"types": "./dist/plugins/infinite-scroll/index.d.ts"
-		},
 		"./style.css": "./dist/overflow-slider.css",
 		"./style": "./dist/overflow-slider.css",
 		"./mixins.scss": "./dist/mixins.scss",

package/src/core/slider.ts

@@ -6,6 +6,18 @@ export default function Slider( container: HTMLElement, options : SliderOptionAr
 	let slider: Slider;
 	let subs: { [key: string]: SliderCallback[] } = {};
 
+	const overrideTransitions = () => {
+		slider.slides.forEach( ( slide )  => {
+			slide.style.transition = 'none';
+		});
+	};
+
+	const restoreTransitions = () => {
+		slider.slides.forEach( ( slide ) => {
+			slide.style.removeProperty('transition');
+		});
+	};
+
 	function init() {
 		slider.container = container;
 		// ensure container has id
@@ -15,6 +27,8 @@ export default function Slider( container: HTMLElement, options : SliderOptionAr
 			container.setAttribute( 'id', containerId );
 		}
 		setSlides();
+		// CSS transitions can cause delays for calculations
+		overrideTransitions();
 		setDetails(true);
 		setActiveSlideIdx();
 		slider.on('contentsChanged', () => {
@@ -44,12 +58,20 @@ export default function Slider( container: HTMLElement, options : SliderOptionAr
 			for (const plugin of plugins) {
 				plugin(slider);
 			}
+			// plugins may mutate layout: refresh details and derived data after they run
+			// setTimeout( () => {
+				setDetails();
+				setActiveSlideIdx();
+				setCSSVariables();
+				slider.emit('pluginsLoaded');
+			// }, 250 );
 		}
 		slider.on('detailsChanged', () => {
 			setDataAttributes();
 			setCSSVariables();
 		});
 		slider.emit('created');
+		restoreTransitions();
 		slider.container.setAttribute('data-ready', 'true');
 	};
 
@@ -491,19 +513,35 @@ export default function Slider( container: HTMLElement, options : SliderOptionAr
 		const containerRect = container.getBoundingClientRect();
 		const factor = rtl ? -1 : 1;
 
+		// Calculate target area offset if targetWidth is defined
+		let targetAreaOffset = 0;
+		if (typeof options.targetWidth === 'function') {
+			try {
+				const targetWidth = options.targetWidth(slider);
+				const containerWidth = containerRect.width;
+				if (Number.isFinite(targetWidth) && targetWidth > 0 && targetWidth < containerWidth) {
+					targetAreaOffset = (containerWidth - targetWidth) / 2;
+				}
+			} catch (error) {
+				// ignore errors, use default offset of 0
+			}
+		}
+
 		// Build slide metadata
 		const slideData = [...slides].map(slide => {
 			const { width } = slide.getBoundingClientRect();
 			const slideRect = slide.getBoundingClientRect();
 
-			// position relative to container’s left edge
+			// position relative to container's left edge
 			const relativeStart = (slideRect.left - containerRect.left) + scrollPos;
+			// Adjust trigger point to align with target area start instead of container edge
+			const alignmentPoint = relativeStart - targetAreaOffset;
 			const triggerPoint = Math.min(
-				relativeStart + width / 2,
-				relativeStart + emulateScrollSnapMaxThreshold
+				alignmentPoint + width / 2,
+				alignmentPoint + emulateScrollSnapMaxThreshold
 			);
 
-			return { start: relativeStart, trigger: triggerPoint };
+			return { start: relativeStart - targetAreaOffset, trigger: triggerPoint };
 		});
 
 		// Pick the target start based on drag direction

package/src/core/types.ts

@@ -65,6 +65,7 @@ export type SliderOptionArgs = {
  emulateScrollSnapMaxThreshold?: number;
  cssVariableContainer?: HTMLElement;
  rtl?: boolean;
+ targetWidth?: ( slider: Slider ) => number;
  [key: string]: unknown;
 }
 

package/src/plugins/classnames/index.ts

@@ -0,0 +1,145 @@
+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();
+
+			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,6 +1,7 @@
 import { Slider, DeepPartial } from '../../core/types';
 
 export type DotsOptions = {
+	type: 'view' | 'slide';
 	texts: {
 		dotDescription: string;
 	},
@@ -23,6 +24,7 @@ const DEFAULT_CLASS_NAMES = {
 export default function DotsPlugin( args?: DeepPartial<DotsOptions> ) {
 	return ( slider: Slider ) => {
 		const options = <DotsOptions>{
+			type: args?.type ?? 'slide',
 			texts: {
 				...DEFAULT_TEXTS,
 				...args?.texts || []
@@ -45,20 +47,20 @@ export default function DotsPlugin( args?: DeepPartial<DotsOptions> ) {
 
 			const dotsList = document.createElement( 'ul' );
 
-			const pages = slider.details.slideCount;
-			const currentItem = slider.activeSlideIdx;
+			const count = options.type === 'view' ? slider.details.amountOfPages : slider.details.slideCount;
+			const currentIndex = options.type === 'view' ? slider.details.currentPage : slider.activeSlideIdx;
 
-			if ( pages <= 1 ) {
+			if ( count <= 1 ) {
 				return;
 			}
 
-			for ( let i = 0; i < pages; i++ ) {
+			for ( let i = 0; i < count; i++ ) {
 				const dotListItem = document.createElement( 'li' );
 				const dot = document.createElement( 'button' );
 				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 === currentItem ).toString() );
+				dot.setAttribute( 'aria-label', options.texts.dotDescription.replace( '%d', ( i + 1 ).toString() ).replace( '%d', count.toString() ) );
+				dot.setAttribute( 'aria-pressed', ( i === currentIndex ).toString() );
 				dot.setAttribute( 'data-item', ( i + 1 ).toString() );
 				dotListItem.appendChild( dot );
 				dotsList.appendChild( dotListItem );
@@ -71,23 +73,23 @@ export default function DotsPlugin( args?: DeepPartial<DotsOptions> ) {
 					}
 					const currentItem = parseInt( currentItemItem.getAttribute( 'data-item' ) ?? '1' );
 					if ( e.key === 'ArrowLeft' ) {
-						const previousPage = currentItem - 1;
-						if ( previousPage > 0 ) {
-							const matchingDot = dots.querySelector( `[data-item="${previousPage}"]` );
+						const previousIndex = currentItem - 1;
+						if ( previousIndex > 0 ) {
+							const matchingDot = dots.querySelector( `[data-item="${previousIndex}"]` );
 							if ( matchingDot ) {
 								( <HTMLElement>matchingDot ).focus();
 							}
-							activateDot( previousPage );
+							activateDot( previousIndex );
 						}
 					}
 					if ( e.key === 'ArrowRight' ) {
-						const nextPage = currentItem + 1;
-						if ( nextPage <= pages ) {
-							const matchingDot = dots.querySelector( `[data-item="${nextPage}"]` );
+						const nextIndex = currentItem + 1;
+						if ( nextIndex <= count ) {
+							const matchingDot = dots.querySelector( `[data-item="${nextIndex}"]` );
 							if ( matchingDot ) {
 								( <HTMLElement>matchingDot ).focus();
 							}
-							activateDot( nextPage );
+							activateDot( nextIndex );
 						}
 					}
 				} );
@@ -104,8 +106,17 @@ export default function DotsPlugin( args?: DeepPartial<DotsOptions> ) {
 			}
 		};
 
-		const activateDot = ( item: number ) => {
-			slider.moveToSlide( item - 1 );
+		const activateDot = ( index: number ) => {
+			if ( options.type === 'view' ) {
+				const targetPosition = slider.details.containerWidth * ( index - 1 );
+				const scrollLeft = slider.options.rtl ? -targetPosition : targetPosition;
+				slider.container.scrollTo({
+					left: scrollLeft,
+					behavior: slider.options.scrollBehavior as ScrollBehavior
+				});
+			} else {
+				slider.moveToSlide( index - 1 );
+			}
 		};
 
 		buildDots();
@@ -119,5 +130,6 @@ export default function DotsPlugin( args?: DeepPartial<DotsOptions> ) {
 		slider.on( 'scrollEnd', buildDots );
 		slider.on( 'contentsChanged', buildDots );
 		slider.on( 'containerSizeChanged', buildDots );
+		slider.on( 'detailsChanged', buildDots );
 	};
 };

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

@@ -3,7 +3,7 @@ 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,
 };
@@ -12,11 +12,22 @@ export default function FullWidthPlugin( args?: DeepPartial<FullWidthOptions> )
 	return ( slider: Slider ) => {
 
 		const options = <FullWidthOptions>{
-			targetWidth: args?.targetWidth ?? null,
+			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,34 +35,43 @@ export default function FullWidthPlugin( args?: DeepPartial<FullWidthOptions> )
 				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 - getTargetWidth()) / 2);
 			if ( options.addMarginBefore ) {
-				firstSlide.style.marginInlineStart = `${marginAmount}px`;
+				firstSlide.style.marginInlineStart = marginValue;
+				slider.container.style.setProperty( 'scroll-padding-inline-start', marginValue || '0px' );
 			}
-			if ( options.addMarginAfter ) {
-				lastSlide.style.marginInlineEnd = `${marginAmount}px`;
+			else {
+				slider.container.style.removeProperty( 'scroll-padding-inline-start' );
 			}
-			slider.container.setAttribute( 'data-full-width-offset', marginAmount.toString() );
-			setCSS();
-		};
-
-		const getTargetWidth = () => {
-			if ( typeof options.targetWidth === 'function' ) {
-				return options.targetWidth(slider);
+			if ( options.addMarginAfter ) {
+				lastSlide.style.marginInlineEnd = marginValue;
+				slider.container.style.setProperty( 'scroll-padding-inline-end', marginValue || '0px' );
 			}
-			if ( typeof slider.options.targetWidth  === 'function' ) {
-				return slider.options.targetWidth(slider);
+			else {
+				slider.container.style.removeProperty( 'scroll-padding-inline-end' );
 			}
-			return DEFAULT_TARGET_WIDTH(slider);
-		}
 
-		const setCSS = () => {
-			if ( typeof slider.options.targetWidth  === 'function' ) {
-				slider.options.cssVariableContainer.style.setProperty('--slider-container-target-width', `${getTargetWidth()}px`);
-			}
+			slider.container.setAttribute( 'data-full-width-offset', `${marginAmount}` );
+			setCSS( targetWidthFn );
+			slider.emit( 'fullWidthPluginUpdate' );
+		};
+
+		const setCSS = ( targetWidthFn: ( slider: Slider ) => number ) => {
+			const width = targetWidthFn( slider );
+			slider.options.cssVariableContainer.style.setProperty('--slider-container-target-width', `${width}px`);
 		};
 
 		update();