@evermade/overflow-slider 2.0.2 → 3.1.0

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 ( Math.floor( slider.container.scrollLeft ) !== Math.floor( 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,101 @@
+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 ( Math.floor( position ) <= Math.floor( fadeItemStart.offsetWidth ) ) {
+				return position / Math.max(fadeItemStart.offsetWidth, 1);
+			}
+			return 1;
+		}
+
+		const hasFadeAtEnd = () => {
+			return Math.floor( slider.container.scrollLeft ) < Math.floor( slider.getInclusiveScrollWidth() - slider.getInclusiveClientWidth() - fadeItemEnd.offsetWidth );
+		}
+
+		const fadeAtEndOpacity = () => {
+			const position = slider.container.scrollLeft;
+			const maxPosition = slider.getInclusiveScrollWidth() - slider.getInclusiveClientWidth();
+			const maxFadePosition = maxPosition - fadeItemEnd.offsetWidth;
+			if ( Math.floor( position ) >= Math.floor( 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

@@ -65,7 +65,7 @@ export default function ScrollIndicatorPlugin( args: { [key: string]: any } ) {
 			}
 
 			requestId = window.requestAnimationFrame(() => {
-				const scrollbarButtonWidth = (slider.details.containerWidth / slider.details.scrollableAreaWidth) * 100;
+				const scrollbarButtonWidth = (slider.details.containerWidth / slider.container.scrollWidth) * 100;
 
 				const scrollLeftInPortion = getScrollbarButtonLeftOffset();
 				scrollbarButton.style.width = `${scrollbarButtonWidth}%`;
@@ -73,7 +73,7 @@ export default function ScrollIndicatorPlugin( args: { [key: string]: any } ) {
 
 				// aria-valuenow
 				const scrollLeft = slider.container.scrollLeft;
-				const scrollWidth = slider.container.scrollWidth;
+				const scrollWidth = slider.getInclusiveScrollWidth();
 				const containerWidth = slider.container.offsetWidth;
 				const scrollPercentage = (scrollLeft / (scrollWidth - containerWidth)) * 100;
 				scrollbarContainer.setAttribute( 'aria-valuenow', Math.round(Number.isNaN(scrollPercentage) ? 0 : scrollPercentage).toString() );
@@ -109,9 +109,9 @@ export default function ScrollIndicatorPlugin( args: { [key: string]: any } ) {
 			const scrollbarButtonLeft = getScrollbarButtonLeftOffset();
 			const scrollbarButtonRight = scrollbarButtonLeft + scrollbarButtonWidth;
 			const clickX = e.pageX - scrollbarContainer.offsetLeft;
-			if ( clickX < scrollbarButtonLeft ) {
+			if ( Math.floor( clickX ) < Math.floor( scrollbarButtonLeft ) ) {
 				slider.moveToDirection( 'prev' );
-			} else if ( clickX > scrollbarButtonRight ) {
+			} else if ( Math.floor( clickX ) > Math.floor( scrollbarButtonRight ) ) {
 				slider.moveToDirection( 'next' );
 			}
 		});
@@ -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

@@ -13,7 +13,6 @@ export default function FullWidthPlugin( args: { [key: string]: any } ) {
 
 		const mainSlider = options.mainSlider;
 
-
 		const setActiveThumbnail = (slide: HTMLElement | null = null) => {
 			if ( slide === null && slider.slides.length > 0 ) {
 				slide = slider.slides[0] as HTMLElement;
@@ -40,6 +39,7 @@ export default function FullWidthPlugin( args: { [key: string]: any } ) {
 		setActiveThumbnail();
 		addClickListeners();
 
+		// @todo debounce on scroll
 		mainSlider.on( 'activeSlideChanged', () => {
 			setTimeout(() => {
 				const activeSlideIdx = mainSlider.activeSlideIdx;