{"version":3,"sources":["webpack:///./src/forms/creative/BannerEditor.preview.vue","webpack:///src/forms/creative/BannerEditor.preview.vue","webpack:///./src/forms/creative/BannerEditor.preview.vue?1148","webpack:///./src/forms/creative/BannerEditor.preview.vue?d381","webpack:///./src/forms/creative/BannerEditor.preview.vue?61ef"],"names":["render","_vm","this","_c","_self","values","key","iframeUpdate","staticClass","ref","tag","style","iframeStyle","_e","staticRenderFns","name","data","props","type","default","computed","ratio","ratio_width","ratio_height","image_formats","height","width","macrosInHtml","watch","handler","deep","mounted","methods","fillData","compileHtml","content","compileStyle","compileScript","generateIframe","file","URL","iframe","handleImage","component"],"mappings":"yHAAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAQF,EAAII,OAAQF,EAAG,MAAM,CAACG,IAAIL,EAAIM,aAAaC,YAAY,wCAAwC,CAACL,EAAG,SAAS,CAACM,IAAI,SAASC,IAAI,YAAYF,YAAY,SAASG,MAAOV,EAAIW,eAAgB,GAAGX,EAAIY,MAEjQC,EAAkB,GCoBP,G,UAAA,CACfC,2BACAC,WACAT,iBAEAU,OACAZ,QACAa,YACAC,kBAEAH,MACAE,YACAC,mBAIAC,UACAC,QACA,uKAEAT,cACA,iGACA,yFACA,mDAEAU,cACA,kCAEAC,eACA,mCAEAC,gBACA,OACA,CAAAT,cAAAU,kCAAAC,mCAGAC,eACA,SAIA,GAHA,wDACA,0DACA,4DACA,GACA,gCACA,sBAEA,WAwCAC,OACAvB,QACAwB,WACA,uBAEAC,UAIAC,UACA,uBAGAC,SAEAC,YACA,8CACA,oDAGAC,cACA,SASA,OARA,2BACAC,+DACA,4CACA,sCAEA,IAGA,GAEAC,eACA,SASA,OARA,4BACAD,gEACA,4CACA,uBAEA,IAGA,GAEAE,gBACA,SASA,OARA,6BACAF,iEACA,4CACA,uBAEA,IAGA,GAGAG,iBACA,iGACA,yFAEA,oBACA,qBAEA,GADA,qBACA,6IAEA,SAEAC,EADA,oBACAA,EAEAA,0CAKA,IACAA,wDAIA,oBAAArB,mBACA,+BACA,WACAsB,2BACAC,YAEAA,SAKAC,kBACA,kBACA,cACA,wCCzM6W,I,wBCQzWC,EAAY,eACd,EACA3C,EACAc,GACA,EACA,KACA,KACA,MAIa,aAAA6B,E,sECnBf","file":"js/chunk-5cba8bb4.4725a06b.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return (_vm.values)?_c('div',{key:_vm.iframeUpdate,staticClass:\"banner-editor-preview justify-center\"},[_c('iframe',{ref:\"iframe\",tag:\"component\",staticClass:\"iframe\",style:(_vm.iframeStyle)})],1):_vm._e()\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"banner-editor-preview justify-center\" :key=\"iframeUpdate\" v-if=\"values\">\n    <component :is=\"'iframe'\" ref=\"iframe\" class=\"iframe\" :style=\"iframeStyle\"></component>\n  </div>\n</template>\n\n\n<style>\n  .banner-editor-preview iframe {\n    border: 0;\n    height: 100%;\n    width: 100%;\n  }\n  .banner-editor-preview {\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n  }\n</style>\n\n<script>\n\nexport default {\n  name:'BannerEditorPreview',\n  data: () => ({\n    iframeUpdate: 0,\n  }),\n  props: {\n    values: {\n      type: Object,\n      default: () => ({})\n    },\n    data: {\n      type: Object,\n      default: () => ({})\n    }\n  },\n\n  computed: {\n    ratio () {\n      return this.values.content.height<this.values.content.width ? this.values.content.height/this.values.content.width : this.values.content.width/this.values.content.height\n    },\n    iframeStyle () {\n      const height = this.values.content && this.values.content.height ? this.values.content.height+'px;' : '100%;'\n      const width  = this.values.content && this.values.content.width  ? this.values.content.width+'px;'  : '100%;'\n      return 'width:'+width+';' + 'height:'+height+'; max-width:100%;'\n    },\n    ratio_width () {\n      return (this.values.content.width)\n    },\n    ratio_height () {\n      return (this.values.content.height)\n    },\n    image_formats () {\n      return [\n        {name: 'banner', height: this.values.content.height, width: this.values.content.width },\n      ]\n    },\n    macrosInHtml () {\n      let content = ''\n      if (this.values.content.html) content += this.values.content.html\n      if (this.values.content.style) content += this.values.content.style\n      if (this.values.content.script) content += this.values.content.script\n      if (content) {\n        const regex = /(\\$[a-z0-9]{1,30})/gmi\n        return ((content).match(regex)) || []\n      }\n      return []\n    },\n    // compiledHtml () {\n    //   let content = ''\n    //   if (this.values.content.html) {\n    //     content = this.values.content.html.replace(/(\\$[a-z0-9]{1,30})/gmi, (a) => {\n    //       if (typeof this.values.content[a] !== 'undefined') {\n    //         return this.values.content[a]\n    //       }\n    //       return a//'<span class=\"yellow\" title=\"'+ this.values.$i18n.t('BANNER_EDITOR.NO_VALUE')+'\">' + a + '</span>'\n    //     })\n    //   }\n    //   return content\n    // },\n    // compiledStyle () {\n    //   let content = ''\n    //   if (this.values.content.style) {\n    //     content = this.values.content.style.replace(/(\\$[a-z0-9]{1,30})/gmi, (a) => {\n    //       if (typeof this.values.content[a] !== 'undefined') {\n    //         return this.values.content[a]\n    //       }\n    //       return a\n    //     })\n    //   }\n    //   return content\n    // },\n    // compiledScript () {\n    //   let content = ''\n    //   if (this.values.content.script) {\n    //     content = this.values.content.script.replace(/(\\$[a-z0-9]{1,30})/gmi, (a) => {\n    //       if (typeof this.values.content[a] !== 'undefined') {\n    //         return this.values.content[a]\n    //       }\n    //       return a\n    //     })\n    //   }\n    //   return content\n    // }\n  },\n\n  watch: {\n    values: {\n      handler (n) {\n        this.generateIframe()\n      },\n      deep: true,\n    }\n  },\n\n  mounted () {\n    this.generateIframe()\n  },\n\n  methods: {\n\n    fillData (v) {\n      return v.replace(/(\\$[a-z0-9_.]{1,30})/gmi, (a) => {\n        return this.$nestedData(a.slice(1,a.length), this.data, v)\n      })\n    },\n    compileHtml () {\n      let content = ''\n      if (this.values.content.html) {\n        content = this.values.content.html.replace(/(\\$[a-z0-9_]{1,30})/gmi, (a) => {\n          if (typeof this.values.content[a] !== 'undefined') {\n            return this.fillData(this.values.content[a])\n          }\n          return a//'<span class=\"yellow\" title=\"'+ this.values.$i18n.t('BANNER_EDITOR.NO_VALUE')+'\">' + a + '</span>'\n        })\n      }\n      return content\n    },\n    compileStyle () {\n      let content = ''\n      if (this.values.content.style) {\n        content = this.values.content.style.replace(/(\\$[a-z0-9_]{1,30})/gmi, (a) => {\n          if (typeof this.values.content[a] !== 'undefined') {\n            return this.values.content[a]\n          }\n          return a\n        })\n      }\n      return content\n    },\n    compileScript () {\n      let content = ''\n      if (this.values.content.script) {\n        content = this.values.content.script.replace(/(\\$[a-z0-9_]{1,30})/gmi, (a) => {\n          if (typeof this.values.content[a] !== 'undefined') {\n            return this.values.content[a]\n          }\n          return a\n        })\n      }\n      return content\n    },\n\n    generateIframe () {\n      const height = this.values.content && this.values.content.height ? this.values.content.height+'px;' : '100%;'\n      const width  = this.values.content && this.values.content.width  ? this.values.content.width+'px;'  : '100%;'\n\n      const iframe = this.$refs.iframe\n      const html = this.compileHtml()\n      const script = this.compileScript()\n      const style = 'html, body {margin:0; padding:0; height:'+height+'; width:'+width+'; min-height:'+height+'; min-width:'+width+'; overflow:hidden; }\\n\\n' + this.compileStyle()\n\n      let file = ''\n      if (html.includes('<html')) {\n        file = html\n      } else {\n        file = '<html>'\n        + '<head></head>'\n        + '<body></body>'\n        + '</html>'\n      }\n      if (style) {\n        file = file.replace('</head>', '<style>'+style+'</style>\\n</head>')\n      }\n      // if (script) file = file.replace('</body>', '<script>'+script+'</scr'+'ipt>\\n</body>')\n\n      let blob = new Blob([file], { type: 'text/html' })\n      const url = URL.createObjectURL(blob)\n      if (iframe && iframe.src) {\n        URL.revokeObjectURL(iframe.src)\n        iframe.src = null\n      }\n      iframe.src = url\n      // this.iframeUpdate++\n    },\n\n\n    handleImage (images = {}) {\n      this.images = images || {}\n      if (images && images.banner) {\n        this.values.content.image = images.banner\n      }\n    },\n  }\n\n\n}\n\n</script>\n","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!./BannerEditor.preview.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!./BannerEditor.preview.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./BannerEditor.preview.vue?vue&type=template&id=30fddbf1&\"\nimport script from \"./BannerEditor.preview.vue?vue&type=script&lang=js&\"\nexport * from \"./BannerEditor.preview.vue?vue&type=script&lang=js&\"\nimport style0 from \"./BannerEditor.preview.vue?vue&type=style&index=0&id=30fddbf1&prod&lang=css&\"\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","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./BannerEditor.preview.vue?vue&type=style&index=0&id=30fddbf1&prod&lang=css&\""],"sourceRoot":""}