@evermade/overflow-slider 1.0.0 → 2.0.0

package/src/plugins/skip-links/styles.scss

@@ -0,0 +1,35 @@
+/* --------------------------------------------------------------
+# 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/thumbnails/index.ts

@@ -0,0 +1,53 @@
+import { Slider } from '../../core/types';
+
+export type ThumbnailsOptions = {
+	mainSlider: Slider,
+};
+
+export default function FullWidthPlugin( args: { [key: string]: any } ) {
+	return ( slider: Slider ) => {
+
+		const options = <ThumbnailsOptions>{
+			mainSlider: args.mainSlider,
+		};
+
+		const mainSlider = options.mainSlider;
+
+
+		const setActiveThumbnail = (slide: HTMLElement | null = null) => {
+			if ( slide === null && slider.slides.length > 0 ) {
+				slide = slider.slides[0] as HTMLElement;
+			}
+			if ( slide === null ) {
+				return;
+			}
+			// add aria-current to the clicked slide
+			slider.slides.forEach((s) => {
+				s.setAttribute('aria-current', 'false');
+			});
+			slide.setAttribute('aria-current', 'true');
+		};
+
+		const addClickListeners = () => {
+			slider.slides.forEach((slide, index) => {
+				slide.addEventListener('click', () => {
+					mainSlider.moveToSlide(index);
+					setActiveThumbnail(slide);
+				});
+			});
+		};
+
+		setActiveThumbnail();
+		addClickListeners();
+
+		mainSlider.on( 'activeSlideChanged', () => {
+			setTimeout(() => {
+				const activeSlideIdx = mainSlider.activeSlideIdx;
+				const activeThumbnail = slider.slides[activeSlideIdx] as HTMLElement;
+				setActiveThumbnail(activeThumbnail);
+				slider.moveToSlide(activeSlideIdx);
+			}, 50);
+		});
+
+	};
+}

package/tsconfig.json

@@ -1,6 +1,18 @@
 {
 	"extends": "@tsconfig/recommended/tsconfig.json",
 	"compilerOptions": {
-		"jsx": "react"
-	}
+			"target": "es6",
+			"module": "ESNext",
+			"jsx": "react",
+			"moduleResolution": "node",
+			"sourceMap": false
+	},
+	"include": [
+			"src/**/*"
+	],
+	"exclude": [
+			"node_modules",
+			"dist",
+			"**/*.spec.ts"
+	]
 }

package/dist/index.esm.min.js

