@evermade/overflow-slider 4.1.0 → 4.2.1

package/src/plugins/dots/index.ts

@@ -1,6 +1,7 @@
 import { Slider, DeepPartial } from '../../core/types';
 
 export type DotsOptions = {
+	type: 'view' | 'slide';
 	texts: {
 		dotDescription: string;
 	},
@@ -23,6 +24,7 @@ const DEFAULT_CLASS_NAMES = {
 export default function DotsPlugin( args?: DeepPartial<DotsOptions> ) {
 	return ( slider: Slider ) => {
 		const options = <DotsOptions>{
+			type: args?.type ?? 'slide',
 			texts: {
 				...DEFAULT_TEXTS,
 				...args?.texts || []
@@ -43,22 +45,24 @@ export default function DotsPlugin( args?: DeepPartial<DotsOptions> ) {
 			dots.setAttribute( 'data-has-content', slider.details.hasOverflow.toString() );
 			dots.innerHTML = '';
 
+			console.log('buildDots');
+
 			const dotsList = document.createElement( 'ul' );
 
-			const pages = slider.details.slideCount;
-			const currentItem = slider.activeSlideIdx;
+			const count = options.type === 'view' ? slider.details.amountOfPages : slider.details.slideCount;
+			const currentIndex = options.type === 'view' ? slider.details.currentPage : slider.activeSlideIdx;
 
-			if ( pages <= 1 ) {
+			if ( count <= 1 ) {
 				return;
 			}
 
-			for ( let i = 0; i < pages; i++ ) {
+			for ( let i = 0; i < count; i++ ) {
 				const dotListItem = document.createElement( 'li' );
 				const dot = document.createElement( 'button' );
 				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 === currentItem ).toString() );
+				dot.setAttribute( 'aria-label', options.texts.dotDescription.replace( '%d', ( i + 1 ).toString() ).replace( '%d', count.toString() ) );
+				dot.setAttribute( 'aria-pressed', ( i === currentIndex ).toString() );
 				dot.setAttribute( 'data-item', ( i + 1 ).toString() );
 				dotListItem.appendChild( dot );
 				dotsList.appendChild( dotListItem );
@@ -71,23 +75,23 @@ export default function DotsPlugin( args?: DeepPartial<DotsOptions> ) {
 					}
 					const currentItem = parseInt( currentItemItem.getAttribute( 'data-item' ) ?? '1' );
 					if ( e.key === 'ArrowLeft' ) {
-						const previousPage = currentItem - 1;
-						if ( previousPage > 0 ) {
-							const matchingDot = dots.querySelector( `[data-item="${previousPage}"]` );
+						const previousIndex = currentItem - 1;
+						if ( previousIndex > 0 ) {
+							const matchingDot = dots.querySelector( `[data-item="${previousIndex}"]` );
 							if ( matchingDot ) {
 								( <HTMLElement>matchingDot ).focus();
 							}
-							activateDot( previousPage );
+							activateDot( previousIndex );
 						}
 					}
 					if ( e.key === 'ArrowRight' ) {
-						const nextPage = currentItem + 1;
-						if ( nextPage <= pages ) {
-							const matchingDot = dots.querySelector( `[data-item="${nextPage}"]` );
+						const nextIndex = currentItem + 1;
+						if ( nextIndex <= count ) {
+							const matchingDot = dots.querySelector( `[data-item="${nextIndex}"]` );
 							if ( matchingDot ) {
 								( <HTMLElement>matchingDot ).focus();
 							}
-							activateDot( nextPage );
+							activateDot( nextIndex );
 						}
 					}
 				} );
@@ -103,9 +107,27 @@ export default function DotsPlugin( args?: DeepPartial<DotsOptions> ) {
 				}
 			}
 		};
+		const activateDot = ( index: number ) => {
+			console.log('activateDot', index, 'slider.details', slider.details);
+			
+			if ( options.type === 'view' ) {
+				const count = slider.details.amountOfPages;
+				let targetPosition = slider.details.containerWidth * ( index - 1 );
+
+				// For the last page, scroll to the maximum scroll position to ensure it activates
+				if ( index === count ) {
+					const maxScroll = slider.details.scrollableAreaWidth - slider.details.containerWidth;
+					targetPosition = maxScroll;
+				}
 
-		const activateDot = ( item: number ) => {
-			slider.moveToSlide( item - 1 );
+				const scrollLeft = slider.options.rtl ? -targetPosition : targetPosition;
+				slider.container.scrollTo({
+					left: scrollLeft,
+					behavior: slider.options.scrollBehavior as ScrollBehavior
+				});
+			} else {
+				slider.moveToSlide( index - 1 );
+			}
 		};
 
 		buildDots();
@@ -119,5 +141,6 @@ export default function DotsPlugin( args?: DeepPartial<DotsOptions> ) {
 		slider.on( 'scrollEnd', buildDots );
 		slider.on( 'contentsChanged', buildDots );
 		slider.on( 'containerSizeChanged', buildDots );
+		slider.on( 'detailsChanged', buildDots );
 	};
 };

package/src/plugins/dots/styles.scss

@@ -49,7 +49,6 @@
 		position: absolute;
 	}
 	&[aria-pressed="true"],
-	&:focus,
 	&:hover {
 		background: var(--overflow-slider-dot-active-color);
 	}