UNPKG

@slidy/core

Version:

Simple, configurable, nested & reusable sliding action script

2 lines (1 loc) 5.65 kB
var{assign:G,entries:ae}=Object,{abs:S,exp:ce,floor:ue,min:Ee,max:J,round:$,sign:q}=Math;function L(t,o,e){return Ee(e,J(t,o))}function B(t,o=50,e=!0){let i=0;return e?u=>{let y=performance.now();y-i>=o&&(t(u),i=y)}:u=>t(u)}function M(t,o){for(let e=0;e<t.length;e++)o(t[e],e,t);return t}var Q=(t,o)=>S(t.deltaX)>=S(t.deltaY)&&o.axis!=="y";function me(t,o=0){return new Promise((e,i)=>{let u=setInterval(()=>{o++,o>=69?(clearInterval(u),i("few slides")):t.childElementCount&&(clearInterval(u),e(ye(t)))},16)})}function ye(t){return M(t.children,(o,e)=>o.index=e)}function j(t,o,e){let i=t.children.length;return o.loop?(e+i)%i:L(0,e,i-1)}function X(t,o){if(t.type==="wheel")return Q(t,o)?t.deltaX:t.shiftKey||o.axis==="y"?t.deltaY:0;{let e=t.touches&&t.touches[0]||t;return o.axis==="y"?e.pageY:e.pageX}}function P(t,o,e){t.dispatchEvent(new CustomEvent(o,{detail:e}))}function C(t,o,e=!0){let i=e?"addEventListener":"removeEventListener";M(o,u=>t[i](...u))}function le(t,o){let e=[...t.children],i=e.length,u=i-1,y=ue(i/2),D=i>1?e[1].offsetTop-e[0].offsetTop>=e[0].offsetHeight:!1,k=D?"offsetTop":"offsetLeft",v=D?"offsetHeight":"offsetWidth",d=q(e[u][k]),w=i>1?e[u][k]*d-e[u-1][k]*d-e[u-J(d,0)][v]:0,b=e.reduce((s,a)=>s+=a[v]+w,0)>t.offsetWidth,F=o.snap==="deck";G(o,{reverse:d,scrollable:b,vertical:D,edged:I()});function I(s){let a=f(d<0?u:0,"start"),m=f(d<0?0:u,"end"),g=f(s),O=o.direction,N=$(o.position),A=T=>O<=0&&T<=a||O>=0&&T>=m;return o.loop?!1:A(s>=0?g:N)}function f(s,a=o.snap){let m=h=>e.find(E=>E.index===h)||e[0],g=h=>t[v]-m(h)[v],O=T(d<0?u:0,"start"),N=T(d<0?0:u,"end"),A=T(s,a);return o.loop||a==="deck"?A:L(O,A,N);function T(h,E){E=F?"deck":E;let U=m(h)[v]+w*2<t[v]?o.indent??1:g(h)/2/w,Y=E==="start"?0:E==="end"?1:.5,x=E==="start"?-U:E==="end"?U:0;return m(h)[k]-g(h)*Y+w*x}}return{edges:I,distance:f,index(s){let a=({index:m})=>S(f(m)-s);return e.reduce((m,g)=>a(g)<a(m)?g:m).index},position(s){let a=o.index;if(s){let m=e.slice(a-y).concat(e.slice(0,a-y));t.replaceChildren(...m)}return f(a)},swap(s){let a=i%s?q(-s):s,m=a>0?0:u;return b&&(m?t.prepend(e[m]):t.append(e[m])),(e[m][v]+w)*(a*d)},sense(s,a,m){return s.shiftKey||o.axis==="y"&&s.type!=="touchmove"||S(a)>=m},animate(){M(e,(s,a)=>{s.i=a,s.active=o.loop?y:o.index,s.size=s[v]+w,s.dist=f(s.index),s.track=o.position-s.dist,s.turn=L(-1,s.track/s.size,1),s.exp=L(0,(s.size-S(s.track))/s.size,1);let m=F?s.dist:o.position,g=D?`translateY(${-m}px)`:`translateX(${-m}px)`,O={node:t,child:s,options:o,translate:g},N=o.animation?.(O)||{transform:g};G(s.style,b?N:{transform:""})})}}}function he(t,o){let e={...o},i,u=0,y=0,D=0,k=0,v=0,d,w,l=u=e.index??=0,b=e.position??=0,F=e.direction??=0,I=(e.duration??=450)/2,f=e.sensity??=2.5,s=e.gravity??=1.2,a=e.clamp??=0,m=[["touchmove",ee,{passive:!1}],["mousemove",ee],["touchend",te],["mouseup",te],["scroll",()=>{x(l),s=2}]],g=[["wheel",de,{passive:!1,capture:!0}]],O=[["touchstart",Z,{passive:!1}],["mousedown",Z],["keydown",pe],["contextmenu",()=>x(l)],["dragstart",n=>n.preventDefault()]],N=new ResizeObserver(n=>{b=e.position=i().position(),x(l),P(t,"resize",{ROE:n,options:e})}),A=new MutationObserver(n=>{M(n,r=>{[...r.addedNodes,...r.removedNodes].every(p=>"index"in p)||se().then(K)}),P(t,"mutate",{ML:n,options:e})}),T=requestAnimationFrame,h="outline:0;overflow:hidden;user-select:none;-webkit-user-select:none;",E={init:K,update:fe,destroy:se,to:x};K(),M(e.plugins||[],(n,r,c)=>{c[r]=n({node:t,options:e,instance:E})});function K(){me(t).then(()=>{i=()=>le(t,e),t.style.cssText+=h,t.onwheel=B(ne,I,a),b=e.position=i().position(e.loop),N.observe(t),A.observe(t,{childList:!0}),C(t,O),C(window,g),P(t,"mount",{options:e})})}function U(n,r){F=e.direction=q(n),b=e.position+=c(n),l=e.index=i().index(b),s=i().edges()?1.8:e.gravity,f=0,i().animate(),P(t,"move",{index:l,position:b});function c(p){return l-u&&(p-=e.loop?i().swap(l-u):0,u=l,P(t,"index",{index:r})),p}}function Y(n,r){let p=e.snap||i().edges(n)?i().distance(n):b+r,W=I*L(1,n-u,2),V=p-b;D=T(oe);let _=0,R=0,z=0;function oe(ie){_||=ie,R=z;let ve=_-ie,re=ce(ve/W),be=e.easing?.(re)||re;z=V*be;let ge=R%z?(R-z)%V:0;U(ge,n),$(z)?D=T(oe):(f=e.sensity,H())}}function x(n=0,r=0){n=j(t,e,n),H(),Y(n,r||i().distance(n)-b)}function Z(n){H(),f=e.sensity,y=X(n,e),k=n.timeStamp,v=0,C(window,m),!i().edges()&&n.stopPropagation()}function ee(n){let r=(y-X(n,e))*(2-s),c=n.timeStamp-k,p=1e3*r/(s+c);k=n.timeStamp,y=X(n,e),v=(2-s)*p+(s-1)*v,i().sense(n,r,f)&&(U(r,l),n.preventDefault())}function te(){H();let n=v*(2-s),r=i().index(b+n);Y(c(r,e),n);function c(p,W){return p=a&&p-u?l+a*F:p,j(t,W,p)}}function ne(n){H();let r=X(n,e)*(2-s),c=l+q(r)*(a||1),p=e.snap||d||i().edges(),W=i().sense(n,r,f),V=i().edges()?r/5:r,_=d?c:l,R=d?0:I/2;!d&&W&&U(V,l),w=p&&W?setTimeout(x,R,_):void 0,!i().edges()&&n.stopPropagation()}function de(n){if(n.composedPath().includes(t)){let r=e.axis==="y"&&!i().edges();(Q(n,e)||r||n.shiftKey)&&n.preventDefault();let c=a||e.axis==="y"&&!e.vertical||n.shiftKey;d!==c&&(t.onwheel=B(ne,I,c),d=c)}}function pe(n){let r=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"],c=(r.indexOf(n.key)%2-1||1)*(a||1);r.indexOf(n.key)>=0&&(x(l+c),n.preventDefault()),P(t,"keys",n.key)}function H(){clearTimeout(w),cancelAnimationFrame(D),C(window,m,!1)}function fe(n){M(ae(n),([r,c])=>{if(c!==e[r]){switch(r){case"index":x(l=e[r]=j(t,e,c));break;case"position":x(l,c);break;case"gravity":s=e[r]=L(0,c,2);break;case"duration":e[r]=c,I=c/2;break;case"sensity":f=e[r]=c;break;case"clamp":a=e[r]=c;break;default:e[r]=c;break}P(t,"update",n)}})}async function se(){H(),N.disconnect(),A.disconnect(),C(t,O,!1),C(window,g,!1),P(t,"destroy",t)}return E}export{he as slidy};