@evermade/overflow-slider 1.0.0 → 2.0.0

package/docs/index.html

@@ -53,8 +53,8 @@
 
 							<div class="entry__item">
 								<h3>Mouse Dragging</h3>
-								<p>Drag slides with mouse. Uses DragScrollingPlugin.</p>
-								<div class="overflow-slider example-container example-container-1-drag-scrolling">
+								<p>Drag slides with mouse. Uses DragScrollingPlugin. These slides are clickable.</p>
+								<div class="overflow-slider example-container example-container-1-drag-scrolling-clickable">
 									<a href="#1" class="example-item example-item--1">1</a>
 									<a href="#2" class="example-item example-item--2">2</a>
 									<a href="#3" class="example-item example-item--3">3</a>
@@ -69,6 +69,22 @@
 									<a href="#12" class="example-item example-item--12">12</a>
 									<a href="#13" class="example-item example-item--13">13</a>
 								</div>
+								<p style="margin-top:1.5rem;">These slides are not clickable</p>
+								<div class="overflow-slider example-container example-container-1-drag-scrolling-not-clickable">
+									<div class="example-item example-item--1">1</div>
+									<div class="example-item example-item--2">2</div>
+									<div class="example-item example-item--3">3</div>
+									<div class="example-item example-item--4">4</div>
+									<div class="example-item example-item--5">5</div>
+									<div class="example-item example-item--6">6</div>
+									<div class="example-item example-item--7">7</div>
+									<div class="example-item example-item--8">8</div>
+									<div class="example-item example-item--9">9</div>
+									<div class="example-item example-item--10">10</div>
+									<div class="example-item example-item--11">11</div>
+									<div class="example-item example-item--12">12</div>
+									<div class="example-item example-item--13">13</div>
+								</div>
 							</div>
 
 							<div class="entry__item">
@@ -214,6 +230,124 @@
 								</div>
 							</div>
 
