@evermade/overflow-slider 3.0.0 → 3.2.0

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

@@ -15,8 +15,8 @@ export type ScrollIndicatorOptions = {
 	container: HTMLElement | null,
 };
 
-export default function ScrollIndicatorPlugin( args: { [key: string]: any } ) {
-	return ( slider: Slider ) => {
+export default function ScrollIndicatorPlugin(args: { [key: string]: any }) {
+	return (slider: Slider) => {
 
 		const options = <ScrollIndicatorOptions>{
 			classNames: {
@@ -26,109 +26,107 @@ export default function ScrollIndicatorPlugin( args: { [key: string]: any } ) {
 			container: args?.container ?? null,
 		};
 
+		const scrollbarContainer = document.createElement('div');
+		scrollbarContainer.setAttribute('class', options.classNames.scrollIndicator);
+		scrollbarContainer.setAttribute('tabindex', '0');
+		scrollbarContainer.setAttribute('role', 'scrollbar');
+		scrollbarContainer.setAttribute('aria-controls', slider.container.getAttribute('id') ?? '');
+		scrollbarContainer.setAttribute('aria-orientation', 'horizontal');
+		scrollbarContainer.setAttribute('aria-valuemax', '100');
+		scrollbarContainer.setAttribute('aria-valuemin', '0');
+		scrollbarContainer.setAttribute('aria-valuenow', '0');
 
-		const scrollbarContainer = document.createElement( 'div' );
-		scrollbarContainer.setAttribute( 'class', options.classNames.scrollIndicator );
-		scrollbarContainer.setAttribute( 'tabindex', '0' );
-		scrollbarContainer.setAttribute( 'role', 'scrollbar' );
-		scrollbarContainer.setAttribute( 'aria-controls', slider.container.getAttribute( 'id' ) ?? '' );
-		scrollbarContainer.setAttribute( 'aria-orientation', 'horizontal' );
-		scrollbarContainer.setAttribute( 'aria-valuemax', '100' );
-		scrollbarContainer.setAttribute( 'aria-valuemin', '0' );
-		scrollbarContainer.setAttribute( 'aria-valuenow', '0' );
+		const scrollbar = document.createElement('div');
+		scrollbar.setAttribute('class', options.classNames.scrollIndicatorBar);
 
-		const scrollbar = document.createElement( 'div' );
-		scrollbar.setAttribute( 'class', options.classNames.scrollIndicatorBar );
+		const scrollbarButton = document.createElement('div');
+		scrollbarButton.setAttribute('class', options.classNames.scrollIndicatorButton);
+		scrollbarButton.setAttribute('data-is-grabbed', 'false');
 
-		const scrollbarButton = document.createElement( 'div' );
-		scrollbarButton.setAttribute( 'class', options.classNames.scrollIndicatorButton );
-		scrollbarButton.setAttribute( 'data-is-grabbed', 'false' );
-
-		scrollbar.appendChild( scrollbarButton );
-		scrollbarContainer.appendChild( scrollbar );
+		scrollbar.appendChild(scrollbarButton);
+		scrollbarContainer.appendChild(scrollbar);
 
 		const setDataAttributes = () => {
-			scrollbarContainer.setAttribute( 'data-has-overflow', slider.details.hasOverflow.toString() );
+			scrollbarContainer.setAttribute('data-has-overflow', slider.details.hasOverflow.toString());
 		}
 		setDataAttributes();
 
 		const getScrollbarButtonLeftOffset = () => {
-			const  contentRatio = scrollbarButton.offsetWidth / slider.details.containerWidth;
-			return slider.container.scrollLeft * contentRatio;
+			const contentRatio = scrollbarButton.offsetWidth / slider.details.containerWidth;
+			const scrollAmount = slider.getScrollLeft() * contentRatio;
+			if (slider.options.rtl) {
+				return scrollbar.offsetWidth - scrollbarButton.offsetWidth - scrollAmount;
+			}
+			return scrollAmount;
 		};
 
-		// scrollbarbutton width and position is calculated based on the scroll position and available width
 		let requestId = 0;
 		const update = () => {
-			if ( requestId ) {
-				window.cancelAnimationFrame( requestId );
+			if (requestId) {
+				window.cancelAnimationFrame(requestId);
 			}
 
 			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}%`;
 				scrollbarButton.style.transform = `translateX(${scrollLeftInPortion}px)`;
 
-				// aria-valuenow
-				const scrollLeft = slider.container.scrollLeft;
-				const scrollWidth = slider.container.scrollWidth;
+				const scrollLeft = slider.getScrollLeft();
+				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() );
+				scrollbarContainer.setAttribute('aria-valuenow', Math.round(Number.isNaN(scrollPercentage) ? 0 : scrollPercentage).toString());
 			});
 		};
 
-		// insert to DOM
-		if ( options.container ) {
-			options.container.appendChild( scrollbarContainer );
+		if (options.container) {
+			options.container.appendChild(scrollbarContainer);
 		} else {
-			slider.container.parentNode?.insertBefore( scrollbarContainer, slider.container.nextSibling );
+			slider.container.parentNode?.insertBefore(scrollbarContainer, slider.container.nextSibling);
 		}
 
-		// update the scrollbar when the slider is scrolled
 		update();
-		slider.on( 'scroll', update );
-		slider.on( 'contentsChanged', update );
-		slider.on( 'containerSizeChanged', update );
-		slider.on( 'detailsChanged', setDataAttributes );
-
-		// handle arrow keys while focused
-		scrollbarContainer.addEventListener( 'keydown', (e) => {
-			if ( e.key === 'ArrowLeft' ) {
-				slider.moveToDirection( 'prev' );
-			} else if ( e.key === 'ArrowRight' ) {
-				slider.moveToDirection( 'next' );
+		slider.on('scroll', update);
+		slider.on('contentsChanged', update);
+		slider.on('containerSizeChanged', update);
+		slider.on('detailsChanged', setDataAttributes);
+
+		scrollbarContainer.addEventListener('keydown', (e) => {
+			if (e.key === 'ArrowLeft') {
+				slider.moveToDirection('prev');
+			} else if (e.key === 'ArrowRight') {
+				slider.moveToDirection('next');
 			}
 		});
 
-		// handle click to before or after the scrollbar button
-		scrollbarContainer.addEventListener( 'click', (e) => {
+		let isInteractionDown = false;
+		let startX = 0;
+		let scrollLeft = slider.getScrollLeft();
+
+		scrollbarContainer.addEventListener('click', (e) => {
+			if ( e.target == scrollbarButton ) {
+				return;
+			}
 			const scrollbarButtonWidth = scrollbarButton.offsetWidth;
 			const scrollbarButtonLeft = getScrollbarButtonLeftOffset();
 			const scrollbarButtonRight = scrollbarButtonLeft + scrollbarButtonWidth;
-			const clickX = e.pageX - scrollbarContainer.offsetLeft;
-			if ( clickX < scrollbarButtonLeft ) {
-				slider.moveToDirection( 'prev' );
-			} else if ( clickX > scrollbarButtonRight ) {
-				slider.moveToDirection( 'next' );
+			const clickX = e.pageX - Math.abs( scrollbarContainer.offsetLeft );
+			if (Math.floor(clickX) < Math.floor(scrollbarButtonLeft)) {
+				slider.moveToDirection(slider.options.rtl ? 'next' : 'prev');
+			} else if (Math.floor(clickX) > Math.floor(scrollbarButtonRight)) {
+				slider.moveToDirection(slider.options.rtl ? 'prev' : 'next');
 			}
 		});
 
-		// make scrollbar button draggable via mouse/touch and update the scroll position
-		let isInteractionDown = false;
-		let startX = 0;
-		let scrollLeft = 0;
-
 		const onInteractionDown = (e: MouseEvent | TouchEvent) => {
 			isInteractionDown = true;
 			const pageX = (e as MouseEvent).pageX || (e as TouchEvent).touches[0].pageX;
 			startX = pageX - scrollbarContainer.offsetLeft;
-			scrollLeft = slider.container.scrollLeft;
-			// change cursor to grabbing
+			scrollLeft = slider.getScrollLeft();
 			scrollbarButton.style.cursor = 'grabbing';
-			scrollbarButton.setAttribute( 'data-is-grabbed', 'true' );
+			scrollbarButton.setAttribute('data-is-grabbed', 'true');
 
 			e.preventDefault();
 			e.stopPropagation();
@@ -144,13 +142,14 @@ export default function ScrollIndicatorPlugin( args: { [key: string]: any } ) {
 			const scrollingFactor = slider.details.scrollableAreaWidth / scrollbarContainer.offsetWidth;
 
 			const walk = (x - startX) * scrollingFactor;
-			slider.container.scrollLeft = scrollLeft + walk;
+			const distance = slider.options.rtl ? scrollLeft - walk : scrollLeft + walk;
+			slider.setScrollLeft(distance);
 		};
 
 		const onInteractionUp = () => {
 			isInteractionDown = false;
 			scrollbarButton.style.cursor = '';
-			scrollbarButton.setAttribute( 'data-is-grabbed', 'false' );
+			scrollbarButton.setAttribute('data-is-grabbed', 'false');
 		};
 
 		scrollbarButton.addEventListener('mousedown', onInteractionDown);
@@ -161,6 +160,5 @@ export default function ScrollIndicatorPlugin( args: { [key: string]: any } ) {
 
 		window.addEventListener('mouseup', onInteractionUp);
 		window.addEventListener('touchend', onInteractionUp);
-
 	};
 }

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,13 +39,16 @@ export default function FullWidthPlugin( args: { [key: string]: any } ) {
 		setActiveThumbnail();
 		addClickListeners();
 
-		// @todo debounce on scroll
 		mainSlider.on( 'scrollEnd', () => {
 			setTimeout(() => {
-				const activeSlideIdx = mainSlider.activeSlideIdx;
-				const activeThumbnail = slider.slides[activeSlideIdx] as HTMLElement;
+				const mainActiveSlideIdx = mainSlider.activeSlideIdx;
+				const thumbActiveSlideIdx = slider.activeSlideIdx;
+				if ( thumbActiveSlideIdx === mainActiveSlideIdx ) {
+					return;
+				}
+				const activeThumbnail = slider.slides[mainActiveSlideIdx] as HTMLElement;
 				setActiveThumbnail(activeThumbnail);
-				slider.moveToSlide(activeSlideIdx);
+				slider.moveToSlide(mainActiveSlideIdx);
 			}, 50);
 		});