@evermade/overflow-slider 1.0.0

package/src/plugins/scroll-indicator.ts

@@ -0,0 +1,152 @@
+import { Slider } from '../core/types';
+
+const DEFAULT_CLASS_NAMES = {
+	scrollIndicator: 'overflow-slider__scroll-indicator',
+	scrollIndicatorBar: 'overflow-slider__scroll-indicator-bar',
+	scrollIndicatorButton: 'overflow-slider__scroll-indicator-button',
+};
+
+export type ScrollIndicatorOptions = {
+	classNames: {
+		scrollIndicator: string;
+		scrollIndicatorBar: string;
+		scrollIndicatorButton: string;
+	},
+	container: HTMLElement | null,
+};
+
+export default function ScrollIndicatorPlugin( args: { [key: string]: any } ) {
+	return ( slider: Slider ) => {
+
+		const options = <ScrollIndicatorOptions>{
+			classNames: {
+				...DEFAULT_CLASS_NAMES,
+				...args?.classNames || []
+			},
+			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 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' );
+
+		scrollbar.appendChild( scrollbarButton );
+		scrollbarContainer.appendChild( scrollbar );
+
+		const setDataAttributes = () => {
+			scrollbarContainer.setAttribute( 'data-has-overflow', slider.details.hasOverflow.toString() );
+		}
+		setDataAttributes();
+
+		const getScrollbarButtonLeftOffset = () => {
+			const scrollbarRatio = slider.container.offsetWidth / slider.container.scrollWidth;
+			return slider.container.scrollLeft * scrollbarRatio;
+		};
+
+		// scrollbarbutton width and position is calculated based on the scroll position and available width
+		let requestId = 0;
+		const update = () => {
+			if ( requestId ) {
+				window.cancelAnimationFrame( requestId );
+			}
+
+			requestId = window.requestAnimationFrame(() => {
+				const scrollbarButtonWidth = (slider.container.offsetWidth / 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 containerWidth = slider.container.offsetWidth;
+				const scrollPercentage = (scrollLeft / (scrollWidth - containerWidth)) * 100;
+				scrollbarContainer.setAttribute( 'aria-valuenow', Math.round(Number.isNaN(scrollPercentage) ? 0 : scrollPercentage).toString() );
+			});
+		};
+
+		// insert to DOM
+		if ( options.container ) {
+			options.container.appendChild( scrollbarContainer );
+		} else {
+			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' );
+			}
+		});
+
+		// handle click to before or after the scrollbar button
+		scrollbarContainer.addEventListener( 'click', (e) => {
+			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' );
+			}
+		});
+
+		// make scrollbar button draggable via mouse/touch and update the scroll position
+		let isMouseDown = false;
+		let startX = 0;
+		let scrollLeft = 0;
+
+		scrollbarButton.addEventListener('mousedown', (e) => {
+			isMouseDown = true;
+			startX = e.pageX - scrollbarContainer.offsetLeft;
+			scrollLeft = slider.container.scrollLeft;
+			// change cursor to grabbing
+			scrollbarButton.style.cursor = 'grabbing';
+			slider.container.style.scrollSnapType = 'none';
+			scrollbarButton.setAttribute( 'data-is-grabbed', 'true' );
+
+			e.preventDefault();
+			e.stopPropagation();
+		});
+		window.addEventListener('mouseup', () => {
+			isMouseDown = false;
+			scrollbarButton.style.cursor = '';
+			slider.container.style.scrollSnapType = '';
+			scrollbarButton.setAttribute( 'data-is-grabbed', 'false' );
+		});
+		window.addEventListener('mousemove', (e) => {
+			if (!isMouseDown) {
+				return;
+			}
+			e.preventDefault();
+			const x = e.pageX - scrollbarContainer.offsetLeft;
+			const scrollingFactor = slider.container.scrollWidth / scrollbarContainer.offsetWidth;
+			const walk = (x - startX) * scrollingFactor;
+			slider.container.scrollLeft = scrollLeft + walk;
+		});
+	};
+}

package/src/plugins/skip-links.ts

@@ -0,0 +1,61 @@
+import { Slider } from '../core/types';
+import { generateId } from '../core/utils';
+
+const DEFAULT_TEXTS = {
+	skipList: 'Skip list'
+};
+
+const DEFAULT_CLASS_NAMES = {
+	skipLink: 'screen-reader-text',
+	skipLinkTarget: 'overflow-slider__skip-link-target',
+};
+
+export type SkipLinkOptions = {
+	texts: {
+		skipList: string;
+	},
+	classNames: {
+		skipLink: string;
+		skipLinkTarget: string;
+	},
+	containerBefore: HTMLElement | null,
+	containerAfter: HTMLElement | null,
+};
+
+export default function SkipLinksPlugin( args: { [key: string]: any } ) {
+	return ( slider: Slider ) => {
+		const options = <SkipLinkOptions>{
+			texts: {
+				...DEFAULT_TEXTS,
+				...args?.texts || []
+			},
+			classNames: {
+				...DEFAULT_CLASS_NAMES,
+				...args?.classNames || []
+			},
+			containerBefore: args?.containerAfter ?? null,
+			containerAfter: args?.containerAfter ?? null,
+		};
+
+		const skipId = generateId( 'overflow-slider-skip' );
+		const skipLinkEl = document.createElement( 'a' );
+		skipLinkEl.setAttribute( 'href', `#${skipId}` );
+		skipLinkEl.textContent = options.texts.skipList;
+		skipLinkEl.classList.add( options.classNames.skipLink );
+
+		const skipTargetEl = document.createElement( 'div' );
+		skipTargetEl.setAttribute( 'id', skipId );
+		skipTargetEl.setAttribute( 'tabindex', '-1' );
+
+		if ( options.containerBefore ) {
+			options.containerBefore.parentNode?.insertBefore( skipLinkEl, options.containerBefore );
+		} else {
+			slider.container.parentNode?.insertBefore( skipLinkEl, slider.container );
+		}
+		if ( options.containerAfter ) {
+			options.containerAfter.parentNode?.insertBefore( skipTargetEl, options.containerAfter.nextSibling );
+		} else {
+			slider.container.parentNode?.insertBefore( skipTargetEl, slider.container.nextSibling );
+		}
+	};
+};

package/tsconfig.json

@@ -0,0 +1,6 @@
+{
+	"extends": "@tsconfig/recommended/tsconfig.json",
+	"compilerOptions": {
+		"jsx": "react"
+	}
+}