@m775/touchslide 1.0.5 → 1.1.0

package/package.json

@@ -1,12 +1,13 @@
 {
   "name" : "@m775/touchslide",
-  "version" : "1.0.5",
+  "version" : "1.1.0",
   "description": "A lightweight JavaScript touch slider plugin with mobile gesture support, autoplay, infinite loop, navigation and responsive animation.",
   "main" : "touchslide.js",
   "exports": {
     ".": "./touchslide.js"
   },
-  "files" : ["touchslide.js", "README.md", "LICENSE"],
+  "files" : [
+    "touchslide.js", "README.md", "LICENSE"],
   "scripts" : {"test" : "echo \"Error: no test specified\" && exit 1"},
   "keywords" : ["touchslide", "touch-slider", "slider", "carousel", "swiper", "touch", "gesture", "pointerevent", "pointer-events", "touch-event", "mobile", "mobile-web", "responsive", "autoplay", "loop", "translate3d", "animation", "javascript", "frontend", "ui", "component", "webview", "h5", "vanilla-js", "gentbo"],
   "author": "Zhou Bo <zb@m775.com> (https://developer.gentbo.com)",

package/touchslide.js

@@ -15,4 +15,4 @@
 * 3. Remove copyright notices.
 * ============================================================================
 */
-(()=>{const t=new WeakSet;class e{#t;#e;#n;constructor(t){this.#t={target:null,contentClass:".slider",navClass:".nav",navOnClass:"on",autoPage:false,touch:true,pagingIndex:".paging .index",pagingTotal:".paging .total",effect:"left",loop:false,autoPlay:false,delayTime:200,interTime:2500,prevClass:null,nextClass:null,prevStop:null,nextStop:null,startFun:null,endFun:null};this.#e=["left","top"];this.#n=false;this.#t.target=t}nav(t,e="on",n=false){Object.assign(this.#t,{navClass:t||".hd ul",navOnClass:e||"on",autoPage:n});return this}content(t){this.#t.contentClass=t||".bd";return this}prev(t,e="prevStop"){Object.assign(this.#t,{prevClass:t,prevStop:e});return this}next(t,e="nextStop"){Object.assign(this.#t,{nextClass:t,nextStop:e});return this}paging(t,e){if(t)this.#t.pagingIndex=t;if(e)this.#t.pagingTotal=e;return this}loop(){this.#t.loop=true;return this}delay(t=200){this.#t.delayTime=t>0?t:200;return this}auto(t=2500){Object.assign(this.#t,{autoPlay:true,interTime:t>0?t:2500});return this}before(t){this.#t.startFun=typeof t==="function"?t:null;return this}after(t){this.#t.endFun=typeof t==="function"?t:null;return this}left(){this.#t.effect="left";return this}top(){this.#t.effect="top";return this}start(){if(this.#n)throw new Error("Touchslide 已经执行 play()，不能重复调用！");const t={translate:{init:()=>{if(L){C.style.touchAction=c.effect==="left"?"pan-y":"pan-x"}p.style.transitionTimingFunction="cubic-bezier(.25,.8,.25,1)";C.style.userSelect="none";if(c.loop&&P>1){p.appendChild(p.children[0].cloneNode(true));p.insertBefore(p.children[P-1].cloneNode(true),p.children[0]);q+=2}for(const t of p.children){if(c.effect==="left"){t.style.display="table-cell";t.style.verticalAlign="top";t.style.width=G+"px"}else{t.style.display="block";t.style.width=G+"px"}}d.updateSize();window.addEventListener("resize",()=>{if(_)cancelAnimationFrame(_);_=requestAnimationFrame(d.updateSize)})},animation:(t,e=0)=>{p.style.willChange="transform";if(e>0&&typeof c.startFun==="function")c.startFun(F+1,P);p.style.transitionDuration=`${e}ms`;p._duration=e;p.style.transform=c.effect==="left"?`translate3d(${t}px,0,0)`:`translate3d(0,${t}px,0)`;if(e>0){let t=false;const e=n=>{if(n.target!==p||t)return;t=true;p.removeEventListener("transitionend",e);if(typeof c.endFun==="function")c.endFun(F+1,P);p.style.willChange="auto"};p.addEventListener("transitionend",e)}},updateSize:()=>{j=C.clientWidth;z=C.clientHeight;G=c.effect==="left"?j:z;if(c.effect==="left"){G=j;p.style.width=q*G+"px"}else{G=z;p.style.height=q*G+"px"}const t=c.effect==="left"?"width":"height";for(const e of p.children)e.style[t]=G+"px";d.animation(-M*G,0)},fixLoop:()=>{const t=e=>{if(e.target!==p)return;p.removeEventListener("transitionend",t);p.style.transitionDuration="0ms";p._duration=0;requestAnimationFrame(()=>{d.animation(-M*G,0)})};p.addEventListener("transitionend",t)},touch:t=>{if(L){if(!t.isPrimary)return;if(t.pointerType==="mouse"&&t.button!==0)return;if(p.setPointerCapture)p.setPointerCapture(t.pointerId);if(S)p.addEventListener(S,d.tEnd,{once:true})}p.style.willChange="transform";C.style.cursor="grabbing";l();p.style.transitionDuration="0ms";p._duration=0;k=N=undefined;$=B=0;if(U){cancelAnimationFrame(U);U=null}D=t.clientX;O=t.clientY;H=Date.now();T.addEventListener(w,d.tMove,{passive:false});T.addEventListener(b,d.tEnd)},tMove:t=>{n(t);if(k===undefined){if(Math.abs($)>5||Math.abs(B)>5){k=Math.abs($)>Math.abs(B);N=!k}}if(c.effect==="left"?!N:!k){t.preventDefault();let e=c.effect==="left"?-M*G+$*(!c.loop&&(F===0&&$>0||F>=P-1&&$<0)?.4:1):-M*G+B*(!c.loop&&(F===0&&B>0||F>=P-1&&B<0)?.4:1);if(!U){U=requestAnimationFrame(()=>{U=null;p.style.transform=c.effect==="left"?`translate3d(${e}px,0,0)`:`translate3d(0,${e}px,0)`})}}},tEnd:t=>{const e=S&&t.type===S;if(!e)n(t);if(e){if(U){cancelAnimationFrame(U);U=null}i(t);d.animation(-M*G,c.delayTime);r();return}if(Math.abs($)<3&&Math.abs(B)<3){i(t);r();return}W=true;setTimeout(()=>{W=false},0);if(U){cancelAnimationFrame(U);U=null}let s=false;const o=Date.now()-H;if(c.effect==="left"&&!N){const t=o<300&&Math.abs($)>20;const e=Math.abs($)>Math.max(30,j/10);if(t||e){F+=$>0?-1:1;s=true}}else if(c.effect==="top"&&!k){const t=o<300&&Math.abs(B)>20;const e=Math.abs(B)>z/10;if(t||e){F+=B>0?-1:1;s=true}}if(!s){d.animation(-M*G,c.delayTime)}else{requestAnimationFrame(()=>{requestAnimationFrame(()=>{u()})})}i(t);r()},play:(t=false)=>{if(c.loop){M=F+1;d.animation(-M*G,t?0:c.delayTime);if(F<0){F=P-1;M=P;d.fixLoop()}else if(F>=P){F=0;M=1;d.fixLoop()}}else{F=Math.max(0,Math.min(F,P-1));M=F;d.animation(-M*G,c.delayTime)}}}};const e=()=>{if(v&&X!==F){if(X>=0&&E[X])E[X].classList.remove(c.navOnClass);if(E[F])E[F].classList.add(c.navOnClass);X=F}if(y)y.textContent=(F+1).toString();if(h)c.loop||F>0?h.classList.remove(c.prevStop):h.classList.add(c.prevStop);if(m)c.loop||F<P-1?m.classList.remove(c.nextStop):m.classList.add(c.nextStop)};const n=t=>{$=t.clientX-D;B=t.clientY-O};const i=t=>{if(L){if(t.pointerId!==undefined&&p.hasPointerCapture(t.pointerId)){p.releasePointerCapture(t.pointerId)}if(S)p.removeEventListener(S,d.tEnd)}T.removeEventListener(w,d.tMove);T.removeEventListener(b,d.tEnd);p.style.willChange="";C.style.cursor="grab"};const s=()=>{l();if(c.loop||F<P-1){F++;u()}r()};const o=()=>{l();if(c.loop||F>0){F--;u()}r()};const a=()=>{document.hidden?l():f()};const l=()=>{clearTimeout(A);A=null};const r=()=>{if(!c.loop&&!I){l();I=true}else{f()}};const f=()=>{l();if(!I){if(c.loop||F<P-1){A=setTimeout(()=>{F++;u();f()},c.interTime)}else{I=true}}};const u=(t=false)=>{d.play(t);e()};const c=this.#t;const d=this.#e.includes(c.effect)?t["translate"]:t[c.effect];if(!d)return false;if(!c.target)return false;const p=c.target.querySelector(c.contentClass);if(!p)return false;this.#n=true;const h=c.prevClass?c.target.querySelector(c.prevClass):null;const m=c.nextClass?c.target.querySelector(c.nextClass):null;const y=c.pagingIndex?c.target.querySelector(c.pagingIndex):null;const g=c.pagingTotal?c.target.querySelector(c.pagingTotal):null;let v=c.navClass?c.target.querySelector(c.navClass):null;let E=null;const C=document.createElement("div");Array.from(p.attributes).forEach(t=>{C.setAttribute(t.name,t.value);p.removeAttribute(t.name)});C.style.overflow="hidden";C.style.position="relative";p.style.margin=p.style.padding="0";p.parentNode.insertBefore(C,p);p.style.willChange="transform";p._duration=-1;C.appendChild(p);C.style.overscrollBehavior="none";const L="PointerEvent"in window;const x=L?"pointerdown":"mousedown";const w=L?"pointermove":"mousemove";const b=L?"pointerup":"mouseup";const S=L?"pointercancel":null;const T=L?p:document;if(c.touch&&typeof d.touch=="function"){p.addEventListener(x,d.touch,{passive:true});C.style.cursor="grab";p.addEventListener("dragstart",t=>t.preventDefault());p.addEventListener("click",t=>{if(!W)return;W=false;t.preventDefault();t.stopPropagation()},true)}let F=0;let M=c.loop?1:0;let A=null;let I=!c.autoPlay;let P=p.children.length;let q=P;let D=0,O=0,$=0,B=0,k,N;let j,z,G;let H=0;let _;let U;let W=false;let X=-1;if(c.loop&&P<=1){c.autoPlay=false;c.loop=false;I=true}if(v){if(c.autoPage===true){const t=["OL","UL"].includes(v.tagName)?"li":"span";v.innerHTML=Array.from({length:P},(e,n)=>`<${t} data-index="${n}">${n+1}</${t}>`).join("")}E=v.children;if(E.length){for(let t=0;t<E.length;t++){E[t].addEventListener("click",()=>{l();F=t;u();f()})}}}if(g)g.textContent=P.toString();document.addEventListener("visibilitychange",a);if(h)h.addEventListener("click",()=>{o()});if(m)m.addEventListener("click",()=>{s()});d.init();u(true);if(!I)f()}run(){this.start()}}if(typeof window!=="undefined"){window.GB=window.GB||{};GB.Touchslide=n=>{const i=typeof n==="string"?document.querySelector(n):n instanceof HTMLElement?n:null;if(i){if(t.has(i)){throw new Error("GB.TOUCHSLIDE.DOM.INITED")}else{t.add(i);return new e(i)}}throw new Error("GB.TOUCHSLIDE.INIT.FAIL")}}})();
+(()=>{const t=new WeakSet;class e{#t;#e;#n;constructor(t){this.#t={target:null,contentClass:".slider",navClass:".nav",navOnClass:"on",autoPage:false,touch:true,pagingIndex:".paging .index",pagingTotal:".paging .total",effect:"left",loop:false,autoPlay:false,delayTime:200,interTime:2500,prevClass:null,nextClass:null,prevStop:null,nextStop:null,startFun:null,endFun:null};this.#e=["left","top"];this.#n=false;this.#t.target=t}nav(t,e="on",n=false){Object.assign(this.#t,{navClass:t||".hd ul",navOnClass:e||"on",autoPage:n});return this}content(t){this.#t.contentClass=t||".bd";return this}prev(t,e="prevStop"){Object.assign(this.#t,{prevClass:t,prevStop:e});return this}next(t,e="nextStop"){Object.assign(this.#t,{nextClass:t,nextStop:e});return this}paging(t,e){if(t)this.#t.pagingIndex=t;if(e)this.#t.pagingTotal=e;return this}loop(){this.#t.loop=true;return this}delay(t=200){this.#t.delayTime=t>0?t:200;return this}auto(t=2500){Object.assign(this.#t,{autoPlay:true,interTime:t>0?t:2500});return this}before(t){this.#t.startFun=typeof t==="function"?t:null;return this}after(t){this.#t.endFun=typeof t==="function"?t:null;return this}left(){this.#t.effect="left";return this}top(){this.#t.effect="top";return this}start(){if(this.#n)throw new Error("Touchslide 已经执行 play()，不能重复调用！");const t={translate:{init:()=>{if(w){L.style.touchAction=c.effect==="left"?"pan-y":"pan-x"}p.style.transitionTimingFunction="cubic-bezier(.25,.8,.25,1)";L.style.userSelect="none";if(c.loop&&O>1){p.appendChild(p.children[0].cloneNode(true));p.insertBefore(p.children[O-1].cloneNode(true),p.children[0]);q+=2}for(const t of p.children){if(c.effect==="left"){t.style.display="table-cell";t.style.verticalAlign="top";t.style.width=G+"px"}else{t.style.display="block";t.style.width=G+"px"}}d.updateSize();const t=()=>{if(_)cancelAnimationFrame(_);_=requestAnimationFrame(d.updateSize)};window.addEventListener("resize",t);if(typeof ResizeObserver==="function"){U=new ResizeObserver(t);U.observe(L)}},animation:(t,e=0)=>{p.style.willChange="transform";if(e>0&&typeof c.startFun==="function")c.startFun(F+1,O);p.style.transitionDuration=`${e}ms`;p._duration=e;p.style.transform=c.effect==="left"?`translate3d(${t}px,0,0)`:`translate3d(0,${t}px,0)`;if(e>0){let t=false;const e=n=>{if(n.target!==p||t)return;t=true;p.removeEventListener("transitionend",e);if(typeof c.endFun==="function")c.endFun(F+1,O);p.style.willChange="auto"};p.addEventListener("transitionend",e)}},updateSize:()=>{N=L.clientWidth;j=L.clientHeight;G=c.effect==="left"?N:j;if(c.effect==="left"){G=N;p.style.width=q*G+"px"}else{G=j;p.style.height=q*G+"px"}const t=c.effect==="left"?"width":"height";for(const e of p.children)e.style[t]=G+"px";d.animation(-M*G,0)},fixLoop:()=>{const t=e=>{if(e.target!==p)return;p.removeEventListener("transitionend",t);p.style.transitionDuration="0ms";p._duration=0;requestAnimationFrame(()=>{d.animation(-M*G,0)})};p.addEventListener("transitionend",t)},touch:t=>{if(w){if(!t.isPrimary)return;if(t.pointerType==="mouse"&&t.button!==0)return;if(T)p.addEventListener(T,d.tEnd,{once:true})}p.style.willChange="transform";L.style.cursor="grabbing";l();p.style.transitionDuration="0ms";p._duration=0;z=k=undefined;$=B=0;if(R){cancelAnimationFrame(R);R=null}D=t.clientX;P=t.clientY;H=Date.now();S.addEventListener(b,d.tMove,{passive:false});S.addEventListener(C,d.tEnd)},tMove:t=>{n(t);if(z===undefined){if(Math.abs($)>5||Math.abs(B)>5){z=Math.abs($)>Math.abs(B);k=!z}}const e=c.effect==="left"?z===true:k===true;if(!e)return;t.preventDefault();let i=c.effect==="left"?-M*G+$*(!c.loop&&(F===0&&$>0||F>=O-1&&$<0)?.4:1):-M*G+B*(!c.loop&&(F===0&&B>0||F>=O-1&&B<0)?.4:1);if(!R){R=requestAnimationFrame(()=>{R=null;p.style.transform=c.effect==="left"?`translate3d(${i}px,0,0)`:`translate3d(0,${i}px,0)`})}},tEnd:t=>{const e=T&&t.type===T;if(!e)n(t);if(e){if(R){cancelAnimationFrame(R);R=null}i(t);d.animation(-M*G,c.delayTime);r();return}const s=c.effect==="left"?z===true:k===true;const o=c.effect==="left"?Math.abs($):Math.abs(B);if(!s||o<8){if(s)d.animation(-M*G,c.delayTime);i(t);r();return}W=true;setTimeout(()=>{W=false},0);if(R){cancelAnimationFrame(R);R=null}let a=false;const l=Date.now()-H;if(c.effect==="left"&&!k){const t=l<300&&Math.abs($)>20;const e=Math.abs($)>Math.max(30,N/10);if(t||e){F+=$>0?-1:1;a=true}}else if(c.effect==="top"&&!z){const t=l<300&&Math.abs(B)>20;const e=Math.abs(B)>j/10;if(t||e){F+=B>0?-1:1;a=true}}if(!a){d.animation(-M*G,c.delayTime)}else{requestAnimationFrame(()=>{requestAnimationFrame(()=>{u()})})}i(t);r()},play:(t=false)=>{if(c.loop){M=F+1;d.animation(-M*G,t?0:c.delayTime);if(F<0){F=O-1;M=O;d.fixLoop()}else if(F>=O){F=0;M=1;d.fixLoop()}}else{F=Math.max(0,Math.min(F,O-1));M=F;d.animation(-M*G,c.delayTime)}}}};const e=()=>{if(g&&X!==F){if(X>=0&&E[X])E[X].classList.remove(c.navOnClass);if(E[F])E[F].classList.add(c.navOnClass);X=F}if(y)y.textContent=(F+1).toString();if(h)c.loop||F>0?h.classList.remove(c.prevStop):h.classList.add(c.prevStop);if(m)c.loop||F<O-1?m.classList.remove(c.nextStop):m.classList.add(c.nextStop)};const n=t=>{$=t.clientX-D;B=t.clientY-P};const i=t=>{if(w){if(t.pointerId!==undefined&&p.hasPointerCapture(t.pointerId)){p.releasePointerCapture(t.pointerId)}if(T)p.removeEventListener(T,d.tEnd)}S.removeEventListener(b,d.tMove);S.removeEventListener(C,d.tEnd);p.style.willChange="";L.style.cursor="grab"};const s=()=>{l();if(c.loop||F<O-1){F++;u()}r()};const o=()=>{l();if(c.loop||F>0){F--;u()}r()};const a=()=>{document.hidden?l():f()};const l=()=>{clearTimeout(A);A=null};const r=()=>{if(!c.loop&&!I){l();I=true}else{f()}};const f=()=>{l();if(!I){if(c.loop||F<O-1){A=setTimeout(()=>{F++;u();f()},c.interTime)}else{I=true}}};const u=(t=false)=>{d.play(t);e()};const c=this.#t;const d=this.#e.includes(c.effect)?t["translate"]:t[c.effect];if(!d)return false;if(!c.target)return false;const p=c.target.querySelector(c.contentClass);if(!p)return false;this.#n=true;const h=c.prevClass?c.target.querySelector(c.prevClass):null;const m=c.nextClass?c.target.querySelector(c.nextClass):null;const y=c.pagingIndex?c.target.querySelector(c.pagingIndex):null;const v=c.pagingTotal?c.target.querySelector(c.pagingTotal):null;let g=c.navClass?c.target.querySelector(c.navClass):null;let E=null;const L=document.createElement("div");Array.from(p.attributes).forEach(t=>{L.setAttribute(t.name,t.value);p.removeAttribute(t.name)});L.style.overflow="hidden";L.style.position="relative";p.style.margin=p.style.padding="0";p.parentNode.insertBefore(L,p);p.style.willChange="transform";p._duration=-1;L.appendChild(p);L.style.overscrollBehavior="auto";const w="PointerEvent"in window;const x=w?"pointerdown":"mousedown";const b=w?"pointermove":"mousemove";const C=w?"pointerup":"mouseup";const T=w?"pointercancel":null;const S=document;if(c.touch&&typeof d.touch=="function"){p.addEventListener(x,d.touch,{passive:true});L.style.cursor="grab";p.addEventListener("dragstart",t=>t.preventDefault());p.addEventListener("click",t=>{if(!W)return;W=false;t.preventDefault();t.stopPropagation()},true)}let F=0;let M=c.loop?1:0;let A=null;let I=!c.autoPlay;let O=p.children.length;let q=O;let D=0,P=0,$=0,B=0,z,k;let N,j,G;let H=0;let _;let U;let R;let W=false;let X=-1;if(c.loop&&O<=1){c.autoPlay=false;c.loop=false;I=true}if(g){if(c.autoPage===true){const t=["OL","UL"].includes(g.tagName)?"li":"span";g.innerHTML=Array.from({length:O},(e,n)=>`<${t} data-index="${n}">${n+1}</${t}>`).join("")}E=g.children;if(E.length){for(let t=0;t<E.length;t++){E[t].addEventListener("click",()=>{l();F=t;u();f()})}}}if(v)v.textContent=O.toString();document.addEventListener("visibilitychange",a);if(h)h.addEventListener("click",()=>{o()});if(m)m.addEventListener("click",()=>{s()});d.init();u(true);if(!I)f()}run(){this.start()}}if(typeof window!=="undefined"){window.GB=window.GB||{};GB.Touchslide=n=>{const i=typeof n==="string"?document.querySelector(n):n instanceof HTMLElement?n:null;if(i){if(t.has(i)){throw new Error("GB.TOUCHSLIDE.DOM.INITED")}else{t.add(i);return new e(i)}}throw new Error("GB.TOUCHSLIDE.INIT.FAIL")}}})();