@creaditor/newsletter-starterkit
Version:
Creaditor Newsletter Editor - Starterkit for creating beautiful email newsletters
16 lines • 2.63 kB
JavaScript
"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[2050],{42050:(e,t,s)=>{s.r(t),s.d(t,{Draggable:()=>r});var n=s(56666),o=s(21293),i=s(27338);s(58860);class r extends o.oi{constructor(){super(),(0,n.Z)(this,"mirrorRef",(0,i.V)()),this.onMouseMove=this.onMouseMove.bind(this),this.onMouseDown=this.onMouseDown.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.left=0,this.top=0,this.startEvent=new UIEvent("start",{view:window,bubbles:!0,cancelable:!0}),this.moveEvent=new UIEvent("move",{view:window,bubbles:!0,cancelable:!0}),this.targetEvent=new UIEvent("target",{view:window,bubbles:!0,cancelable:!0})}onMouseMove(e){if(1!==e.which)return;e.preventDefault();const t=this.cloneTarget;if(t){t.getBoundingClientRect();t.style.zIndex=-1;document.elementFromPoint(e.clientX,e.clientY);t.style.zIndex=9999999999;let s=this.initY+e.pageY-this.firstY,n=this.initX+e.pageX-this.firstX;t.style.left=n+"px",t.style.top=s+"px"}}onMouseUp(e){e.preventDefault(),this.isDraging=!1,this.cloneTarget.remove(),document.removeEventListener("mousemove",this.onMouseMove,!1),document.removeEventListener("mouseup",this.onMouseUp,!1);this.parentNode.getBoundingClientRect();return!1}onMouseDown(e){e.preventDefault(),this.isDraging=!0,setTimeout((()=>{this.cloneTarget=this.mirrorRef.value.cloneNode(!0),document.body.appendChild(this.cloneTarget);const t=this.mirrorRef.value;this.initX=t.offsetLeft||computed.left,this.initY=t.offsetTop||computed.top,this.firstX=e.pageX,this.firstY=e.pageY,document.addEventListener("mousemove",this.onMouseMove,!1),document.addEventListener("mouseup",this.onMouseUp,!1),this.dispatchEvent(this.startEvent)}),100)}disconnectedCallback(){this.removeEventListener("mousedown",this.onMouseDown)}connectedCallback(){super.connectedCallback(),setTimeout((()=>{this.addEventListener("mousedown",this.onMouseDown),this.container=document.getElementById("main-page--cdtr")}),200)}render(){return o.dy`${this.isDraging?o.dy`<div class="mirror" ${(0,i.i)(this.mirrorRef)}>
<slot name="mirror"></slot>
</div>`:null} <slot></slot>`}}(0,n.Z)(r,"properties",{left:{type:Number,reflect:!0},top:{type:Number,reflect:!0},isDraging:{type:Boolean,reflect:!0}}),(0,n.Z)(r,"styles",o.iv`
:host {
display: inline-block;
width: 100%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mirror {
position: fixed;
}
`),customElements.define("cdtr-draggale-mirror",r)}}]);