@slidy/element/dist/index.cjs

Simple, configurable & reusable carousel CustomElement

"use strict";var G=Object.defineProperty;var wt=Object.getOwnPropertyDescriptor;var Ot=Object.getOwnPropertyNames;var Tt=Object.prototype.hasOwnProperty;var Pt=(e,n)=>{for(var t in n)G(e,t,{get:n[t],enumerable:!0})},At=(e,n,t,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of Ot(n))!Tt.call(e,r)&&r!==t&&G(e,r,{get:()=>n[r],enumerable:!(i=wt(n,r))||i.enumerable});return e};var Lt=e=>At(G({},"__esModule",{value:!0}),e);var St={};Pt(St,{slidy:()=>q});module.exports=Lt(St);var{assign:B,entries:pt}=Object,{abs:C,exp:dt,floor:mt,min:Mt,max:Q,round:j,sign:W}=Math;function P(e,n,t){return Mt(t,Q(e,n))}function Z(e,n=50,t=!0){let i=0;return t?r=>{let m=performance.now();m-i>=n&&(e(r),i=m)}:r=>e(r)}function A(e,n){for(let t=0;t<e.length;t++)n(e[t],t,e);return e}var tt=(e,n)=>C(e.deltaX)>=C(e.deltaY)&&n.axis!=="y";function ft(e,n=0){return new Promise((t,i)=>{let r=setInterval(()=>{n++,n>=69?(clearInterval(r),i("few slides")):e.childElementCount&&(clearInterval(r),t(kt(e)))},16)})}function kt(e){return A(e.children,(n,t)=>n.index=t)}function J(e,n,t){let i=e.children.length;return n.loop?(t+i)%i:P(0,t,i-1)}function z(e,n){if(e.type==="wheel")return tt(e,n)?e.deltaX:e.shiftKey||n.axis==="y"?e.deltaY:0;{let t=e.touches&&e.touches[0]||e;return n.axis==="y"?t.pageY:t.pageX}}function L(e,n,t){e.dispatchEvent(new CustomEvent(n,{detail:t}))}function D(e,n,t=!0){let i=t?"addEventListener":"removeEventListener";A(n,r=>e[i](...r))}function bt(e,n){let t=[...e.children],i=t.length,r=i-1,m=mt(i/2),M=i>1?t[1].offsetTop-t[0].offsetTop>=t[0].offsetHeight:!1,k=M?"offsetTop":"offsetLeft",v=M?"offsetHeight":"offsetWidth",d=W(t[r][k]),w=i>1?t[r][k]*d-t[r-1][k]*d-t[r-Q(d,0)][v]:0,g=t.reduce((o,c)=>o+=c[v]+w,0)>e.offsetWidth,F=n.snap==="deck";B(n,{reverse:d,scrollable:g,vertical:M,edged:I()});function I(o){let c=b(d<0?r:0,"start"),l=b(d<0?0:r,"end"),y=b(o),O=n.direction,N=j(n.position),S=T=>O<=0&&T<=c||O>=0&&T>=l;return n.loop?!1:S(o>=0?y:N)}function b(o,c=n.snap){let l=E=>t.find(h=>h.index===E)||t[0],y=E=>e[v]-l(E)[v],O=T(d<0?r:0,"start"),N=T(d<0?0:r,"end"),S=T(o,c);return n.loop||c==="deck"?S:P(O,S,N);function T(E,h){h=F?"deck":h;let U=l(E)[v]+w*2<e[v]?n.indent??1:y(E)/2/w,K=h==="start"?0:h==="end"?1:.5,x=h==="start"?-U:h==="end"?U:0;return l(E)[k]-y(E)*K+w*x}}return{edges:I,distance:b,index(o){let c=({index:l})=>C(b(l)-o);return t.reduce((l,y)=>c(y)<c(l)?y:l).index},position(o){let c=n.index;if(o){let l=t.slice(c-m).concat(t.slice(0,c-m));e.replaceChildren(...l)}return b(c)},swap(o){let c=i%o?W(-o):o,l=c>0?0:r;return g&&(l?e.prepend(t[l]):e.append(t[l])),(t[l][v]+w)*(c*d)},sense(o,c,l){return o.shiftKey||n.axis==="y"&&o.type!=="touchmove"||C(c)>=l},animate(){A(t,(o,c)=>{o.i=c,o.active=n.loop?m:n.index,o.size=o[v]+w,o.dist=b(o.index),o.track=n.position-o.dist,o.turn=P(-1,o.track/o.size,1),o.exp=P(0,(o.size-C(o.track))/o.size,1);let l=F?o.dist:n.position,y=M?`translateY(${-l}px)`:`translateX(${-l}px)`,O={node:e,child:o,options:n,translate:y},N=n.animation?.(O)||{transform:y};B(o.style,g?N:{transform:""})})}}}function et(e,n){let t={...n},i,r=0,m=0,M=0,k=0,v=0,d,w,p=r=t.index??=0,g=t.position??=0,F=t.direction??=0,I=(t.duration??=450)/2,b=t.sensity??=2.5,o=t.gravity??=1.2,c=t.clamp??=0,l=[["touchmove",it,{passive:!1}],["mousemove",it],["touchend",ot],["mouseup",ot],["scroll",()=>{x(p),o=2}]],y=[["wheel",vt,{passive:!1,capture:!0}]],O=[["touchstart",st,{passive:!1}],["mousedown",st],["keydown",gt],["contextmenu",()=>x(p)],["dragstart",s=>s.preventDefault()]],N=new ResizeObserver(s=>{g=t.position=i().position(),x(p),L(e,"resize",{ROE:s,options:t})}),S=new MutationObserver(s=>{A(s,a=>{[...a.addedNodes,...a.removedNodes].every(f=>"index"in f)||at().then(X)}),L(e,"mutate",{ML:s,options:t})}),T=requestAnimationFrame,E="outline:0;overflow:hidden;user-select:none;-webkit-user-select:none;",h={init:X,update:yt,destroy:at,to:x};X(),A(t.plugins||[],(s,a,u)=>{u[a]=s({node:e,options:t,instance:h})});function X(){ft(e).then(()=>{i=()=>bt(e,t),e.style.cssText+=E,e.onwheel=Z(rt,I,c),g=t.position=i().position(t.loop),N.observe(e),S.observe(e,{childList:!0}),D(e,O),D(window,y),L(e,"mount",{options:t})})}function U(s,a){F=t.direction=W(s),g=t.position+=u(s),p=t.index=i().index(g),o=i().edges()?1.8:t.gravity,b=0,i().animate(),L(e,"move",{index:p,position:g});function u(f){return p-r&&(f-=t.loop?i().swap(p-r):0,r=p,L(e,"index",{index:a})),f}}function K(s,a){let f=t.snap||i().edges(s)?i().distance(s):g+a,_=I*P(1,s-r,2),Y=f-g;M=T(ct);let $=0,R=0,V=0;function ct(ut){$||=ut,R=V;let ht=$-ut,lt=dt(ht/_),Et=t.easing?.(lt)||lt;V=Y*Et;let xt=R%V?(R-V)%Y:0;U(xt,s),j(V)?M=T(ct):(b=t.sensity,H())}}function x(s=0,a=0){s=J(e,t,s),H(),K(s,a||i().distance(s)-g)}function st(s){H(),b=t.sensity,m=z(s,t),k=s.timeStamp,v=0,D(window,l),!i().edges()&&s.stopPropagation()}function it(s){let a=(m-z(s,t))*(2-o),u=s.timeStamp-k,f=1e3*a/(o+u);k=s.timeStamp,m=z(s,t),v=(2-o)*f+(o-1)*v,i().sense(s,a,b)&&(U(a,p),s.preventDefault())}function ot(){H();let s=v*(2-o),a=i().index(g+s);K(u(a,t),s);function u(f,_){return f=c&&f-r?p+c*F:f,J(e,_,f)}}function rt(s){H();let a=z(s,t)*(2-o),u=p+W(a)*(c||1),f=t.snap||d||i().edges(),_=i().sense(s,a,b),Y=i().edges()?a/5:a,$=d?u:p,R=d?0:I/2;!d&&_&&U(Y,p),w=f&&_?setTimeout(x,R,$):void 0,!i().edges()&&s.stopPropagation()}function vt(s){if(s.composedPath().includes(e)){let a=t.axis==="y"&&!i().edges();(tt(s,t)||a||s.shiftKey)&&s.preventDefault();let u=c||t.axis==="y"&&!t.vertical||s.shiftKey;d!==u&&(e.onwheel=Z(rt,I,u),d=u)}}function gt(s){let a=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"],u=(a.indexOf(s.key)%2-1||1)*(c||1);a.indexOf(s.key)>=0&&(x(p+u),s.preventDefault()),L(e,"keys",s.key)}function H(){clearTimeout(w),cancelAnimationFrame(M),D(window,l,!1)}function yt(s){A(pt(s),([a,u])=>{if(u!==t[a]){switch(a){case"index":x(p=t[a]=J(e,t,u));break;case"position":x(p,u);break;case"gravity":o=t[a]=P(0,u,2);break;case"duration":t[a]=u,I=u/2;break;case"sensity":b=t[a]=u;break;case"clamp":c=t[a]=u;break;default:t[a]=u;break}L(e,"update",s)}})}async function at(){H(),N.disconnect(),S.disconnect(),D(e,O,!1),D(window,y,!1),L(e,"destroy",e)}return h}function nt(e,n){return["animation","easing"].includes(e)?Nt(n):It(n)}function It(e){return!isNaN(e)||["true","false"].includes(e)?JSON.parse(e):e}function Nt(e){return Function(`const fn = ${e}; return fn`)()}var q=class e extends HTMLElement{_slidy;_options;static observedAttributes=["index","clamp","indent","sensity","gravity","duration","animation","plugins","easing","snap","axis","loop"];constructor(){super();let n=document.createElement("style"),t=":host{display:flex;flex-flow:var(--flow);gap:var(--gap,1rem);width:100%;height:var(--height,20rem)}::slotted(*){flex:0 0 var(--width,auto);width:var(--width,auto);height:100%}",i=document.createElement("slot");n.append(t),this.attachShadow({mode:"closed"}).append(n,i),this.setUpAccessors(e.observedAttributes),this._options=this.setUpOptions(e.observedAttributes)}set options(n){this._options=n}get options(){return this._options}setUpAccessors(n){n.forEach(t=>{Object.defineProperty(this,t,{set:i=>this.setAttribute(t,i),get:()=>this.getAttribute(t)})})}setUpOptions(n){return{...n.reduce((i,r)=>{let m=this[r];return m&&(i[r]=nt(r,m)),i},{}),...this.options}}connectedCallback(){this.isConnected&&this.init(this._options)}attributeChangedCallback(n,t,i){let r=nt(n,i),m={[n]:r};this.update(m)}init(n={}){this._slidy=et(this,n)}to(n){this._slidy?.to(n)}update(n){this._slidy?.update(n)}destroy(){this._slidy?.destroy()}};typeof window=="object"&&"customElements"in window&&customElements.define("slidy-element",q);