+							<div class="entry__item">
+								<h3>Entrance and Exit Animations</h3>
+								<p>Animate slides when they appear and disappear.</p>
+								<div class="overflow-slider example-container example-container-3-entrance-animation">
+									<a href="#1" class="example-item example-item--1">1</a>
+									<a href="#2" class="example-item example-item--2">2</a>
+									<a href="#3" class="example-item example-item--3">3</a>
+									<a href="#4" class="example-item example-item--4">4</a>
+									<a href="#5" class="example-item example-item--5">5</a>
+									<a href="#6" class="example-item example-item--6">6</a>
+									<a href="#7" class="example-item example-item--7">7</a>
+									<a href="#8" class="example-item example-item--8">8</a>
+									<a href="#9" class="example-item example-item--9">9</a>
+									<a href="#10" class="example-item example-item--10">10</a>
+								</div>
+							</div>
+
+						</section>
+
+						<section class="entry__section">
+
+							<h2>Real Life Usage</h2>
+
+							<div class="entry__item">
+								<h3>Filters</h3>
+								<p>Display filter buttons in one line that overflows when necessary.</p>
+								<div class="example-4-filters-wrapper">
+									<div class="example-4-filters-previous">
+									</div>
+									<div class="overflow-slider example-container-4-filters">
+										<a href="#1" class="example-filter">Development</a>
+										<a href="#2" class="example-filter">Design</a>
+										<a href="#3" class="example-filter">Marketing</a>
+										<a href="#4" class="example-filter">Sales</a>
+										<a href="#5" class="example-filter">Support</a>
+										<a href="#6" class="example-filter">Management</a>
+										<a href="#7" class="example-filter">HR</a>
+										<a href="#8" class="example-filter">Finance</a>
+										<a href="#9" class="example-filter">Legal</a>
+										<a href="#10" class="example-filter">Customer Service</a>
+										<a href="#11" class="example-filter">Operations</a>
+										<a href="#12" class="example-filter">Other</a>
+									</div>
+									<div class="example-4-filters-next"></div>
+								</div>
+							</div>
+
+							<div class="entry__item">
+								<h3>Grid On Desktop, Slider On Mobile</h3>
+								<p>Display contents differently for different sized screens.</p>
+								<div class="overflow-slider example-container-4-grid-or-slider">
+									<a href="#1" class="example-item example-item--1">1</a>
+									<a href="#2" class="example-item example-item--2">2</a>
+									<a href="#3" class="example-item example-item--3">3</a>
+									<a href="#4" class="example-item example-item--4">4</a>
+									<a href="#5" class="example-item example-item--5">5</a>
+									<a href="#6" class="example-item example-item--6">6</a>
+									<a href="#7" class="example-item example-item--7">7</a>
+									<a href="#8" class="example-item example-item--8">8</a>
+								</div>
+							</div>
+
+							<div class="entry__item">
+								<h3>Full Width Slider</h3>
+								<p>Allow slides to flow in full screen but center them accoring to your content. Uses FullWidthPlugin.</p>
+								<div class="example-container-4-full-width-wrapper">
+									<div class="overflow-slider example-container-4-full-width">
+										<a href="#1" class="example-item example-item--1">1</a>
+										<a href="#2" class="example-item example-item--2">2</a>
+										<a href="#3" class="example-item example-item--3">3</a>
+										<a href="#4" class="example-item example-item--4">4</a>
+										<a href="#5" class="example-item example-item--5">5</a>
+										<a href="#6" class="example-item example-item--6">6</a>
+										<a href="#7" class="example-item example-item--7">7</a>
+										<a href="#8" class="example-item example-item--8">8</a>
+										<a href="#9" class="example-item example-item--9">9</a>
+										<a href="#10" class="example-item example-item--10">10</a>
+										<a href="#11" class="example-item example-item--11">11</a>
+										<a href="#12" class="example-item example-item--12">12</a>
+									</div>
+								</div>
+							</div>
+
+							<div class="entry__item">
+								<h3>Synced Slider</h3>
+								<p>Sync slides from thumbnails. </p>
+								<div class="example-container-4-thumbnails-wrapper">
+									<div class="overflow-slider example-container-4-synced-main">
+										<a href="#1" class="example-item example-item--1">1</a>
+										<a href="#2" class="example-item example-item--2">2</a>
+										<a href="#3" class="example-item example-item--3">3</a>
+										<a href="#4" class="example-item example-item--4">4</a>
+										<a href="#5" class="example-item example-item--5">5</a>
+										<a href="#6" class="example-item example-item--6">6</a>
+										<a href="#7" class="example-item example-item--7">7</a>
+										<a href="#8" class="example-item example-item--8">8</a>
+										<a href="#9" class="example-item example-item--9">9</a>
+										<a href="#10" class="example-item example-item--10">10</a>
+										<a href="#11" class="example-item example-item--11">11</a>
+										<a href="#12" class="example-item example-item--12">12</a>
+									</div>
+									<div class="overflow-slider example-container-4-synced-thumbnails">
+										<button class="example-item example-item--1">1</button>
+										<button class="example-item example-item--2">2</button>
+										<button class="example-item example-item--3">3</button>
+										<button class="example-item example-item--4">4</button>
+										<button class="example-item example-item--5">5</button>
+										<button class="example-item example-item--6">6</button>
+										<button class="example-item example-item--7">7</button>
+										<button class="example-item example-item--8">8</button>
+										<button class="example-item example-item--9">9</button>
+										<button class="example-item example-item--10">10</button>
+										<button class="example-item example-item--11">11</button>
+										<button class="example-item example-item--12">12</button>
+									</div>
+								</div>
+							</div>
+
 						</section>
 
 					</div>

package/package.json

