@creaditor/newsletter-starterkit
Version:
Creaditor Newsletter Editor - Starterkit for creating beautiful email newsletters
93 lines (91 loc) • 4.05 kB
JavaScript
"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[8718],{85910:(e,t,i)=>{i.r(t),i.d(t,{EditorImageCard:()=>d});var r=i(56666),o=i(40949),s=i(8427),a=i(61828);class d extends s.oi{constructor(){super(),(0,r.Z)(this,"previewModalRef",(0,a.V)()),this.type="image",this.name="",this.liked=!1,this.imageOptions=[{index:1,value:"delete",onClick:()=>{this.onFileOption("delete")}}]}onFileOption(e){if(this.dialog&&this.dialog.remove(),"preview"===e)"image"===this.type?this.isPreview=!0:window.open(this.src);else if("delete"===e)if("folder"===this.type)this.dispatchEvent(new CustomEvent("deleteFolder",{}));else this.dispatchEvent(new CustomEvent("deleteFile",{}))}firstUpdated(){super.firstUpdated(),"folder"!==this.type&&this.imageOptions.unshift({index:0,value:"preview",onClick:()=>{this.onFileOption("preview")}})}previewFactory(){if("image"===this.type)return(0,o.Z)("img",{loading:"lazy",style:"height: 500px; width: auto; max-width: 95%; margin: auto; display: block;",alt:this.name,src:this.src})}factory(){switch(this.type){case"image":return s.dy`<img alt=${this.name} src="${this.src}" />`;case"audio":case"video":case"pdf":default:break;case"folder":return s.dy`<cdtr-folder-icon
width="100"
height="100"
></cdtr-folder-icon>`}}like(){const e={detail:!this.like,bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("like",e))}render(){return s.dy`
<div class="wrapper ${this.selected?"selected":""}">
${this.controls?s.dy`<div class="controls">
<cdtr-dropdown>
<paper-button slot="trigger" class="fab">
<cdtr-more-icon></cdtr-more-icon>
</paper-button>
<div slot="content">
${this.imageOptions.map((e=>s.dy`<cdtr-dropdown-item =${e.onClick} .value="${e.value}"
><lang-text text="${e.value}"></lang-text>
</cdtr-dropdown-item>`))}
</div>
</cdtr-dropdown>
${"folder"!==this.type?s.dy` <paper-button =${this.like} class="fab">
<cdtr-heart-icon .full=${this.liked}></cdtr-heart-icon>
</paper-button>`:null}
</div>`:null}
${this.factory()}
<cdtr-title class="name">${this.name}</cdtr-title>
<cdtr-title class="size">${this.subTitle}</cdtr-title>
</div>
<paper-dialog
=${()=>this.isPreview=!1}
?opened=${this.isPreview}
>
${this.previewFactory()}
</paper-dialog>
`}}(0,r.Z)(d,"styles",s.iv`
.wrapper {
position: relative;
overflow: hidden;
margin: 1px;
}
.selected {
background: var(--alpha);
outline: 1px solid var(--primary);
}
.name {
width: 100%;
text-align: center;
}
.wrapper:hover {
background: var(--alpha);
border-radius: 0.2rem;
}
.controls {
opacity: 0;
position: absolute;
top: 0;
left: 0;
display: flex;
z-index: 3;
}
vaadin-context-menu-list-box {
text-align: right;
}
cdtr-more-icon,
cdtr-heart-icon {
--cdtr-icon-color: #fff;
}
img {
width: 100%;
height: 100px;
object-fit: contain;
}
.fab {
border-radius: 50px;
padding: 3px;
min-width: 30px;
background: var(--dark);
display: flex;
align-items: center;
}
.wrapper:hover .controls {
opacity: 1;
}
.name {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 11px;
}
.size {
color: grey;
font-size: 10px;
}
`),(0,r.Z)(d,"properties",{type:{type:String},src:{type:String},name:{type:String},subTitle:{type:String},liked:{type:Boolean},controls:{type:Boolean},selected:{type:Boolean},isPreview:{type:Boolean}}),customElements.define("cdtr-editor-media-card",d)}}]);