@evermade/overflow-slider 1.0.0 → 2.0.0

package/src/overflow-slider.scss

@@ -3,7 +3,7 @@
  */
 
 /* --------------------------------------------------------------
-# Container
+# Core
 -------------------------------------------------------------- */
 
 .overflow-slider {
@@ -14,9 +14,12 @@
 	grid-auto-flow: column;
 	grid-template-columns: max-content;
 	max-width: max-content;
+	// hide native scrollbars
 	&::-webkit-scrollbar {
 		display: none;
 	}
+	-ms-overflow-style: none;
+	scrollbar-width: none;
 	& > * {
 		scroll-snap-align: start;
 		outline-offset: -2px;
@@ -24,190 +27,14 @@
 }
 
 /* --------------------------------------------------------------
-# ArrowsPlugin
+# Plugins
 -------------------------------------------------------------- */
 
-: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
--------------------------------------------------------------- */
+@import 'plugins/arrows/styles.scss';
+@import 'plugins/dots/styles.scss';
+@import 'plugins/drag-scrolling/styles.scss';
+@import 'plugins/scroll-indicator/styles.scss';
+@import 'plugins/skip-links/styles.scss';
 
-: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/plugins/{arrows.ts → arrows/index.ts}

@@ -1,4 +1,4 @@
-import { Slider } from '../core/types';
+import { Slider } from '../../core/types';
 
 const DEFAULT_TEXTS = {
 	buttonPrevious: 'Previous items',
@@ -31,6 +31,8 @@ export type ArrowsOptions = {
 		nextButton: string;
 	},
 	container: HTMLElement | null,
+	containerPrev: HTMLElement | null,
+	containerNext: HTMLElement | null,
 };
 
 export default function ArrowsPlugin( args: { [key: string]: any } ) {
@@ -50,6 +52,8 @@ export default function ArrowsPlugin( args: { [key: string]: any } ) {
 				...args?.classNames || []
 			},
 			container: args?.container ?? null,
+			containerPrev: args?.containerPrev ?? null,
+			containerNext: args?.containerNext ?? null,
 		};
 
 		const nav = document.createElement( 'div' );
@@ -93,10 +97,15 @@ export default function ArrowsPlugin( args: { [key: string]: any } ) {
 			}
 		};
 
