UNPKG

swiper

Version:

Most modern mobile touch slider and framework with hardware accelerated transitions

2 lines 5.57 kB
import{g as getDocument}from"../shared/ssr-window.esm.min.mjs";import{c as createElement,n as nextTick,b as elementOffset}from"../shared/utils.min.mjs";import{c as createElementIfNotDefined}from"../shared/create-element-if-not-defined.min.mjs";function Scrollbar(l){let{swiper:s,extendParams:r,on:a,emit:e}=l;const t=getDocument();let o,n,i,c,p=!1,d=null,m=null;function b(){if(!s.params.scrollbar.el||!s.scrollbar.el)return;const{scrollbar:l,rtlTranslate:r}=s,{dragEl:a,el:e}=l,t=s.params.scrollbar,o=s.params.loop?s.progressLoop:s.progress;let c=n,p=(i-n)*o;r?(p=-p,p>0?(c=n-p,p=0):-p+n>i&&(c=i+p)):p<0?(c=n+p,p=0):p+n>i&&(c=i-p),s.isHorizontal()?(a.style.transform=`translate3d(${p}px, 0, 0)`,a.style.width=`${c}px`):(a.style.transform=`translate3d(0px, ${p}px, 0)`,a.style.height=`${c}px`),t.hide&&(clearTimeout(d),e.style.opacity=1,d=setTimeout((()=>{e.style.opacity=0,e.style.transitionDuration="400ms"}),1e3))}function u(){if(!s.params.scrollbar.el||!s.scrollbar.el)return;const{scrollbar:l}=s,{dragEl:r,el:a}=l;r.style.width="",r.style.height="",i=s.isHorizontal()?a.offsetWidth:a.offsetHeight,c=s.size/(s.virtualSize+s.params.slidesOffsetBefore-(s.params.centeredSlides?s.snapGrid[0]:0)),n="auto"===s.params.scrollbar.dragSize?i*c:parseInt(s.params.scrollbar.dragSize,10),s.isHorizontal()?r.style.width=`${n}px`:r.style.height=`${n}px`,a.style.display=c>=1?"none":"",s.params.scrollbar.hide&&(a.style.opacity=0),s.params.watchOverflow&&s.enabled&&l.el.classList[s.isLocked?"add":"remove"](s.params.scrollbar.lockClass)}function f(l){return s.isHorizontal()?l.clientX:l.clientY}function g(l){const{scrollbar:r,rtlTranslate:a}=s,{el:e}=r;let t;t=(f(l)-elementOffset(e)[s.isHorizontal()?"left":"top"]-(null!==o?o:n/2))/(i-n),t=Math.max(Math.min(t,1),0),a&&(t=1-t);const c=s.minTranslate()+(s.maxTranslate()-s.minTranslate())*t;s.updateProgress(c),s.setTranslate(c),s.updateActiveIndex(),s.updateSlidesClasses()}function y(l){const r=s.params.scrollbar,{scrollbar:a,wrapperEl:t}=s,{el:n,dragEl:i}=a;p=!0,o=l.target===i?f(l)-l.target.getBoundingClientRect()[s.isHorizontal()?"left":"top"]:null,l.preventDefault(),l.stopPropagation(),t.style.transitionDuration="100ms",i.style.transitionDuration="100ms",g(l),clearTimeout(m),n.style.transitionDuration="0ms",r.hide&&(n.style.opacity=1),s.params.cssMode&&(s.wrapperEl.style["scroll-snap-type"]="none"),e("scrollbarDragStart",l)}function h(l){const{scrollbar:r,wrapperEl:a}=s,{el:t,dragEl:o}=r;p&&(l.preventDefault?l.preventDefault():l.returnValue=!1,g(l),a.style.transitionDuration="0ms",t.style.transitionDuration="0ms",o.style.transitionDuration="0ms",e("scrollbarDragMove",l))}function v(l){const r=s.params.scrollbar,{scrollbar:a,wrapperEl:t}=s,{el:o}=a;p&&(p=!1,s.params.cssMode&&(s.wrapperEl.style["scroll-snap-type"]="",t.style.transitionDuration=""),r.hide&&(clearTimeout(m),m=nextTick((()=>{o.style.opacity=0,o.style.transitionDuration="400ms"}),1e3)),e("scrollbarDragEnd",l),r.snapOnRelease&&s.slideToClosest())}function D(l){const{scrollbar:r,params:a}=s,e=r.el;if(!e)return;const o=e,n=!!a.passiveListeners&&{passive:!1,capture:!1},i=!!a.passiveListeners&&{passive:!0,capture:!1};if(!o)return;const c="on"===l?"addEventListener":"removeEventListener";o[c]("pointerdown",y,n),t[c]("pointermove",h,n),t[c]("pointerup",v,i)}function C(){const{scrollbar:l,el:r}=s;s.params.scrollbar=createElementIfNotDefined(s,s.originalParams.scrollbar,s.params.scrollbar,{el:"swiper-scrollbar"});const a=s.params.scrollbar;if(!a.el)return;let e,o;"string"==typeof a.el&&s.isElement&&(e=s.el.querySelector(a.el)),e||"string"!=typeof a.el?e||(e=a.el):e=t.querySelectorAll(a.el),s.params.uniqueNavElements&&"string"==typeof a.el&&e.length>1&&1===r.querySelectorAll(a.el).length&&(e=r.querySelector(a.el)),e.length>0&&(e=e[0]),e.classList.add(s.isHorizontal()?a.horizontalClass:a.verticalClass),e&&(o=e.querySelector(`.${s.params.scrollbar.dragClass}`),o||(o=createElement("div",s.params.scrollbar.dragClass),e.append(o))),Object.assign(l,{el:e,dragEl:o}),a.draggable&&s.params.scrollbar.el&&s.scrollbar.el&&D("on"),e&&e.classList[s.enabled?"remove":"add"](s.params.scrollbar.lockClass)}function E(){const l=s.params.scrollbar,r=s.scrollbar.el;r&&r.classList.remove(s.isHorizontal()?l.horizontalClass:l.verticalClass),s.params.scrollbar.el&&s.scrollbar.el&&D("off")}r({scrollbar:{el:null,dragSize:"auto",hide:!1,draggable:!1,snapOnRelease:!0,lockClass:"swiper-scrollbar-lock",dragClass:"swiper-scrollbar-drag",scrollbarDisabledClass:"swiper-scrollbar-disabled",horizontalClass:"swiper-scrollbar-horizontal",verticalClass:"swiper-scrollbar-vertical"}}),s.scrollbar={el:null,dragEl:null},a("init",(()=>{!1===s.params.scrollbar.enabled?w():(C(),u(),b())})),a("update resize observerUpdate lock unlock",(()=>{u()})),a("setTranslate",(()=>{b()})),a("setTransition",((l,r)=>{!function(l){s.params.scrollbar.el&&s.scrollbar.el&&(s.scrollbar.dragEl.style.transitionDuration=`${l}ms`)}(r)})),a("enable disable",(()=>{const{el:l}=s.scrollbar;l&&l.classList[s.enabled?"remove":"add"](s.params.scrollbar.lockClass)})),a("destroy",(()=>{E()}));const w=()=>{s.el.classList.add(s.params.scrollbar.scrollbarDisabledClass),s.scrollbar.el&&s.scrollbar.el.classList.add(s.params.scrollbar.scrollbarDisabledClass),E()};Object.assign(s.scrollbar,{enable:()=>{s.el.classList.remove(s.params.scrollbar.scrollbarDisabledClass),s.scrollbar.el&&s.scrollbar.el.classList.remove(s.params.scrollbar.scrollbarDisabledClass),C(),u(),b()},disable:w,updateSize:u,setTranslate:b,init:C,destroy:E})}export{Scrollbar as default}; //# sourceMappingURL=scrollbar.mjs.map