@evermade/overflow-slider/docs/dist/index.min.js

Accessible slider that is powered by overflow: auto.

"use strict";function t(e,o=1){const n=`${e}-${o}`;return document.getElementById(n)?t(e,o+1):n}function e(t){if(0===t.children.length)return 0;const e=t.children[0],o=getComputedStyle(e),n=parseFloat(o.marginLeft),l=t.children[t.children.length-1],i=getComputedStyle(l);return n+parseFloat(i.marginRight)}function o(o,n,l){let i,r={};function a(t=!1){const e=i.details,o=function(t){var e;let o,n=!1,l=0,i=0,r=0,a=0,c=0,s=0;if(Math.floor(t.getInclusiveScrollWidth())>Math.floor(t.getInclusiveClientWidth())&&(n=!0),l=null!==(e=t.slides.length)&&void 0!==e?e:0,i=t.container.offsetWidth,r=t.container.offsetHeight,a=t.getInclusiveScrollWidth(),c=Math.ceil(a/i),Math.floor(t.getScrollLeft())>=0){s=Math.floor(t.getScrollLeft()/i);const e=a-i-2*t.getLeftOffset();t.getScrollLeft()>=e-1&&(s=c-1)}return o={hasOverflow:n,slideCount:l,containerWidth:i,containerHeight:r,scrollableAreaWidth:a,amountOfPages:c,currentPage:s},o}(i);i.details=o,t||function(t,e){const o=Object.keys(t),n=Object.keys(e);if(o.length!==n.length)return!1;for(let n of o)if(!Object.prototype.hasOwnProperty.call(e,n)||t[n]!==e[n])return!1;return!0}(e,o)?t&&i.emit("detailsChanged"):i.emit("detailsChanged")}function c(){i.slides=Array.from(i.container.querySelectorAll(i.options.slidesSelector))}function s(){i.options.cssVariableContainer.style.setProperty("--slider-container-height",`${i.details.containerHeight}px`),i.options.cssVariableContainer.style.setProperty("--slider-container-width",`${i.details.containerWidth}px`),i.options.cssVariableContainer.style.setProperty("--slider-scrollable-width",`${i.details.scrollableAreaWidth}px`),i.options.cssVariableContainer.style.setProperty("--slider-slides-count",`${i.details.slideCount}`),i.options.cssVariableContainer.style.setProperty("--slider-x-offset",`${m()}px`),"function"==typeof i.options.targetWidth&&i.options.cssVariableContainer.style.setProperty("--slider-container-target-width",`${i.options.targetWidth(i)}px`)}function f(){i.container.setAttribute("data-has-overflow",i.details.hasOverflow?"true":"false"),i.options.rtl&&i.container.setAttribute("dir","rtl")}function d(){const t=i.container.getBoundingClientRect(),e=i.getScrollLeft(),o=i.slides;let n=0,l=!1;if(i.options.rtl){const l=i.getInclusiveScrollWidth()-e-i.getInclusiveClientWidth(),r=[];for(let e=o.length-1;e>=0;e--){const n=o[e].getBoundingClientRect(),i=Math.abs(n.left)-Math.abs(t.left)+l;r.push({slide:o[e],slideEnd:i})}let a=null,c=null;for(let t=0;t<r.length;t++){const e=Math.abs(r[t].slideEnd-l);(null===c||e<c)&&(c=e,a=r[t].slide)}n=a?o.indexOf(a):o.length-1}else for(let i=0;i<o.length;i++){const r=o[i].getBoundingClientRect().left-t.left+e+g();if(Math.floor(r)>=Math.floor(e)){n=i;break}i===o.length-1&&(l=!0)}l&&(n=o.length-1);const r=i.activeSlideIdx;i.activeSlideIdx=n,r!==n&&i.emit("activeSlideChanged")}function h(t){const e=i.slides[t];e&&function(t,e=null){const o=e||i.options.scrollBehavior,n=t.getBoundingClientRect(),l=i.container.getBoundingClientRect(),r=i.container.offsetWidth,a=i.container.scrollLeft,c=n.left-l.left+a,s=c+n.width;let f=null;f=Math.floor(c)<Math.floor(a)?c:Math.floor(s)>Math.floor(a)+Math.floor(r)?s-r:0===Math.floor(c)?0:c,null!==f&&setTimeout(t=>{i.emit("programmaticScrollStart"),i.container.scrollTo({left:t,behavior:o})},50,f)}(e)}function u(){return i.options.rtl?Math.abs(i.container.scrollLeft):i.container.scrollLeft}function g(){let t=0;if(i.slides.length>1){const e=i.slides[0].getBoundingClientRect(),o=i.slides[1].getBoundingClientRect();t=i.options.rtl?Math.abs(Math.floor(o.right-e.left)):Math.floor(o.left-e.right)}return t}function m(){let t=0;const e=i.container.getAttribute("data-full-width-offset");return e&&(t=parseInt(e)),Math.floor(t)}return i={emit:function(t){var e;r&&r[t]&&r[t].forEach(t=>{t(i)});const o=null===(e=null==i?void 0:i.options)||void 0===e?void 0:e[t];"function"==typeof o&&o(i)},moveToDirection:function(t="prev"){const e=i.options.scrollStrategy,o=i.container.scrollLeft,n=i.container.getBoundingClientRect(),l=i.container.offsetWidth;let r=o;const a=i.options.rtl?"prev"===t?"next":"prev":t;if("prev"===a?r=Math.max(0,o-i.container.offsetWidth):"next"===a&&(r=Math.min(i.getInclusiveScrollWidth(),o+i.container.offsetWidth)),"fullSlide"===e){let t=null;if(t="prev"===a?Math.max(0,r-g()):Math.min(i.getInclusiveScrollWidth(),r+g()),"next"===a){let e=!1;for(let l of i.slides){const i=l.getBoundingClientRect(),a=i.left-n.left+o,c=a+i.width;if(Math.floor(a)<Math.floor(r)&&Math.floor(c)>Math.floor(r)){t=a,e=!0;break}}if(e||(t=Math.min(r,i.getInclusiveScrollWidth()-i.container.offsetWidth)),t)if(Math.floor(t)>Math.floor(o)){const e=Math.floor(i.getInclusiveScrollWidth())-Math.floor(l);r=Math.min(t,e)}else r=Math.min(i.getInclusiveScrollWidth(),o+l)}else{let e=!1;for(let r of i.slides){const i=r.getBoundingClientRect(),a=i.left-n.left+o,c=a+i.width;if(Math.floor(a)<Math.floor(o)&&Math.floor(c)>Math.floor(o)){t=c-l,e=!0;break}}e||(t=Math.max(0,o-l)),t&&Math.floor(t)<Math.floor(o)&&(r=t)}}const c=r-m();Math.floor(c)>=0&&(r=c),i.emit("programmaticScrollStart"),i.container.style.scrollBehavior=i.options.scrollBehavior,i.container.scrollLeft=r,setTimeout(()=>i.container.style.scrollBehavior="",50)},canMoveToSlide:function(t){if(t<0||t>=i.slides.length)return!1;if(t===i.activeSlideIdx)return!1;const e=(i.options.rtl,t<i.activeSlideIdx?"backwards":"forwards"),o=i.container.getBoundingClientRect(),n=i.getScrollLeft(),l=i.details.containerWidth;return i.slides.some((t,r)=>{if(r===i.activeSlideIdx)return!1;const a=t.getBoundingClientRect(),c=a.left-o.left+n,s=c+a.width;return i.options.rtl?!(0!==n||!i.details.hasOverflow)||("forwards"===e&&r>i.activeSlideIdx&&Math.floor(c)<Math.floor(n)||"backwards"===e&&r<i.activeSlideIdx&&Math.floor(s)>Math.floor(n+l)):"forwards"===e&&r>i.activeSlideIdx&&Math.floor(s)>Math.floor(n+l)||"backwards"===e&&r<i.activeSlideIdx&&Math.floor(c)<Math.floor(n)})},moveToSlide:h,moveToSlideInDirection:function(t){const e=i.activeSlideIdx;"prev"===t?e>0&&h(e-1):"next"===t&&e<i.slides.length-1&&h(e+1)},snapToClosestSlide:function(t="prev"){var e,o;const{slides:n,options:l,container:r}=i,{rtl:a,emulateScrollSnapMaxThreshold:c=10,scrollBehavior:s="smooth"}=l,f=a?"prev"===t:"next"===t,d=u(),h=r.getBoundingClientRect(),g=a?-1:1;let m=0;if("function"==typeof l.targetWidth)try{const t=l.targetWidth(i),e=h.width;Number.isFinite(t)&&t>0&&t<e&&(m=(e-t)/2)}catch(t){}const p=[...n].map(t=>{const{width:e}=t.getBoundingClientRect(),o=t.getBoundingClientRect().left-h.left+d,n=o-m,l=Math.min(n+e/2,n+c);return{start:o-m,trigger:l}});let v=null;if(f){const t=p.find(t=>d<=t.trigger);v=null!==(e=null==t?void 0:t.start)&&void 0!==e?e:null}else{const t=[...p].reverse().find(t=>d>=t.trigger);v=null!==(o=null==t?void 0:t.start)&&void 0!==o?o:null}if(null==v)return;const S=Math.max(0,Math.floor(v))*g;r.scrollTo({left:S,behavior:s})},getInclusiveScrollWidth:function(){return i.container.scrollWidth+e(i.container)},getInclusiveClientWidth:function(){return i.container.clientWidth+e(i.container)},getLeftOffset:m,getGapSize:g,getScrollLeft:u,setScrollLeft:function(t){i.container.scrollLeft=i.options.rtl?-t:t},setActiveSlideIdx:d,on:function(t,e){r[t]||(r[t]=[]),r[t].push(e)},options:n},function(){i.container=o;let e=o.getAttribute("id");null===e&&(e=t("overflow-slider"),o.setAttribute("id",e)),c(),i.slides.forEach(t=>{t.style.transition="none"}),a(!0),d(),i.on("contentsChanged",()=>{c(),a(),d()}),i.on("containerSizeChanged",()=>a());let n=0;if(i.on("scroll",()=>{n&&window.cancelAnimationFrame(n),n=window.requestAnimationFrame(()=>{a(),d()})}),function(){new MutationObserver(()=>i.emit("contentsChanged")).observe(i.container,{childList:!0});let t,e,o;new ResizeObserver(()=>i.emit("containerSizeChanged")).observe(i.container);let n=i.container.scrollLeft,l=i.container.scrollLeft,r=i.container.scrollLeft,a=!1,c=!1,s=!1;i.container.addEventListener("scroll",()=>{const e=i.container.scrollLeft;Math.floor(n)!==Math.floor(e)&&(a||(a=!0,i.emit("scrollStart")),n=e,clearTimeout(t),t=setTimeout(()=>{a=!1,i.emit("scrollEnd")},50),i.emit("scroll")),c&&f()});const f=()=>{const t=i.container.scrollLeft;Math.floor(l)===Math.floor(t)||s||(c||(i.emit("nativeScrollStart"),c=!0),i.emit("nativeScroll"),l=t,clearTimeout(e),e=setTimeout(()=>{c=!1,i.emit("nativeScrollEnd"),r=l},50))};i.container.addEventListener("touchmove",f),i.container.addEventListener("mousewheel",f),i.container.addEventListener("wheel",f),i.on("programmaticScrollStart",()=>{s=!0}),i.container.addEventListener("scroll",()=>{const t=i.container.scrollLeft;Math.floor(r)!==Math.floor(t)&&!c&&s&&(r=t,clearTimeout(o),o=setTimeout(()=>{s=!1,i.emit("programmaticScrollEnd"),l=r},50),i.emit("programmaticScroll"))}),i.on("programmaticScrollStart",()=>{i.container.style.scrollSnapType="none"}),i.on("nativeScrollStart",()=>{i.container.style.scrollSnapType=""});let d=!1;i.container.addEventListener("mousedown",()=>{d=!0}),i.container.addEventListener("touchstart",()=>{d=!0},{passive:!0}),i.container.addEventListener("focusin",t=>{if(d)return void(d=!1);if(d=!1,!i.details.hasOverflow)return;const e=t.target;let o=e;for(;o.parentElement!==i.container;){if(!o.parentElement)return;o=o.parentElement}i.emit("programmaticScrollStart"),setTimeout(()=>{!function(t,e){const o=i.options.rtl,n=i.container.getBoundingClientRect(),l=i.container.offsetWidth,r=t.getBoundingClientRect(),a=i.container.scrollLeft,c=r.left-n.left,s=r.right-n.right;if(c>=-1&&s<=1)return i.container.style.scrollSnapType="",void i.emit("programmaticScrollEnd");let f;if(r.width<=l)f=o?a+s:a+c;else if(e!==t){const t=e.getBoundingClientRect(),l=t.left-n.left,r=t.right-n.right;if(l>=-1&&r<=1)return i.container.style.scrollSnapType="",void i.emit("programmaticScrollEnd");f=(t.width,o?a+r:a+l)}else f=o?a+s:a+c;i.emit("programmaticScrollStart"),i.container.scrollTo({left:f,behavior:"auto"})}(o,e),i.emit("focusScroll")},50)})}(),f(),s(),l){for(const t of l)t(i);a(),d(),s(),i.emit("pluginsLoaded")}i.on("detailsChanged",()=>{f(),s()}),i.emit("created"),i.slides.forEach(t=>{t.style.removeProperty("transition")}),i.container.setAttribute("data-ready","true")}(),i}exports.OverflowSlider=function(t,e,n){try{if(!(t instanceof Element))throw new Error("Container must be HTML element, found "+typeof t);const l={cssVariableContainer:t,scrollBehavior:"smooth",scrollStrategy:"fullSlide",slidesSelector:":scope > *",emulateScrollSnap:!1,emulateScrollSnapMaxThreshold:64,rtl:!1},i=Object.assign(Object.assign({},l),e);return window.matchMedia("(prefers-reduced-motion: reduce)").matches&&(i.scrollBehavior="auto"),o(t,i,n)}catch(t){console.error(t)}};
//# sourceMappingURL=index.min.js.map