@evermade/overflow-slider 4.2.0 → 4.2.1

package/docs/dist/plugins/dots/index.esm.js

@@ -20,6 +20,7 @@ function DotsPlugin(args) {
         const buildDots = () => {
             dots.setAttribute('data-has-content', slider.details.hasOverflow.toString());
             dots.innerHTML = '';
+            console.log('buildDots');
             const dotsList = document.createElement('ul');
             const count = options.type === 'view' ? slider.details.amountOfPages : slider.details.slideCount;
             const currentIndex = options.type === 'view' ? slider.details.currentPage : slider.activeSlideIdx;
@@ -77,8 +78,15 @@ function DotsPlugin(args) {
             }
         };
         const activateDot = (index) => {
+            console.log('activateDot', index, 'slider.details', slider.details);
             if (options.type === 'view') {
-                const targetPosition = slider.details.containerWidth * (index - 1);
+                const count = slider.details.amountOfPages;
+                let targetPosition = slider.details.containerWidth * (index - 1);
+                // For the last page, scroll to the maximum scroll position to ensure it activates
+                if (index === count) {
+                    const maxScroll = slider.details.scrollableAreaWidth - slider.details.containerWidth;
+                    targetPosition = maxScroll;
+                }
                 const scrollLeft = slider.options.rtl ? -targetPosition : targetPosition;
                 slider.container.scrollTo({
                     left: scrollLeft,

package/docs/dist/plugins/dots/index.min.js

@@ -1 +1 @@
-const t={dotDescription:"Page %d of %d"},e={dotsContainer:"overflow-slider__dots",dotsItem:"overflow-slider__dot-item"};function n(n){return i=>{var o,s,a;const r={type:null!==(o=null==n?void 0:n.type)&&void 0!==o?o:"slide",texts:Object.assign(Object.assign({},t),(null==n?void 0:n.texts)||[]),classNames:Object.assign(Object.assign({},e),(null==n?void 0:n.classNames)||[]),container:null!==(s=null==n?void 0:n.container)&&void 0!==s?s:null},l=document.createElement("div");l.classList.add(r.classNames.dotsContainer);let d=null;const c=()=>{l.setAttribute("data-has-content",i.details.hasOverflow.toString()),l.innerHTML="";const t=document.createElement("ul"),e="view"===r.type?i.details.amountOfPages:i.details.slideCount,n="view"===r.type?i.details.currentPage:i.activeSlideIdx;if(!(e<=1)){for(let i=0;i<e;i++){const o=document.createElement("li"),s=document.createElement("button");s.setAttribute("type","button"),s.setAttribute("class",r.classNames.dotsItem),s.setAttribute("aria-label",r.texts.dotDescription.replace("%d",(i+1).toString()).replace("%d",e.toString())),s.setAttribute("aria-pressed",(i===n).toString()),s.setAttribute("data-item",(i+1).toString()),o.appendChild(s),t.appendChild(o),s.addEventListener("click",()=>u(i+1)),s.addEventListener("focus",()=>d=i+1),s.addEventListener("keydown",t=>{var n;const i=l.querySelector('[aria-pressed="true"]');if(!i)return;const o=parseInt(null!==(n=i.getAttribute("data-item"))&&void 0!==n?n:"1");if("ArrowLeft"===t.key){const t=o-1;if(t>0){const e=l.querySelector(`[data-item="${t}"]`);e&&e.focus(),u(t)}}if("ArrowRight"===t.key){const t=o+1;if(t<=e){const e=l.querySelector(`[data-item="${t}"]`);e&&e.focus(),u(t)}}})}if(l.appendChild(t),d){const t=l.querySelector(`[data-item="${d}"]`);t&&t.focus()}}},u=t=>{if("view"===r.type){const e=i.details.containerWidth*(t-1),n=i.options.rtl?-e:e;i.container.scrollTo({left:n,behavior:i.options.scrollBehavior})}else i.moveToSlide(t-1)};c(),r.container?r.container.appendChild(l):null===(a=i.container.parentNode)||void 0===a||a.insertBefore(l,i.container.nextSibling),i.on("scrollEnd",c),i.on("contentsChanged",c),i.on("containerSizeChanged",c),i.on("detailsChanged",c)}}export{n as default};
+const t={dotDescription:"Page %d of %d"},e={dotsContainer:"overflow-slider__dots",dotsItem:"overflow-slider__dot-item"};function n(n){return i=>{var o,s,a;const l={type:null!==(o=null==n?void 0:n.type)&&void 0!==o?o:"slide",texts:Object.assign(Object.assign({},t),(null==n?void 0:n.texts)||[]),classNames:Object.assign(Object.assign({},e),(null==n?void 0:n.classNames)||[]),container:null!==(s=null==n?void 0:n.container)&&void 0!==s?s:null},r=document.createElement("div");r.classList.add(l.classNames.dotsContainer);let d=null;const c=()=>{r.setAttribute("data-has-content",i.details.hasOverflow.toString()),r.innerHTML="",console.log("buildDots");const t=document.createElement("ul"),e="view"===l.type?i.details.amountOfPages:i.details.slideCount,n="view"===l.type?i.details.currentPage:i.activeSlideIdx;if(!(e<=1)){for(let i=0;i<e;i++){const o=document.createElement("li"),s=document.createElement("button");s.setAttribute("type","button"),s.setAttribute("class",l.classNames.dotsItem),s.setAttribute("aria-label",l.texts.dotDescription.replace("%d",(i+1).toString()).replace("%d",e.toString())),s.setAttribute("aria-pressed",(i===n).toString()),s.setAttribute("data-item",(i+1).toString()),o.appendChild(s),t.appendChild(o),s.addEventListener("click",()=>u(i+1)),s.addEventListener("focus",()=>d=i+1),s.addEventListener("keydown",t=>{var n;const i=r.querySelector('[aria-pressed="true"]');if(!i)return;const o=parseInt(null!==(n=i.getAttribute("data-item"))&&void 0!==n?n:"1");if("ArrowLeft"===t.key){const t=o-1;if(t>0){const e=r.querySelector(`[data-item="${t}"]`);e&&e.focus(),u(t)}}if("ArrowRight"===t.key){const t=o+1;if(t<=e){const e=r.querySelector(`[data-item="${t}"]`);e&&e.focus(),u(t)}}})}if(r.appendChild(t),d){const t=r.querySelector(`[data-item="${d}"]`);t&&t.focus()}}},u=t=>{if(console.log("activateDot",t,"slider.details",i.details),"view"===l.type){const e=i.details.amountOfPages;let n=i.details.containerWidth*(t-1);if(t===e){n=i.details.scrollableAreaWidth-i.details.containerWidth}const o=i.options.rtl?-n:n;i.container.scrollTo({left:o,behavior:i.options.scrollBehavior})}else i.moveToSlide(t-1)};c(),l.container?l.container.appendChild(r):null===(a=i.container.parentNode)||void 0===a||a.insertBefore(r,i.container.nextSibling),i.on("scrollEnd",c),i.on("contentsChanged",c),i.on("containerSizeChanged",c),i.on("detailsChanged",c)}}export{n as default};

package/docs/index.html

@@ -180,6 +180,21 @@
 									<a href="#9" class="example-item example-item--9">9</a>
 									<a href="#10" class="example-item example-item--10">10</a>
 								</div>
+								<p style="margin-top:1.5rem;">Display dots indicator (by view) and FullWidthPlugin.</p>
+								<div class="example-container-1-full-width-wrapper">
+									<div class="overflow-slider example-container example-container-1-dots-view-full">
+										<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>
 							</div>
 
 							<div class="entry__item">

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evermade/overflow-slider",
-	"version": "4.2.0",
+	"version": "4.2.1",
 	"description": "Accessible slider that is powered by overflow: auto.",
 	"type": "module",
 	"main": "dist/index.js",

package/src/core/details.ts

@@ -10,7 +10,7 @@ export default function details( slider: Slider) {
 	let containerHeight = 0;
 	let scrollableAreaWidth = 0;
 	let amountOfPages = 0;
-	let currentPage = 1;
+	let currentPage = 0;
 
 	if ( Math.floor( slider.getInclusiveScrollWidth() ) > Math.floor( slider.getInclusiveClientWidth() ) ) {
 		hasOverflow = true;
@@ -28,8 +28,11 @@ export default function details( slider: Slider) {
 
 	if ( Math.floor( slider.getScrollLeft() ) >= 0) {
 		currentPage = Math.floor(slider.getScrollLeft() / containerWidth);
-		// consider as last page if the scrollLeft + containerWidth is equal to scrollWidth
-		if (Math.floor( slider.getScrollLeft() + containerWidth ) === Math.floor( scrollableAreaWidth ) ) {
+
+		// Consider as last page if we're within tolerance of the maximum scroll position
+		// When FullWidthPlugin is active, account for the margin offset
+		const maxScroll = scrollableAreaWidth - containerWidth - (2 * slider.getLeftOffset() );
+		if ( slider.getScrollLeft() >= maxScroll - 1 ) {
 			currentPage = amountOfPages - 1;
 		}
 	}

package/src/core/slider.ts

@@ -593,6 +593,8 @@ export default function Slider( container: HTMLElement, options : SliderOptionAr
 		snapToClosestSlide,
 		getInclusiveScrollWidth,
 		getInclusiveClientWidth,
+		getLeftOffset,
+		getGapSize,
 		getScrollLeft,
 		setScrollLeft,
 		setActiveSlideIdx,

package/src/core/types.ts

@@ -19,6 +19,8 @@ export type Slider<O = {}, C = {}, H extends string = string> = {
 	 ) => boolean
 	getInclusiveScrollWidth: () => number
 	getInclusiveClientWidth: () => number
+	getGapSize: () => number
+	getLeftOffset: () => number
 	getScrollLeft: () => number
 	setScrollLeft: (value: number) => void
 	setActiveSlideIdx: () => void

package/src/plugins/dots/index.ts

@@ -45,6 +45,8 @@ export default function DotsPlugin( args?: DeepPartial<DotsOptions> ) {
 			dots.setAttribute( 'data-has-content', slider.details.hasOverflow.toString() );
 			dots.innerHTML = '';
 
+			console.log('buildDots');
+
 			const dotsList = document.createElement( 'ul' );
 
 			const count = options.type === 'view' ? slider.details.amountOfPages : slider.details.slideCount;
@@ -105,10 +107,19 @@ export default function DotsPlugin( args?: DeepPartial<DotsOptions> ) {
 				}
 			}
 		};
-
 		const activateDot = ( index: number ) => {
+			console.log('activateDot', index, 'slider.details', slider.details);
+			
 			if ( options.type === 'view' ) {
-				const targetPosition = slider.details.containerWidth * ( index - 1 );
+				const count = slider.details.amountOfPages;
+				let targetPosition = slider.details.containerWidth * ( index - 1 );
+
+				// For the last page, scroll to the maximum scroll position to ensure it activates
+				if ( index === count ) {
+					const maxScroll = slider.details.scrollableAreaWidth - slider.details.containerWidth;
+					targetPosition = maxScroll;
+				}
+
 				const scrollLeft = slider.options.rtl ? -targetPosition : targetPosition;
 				slider.container.scrollTo({
 					left: scrollLeft,

package/src/plugins/dots/styles.scss

@@ -49,7 +49,6 @@
 		position: absolute;
 	}
 	&[aria-pressed="true"],
-	&:focus,
 	&:hover {
 		background: var(--overflow-slider-dot-active-color);
 	}