-		if ( options.container ) {
-			options.container.appendChild( nav );
+		if ( options.containerNext && options.containerPrev ) {
+			options.containerPrev.appendChild( prev );
+			options.containerNext.appendChild( next );
 		} else {
-			slider.container.parentNode?.insertBefore( nav, slider.container.nextSibling );
+			if ( options.container ) {
+				options.container.appendChild( nav );
+			} else {
+				slider.container.parentNode?.insertBefore( nav, slider.container.nextSibling );
+			}
 		}
 
 		update();

package/src/plugins/arrows/styles.scss

@@ -0,0 +1,29 @@
+/* --------------------------------------------------------------
+# 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);
+	}
+}

package/src/plugins/{dots.ts → dots/index.ts}

@@ -1,4 +1,4 @@
-import { Slider } from '../core/types';
+import { Slider } from '../../core/types';
 
 export type DotsOptions = {
 	texts: {

package/src/plugins/dots/styles.scss

@@ -0,0 +1,56 @@
+/* --------------------------------------------------------------
+# 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);
+	}
+}

package/src/plugins/{drag-scrolling.ts → drag-scrolling/index.ts}

@@ -1,4 +1,4 @@
-import { Slider } from '../core/types';
+import { Slider } from '../../core/types';
 
 const DEFAULT_DRAGGED_DISTANCE_THAT_PREVENTS_CLICK = 20;
 
@@ -15,45 +15,31 @@ export default function DragScrollingPlugin( args: { [key: string]: any } ) {
 		let startX = 0;
 		let scrollLeft = 0;
 
-		const hasOverflow = () => {
-			return slider.details.hasOverflow;
-		}
+		// add data attribute to container
+		slider.container.setAttribute( 'data-has-drag-scrolling', 'true' );
 
-		slider.container.addEventListener('mousedown', (e) => {
-			if ( ! hasOverflow() ) {
+		const mouseDown = (e: MouseEvent) => {
+			if ( ! slider.details.hasOverflow ) {
 				return;
 			}
+			if ( ! slider.container.contains( e.target as Node ) ) {
+				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';
-			// });
+			slider.container.style.scrollBehavior = 'auto';
 			// 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() ) {
+			e.preventDefault();
+			e.stopPropagation();
+		};
+
+		const mouseMove = (e: MouseEvent) => {
+			if ( ! slider.details.hasOverflow ) {
 				return;
 			}
 			if (!isMouseDown) {
@@ -64,15 +50,33 @@ export default function DragScrollingPlugin( args: { [key: string]: any } ) {
 			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 slides = slider.container.querySelectorAll( slider.options.slidesSelector );
 			const pointerEvents = absWalk > options.draggedDistanceThatPreventsClick ? 'none' : '';
 			slides.forEach((slide) => {
 				(<HTMLElement>slide).style.pointerEvents = pointerEvents;
 			});
-		});
+		};
+
+		const mouseUp = () => {
+			if ( ! slider.details.hasOverflow ) {
+				return;
+			}
+			isMouseDown = false;
+			slider.container.style.cursor = '';
+			setTimeout(() => {
+				slider.container.style.scrollSnapType = '';
+				slider.container.style.scrollBehavior = '';
+				const slides = slider.container.querySelectorAll( slider.options.slidesSelector );
+				slides.forEach((slide) => {
+					(<HTMLElement>slide).style.pointerEvents = '';
+				});
+			}, 50);
+		};
+
+		window.addEventListener('mousedown', mouseDown);
+		window.addEventListener('mousemove', mouseMove);
+		window.addEventListener('mouseup', mouseUp);
+
 	};
 };

package/src/plugins/drag-scrolling/styles.scss

@@ -0,0 +1,12 @@
+/* --------------------------------------------------------------
+# DragScrollingPlugin
+-------------------------------------------------------------- */
+
+[data-has-drag-scrolling] {
+	&[data-has-overflow="true"] {
+		// show grab cursor if has drag scrolling
+		cursor: grab;
+		// selecting text might make scrolling difficult
+		user-select: none;
+	}
+}

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

@@ -0,0 +1,43 @@
+import { Slider } from '../../core/types';
+
+const DEFAULT_TARGET_WIDTH = ( slider: Slider ) => slider.container.parentElement?.offsetWidth ?? window.innerWidth;
+
+export type FullWidthOptions = {
+	targetWidth: ( slider: Slider ) => number,
+	addMarginBefore: boolean,
+	addMarginAfter: boolean,
+};
+
+export default function FullWidthPlugin( args: { [key: string]: any } ) {
+	return ( slider: Slider ) => {
+
+		const options = <FullWidthOptions>{
+			targetWidth: args?.targetWidth ?? DEFAULT_TARGET_WIDTH,
+			addMarginBefore: args?.addMarginBefore ?? true,
+			addMarginAfter: args?.addMarginAfter ?? true,
+		};
+
+		const update = () => {
+			const slides = slider.container.querySelectorAll( slider.options.slidesSelector );
+
+			if ( ! slides.length ) {
+				return;
+			}
+
+			const firstSlide = slides[0] as HTMLElement;
+			const lastSlide = slides[slides.length - 1] as HTMLElement;
+
+			const marginAmount = Math.floor((window.innerWidth - options.targetWidth(slider)) / 2);
+			if ( options.addMarginBefore ) {
+				firstSlide.style.marginLeft = `${marginAmount}px`;
+			}
+			if ( options.addMarginAfter ) {
+				lastSlide.style.marginRight = `${marginAmount}px`;
+			}
+		};
+
+		update();
+		slider.on( 'contentsChanged', update );
+		slider.on( 'containerSizeChanged', update );
+	};
+}

package/src/plugins/{scroll-indicator.ts → scroll-indicator/index.ts}

@@ -1,4 +1,4 @@
-import { Slider } from '../core/types';
+import { Slider } from '../../core/types';
 
 const DEFAULT_CLASS_NAMES = {
 	scrollIndicator: 'overflow-slider__scroll-indicator',
@@ -53,8 +53,8 @@ export default function ScrollIndicatorPlugin( args: { [key: string]: any } ) {
 		setDataAttributes();
 
 		const getScrollbarButtonLeftOffset = () => {
-			const scrollbarRatio = slider.container.offsetWidth / slider.container.scrollWidth;
-			return slider.container.scrollLeft * scrollbarRatio;
+			const  contentRatio = scrollbarButton.offsetWidth / slider.details.containerWidth;
+			return slider.container.scrollLeft * contentRatio;
 		};
 
 		// scrollbarbutton width and position is calculated based on the scroll position and available width
@@ -65,7 +65,8 @@ export default function ScrollIndicatorPlugin( args: { [key: string]: any } ) {
 			}
 
 			requestId = window.requestAnimationFrame(() => {
-				const scrollbarButtonWidth = (slider.container.offsetWidth / slider.container.scrollWidth) * 100;
+				const scrollbarButtonWidth = (slider.details.containerWidth / slider.details.scrollableAreaWidth) * 100;
+
 				const scrollLeftInPortion = getScrollbarButtonLeftOffset();
 				scrollbarButton.style.width = `${scrollbarButtonWidth}%`;
 				scrollbarButton.style.transform = `translateX(${scrollLeftInPortion}px)`;
@@ -116,13 +117,14 @@ export default function ScrollIndicatorPlugin( args: { [key: string]: any } ) {
 		});
 
 		// make scrollbar button draggable via mouse/touch and update the scroll position
-		let isMouseDown = false;
+		let isInteractionDown = false;
 		let startX = 0;
 		let scrollLeft = 0;
 
-		scrollbarButton.addEventListener('mousedown', (e) => {
-			isMouseDown = true;
-			startX = e.pageX - scrollbarContainer.offsetLeft;
+		const onInteractionDown = (e: MouseEvent | TouchEvent) => {
+			isInteractionDown = true;
+			const pageX = (e as MouseEvent).pageX || (e as TouchEvent).touches[0].pageX;
+			startX = pageX - scrollbarContainer.offsetLeft;
 			scrollLeft = slider.container.scrollLeft;
 			// change cursor to grabbing
 			scrollbarButton.style.cursor = 'grabbing';
@@ -131,22 +133,36 @@ export default function ScrollIndicatorPlugin( args: { [key: string]: any } ) {
 
 			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) {
+		};
+
+		const onInteractionMove = (e: MouseEvent | TouchEvent) => {
+			if (!isInteractionDown) {
 				return;
 			}
 			e.preventDefault();
-			const x = e.pageX - scrollbarContainer.offsetLeft;
-			const scrollingFactor = slider.container.scrollWidth / scrollbarContainer.offsetWidth;
+			const pageX = (e as MouseEvent).pageX || (e as TouchEvent).touches[0].pageX;
+			const x = pageX - scrollbarContainer.offsetLeft;
+			const scrollingFactor = slider.details.scrollableAreaWidth / scrollbarContainer.offsetWidth;
+
 			const walk = (x - startX) * scrollingFactor;
 			slider.container.scrollLeft = scrollLeft + walk;
-		});
+		};
+
+		const onInteractionUp = () => {
+			isInteractionDown = false;
+			scrollbarButton.style.cursor = '';
+			slider.container.style.scrollSnapType = '';
+			scrollbarButton.setAttribute( 'data-is-grabbed', 'false' );
+		};
+
+		scrollbarButton.addEventListener('mousedown', onInteractionDown);
+		scrollbarButton.addEventListener('touchstart', onInteractionDown);
+
+		window.addEventListener('mousemove', onInteractionMove);
+		window.addEventListener('touchmove', onInteractionMove, { passive: false });
+
+		window.addEventListener('mouseup', onInteractionUp);
+		window.addEventListener('touchend', onInteractionUp);
+
 	};
 }

package/src/plugins/scroll-indicator/styles.scss

@@ -0,0 +1,59 @@
+/* --------------------------------------------------------------
+# 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%;
+	}
+}

package/src/plugins/{skip-links.ts → skip-links/index.ts}

@@ -1,5 +1,5 @@
-import { Slider } from '../core/types';
-import { generateId } from '../core/utils';
+import { Slider } from '../../core/types';
+import { generateId } from '../../core/utils';
 
 const DEFAULT_TEXTS = {
 	skipList: 'Skip list'