@creaditor/newsletter-starterkit
Version:
Creaditor Newsletter Editor - Starterkit for creating beautiful email newsletters
171 lines (170 loc) • 8.01 kB
JavaScript
"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[1867],{51867:(t,e,n)=>{n.r(e),n.d(e,{ElementHandleBar:()=>l});var o=n(56666),i=n(21293),a=(n(67237),n(70235)),r=n(27338),s=n(45607);n(65329);class l extends i.oi{constructor(){super(),(0,o.Z)(this,"elementRef",(0,r.V)()),this.canDisplayBar=!0;a.h.get("config");const t=a.h.get("config","editor","configure","editorProps");this.canDisplayBar=!t||!1!==t?.actionBar,this.selected=!1,this.connectWith=this.connectWith.bind(this),this.onRemove=this.onRemove.bind(this)}cloneElement(){let t,e=s.Z.getComponent(this.for);const n=e.closest("col");if(n&&(e=n),e&&(t=e.parent(),t)){let n=t.children.findIndex((t=>t===e.id));"col"===e.type&&(n+=1),"number"==typeof n&&s.Z.cloneComponent({componentId:e.id,index:n,parentId:t.id})}}onRemove(){a.h.get("components",this.for).commands.remove()}connectWith(){if(this.selected=!1,this.for){const t=s.Z.components.find((t=>t.id===this.for));if(t){const e=t.closest("col");if(e){e.element.getBoundingClientRect(),t.element.getBoundingClientRect()}const n=t.closest("card");if(n&&this.elementRef.value){const e=n.element.getBoundingClientRect(),o=t.element.getBoundingClientRect();if(parseInt(e.top)>=parseInt(o.top)-40){let t=0;e.right>o.right?t=e.right-o.right-100+"px":e.left<o.left&&(t=e.left-o.left+20+"px"),o.left+parseInt(t)<e.left&&(t=0),this.elementRef.value.style.transform=`translate(${t},${o.height+10}px)`}else this.elementRef.value.style.transform=null}else this.elementRef.value.style.transform=null;this.selected=!!t.element.closest("[draggable-element]"),this.animations=t.props.interactions.filter((t=>"animation"===t.type)),this.hasAnimations=this.animations.length>0,this.name=t.props.name||a.h.get("lang",t.type)}}}justifyContent(t){s.Z.store().execCommand("justify",t,{find:"col"})}connectedCallback(){super.connectedCallback(),s.Z.on("select",this.connectWith),s.Z.on("update",this.connectWith),this.classList.add("ignore-cdtr-blur")}disconnectedCallback(){super.disconnectedCallback(),s.Z.off("select",this.connectWith),s.Z.off("update",this.connectWith)}render(){return this.style.display=this.selected?null:"none",i.dy`<cdtr-row
${(0,r.i)(this.elementRef)}
class="bar"
alignItems="center"
justify="space-evenly"
class="wrapper"
spacing="10px"
>
<cdtr-tooltip content="drag_element">
<paper-button
=${t=>{const e=document.createElement("div");e.setAttribute("data-id",this.for);const n=a.h.get("components",this.for);e.style.width=n.element.clientWidth+"px",e.style.height=n.element.clientHeight+"px",e.setAttribute("data-type",n.type);let o=n.type;"block"!==o&&"col"!==o&&"section"!==o&&(o="element"),e.setAttribute("draggable-direction","top,bottom,left,right"),e.setAttribute("draggable-element",o),e.classList.add("draggable-element-handle"),window.__dragoned_selected_element=e}}
data-draggable-for=${this.for}
class="draggable-element-handle"
>
<cdtr-move-icon
iconStyle="fill:#000"
width="18"
height="18"
></cdtr-move-icon>
</paper-button>
</cdtr-tooltip>
<cdtr-tooltip content="clone_element">
<paper-button =${this.cloneElement}>
<cdtr-icon width=${18} height=${18} icon="duplicate"></cdtr-icon>
</paper-button>
</cdtr-tooltip>
<cdtr-tooltip content="remove_element">
<paper-button =${this.onRemove}>
<cdtr-remove-icon
width=${18}
height=${18}
iconStyle=""
></cdtr-remove-icon>
</paper-button>
</cdtr-tooltip>
<!-- <span class="name"> ${this.name} </span> -->
<div class="transparent-gap"></div>
</cdtr-row>
<!-- ${this.showJustifyBar?i.dy`<cdtr-row
alignItems="center"
justify="space-between"
class="bottom-bar bar"
>
<cdtr-tooltip content="left">
<paper-button =${()=>this.justifyContent("flex-start")}>
<cdtr-icon width="18" icon="justifyLeft"></cdtr-icon>
</paper-button>
</cdtr-tooltip>
<cdtr-tooltip content="center">
<paper-button =${()=>this.justifyContent("center")}>
<cdtr-icon width="18" icon="justifyCenter"></cdtr-icon>
</paper-button>
</cdtr-tooltip>
<cdtr-tooltip content="right">
<paper-button =${()=>this.justifyContent("flex-end")}>
<cdtr-icon width="18" icon="justifyRight"></cdtr-icon>
</paper-button>
</cdtr-tooltip>
</cdtr-row>`:null} -->
${this.hasAnimations?i.dy`<div class="animation-bar">
<cdtr-tooltip content="animation">
<paper-button
=${()=>s.Z.app.dispatch("editor-tabs",{tab:"animations"})}
>
<svg
width="10"
height="20"
viewBox="0 0 16 22"
fill="#fff"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.13783 1H11.6942C11.8384 1 11.9352 1.14803 11.8774 1.28016L8.62257 8.71984C8.56476 8.85197 8.66157 9 8.8058 9H14.5561C14.7284 9 14.82 9.20343 14.7059 9.33251L4.14955 21.2657C4.00527 21.4288 3.74115 21.2766 3.81001 21.07L6.91225 11.7632C6.95542 11.6337 6.85903 11.5 6.72251 11.5H1.29021C1.15013 11.5 1.05344 11.3597 1.10331 11.2288L4.95093 1.1288C4.98048 1.05125 5.05484 1 5.13783 1Z"
stroke="#fff"
/>
</svg>
</paper-button>
</cdtr-tooltip>
</div> `:null}`}}(0,o.Z)(l,"properties",{for:{type:String},name:{type:String},selected:{type:Boolean},hasAnimations:{},canDisplayBar:{type:Boolean}}),(0,o.Z)(l,"styles",i.iv`
.draggable-element-handle:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
}
.transparent-gap {
position: absolute;
left: 0;
top: 100%;
background: transparent;
width: 100%;
height: 10px;
}
.name {
max-width: auto;
text-overflow: clip;
overflow: hidden;
white-space: nowrap;
}
.bar {
position: absolute;
height: 30px;
background: transparent;
min-width: 106px;
z-index: 101;
display: flex;
align-items: center;
font-family: var(--font-family);
left: 0;
top: -5px;
transform: translate(0, -100%);
padding: 0 0.4rem;
background: #fff;
font-size: 13px;
border-radius: 3px;
animation: fade_in 0.2s;
color: black;
width: auto;
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.bottom-bar {
top: 100%;
left: 100%;
transform: translateX(-100%);
animation: fade_up 0.2s !important;
}
.animation-bar {
position: absolute;
left: 101%;
top: 0;
background: var(--primary);
padding: 5px 5px;
display: flex;
align-items: center;
border-radius: 3px;
overflow: hidden;
z-index: 99;
}
fade_up {
from {
transform: translateX(-80%);
opacity: 0;
}
}
fade_in {
from {
top: -30px;
opacity: 0;
}
}
.wrapper {
height: 100%;
width: 100%;
}
paper-button {
padding: 0;
min-width: auto;
margin: 0;
}
.drag_block {
cursor: grab;
}
.drag_block:active {
cursor: grabbing !important;
}
`),customElements.define("cdtr-move-handle-bar",l)}}]);