@creaditor/newsletter-starterkit
Version:
Creaditor Newsletter Editor - Starterkit for creating beautiful email newsletters
267 lines (264 loc) • 20.7 kB
JavaScript
;(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[9766],{29766:(t,e,o)=>{o.r(e),o.d(e,{BlockEditor:()=>p});var r=o(56666),i=o(21293),d=o(70235),n=(o(67237),o(45607)),a=o(58860),s=o(1670),c=o(98766);var l=o(50939),g=o(35210),h=o(11961);o(7592);o.e(4807).then(o.bind(o,54807));class p extends i.oi{constructor(t){super(),(0,r.Z)(this,"onChangeBakgroundExpanding",(t=>{const e=t.target.checked;n.Z.store().execCommand("expand_image_for_outlook",!e)})),(0,r.Z)(this,"getInnerBlocks",(()=>{const t=[],e=this.component.parent("section");return e&&(t.push(e),e.children.forEach((e=>{const o=d.h.get("components",e);o&&"block"===o.type&&t.push(o)}))),t})),this.onChangeWidth=this.onChangeWidth.bind(this),this.getInnerBlocks=this.getInnerBlocks.bind(this),this.isBackgroundImage=!1,this.backgroundVideo="",this.galleryOpened=!1,this.onChangeBakgroundExpanding=this.onChangeBakgroundExpanding.bind(this),this.tabs=[{text:"background"},{text:"design",selected:!0},{text:"settings"}],this.tabName="design",this.maxWidth=0,this.background="",this.padding={topValue:0,bottomValue:0,leftValue:0,rightValue:0},this.margin={topValue:0,bottomValue:0},this.borderStyle="solid",this.borderWidth=0,this.borderColor="#000",this.theme=d.h.get("theme"),this.connectWith=this.connectWith.bind(this),this.cmds={onchangeRadius:t=>{n.Z.store().execCommand("style",{...t.target.json})},toggleResponsive:t=>{this.noResponsive=!t.target.checked,n.Z.store().execCommand("noResponsive",this.noResponsive)},onChangeBorderStyle:t=>{this.borderStyle=t.target.borderStyle||"solid",this.borderWidth=t.target.borderWidth||1,this.borderColor=t.target.borderColor||"#000",n.Z.store().execCommand("style",{borderStyle:t.target.borderStyle,borderWidth:t.target.borderWidth,borderColor:t.target.borderColor})},onRemoveBackgroundVideo:()=>{this.backgroundVideo="",this.backgroundInstance={},n.Z.store().execCommand("background","transparent")},onChangeBackgroundVideo:t=>{const e=t.target.value;let o;if((0,s.Z)(e)){const t=h.x.find((t=>"images"===t.type));t.preset.properties.src=e,o=t.preset}else if((0,c.Z)(e));else if(function(t){if(t&&t.match(/^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/))return!0;return!1}(e)){const t=h.x.find((t=>"video"===t.type));t.preset.properties.url=e,delete t.preset.properties.videoPath,o=t.preset}o&&(n.Z.store().execCommand("background",o),n.Z.store().execCommand("style",{background:null})),this.backgroundVideo=e},onChangeImage:t=>{const e=t.detail,o=[];Array.isArray(e)?e.forEach((t=>o.push(t.src))):o.push(e.src),this.cmds.onChangeBackgroundVideo({target:{value:o.join(",")}}),this.galleryOpened=!1},onChangeHeight:t=>{const e=t.target.value;n.Z.store().execCommand("style",{height:e+"%"}),this.height=e},onChangeMargin:t=>{const e=t.target.value,o=t.target.direction;"all"===o?(n.Z.store().execCommand("style",{marginTop:e+"px",marginBottom:e+"px"}),this.margin={topValue:e,bottomValue:e}):n.Z.store().execCommand("style",{[(0,l.Z)(`margin-${o.toLowerCase()}`)]:e+"px"})},onChangePadding:t=>{const e=t.target.value,o=t.target.direction,r=(0,l.Z)(`padding-${o.toLowerCase()}`);"all"===o?(n.Z.store().execCommand("style",{padding:null,"padding-top":null,"padding-bottom":null,"padding-left":null,"padding-right":null,paddingTop:e+"px",paddingBottom:e+"px",paddingLeft:e+"px",paddingRight:e+"px","padding-right":null,"padding-left":null,"padding-top":null,"padding-bottom":null}),this.padding={topValue:e,bottomValue:e,leftValue:e,rightValue:e}):(n.Z.store().execCommand("style",{[r]:e+"px",[`padding-${o.toLowerCase()}`]:null}),this.props.style={[r]:e+"px"},this[`padding${o.toLowerCase()}`]=e)},onChangebackground(t){const e=t.target.value;this.background=e;n.Z.components.forEach((t=>{const o=t.find("text");if(o&&!o.closest("card")){let t=o.tiptap.getAttributes("textStyle").color;if(!t){const e=o.element.querySelector("p,h1,h2,h3,h4,h5,h6");e&&(t=window.getComputedStyle(e).color)}if(t&&!t.includes("var(--")&&!e.includes("var(--")){const r=(0,g.R)(t,e);o.tiptap.chain().selectAll().setColor(r).run()}}})),n.Z.store().execCommand("style",{background:e,backgroundColor:null});"web"!==d.h.get("config","channel")&&n.Z.store().execCommand("background",null)}}}onChangeImageBackgroundProp(t){const e=t.detail,{key:o,value:r}=e;if(this.props.background){const t=JSON.parse(JSON.stringify(this.props.background)),e=t.properties;if(!e.style[o])throw new Error(`${o} is not a valid property`);e.style[o]=r,n.Z.store().execCommand("background",t)}}connectedCallback(){super.connectedCallback(),this.connectWith(),n.Z.on("update",this.connectWith)}disconnectedCallback(){super.disconnectedCallback(),n.Z.off("update",this.connectWith)}onChangeWidth(t){let e=t.target.value;e<500&&(e=500),e>1e3&&(e=1e3);const o=this.getInnerBlocks();n.Z.store().execCommand2({transactions:[{key:"style",value:{width:e+"px",maxWidth:"100%"}}],update:[...o]}),this.maxWidth=e}connectWith(){const t=n.Z.components[n.Z.components.length-1];if(this.component=t,t&&"block"===t.type){this.props=t.props;let{style:e}=this.props;e||(e={}),t.props||(t.props={}),t.props.style||(t.props.style={}),this.expand_image_for_outlook=!!t.props.expand_image_for_outlook,this.boxShadow=t.props.style.boxShadow,this.borderStyle=t.props.style.borderStyle,this.borderWidth=t.props.style.borderWidth,this.borderColor=t.props.style.borderColor;const o=t.props.background;if(this.isBackgroundImage="images"===o?.type,this.noResponsive=!!t.props.noResponsive,this.isBackgroundImage){const t=o.properties;this.backgroundAttachment=t.style.backgroundAttachment,this.backgroundPosition=t.style.backgroundPosition,this.backgroundRepeat=t.style.backgroundRepeat,this.backgroundSize=t.style.backgroundSize}this.backgroundInstance=o,this.backgroundVideo=o?.properties?.src||o?.properties?.url||"";const r=t.element,i=window.getComputedStyle(r);this.maxWidth=parseInt(i.width),this.width=parseInt(e.width,10)||this.maxWidth,this.background=e.background||i.background,this.padding={topValue:parseInt(i.paddingTop),bottomValue:parseInt(i.paddingBottom),leftValue:parseInt(i.paddingLeft),rightValue:parseInt(i.paddingRight)},this.margin={topValue:parseInt(i.marginTop),bottomValue:parseInt(i.marginBottom)}}}changeTab(t){this.tabName=t.target.value}render(){const t=d.h.get("config","channel");return i.dy`
<cdtr-editor-tabs .tabs=${this.tabs} @tabChanged=${this.changeTab}>
<div slot="content">
${"background"===this.tabName?i.dy` <cdtr-editor-container>
<cdtr-row justify="space-between">
<cdtr-col sm="5"
><paper-button
class="gallery"
raised
@click=${()=>this.galleryOpened=!0}
><lang-text
text="openGalleryImage"
></lang-text></paper-button
></cdtr-col>
<cdtr-col sm="5">
<paper-button
class="backgrounds"
raised
@click=${()=>a.Z.dispatch("open_add_menu",{type:"backgrounds",disabledOptions:!0,target:n.Z.components[0]})}
><lang-text
text="backgrounds"
></lang-text></paper-button
></cdtr-col>
</cdtr-row>
</cdtr-editor-container>
${this.isBackgroundImage&&"web"===t?i.dy`<cdtr-editor-container>
<background-editor-plugin
backgroundAttachment=${this.backgroundAttachment}
backgroundPosition=${this.backgroundPosition}
backgroundRepeat=${this.backgroundRepeat}
backgroundSize=${this.backgroundSize}
@change=${this.onChangeImageBackgroundProp}
></background-editor-plugin
></cdtr-editor-container>`:null}
<cdtr-editor-container>
<cdtr-row>
<cdtr-title
><lang-text
text="add_urlAddress_from_media_site"
></lang-text
></cdtr-title>
</cdtr-row>
<cdtr-row>
<cdtr-input
.value="${this.backgroundVideo}"
@input=${this.cmds.onChangeBackgroundVideo}
style="width:100%;direction:ltr;text-align:left;"
placeholder="https://"
></cdtr-input>
${"object"==typeof this.backgroundInstance&&this.backgroundInstance?.component?i.dy`<paper-button
style=" font-size: 13px;
padding: 0;
text-align: var(--text-align-locale);
direction: var(--direction-locale);
justify-content: flex-start;
color:red;
margin: 0;"
@click=${this.cmds.onRemoveBackgroundVideo}
><lang-text text="remove_background_movie"></lang-text
></paper-button>`:null}
</cdtr-row>
</cdtr-editor-container>
<cdtr-divider></cdtr-divider>
<cdtr-editor-container>
<cdtr-colorpicker-editor
.hasAlpha=${"web"===t}
@change=${this.cmds.onChangebackground}
.value=${this.background}
text="backgroundColor"
></cdtr-colorpicker-editor>
</cdtr-editor-container>
<cdtr-divider></cdtr-divider>
<cdtr-editor-container>
<cdtr-checkbox
@change=${t=>this.onChangeBakgroundExpanding(t)}
.checked=${this.expand_image_for_outlook}
>
<cdtr-title
><lang-text text="expand_image_for_outlook"></lang-text
></cdtr-title>
</cdtr-checkbox>
<h6>
<lang-text
whiteSpace="break-spaces"
text="expand_image_for_outlook_description"
></lang-text>
</h6>
</cdtr-editor-container>
<cdtr-divider></cdtr-divider>`:null}
${"design"===this.tabName?i.dy`
<cdtr-editor-container>
<cdtr-colorpicker-editor
.hasAlpha=${!1}
@change=${this.cmds.onChangebackground}
.value=${this.background}
text="backgroundColor"
></cdtr-colorpicker-editor>
</cdtr-editor-container>
<cdtr-editor-container>
<cdtr-width-editor
text="width"
unit="px"
max="1000"
min="500"
.value="${this.width}"
@input=${this.onChangeWidth}
.sizes=${[{name:d.h.get("lang","recommended")||"recommended",value:600,default:!0},{name:d.h.get("lang","large")||"large",value:1e3}]}
></cdtr-width-editor>
<p style="font-size:12px">
<lang-text whiteSpace="" text="email_600"></lang-text>
</p>
</cdtr-editor-container>
<cdtr-divider></cdtr-divider>
<cdtr-editor-container>
<cdtr-row justify="center">
<cdtr-col sm="12"
><cdtr-title style="display:block" class="align-lang"
><lang-text text="padding"></lang-text></cdtr-title
></cdtr-col>
<cdtr-col sm="6"
><cdtr-spacing
.topValue="${this.padding.topValue}"
.bottomValue="${this.padding.bottomValue}"
.leftValue="${this.padding.leftValue}"
.rightValue="${this.padding.rightValue}"
isLock=${!1}
max="500"
@input=${this.cmds.onChangePadding}
></cdtr-spacing
></cdtr-col>
</cdtr-row>
</cdtr-editor-container>
<cdtr-divider></cdtr-divider>
<cdtr-editor-container>
<cdtr-row alignItems="center" justify="space-between">
<cdtr-col>
<cdtr-title>
<lang-text text="no_responsive"></lang-text>
</cdtr-title>
</cdtr-col>
<cdtr-col sm="1">
<cdtr-checkbox
@change=${this.cmds.toggleResponsive}
.checked="${this.noResponsive}"
></cdtr-checkbox>
</cdtr-col>
</cdtr-row>
</cdtr-editor-container>
<!-- <cdtr-divider></cdtr-divider>
<cdtr-editor-container>
<cdtr-radius-editor
@input=${this.cmds.onchangeRadius}
></cdtr-radius-editor>
</cdtr-editor-container> -->
<cdtr-divider></cdtr-divider>
<cdtr-editor-container>
<cdtr-border-editor
.borderStyle=${this.borderStyle}
.borderWidth=${this.borderWidth}
.borderColor=${this.borderColor}
@change=${this.cmds.onChangeBorderStyle}
></cdtr-border-editor>
</cdtr-editor-container>
`:null}
<!-- ${"typography"===this.tabName?i.dy` <cdtr-text-editor-plugin></cdtr-text-editor-plugin> `:null} -->
<!-- ${"spacing"===this.tabName?i.dy`
<cdtr-editor-container>
<cdtr-row justify="center">
<cdtr-col sm="12"
><cdtr-title style="display:block" class="align-lang"
><lang-text text="padding"></lang-text></cdtr-title
></cdtr-col>
<cdtr-col sm="6"
><cdtr-spacing
.topValue="${this.padding.topValue}"
.bottomValue="${this.padding.bottomValue}"
.leftValue="${this.padding.leftValue}"
.rightValue="${this.padding.rightValue}"
isLock=${!1}
max="500"
@input=${this.cmds.onChangePadding}
></cdtr-spacing
></cdtr-col>
</cdtr-row>
</cdtr-editor-container>
<cdtr-editor-container>
<cdtr-row justify="center">
<cdtr-col sm="12"
><cdtr-title style="display:block" class="align-lang"
><lang-text text="margin"></lang-text></cdtr-title
></cdtr-col>
<cdtr-col sm="6"
><cdtr-spacing
.topValue=${this.margin.topValue}
.bottomValue=${this.margin.bottomValue}
isLock=${!1}
max="500"
.hasLeft=${!1}
.hasRight=${!1}
@input=${this.cmds.onChangeMargin}
></cdtr-spacing
></cdtr-col>
</cdtr-row>
</cdtr-editor-container>
`:null} -->
</div>
</cdtr-editor-tabs>
<cdtr-gallery
.multi=${!0}
@close=${()=>{this.galleryOpened=!1}}
.opened=${this.galleryOpened}
@file=${this.cmds.onChangeImage}
></cdtr-gallery>
`}}(0,r.Z)(p,"styles",i.iv`
paper-button.gallery {
background: var(--primary);
color: var(--primary-text);
}
paper-button.backgrounds {
background: BLACK;
color: #fff;
}
`),(0,r.Z)(p,"properties",{maxWidth:{type:Number},backgroundInstance:{type:Object},padding:{type:Object},margin:{type:Object},tabs:{type:Array},tabName:{type:String},galleryOpened:{type:Boolean},backgroundVideo:{type:String,reflect:!0},isBackgroundImage:{type:Boolean},backgroundAttachment:{type:String},backgroundPosition:{type:String},backgroundRepeat:{type:String},backgroundSize:{type:String},noResponsive:{type:Boolean},borderStyle:{type:String},borderWidth:{type:Number},borderColor:{type:String}}),customElements.define("block-editor",p)},7592:(t,e,o)=>{o.d(e,{Z:()=>n});var r=o(56666),i=o(21293);class d extends i.oi{constructor(){super(),this.onInput=this.onInput.bind(this),this.isLocked=!0,this.borderTopRightRadius=0,this.borderTopLeftRadius=0,this.borderBottomRightRadius=0,this.borderBottomLeftRadius=0}connectedCallback(){super.connectedCallback()}onInput(t,e){t.preventDefault();const o=t.target.value,r=o+"px";this.isLocked?(this.borderTopRightRadius=o,this.borderTopLeftRadius=o,this.borderBottomRightRadius=o,this.borderBottomLeftRadius=o,this.json={borderTopRightRadius:r,borderTopLeftRadius:r,borderBottomRightRadius:r,borderBottomLeftRadius:r,borderRadius:null}):(this.json={borderTopRightRadius:parseInt(this.borderTopRightRadius||0)+"px",borderTopLeftRadius:parseInt(this.borderTopLeftRadius||0)+"px",borderBottomRightRadius:parseInt(this.borderBottomRightRadius||0)+"px",borderBottomLeftRadius:parseInt(this.borderBottomLeftRadius||0)+"px",borderRadius:null},this.json[e]=r),this.value=o,this.radiusKey=e;const i=new UIEvent("input",{view:window,bubbles:!0,cancelable:!0});this.dispatchEvent(i)}resolveIcon(t){let e;switch(t){case"borderTopRightRadius":e="arrowTopRight";break;case"borderTopLeftRadius":e="arrowTopLeft";break;case"borderBottomRightRadius":e="arrowBottomRight";break;case"borderBottomLeftRadius":e="arrowBottomLeft"}return i.dy`<cdtr-icon
width="15"
height="15"
icon="${e}"
></cdtr-icon>`}onChangeLock(){this.isLocked=!this.isLocked}render(){this.elementId&&this.elementId!==this.lastElementId&&(this.lastElementId=this.elementId,this.isLocked=this.borderTopRightRadius===this.borderTopLeftRadius&&this.borderBottomRightRadius===this.borderBottomLeftRadius&&this.borderTopRightRadius===this.borderBottomLeftRadius);this.onChange;const t=this.onInput;return i.dy`<cdtr-row
alignItems="center"
spacing="3px"
style="position:relative;"
>
${["borderTopRightRadius","borderTopLeftRadius","borderBottomRightRadius","borderBottomLeftRadius"].map((e=>i.dy`<cdtr-col>
${this.resolveIcon(e)}
<cdtr-number-input
.type=${"number"}
.max=${300}
.min=${0}
value="${parseFloat(this[e])}"
@input=${o=>t(o,e)}
style="width:100%"
></cdtr-number-input
></cdtr-col>`))}
<cdtr-button @click=${this.onChangeLock}>
<cdtr-icon
style="height:10px"
width="20"
height="20"
.icon="${this.isLocked?"lock":"unlock"}"
></cdtr-icon>
</cdtr-button>
</cdtr-row>`}}(0,r.Z)(d,"properties",{value:{type:Number},json:{type:Object},onChange:{type:Function},borderTopRightRadius:{type:Number},borderTopLeftRadius:{type:Number},borderBottomRightRadius:{type:Number},borderBottomLeftRadius:{type:Number},isLocked:{type:Boolean},elementId:{type:String},radiusKey:{type:String}}),customElements.define("cdtr-radius-editor",d);const n=t=>i.dy` <cdtr-editor-container>
<cdtr-row>
<cdtr-title><lang-text text="${t.title}"></lang-text></cdtr-title>
</cdtr-row>
<cdtr-radius-editor
.elementId=${t.elementId}
@input=${t.onInput}
.value=${t.value}
.borderTopRightRadius=${t.borderTopRightRadius||t.value||0}
.borderTopLeftRadius=${t.borderTopLeftRadius||t.value||0}
.borderBottomRightRadius=${t.borderBottomRightRadius||t.value||0}
.borderBottomLeftRadius=${t.borderBottomLeftRadius||t.value||0}
></cdtr-radius-editor>
</cdtr-editor-container>`},98766:(t,e,o)=>{o.d(e,{Z:()=>i});const r=JSON.parse('["3g2","3gp","aaf","asf","avchd","avi","drc","flv","m2v","m3u8","m4p","m4v","mkv","mng","mov","mp2","mp4","mpe","mpeg","mpg","mpv","mxf","nsv","ogg","ogv","qt","rm","rmvb","roq","svi","vob","webm","wmv","yuv"]');function i(t){const e=/(?:\.([^.]+))?$/.exec(t.toLowerCase())[1];return-1!==r.findIndex((t=>t===e))}}}]);