{"version":3,"sources":["webpack:///./src/components/InputImage.vue","webpack:///src/components/InputImage.vue","webpack:///./src/components/InputImage.vue?b6cf","webpack:///./src/components/InputImage.vue?d7e1","webpack:///./src/components/InputImage.vue?579b"],"names":["render","_vm","this","_c","_self","staticClass","on","$event","$refs","img_input","click","ref","staticStyle","attrs","handleFiles","$slots","default","_t","loading","_v","_s","$t","isImages","stopPropagation","removeImages","apply","arguments","_e","key","keyImg","onlyTitle","Object","keys","images","length","$getImgSrc","staticRenderFns","_createFileReader","fr","reject","resolve","name","result","_fileLimit","_fileRegex","_readFiles","files","multi","promises","_createImage","image","_getImgSize","width","height","size","_createCanvases","formats","canvas","context","dx","dy","resize","canvases","components","Loading","data","originalImage","originalSize","innerFormats","props","value","type","required","keepOriginal","keepOriginalName","randomName","timestampName","debug","watch","computed","mounted","methods","p","imgName","component","VBtn","VIcon"],"mappings":"yHAAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACE,YAAY,cAAcC,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAON,EAAIO,MAAMC,UAAUC,WAAW,CAACP,EAAG,QAAQ,CAACQ,IAAI,YAAYC,YAAY,CAAC,QAAU,QAAQC,MAAM,CAAC,KAAO,OAAO,OAAS,WAAWP,GAAG,CAAC,OAASL,EAAIa,eAAgBZ,KAAKa,OAAOC,QAAS,CAACf,EAAIgB,GAAG,YAAY,CAACd,EAAG,WAAW,CAACE,YAAY,wDAAwD,CAACF,EAAG,UAAU,CAACU,MAAM,CAAC,MAAQZ,EAAIiB,WAAWf,EAAG,SAAS,CAACE,YAAY,2BAA2B,CAACJ,EAAIkB,GAAGlB,EAAImB,GAAGnB,EAAIoB,GAAG,mBAAoBpB,EAAIqB,SAAUnB,EAAG,MAAM,CAACE,YAAY,sBAAsB,CAACF,EAAG,QAAQ,CAACU,MAAM,CAAC,IAAM,GAAG,UAAU,GAAG,UAAY,GAAG,MAAQ,SAASP,GAAG,CAAC,MAAQ,SAASC,GAAiC,OAAzBA,EAAOgB,kBAAyBtB,EAAIuB,aAAaC,MAAM,KAAMC,cAAc,CAACvB,EAAG,SAAS,CAACF,EAAIkB,GAAG,gBAAgB,IAAI,GAAGlB,EAAI0B,KAAKxB,EAAG,MAAM,CAACyB,IAAI3B,EAAI4B,QAAQ,CAAE5B,EAAI6B,UAAW3B,EAAG,MAAM,CAACE,YAAY,kCAAkC,CAACF,EAAG,QAAQ,CAACF,EAAIkB,GAAGlB,EAAImB,GAAIW,OAAOC,KAAK/B,EAAIgC,QAAU,IAAIC,OAAS,EAAI,UAAY,0BAA2B/B,EAAG,MAAM,CAACE,YAAY,qCAAqC,CAACF,EAAG,MAAM,CAACyB,IAAI3B,EAAI4B,OAAOxB,YAAY,UAAUQ,MAAM,CAAC,IAAMZ,EAAIkC,WAAWlC,EAAIgC,OAAQ,EAAG,wBAAwB,MAAQ,eAAe,KAAK,IAEhvCG,EAAkB,G,wBCgJtB,MAAMC,EAAoB,GAA1B,oBACA,uBACAC,mBACA,aACAA,gCACAA,iCACAC,oDAEA,OACAD,gCACAA,iCACAE,GAAAC,YAAAC,mBAEAJ,6BACAA,gCAGMK,EAAa,SACbC,EAAa,mDACbC,EAAa,CAACC,EAAOC,GAAQ,KACnC,WACA,oCACA,aACA,0BAMA,+DALA,eAIA,6DAHA,oBAEA,kEADAC,aAKA,uBAGMC,EAAe,GAArB,oBACA,kBACAC,kBACAA,kBACAA,UAGMC,EAAc,IACpB,SACAC,6CACAC,kDAGA,OADAC,yBACA,GAGMC,EAAkB,CAACL,EAAOM,EAAU,MAC1C,aACA,KACA,gCACA,aACA,mCACAC,2DACAA,8DACAA,WACAA,qCACA,sDACAA,+BACA,2BACAC,kCACAA,wCACA,SAAAC,KAAAC,MACA,OACA,mBACAC,sCACAA,yBACAA,2BAEAA,kCACAA,yBACAA,4BAGA,mBACAA,kCACAA,yBACAA,6BAEAA,sCACAA,yBACAA,0BAIAH,YACAR,EACAW,KACAA,KACAA,QACAA,UAEAC,UAEA,UAWe,OACfrB,kBACAsB,YACAC,sBAEAC,WACAxB,YACAyB,qBACAC,oBACAlC,cACAmC,gBACAvC,SACAX,aAEAmD,OACAC,OACAC,qBACAC,aAEAhB,SACAe,oBACAC,aAEAC,cACAF,aACAC,YACAxD,YAEA0D,kBACAH,aACAC,YACAxD,YAEA2D,YACAJ,aACAC,YACAxD,YAEA4D,eACAL,aACAC,YACAxD,YAEA6D,OACAN,aACAC,YACAxD,YAEAc,WACAyC,aACAC,YACAxD,aAIA8D,OACAR,SACA,iDACA,gBAIAS,UACAzD,WACA,0DAIA0D,UACA,yCACA,kDACA,2BACAvC,gBACAW,aACAC,gBAGA,wCACA,eAGA4B,SAEAzD,eACA,iBACA,8BACA,cACA,gCACA,kCAGAV,eAEA+B,2BACAI,wBACA,+BACA,+CACAa,kBACA,eACA,oCACAoB,iEACA,mCACA,mCAGA,8BACA,oBACA,sBACAC,OACA,kBACAA,oFAEA,qBACAA,mBAEAA,wCAEA,wEACA,cACA,gCACA,0CCtXoV,I,qECQhVC,EAAY,eACd,EACApF,EACAoC,GACA,EACA,KACA,KACA,MAIa,aAAAgD,EAAiB,QAMhC,IAAkBA,EAAW,CAACC,OAAA,KAAKC,QAAA,Q,oCCzBnC,W","file":"js/chunk-3c6055f2.0a3ea38e.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"input-image\",on:{\"click\":function($event){return _vm.$refs.img_input.click()}}},[_c('input',{ref:\"img_input\",staticStyle:{\"display\":\"none\"},attrs:{\"type\":\"file\",\"accept\":\"image/*\"},on:{\"change\":_vm.handleFiles}}),(this.$slots.default)?[_vm._t(\"default\")]:[_c('fieldset',{staticClass:\"input-image rounded d-flex flex-column align-stretch\"},[_c('Loading',{attrs:{\"value\":_vm.loading}}),_c('legend',{staticClass:\"v-label v-label--active\"},[_vm._v(_vm._s(_vm.$t('INPUT.IMAGE')))]),(_vm.isImages)?_c('div',{staticClass:\"input-image-remove\"},[_c('v-btn',{attrs:{\"fab\":\"\",\"x-small\":\"\",\"depressed\":\"\",\"color\":\"white\"},on:{\"click\":function($event){$event.stopPropagation();return _vm.removeImages.apply(null, arguments)}}},[_c('v-icon',[_vm._v(\"mdi-close\")])],1)],1):_vm._e(),_c('div',{key:_vm.keyImg},[(_vm.onlyTitle)?_c('div',{staticClass:\"text-ellipsis text-nowrap ma-2\"},[_c('small',[_vm._v(_vm._s((Object.keys(_vm.images || {}).length > 0 ? '1 image' : 'Click to download')))])]):_c('div',{staticClass:\"pr-2 pl-2 input-image-upload-area\"},[_c('img',{key:_vm.keyImg,staticClass:\"rounded\",attrs:{\"src\":_vm.$getImgSrc(_vm.images, 0, '/img/empty-image.png'),\"width\":\"100%\"}})])])],1)]],2)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"input-image\" @click=\"$refs.img_input.click()\">\n    <input\n      ref=\"img_input\"\n      type=\"file\"\n      style=\"display: none\"\n      accept=\"image/*\"\n      @change=\"handleFiles\"\n    >\n    <template v-if=\"this.$slots.default\">\n      <slot/>\n    </template>\n    <template v-else>\n      <fieldset class=\"input-image rounded d-flex flex-column align-stretch\">\n        <Loading :value=\"loading\" />\n        <legend class=\"v-label v-label--active\">{{ $t('INPUT.IMAGE') }}</legend>\n        <div class=\"input-image-remove\" v-if=\"isImages\">\n          <v-btn\n            fab\n            x-small\n            depressed\n            color=\"white\"\n            @click.stop=\"removeImages\"\n          >\n            <v-icon>mdi-close</v-icon>\n          </v-btn>\n        </div>\n\n        <div :key=\"keyImg\">\n          <div v-if=\"onlyTitle\" class=\"text-ellipsis text-nowrap ma-2\">\n            <small>{{ (Object.keys(images || {}).length > 0 ? '1 image' : 'Click to download') }}</small>\n          </div>\n          <div v-else class=\"pr-2 pl-2 input-image-upload-area\" >\n            <img\n              :key=\"keyImg\"\n              :src=\"$getImgSrc(images, 0, '/img/empty-image.png')\"\n              width=\"100%\"\n              class=\"rounded\"\n            >\n          </div>\n        </div>\n      </fieldset>\n    </template>\n  </div>\n\n  <!--\n  <v-row class=\"ma-0 height-100\">\n    <v-col cols=\"3\" class=\"pa-0 height-100 d-flex\">\n      <div class=\"pa-2 input-image-thumbnail d-flex align-center\">\n      </div>\n      <v-divider vertical />\n    </v-col>\n    <v-col cols=\"9\" class=\"align-stretch pa-0\">\n      <input\n      ref=\"img_input\"\n      type=\"file\"\n      style=\"display: none\"\n      accept=\"image/*\"\n      @change=\"handleFiles\"\n      >\n      <div class=\"d-flex pr-2 pl-4 pa-2\">\n        <div class=\"grey--text pt-1\">\n          <strong>{{$t('UPLOAD.UPLOAD_FILE_LIST')}}</strong>\n          <small class=\"ml-2\">{{$tc('UPLOAD.UPLOAD_FORMAT', innerFormats.length)}}</small>\n        </div>\n        <v-spacer />\n        <v-btn rounded small class=\"custom\" color=\"grey lighten-2\" @click=\"$refs.img_input.click()\">\n          <v-icon class=\"mr-2\" size=\"20\">mdi-upload</v-icon>{{$t('UPLOAD.UPLOAD_FILE')}}\n        </v-btn>\n      </div>\n      <v-divider />\n      <div class=\"files-list mt-2\" :key=\"keyImg\">\n        <div v-for=\"(format,i) in innerFormats\" :key=\"'form'+i\" class=\"pl-4\">\n          <v-icon size=\"18\" class=\"mr-2\">mdi-file-image-outline</v-icon>\n          <small>\n            <strong class=\"text-capitalize\">{{format.name}}:</strong>\n            <span> {{ images[format.name] ? images[format.name] : $t('FILE_UPLOAD_NO_IMAGE') }}</span>\n          </small>\n        </div>\n      </div>\n    </v-col>\n    <v-col cols=\"12\" v-if=\"debug\" class=\"pa-0 grey lighten-3\">\n      <v-divider />\n      <div ref=\"canvases\" class=\"input-image-canvases pa-4\"></div>\n    </v-col>\n  </v-row>\n  -->\n\n</template>\n\n<style lang=\"scss\">\n\nfieldset.input-image:hover {\n  border: solid 1px rgba(23, 22, 37, 0.675);\n  color: solid 1px rgba(23, 22, 37, 0.675);\n}\n\nfieldset.input-image {\n  height: 100%;\n  min-height: 36px;\n  position: relative;\n  margin-top: -22px;\n  border: solid 1px rgba(0, 0, 0, 0.38);\n  color: solid 1px rgba(0, 0, 0, 0.38);\n  transition: all 0.3s;\n}\n\n.select-image-input {\n  fieldset.input-image {\n    min-height: 89px;\n  }\n}\n\n\nfieldset.input-image legend {\n  transform: scale(0.75);\n  margin-left: 5px;\n  font-size: 16px;\n  padding: 2px;\n}\n\n.input-image-canvases canvas {\n  max-width: 100%;\n}\n\n.input-image-upload-area {\n  cursor: pointer;\n}\n\n.select-image-input {\n  .input-image-upload-area {\n    display: flex;\n    height: 68px;\n    align-items: center;\n  }\n}\n\n.input-image-remove {\n  position: absolute;\n  top:-8px;\n  right: 0;\n}\n\n</style>\n\n<script>\nconst _createFileReader = (file) => new Promise((resolve, reject) => {\n  const fr = new FileReader()\n  fr.readAsDataURL(file)\n  const onerror = () => {\n    fr.removeEventListener('load', onload)\n    fr.removeEventListener('error', onerror)\n    reject(new Error(`File can not be loaded: ${  file.name  }.`))\n  }\n  const onload = () => {\n    fr.removeEventListener('load', onload)\n    fr.removeEventListener('error', onerror)\n    resolve({name: file.name, result: fr.result})\n  }\n  fr.addEventListener('load', onload)\n  fr.addEventListener('error', onerror)\n})\n\nconst _fileLimit = 20 * 1024 * 1024 // 5mo\nconst _fileRegex = /image\\/(jpg|jpeg|png|svg|bmp|vnd.microsoft.icon)/\nconst _readFiles = (files, multi = false) => {\n  const promises = []\n  for (let i = 0, len = multi ? files.length : 1; i < len; i++) {\n    const file = files[i]\n    if (typeof file !== 'undefined') {\n      if (file.size < _fileLimit) {\n        if (file.type.match(_fileRegex)) {\n          promises.push(_createFileReader(file))\n        } else return Promise.reject(new Error(`Invalid file type: ${  file.name  }.`))\n      } else return Promise.reject(new Error(`File too big: ${  file.name  }.`))\n    } else return Promise.reject(new Error('Invalid file as undefined.'))\n  }\n  return Promise.all(promises)\n}\n\nconst _createImage = (src) => new Promise((resolve, reject) => {\n  const image = new Image()\n  image.onload = () => resolve(image)\n  image.onerror = (e) => reject(e)\n  image.src = src\n})\n\nconst _getImgSize = (image) => {\n  const size = {\n    width: image.naturalWidth || image.clientWidth || image.width,\n    height: image.naturalHeight || image.clientHeight || image.height,\n  }\n  size.ratio = size.width / size.height\n  return size\n}\n\nconst _createCanvases = (image, formats = []) => {\n  const size = _getImgSize(image)\n  const canvases = []\n  for (let i = 0, len = formats.length; i < len; i++) {\n    const format = formats[i]\n    const canvas = document.createElement('canvas')\n    canvas.width  = format.width  === 'auto' ? size.width  : (format.width  || (format.height * size.ratio))\n    canvas.height = format.height === 'auto' ? size.height : (format.height || (format.width  / size.ratio))\n    canvas.format = format\n    canvas.format.encoding = format.encoding || 'jpeg'\n    if (canvas.format.encoding === 'jpg') canvas.format.encoding = 'jpeg'\n    canvas.format.quality = format.quality || 0.6\n    const context = canvas.getContext('2d')\n    context.clearRect(0, 0, canvas.width, canvas.height)\n    context.globalCompositeOperation = 'source-out'\n    const resize = {dx:0, dy:0}\n    if (format.crop) {\n      if (canvas.height <= canvas.width) {\n        resize.height = size.height * (canvas.height / size.height)\n        resize.width = resize.height * size.ratio\n        resize.dx = (canvas.width - resize.width) / 2\n      } else {\n        resize.width = size.width * (canvas.width / size.width)\n        resize.height = resize.width / size.ratio\n        resize.dy = (canvas.height - resize.height) / 2\n      }\n    } else {\n      if (canvas.height <= canvas.width) {\n        resize.width = size.width * (canvas.width / size.width)\n        resize.height = resize.width / size.ratio\n        resize.dy = (canvas.height - resize.height) / 2\n      } else {\n        resize.height = size.height * (canvas.height / size.height)\n        resize.width = resize.height * size.ratio\n        resize.dx = (canvas.width - resize.width) / 2\n      }\n    }\n\n    context.drawImage(\n      image,\n      resize.dx,\n      resize.dy,\n      resize.width,\n      resize.height\n    )\n    canvases.push(canvas)\n  }\n  return canvases\n}\n\nimport Loading from '@/components/Loading'\n\nconst _uploadSimulation = () => new Promise((resolve) => {\n  setTimeout(() => {\n    resolve()\n  },2000)\n})\n\nexport default {\n  name: 'InputImage',\n  components: {\n    Loading\n  },\n  data: () => ({\n    name: undefined,\n    originalImage: undefined,\n    originalSize: undefined,\n    images: undefined,\n    innerFormats: [],\n    keyImg: 0,\n    loading: false,\n  }),\n  props: {\n    value: {\n      type: [String, Object],\n      required: false\n    },\n    formats: {\n      type: [Array, Object],\n      required: false,\n    },\n    keepOriginal: {\n      type: Boolean,\n      required: false,\n      default: false\n    },\n    keepOriginalName: {\n      type: Boolean,\n      required: false,\n      default: false\n    },\n    randomName: {\n      type: Boolean,\n      required: false,\n      default: false\n    },\n    timestampName: {\n      type: Boolean,\n      required: false,\n      default: false\n    },\n    debug: {\n      type: Boolean,\n      required: false,\n      default: false\n    },\n    onlyTitle: {\n      type: Boolean,\n      required: false,\n      default: false\n    },\n  },\n\n  watch: {\n    value (n) {\n      this.images = Object.assign(this.images || {}, n || {})\n      this.keyImg++\n    },\n  },\n\n  computed: {\n    isImages() {\n      return !(!this.value || Object.keys(this.value).length == 0)\n    }\n  },\n\n  mounted () {\n    this.innerFormats = [...(this.formats || [])]\n    if (this.innerFormats.length === 0 || this.keepOriginal) {\n      this.innerFormats.unshift({\n        name: 'original',\n        width: 'auto',\n        height: 'auto',\n      })\n    }\n    this.images = this.$clone(this.value || {})\n    this.keyImg++\n  },\n\n  methods: {\n\n    removeImages () {\n      this.images = null\n      this.$refs.img_input.value = ''\n      this.keyImg++\n      this.$emit('input', this.images)\n      this.$emit('change', this.images)\n    },\n\n    handleFiles (e) {\n      const promises = []\n      _readFiles(e.target.files).then(files => {\n        _createImage(files[0].result).then(image => {\n          const canvases = _createCanvases(image, this.innerFormats)\n          if (this.debug) this.$refs.canvases.innerHTML = ''\n          canvases.forEach((canvas, i) => {\n            if (this.debug) {\n              const p = document.createElement('p')\n              p.innerHTML = `<small>format: ${  JSON.stringify(canvas.format)  }</small>`\n              this.$refs.canvases.appendChild(p)\n              this.$refs.canvases.appendChild(canvas)\n            }\n            // prepare image name\n            if (!this.images) this.images = {}\n            let imgName = canvas.format.name\n            if (this.keepOriginalName) {\n              imgName = name\n            } else if (this.randomName) {\n              imgName = (Math.round(Date.now() + Date.now() * Math.random())).toString(36).replace(/\\W/gmi, '')\n            }\n            if (this.timestampName) {\n              imgName += '-' + Date.now()\n            }\n            imgName = imgName.replace(/\\s+/gmi,'_').toLowerCase() // avoid space and uppercase in name\n            //\n            this.images[imgName] = canvas.toDataURL(`image/${canvas.format.encoding}`, canvas.format.quality)\n            this.keyImg++\n            this.$emit('input', this.images)\n            this.$emit('change', this.images)\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!./InputImage.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!./InputImage.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./InputImage.vue?vue&type=template&id=261110bd&\"\nimport script from \"./InputImage.vue?vue&type=script&lang=js&\"\nexport * from \"./InputImage.vue?vue&type=script&lang=js&\"\nimport style0 from \"./InputImage.vue?vue&type=style&index=0&id=261110bd&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\n\n/* vuetify-loader */\nimport installComponents from \"!../../node_modules/vuetify-loader/lib/runtime/installComponents.js\"\nimport { VBtn } from 'vuetify/lib/components/VBtn';\nimport { VIcon } from 'vuetify/lib/components/VIcon';\ninstallComponents(component, {VBtn,VIcon})\n","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!./InputImage.vue?vue&type=style&index=0&id=261110bd&prod&lang=scss&\""],"sourceRoot":""}