@@ -1,11 +1,45 @@
 {
 	"name": "@evermade/overflow-slider",
-	"version": "1.0.0",
+	"version": "2.0.0",
 	"description": "Accessible slider tha works with overflow: auto.",
 	"type": "module",
 	"main": "dist/index.js",
 	"module": "dist/index.esm.js",
 	"types": "dist/index.d.ts",
+	"exports": {
+		".": {
+			"import": "./dist/index.esm.js",
+			"require": "./dist/index.min.js"
+		},
+		"./plugins/drag-scrolling": {
+			"import": "./dist/plugins/drag-scrolling/drag-scrolling/index.esm.js",
+			"require": "./dist/plugins/drag-scrolling/drag-scrolling/index.min.js"
+		},
+		"./plugins/skip-links": {
+			"import": "./dist/plugins/skip-links/skip-links/index.esm.js",
+			"require": "./dist/plugins/skip-links/skip-links/index.min.js"
+		},
+		"./plugins/scroll-indicator": {
+			"import": "./dist/plugins/scroll-indicator/scroll-indicator/index.esm.js",
+			"require": "./dist/plugins/scroll-indicator/scroll-indicator/index.min.js"
+		},
+		"./plugins/arrows": {
+			"import": "./dist/plugins/arrows/arrows/index.esm.js",
+			"require": "./dist/plugins/arrows/arrows/index.min.js"
+		},
+		"./plugins/full-width": {
+			"import": "./dist/plugins/full-width/full-width/index.esm.js",
+			"require": "./dist/plugins/full-width/full-width/index.min.js"
+		},
+		"./plugins/dots": {
+			"import": "./dist/plugins/dots/dots/index.esm.js",
+			"require": "./dist/plugins/dots/dots/index.min.js"
+		},
+		"./plugins/thumbnails": {
+			"import": "./dist/plugins/thumbnails/thumbnails/index.esm.js",
+			"require": "./dist/plugins/thumbnails/thumbnails/index.min.js"
+		}
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/evermade/overflow-slider.git"
@@ -46,10 +80,5 @@
 	"homepage": "https://github.com/evermade/overflow-slider#readme",
 	"publishConfig": {
 		"access": "public"
-	},
-	"dependencies": {
-		"resize-observer-polyfill": "^1.5.1",
-		"scrollbooster": "^3.0.2",
-		"simplebar": "^6.2.5"
 	}
 }

package/rollup.config.js

@@ -1,45 +1,71 @@
 import { terser } from 'rollup-plugin-terser';
-import pkg from './package.json';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import typescript from '@rollup/plugin-typescript';
 import postcss from 'rollup-plugin-postcss';
 import copy from 'rollup-plugin-copy';
+import glob from 'glob';
 
-const umd = { format: 'umd', name: 'OverflowSlider', exports: 'named' };
-const es = { format: 'es' };
-const minify = {
-	plugins: [terser()],
-	banner: () => `/*!  ${pkg.name} ${pkg.version} */`,
-};
-
-export default {
-	input: 'src/index.ts',
-	output: [
-		// Main files
-		{ file: 'dist/index.js', ...umd },
-		{ file: 'dist/index.esm.js', ...es },
-		{ file: 'docs/dist/overflow-slider.esm.js', ...es },
-		// Minified versions
-		{ file: 'dist/index.min.js', ...umd, ...minify },
-		{ file: 'dist/index.esm.min.js', ...es, ...minify },
-	],
-	plugins: [
+const plugins = [
 		typescript(),
 		nodeResolve(),
 		commonjs({ include: 'node_modules/**' }),
 		postcss({
-			extract: true,
-			extract: 'overflow-slider.css',
-			plugins: [
-					require('autoprefixer'),
-					require('cssnano')({
-							preset: 'default',
-					}),
-			],
-			minimize: true,
-			sourceMap: false,
-			extensions: ['.scss', '.css'],
+				extract: 'overflow-slider.css',
+				plugins: [
+						require('autoprefixer'),
+						require('cssnano')({ preset: 'default', }),
+				],
+				minimize: true,
+				sourceMap: false,
+				extensions: ['.scss', '.css'],
 		}),
-	],
+		copy({
+				targets: [
+						{
+							src: 'dist/*',
+							dest: 'docs/dist',
+						},
+				],
+				hook: 'writeBundle'
+		})
+];
+
+// Adjusting here to include the core file
+const pluginEntries = {
+		index: 'src/index.ts', // Adding the core file
+		...glob.sync('src/plugins/**/*.ts').reduce((entries, path) => {
+				const name = path.replace(/^src\/plugins\//, '').replace(/\.ts$/, '');
+				entries[name] = path;
+				return entries;
+		}, {}),
 };
+
+const baseOutput = {
+		preserveModules: true,
+		preserveModulesRoot: 'src',
+};
+
+export default [
+		{
+				input: pluginEntries,
+				output: {
+						...baseOutput,
+						dir: 'dist',
+						format: 'es',
+						entryFileNames: '[name].esm.js',
+				},
+				plugins,
+		},
+		{
+				input: pluginEntries,
+				output: {
+						...baseOutput,
+						dir: 'dist',
+						format: 'es',
+						entryFileNames: '[name].min.js',
+						plugins: [terser()],
+				},
+				plugins,
+		},
+];

package/src/core/details.ts

@@ -15,7 +15,7 @@ export default function details( slider: Slider) {
 		hasOverflow = true;
 	}
 
-	slideCount = Array.from(slider.container.querySelectorAll(':scope > *')).length;
+	slideCount = slider.slides.length ?? 0;
 
 	containerWidth = slider.container.offsetWidth;
 

package/src/{overflow-slider.ts → core/overflow-slider.ts}

@@ -1,9 +1,9 @@
-import Slider from './core/slider';
+import Slider from './slider';
 
 import {
   SliderOptions,
   SliderPlugin,
-} from './core/types';
+} from './types';
 
 export default function OverflowSlider (
 	container: HTMLElement,
@@ -20,6 +20,7 @@ export default function OverflowSlider (
 		const defaults = {
 			scrollBehavior: "smooth",
 			scrollStrategy: "fullSlide",
+			slidesSelector: ":scope > *",
 		};
 
 		const sliderOptions = { ...defaults, ...options };

package/src/core/slider.ts

@@ -14,8 +14,14 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 			containerId = generateId( 'overflow-slider' );
 			container.setAttribute( 'id', containerId );
 		}
+		setSlides();
 		setDetails(true);
-		slider.on('contentsChanged', () => setDetails());
+		setActiveSlideIdx();
+		slider.on('contentsChanged', () => {
+			setSlides();
+			setDetails();
+			setActiveSlideIdx();
+		});
 		slider.on('containerSizeChanged', () => setDetails());
 
 		let requestId = 0;
@@ -25,6 +31,7 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 			}
 			requestId = window.requestAnimationFrame(() => {
 				setDetails();
+				setActiveSlideIdx();
 			});
 		};
 		slider.on('scroll', setDetailsDebounce);
@@ -42,6 +49,7 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 			setCSSVariables();
 		});
 		slider.emit('created');
