@evermade/overflow-slider 1.0.0

package/src/index.ts

@@ -0,0 +1,18 @@
+import './overflow-slider.scss';
+
+import OverflowSlider from './overflow-slider';
+
+import SkipLinksPlugin from './plugins/skip-links';
+import ArrowsPlugin from './plugins/arrows';
+import ScrollIndicatorPlugin from './plugins/scroll-indicator';
+import DragScrollingPlugin from './plugins/drag-scrolling';
+import DotsPlugin from './plugins/dots';
+
+export {
+	OverflowSlider,
+	DragScrollingPlugin,
+	SkipLinksPlugin,
+	ArrowsPlugin,
+	ScrollIndicatorPlugin,
+	DotsPlugin
+};

package/src/overflow-slider.scss

@@ -0,0 +1,213 @@
+/**
+ * Overflow Slider
+ */
+
+/* --------------------------------------------------------------
+# Container
+-------------------------------------------------------------- */
+
+.overflow-slider {
+	overflow: auto;
+	width: 100%;
+	overflow: auto;
+	display: grid;
+	grid-auto-flow: column;
+	grid-template-columns: max-content;
+	max-width: max-content;
+	&::-webkit-scrollbar {
+		display: none;
+	}
+	& > * {
+		scroll-snap-align: start;
+		outline-offset: -2px;
+	}
+}
+
+/* --------------------------------------------------------------
+# ArrowsPlugin
+-------------------------------------------------------------- */
+
+:root {
+	--overflow-slider-arrows-size: 1.5rem;
+	--overflow-slider-arrows-gap: .5rem;
+	--overflow-slider-arrows-inactive-opacity: 0.5;
+}
+
+.overflow-slider__arrows {
+	display: flex;
+	gap: var(--overflow-slider-arrows-gap);
+}
+
+.overflow-slider__arrows-button {
+	display: flex;
+	align-items: center;
+	outline-offset: -2px;
+	cursor: pointer;
+	svg {
+		width: var(--overflow-slider-arrows-size);
+		height: var(--overflow-slider-arrows-size);
+
+	}
+	&[data-has-content="false"] {
+		opacity: var(--overflow-slider-arrows-inactive-opacity);
+	}
+}
+
+/* --------------------------------------------------------------
+# DotsPlugin
+-------------------------------------------------------------- */
+
+:root {
+	--overflow-slider-dots-gap: 0.5rem;
+	--overflow-slider-dot-size: 0.75rem;
+	--overflow-slider-dot-inactive-color: hsla(0, 0%, 0%, 0.1);
+	--overflow-slider-dot-active-color: hsla(0, 0%, 0%, 0.8);
+}
+
+.overflow-slider__dots {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	ul {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--overflow-slider-dots-gap);
+	}
+	li {
+		line-height: 0;
+		padding: 0;
+		margin: 0;
+	}
+}
+
+.overflow-slider__dot-item {
+	padding: 0;
+	margin: 0;
+	cursor: pointer;
+	outline-offset: 2px;
+	width: var(--overflow-slider-dot-size);
+	height: var(--overflow-slider-dot-size);
+	border-radius: 50%;
+	background: var(--overflow-slider-dot-inactive-color);
+	position: relative;
+	// increase clickable area
+	&::after {
+		content: '';
+		display: block;
+		left: calc(-1 * var(--overflow-slider-dots-gap));
+		top: calc(-1 * var(--overflow-slider-dots-gap));
+		right: calc(-1 * var(--overflow-slider-dots-gap));
+		bottom: calc(-1 * var(--overflow-slider-dots-gap));
+		position: absolute;
+	}
+	&[aria-pressed="true"],
+	&:focus,
+	&:hover {
+		background: var(--overflow-slider-dot-active-color);
+	}
+}
+
+/* --------------------------------------------------------------
+# DragScrollingPlugin
+-------------------------------------------------------------- */
+
+// nothing to style
+
+/* --------------------------------------------------------------
+# ScrollIndicatorPlugin
+-------------------------------------------------------------- */
+
+:root {
+	--overflow-slider-scroll-indicator-button-height: 4px;
+	--overflow-slider-scroll-indicator-padding: 1rem;
+	--overflow-slider-scroll-indicator-button-color: hsla(0, 0%, 0%, 0.75);
+	--overflow-slider-scroll-indicator-bar-color: hsla(0, 0%, 0%, 0.25);
+}
+
+.overflow-slider__scroll-indicator {
+	width: 100%;
+	padding-block: var(--overflow-slider-scroll-indicator-padding);
+	cursor: pointer;
+	position: relative;
+	outline: 0;
+	&[data-has-overflow="false"] {
+		display: none;
+	}
+	&:focus-visible .overflow-slider__scroll-indicator-button {
+		outline: 2px solid;
+		outline-offset: 2px;
+	}
+}
+
+.overflow-slider__scroll-indicator-bar {
+	height: 2px;
+	background: var(--overflow-slider-scroll-indicator-bar-color);
+	width: 100%;
+	border-radius: 3px;
+	position: absolute;
+	top: 50%;
+	left: 0;
+	transform: translateY(-50%);
+}
+
+.overflow-slider__scroll-indicator-button {
+	height: var(--overflow-slider-scroll-indicator-button-height);
+	background: var(--overflow-slider-scroll-indicator-button-color);
+	position: absolute;
+	top: calc(50% - calc( var( --overflow-slider-scroll-indicator-button-height ) / 2 ));
+	left: 0;
+	border-radius: 3px;
+	cursor: grab;
+	&[data-is-grabbed="true"],
+	&:hover {
+		--overflow-slider-scroll-indicator-button-height: 6px;
+	}
+	// increase clickable area to fill container in y-axis
+	&::after {
+		content: '';
+		display: block;
+		position: absolute;
+		top: calc(-1 * var(--overflow-slider-scroll-indicator-padding));
+		bottom: calc(-1 * var(--overflow-slider-scroll-indicator-padding));
+		width: 100%;
+	}
+}
+
+/* --------------------------------------------------------------
+# SkipLinksPlugin
+-------------------------------------------------------------- */
+
+// You need a .screen-reader-text class so something like this:
+
+// .screen-reader-text {
+// 	border: 0;
+// 	clip: rect(1px, 1px, 1px, 1px);
+// 	clip-path: inset(50%);
+// 	height: 1px;
+// 	margin: -1px;
+// 	overflow: hidden;
+// 	padding: 0;
+// 	position: absolute;
+// 	width: 1px;
+// 	word-wrap: normal !important;
+// 	&:focus {
+// 		background-color: #000;
+// 		clip: auto !important;
+// 		clip-path: none;
+// 		color: #fff;
+// 		display: block;
+// 		font-weight: 700;
+// 		height: auto;
+// 		outline-offset: -2px;
+// 		padding: 1rem 1.5rem;
+// 		text-decoration: none;
+// 		width: fit-content;
+// 		z-index: 100000;
+// 		position: relative;
+// 		margin-top: 1rem;
+// 		margin-bottom: 1rem;
+// 	}
+// }

