@creaditor/newsletter-starterkit/dist/4.creaditor.bundle.js

Creaditor Newsletter Editor - Starterkit for creating beautiful email newsletters

"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[4],{70004:(t,e,s)=>{s.r(e),s.d(e,{DraggableElement:()=>a});var i=s(56666),n=s(21293);let o,h;class r{constructor(t,e){this.target=t,this.options=e||{},this.handle=this.options.handle,this.x=o||0,this.y=h||0,this.initX=0,this.initY=0,this.firstX=0,this.firstY=0,this.onMouseDown=this.onMouseDown.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onMouseMove=this.onMouseMove.bind(this),this.init()}onMouseMove(t){const e=this.initY+(t.pageY-this.firstY),s=this.initX+(t.pageX-this.firstX),i=t.pageX-this.firstX,n=t.pageY-this.firstY;(Math.abs(i)>10||Math.abs(n)>10)&&(this.y=e,this.x=s,o=s,h=e,this.options.onMove&&this.options.onMove(s,e))}onMouseDown(t){if(1!==t.which)return;if(t.target.closest("input,textarea,cdtr-input,.cdtr-ignore"))return;if(t.target.closest("[role='button']"))return;if(t.preventDefault(),this.handle&&!t.target.closest(this.handle))return;const e=this.target.getBoundingClientRect();this.initX=e.left+window.scrollX,this.initY=e.top+window.scrollY,this.firstX=t.pageX,this.firstY=t.pageY,this.target.addEventListener("blur",this.onMouseUp,!1),window.addEventListener("mouseup",this.onMouseUp,!1),window.addEventListener("mousemove",this.onMouseMove,!1)}onMouseUp(){this.firstX=this.x,this.firstY=this.y,this.target.removeEventListener("blur",this.onMouseUp,!1),window.removeEventListener("mouseup",this.onMouseUp,!1),window.removeEventListener("mousemove",this.onMouseMove,!1),this.options.onEnd&&this.options.onEnd(this.x,this.y)}init(){this.options.onMove&&o&&h&&this.options.onMove(o,h),this.target&&this.target.addEventListener("mousedown",this.onMouseDown,!1)}destroy(){this.target&&this.target.removeEventListener("mousedown",this.onMouseDown,!1)}}class a extends n.oi{constructor(){super()}render(){return this.style.left=this.x,this.style.top=this.y,n.dy` <slot></slot> `}disconnectedCallback(){super.disconnectedCallback(),this.draggableInstance&&this.draggableInstance.destroy()}connectedCallback(){super.connectedCallback(),this.draggableInstance=new r(this.children[0],{handle:this.handle,onMove:(t,e)=>{this.x=t,this.y=e,this.clientX=t,this.clientY=e;const s=new UIEvent("move",{view:window,bubbles:!0,cancelable:!0});this.dispatchEvent(s)},onEnd:(t,e)=>{const s=new UIEvent("end",{view:window,bubbles:!0,cancelable:!0});this.dispatchEvent(s)}})}}(0,i.Z)(a,"styles",n.iv`
    :host {
      position: absolute;
      display: block;
    }
  `),(0,i.Z)(a,"properties",{x:{type:String,reflect:!0},y:{type:String,reflect:!0},handle:{type:String,reflect:!0}}),customElements.define("cdtr-draggable-element",a)}}]);