@creaditor/newsletter-starterkit
Version:
Creaditor Newsletter Editor - Starterkit for creating beautiful email newsletters
60 lines • 5.89 kB
JavaScript
"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[6178],{96178:(e,t,n)=>{n.r(t),n.d(t,{AnimationEditor:()=>l});var s=n(56666),o=n(21293),i=n(45607),a=n(58860),c=n(70235),d=n(38036);const r=[{id:1,name:"fade_in",class_code:"fadeIn",src:"",props:{},puzzle:[{type:"fade-in"}]},{id:1,name:"fade_in_down",class_code:"fadeInDown",puzzle:[{type:"fade-in-down"}],props:{}},{id:1,name:"back_in_down",class_code:"backInDown",puzzle:[{type:"back-in-down"}],props:{}},{id:1,name:"back_in_right",class_code:"backInRight",puzzle:[{type:"back-in-right"}],props:{}},{id:1,name:"bounce",class_code:"bounce",puzzle:[{type:"bounce"}],props:{}},{id:1,name:"tada",class_code:"tada",puzzle:[{type:"tada"}],props:{}}];class l extends o.oi{constructor(){super(),this.animationsOptions=[{type:"scroll",props:{},title:"on_scroll"}],this.stack=[],this.selectedAnimations=null,this.animations=r,this.onInspect=this.onInspect.bind(this)}onMouseClick(e,t){switch(e){case"scroll":i.Z.store().execCommand("interactions",(e=>{const n=e.props.interactions,s=n.findIndex((e=>"scroll"===e.on&&"animation"===e.type));let o;return-1!==s&&(o=n[s],n.splice(s,1)),o&&o.value===t.class_code&&"className"===o.as&&"scroll"===o.on?(a.Z.dispatch("snackbar",{text:c.h.get("lang","animation_deleted")}),n):(n.push({on:"scroll",type:"animation",as:"className",value:t.class_code}),a.Z.dispatch("snackbar",{text:c.h.get("lang","animation_added")}),n)}));break;case"hover":i.Z.store().execCommand("interactions",(e=>{const n=e.props.interactions,s=n.findIndex((e=>"hover"===e.on&&"animation"===e.type));let o;return-1!==s&&(o=n[s],n.splice(s,1)),o&&o.value===t.class_code&&"className"===o.as&&"hover"===o.on?(a.Z.dispatch("snackbar",{text:c.h.get("lang","animation_deleted")}),n):(n.push({on:"hover",type:"animation",as:"className",value:t.class_code}),a.Z.dispatch("snackbar",{text:c.h.get("lang","animation_added")}),n)}))}}onMouseEnter(e){setTimeout((()=>{e.overed=!0,i.Z.components.forEach((t=>{this.stack.push({animation:e,component:t}),t.element.classList.add(`cdtr__animate__${e.class_code}`),t.element.classList.add("cdtr__animated")})),this.animations=JSON.parse(JSON.stringify(this.animations))}),20)}onMouseLeave(e){e.overed=!1,this.stack.forEach((e=>{let{component:t,animation:n}=e;t.element.classList.remove(`cdtr__animate__${n.class_code}`),t.element.classList.remove("cdtr__animated")})),this.stack=[],this.animations=JSON.parse(JSON.stringify(this.animations))}onInspect(){const e=i.Z.components[0];if(e){const t=e.props.interactions.filter((e=>e.type="animation"));this.selectedAnimations=t}}connectedCallback(){super.connectedCallback(),this.style.zIndex=99,this.onInspect(),i.Z.on("select",this.onInspect),i.Z.on("update",this.onInspect)}disconnectedCallback(){super.disconnectedCallback(),i.Z.off("select",this.onInspect),i.Z.off("update",this.onInspect)}render(){return o.dy`
<cdtr-accordion-item isOpen=${!0} label="on_scroll">
<cdtr-row>
${(0,d.r)(this.animations,(e=>e.id),(e=>o.dy`<cdtr-col
=${t=>this.onMouseEnter(e)}
=${()=>this.onMouseLeave(e)}
sm="6"
>
<cdtr-tooltip
style="width:100%;"
.arrow=${!1}
delay="800,0"
.content=${this.getActiveAnimationName(e)}
>
<cdtr-thumb-card
.bordered=${!0}
style="width:100%"
=${t=>{t.target.closest("cdtr-more-icon")||t.target.closest("cdtr-dropdown")||this.onMouseClick("scroll",e)}}
.selected=${this.selectedAnimations.find((t=>t.value===e.class_code))}
text=${e.name}
.puzzle=${e.puzzle}
.iconClassName=${e.overed?"cdtr__animated cdtr__animate__"+e.class_code:"cdtr__animated "}
>
<div class="config" slot="config">
<cdtr-dropdown style="width:100%;">
<paper-button class="options_button" slot="trigger">
<cdtr-more-icon></cdtr-more-icon>
</paper-button>
<div slot="content">
${this.animationsOptions.map((t=>o.dy`<cdtr-dropdown-item
=${n=>{n.preventDefault(),this.onMouseClick(t.type,e)}}
.focused=${this.isActiveAnimation(e,t)}
.selected=${this.isActiveAnimation(e,t)}
><lang-text
text="${t.title}"
></lang-text>
</cdtr-dropdown-item>`))}
</div>
</cdtr-dropdown>
</div>
</cdtr-thumb-card>
</cdtr-tooltip>
</cdtr-col>`))}
</cdtr-row>
</cdtr-accordion-item>
`}getActiveAnimationName(e){this.selectedAnimations.find((t=>t.value===e.class_code));const t=this.selectedAnimations.find((t=>"scroll"===t.on&&t.value===e.class_code)),n=this.selectedAnimations.find((t=>"hover"===t.on&&t.value===e.class_code)),s=[];return t&&s.push(c.h.get("lang","active_on-scroll")),s.length>0&&s.push("\n"),n&&s.push(c.h.get("lang","active_on-hover")),s.join("")}isActiveAnimation(e,t){return this.selectedAnimations.find((n=>n.value===e.class_code&&t.type===n.on))}}(0,s.Z)(l,"properties",{name:{},animations:{type:Array},selected:{type:String}}),(0,s.Z)(l,"styles",o.iv`
.gallery {
background-color: var(--primary);
color: var(--primaryText);
}
.config {
position: absolute;
left: 0;
top: 10%;
}
.options_button {
padding: 0;
min-width: 40px;
}
`),customElements.define("cdtr-animations-editor",l)}}]);