package/src/overflow-slider.ts

@@ -0,0 +1,40 @@
+import Slider from './core/slider';
+
+import {
+  SliderOptions,
+  SliderPlugin,
+} from './core/types';
+
+export default function OverflowSlider (
+	container: HTMLElement,
+	options?: SliderOptions,
+	plugins?: SliderPlugin[]
+) {
+	try {
+
+		// check that container HTML element
+		if (!(container instanceof Element)) {
+			throw new Error(`Container must be HTML element, found ${typeof container}`);
+		}
+
+		const defaults = {
+			scrollBehavior: "smooth",
+			scrollStrategy: "fullSlide",
+		};
+
+		const sliderOptions = { ...defaults, ...options };
+
+		// disable smooth scrolling if user prefers reduced motion
+		if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+			sliderOptions.scrollBehavior = "auto";
+		}
+
+		return Slider(
+			container,
+			sliderOptions,
+			plugins,
+		);
+	} catch (e) {
+		console.error(e)
+	}
+}

package/src/plugins/arrows.ts

@@ -0,0 +1,107 @@
+import { Slider } from '../core/types';
+
+const DEFAULT_TEXTS = {
+	buttonPrevious: 'Previous items',
+	buttonNext: 'Next items',
+};
+
+const DEFAULT_ICONS = {
+	prev: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.6 3.4l-7.6 7.6 7.6 7.6 1.4-1.4-5-5h12.6v-2h-12.6l5-5z"/></svg>',
+	next: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.4 3.4l-1.4 1.4 5 5h-12.6v2h12.6l-5 5 1.4 1.4 7.6-7.6z"/></svg>',
+};
+
+const DEFAULT_CLASS_NAMES = {
+	navContainer: 'overflow-slider__arrows',
+	prevButton: 'overflow-slider__arrows-button overflow-slider__arrows-button--prev',
+	nextButton: 'overflow-slider__arrows-button overflow-slider__arrows-button--next',
+};
+
+export type ArrowsOptions = {
+	texts: {
+		buttonPrevious: string;
+		buttonNext: string;
+	},
+	icons: {
+		prev: string;
+		next: string;
+	},
+	classNames: {
+		navContainer: string;
+		prevButton: string;
+		nextButton: string;
+	},
+	container: HTMLElement | null,
+};
+
+export default function ArrowsPlugin( args: { [key: string]: any } ) {
+	return ( slider: Slider ) => {
+
+		const options = <ArrowsOptions>{
+			texts: {
+				...DEFAULT_TEXTS,
+				...args?.texts || []
+			},
+			icons: {
+				...DEFAULT_ICONS,
+				...args?.icons || []
+			},
+			classNames: {
+				...DEFAULT_CLASS_NAMES,
+				...args?.classNames || []
+			},
+			container: args?.container ?? null,
+		};
+
+		const nav = document.createElement( 'div' );
+		nav.classList.add( options.classNames.navContainer );
+
+		const prev = document.createElement( 'button' );
+		prev.setAttribute( 'class', options.classNames.prevButton );
+		prev.setAttribute( 'type', 'button' );
+		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.addEventListener( 'click', () => slider.moveToDirection( 'prev' ) );
+
+		const next = document.createElement( 'button' );
+		next.setAttribute( 'class', options.classNames.nextButton );
+		next.setAttribute( 'type', 'button' );
+		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.addEventListener( 'click', () => slider.moveToDirection( 'next' ) );
+
+		// insert buttons to the nav
+		nav.appendChild( prev );
+		nav.appendChild( next );
+
+		const update = () => {
+			const scrollLeft = slider.container.scrollLeft;
+			const scrollWidth = slider.container.scrollWidth;
+			const clientWidth = slider.container.clientWidth;
+			if ( scrollLeft === 0 ) {
+				prev.setAttribute( 'data-has-content', 'false' );
+			} else {
+				prev.setAttribute( 'data-has-content', 'true' );
+			}
+			if ( scrollLeft + clientWidth >= scrollWidth ) {
+				next.setAttribute( 'data-has-content', 'false' );
+			} else {
+				next.setAttribute( 'data-has-content', 'true' );
+			}
+		};
+
+		if ( options.container ) {
+			options.container.appendChild( nav );
+		} else {
+			slider.container.parentNode?.insertBefore( nav, slider.container.nextSibling );
+		}
+
+		update();
+		slider.on( 'scroll', update );
+		slider.on( 'contentsChanged', update );
+		slider.on( 'containerSizeChanged', update );
+	};
+}

