quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 8.22 kB
JavaScript
import{_ as t,a as e,b as n,H as i,d as r,B as a,c as o,P as s,A as c,N as h,O as u}from"../index2.js";import{_ as d}from"../defineProperty.js";import{_ as l,a as v}from"../typeof.js";import{s as f}from"../public.js";function p(n){var i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var r,a=t(n);if(i){var o=t(this).constructor;r=Reflect.construct(a,arguments,o)}else r=a.apply(this,arguments);return e(this,r)}}var m=function(t){n(r,i);var e=p(r);function r(){return l(this,r),e.apply(this,arguments)}return v(r,[{key:"componentDidMount",value:function(){var t=this;requestAnimationFrame((function(){var e=t.parentNode;e&&e.moveWidth&&(t.style.width="".concat(e.moveWidth,"px"))}))}},{key:"render",value:function(){return i.h("slot",null)}}]),r}();m=r([a({tag:"quark-swipe-item",style:":host {\n width: auto;\n height: 100%;\n}\n"})],m);var g=function(t){n(r,i);var e=p(r);function r(){var t;l(this,r);for(var n=arguments.length,i=new Array(n),a=0;a<n;a++)i[a]=arguments[a];return t=e.call.apply(e,[this].concat(i)),d(o(t),"duration",500),d(o(t),"interval",3e3),d(o(t),"defaultindex",0),d(o(t),"autoplay",!1),d(o(t),"inactivecolor","#d3dae0"),d(o(t),"activecolor",""),d(o(t),"type",""),d(o(t),"count",0),d(o(t),"currentIndex",0),d(o(t),"slotWrapRef",s()),d(o(t),"containerRef",s()),d(o(t),"moveWidth",0),d(o(t),"startX",0),d(o(t),"startY",0),d(o(t),"endX",0),d(o(t),"endY",0),d(o(t),"timer",null),d(o(t),"removeEvent",(function(){t.removeEventListener("touchstart",t.handleTouchStart),t.removeEventListener("touchmove",t.handleTouchMove),t.removeEventListener("touchend",t.handleTouchEnd)})),d(o(t),"handleTouchStart",(function(e){t.clearTimer(),t.startX=e.changedTouches[0].clientX,t.startY=e.changedTouches[0].clientY,t.endX=void 0,t.endY=void 0})),d(o(t),"handleTouchMove",(function(e){t.endX=e.changedTouches[0].clientX,t.endY=e.changedTouches[0].clientY})),d(o(t),"handleTouchEnd",(function(){var e=t.angle({X:t.startX,Y:t.startY},{X:t.endX,Y:t.endY});void 0!==t.endX&&void 0!==t.endY?Math.abs(e)>30?t.setTimer():t.endX>t.startX?t.prevSlider():t.nextSlider():t.setTimer()})),d(o(t),"resetNodesTrans",(function(){var e=t.slotWrapRef.current;if(e){var n=f(e.assignedNodes());!n||n.length<=0||n.forEach((function(t){t.style.transitionDuration=null,t.style.transform=null}))}})),d(o(t),"handleRightSlotChange",(function(){t.changeContainerTranX(!0),t.resetNodesTrans();var e=t.slotWrapRef.current;if(e){var n=f(e.assignedNodes());t.count=n.length,t.count<=1?(t.removeEvent(),t.clearTimer()):(t.eventBind(),t.setTimer())}})),t}return v(r,[{key:"componentDidMount",value:function(){var t=this;requestAnimationFrame((function(){var e=t.offsetWidth;t.currentIndex=t.defaultindex,t.moveWidth=e;var n=t.getOffset();t.swipeChild(n,!1)}))}},{key:"componentWillUnmount",value:function(){this.removeEvent(),this.clearTimer()}},{key:"eventBind",value:function(){this.removeEvent(),this.addEventListener("touchstart",this.handleTouchStart),this.addEventListener("touchmove",this.handleTouchMove),this.addEventListener("touchend",this.handleTouchEnd)}},{key:"prevSlider",value:function(){var t=this,e=this.count;if(0===this.currentIndex)this.changeFirstNodeTranX(!0),this.changeLastNodeTranX(!1),this.changeContainerTranX(!0),setTimeout((function(){var n=t.moveWidth;t.swipeChild(n),t.currentIndex=e-1,t.dispatchChanage()}),50);else if(this.currentIndex===e-1)this.changeLastNodeTranX(!0),this.changeContainerTranX(!1),this.currentIndex-=1,setTimeout((function(){var e=t.getOffset();t.swipeChild(e),t.dispatchChanage()}),50);else{this.currentIndex-=1;var n=this.getOffset();this.swipeChild(n),this.dispatchChanage()}}},{key:"nextSlider",value:function(){var t=this,e=this.count;if(0===this.currentIndex)this.changeFirstNodeTranX(!0),this.changeContainerTranX(!0),setTimeout((function(){t.currentIndex+=1;var e=t.getOffset();t.swipeChild(e),t.dispatchChanage()}),50);else if(this.currentIndex>0&&this.currentIndex<e-1){this.currentIndex+=1;var n=this.getOffset();this.swipeChild(n),this.dispatchChanage()}else{var i=this.containerRef.current;if(!i)return;var r=i.style,a=0;r.transform==="translateX(".concat(this.moveWidth,"px)")?(this.changeLastNodeTranX(!0),this.changeContainerTranX(!1),this.currentIndex+=1,this.changeFirstNodeTranX(!1),a=this.getOffset()):(this.currentIndex+=1,this.changeFirstNodeTranX(!1),a=this.getOffset()),setTimeout((function(){t.swipeChild(a),t.currentIndex=0,t.dispatchChanage()}),50)}}},{key:"changeFirstNodeTranX",value:function(t){var e=this.slotWrapRef.current;if(e){var n=f(e.assignedNodes());if(n&&!(n.length<=0)){var i=n[0];i.style.transitionDuration=null,i.style.transform=t?null:"translateX(".concat(this.count*this.moveWidth,"px)")}}}},{key:"changeLastNodeTranX",value:function(t){var e=this.slotWrapRef.current;if(e){var n=f(e.assignedNodes());if(n&&!(n.length<=1)){var i=n[this.count-1];i.style.transitionDuration=null,i.style.transform=t?null:"translateX(".concat(-this.count*this.moveWidth,"px)")}}}},{key:"changeContainerTranX",value:function(t){var e=this.containerRef.current;e&&(e.style.transitionDuration=null,e.style.transform=t?"translateX(0px)":"translateX(".concat(-(this.count-1)*this.moveWidth,"px)"))}},{key:"swipeChild",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];this.clearTimer();var n=this.containerRef.current;if(n){var i=this.duration;n.style.transitionDuration=e?"".concat(i/1e3,"s"):null,n.style.transform="translateX(".concat(t,"px)"),this.setTimer()}}},{key:"clearTimer",value:function(){this.timer&&clearInterval(this.timer)}},{key:"dispatchChanage",value:function(){this.$emit("change",{detail:{index:this.currentIndex}})}},{key:"getOffset",value:function(){return-this.currentIndex*this.moveWidth}},{key:"setTimer",value:function(){var t=this;this.autoplay&&(this.timer&&clearInterval(this.timer),this.timer=setInterval((function(){t.nextSlider()}),this.interval))}},{key:"angle",value:function(t,e){var n=e.X-t.X,i=e.Y-t.Y;return 360*Math.atan(i/n)/(2*Math.PI)}},{key:"renderIndicators",value:function(){if(this.count<=1)return null;for(var t=[],e=0;e<this.count;e+=1){var n=i.h("div",{class:"indicator",style:{backgroundColor:this.currentIndex===e?this.activecolor:this.inactivecolor,opacity:this.currentIndex===e?1:.7}});t.push(n)}return t}},{key:"render",value:function(){return i.h(c,null,i.h("div",{class:"container",ref:this.containerRef,part:"root"},i.h("slot",{onslotchange:this.handleRightSlotChange,ref:this.slotWrapRef})),i.h("slot",{name:"indicators"},i.h("div",{class:"indicators",part:"indicators"},this.renderIndicators())))}}]),r}();r([h({type:Number})],g.prototype,"duration",void 0),r([h({type:Number})],g.prototype,"interval",void 0),r([h({type:Number})],g.prototype,"defaultindex",void 0),r([h({type:Boolean})],g.prototype,"autoplay",void 0),r([h()],g.prototype,"inactivecolor",void 0),r([h()],g.prototype,"activecolor",void 0),r([h()],g.prototype,"type",void 0),r([u()],g.prototype,"count",void 0),r([u()],g.prototype,"currentIndex",void 0);var y=g=r([a({tag:"quark-swipe",style:':host {\n position: relative;\n overflow: hidden;\n width: var(--swipe-width, 100%);\n height: var(--swipe-height, auto);\n border-radius: var(--swipe-border-radius, 0);\n display: flex;\n cursor: grab;\n}\n\n:host .container {\n height: 100%;\n width: auto;\n z-index: 1;\n display: flex;\n flex-direction: row;\n}\n\n:host .indicators {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 2.13333vw;\n height: 0.8vw;\n z-index: 2;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n}\n\n:host .indicator {\n width: 4.26667vw;\n height: 0.8vw;\n background-color: var(--swipe-indicator-activecolor, #0088ff);\n border-radius: 0.53333vw;\n margin: 0 var(--swipe-indicator-margin, 0.53333vw);\n}\n\n:host([type="round"]) .indicator {\n width: 1.6vw;\n height: 1.6vw;\n border-radius: 0.8vw;\n opacity: 0.3;\n margin: 0 var(--swipe-indicator-margin, 0.53333vw);\n}\n'})],g);export{m as QuarkSwipeItem,y as default};