quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 7.13 kB
JavaScript
import{_ as t}from"../toConsumableArray.js";import{_ as e,r as i}from"../index7.js";import{_ as o,a as r}from"../typeof.js";import{_ as n,a as s,b as a,c as l,P as h,H as c,d as f,N as u,O as d,B as p}from"../index2.js";import{_ as v}from"../defineProperty.js";import{b as g}from"../index3.js";import{a as m,g as k}from"../util.js";import{s as y}from"../public.js";import"../unsupportedIterableToArray.js";var C=function(){function t(){var e=this;o(this,t),v(this,"startX",0),v(this,"startY",0),v(this,"deltaX",0),v(this,"deltaY",0),v(this,"offsetX",0),v(this,"offsetY",0),v(this,"direction",""),v(this,"isTap",!0),v(this,"isVertical",(function(){return"vertical"===e.direction})),v(this,"isHorizontal",(function(){return"horizontal"===e.direction})),v(this,"start",(function(t){e.reset(),e.startX=t.touches[0].clientX,e.startY=t.touches[0].clientY})),v(this,"move",(function(t){var i=t.touches[0];e.deltaX=(i.clientX<0?0:i.clientX)-e.startX,e.deltaY=i.clientY-e.startY,e.offsetX=Math.abs(e.deltaX),e.offsetY=Math.abs(e.deltaY);var o,r;(!e.direction||e.offsetX<10&&e.offsetY<10)&&(e.direction=(o=e.offsetX,r=e.offsetY,o>r?"horizontal":r>o?"vertical":""));e.isTap&&(e.offsetX>5||e.offsetY>5)&&(e.isTap=!1)})),this.reset()}return r(t,[{key:"reset",value:function(){this.startX=0,this.startY=0,this.deltaX=0,this.deltaY=0,this.offsetX=0,this.offsetY=0,this.direction="",this.isTap=!0}}]),t}();function w(t){var e=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 i,o=n(t);if(e){var r=n(this).constructor;i=Reflect.construct(o,arguments,r)}else i=o.apply(this,arguments);return s(this,i)}}var R=new C,b=function(n){a(f,c);var s=w(f);function f(){var t;o(this,f);for(var r=arguments.length,n=new Array(r),a=0;a<r;a++)n[a]=arguments[a];return t=s.call.apply(s,[this].concat(n)),v(l(t),"disabled",!1),v(l(t),"name",""),v(l(t),"leftwidth",0),v(l(t),"rightwidth",0),v(l(t),"root",h()),v(l(t),"leftRef",h()),v(l(t),"rightRef",h()),v(l(t),"defaultSlotRef",h()),v(l(t),"leftSlotRef",h()),v(l(t),"rightSlotRef",h()),v(l(t),"offset",0),v(l(t),"dragging",!1),v(l(t),"opened",!1),v(l(t),"startOffset",0),v(l(t),"lockClick",!1),v(l(t),"attached",!1),v(l(t),"beforeClose",void 0),v(l(t),"leftWidthCache",0),v(l(t),"rightWidthCache",0),v(l(t),"onTouchStart",(function(e){t.disabled||(t.startOffset=t.offset,R.start(e))})),v(l(t),"onTouchMove",(function(e){if(!t.disabled){var i=R.deltaX;if(R.move(e),R.isHorizontal())t.dragging=!0,t.lockClick=!0,(!t.opened||i*t.startOffset<0)&&e.preventDefault(),t.offset=g(i+t.startOffset,-t.getRightWidth(),t.getLeftWidth())}})),v(l(t),"onTouchEnd",(function(){t.dragging&&(t.dragging=!1,t.toggle(t.offset>0?"left":"right"),setTimeout((function(){t.lockClick=!1}),30))})),v(l(t),"toggle",(function(e){var i=Math.abs(t.offset),o="left"===e?t.getLeftWidth():t.getRightWidth(),r=t.opened?.85:.15;o&&i>o*r?t.open(e):t.close(e)})),v(l(t),"onClick",e(i.mark((function e(){var o,r,n=arguments;return i.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:o=n.length>0&&void 0!==n[0]?n[0]:"outside",t.$emit("click",{detail:{position:o}}),t.opened&&!t.lockClick&&(t.beforeClose?(r=t.beforeClose(o),m(r)?r.then((function(e){e&&t.close(o)})):r&&t.close(o)):t.close(o));case 3:case"end":return e.stop()}}),e)})))),v(l(t),"getClickHandler",(function(e,i){return function(o){i&&o.stopPropagation(),t.onClick(e)}})),t}return r(f,[{key:"setBeforeClose",value:function(t){this.beforeClose=t}},{key:"open",value:function(t){this.offset="left"===t?this.getLeftWidth():-this.getRightWidth(),this.opened||(this.opened=!0,this.$emit("open",{detail:{position:t,name:this.name||""}}))}},{key:"close",value:function(t){this.offset=0,this.opened&&(this.opened=!1,this.$emit("close",{detail:{position:t,name:this.name||""}}))}},{key:"getLeftWidth",value:function(){return this.leftWidthCache||(this.leftWidthCache=this.leftwidth||k(this.leftRef.current).width),this.leftWidthCache}},{key:"getRightWidth",value:function(){return this.rightWidthCache||(this.rightWidthCache=this.rightwidth||k(this.rightRef.current).width),this.rightWidthCache}},{key:"componentDidMount",value:function(){var e,i,o,r,n,s,a=this;null===(e=this.root.current)||void 0===e||e.addEventListener("touchstart",this.onTouchStart),null===(i=this.root.current)||void 0===i||i.addEventListener("touchend",this.onTouchEnd),null===(o=this.root.current)||void 0===o||o.addEventListener("touchmove",this.onTouchMove);var l=y(null===(r=this.defaultSlotRef.current)||void 0===r?void 0:r.assignedNodes()),h=y(null===(n=this.leftSlotRef.current)||void 0===n?void 0:n.assignedNodes()),c=y(null===(s=this.rightSlotRef.current)||void 0===s?void 0:s.assignedNodes()),f=[].concat(t(l),t(h),t(c),[this.root.current]);this.attached||(document.addEventListener("touchstart",(function(t){f.every((function(e){return e&&!e.contains(t.target)}))&&a.onClick("outside")}),{capture:!1,passive:!1}),this.attached=!0)}},{key:"componentWillUnmount",value:function(){var t,e,i,o=this;null===(t=this.root.current)||void 0===t||t.removeEventListener("touchstart",this.onTouchStart),null===(e=this.root.current)||void 0===e||e.removeEventListener("touchend",this.onTouchEnd),null===(i=this.root.current)||void 0===i||i.removeEventListener("touchmove",this.onTouchMove),document.removeEventListener("touchstart",(function(){o.onClick("outside")}),!1)}},{key:"render",value:function(){var t={transform:"translate3d(".concat(this.offset,"px, 0, 0)"),transitionDuration:this.dragging?"0s":".6s"};return c.h("div",{ref:this.root,class:"quark-swipe-cell",onClick:this.getClickHandler("cell",this.lockClick),part:"root"},c.h("div",{class:"quark-swipe-cell__wrapper",part:"cell-wrapper",style:t},c.h("div",{ref:this.leftRef,class:"quark-swipe-cell__left",part:"cell-left",onClick:this.getClickHandler("left",!0)},c.h("slot",{name:"left",ref:this.leftSlotRef})),c.h("slot",{ref:this.defaultSlotRef}),c.h("div",{ref:this.rightRef,class:"quark-swipe-cell__right",part:"cell-right",onClick:this.getClickHandler("right",!0)},c.h("slot",{name:"right",ref:this.rightSlotRef}))))}}]),f}();f([u({type:Boolean})],b.prototype,"disabled",void 0),f([u({type:String})],b.prototype,"name",void 0),f([u({type:Number})],b.prototype,"leftwidth",void 0),f([u({type:Number})],b.prototype,"rightwidth",void 0),f([d()],b.prototype,"offset",void 0),f([d()],b.prototype,"dragging",void 0),f([d()],b.prototype,"leftWidthCache",void 0),f([d()],b.prototype,"rightWidthCache",void 0);var W=b=f([p({tag:"quark-swipe-cell",style:":host {\n display: block;\n background: #fff;\n}\n\n:host .quark-swipe-cell {\n position: relative;\n overflow: hidden;\n cursor: grab;\n}\n\n:host .quark-swipe-cell__left,\n:host .quark-swipe-cell__right {\n position: absolute;\n top: 0;\n height: 100%;\n}\n\n:host .quark-swipe-cell__left {\n left: 0;\n transform: translate3d(-100%, 0, 0);\n}\n\n:host .quark-swipe-cell__right {\n right: 0;\n transform: translate3d(100%, 0, 0);\n}\n"})],b);export{W as default};