@evermade/overflow-slider/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,s=0,c=1;return 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(),s=Math.ceil(a/i),Math.floor(t.getScrollLeft())>=0&&(c=Math.floor(t.getScrollLeft()/i),Math.floor(t.getScrollLeft()+i)===Math.floor(a)&&(c=s-1)),o={hasOverflow:n,slideCount:l,containerWidth:i,containerHeight:r,scrollableAreaWidth:a,amountOfPages:s,currentPage:c},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 s(){i.slides=Array.from(i.container.querySelectorAll(i.options.slidesSelector))}function c(){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",`${v()}px`),"function"==typeof i.options.targetWidth&&i.options.cssVariableContainer.style.setProperty("--slider-container-target-width",`${i.options.targetWidth(i)}px`)}function d(){i.container.setAttribute("data-has-overflow",i.details.hasOverflow?"true":"false"),i.options.rtl&&i.container.setAttribute("dir","rtl")}function f(t,e=null){const o=e||i.options.scrollBehavior,n=t.getBoundingClientRect(),l=i.container.getBoundingClientRect(),r=i.container.offsetWidth,a=i.container.scrollLeft,s=n.left-l.left+a,c=s+n.width;let d=null;d=Math.floor(s)<Math.floor(a)?s:Math.floor(c)>Math.floor(a)+Math.floor(r)?c-r:0===Math.floor(s)?0:s,null!==d&&setTimeout(t=>{i.emit("programmaticScrollStart"),i.container.scrollTo({left:t,behavior:o})},50,d)}function h(){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,s=null;for(let t=0;t<r.length;t++){const e=Math.abs(r[t].slideEnd-l);(null===s||e<s)&&(s=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+m();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 u(t){const e=i.slides[t];e&&f(e)}function g(){return i.options.rtl?Math.abs(i.container.scrollLeft):i.container.scrollLeft}function m(){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 v(){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-m()):Math.min(i.getInclusiveScrollWidth(),r+m()),"next"===a){let e=!1;for(let l of i.slides){const i=l.getBoundingClientRect(),a=i.left-n.left+o,s=a+i.width;if(Math.floor(a)<Math.floor(r)&&Math.floor(s)>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,s=a+i.width;if(Math.floor(a)<Math.floor(o)&&Math.floor(s)>Math.floor(o)){t=s-l,e=!0;break}}e||(t=Math.max(0,o-l)),t&&Math.floor(t)<Math.floor(o)&&(r=t)}}const s=r-v();Math.floor(s)>=0&&(r=s),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(),s=a.left-o.left+n,c=s+a.width;return i.options.rtl?!(0!==n||!i.details.hasOverflow)||("forwards"===e&&r>i.activeSlideIdx&&Math.floor(s)<Math.floor(n)||"backwards"===e&&r<i.activeSlideIdx&&Math.floor(c)>Math.floor(n+l)):"forwards"===e&&r>i.activeSlideIdx&&Math.floor(c)>Math.floor(n+l)||"backwards"===e&&r<i.activeSlideIdx&&Math.floor(s)<Math.floor(n)})},moveToSlide:u,moveToSlideInDirection:function(t){const e=i.activeSlideIdx;"prev"===t?e>0&&u(e-1):"next"===t&&e<i.slides.length-1&&u(e+1)},snapToClosestSlide:function(t="prev"){var e,o;const{slides:n,options:l,container:r}=i,{rtl:a,emulateScrollSnapMaxThreshold:s=10,scrollBehavior:c="smooth"}=l,d=a?"prev"===t:"next"===t,f=g(),h=r.getBoundingClientRect(),u=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 v=[...n].map(t=>{const{width:e}=t.getBoundingClientRect(),o=t.getBoundingClientRect().left-h.left+f,n=o-m,l=Math.min(n+e/2,n+s);return{start:o-m,trigger:l}});let p=null;if(d){const t=v.find(t=>f<=t.trigger);p=null!==(e=null==t?void 0:t.start)&&void 0!==e?e:null}else{const t=[...v].reverse().find(t=>f>=t.trigger);p=null!==(o=null==t?void 0:t.start)&&void 0!==o?o:null}if(null==p)return;const M=Math.max(0,Math.floor(p))*u;r.scrollTo({left:M,behavior:c})},getInclusiveScrollWidth:function(){return i.container.scrollWidth+e(i.container)},getInclusiveClientWidth:function(){return i.container.clientWidth+e(i.container)},getScrollLeft:g,setScrollLeft:function(t){i.container.scrollLeft=i.options.rtl?-t:t},setActiveSlideIdx:h,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)),s(),i.slides.forEach(t=>{t.style.transition="none"}),a(!0),h(),i.on("contentsChanged",()=>{s(),a(),h()}),i.on("containerSizeChanged",()=>a());let n=0;if(i.on("scroll",()=>{n&&window.cancelAnimationFrame(n),n=window.requestAnimationFrame(()=>{a(),h()})}),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,s=!1,c=!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")),s&&d()});const d=()=>{const t=i.container.scrollLeft;Math.floor(l)===Math.floor(t)||c||(s||(i.emit("nativeScrollStart"),s=!0),i.emit("nativeScroll"),l=t,clearTimeout(e),e=setTimeout(()=>{s=!1,i.emit("nativeScrollEnd"),r=l},50))};i.container.addEventListener("touchmove",d),i.container.addEventListener("mousewheel",d),i.container.addEventListener("wheel",d),i.on("programmaticScrollStart",()=>{c=!0}),i.container.addEventListener("scroll",()=>{const t=i.container.scrollLeft;Math.floor(r)!==Math.floor(t)&&!s&&c&&(r=t,clearTimeout(o),o=setTimeout(()=>{c=!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 h=!1;i.container.addEventListener("mousedown",()=>{h=!0}),i.container.addEventListener("touchstart",()=>{h=!0},{passive:!0}),i.container.addEventListener("focusin",t=>{if(!h){let e=t.target;for(;e.parentElement!==i.container&&e.parentElement;)e=e.parentElement;f(e,"auto")}h=!1})}(),d(),c(),l){for(const t of l)t(i);a(),h(),c(),i.emit("pluginsLoaded")}i.on("detailsChanged",()=>{d(),c()}),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