@evermade/overflow-slider 2.0.1 → 3.0.0

package/src/core/types.ts

@@ -5,6 +5,9 @@ export type Slider<O = {}, C = {}, H extends string = string> = {
 	moveToDirection: (
 		direction: 'prev' | 'next'
 	) => void
+	snapToClosestSlide: (
+		direction: 'prev' | 'next'
+	) => void
 	moveToSlide: (
 		index: number
 	) => void
@@ -21,6 +24,8 @@ export type SliderOptions = {
 	scrollBehavior: string;
 	scrollStrategy: string;
 	slidesSelector: string;
+	emulateScrollSnap: boolean;
+	emulateScrollSnapMaxThreshold: number;
 	[key: string]: any;
 }
 
@@ -38,7 +43,16 @@ export type SliderHooks =
 	| HOOK_CONTENTS_CHANGED
 	| HOOK_DETAILS_CHANGED
 	| HOOK_CONTAINER_SIZE_CHANGED
-	| HOOK_ACTIVE_SLIDE_CHANGED;
+	| HOOK_ACTIVE_SLIDE_CHANGED
+	| HOOK_SCROLL_START
+	| HOOK_SCROLL
+	| HOOK_SCROLL_END
+	| HOOK_NATIVE_SCROLL_START
+	| HOOK_NATIVE_SCROLL
+	| HOOK_NATIVE_SCROLL_END
+	| HOOK_PROGRAMMATIC_SCROLL_START
+	| HOOK_PROGRAMMATIC_SCROLL
+	| HOOK_PROGRAMMATIC_SCROLL_END;
 
 export type HOOK_CREATED = 'created';
 export type HOOK_DETAILS_CHANGED = 'detailsChanged';
@@ -46,4 +60,20 @@ export type HOOK_CONTENTS_CHANGED = 'contentsChanged';
 export type HOOK_CONTAINER_SIZE_CHANGED = 'containerSizeChanged';
 export type HOOK_ACTIVE_SLIDE_CHANGED = 'activeSlideChanged';
 
+// any type of scroll
+export type HOOK_SCROLL_START = 'scrollStart';
+export type HOOK_SCROLL = 'scroll';
+export type HOOK_SCROLL_END = 'scrollEnd';
+
+// user initted scroll (touch, mouse wheel, etc.)
+export type HOOK_NATIVE_SCROLL_START = 'nativeScrollStart';
+export type HOOK_NATIVE_SCROLL = 'nativeScroll';
+export type HOOK_NATIVE_SCROLL_END = 'nativeScrollEnd';
+
+// programmatic scroll (e.g. el.scrollTo)
+export type HOOK_PROGRAMMATIC_SCROLL_START = 'programmaticScrollStart';
+export type HOOK_PROGRAMMATIC_SCROLL = 'programmaticScroll';
+export type HOOK_PROGRAMMATIC_SCROLL_END = 'programmaticScrollEnd';
+
+
 export type SliderPlugin = (slider: Slider) => void;

package/src/overflow-slider.scss

@@ -9,11 +9,11 @@
 .overflow-slider {
 	overflow: auto;
 	width: 100%;
-	overflow: auto;
 	display: grid;
 	grid-auto-flow: column;
 	grid-template-columns: max-content;
 	max-width: max-content;
+	position: relative;
 	// hide native scrollbars
 	&::-webkit-scrollbar {
 		display: none;
@@ -32,6 +32,7 @@
 
 @import 'plugins/arrows/styles.scss';
 @import 'plugins/dots/styles.scss';
+@import 'plugins/fade/styles.scss';
 @import 'plugins/drag-scrolling/styles.scss';
 @import 'plugins/scroll-indicator/styles.scss';
 @import 'plugins/skip-links/styles.scss';

package/src/plugins/dots/index.ts

@@ -45,8 +45,8 @@ export default function DotsPlugin( args: { [key: string]: any } ) {
 
 			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;
@@ -58,22 +58,22 @@ export default function DotsPlugin( args: { [key: string]: any } ) {
 				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 ) => {
-					const currentPageItem = dots.querySelector( `[aria-pressed="true"]` );
-					if ( ! currentPageItem ) {
+					const currentItemItem = dots.querySelector( `[aria-pressed="true"]` );
+					if ( ! currentItemItem ) {
 						return;
 					}
-					const currentPage = parseInt( currentPageItem.getAttribute( 'data-page' ) ?? '1' );
+					const currentItem = parseInt( currentItemItem.getAttribute( 'data-item' ) ?? '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 ) {
 								( <HTMLElement>matchingDot ).focus();
 							}
@@ -81,9 +81,9 @@ export default function DotsPlugin( args: { [key: string]: any } ) {
 						}
 					}
 					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 ) {
 								( <HTMLElement>matchingDot ).focus();
 							}
@@ -97,20 +97,19 @@ export default function DotsPlugin( args: { [key: string]: any } ) {
 
 			// 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 ) {
 					( <HTMLElement>matchingDot ).focus();
 				}
 			}
 		};
 
-		const activateDot = ( page: number ) => {
-			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: number ) => {
+			// 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();
@@ -121,9 +120,8 @@ export default function DotsPlugin( args: { [key: string]: any } ) {
 			slider.container.parentNode?.insertBefore( dots, slider.container.nextSibling );
 		}
 
-		slider.on( 'detailsChanged', () => {
-			buildDots();
-		} );
-
+		slider.on( 'scrollEnd', buildDots );
+		slider.on( 'contentsChanged', buildDots );
+		slider.on( 'containerSizeChanged', buildDots );
 	};
 };

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

@@ -15,23 +15,26 @@ export default function DragScrollingPlugin( args: { [key: string]: any } ) {
 		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: MouseEvent) => {
+			programmaticScrollStarted = false;
 			if ( ! slider.details.hasOverflow ) {
 				return;
 			}
 			if ( ! slider.container.contains( e.target as Node ) ) {
 				return;
 			}
-
 			isMouseDown = true;
 			startX = e.pageX - slider.container.offsetLeft;
 			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();
@@ -40,15 +43,26 @@ export default function DragScrollingPlugin( args: { [key: string]: any } ) {
 
 		const mouseMove = (e: MouseEvent) => {
 			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 );
@@ -59,13 +73,15 @@ export default function DragScrollingPlugin( args: { [key: string]: any } ) {
 		};
 
 		const mouseUp = () => {
-			if ( ! slider.details.hasOverflow ) {
+			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) => {
@@ -78,5 +94,18 @@ export default function DragScrollingPlugin( args: { [key: string]: any } ) {
 		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 );
+		}
+
 	};
 };

package/src/plugins/fade/index.ts

@@ -0,0 +1,102 @@
+import { Slider } from '../../core/types';
+
+export type FadeOptions = {
+	classNames: {
+		fadeItem: string;
+		fadeItemStart: string;
+		fadeItemEnd: string;
+	},
+	container: HTMLElement | null,
+	containerStart: HTMLElement | null,
+	containerEnd: HTMLElement | null,
+};
+
+export default function FadePlugin( args: { [key: string]: any } ) {
+	return ( slider: Slider ) => {
+
+		const options = <FadeOptions>{
+			classNames: {
+				fadeItem: 'overflow-slider-fade',
+				fadeItemStart: 'overflow-slider-fade--start',
+				fadeItemEnd: 'overflow-slider-fade--end',
+			},
+			container: args?.container ?? null,
+			containerStart: args?.containerStart ?? null,
+			containerEnd: args?.containerEnd ?? null,
+		};
+
+		const fadeItemStart = document.createElement( 'div' );
+		fadeItemStart.classList.add( options.classNames.fadeItem, options.classNames.fadeItemStart );
+		fadeItemStart.setAttribute( 'aria-hidden', 'true' );
+		fadeItemStart.setAttribute( 'tabindex', '-1' );
+
+		const fadeItemEnd = document.createElement( 'div' );
+		fadeItemEnd.classList.add( options.classNames.fadeItem, options.classNames.fadeItemEnd );
+		fadeItemEnd.setAttribute( 'aria-hidden', 'true' );
+		fadeItemEnd.setAttribute( 'tabindex', '-1' );
+
+		if ( options.containerStart ) {
+			options.containerStart.appendChild( fadeItemStart );
+		} else if ( options.container ) {
+			options.container.appendChild( fadeItemStart );
+		}
+
+		if ( options.containerEnd ) {
+			options.containerEnd.appendChild( fadeItemEnd );
+		} else if ( options.container ) {
+			options.container.appendChild( fadeItemEnd );
+		}
+
+		const hasFadeAtStart = () => {
+			return slider.container.scrollLeft > fadeItemStart.offsetWidth;
+		}
+
+		const fadeAtStartOpacity = () => {
+			const position = slider.container.scrollLeft;
+			if ( position <= fadeItemStart.offsetWidth ) {
+				return position / Math.max(fadeItemStart.offsetWidth, 1);
+			}
+			return 1;
+		}
+
+		const hasFadeAtEnd = () => {
+			return slider.container.scrollLeft < (slider.container.scrollWidth - slider.container.clientWidth - fadeItemEnd.offsetWidth);
+		}
+
+		const fadeAtEndOpacity = () => {
+			const position = slider.container.scrollLeft;
+			const maxPosition = slider.container.scrollWidth - slider.container.clientWidth;
+			const maxFadePosition = maxPosition - fadeItemEnd.offsetWidth;
+			if ( position >= maxFadePosition ) {
+				return ( ( maxFadePosition - position ) / Math.max(fadeItemEnd.offsetWidth, 1) ) + 1;
+			}
+			return 1;
+		}
+
+		const update = () => {
+			fadeItemStart.setAttribute( 'data-has-fade', hasFadeAtStart().toString() );
+			fadeItemStart.style.opacity = fadeAtStartOpacity().toString();
+			fadeItemEnd.setAttribute( 'data-has-fade', hasFadeAtEnd().toString() );
+			fadeItemEnd.style.opacity = fadeAtEndOpacity().toString();
+		};
+
+		update();
+		slider.on( 'created', update );
+		slider.on( 'contentsChanged', update );
+		slider.on( 'containerSizeChanged', update );
+		slider.on( 'scrollEnd', update );
+		slider.on( 'scrollStart', update );
+		let requestId = 0;
+		const debouncedUpdate = () => {
+			if ( requestId ) {
+				window.cancelAnimationFrame( requestId );
+			}
+			requestId = window.requestAnimationFrame(() => {
+				update();
+			});
+		};
+		slider.on('scroll', debouncedUpdate);
+
+
+	};
+}

package/src/plugins/fade/styles.scss

@@ -0,0 +1,27 @@
+/* --------------------------------------------------------------
+# FadePlugin
+-------------------------------------------------------------- */
+
+:root {
+	--overflow-slider-fade-color: #fff;
+	--overflow-slider-fade-width: 3rem;
+}
+
+.overflow-slider-fade {
+	position: absolute;
+	top: 0;
+	width: var(--overflow-slider-fade-width);
+	height: 100%;
+	pointer-events: none;
+	z-index: 1;
+}
+
+.overflow-slider-fade--start {
+	left: 0;
+	background: linear-gradient(to right, var(--overflow-slider-fade-color) 0%, transparent 100%);
+}
+
+.overflow-slider-fade--end {
+	right: 0;
+	background: linear-gradient(to left, var(--overflow-slider-fade-color) 0%, transparent 100%);
+}

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

@@ -34,6 +34,7 @@ export default function FullWidthPlugin( args: { [key: string]: any } ) {
 			if ( options.addMarginAfter ) {
 				lastSlide.style.marginRight = `${marginAmount}px`;
 			}
+			slider.container.setAttribute( 'data-full-width-offset', marginAmount.toString() );
 		};
 
 		update();

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

@@ -128,7 +128,6 @@ export default function ScrollIndicatorPlugin( args: { [key: string]: any } ) {
 			scrollLeft = slider.container.scrollLeft;
 			// change cursor to grabbing
 			scrollbarButton.style.cursor = 'grabbing';
-			slider.container.style.scrollSnapType = 'none';
 			scrollbarButton.setAttribute( 'data-is-grabbed', 'true' );
 
 			e.preventDefault();
@@ -151,7 +150,6 @@ export default function ScrollIndicatorPlugin( args: { [key: string]: any } ) {
 		const onInteractionUp = () => {
 			isInteractionDown = false;
 			scrollbarButton.style.cursor = '';
-			slider.container.style.scrollSnapType = '';
 			scrollbarButton.setAttribute( 'data-is-grabbed', 'false' );
 		};
 

package/src/plugins/thumbnails/index.ts

@@ -40,7 +40,8 @@ export default function FullWidthPlugin( args: { [key: string]: any } ) {
 		setActiveThumbnail();
 		addClickListeners();
 
-		mainSlider.on( 'activeSlideChanged', () => {
+		// @todo debounce on scroll
+		mainSlider.on( 'scrollEnd', () => {
 			setTimeout(() => {
 				const activeSlideIdx = mainSlider.activeSlideIdx;
 				const activeThumbnail = slider.slides[activeSlideIdx] as HTMLElement;