@creaditor/newsletter-starterkit
Version:
Creaditor Newsletter Editor - Starterkit for creating beautiful email newsletters
51 lines (50 loc) • 3.67 kB
JavaScript
"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[6236],{46236:(e,t,r)=>{r.r(t),r.d(t,{BreadCrumbs:()=>l});var s=r(56666),i=r(40949),n=r(21293),o=(r(58860),r(70235)),c=r(23602),a=r(45607);class l extends n.oi{constructor(){super(),this.crumbs=[],this.cover=function(){const e=document.createElement("div");return e.style.position="fixed",e.style.background="var(--primary)",e.style.zIndex=2,e.style.border="1px dashed black",e.style.opacity=.2,e}(),this.currectCrumb={},this.onSubscribe=()=>{let e;this.crumbs=[];const t=a.Z.components[a.Z.components.length-1];if(!t)return;e=t.element;let r=t.type.getElementType(),s="";t.props.as&&(s=` (${o.h.get("lang",t.props.as)||t.props.as})`),this.currectCrumb={type:r,as:s,name:t.props.name,id:t.id};if(e){let t=e;for(;t&&t.parentElement;)if(t=t.parentElement.closest("[data-type]"),t){const e=o.h.get("components",t.dataset.id);let r=!0;e&&"row"!==e.type&&("col"===e.type&&"block"!==e.parent().type&&(r=!1),r&&this.crumbs.unshift({type:e.type,name:e.props.name,id:e.id,element:e.element,compose:e}))}this.dispatchEvent(new CustomEvent("change",[...this.crumbs]))}},this.onSubscribe=this.onSubscribe.bind(this)}onHover(e){if(e){const t=e.getBoundingClientRect();this.cover.style.left=t.left+"px",this.cover.style.top=t.top+"px",this.cover.style.width=t.width+"px",this.cover.style.height=t.height+"px",document.body.appendChild(this.cover)}}render(){const e=o.h.get("langConfig","direction");return this.crumbs.length>0?n.dy`
<!-- <cdtr-tooltip content="breadcrumbs_info" .opened=${!0}></cdtr-tooltip> -->
<div>
${this.crumbs.map(((t,r)=>n.dy` <span
=${()=>this.cover.remove()}
=${()=>this.onHover(t.element)}
=${()=>this.clickBread(t)}
class="breadcrumb"
>${t.name||n.dy`<lang-text text=${t.type}></lang-text>`}</span
>${this.crumbs.length===r?null:(0,i.Z)(c.IT,{style:{transform:`rotate(${"ltr"===e?"180deg":"0"})`},class:"arrow"})}`))}
${this.mainText?n.dy` <div class="currect">
${this.currectCrumb.name||n.dy`<lang-text text=${this.currectCrumb.type}></lang-text
>${this.currectCrumb.as}`}
</div>`:null}
</div>
`:""}connectedCallback(){super.connectedCallback(),document.body.appendChild(this.cover),a.Z.on("select",this.onSubscribe),a.Z.on("update",this.onSubscribe)}disconnectedCallback(){super.disconnectedCallback(),this.cover.remove(),a.Z.off("select",this.onSubscribe),a.Z.off("update",this.onSubscribe)}clickBread(e){this.cover.remove(),a.Z.clean().selectComponent(e.compose)}}(0,s.Z)(l,"styles",n.iv`
:host {
direction: var(--direction);
padding: 10px;
display: block;
height: 50px;
}
.currect {
font-size: 13px;
font-family: var(--font-family);
font-weight: 700;
color: var(--primary);
margin-top: 4px;
margin-right: 4px;
margin-left: 4px;
display:inline-block;
}
.breadcrumb {
font-size: 12px;
cursor: pointer;
font-family: var(--font-family);
margin-right: 4px;
margin-left: 4px;
color: var(--breadcrumbs);
}
.breadcrumb:hover {
color: var(--primary);
}
.arrow {
height: 14px;
width: 14px;
fill: #42465694;
vertical-align: middle;
}
`),(0,s.Z)(l,"properties",{crumbs:{type:Array},mainText:{type:Boolean,reflect:!0}}),customElements.define("cdtr-breadcrumbs",l)}}]);