@evermade/overflow-slider 3.0.0 → 3.1.0

package/src/core/slider.ts

@@ -1,6 +1,6 @@
 import { Slider, SliderOptions, SliderPlugin } from './types';
 import details from './details';
-import { generateId, objectsAreEqual } from './utils';
+import { generateId, objectsAreEqual, getOutermostChildrenEdgeMarginSum } from './utils';
 
 export default function Slider( container: HTMLElement, options : SliderOptions, plugins? : SliderPlugin[] ) {
 	let slider: Slider;
@@ -94,7 +94,7 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		// any scroll
 		slider.container.addEventListener('scroll', () => {
 			const newScrollLeft = slider.container.scrollLeft;
-			if (scrollLeft !== newScrollLeft) {
+			if ( Math.floor( scrollLeft ) !== Math.floor( newScrollLeft ) ) {
 				if (!isScrolling) {
 					isScrolling = true;
 					slider.emit('scrollStart');
@@ -116,7 +116,7 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		// user initted scroll (touchmove, mouse wheel, etc.)
 		const nativeScrollHandler = () => {
 			const newScrollLeft = slider.container.scrollLeft;
-			if (nativeScrollLeft !== newScrollLeft && !isProgrammaticScrolling) {
+			if ( Math.floor( nativeScrollLeft ) !== Math.floor( newScrollLeft ) && ! isProgrammaticScrolling ) {
 				if (!isUserScrolling) {
 					slider.emit('nativeScrollStart');
 					isUserScrolling = true;
@@ -145,7 +145,7 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 
 		slider.container.addEventListener('scroll', () => {
 			const newScrollLeft = slider.container.scrollLeft;
-			if (programmaticScrollLeft !== newScrollLeft && !isUserScrolling && isProgrammaticScrolling) {
+			if ( Math.floor( programmaticScrollLeft ) !== Math.floor( newScrollLeft ) && !isUserScrolling && isProgrammaticScrolling) {
 				programmaticScrollLeft = newScrollLeft;
 				clearTimeout(programmaticScrollTimeout);
 				programmaticScrollTimeout = setTimeout(() => {
@@ -218,11 +218,11 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		const slideStart = slideRect.left - sliderRect.left + scrollLeft;
 		const slideEnd = slideStart + slideRect.width;
 		let scrollTarget = null;
-		if (slideStart < scrollLeft) {
+		if ( Math.floor( slideStart ) < Math.floor( scrollLeft ) ) {
 			scrollTarget = slideStart;
-		} else if (slideEnd > scrollLeft + containerWidth) {
+		} else if ( Math.floor( slideEnd ) > Math.floor( scrollLeft ) + Math.floor( containerWidth ) ) {
 			scrollTarget = slideEnd - containerWidth;
-		} else if (slideStart === 0) {
+		} else if ( Math.floor( slideStart ) === 0) {
 			scrollTarget = 0;
 		} else {
 			scrollTarget = slideStart;
@@ -240,24 +240,34 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		const scrollLeft = slider.container.scrollLeft;
 		const slides = slider.slides;
 		let activeSlideIdx = 0;
+		let scrolledPastLastSlide = false;
 
 		for (let i = 0; i < slides.length; i++) {
 			const slideRect = slides[i].getBoundingClientRect();
 			const slideStart = slideRect.left - sliderRect.left + scrollLeft + getGapSize();
 
-			if (slideStart > scrollLeft) {
+			if ( Math.floor( slideStart ) >= Math.floor( scrollLeft ) ) {
 				activeSlideIdx = i;
 				break;
 			}
+			if ( i === slides.length - 1 ) {
+				scrolledPastLastSlide = true;
+			}
+		}
+
+		if ( scrolledPastLastSlide ) {
+			activeSlideIdx = slides.length - 1;
 		}
 
 		const oldActiveSlideIdx = slider.activeSlideIdx;
 		slider.activeSlideIdx = activeSlideIdx;
+
 		if (oldActiveSlideIdx !== activeSlideIdx) {
 			slider.emit('activeSlideChanged');
 		}
 	}
 
+
 	function moveToSlide( idx: number ) {
 		const slide = slider.slides[idx];
 		if (slide) {
@@ -265,12 +275,20 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		}
 	};
 
+	function getInclusiveScrollWidth() : number {
+		return slider.container.scrollWidth + getOutermostChildrenEdgeMarginSum(slider.container);
+	};
+
+	function getInclusiveClientWidth() : number {
+		return slider.container.clientWidth + getOutermostChildrenEdgeMarginSum(slider.container);
+	}
+
 	function getGapSize() : number {
 		let gapSize = 0;
 		if (slider.slides.length > 1) {
 			const firstSlideRect = slider.slides[0].getBoundingClientRect();
 			const secondSlideRect = slider.slides[1].getBoundingClientRect();
-			gapSize = secondSlideRect.left - firstSlideRect.right;
+			gapSize = Math.floor( secondSlideRect.left - firstSlideRect.right );
 		}
 		return gapSize;
 	};
@@ -281,7 +299,7 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		if (fullWidthOffset) {
 			offset = parseInt(fullWidthOffset);
 		}
-		return offset;
+		return Math.floor( offset );
 	};
 
 	function moveToDirection(direction = "prev") {
@@ -293,16 +311,16 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		if (direction === 'prev') {
 			targetScrollPosition = Math.max(0, scrollLeft - slider.container.offsetWidth);
 		} else if (direction === 'next') {
-			targetScrollPosition = Math.min(slider.container.scrollWidth, scrollLeft + slider.container.offsetWidth);
+			targetScrollPosition = Math.min(slider.getInclusiveScrollWidth(), scrollLeft + slider.container.offsetWidth);
 		}
 		if (scrollStrategy === 'fullSlide') {
-			let fullSldeTargetScrollPosition = null;
+			let fullSlideTargetScrollPosition = null;
 
 			// extend targetScrollPosition to include gap
 			if (direction === 'prev') {
-				fullSldeTargetScrollPosition = Math.max(0, targetScrollPosition - getGapSize());
+				fullSlideTargetScrollPosition = Math.max(0, targetScrollPosition - getGapSize());
 			} else {
-				fullSldeTargetScrollPosition = Math.min(slider.container.scrollWidth, targetScrollPosition + getGapSize());
+				fullSlideTargetScrollPosition = Math.min(slider.getInclusiveScrollWidth(), targetScrollPosition + getGapSize());
 			}
 
 			if (direction === 'next') {
@@ -311,42 +329,50 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 					const slideRect = slide.getBoundingClientRect();
 					const slideStart = slideRect.left - sliderRect.left + scrollLeft;
 					const slideEnd = slideStart + slideRect.width;
-					if (slideStart < targetScrollPosition && slideEnd > targetScrollPosition) {
-						fullSldeTargetScrollPosition = slideStart;
+					if ( Math.floor( slideStart ) < Math.floor( targetScrollPosition ) && Math.floor( slideEnd ) > Math.floor( targetScrollPosition ) ) {
+						fullSlideTargetScrollPosition = slideStart;
 						partialSlideFound = true;
 						break;
 					}
 				}
-				if (!partialSlideFound) {
-					fullSldeTargetScrollPosition = Math.min(targetScrollPosition, slider.container.scrollWidth - slider.container.offsetWidth);
+				if ( ! partialSlideFound ) {
+					fullSlideTargetScrollPosition = Math.min(targetScrollPosition, slider.getInclusiveScrollWidth() - slider.container.offsetWidth);
 				}
-				if (fullSldeTargetScrollPosition && fullSldeTargetScrollPosition > scrollLeft) {
-					targetScrollPosition = fullSldeTargetScrollPosition;
+				if ( fullSlideTargetScrollPosition ) {
+					if ( Math.floor( fullSlideTargetScrollPosition ) > Math.floor( scrollLeft ) ) {
+						// make sure fullSlideTargetScrollPosition is possible considering the container width
+						const maxScrollPosition = Math.floor( slider.getInclusiveScrollWidth() ) - Math.floor( containerWidth );
+						targetScrollPosition = Math.min( fullSlideTargetScrollPosition, maxScrollPosition );
+					} else {
+						// cannot snap to slide, move one page worth of distance
+						targetScrollPosition = Math.min(slider.getInclusiveScrollWidth(), scrollLeft + containerWidth);
+					}
 				}
+
 			} else {
 				let partialSlideFound = false;
 				for (let slide of slider.slides) {
 					const slideRect = slide.getBoundingClientRect();
 					const slideStart = slideRect.left - sliderRect.left + scrollLeft;
 					const slideEnd = slideStart + slideRect.width;
-					if (slideStart < scrollLeft && slideEnd > scrollLeft) {
-						fullSldeTargetScrollPosition = slideEnd - containerWidth;
+					if ( Math.floor( slideStart ) < Math.floor( scrollLeft ) && Math.floor( slideEnd ) > Math.floor( scrollLeft ) ) {
+						fullSlideTargetScrollPosition = slideEnd - containerWidth;
 						partialSlideFound = true;
 						break;
 					}
 				}
-				if (!partialSlideFound) {
-					fullSldeTargetScrollPosition = Math.max(0, scrollLeft - containerWidth);
+				if ( ! partialSlideFound ) {
+					fullSlideTargetScrollPosition = Math.max(0, scrollLeft - containerWidth);
 				}
-				if (fullSldeTargetScrollPosition && fullSldeTargetScrollPosition < scrollLeft) {
-					targetScrollPosition = fullSldeTargetScrollPosition;
+				if ( fullSlideTargetScrollPosition && Math.floor( fullSlideTargetScrollPosition ) < Math.floor( scrollLeft ) ) {
+					targetScrollPosition = fullSlideTargetScrollPosition;
 				}
 			}
 		}
 
 		// add left offset
 		const offsettedTargetScrollPosition = targetScrollPosition - getLeftOffset();
-		if (offsettedTargetScrollPosition >= 0) {
+		if ( Math.floor( offsettedTargetScrollPosition ) >= 0) {
 			targetScrollPosition = offsettedTargetScrollPosition;
 		}
 
@@ -380,11 +406,11 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		if (isMovingForward) {
 			for (let i = 0; i < slideReference.length; i++) {
 				const item = slideReference[i];
-				if ( i === 0 && scrollPosition <= item.trigger ) {
+				if ( i === 0 && Math.floor( scrollPosition ) <= Math.floor( item.trigger ) ) {
 					snapTarget = 0;
 					break;
 				}
-				if (slider.container.scrollLeft <= item.trigger) {
+				if ( Math.floor( slider.container.scrollLeft ) <= Math.floor( item.trigger ) ) {
 					snapTarget = item.start;
 					break;
 				}
@@ -392,11 +418,11 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		} else {
 			for (let i = slideReference.length - 1; i >= 0; i--) {
 				const item = slideReference[i];
-				if ( i === slideReference.length - 1 && scrollPosition >= item.trigger ) {
+				if ( i === slideReference.length - 1 && Math.floor( scrollPosition ) >= Math.floor( item.trigger ) ) {
 					snapTarget = item.start;
 					break;
 				}
-				if (slider.container.scrollLeft >= item.trigger) {
+				if ( Math.floor( slider.container.scrollLeft ) >= Math.floor( item.trigger ) ) {
 					snapTarget = item.start;
 					break;
 				}
@@ -404,7 +430,7 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		}
 		if ( snapTarget !== null ) {
 			const offsettedSnapTarget = snapTarget - getLeftOffset();
-			if (offsettedSnapTarget >= 0) {
+			if ( Math.floor( offsettedSnapTarget ) >= 0 ) {
 				snapTarget = offsettedSnapTarget;
 			}
 
@@ -440,6 +466,8 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		moveToDirection,
 		moveToSlide,
 		snapToClosestSlide,
+		getInclusiveScrollWidth,
+		getInclusiveClientWidth,
 		on,
 		options,
 	};

package/src/core/types.ts

@@ -11,6 +11,8 @@ export type Slider<O = {}, C = {}, H extends string = string> = {
 	moveToSlide: (
 		index: number
 	) => void
+	getInclusiveScrollWidth: () => number
+	getInclusiveClientWidth: () => number
 	on: (
 		name: H | SliderHooks,
 		cb: (props: Slider<O, C, H>) => void

package/src/core/utils.ts

@@ -21,4 +21,22 @@ function objectsAreEqual( obj1: any, obj2: any ) {
 	return true;
 }
 
-export { generateId, objectsAreEqual };
+function getOutermostChildrenEdgeMarginSum( el: HTMLElement ): number {
+	if (el.children.length === 0) {
+		return 0;
+	}
+
+	// get the first child and its left margin
+	const firstChild = el.children[0];
+	const firstChildStyle = getComputedStyle(firstChild);
+	const firstChildMarginLeft = parseFloat(firstChildStyle.marginLeft);
+
+	// Get the last child and its right margin
+	const lastChild = el.children[el.children.length - 1];
+	const lastChildStyle = getComputedStyle(lastChild);
+	const lastChildMarginRight = parseFloat(lastChildStyle.marginRight);
+
+	return firstChildMarginLeft + lastChildMarginRight;
+}
+
+export { generateId, objectsAreEqual, getOutermostChildrenEdgeMarginSum };

package/src/plugins/arrows/index.ts

@@ -66,7 +66,11 @@ export default function ArrowsPlugin( args: { [key: string]: any } ) {
 		prev.setAttribute( 'aria-controls', slider.container.getAttribute( 'id' ) ?? '');
 		prev.setAttribute( 'data-type', 'prev' );
 		prev.innerHTML = options.icons.prev;
-		prev.addEventListener( 'click', () => slider.moveToDirection( 'prev' ) );
+		prev.addEventListener( 'click', () => {
+			if ( prev.getAttribute('data-has-content') === 'true' ) {
+				slider.moveToDirection( 'prev' );
+			}
+		} );
 
 		const next = document.createElement( 'button' );
 		next.setAttribute( 'class', options.classNames.nextButton );
@@ -75,7 +79,11 @@ export default function ArrowsPlugin( args: { [key: string]: any } ) {
 		next.setAttribute( 'aria-controls', slider.container.getAttribute( 'id' ) ?? '');
 		next.setAttribute( 'data-type', 'next' );
 		next.innerHTML = options.icons.next;
-		next.addEventListener( 'click', () => slider.moveToDirection( 'next' ) );
+		next.addEventListener( 'click', () => {
+			if ( next.getAttribute('data-has-content') === 'true' ) {
+				slider.moveToDirection( 'next' );
+			}
+		} );
 
 		// insert buttons to the nav
 		nav.appendChild( prev );
@@ -83,15 +91,15 @@ export default function ArrowsPlugin( args: { [key: string]: any } ) {
 
 		const update = () => {
 			const scrollLeft = slider.container.scrollLeft;
-			const scrollWidth = slider.container.scrollWidth;
-			const clientWidth = slider.container.clientWidth;
-			const buffer      = 1;
-			if ( scrollLeft === 0 ) {
+			const scrollWidth = slider.getInclusiveScrollWidth();
+			const clientWidth = slider.getInclusiveClientWidth();
+			const buffer      = 0;
+			if ( Math.floor( scrollLeft ) === 0 ) {
 				prev.setAttribute( 'data-has-content', 'false' );
 			} else {
 				prev.setAttribute( 'data-has-content', 'true' );
 			}
-			if ( scrollLeft + clientWidth >= scrollWidth - buffer ) {
+			if ( Math.floor( scrollLeft + clientWidth ) >= Math.floor( scrollWidth ) ) {
 				next.setAttribute( 'data-has-content', 'false' );
 			} else {
 				next.setAttribute( 'data-has-content', 'true' );
@@ -110,7 +118,7 @@ export default function ArrowsPlugin( args: { [key: string]: any } ) {
 		}
 
 		update();
-		slider.on( 'scroll', update );
+		slider.on( 'scrollEnd', update );
 		slider.on( 'contentsChanged', update );
 		slider.on( 'containerSizeChanged', update );
 	};

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

@@ -59,7 +59,7 @@ export default function DragScrollingPlugin( args: { [key: string]: any } ) {
 			const walk = (x - startX);
 			const newScrollLeft = scrollLeft - walk;
 			mayNeedToSnap = true;
-			if ( slider.container.scrollLeft !== newScrollLeft ) {
+			if ( Math.floor( slider.container.scrollLeft ) !== Math.floor( newScrollLeft ) ) {
 				isMovingForward = slider.container.scrollLeft < newScrollLeft;
 			}
 			slider.container.scrollLeft = newScrollLeft;

package/src/plugins/fade/index.ts

@@ -53,21 +53,21 @@ export default function FadePlugin( args: { [key: string]: any } ) {
 
 		const fadeAtStartOpacity = () => {
 			const position = slider.container.scrollLeft;
-			if ( position <= fadeItemStart.offsetWidth ) {
+			if ( Math.floor( position ) <= Math.floor( 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);
+			return Math.floor( slider.container.scrollLeft ) < Math.floor( slider.getInclusiveScrollWidth() - slider.getInclusiveClientWidth() - fadeItemEnd.offsetWidth );
 		}
 
 		const fadeAtEndOpacity = () => {
 			const position = slider.container.scrollLeft;
-			const maxPosition = slider.container.scrollWidth - slider.container.clientWidth;
+			const maxPosition = slider.getInclusiveScrollWidth() - slider.getInclusiveClientWidth();
 			const maxFadePosition = maxPosition - fadeItemEnd.offsetWidth;
-			if ( position >= maxFadePosition ) {
+			if ( Math.floor( position ) >= Math.floor( maxFadePosition ) ) {
 				return ( ( maxFadePosition - position ) / Math.max(fadeItemEnd.offsetWidth, 1) ) + 1;
 			}
 			return 1;
@@ -97,6 +97,5 @@ export default function FadePlugin( args: { [key: string]: any } ) {
 		};
 		slider.on('scroll', debouncedUpdate);
 
-
 	};
 }

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

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