@evermade/overflow-slider 3.1.0 → 3.2.1

package/src/core/slider.ts

@@ -1,10 +1,10 @@
-import { Slider, SliderOptions, SliderPlugin } from './types';
+import { Slider, SliderOptions, SliderPlugin, SliderCallback } from './types';
 import details from './details';
 import { generateId, objectsAreEqual, getOutermostChildrenEdgeMarginSum } from './utils';
 
 export default function Slider( container: HTMLElement, options : SliderOptions, plugins? : SliderPlugin[] ) {
 	let slider: Slider;
-	let subs: { [key: string]: any[] } = {};
+	let subs: { [key: string]: SliderCallback[] } = {};
 
 	function init() {
 		slider.container = container;
@@ -91,7 +91,7 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		let isUserScrolling = false;
 		let isProgrammaticScrolling = false;
 
-		// any scroll
+		// all types of scroll
 		slider.container.addEventListener('scroll', () => {
 			const newScrollLeft = slider.container.scrollLeft;
 			if ( Math.floor( scrollLeft ) !== Math.floor( newScrollLeft ) ) {
@@ -207,6 +207,9 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 
 	function setDataAttributes() {
 		slider.container.setAttribute('data-has-overflow', slider.details.hasOverflow ? 'true' : 'false');
+		if ( slider.options.rtl ) {
+			slider.container.setAttribute('dir', 'rtl');
+		}
 	}
 
 	function ensureSlideIsInView( slide: HTMLElement, scrollBehavior: null|ScrollBehavior = null) {
@@ -237,24 +240,51 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 
 	function setActiveSlideIdx() {
 		const sliderRect = slider.container.getBoundingClientRect();
-		const scrollLeft = slider.container.scrollLeft;
+		const scrollLeft = slider.getScrollLeft();
 		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 ( Math.floor( slideStart ) >= Math.floor( scrollLeft ) ) {
-				activeSlideIdx = i;
-				break;
+		if (slider.options.rtl) {
+			const scrolledDistance = slider.getInclusiveScrollWidth() - scrollLeft - slider.getInclusiveClientWidth();
+			const slidePositions = [];
+			for (let i = slides.length - 1; i >= 0; i--) {
+				const slideRect = slides[i].getBoundingClientRect();
+				const slideEnd = Math.abs(slideRect.left) - Math.abs(sliderRect.left) + scrolledDistance;
+				slidePositions.push({
+					slide: slides[i],
+					slideEnd: slideEnd,
+				});
+			}
+			let closestSlide = null;
+			let closestDistance = null;
+			for (let i = 0; i < slidePositions.length; i++) {
+				const distance = Math.abs(slidePositions[i].slideEnd - scrolledDistance);
+				if (closestDistance === null || distance < closestDistance) {
+					closestDistance = distance;
+					closestSlide = slidePositions[i].slide;
+				}
 			}
-			if ( i === slides.length - 1 ) {
-				scrolledPastLastSlide = true;
+			if (closestSlide) {
+				activeSlideIdx = slides.indexOf(closestSlide);
+			} else {
+				activeSlideIdx = slides.length - 1;
+			}
+		} else {
+			for (let i = 0; i < slides.length; i++) {
+				const slideRect = slides[i].getBoundingClientRect();
+				const slideStart = slideRect.left - sliderRect.left + scrollLeft + getGapSize();
+						if (Math.floor(slideStart) >= Math.floor(scrollLeft)) {
+								activeSlideIdx = i;
+								break;
+						}
+				if ( i === slides.length - 1 ) {
+					scrolledPastLastSlide = true;
+				}
 			}
 		}
 
+
 		if ( scrolledPastLastSlide ) {
 			activeSlideIdx = slides.length - 1;
 		}
@@ -262,6 +292,8 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		const oldActiveSlideIdx = slider.activeSlideIdx;
 		slider.activeSlideIdx = activeSlideIdx;
 
+		// console.log('activeSlideIdx', activeSlideIdx);
+
 		if (oldActiveSlideIdx !== activeSlideIdx) {
 			slider.emit('activeSlideChanged');
 		}
@@ -283,12 +315,20 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		return slider.container.clientWidth + getOutermostChildrenEdgeMarginSum(slider.container);
 	}
 
+	function getScrollLeft() : number {
+		return slider.options.rtl ? Math.abs(slider.container.scrollLeft) : slider.container.scrollLeft;
+	};
+
+	function setScrollLeft(value: number) : void {
+		slider.container.scrollLeft = slider.options.rtl ? -value : value;
+	};
+
 	function getGapSize() : number {
 		let gapSize = 0;
 		if (slider.slides.length > 1) {
 			const firstSlideRect = slider.slides[0].getBoundingClientRect();
 			const secondSlideRect = slider.slides[1].getBoundingClientRect();
-			gapSize = Math.floor( secondSlideRect.left - firstSlideRect.right );
+			gapSize = slider.options.rtl ? Math.abs( Math.floor( secondSlideRect.right - firstSlideRect.left ) ) : Math.floor( secondSlideRect.left - firstSlideRect.right );
 		}
 		return gapSize;
 	};
@@ -308,22 +348,25 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		const sliderRect = slider.container.getBoundingClientRect();
 		const containerWidth = slider.container.offsetWidth;
 		let targetScrollPosition = scrollLeft;
-		if (direction === 'prev') {
+
+		const realDirection = slider.options.rtl ? (direction === 'prev' ? 'next' : 'prev') : direction;
+
+		if (realDirection === 'prev') {
 			targetScrollPosition = Math.max(0, scrollLeft - slider.container.offsetWidth);
-		} else if (direction === 'next') {
+		} else if (realDirection === 'next') {
 			targetScrollPosition = Math.min(slider.getInclusiveScrollWidth(), scrollLeft + slider.container.offsetWidth);
 		}
 		if (scrollStrategy === 'fullSlide') {
 			let fullSlideTargetScrollPosition = null;
 
 			// extend targetScrollPosition to include gap
-			if (direction === 'prev') {
+			if (realDirection === 'prev') {
 				fullSlideTargetScrollPosition = Math.max(0, targetScrollPosition - getGapSize());
 			} else {
 				fullSlideTargetScrollPosition = Math.min(slider.getInclusiveScrollWidth(), targetScrollPosition + getGapSize());
 			}
 
-			if (direction === 'next') {
+			if (realDirection === 'next') {
 				let partialSlideFound = false;
 				for (let slide of slider.slides) {
 					const slideRect = slide.getBoundingClientRect();
@@ -383,12 +426,12 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 	};
 
 	function snapToClosestSlide(direction = "prev") {
-		const isMovingForward = direction === 'next';
+		const isMovingForward = slider.options.rtl ? direction === 'prev' : direction === 'next';
 		const slideReference = [];
 		for (let i = 0; i < slider.slides.length; i++) {
 			const slide = slider.slides[i];
 			const slideWidth = slide.offsetWidth;
-			const slideStart = slide.offsetLeft;
+			const slideStart = slider.options.rtl ? Math.abs( slide.offsetLeft + slideWidth - slider.details.containerWidth ) : slide.offsetLeft;
 			const slideEnd = slideStart + slideWidth;
 			const slideMiddle = slideStart + slideWidth / 2;
 			const trigger = Math.min(slideMiddle, slideStart + slider.options.emulateScrollSnapMaxThreshold);
@@ -399,10 +442,14 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 				width: slideWidth,
 				trigger: trigger,
 				slide: slide,
+				// debug
+				offSetleft: slide.offsetLeft,
+				rect: slide.getBoundingClientRect(),
 			});
 		}
+		console.log('slideReference', slideReference);
 		let snapTarget = null;
-		const scrollPosition = slider.container.scrollLeft;
+		const scrollPosition = getScrollLeft();
 		if (isMovingForward) {
 			for (let i = 0; i < slideReference.length; i++) {
 				const item = slideReference[i];
@@ -410,7 +457,7 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 					snapTarget = 0;
 					break;
 				}
-				if ( Math.floor( slider.container.scrollLeft ) <= Math.floor( item.trigger ) ) {
+				if ( Math.floor( getScrollLeft() ) <= Math.floor( item.trigger ) ) {
 					snapTarget = item.start;
 					break;
 				}
@@ -422,7 +469,7 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 					snapTarget = item.start;
 					break;
 				}
-				if ( Math.floor( slider.container.scrollLeft ) >= Math.floor( item.trigger ) ) {
+				if ( Math.floor( getScrollLeft() ) >= Math.floor( item.trigger ) ) {
 					snapTarget = item.start;
 					break;
 				}
@@ -435,14 +482,15 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 			}
 
 			const scrollBehavior = slider.options.scrollBehavior || 'smooth';
+
 			slider.container.scrollTo({
-				left: snapTarget,
+				left: slider.options.rtl ? -snapTarget : snapTarget,
 				behavior: scrollBehavior as ScrollBehavior
 			});
 		}
 	};
 
-	function on(name: string, cb: any) {
+	function on(name: string, cb: SliderCallback) {
 		if (!subs[name]) {
 			subs[name] = [];
 		}
@@ -452,12 +500,14 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 	function emit(name: string) {
 		if (subs && subs[name]) {
 			subs[name].forEach(cb => {
-					cb(slider);
+				cb(slider);
 			});
 		}
+
 		const optionCallBack = slider?.options?.[name];
+		// Type guard to check if the option callback is a function
 		if (typeof optionCallBack === 'function') {
-				optionCallBack(slider);
+			(optionCallBack as SliderCallback)(slider); // Type assertion here
 		}
 	};
 
@@ -468,6 +518,8 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		snapToClosestSlide,
 		getInclusiveScrollWidth,
 		getInclusiveClientWidth,
+		getScrollLeft,
+		setScrollLeft,
 		on,
 		options,
 	};

package/src/core/types.ts

@@ -13,22 +13,29 @@ export type Slider<O = {}, C = {}, H extends string = string> = {
 	) => void
 	getInclusiveScrollWidth: () => number
 	getInclusiveClientWidth: () => number
+	getScrollLeft: () => number
+	setScrollLeft: (value: number) => void
 	on: (
 		name: H | SliderHooks,
-		cb: (props: Slider<O, C, H>) => void
+		cb: SliderCallback
 	) => void
 	options: SliderOptions,
 	details: SliderDetails,
 	activeSlideIdx: number,
 } & C;
 
+export type SliderCallback<O = {}, C = {}, H extends string = string> = (
+	props: Slider<O, C, H>
+) => void;
+
 export type SliderOptions = {
 	scrollBehavior: string;
 	scrollStrategy: string;
 	slidesSelector: string;
 	emulateScrollSnap: boolean;
 	emulateScrollSnapMaxThreshold: number;
-	[key: string]: any;
+	rtl: boolean;
+	[key: string]: unknown;
 }
 
 export type SliderDetails = {
@@ -62,7 +69,7 @@ export type HOOK_CONTENTS_CHANGED = 'contentsChanged';
 export type HOOK_CONTAINER_SIZE_CHANGED = 'containerSizeChanged';
 export type HOOK_ACTIVE_SLIDE_CHANGED = 'activeSlideChanged';
 
-// any type of scroll
+// all types of scroll
 export type HOOK_SCROLL_START = 'scrollStart';
 export type HOOK_SCROLL = 'scroll';
 export type HOOK_SCROLL_END = 'scrollEnd';

package/src/core/utils.ts

@@ -7,17 +7,21 @@ function generateId( prefix : string, i = 1 ): string {
 	return id;
 }
 
-function objectsAreEqual( obj1: any, obj2: any ) {
+function objectsAreEqual(obj1: Record<string, unknown>, obj2: Record<string, unknown>): boolean {
 	const keys1 = Object.keys(obj1);
 	const keys2 = Object.keys(obj2);
+
 	if (keys1.length !== keys2.length) {
-			return false;
+		return false;
 	}
+
 	for (let key of keys1) {
-			if (obj2.hasOwnProperty(key) === false || obj1[key] !== obj2[key]) {
-					return false;
-			}
+		// Use `Object.prototype.hasOwnProperty.call` for better safety
+		if (!Object.prototype.hasOwnProperty.call(obj2, key) || obj1[key] !== obj2[key]) {
+			return false;
+		}
 	}
+
 	return true;
 }
 

package/src/plugins/arrows/index.ts

@@ -35,7 +35,7 @@ export type ArrowsOptions = {
 	containerNext: HTMLElement | null,
 };
 
-export default function ArrowsPlugin( args: { [key: string]: any } ) {
+export default function ArrowsPlugin( args: { [key: string]: unknown } ) {
 	return ( slider: Slider ) => {
 
 		const options = <ArrowsOptions>{
@@ -65,7 +65,7 @@ export default function ArrowsPlugin( args: { [key: string]: any } ) {
 		prev.setAttribute( 'aria-label', options.texts.buttonPrevious );
 		prev.setAttribute( 'aria-controls', slider.container.getAttribute( 'id' ) ?? '');
 		prev.setAttribute( 'data-type', 'prev' );
-		prev.innerHTML = options.icons.prev;
+		prev.innerHTML = slider.options.rtl ? options.icons.next : options.icons.prev;
 		prev.addEventListener( 'click', () => {
 			if ( prev.getAttribute('data-has-content') === 'true' ) {
 				slider.moveToDirection( 'prev' );
@@ -78,7 +78,7 @@ export default function ArrowsPlugin( args: { [key: string]: any } ) {
 		next.setAttribute( 'aria-label', options.texts.buttonNext );
 		next.setAttribute( 'aria-controls', slider.container.getAttribute( 'id' ) ?? '');
 		next.setAttribute( 'data-type', 'next' );
-		next.innerHTML = options.icons.next;
+		next.innerHTML = slider.options.rtl ? options.icons.prev : options.icons.next;
 		next.addEventListener( 'click', () => {
 			if ( next.getAttribute('data-has-content') === 'true' ) {
 				slider.moveToDirection( 'next' );
@@ -90,20 +90,22 @@ export default function ArrowsPlugin( args: { [key: string]: any } ) {
 		nav.appendChild( next );
 
 		const update = () => {
-			const scrollLeft = slider.container.scrollLeft;
+			const scrollLeft = slider.getScrollLeft();
 			const scrollWidth = slider.getInclusiveScrollWidth();
 			const clientWidth = slider.getInclusiveClientWidth();
-			const buffer      = 0;
+			const buffer      = 1;
 			if ( Math.floor( scrollLeft ) === 0 ) {
 				prev.setAttribute( 'data-has-content', 'false' );
 			} else {
 				prev.setAttribute( 'data-has-content', 'true' );
 			}
-			if ( Math.floor( scrollLeft + clientWidth ) >= Math.floor( scrollWidth ) ) {
+			const maxWidthDifference = Math.abs( Math.floor( scrollLeft + clientWidth ) - Math.floor( scrollWidth ) );
+			if ( maxWidthDifference <= buffer ) {
 				next.setAttribute( 'data-has-content', 'false' );
 			} else {
 				next.setAttribute( 'data-has-content', 'true' );
 			}
+			console.log( 'next', scrollLeft + clientWidth, scrollWidth );
 		};
 
 		if ( options.containerNext && options.containerPrev ) {

package/src/plugins/dots/index.ts

@@ -20,7 +20,7 @@ const DEFAULT_CLASS_NAMES = {
 	dotsItem: 'overflow-slider__dot-item',
 };
 
-export default function DotsPlugin( args: { [key: string]: any } ) {
+export default function DotsPlugin( args: { [key: string]: unknown } ) {
 	return ( slider: Slider ) => {
 		const options = <DotsOptions>{
 			texts: {
@@ -105,10 +105,6 @@ export default function DotsPlugin( args: { [key: string]: any } ) {
 		};
 
 		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 );
 		};
 

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

@@ -6,7 +6,7 @@ export type DragScrollingOptions = {
 	draggedDistanceThatPreventsClick: number,
 };
 
-export default function DragScrollingPlugin( args: { [key: string]: any } ) {
+export default function DragScrollingPlugin( args: { [key: string]: unknown } ) {
 	const options = <DragScrollingOptions>{
 		draggedDistanceThatPreventsClick: args?.draggedDistanceThatPreventsClick ?? DEFAULT_DRAGGED_DISTANCE_THAT_PREVENTS_CLICK,
 	};

package/src/plugins/fade/index.ts

@@ -11,7 +11,7 @@ export type FadeOptions = {
 	containerEnd: HTMLElement | null,
 };
 
-export default function FadePlugin( args: { [key: string]: any } ) {
+export default function FadePlugin( args: { [key: string]: unknown } ) {
 	return ( slider: Slider ) => {
 
 		const options = <FadeOptions>{
@@ -48,11 +48,11 @@ export default function FadePlugin( args: { [key: string]: any } ) {
 		}
 
 		const hasFadeAtStart = () => {
-			return slider.container.scrollLeft > fadeItemStart.offsetWidth;
+			return slider.getScrollLeft() > fadeItemStart.offsetWidth;
 		}
 
 		const fadeAtStartOpacity = () => {
-			const position = slider.container.scrollLeft;
+			const position = slider.getScrollLeft();
 			if ( Math.floor( position ) <= Math.floor( fadeItemStart.offsetWidth ) ) {
 				return position / Math.max(fadeItemStart.offsetWidth, 1);
 			}
@@ -60,11 +60,11 @@ export default function FadePlugin( args: { [key: string]: any } ) {
 		}
 
 		const hasFadeAtEnd = () => {
-			return Math.floor( slider.container.scrollLeft ) < Math.floor( slider.getInclusiveScrollWidth() - slider.getInclusiveClientWidth() - fadeItemEnd.offsetWidth );
+			return Math.floor( slider.getScrollLeft() ) < Math.floor( slider.getInclusiveScrollWidth() - slider.getInclusiveClientWidth() - fadeItemEnd.offsetWidth );
 		}
 
 		const fadeAtEndOpacity = () => {
-			const position = slider.container.scrollLeft;
+			const position = slider.getScrollLeft();
 			const maxPosition = slider.getInclusiveScrollWidth() - slider.getInclusiveClientWidth();
 			const maxFadePosition = maxPosition - fadeItemEnd.offsetWidth;
 			if ( Math.floor( position ) >= Math.floor( maxFadePosition ) ) {

package/src/plugins/fade/styles.scss

@@ -19,9 +19,19 @@
 .overflow-slider-fade--start {
 	left: 0;
 	background: linear-gradient(to right, var(--overflow-slider-fade-color) 0%, transparent 100%);
+	[dir="rtl"] & {
+		left: auto;
+		right: 0;
+		background: linear-gradient(to left, 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%);
+	[dir="rtl"] & {
+		right: auto;
+		left: 0;
+		background: linear-gradient(to right, var(--overflow-slider-fade-color) 0%, transparent 100%);
+	}
 }

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

@@ -8,7 +8,7 @@ export type FullWidthOptions = {
 	addMarginAfter: boolean,
 };
 
-export default function FullWidthPlugin( args: { [key: string]: any } ) {
+export default function FullWidthPlugin( args: { [key: string]: unknown } ) {
 	return ( slider: Slider ) => {
 
 		const options = <FullWidthOptions>{
@@ -29,16 +29,22 @@ export default function FullWidthPlugin( args: { [key: string]: any } ) {
 
 			const marginAmount = Math.floor((window.innerWidth - options.targetWidth(slider)) / 2);
 			if ( options.addMarginBefore ) {
-				firstSlide.style.marginLeft = `${marginAmount}px`;
+				firstSlide.style.marginInlineStart = `${marginAmount}px`;
 			}
 			if ( options.addMarginAfter ) {
-				lastSlide.style.marginRight = `${marginAmount}px`;
+				lastSlide.style.marginInlineEnd = `${marginAmount}px`;
 			}
 			slider.container.setAttribute( 'data-full-width-offset', marginAmount.toString() );
+			setCSS();
+		};
+
+		const setCSS = () => {
+			slider.container.style.setProperty('--slider-container-target-width', `${options.targetWidth(slider)}px`);
 		};
 
 		update();
 		slider.on( 'contentsChanged', update );
 		slider.on( 'containerSizeChanged', update );
+		window.addEventListener( 'resize', setCSS );
 	};
 }