{"version":3,"sources":["webpack:///./src/modules/email-editor/src/views/Code.vue?1828","webpack:///./src/modules/email-editor/src/views/Code.vue","webpack:///src/modules/email-editor/src/views/Code.vue","webpack:///./src/modules/email-editor/src/views/Code.vue?1cdc","webpack:///./src/modules/email-editor/src/views/Code.vue?4dfc"],"names":["render","_vm","this","_c","_self","staticClass","on","$event","linkTo","_v","directives","name","rawName","value","showMail","expression","ref","staticStyle","attrs","_l","editor","content","section","key","id","style","sectionStyle","children","row","findOne","cols","col","width","item","findChild","type","tag","getCSS","highlighterCss","editCode","getJS","highlighterJs","getMarkup","highlighter","staticRenderFns","components","emailSpacer","emailButton","emailHeadline","emailParagraph","emailImage","emailVideo","emailLink","emailSocial","emailMenu","emailTimer","emailCustom","PrismEditor","data","rawCode","computed","methods","path","border","basic","backgroundColor","backgroundImage","backgroundPosition","backgroundSize","backgroundRepeat","margin","padding","borderWidth","borderColor","borderStyle","borderRadius","borderTop","borderLeft","borderRight","borderBottom","code","format","textNode","indentAfter","node","created","console","mounted","component"],"mappings":"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","file":"js/chunk-7b99fa07.4b1d4888.js","sourcesContent":["export * from \"-!../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Code.vue?vue&type=style&index=0&id=23e0d300&prod&lang=scss&\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"email-preview-content\"},[_c('a',{staticClass:\"btn back-to-editor\",on:{\"click\":function($event){return _vm.linkTo('/email-editor')}}},[_vm._v(\"Back to Editor\")]),_c('div',{staticClass:\"raw-test\"},[_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.showMail),expression:\"showMail\"}]},[_c('table',{ref:\"table\",staticStyle:{\"margin\":\"0\",\"padding\":\"0\"},attrs:{\"id\":\"target-table\",\"width\":\"100%\",\"height\":\"100%\",\"bgcolor\":\"#f5f5fc\"}},[_c('tr',[_c('td',{staticStyle:{\"text-align\":\"center\"}},[_c('table',{staticStyle:{\"margin\":\"0 auto\",\"padding\":\"0\",\"font-family\":\"Tahoma, Geneva, sans-serif\",\"max-width\":\"1200px\"},attrs:{\"width\":\"100%\",\"border\":\"0\",\"cellpadding\":\"0\",\"cellspacing\":\"0\",\"bgcolor\":\"#ffffff\"}},_vm._l((_vm.editor.content),function(section){return _c('tr',{key:section.id},[_c('td',{style:(_vm.sectionStyle(section.id))},[_c('table',{attrs:{\"width\":\"100%\",\"border\":\"0\",\"cellpadding\":\"0\",\"cellspacing\":\"0\"}},_vm._l((section.children),function(row){return _c('tr',[_c('td',{style:(_vm.sectionStyle(row))},_vm._l((_vm.findOne(row).cols),function(col){return _c('div',{style:('width: '+col.width + '%; padding: 15px; display:inline-block;min-width: 240px;vertical-align:top')},_vm._l((col.children),function(item){return _c('div',[_c('email-'+_vm.findChild(item).type,{tag:\"component\",attrs:{\"details\":_vm.findChild(item)}})],1)}),0)}),0)])}),0)])])}),0)])])])]),_c('h3',{staticClass:\"code-title\"},[_vm._v(\"Custom CSS\")]),_c('prism-editor',{staticClass:\"my-editor\",attrs:{\"value\":_vm.getCSS,\"highlight\":_vm.highlighterCss,\"line-numbers\":\"\",\"tabSize\":4},on:{\"input\":function($event){return _vm.editCode($event, 'css')}}}),_c('h3',{staticClass:\"code-title\"},[_vm._v(\"Custom JS\")]),_c('prism-editor',{staticClass:\"my-editor\",attrs:{\"value\":_vm.getJS,\"highlight\":_vm.highlighterJs,\"line-numbers\":\"\",\"tabSize\":4},on:{\"input\":function($event){return _vm.editCode($event, 'js')}}}),_c('h3',{staticClass:\"code-title\"},[_vm._v(\"Email source code\")]),_c('prism-editor',{staticClass:\"my-editor\",attrs:{\"value\":_vm.getMarkup,\"highlight\":_vm.highlighter,\"line-numbers\":\"\",\"tabSize\":4},on:{\"input\":function($event){return _vm.editCode($event, 'markup')}}})],1)])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n\t<div class=\"email-preview-content\">\n\t\t<a @click=\"linkTo('/email-editor')\" class=\"btn back-to-editor\">Back to Editor</a>\n\t\t<div class=\"raw-test\">\n            <div v-show=\"showMail\">\n                <table id=\"target-table\" ref=\"table\" style=\"margin:0; padding:0;\" width=\"100%\" height=\"100%\" bgcolor=\"#f5f5fc\">\n                    <tr>\n                        <td style=\"text-align: center;\">\n                            <table width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"\n                                style=\"margin: 0 auto; padding: 0; font-family: Tahoma, Geneva, sans-serif; max-width: 1200px;\"\n                                bgcolor=\"#ffffff\">\n\n                                <!-- SECTIONS -->\n                                <tr v-for='section in editor.content' :key='section.id'>\n                                    <td :style=\"sectionStyle(section.id)\">\n                                        <!-- ROWS -->\n                                        <table width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">\n                                            <tr v-for=\"row in section.children\">\n                                                <td :style=\"sectionStyle(row)\">\n                                                    <!-- COLS -->\n                                                    <div v-for=\"col in findOne(row).cols\" :style=\"'width: '+col.width + '%; padding: 15px; display:inline-block;min-width: 240px;vertical-align:top'\">\n                                                        <!-- CHILDREN -->\n                                                        <div v-for=\"item in col.children\">\n                                                            <component :is=\"'email-'+findChild(item).type\" :details=\"findChild(item)\"></component>\n                                                        </div>\n                                                        <!-- CHILDREN END -->\n                                                    </div>\n                                                    <!-- COLS END -->\n                                                </td>\n                                            </tr>\n                                        </table>\n                                        <!-- ROWS END-->\n                                    </td>\n                                </tr>\n                                <!-- SECTIONS END -->\n\n                            </table>\n                        </td>\n                    </tr>\n                </table>\n            </div>\n            <h3 class=\"code-title\">Custom CSS</h3>  \n            <prism-editor class=\"my-editor\" :value=\"getCSS\" :highlight=\"highlighterCss\" line-numbers @input=\"editCode($event, 'css')\" :tabSize='4'></prism-editor>\n            <h3 class=\"code-title\">Custom JS</h3>\n            <prism-editor class=\"my-editor\" :value=\"getJS\" :highlight=\"highlighterJs\" line-numbers @input=\"editCode($event, 'js')\" :tabSize='4'></prism-editor>\n            <h3 class=\"code-title\">Email source code</h3>\n            <prism-editor class=\"my-editor\" :value=\"getMarkup\" :highlight=\"highlighter\" line-numbers @input=\"editCode($event, 'markup')\" :tabSize='4'></prism-editor>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport {mapGetters} from 'vuex';\nimport spacer from \"../components/generator/Spacer.vue\";\nimport button from \"../components/generator/Button.vue\";\nimport headline from \"../components/generator/Headline.vue\";\nimport paragraph from \"../components/generator/Paragraph.vue\";\nimport image from \"../components/generator/Image.vue\";\nimport link from \"../components/generator/Link.vue\";\nimport social from \"../components/generator/Social.vue\";\nimport menu from \"../components/generator/Menu.vue\";\nimport timer from \"../components/generator/Timer.vue\";\nimport custom from \"../components/generator/Custom.vue\";\n\nimport { PrismEditor } from 'vue-prism-editor';\nimport 'vue-prism-editor/dist/prismeditor.min.css'; // import the styles somewhere\n\n// import highlighting library (you can use any library you want just return html string)\nimport { highlight, languages } from 'prismjs/components/prism-core';\nimport 'prismjs/components/prism-clike';\nimport 'prismjs/components/prism-markup';\nimport 'prismjs/themes/prism-tomorrow.css'; // import syntax highlighting styles\nimport 'prismjs/components/prism-javascript';\nimport 'prismjs/components/prism-css';\n\nexport default {\n\tname: 'PreviewEmail',\n    components: {\n        emailSpacer: spacer,\n        emailButton: button,\n        emailHeadline: headline,\n        emailParagraph: paragraph,\n        emailImage: image,\n        emailVideo: video,\n        emailLink: link,\n        emailSocial: social,\n        emailMenu: menu,\n        emailTimer: timer,\n        emailCustom: custom,\n        PrismEditor,\n\t},\n\tdata() {\n\t\treturn {\n            rawCode: 'raw',\n            showMail: false,\n\t\t}\n\t},\n    computed: {\n\t\t...mapGetters(['email_findOne', 'email_findChild']),\n        editor() {\n            return this.$store.state.email.editor\n        },\n        getCSS() {\n            return this.$store.state.email.customCode.css\n        },\n        getJS() {\n            return this.$store.state.email.customCode.js\n        },\n        getMarkup() {\n            return this.$store.state.email.customCode.markup\n        },\n    },\n\tmethods: {\n        linkTo(link){\n            this.$router.replace({path: link})\n        },\n\t\tsectionStyle(sectionId) {\n\t\t\tlet findSection = this.email_findOne(sectionId);\n\n\t\t\tlet basic = findSection.attributes.basic;\n\n\t\t\tvar border = basic.border;\n\t\t\tvar borderTop = border && !border.sides.top ? 'none' : false;\n\t\t\tvar borderLeft = border && !border.sides.left ? 'none' : false;\n\t\t\tvar borderRight = border && !border.sides.right ? 'none' : false;\n\t\t\tvar borderBottom = border && !border.sides.bottom ? 'none' : false;\n\n\t\t\tvar borderRadius = border ? \n\t\t\t\tborder.radius.leftTop+'px '+\n\t\t\t\tborder.radius.topRight+'px '+\n\t\t\t\tborder.radius.bottomRight+'px '+\n\t\t\t\tborder.radius.bottomLeft+'px' : false;\n\n\t\t\tvar margin = basic.margin ? \n\t\t\t\tbasic.margin.top+'px '+\n\t\t\t\tbasic.margin.right+'px '+\n\t\t\t\tbasic.margin.bottom+'px '+\n\t\t\t\tbasic.margin.left+'px' : false;\n\n\t\t\tvar padding = basic.padding ? \n\t\t\t\tbasic.padding.top+'px '+\n\t\t\t\tbasic.padding.right+'px '+\n\t\t\t\tbasic.padding.bottom+'px '+\n\t\t\t\tbasic.padding.left+'px' : false;\n\n\t\t\tvar obj = {\n\t\t\t\t// borderColor: this.label.bg,\n\t\t\t\tbackgroundColor: basic.backgroundColor || '#ffffff',\n\t\t\t\tbackgroundImage: basic.backgroundImage ? `url(${basic.backgroundImage})` : 'none',\n\t\t\t\tbackgroundPosition: 'center',\n\t\t\t\tbackgroundSize: 'cover',\n\t\t\t\tbackgroundRepeat: 'no-repeat',\n\t\t\t\tmargin,\n\t\t\t\tpadding,\n\t\t\t\tborderWidth: border ? basic.border.width + 'px' : 'inherit',\n\t\t\t\tborderColor:  border ? basic.border.color : 'inherit',\n\t\t\t\tborderStyle:  border ? basic.border.style : 'inherit',\n\t\t\t\tborderRadius,\n\t\t\t\tborderTop,\n\t\t\t\tborderLeft,\n\t\t\t\tborderRight,\n\t\t\t\tborderBottom,\n\t\t\t};\n\t\t\treturn obj\n        },\n        highlighter(code) {\n            return highlight(code, languages.markup);\n        },\n        highlighterCss(code) {\n            return highlight(code, languages.css);\n        },\n        highlighterJs(code) {\n            return highlight(code, languages.js);\n        },\n        editCode(ev, type) {\n            this.$store.dispatch('EMAIL_SET_CUSTOM_CODE', {type, code: ev})\n        },\n        format(node, level) {\n            var indentBefore = new Array(level++ + 1).join('  '),\n                indentAfter  = new Array(level - 1).join('  '),\n                textNode;\n            \n            for (var i = 0; i < node.children.length; i++) {\n                \n                textNode = document.createTextNode('\\n' + indentBefore);\n                node.insertBefore(textNode, node.children[i]);\n                \n                this.format(node.children[i], level);\n                \n                if (node.lastElementChild == node.children[i]) {\n                    textNode = document.createTextNode('\\n' + indentAfter);\n                    node.appendChild(textNode);\n                }\n            }\n            \n            return node;\n        },\n    },    \n    created() {\n\t\tconsole.log('Preview: ', this.editor, languages);\n\t},\n\tmounted() {\n        var table = document.getElementById('target-table');\n\t\tvar string = table.outerHTML;\n        this.rawCode = '<!-- HTML -->\\n'+ this.format(table, 0).outerHTML + '\\n    ';\n        this.editCode(this.rawCode, 'markup');\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n.app-email-editor {\n    .raw-test {\n        height: 100vh;\n        overflow: auto;\n    }\n\t.back-to-editor {\n\t\tposition: fixed;\n\t\ttop: 25px;\n\t\tleft: 25px;\n\t}\n\t.raw-code {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\tpadding: 50px;\n\t\tbackground: #000;\n\t\tcolor: #fff;\n    }\n    \n    /* required class */\n    .my-editor {\n        font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;\n        font-size: 14px;\n        line-height: 1.5;\n        padding: 5px;\n        height: 25%;\n        border-top: 1px solid #c5c7d2;\n        border-bottom: 1px solid #c5c7d2;\n        background-color: #241f2d;\n    }\n\n    /* optional class for removing the outline */\n    .prism-editor__textarea:focus {\n        outline: none;\n    }\n\n    .code-title {\n        margin: 5px 25px;\n    }\n}\n</style>","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Code.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Code.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Code.vue?vue&type=template&id=23e0d300&\"\nimport script from \"./Code.vue?vue&type=script&lang=js&\"\nexport * from \"./Code.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Code.vue?vue&type=style&index=0&id=23e0d300&prod&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}