@evermade/overflow-slider 3.3.1 → 4.1.0

package/dist/plugins/thumbnails/index.d.ts

@@ -0,0 +1,9 @@
+import { DeepPartial, Slider } from '../core/index.js';
+
+type ThumbnailsOptions = {
+    mainSlider: Slider;
+};
+declare function FullWidthPlugin(args: DeepPartial<ThumbnailsOptions>): (slider: Slider) => void;
+
+export { FullWidthPlugin as default };
+export type { ThumbnailsOptions };

package/dist/plugins/thumbnails/index.min.js

@@ -1 +1 @@
-function e(e){return i=>{const t={mainSlider:e.mainSlider}.mainSlider,l=(e=null)=>{null===e&&i.slides.length>0&&(e=i.slides[0]),null!==e&&(i.slides.forEach((e=>{e.setAttribute("aria-current","false")})),e.setAttribute("aria-current","true"))};l(),i.slides.forEach(((e,i)=>{e.addEventListener("click",(()=>{t.moveToSlide(i),l(e)}))})),t.on("scrollEnd",(()=>{setTimeout((()=>{const e=t.activeSlideIdx;if(i.activeSlideIdx===e)return;const r=i.slides[e];l(r),i.moveToSlide(e)}),50)}))}}export{e as default};
+function e(e){return i=>{const t={mainSlider:e.mainSlider}.mainSlider,l=(e=null)=>{null===e&&i.slides.length>0&&(e=i.slides[0]),null!==e&&(i.slides.forEach(e=>{e.setAttribute("aria-current","false")}),e.setAttribute("aria-current","true"))};l(),i.slides.forEach((e,i)=>{e.addEventListener("click",()=>{t.moveToSlide(i),l(e)})}),t.on("scrollEnd",()=>{setTimeout(()=>{const e=t.activeSlideIdx;if(i.activeSlideIdx===e)return;const r=i.slides[e];l(r),i.moveToSlide(e)},50)})}}export{e as default};

package/dist/{core/utils.min.js → utils-Sxwcz8zp.js}

@@ -1 +1 @@
-function t(e,n=1){const r=`${e}-${n}`;return document.getElementById(r)?t(e,n+1):r}function e(t,e){const n=Object.keys(t),r=Object.keys(e);if(n.length!==r.length)return!1;for(let r of n)if(!Object.prototype.hasOwnProperty.call(e,r)||t[r]!==e[r])return!1;return!0}function n(t){if(0===t.children.length)return 0;const e=t.children[0],n=getComputedStyle(e),r=parseFloat(n.marginLeft),o=t.children[t.children.length-1],l=getComputedStyle(o);return r+parseFloat(l.marginRight)}export{t as generateId,n as getOutermostChildrenEdgeMarginSum,e as objectsAreEqual};
+function t(e,n=1){const r=`${e}-${n}`;return document.getElementById(r)?t(e,n+1):r}function e(t,e){const n=Object.keys(t),r=Object.keys(e);if(n.length!==r.length)return!1;for(let r of n)if(!Object.prototype.hasOwnProperty.call(e,r)||t[r]!==e[r])return!1;return!0}function n(t){if(0===t.children.length)return 0;const e=t.children[0],n=getComputedStyle(e),r=parseFloat(n.marginLeft),o=t.children[t.children.length-1],l=getComputedStyle(o);return r+parseFloat(l.marginRight)}export{n as a,t as g,e as o};

package/dist/{core/utils.esm.js → utils-ayDxlweP.js}

@@ -34,4 +34,4 @@ function getOutermostChildrenEdgeMarginSum(el) {
     return firstChildMarginLeft + lastChildMarginRight;
 }
 
-export { generateId, getOutermostChildrenEdgeMarginSum, objectsAreEqual };
+export { getOutermostChildrenEdgeMarginSum as a, generateId as g, objectsAreEqual as o };

package/docs/assets/demo.css

@@ -370,6 +370,77 @@ h3:before {
 	gap: 1rem;
 }
 