package/src/plugins/dots.ts

@@ -0,0 +1,129 @@
+import { Slider } from '../core/types';
+
+export type DotsOptions = {
+	texts: {
+		dotDescription: string;
+	},
+	classNames: {
+		dotsContainer: string;
+		dotsItem: string;
+	},
+	container: HTMLElement | null,
+};
+
+const DEFAULT_TEXTS = {
+	dotDescription: 'Page %d of %d',
+};
+
+const DEFAULT_CLASS_NAMES = {
+	dotsContainer: 'overflow-slider__dots',
+	dotsItem: 'overflow-slider__dot-item',
+};
+
+export default function DotsPlugin( args: { [key: string]: any } ) {
+	return ( slider: Slider ) => {
+		const options = <DotsOptions>{
+			texts: {
+				...DEFAULT_TEXTS,
+				...args?.texts || []
+			},
+			classNames: {
+				...DEFAULT_CLASS_NAMES,
+				...args?.classNames || []
+			},
+			container: args?.container ?? null,
+		};
+
+		const dots = document.createElement( 'div' );
+		dots.classList.add( options.classNames.dotsContainer );
+
+		let pageFocused: number|null = null;
+
+		const buildDots = () => {
+			dots.setAttribute( 'data-has-content', slider.details.hasOverflow.toString() );
+			dots.innerHTML = '';
+
+			const dotsList = document.createElement( 'ul' );
+
+			const pages = slider.details.amountOfPages;
+			const currentPage = slider.details.currentPage;
+
+			if ( pages <= 1 ) {
+				return;
+			}
+
+			for ( let i = 0; i < pages; 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 === currentPage ).toString() );
+				dot.setAttribute( 'data-page', ( i + 1 ).toString() );
+				dotListItem.appendChild( dot );
+				dotsList.appendChild( dotListItem );
+				dot.addEventListener( 'click', () => activateDot( i + 1 ) );
+				dot.addEventListener( 'focus', () => pageFocused = i + 1 );
+				dot.addEventListener( 'keydown', ( e ) => {
+					const currentPageItem = dots.querySelector( `[aria-pressed="true"]` );
+					if ( ! currentPageItem ) {
+						return;
+					}
+					const currentPage = parseInt( currentPageItem.getAttribute( 'data-page' ) ?? '1' );
+					if ( e.key === 'ArrowLeft' ) {
+						const previousPage = currentPage - 1;
+						if ( previousPage > 0 ) {
+							const matchingDot = dots.querySelector( `[data-page="${previousPage}"]` );
+							if ( matchingDot ) {
+								( <HTMLElement>matchingDot ).focus();
+							}
+							activateDot( previousPage );
+						}
+					}
+					if ( e.key === 'ArrowRight' ) {
+						const nextPage = currentPage + 1;
+						if ( nextPage <= pages ) {
+							const matchingDot = dots.querySelector( `[data-page="${nextPage}"]` );
+							if ( matchingDot ) {
+								( <HTMLElement>matchingDot ).focus();
+							}
+							activateDot( nextPage );
+						}
+					}
+				} );
+			}
+
+			dots.appendChild( dotsList );
+
+			// return focus to same page after rebuild
+			if ( pageFocused ) {
+				const matchingDot = dots.querySelector( `[data-page="${pageFocused}"]` );
+				if ( matchingDot ) {
+					( <HTMLElement>matchingDot ).focus();
+				}
+			}
+		};
+
+		const activateDot = ( page: number ) => {
+			const scrollTargetPosition = slider.details.containerWidth * ( page - 1 );
+			slider.container.style.scrollBehavior = slider.options.scrollBehavior;
+			slider.container.style.scrollSnapType = 'none';
+			slider.container.scrollLeft = scrollTargetPosition;
+			slider.container.style.scrollBehavior = '';
+			slider.container.style.scrollSnapType = '';
+		};
+
+		buildDots();
+
+		if ( options.container ) {
+			options.container.appendChild( dots );
+		} else {
+			slider.container.parentNode?.insertBefore( dots, slider.container.nextSibling );
+		}
+
+		slider.on( 'detailsChanged', () => {
+			buildDots();
+		} );
+
+	};
+};