+		slider.container.setAttribute('data-ready', 'true');
 	};
 
 	function setDetails( isInit = false ) {
@@ -55,6 +63,10 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		}
 	};
 
+	function setSlides() {
+		slider.slides = Array.from(slider.container.querySelectorAll(slider.options.slidesSelector));
+	}
+
 	function addEventListeners() {
 
 		// changes to DOM
@@ -119,8 +131,10 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 			scrollTarget = slideStart;
 		} else if (slideEnd > scrollLeft + containerWidth) {
 			scrollTarget = slideEnd - containerWidth;
+		} else if (slideStart === 0) {
+			scrollTarget = 0;
 		}
-		if (scrollTarget) {
+		if (scrollTarget !== null) {
 			slider.container.style.scrollSnapType = 'none';
 			slider.container.scrollLeft = scrollTarget;
 			// @todo resume scroll snapping but at least proximity gives a lot of trouble
@@ -129,6 +143,46 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		}
 	};
 
+	function setActiveSlideIdx() {
+		const sliderRect = slider.container.getBoundingClientRect();
+		const scrollLeft = slider.container.scrollLeft;
+		const slides = slider.slides;
+		let activeSlideIdx = 0;
+
+		for (let i = 0; i < slides.length; i++) {
+			const slideRect = slides[i].getBoundingClientRect();
+			const slideStart = slideRect.left - sliderRect.left + scrollLeft + getGapSize();
+
+			if (slideStart > scrollLeft) {
+				activeSlideIdx = i;
+				break;
+			}
+		}
+
+		const oldActiveSlideIdx = slider.activeSlideIdx;
+		slider.activeSlideIdx = activeSlideIdx;
+		if (oldActiveSlideIdx !== activeSlideIdx) {
+			slider.emit('activeSlideChanged');
+		}
+	}
+
+	function moveToSlide( idx: number ) {
+		const slide = slider.slides[idx];
+		if (slide) {
+			ensureSlideIsInView(slide);
+		}
+	};
+
+	function getGapSize() : number {
+		let gapSize = 0;
+		if (slider.slides.length > 1) {
+			const firstSlideRect = slider.slides[0].getBoundingClientRect();
+			const secondSlideRect = slider.slides[1].getBoundingClientRect();
+			gapSize = secondSlideRect.left - firstSlideRect.right;
+		}
+		return gapSize;
+	}
+
 	function moveToDirection(direction = "prev") {
 		const scrollStrategy = slider.options.scrollStrategy;
 		const scrollLeft = slider.container.scrollLeft;
@@ -142,26 +196,17 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		}
 		if (scrollStrategy === 'fullSlide') {
 			let fullSldeTargetScrollPosition = null;
-			const slides = Array.from(slider.container.querySelectorAll(':scope > *'));
-
-			let gapSize = 0;
-
-			if (slides.length > 1) {
-				const firstSlideRect = slides[0].getBoundingClientRect();
-				const secondSlideRect = slides[1].getBoundingClientRect();
-				gapSize = secondSlideRect.left - firstSlideRect.right;
-			}
 
 			// extend targetScrollPosition to include gap
 			if (direction === 'prev') {
-				fullSldeTargetScrollPosition = Math.max(0, targetScrollPosition - gapSize);
+				fullSldeTargetScrollPosition = Math.max(0, targetScrollPosition - getGapSize());
 			} else {
-				fullSldeTargetScrollPosition = Math.min(slider.container.scrollWidth, targetScrollPosition + gapSize);
+				fullSldeTargetScrollPosition = Math.min(slider.container.scrollWidth, targetScrollPosition + getGapSize());
 			}
 
 			if (direction === 'next') {
 				let partialSlideFound = false;
-				for (let slide of slides) {
+				for (let slide of slider.slides) {
 					const slideRect = slide.getBoundingClientRect();
 					const slideStart = slideRect.left - sliderRect.left + scrollLeft;
 					const slideEnd = slideStart + slideRect.width;
@@ -179,7 +224,7 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 				}
 			} else {
 				let partialSlideFound = false;
-				for (let slide of slides) {
+				for (let slide of slider.slides) {
 					const slideRect = slide.getBoundingClientRect();
 					const slideStart = slideRect.left - sliderRect.left + scrollLeft;
 					const slideEnd = slideStart + slideRect.width;
@@ -197,7 +242,7 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 				}
 			}
 		}
-		slider.container.style.scrollBehavior = 'smooth';
+		slider.container.style.scrollBehavior = slider.options.scrollBehavior;
 		slider.container.scrollLeft = targetScrollPosition;
 		setTimeout(() => slider.container.style.scrollBehavior = '', 50);
 	}
@@ -224,6 +269,7 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 	slider = <Slider>{
 		emit,
 		moveToDirection,
+		moveToSlide,
 		on,
 		options,
 	};

package/src/core/types.ts

@@ -1,20 +1,26 @@
 export type Slider<O = {}, C = {}, H extends string = string> = {
 	container: HTMLElement
+	slides: HTMLElement[]
 	emit: (name: H | SliderHooks) => void
 	moveToDirection: (
 		direction: 'prev' | 'next'
 	) => void
+	moveToSlide: (
+		index: number
+	) => void
 	on: (
 		name: H | SliderHooks,
 		cb: (props: Slider<O, C, H>) => void
 	) => void
 	options: SliderOptions,
 	details: SliderDetails,
+	activeSlideIdx: number,
 } & C;
 
 export type SliderOptions = {
 	scrollBehavior: string;
 	scrollStrategy: string;
+	slidesSelector: string;
 	[key: string]: any;
 }
 
@@ -31,11 +37,13 @@ export type SliderHooks =
 	| HOOK_CREATED
 	| HOOK_CONTENTS_CHANGED
 	| HOOK_DETAILS_CHANGED
-	| HOOK_CONTAINER_SIZE_CHANGED;
+	| HOOK_CONTAINER_SIZE_CHANGED
+	| HOOK_ACTIVE_SLIDE_CHANGED;
 
 export type HOOK_CREATED = 'created';
 export type HOOK_DETAILS_CHANGED = 'detailsChanged';
 export type HOOK_CONTENTS_CHANGED = 'contentsChanged';
 export type HOOK_CONTAINER_SIZE_CHANGED = 'containerSizeChanged';
+export type HOOK_ACTIVE_SLIDE_CHANGED = 'activeSlideChanged';
 
 export type SliderPlugin = (slider: Slider) => void;

package/src/index.ts

@@ -1,18 +1,7 @@
 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';
+import OverflowSlider from './core/overflow-slider';
 
 export {
 	OverflowSlider,
-	DragScrollingPlugin,
-	SkipLinksPlugin,
-	ArrowsPlugin,
-	ScrollIndicatorPlugin,
-	DotsPlugin
 };