+.overflow-slider__autoplay {
+	--autoplay-bg-color: #e5e5e5;
+	--autoplay-progress-color: #303030;
+	--autoplay-icon-color: #303030;
+	cursor: pointer;
+	border-radius: 50%;
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 2.5rem;
+	height: 2.5rem;
+	border: none;
+	background: var(--autoplay-bg-color);
+	color: var(--autoplay-icon-color);
+	/* ensure the pseudo-element paints on its own layer */
+	will-change: background;
+}
+
+.overflow-slider__autoplay::before {
+	content: "";
+
+	position: absolute;
+	inset: 0;
+	border-radius: 50%;
+	/* draw the circular progress using conic-gradient */
+	background:
+		conic-gradient(
+			var(--autoplay-progress-color) calc(var(--autoplay-delay-progress) * 1%),
+			transparent 0
+		);
+	/* rotate so “0%” starts at top */
+	transform: rotate(-90deg);
+}
+
+.overflow-slider__autoplay::after {
+	content: "";
+	position: absolute;
+	border-radius: 50%;
+	left: 10%;
+	width: 80%;
+	height: 80%;
+	top: 10%;
+	background: var(--autoplay-bg-color);
+}
+
+.overflow-slider__autoplay:hover,
+.overflow-slider__autoplay:focus {
+	background: var(--color-primary);
+}
+
+.overflow-slider__autoplay:hover::before,
+.overflow-slider__autoplay:focus::before {
+	background: transparent;
+}
+
+.overflow-slider__autoplay:hover::after,
+.overflow-slider__autoplay:focus::after {
+	background: transparent;
+}
+
+.overflow-slider__autoplay svg {
+	position: absolute;
+	z-index: 2;
+	width: 1.25rem;
+	height: 1.25rem;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+}
+
 .example-item {
 	aspect-ratio: 3/4;
 	width: 240px;
@@ -451,11 +522,21 @@ h3:before {
 	grid-template-columns: repeat(var(--slider-slides-count, 1), var(--slider-container-width, 900px));
 }
 
+.example-container-1-autoplay-wrap-view,
+.example-container-1-autoplay-wrap-slide {
+	margin-top: 16px;
+}
+
 .example-container-1-dots .example-item {
 	aspect-ratio: 16/7;
 	width: 100%;
 }
 
+.example-container-1-infinite > * {
+	width: var(--slider-container-width, 400px);
+	aspect-ratio: 16/8;
+}
+
 .example-container-1-fade-wrap {
 	position: relative;
 }
@@ -544,6 +625,46 @@ h3:before {
 	height: 1.625rem !important;
 }
 
+.example-container-1-classname-opacity .example-item {
+	transition: .5s ease-in-out;
+}
+
+.example-container-1-classname-opacity .is-visible {
+	opacity: 1;
+}
+.example-container-1-classname-opacity .is-hidden {
+	opacity: 0;
+}
+
+.example-container-1-classname-partly {
+	width: 100vw;
+	margin-inline-start: calc(-50vw + 50%);
+	scroll-snap-type: x mandatory;
+}
+
+@media (min-width: 768px) {
+	.example-container-1-classname-partly .example-item {
+		width: calc( ( var( --slider-container-target-width ) / 4 ) - ( 3 / 4 * var( --slide-gap ) ) );
+	}
+
+.example-container-1-classname-partly .example-item {
+	transition: .2s ease-in-out;
+}
+
+.example-container-1-classname-partly .is-visible {
+	opacity: 1;
+	/* transform: scale(1); */
+}
+
+.example-container-1-classname-partly .is-partly-visible {
+	opacity: .5;
+	/* transform: scale(0.85); */
+}
+.example-container-1-classname-partly .is-hidden {
+	opacity: .2;
+	/* transform: scale(0); */
+}
+
 /* ===========================================================================
   Example 4: Filters
 =========================================================================== */
@@ -641,6 +762,7 @@ h3:before {
 .example-container-4-full-width {
 	width: 100vw;
 	margin-inline-start: calc(-50vw + 50%);
+	scroll-snap-type: x mandatory;
 }
 
 /* ===========================================================================
@@ -683,3 +805,37 @@ h3:before {
 	background: var(--color-grey-800);
 	color: #fff;
 }
+
+/* ===========================================================================
+  Example 4: Hero
+=========================================================================== */
+
+.example-container-4-hero__wrapper {
+	position: relative;
+}
+
+.example-container-4-hero {
+	--slider-gap: 0;
+	gap: 0;
+}
+
+.example-container-4-hero > * {
+	width: var(--slider-container-width, 900px);
+	aspect-ratio: 16/9;
+}
+
+.example-container-4-hero__autoplay {
+	position: absolute;
+	bottom: 1rem;
+	right: 1rem;
+}
+
+.example-container-4-hero__dots {
+	z-index: 10;
+	position: absolute;
+	bottom: 1rem;
+	left: 50%;
+	transform: translateX(-50%);
+	--overflow-slider-dot-inactive-color: rgba(0, 0, 0, 0.2);
+	--overflow-slider-dot-active-color: rgba(0, 0, 0, .8);
+}

package/docs/assets/demo.js

@@ -14,11 +14,14 @@ import { OverflowSlider } from '../dist/index.esm.js';
 import DragScrollingPlugin from '../dist/plugins/drag-scrolling/index.esm.js';
 import SkipLinksPlugin from '../dist/plugins/skip-links/index.esm.js';
 import ArrowsPlugin from '../dist/plugins/arrows/index.esm.js';
+import AutoplayPlugin from '../dist/plugins/autoplay/index.esm.js';
 import ScrollIndicatorPlugin from '../dist/plugins/scroll-indicator/index.esm.js';
 import DotsPlugin from '../dist/plugins/dots/index.esm.js';
 import FullWidthPlugin from '../dist/plugins/full-width/index.esm.js';
 import ThumbnailsPlugin from '../dist/plugins/thumbnails/index.esm.js';
 import FadePlugin from '../dist/plugins/fade/index.esm.js';
+import ClassNamesPlugin from '../dist/plugins/classnames/index.esm.js';
+
 
 (function () {
 	const init = () => {
@@ -133,6 +136,71 @@ import FadePlugin from '../dist/plugins/fade/index.esm.js';
 		);
 		console.log( '1-fade', example1Fade );
 
+		const example1ClassNames = new OverflowSlider(
+			document.querySelector( '.example-container-1-classname-opacity' ),
+			{
+				emulateScrollSnap: true,
+				rtl: document.documentElement.dir === 'rtl',
+			},
+			[
+				DragScrollingPlugin(),
+				ClassNamesPlugin(),
+			]
+		);
+		console.log( '1-classname-opacity', example1ClassNames );
+
+		const example1ClassNamesPartly = new OverflowSlider(
+			document.querySelector( '.example-container-1-classname-partly' ),
+			{
+				emulateScrollSnap: true,
+				rtl: document.documentElement.dir === 'rtl',
+				targetWidth: (slider) => {
+					return slider.container.parentElement.clientWidth;
+				}
+			},
+			[
+				DragScrollingPlugin(),
+				FullWidthPlugin(),
+				ClassNamesPlugin(
+					{
+						classnames: {
+							partlyVisible: 'is-partly-visible',
+						},
+						freezeStateOnVisible: true,
+					}
+				),
+			]
+		);
+		console.log( '1-classname-partly', example1ClassNamesPartly );
+
+		const example1AutoplaySlide = new OverflowSlider(
+			document.querySelector( '.example-container-1-autoplay-slide' ),
+			{
+				emulateScrollSnap: true,
+				rtl: document.documentElement.dir === 'rtl',
+			},
+			[
+				DragScrollingPlugin(),
+				AutoplayPlugin({
+					movementType: 'slide',
+				})
+			]
+		);
+		console.log( '1-autoplay-slide', example1AutoplaySlide );
+
+		const example1AutoplayView = new OverflowSlider(
+			document.querySelector( '.example-container-1-autoplay-view' ),
+			{
+				emulateScrollSnap: true,
+				rtl: document.documentElement.dir === 'rtl',
+			},
+			[
+				DragScrollingPlugin(),
+				AutoplayPlugin()
+			]
+		);
+		console.log( '1-autoplay-view', example1AutoplayView );
+
 		const example2PerfectFit = new OverflowSlider(
 			document.querySelector( '.example-container-2-perfect-fit' ),
 			{
@@ -239,17 +307,14 @@ import FadePlugin from '../dist/plugins/fade/index.esm.js';
 			document.querySelector( '.example-container-4-full-width' ),
 			{
 				rtl: document.documentElement.dir === 'rtl',
+				emulateScrollSnap: true,
+				targetWidth: (slider) => {
+					return slider.container.parentElement.clientWidth;
+				}
 			},
 			[
 				DragScrollingPlugin(),
-				FullWidthPlugin(
-					{
-						targetWidth: (slider) => {
-							// copy the width of the parent element
-							return slider.container.parentElement.clientWidth;
-						}
-					}
-				),
+				FullWidthPlugin(),
 				ScrollIndicatorPlugin(),
 			]
 		);
@@ -282,6 +347,25 @@ import FadePlugin from '../dist/plugins/fade/index.esm.js';
 		);
 		console.log( '4-synced-thumbnails', example4SyncedThumbnails );
 
+		const example4Hero = new OverflowSlider(
+			document.querySelector( '.example-container-4-hero' ),
+			{
+				emulateScrollSnap: true,
+				rtl: document.documentElement.dir === 'rtl',
+			},
+			[
+				DragScrollingPlugin(),
+				DotsPlugin({
+					container: document.querySelector( '.example-container-4-hero__dots' ),
+				}),
+				AutoplayPlugin({
+					movementType: 'slide',
+					container: document.querySelector( '.example-container-4-hero__autoplay' ),
+				})
+			]
+		);
+		console.log( '4-hero', example4Hero );
+
 	};
 
 	init();

package/docs/dist/index.d.ts

@@ -0,0 +1 @@
+export { default as OverflowSlider } from './plugins/core/index.d2.ts';