@@ -1,2 +0,0 @@
-/*!  @evermade/overflow-slider 1.0.0 */
-function t(e,n=1){const o=`${e}-${n}`;return document.getElementById(o)?t(e,n+1):o}function e(e,n,o){let r,i={};function s(t=!1){const e=r.details,n=function(t){let e,n=!1,o=0,r=0,i=0,s=0,a=1;return t.container.scrollWidth>t.container.clientWidth&&(n=!0),o=Array.from(t.container.querySelectorAll(":scope > *")).length,r=t.container.offsetWidth,i=t.container.scrollWidth,s=Math.ceil(i/r),t.container.scrollLeft>=0&&(a=Math.floor(t.container.scrollLeft/r),t.container.scrollLeft+r===i&&(a=s-1)),e={hasOverflow:n,slideCount:o,containerWidth:r,scrollableAreaWidth:i,amountOfPages:s,currentPage:a},e}(r);r.details=n,t||function(t,e){const n=Object.keys(t),o=Object.keys(e);if(n.length!==o.length)return!1;for(let o of n)if(!1===e.hasOwnProperty(o)||t[o]!==e[o])return!1;return!0}(e,n)?t&&r.emit("detailsChanged"):r.emit("detailsChanged")}function a(){r.container.style.setProperty("--slider-container-width",`${r.details.containerWidth}px`),r.container.style.setProperty("--slider-scrollable-width",`${r.details.scrollableAreaWidth}px`),r.container.style.setProperty("--slider-slides-count",`${r.details.slideCount}`)}function l(){r.container.setAttribute("data-has-overflow",r.details.hasOverflow?"true":"false")}return r={emit:function(t){var e;i&&i[t]&&i[t].forEach((t=>{t(r)}));const n=null===(e=null==r?void 0:r.options)||void 0===e?void 0:e[t];"function"==typeof n&&n(r)},moveToDirection:function(t="prev"){const e=r.options.scrollStrategy,n=r.container.scrollLeft,o=r.container.getBoundingClientRect(),i=r.container.offsetWidth;let s=n;if("prev"===t?s=Math.max(0,n-r.container.offsetWidth):"next"===t&&(s=Math.min(r.container.scrollWidth,n+r.container.offsetWidth)),"fullSlide"===e){let e=null;const a=Array.from(r.container.querySelectorAll(":scope > *"));let l=0;if(a.length>1){const t=a[0].getBoundingClientRect();l=a[1].getBoundingClientRect().left-t.right}if(e="prev"===t?Math.max(0,s-l):Math.min(r.container.scrollWidth,s+l),"next"===t){let t=!1;for(let r of a){const i=r.getBoundingClientRect(),a=i.left-o.left+n,l=a+i.width;if(a<s&&l>s){e=a,t=!0;break}}t||(e=Math.min(s,r.container.scrollWidth-r.container.offsetWidth)),e&&e>n&&(s=e)}else{let t=!1;for(let r of a){const s=r.getBoundingClientRect(),a=s.left-o.left+n,l=a+s.width;if(a<n&&l>n){e=l-i,t=!0;break}}t||(e=Math.max(0,n-i)),e&&e<n&&(s=e)}}r.container.style.scrollBehavior="smooth",r.container.scrollLeft=s,setTimeout((()=>r.container.style.scrollBehavior=""),50)},on:function(t,e){i[t]||(i[t]=[]),i[t].push(e)},options:n},function(){r.container=e;let n=e.getAttribute("id");null===n&&(n=t("overflow-slider"),e.setAttribute("id",n)),s(!0),r.on("contentsChanged",(()=>s())),r.on("containerSizeChanged",(()=>s()));let i=0;if(r.on("scroll",(()=>{i&&window.cancelAnimationFrame(i),i=window.requestAnimationFrame((()=>{s()}))})),function(){new MutationObserver((()=>r.emit("contentsChanged"))).observe(r.container,{childList:!0});new ResizeObserver((()=>r.emit("containerSizeChanged"))).observe(r.container),r.container.addEventListener("scroll",(()=>r.emit("scroll")));let t=!1;r.container.addEventListener("mousedown",(()=>{t=!0})),r.container.addEventListener("touchstart",(()=>{t=!0}),{passive:!0}),r.container.addEventListener("focusin",(e=>{if(!t){let t=e.target;for(;t.parentElement!==r.container&&t.parentElement;)t=t.parentElement;!function(t){const e=t.getBoundingClientRect(),n=r.container.getBoundingClientRect(),o=r.container.offsetWidth,i=r.container.scrollLeft,s=e.left-n.left+i,a=s+e.width;let l=null;s<i?l=s:a>i+o&&(l=a-o);l&&(r.container.style.scrollSnapType="none",r.container.scrollLeft=l)}(t)}t=!1}))}(),l(),a(),o)for(const t of o)t(r);r.on("detailsChanged",(()=>{l(),a()})),r.emit("created")}(),r}function n(t,n,o){try{if(!(t instanceof Element))throw new Error("Container must be HTML element, found "+typeof t);const r={scrollBehavior:"smooth",scrollStrategy:"fullSlide"},i=Object.assign(Object.assign({},r),n);return window.matchMedia("(prefers-reduced-motion: reduce)").matches&&(i.scrollBehavior="auto"),e(t,i,o)}catch(t){console.error(t)}}const o={skipList:"Skip list"},r={skipLink:"screen-reader-text",skipLinkTarget:"overflow-slider__skip-link-target"};function i(e){return n=>{var i,s,a,l,c,d;const u={texts:Object.assign(Object.assign({},o),(null==e?void 0:e.texts)||[]),classNames:Object.assign(Object.assign({},r),(null==e?void 0:e.classNames)||[]),containerBefore:null!==(i=null==e?void 0:e.containerAfter)&&void 0!==i?i:null,containerAfter:null!==(s=null==e?void 0:e.containerAfter)&&void 0!==s?s:null},f=t("overflow-slider-skip"),v=document.createElement("a");v.setAttribute("href",`#${f}`),v.textContent=u.texts.skipList,v.classList.add(u.classNames.skipLink);const p=document.createElement("div");p.setAttribute("id",f),p.setAttribute("tabindex","-1"),u.containerBefore?null===(a=u.containerBefore.parentNode)||void 0===a||a.insertBefore(v,u.containerBefore):null===(l=n.container.parentNode)||void 0===l||l.insertBefore(v,n.container),u.containerAfter?null===(c=u.containerAfter.parentNode)||void 0===c||c.insertBefore(p,u.containerAfter.nextSibling):null===(d=n.container.parentNode)||void 0===d||d.insertBefore(p,n.container.nextSibling)}}const s={buttonPrevious:"Previous items",buttonNext:"Next items"},a={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>'},l={navContainer:"overflow-slider__arrows",prevButton:"overflow-slider__arrows-button overflow-slider__arrows-button--prev",nextButton:"overflow-slider__arrows-button overflow-slider__arrows-button--next"};function c(t){return e=>{var n,o,r,i;const c={texts:Object.assign(Object.assign({},s),(null==t?void 0:t.texts)||[]),icons:Object.assign(Object.assign({},a),(null==t?void 0:t.icons)||[]),classNames:Object.assign(Object.assign({},l),(null==t?void 0:t.classNames)||[]),container:null!==(n=null==t?void 0:t.container)&&void 0!==n?n:null},d=document.createElement("div");d.classList.add(c.classNames.navContainer);const u=document.createElement("button");u.setAttribute("class",c.classNames.prevButton),u.setAttribute("type","button"),u.setAttribute("aria-label",c.texts.buttonPrevious),u.setAttribute("aria-controls",null!==(o=e.container.getAttribute("id"))&&void 0!==o?o:""),u.setAttribute("data-type","prev"),u.innerHTML=c.icons.prev,u.addEventListener("click",(()=>e.moveToDirection("prev")));const f=document.createElement("button");f.setAttribute("class",c.classNames.nextButton),f.setAttribute("type","button"),f.setAttribute("aria-label",c.texts.buttonNext),f.setAttribute("aria-controls",null!==(r=e.container.getAttribute("id"))&&void 0!==r?r:""),f.setAttribute("data-type","next"),f.innerHTML=c.icons.next,f.addEventListener("click",(()=>e.moveToDirection("next"))),d.appendChild(u),d.appendChild(f);const v=()=>{const t=e.container.scrollLeft,n=e.container.scrollWidth,o=e.container.clientWidth;0===t?u.setAttribute("data-has-content","false"):u.setAttribute("data-has-content","true"),t+o>=n?f.setAttribute("data-has-content","false"):f.setAttribute("data-has-content","true")};c.container?c.container.appendChild(d):null===(i=e.container.parentNode)||void 0===i||i.insertBefore(d,e.container.nextSibling),v(),e.on("scroll",v),e.on("contentsChanged",v),e.on("containerSizeChanged",v)}}const d={scrollIndicator:"overflow-slider__scroll-indicator",scrollIndicatorBar:"overflow-slider__scroll-indicator-bar",scrollIndicatorButton:"overflow-slider__scroll-indicator-button"};function u(t){return e=>{var n,o,r;const i={classNames:Object.assign(Object.assign({},d),(null==t?void 0:t.classNames)||[]),container:null!==(n=null==t?void 0:t.container)&&void 0!==n?n:null},s=document.createElement("div");s.setAttribute("class",i.classNames.scrollIndicator),s.setAttribute("tabindex","0"),s.setAttribute("role","scrollbar"),s.setAttribute("aria-controls",null!==(o=e.container.getAttribute("id"))&&void 0!==o?o:""),s.setAttribute("aria-orientation","horizontal"),s.setAttribute("aria-valuemax","100"),s.setAttribute("aria-valuemin","0"),s.setAttribute("aria-valuenow","0");const a=document.createElement("div");a.setAttribute("class",i.classNames.scrollIndicatorBar);const l=document.createElement("div");l.setAttribute("class",i.classNames.scrollIndicatorButton),l.setAttribute("data-is-grabbed","false"),a.appendChild(l),s.appendChild(a);const c=()=>{s.setAttribute("data-has-overflow",e.details.hasOverflow.toString())};c();const u=()=>{const t=e.container.offsetWidth/e.container.scrollWidth;return e.container.scrollLeft*t};let f=0;const v=()=>{f&&window.cancelAnimationFrame(f),f=window.requestAnimationFrame((()=>{const t=e.container.offsetWidth/e.container.scrollWidth*100,n=u();l.style.width=`${t}%`,l.style.transform=`translateX(${n}px)`;const o=e.container.scrollLeft/(e.container.scrollWidth-e.container.offsetWidth)*100;s.setAttribute("aria-valuenow",Math.round(Number.isNaN(o)?0:o).toString())}))};i.container?i.container.appendChild(s):null===(r=e.container.parentNode)||void 0===r||r.insertBefore(s,e.container.nextSibling),v(),e.on("scroll",v),e.on("contentsChanged",v),e.on("containerSizeChanged",v),e.on("detailsChanged",c),s.addEventListener("keydown",(t=>{"ArrowLeft"===t.key?e.moveToDirection("prev"):"ArrowRight"===t.key&&e.moveToDirection("next")})),s.addEventListener("click",(t=>{const n=l.offsetWidth,o=u(),r=o+n,i=t.pageX-s.offsetLeft;i<o?e.moveToDirection("prev"):i>r&&e.moveToDirection("next")}));let p=!1,h=0,b=0;l.addEventListener("mousedown",(t=>{p=!0,h=t.pageX-s.offsetLeft,b=e.container.scrollLeft,l.style.cursor="grabbing",e.container.style.scrollSnapType="none",l.setAttribute("data-is-grabbed","true"),t.preventDefault(),t.stopPropagation()})),window.addEventListener("mouseup",(()=>{p=!1,l.style.cursor="",e.container.style.scrollSnapType="",l.setAttribute("data-is-grabbed","false")})),window.addEventListener("mousemove",(t=>{if(!p)return;t.preventDefault();const n=t.pageX-s.offsetLeft,o=e.container.scrollWidth/s.offsetWidth,r=(n-h)*o;e.container.scrollLeft=b+r}))}}function f(t){var e;const n=null!==(e=null==t?void 0:t.draggedDistanceThatPreventsClick)&&void 0!==e?e:20;return t=>{let e=!1,o=0,r=0;const i=()=>t.details.hasOverflow;t.container.addEventListener("mousedown",(n=>{i()&&(e=!0,o=n.pageX-t.container.offsetLeft,r=t.container.scrollLeft,t.container.style.cursor="grabbing",t.container.style.scrollSnapType="none")})),window.addEventListener("mouseup",(()=>{i()&&(e=!1,t.container.style.cursor="",t.container.style.scrollSnapType="",setTimeout((()=>{t.container.querySelectorAll(":scope > *").forEach((t=>{t.style.pointerEvents=""}))}),50))})),window.addEventListener("mousemove",(s=>{if(!i())return;if(!e)return;s.preventDefault();const a=s.pageX-t.container.offsetLeft-o;t.container.scrollLeft=r-a;const l=Math.abs(a),c=t.container.querySelectorAll(":scope > *"),d=l>n?"none":"";c.forEach((t=>{t.style.pointerEvents=d}))}))}}const v={dotDescription:"Page %d of %d"},p={dotsContainer:"overflow-slider__dots",dotsItem:"overflow-slider__dot-item"};function h(t){return e=>{var n,o;const r={texts:Object.assign(Object.assign({},v),(null==t?void 0:t.texts)||[]),classNames:Object.assign(Object.assign({},p),(null==t?void 0:t.classNames)||[]),container:null!==(n=null==t?void 0:t.container)&&void 0!==n?n:null},i=document.createElement("div");i.classList.add(r.classNames.dotsContainer);let s=null;const a=()=>{i.setAttribute("data-has-content",e.details.hasOverflow.toString()),i.innerHTML="";const t=document.createElement("ul"),n=e.details.amountOfPages,o=e.details.currentPage;if(!(n<=1)){for(let e=0;e<n;e++){const a=document.createElement("li"),c=document.createElement("button");c.setAttribute("type","button"),c.setAttribute("class",r.classNames.dotsItem),c.setAttribute("aria-label",r.texts.dotDescription.replace("%d",(e+1).toString()).replace("%d",n.toString())),c.setAttribute("aria-pressed",(e===o).toString()),c.setAttribute("data-page",(e+1).toString()),a.appendChild(c),t.appendChild(a),c.addEventListener("click",(()=>l(e+1))),c.addEventListener("focus",(()=>s=e+1)),c.addEventListener("keydown",(t=>{var e;const o=i.querySelector('[aria-pressed="true"]');if(!o)return;const r=parseInt(null!==(e=o.getAttribute("data-page"))&&void 0!==e?e:"1");if("ArrowLeft"===t.key){const t=r-1;if(t>0){const e=i.querySelector(`[data-page="${t}"]`);e&&e.focus(),l(t)}}if("ArrowRight"===t.key){const t=r+1;if(t<=n){const e=i.querySelector(`[data-page="${t}"]`);e&&e.focus(),l(t)}}}))}if(i.appendChild(t),s){const t=i.querySelector(`[data-page="${s}"]`);t&&t.focus()}}},l=t=>{const n=e.details.containerWidth*(t-1);e.container.style.scrollBehavior=e.options.scrollBehavior,e.container.style.scrollSnapType="none",e.container.scrollLeft=n,e.container.style.scrollBehavior="",e.container.style.scrollSnapType=""};a(),r.container?r.container.appendChild(i):null===(o=e.container.parentNode)||void 0===o||o.insertBefore(i,e.container.nextSibling),e.on("detailsChanged",(()=>{a()}))}}export{c as ArrowsPlugin,h as DotsPlugin,f as DragScrollingPlugin,n as OverflowSlider,u as ScrollIndicatorPlugin,i as SkipLinksPlugin};