@creaditor/newsletter-starterkit
Version:
Creaditor Newsletter Editor - Starterkit for creating beautiful email newsletters
408 lines (396 loc) • 15.2 kB
JavaScript
/*! For license information please see 5320.creaditor.bundle.js.LICENSE.txt */
"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[5320],{65320:(e,t,i)=>{i.r(t),i.d(t,{MyElement:()=>l});var o=i(8427),n=i(62331),s=i(61828),r=function(e,t,i,o){var n,s=arguments.length,r=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(r=(s<3?n(r):s>3?n(t,i,r):n(t,i))||r);return s>3&&r&&Object.defineProperty(t,i,r),r};const a=document.createElement("style");a.innerHTML="body {overflow: hidden;}";const d=[{lang:"en",keys:{backToEditor:"Back to Editor"}},{lang:"he",keys:{backToEditor:"חזור לעורך"}}];let l=class extends o.oi{constructor(){super(),this.iframeRef=(0,s.V)(),this.loading=!0,this.domain="",this.type="desktop",this.endPoint="http://localhost:3003/r/",this.siteId="",this.opened=!1,this.mode="",this.language="en",this.translates=null,this.primaryColor="blue",this.onClose=()=>{const e={detail:{opened:!this.opened},bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("close",e)),a.remove()},this.onKeyDown=e=>{"Escape"===e.key&&this.onClose()},this.onKeyDown=this.onKeyDown.bind(!0),this.listnerForKeyDownOn=!1,this.modes={desktop:{width:"90vw",height:"90vh"},mobile:{width:"375px",height:"667px"}}}getRect(e){return this.modes[e]}changeType(e){this.type===e&&this.onClose(),this.type=e}firstUpdated(e){this.opened&&this.setIframePath()}setIframePath(){const e=this.endPoint+this.siteId+`?device=${this.type}&prod=${"production"===this.mode?1:0}`;setTimeout((()=>{const t=this.iframeRef.value;t.addEventListener("load",(()=>{t.style.opacity="1",this.loading=!1}),{once:!0}),t.src!==e&&t&&(t.src=e)}),100)}connectedCallback(){super.connectedCallback();const e=d.find((e=>e.lang===this.language));e&&(this.translates=e)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this.onKeyDown)}render(){var e;this.opened&&document.head.appendChild(a),!this.listnerForKeyDownOn&&this.opened?(this.listnerForKeyDownOn=!0,window.removeEventListener("keydown",this.onKeyDown),window.addEventListener("keydown",this.onKeyDown)):!this.opened&&this.listnerForKeyDownOn&&(this.listnerForKeyDownOn=!1,window.removeEventListener("keydown",this.onKeyDown)),this.opened&&this.setIframePath();const t=this.primaryColor,i=o.dy` <iframe
style="${"mobile"===this.type?"max-height:84%":""}"
class="iframe-content"
${(0,s.i)(this.iframeRef)}
></iframe>`,n=this.getRect(this.type);return this.opened?o.dy` <div class="container">
<nav class="navbar">
<div>
<button
tabindex="0"
role="button"
=${this.onClose}
class="button clickable"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
fill=${t}
>
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z"
/>
</svg>
<span style="color:${t}"
>${null===(e=this.translates)||void 0===e?void 0:e.keys.backToEditor}</span
>
<span class="activate-device"></span>
</button>
</div>
<div class="device-holder">
<button
tabindex="0"
role="button"
=${()=>this.changeType("desktop")}
class="button ${"desktop"===this.type.toLowerCase()?"active":null}"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
>
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M4 16h16V5H4v11zm9 2v2h4v2H7v-2h4v-2H2.992A.998.998 0 0 1 2 16.993V4.007C2 3.451 2.455 3 2.992 3h18.016c.548 0 .992.449.992 1.007v12.986c0 .556-.455 1.007-.992 1.007H13z"
/>
</svg>
<span
style="background:${t}"
class="activate-device"
></span>
</button>
<button
=${()=>this.changeType("mobile")}
class="button ${"mobile"===this.type.toLowerCase()?"active":null}"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
>
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M7 4v16h10V4H7zM6 2h12a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm6 15a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"
/>
</svg>
<span class="activate-device"></span>
</button>
</div>
${"production"===this.mode?o.dy`<div style="width:100px"></div> `:o.dy`<div class="info">
<p>
${"he"===this.language?"שימו ❤ כדי לראות את השינויים בתצוגת הדף, לחצו על פרסם ":""}
</p>
</div>`}
</nav>
<div
style="width:${n.width};height:${n.height}"
class="screen"
>
${"desktop"===this.type&&this.domain?o.dy`<div class="header-dekstop">
<div class="header-dekstop-url">
${-1!==this.domain.indexOf("https://")?o.dy`<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="16"
height="16"
>
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M19 10h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h1V9a7 7 0 1 1 14 0v1zM5 12v8h14v-8H5zm6 2h2v4h-2v-4zm6-4V9A5 5 0 0 0 7 9v1h10z"
/>
</svg>`:null}
<a class="domain-url" href="${this.domain}" target="_blank">
${this.domain}
</a>
</div>
</div>`:null}
${"mobile"===this.type||"tablet"===this.type?o.dy`<div class="header-mobile">
<div
class="decoration"
style="width:50px;height:5px;border-radius:10px;"
></div>
<div
class="decoration"
style="margin-left:5px;width:5px;height:5px;border-radius:10px;"
></div>
</div>`:null}
${this.loading?o.dy`<div class="progress-line-loader"></div>`:null}
${i}
${"mobile"===this.type||"tablet"===this.type?o.dy`
<div class="footer-mobile">
<div class="circle-footer"></div>
</div>
`:null}
</div>
</div>`:null}};l.styles=o.iv`
:host {
direction: ltr;
}
* {
box-sizing: border-box;
}
.loader {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 10px solid #f8f8f8;
border-radius: 50%;
border-top: 10px solid #2842b5;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.header-mobile {
height: 50px;
width: 100%;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #ccc;
}
.header-mobile .decoration {
background-color: #535353;
}
.footer-mobile {
height: 50px;
width: 100%;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-top: 1px solid #ccc;
}
.circle-footer {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #535353;
}
.header-dekstop {
border-bottom: 1px solid #ccc;
height: 50px;
display: flex;
align-items: center;
}
.header-dekstop-url {
background-color: #f5f5f5;
padding: 15px;
width: 98%;
height: 30px;
border-radius: 30px;
margin: auto;
display: flex;
align-items: center;
}
.domain-url {
color: #000;
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-size: 14px;
margin-left: 10px;
}
.domain-url:hover {
text-decoration: underline;
}
screen-fade-in {
from {
margin-top: -100%;
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes screen-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes screen-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-ms-keyframes screen-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.container {
width: 100vw;
height: 100vh;
background-color: #e1e1e1;
top: 0;
left: 0;
display: block;
position: fixed;
z-index: 9999;
box-sizing: border-box;
-webkit-animation: screen-fade-in 0.5s;
-moz-animation: screen-fade-in 0.5s;
-ms-animation: screen-fade-in 0.5s;
-o-animation: screen-fade-in 0.5s;
animation: screen-fade-in 0.5s;
}
.info {
display: flex;
align-items: center;
font-family: Arial;
font-size: 14px;
}
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #fff;
z-index: 1;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.device-holder {
width: 200px;
height: 100%;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
}
.button {
display: inline-flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
position: relative;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
outline: 0px;
border: 0px;
margin: 0px;
cursor: pointer;
user-select: none;
vertical-align: middle;
appearance: none;
text-decoration: none;
font-family: Roboto, Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 0.875rem;
line-height: 1.75;
letter-spacing: 0.02857em;
text-transform: uppercase;
min-width: 14px;
padding: 6px 16px;
border-radius: 4px;
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
color: rgba(0, 0, 0, 0.87);
background-color: #fff;
}
.button.clickable:active {
top: 2px;
}
.button:hover {
background-color: #f5f5f5;
}
.button.active .activate-device,
.button:focus .activate-device {
width: 100%;
max-width: 40px;
height: 2px;
background-color: blue;
border-radius: 10px;
position: absolute;
top: 100%;
animation: slide-in 0.6s ease-in-out;
}
.button:focus .activate-device {
background-color: black !important;
opacity: 0.5;
animation: slide-in 0.2s ease-in-out;
}
slide-in {
from {
opacity: 0;
width: 0;
}
to {
transform: translateY(0);
}
}
.progress-line-loader {
width: 100%;
height: 4px;
background-color: #ddd;
position: relative;
}
.progress-line-loader::after {
content: '';
display: block;
width: 0;
height: 100%;
background-color: #1228a3;
position: absolute;
top: 0;
left: 0;
animation: progress 3s linear infinite;
}
progress {
0% {
width: 0;
}
50% {
width: 50%;
}
100% {
width: 100%;
}
}
.screen {
background-color: #fff;
width: 100%;
height: 100%;
margin: auto;
margin-top: 80px;
transition: width 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955),
height 0.4s cubic-bezier(0.755, 0.05, 0.855, 0.06);
overflow: hidden;
border-radius: 10px;
}
.iframe-content {
width: 100%;
height: 100%;
border: none;
}
`,r([(0,n.Cb)({type:Boolean,reflect:!0})],l.prototype,"loading",void 0),r([(0,n.Cb)({type:String,reflect:!1})],l.prototype,"domain",void 0),r([(0,n.Cb)({type:String,reflect:!1})],l.prototype,"type",void 0),r([(0,n.Cb)({type:String,reflect:!1})],l.prototype,"endPoint",void 0),r([(0,n.Cb)({type:String,reflect:!1})],l.prototype,"siteId",void 0),r([(0,n.Cb)({type:Boolean,reflect:!1})],l.prototype,"opened",void 0),r([(0,n.Cb)({type:String,reflect:!1})],l.prototype,"mode",void 0),r([(0,n.Cb)({type:String})],l.prototype,"language",void 0),r([(0,n.Cb)({type:Object})],l.prototype,"translates",void 0),r([(0,n.Cb)({type:String})],l.prototype,"primaryColor",void 0),l=r([(0,n.Mo)("cdtr-preview-widget")],l)},62331:(e,t,i)=>{i.d(t,{Mo:()=>o,Cb:()=>s});const o=e=>t=>"function"==typeof t?((e,t)=>(customElements.define(e,t),t))(e,t):((e,t)=>{const{kind:i,elements:o}=t;return{kind:i,elements:o,finisher(t){customElements.define(e,t)}}})(e,t),n=(e,t)=>"method"===t.kind&&t.descriptor&&!("value"in t.descriptor)?{...t,finisher(i){i.createProperty(t.key,e)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:t.key,initializer(){"function"==typeof t.initializer&&(this[t.key]=t.initializer.call(this))},finisher(i){i.createProperty(t.key,e)}};function s(e){return(t,i)=>void 0!==i?((e,t,i)=>{t.constructor.createProperty(i,e)})(e,t,i):n(e,t)}var r;null===(r=window.HTMLSlotElement)||void 0===r||r.prototype.assignedElements}}]);