package/src/plugins/drag-scrolling.ts

@@ -0,0 +1,78 @@
+import { Slider } from '../core/types';
+
+const DEFAULT_DRAGGED_DISTANCE_THAT_PREVENTS_CLICK = 20;
+
+export type DragScrollingOptions = {
+	draggedDistanceThatPreventsClick: number,
+};
+
+export default function DragScrollingPlugin( args: { [key: string]: any } ) {
+	const options = <DragScrollingOptions>{
+		draggedDistanceThatPreventsClick: args?.draggedDistanceThatPreventsClick ?? DEFAULT_DRAGGED_DISTANCE_THAT_PREVENTS_CLICK,
+	};
+	return ( slider: Slider ) => {
+		let isMouseDown = false;
+		let startX = 0;
+		let scrollLeft = 0;
+
+		const hasOverflow = () => {
+			return slider.details.hasOverflow;
+		}
+
+		slider.container.addEventListener('mousedown', (e) => {
+			if ( ! hasOverflow() ) {
+				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';
+			// prevent pointer events on the slides
+			// const slides = slider.container.querySelectorAll( ':scope > *' );
+			// slides.forEach((slide) => {
+			// 	(<HTMLElement>slide).style.pointerEvents = 'none';
+			// });
+			// prevent focus going to the slides
+			// e.preventDefault();
+			// e.stopPropagation();
+		});
+		window.addEventListener('mouseup', () => {
+			if ( ! hasOverflow() ) {
+				return;
+			}
+			isMouseDown = false;
+			slider.container.style.cursor = '';
+			slider.container.style.scrollSnapType = '';
+			setTimeout(() => {
+				const slides = slider.container.querySelectorAll( ':scope > *' );
+				slides.forEach((slide) => {
+					(<HTMLElement>slide).style.pointerEvents = '';
+				});
+			}, 50);
+		});
+		window.addEventListener('mousemove', (e) => {
+			if ( ! hasOverflow() ) {
+				return;
+			}
+			if (!isMouseDown) {
+				return;
+			}
+			e.preventDefault();
+			const x = e.pageX - slider.container.offsetLeft;
+			const walk = (x - startX);
+			slider.container.scrollLeft = scrollLeft - walk;
+
+			// if walk is more than 30px, don't allow click event
+			// e.preventDefault();
+
+			const absWalk = Math.abs(walk);
+			const slides = slider.container.querySelectorAll( ':scope > *' );
+			const pointerEvents = absWalk > options.draggedDistanceThatPreventsClick ? 'none' : '';
+			slides.forEach((slide) => {
+				(<HTMLElement>slide).style.pointerEvents = pointerEvents;
+			});
+		});
+	};
+};