@m775/touchslide 1.0.4 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name" : "@m775/touchslide",
-  "version" : "1.0.4",
+  "version" : "1.0.6",
   "description": "A lightweight JavaScript touch slider plugin with mobile gesture support, autoplay, infinite loop, navigation and responsive animation.",
   "main" : "touchslide.js",
   "exports": {

package/touchslide.js

@@ -3,7 +3,6 @@
 * ============================================================================
 * @service : QQ:18486685 QQGroup:431849998 Email:zb@m775.com
 * @website : https://www.gentbo.com
-* @notice  : https://res.wx.qq.com/open/js/jweixin-1.6.0.js
 * ----------------------------------------------------------------------------
 * Copyright (c) 2016-Present 周波(zhoubo)
 *
@@ -16,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(C){x.style.touchAction=u.effect==="left"?"pan-y":"pan-x"}p.style.transitionTimingFunction="cubic-bezier(.25,.8,.25,1)";x.style.userSelect="none";if(u.loop&&A>1){p.appendChild(p.children[0].cloneNode(true));p.insertBefore(p.children[A-1].cloneNode(true),p.children[0]);I+=2}for(const t of p.children){if(u.effect==="left"){t.style.display="table-cell";t.style.verticalAlign="top";t.style.width=j+"px"}else{t.style.display="block";t.style.width=j+"px"}}c.updateSize();window.addEventListener("resize",()=>{if(z)cancelAnimationFrame(z);z=requestAnimationFrame(c.updateSize)})},animation:(t,e=0)=>{p.style.willChange="transform";if(e>0&&typeof u.startFun==="function")u.startFun(S+1,A);p.style.transitionDuration=`${e}ms`;p._duration=e;p.style.transform=u.effect==="left"?`translate3d(${t}px,0,0)`:`translate3d(0,${t}px,0)`;if(e>0){let t=false;const e=e=>{if(e.target!==p||t)return;t=true;if(typeof u.endFun==="function")u.endFun(S+1,A);p.style.willChange="auto"};p.addEventListener("transitionend",e,{once:true})}},updateSize:()=>{G=x.clientWidth;N=x.clientHeight;j=u.effect==="left"?G:N;if(u.effect==="left"){j=G;p.style.width=I*j+"px"}else{j=N;p.style.height=I*j+"px"}const t=u.effect==="left"?"width":"height";for(const e of p.children)e.style[t]=j+"px";c.animation(-T*j,0)},fixLoop:()=>{const t=t=>{if(t.target!==p)return;p.style.transitionDuration="0ms";p._duration=0;requestAnimationFrame(()=>{c.animation(-T*j,0)})};p.addEventListener("transitionend",t,{once:true})},touch:t=>{if(C){if(!t.isPrimary)return;if(t.pointerType==="mouse"&&t.button!==0)return;if(p.setPointerCapture)p.setPointerCapture(t.pointerId);if(b)p.addEventListener(b,c.tEnd,{once:true})}p.style.willChange="transform";a();p.style.transitionDuration="0ms";p._duration=0;$=B=undefined;O=D=0;if(H){cancelAnimationFrame(H);H=null}P=t.clientX;q=t.clientY;k=Date.now();p.addEventListener(w,c.tMove,{passive:false});p.addEventListener(L,c.tEnd)},tMove:t=>{n(t);if($===undefined){if(Math.abs(O)>5||Math.abs(D)>5){$=Math.abs(O)>Math.abs(D);B=!$}}if(u.effect==="left"?!B:!$){t.preventDefault();let e=u.effect==="left"?-T*j+O*(!u.loop&&(S===0&&O>0||S>=A-1&&O<0)?.4:1):-T*j+D*(!u.loop&&(S===0&&D>0||S>=A-1&&D<0)?.4:1);if(!H){H=requestAnimationFrame(()=>{H=null;p.style.transform=u.effect==="left"?`translate3d(${e}px,0,0)`:`translate3d(0,${e}px,0)`})}}},tEnd:t=>{if(Math.abs(O)<3&&Math.abs(D)<3){l();return}if(H){cancelAnimationFrame(H);H=null}let e=false;const n=Date.now()-k;if(u.effect==="left"&&!B){const t=n<300&&Math.abs(O)>20;const i=Math.abs(O)>Math.max(30,G/10);if(t||i){S+=O>0?-1:1;e=true}}else if(u.effect==="top"&&!$){const t=n<300&&Math.abs(D)>20;const i=Math.abs(D)>N/10;if(t||i){S+=D>0?-1:1;e=true}}if(!e){c.animation(-T*j,u.delayTime)}else{requestAnimationFrame(()=>{requestAnimationFrame(()=>{f()})})}if(C){if(t.pointerId!==undefined&&p.hasPointerCapture(t.pointerId)){p.releasePointerCapture(t.pointerId)}if(b){p.removeEventListener(b,c.tEnd)}}p.removeEventListener(w,c.tMove);p.removeEventListener(L,c.tEnd);l();p.style.willChange=""},play:(t=false)=>{if(u.loop){T=S+1;c.animation(-T*j,t?0:u.delayTime);if(S<0){S=A-1;T=A;c.fixLoop()}else if(S>=A){S=0;T=1;c.fixLoop()}}else{S=Math.max(0,Math.min(S,A-1));T=S;c.animation(-T*j,u.delayTime)}}}};const e=()=>{if(g&&_!==S){if(_>=0&&v[_])v[_].classList.remove(u.navOnClass);if(v[S])v[S].classList.add(u.navOnClass);_=S}if(m)m.textContent=(S+1).toString();if(d)u.loop||S>0?d.classList.remove(u.prevStop):d.classList.add(u.prevStop);if(h)u.loop||S<A-1?h.classList.remove(u.nextStop):h.classList.add(u.nextStop)};const n=t=>{O=t.clientX-P;D=t.clientY-q};const i=()=>{a();if(u.loop||S<A-1){S++;f()}l()};const s=()=>{a();if(u.loop||S>0){S--;f()}l()};const o=()=>{document.hidden?a():r()};const a=()=>{clearTimeout(M);M=null};const l=()=>{if(!u.loop&&!F){a();F=true}else{r()}};const r=()=>{a();if(!F){if(u.loop||S<A-1){M=setTimeout(()=>{S++;f();r()},u.interTime)}else{F=true}}};const f=(t=false)=>{c.play(t);e()};this.#n=true;const u=this.#t;const c=this.#e.includes(u.effect)?t["translate"]:t[u.effect];if(!c)return;if(!u.target)return false;const p=u.target.querySelector(u.contentClass);if(!p)return false;const d=u.prevClass?u.target.querySelector(u.prevClass):null;const h=u.nextClass?u.target.querySelector(u.nextClass):null;const m=u.pagingIndex?u.target.querySelector(u.pagingIndex):null;const y=u.pagingTotal?u.target.querySelector(u.pagingTotal):null;let g=u.navClass?u.target.querySelector(u.navClass):null;let v=null;const x=document.createElement("div");Array.from(p.attributes).forEach(t=>{x.setAttribute(t.name,t.value);p.removeAttribute(t.name)});x.style.overflow="hidden";x.style.position="relative";p.style.margin=p.style.padding="0";p.parentNode.insertBefore(x,p);p.style.willChange="transform";p._duration=-1;x.appendChild(p);x.style.overscrollBehavior="none";const C="PointerEvent"in window;const E=C?"pointerdown":"mousedown";const w=C?"pointermove":"mousemove";const L=C?"pointerup":"mouseup";const b=C?"pointercancel":null;if(u.touch&&typeof c.touch=="function"){p.addEventListener(E,c.touch,{passive:true})}let S=0;let T=u.loop?1:0;let M=null;let F=!u.autoPlay;let A=p.children.length;let I=A;let P=0,q=0,O=0,D=0,$,B;let G,N,j;let k=0;let z;let H;let _=-1;if(u.loop&&A<=1){u.autoPlay=false;u.loop=false;F=true}if(g){if(u.autoPage===true){const t=["OL","UL"].includes(g.tagName)?"li":"span";g.innerHTML=Array.from({length:A},(e,n)=>`<${t} data-index="${n}">${n+1}</${t}>`).join("")}v=g.children;if(v.length){for(let t=0;t<v.length;t++){v[t].addEventListener("click",()=>{a();S=t;f();r()})}}}if(y)y.textContent=A.toString();document.addEventListener("visibilitychange",o);if(d)d.addEventListener("click",()=>{s()});if(h)h.addEventListener("click",()=>{i()});c.init();f(true);if(!F)r()}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.IMAGEPLAYER.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(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&&O>1){p.appendChild(p.children[0].cloneNode(true));p.insertBefore(p.children[O-1].cloneNode(true),p.children[0]);P+=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(C)}},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=C.clientWidth;j=C.clientHeight;G=c.effect==="left"?N:j;if(c.effect==="left"){G=N;p.style.width=P*G+"px"}else{G=j;p.style.height=P*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;z=k=undefined;$=B=0;if(R){cancelAnimationFrame(R);R=null}q=t.clientX;D=t.clientY;H=Date.now();T.addEventListener(x,d.tMove,{passive:false});T.addEventListener(b,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}}if(c.effect==="left"?!k:!z){t.preventDefault();let e=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(${e}px,0,0)`:`translate3d(0,${e}px,0)`})}}},tEnd:t=>{const e=S&&t.type===S;if(!e)n(t);if(e){if(R){cancelAnimationFrame(R);R=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(R){cancelAnimationFrame(R);R=null}let s=false;const o=Date.now()-H;if(c.effect==="left"&&!k){const t=o<300&&Math.abs($)>20;const e=Math.abs($)>Math.max(30,N/10);if(t||e){F+=$>0?-1:1;s=true}}else if(c.effect==="top"&&!z){const t=o<300&&Math.abs(B)>20;const e=Math.abs(B)>j/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=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-q;B=t.clientY-D};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(x,d.tMove);T.removeEventListener(b,d.tEnd);p.style.willChange="";C.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 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 w=L?"pointerdown":"mousedown";const x=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(w,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 O=p.children.length;let P=O;let q=0,D=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")}}})();