{"version":3,"sources":["webpack:///./src/components/Events/ModalEditEventImage.vue?63ac","webpack:///./src/utils/imageHelper.js","webpack:///./src/providers/upload.js","webpack:///./src/components/Events/ModalEditEventImage.vue","webpack:///src/components/Events/ModalEditEventImage.vue","webpack:///./src/components/Events/ModalEditEventImage.vue?47cb","webpack:///./src/components/Events/ModalEditEventImage.vue?6b76"],"names":["TRANSPARENCY_MIME_TYPES","mimeTypeCanHaveTransparency","mimeType","arguments","length","undefined","indexOf","String","toLowerCase","getMimeTypeFromDataUrl","dataUrl","match","exec","hasTransparentInteriorPixels","data","width","height","y","rowStart","x","canvasToUploadDataUrl","canvas","jpegQuality","canHaveTransparency","ctx","getContext","imageData","getImageData","toDataURL","globalCompositeOperation","fillStyle","fillRect","methods","postArticleImage","_postArticleImage","_asyncToGenerator","_regenerator","m","_callee","articleId","base64Image","w","_context","n","split","axios","post","concat","process","Base64Image","Type","ItemId","headers","apiToken","profileToken","store","getters","a","v","_x","_x2","apply","locationImage","locationId","_this","_callee2","img","response","_context2","resizeImage","Axios","locationHost","_this2","_callee3","_context3","locationLogo","_this3","_callee4","_context4","eventImage","eventId","_this4","_callee5","_context5","_arguments","_callee6","maxWidth","maxHeight","_context6","Promise","resolve","Image","onload","document","createElement","ratio","imageSmoothingEnabled","imageSmoothingQuality","drawImage","src","render","_vm","this","_c","_self","attrs","$t","onClickCancel","showModal","saveEventImage","disableSaveButton","isSaving","isSavingSuccess","isSavingError","on","scopedSlots","_u","key","fn","staticClass","ref","val","newImageChosen","hasImageError","proxy","staticRenderFns","components","Message","ImageCropper","props","type","Boolean","default","Function","required","$route","params","computed","mounted","eventData","cleanSource","$store","$options","filters","getEventImage","_objectSpread","mapMutations","NEW_IMAGE","responseImageUpload","eventResponse","t","p","$refs","imageCropper","getCroppedCanvas","uploadProvider","status","eventProvider","updateEvent","setEventData","setTimeout","clearTimeout","component"],"mappings":"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","file":"js/chunk-d157b886.js?id=fb8ef0f68077865ee839","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--10-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ModalEditEventImage.vue?vue&type=style&index=0&id=55c28339&prod&lang=sass&scoped=true\"","const TRANSPARENCY_MIME_TYPES = ['image/png', 'image/gif', 'image/webp']\n\n/**\n * Check if a MIME type is an image format that can contain transparency\n * @param {String} mimeType - e.g. 'image/png'\n * @returns {Boolean}\n */\nexport function mimeTypeCanHaveTransparency(mimeType = '') {\n  return TRANSPARENCY_MIME_TYPES.indexOf(String(mimeType || '').toLowerCase()) > -1\n}\n\n/**\n * Get the MIME type from a data URL prefix, e.g. 'data:image/png;base64,...' gives 'image/png'\n * @param {String} dataUrl\n * @returns {String}\n */\nexport function getMimeTypeFromDataUrl(dataUrl = '') {\n  const match = /^data:([^;,]+)[;,]/i.exec(dataUrl || '')\n\n  return match ? match[1].toLowerCase() : ''\n}\n\n/**\n * Check if image data contains at least one (semi-)transparent pixel\n * @param {Uint8ClampedArray} data - RGBA pixel data of an ImageData object\n * @returns {Boolean}\n */\nexport function hasTransparentPixels(data) {\n  for (let i = 3; i < data.length; i += 4) {\n    if (data[i] < 255) {\n      return true\n    }\n  }\n\n  return false\n}\n\n/**\n * Check if image data is really transparent, ignoring the outermost 1px border.\n * Cropping and resizing with sub-pixel boxes anti-aliases the edge pixels, which\n * makes the edge semi-transparent for an image that is opaque. Only a pixel that\n * is NOT in the outermost 1px border with an alpha below 255 counts as transparency.\n * @param {Uint8ClampedArray} data - RGBA pixel data of an ImageData object\n * @param {Number} width\n * @param {Number} height\n * @returns {Boolean}\n */\nexport function hasTransparentInteriorPixels(data, width, height) {\n  for (let y = 1; y < height - 1; y++) {\n    const rowStart = y * width * 4\n\n    for (let x = 1; x < width - 1; x++) {\n      if (data[rowStart + x * 4 + 3] < 255) {\n        return true\n      }\n    }\n  }\n\n  return false\n}\n\n/**\n * Export a canvas as a data URL that is suited for uploading.\n * Only when the source image can have transparency (PNG, GIF, WebP) the canvas is checked\n * and exported as PNG when it really is transparent, so the transparency is preserved.\n * Everything else (e.g. a JPEG photo) is exported as JPEG on a white background.\n * @param {HTMLCanvasElement} canvas\n * @param {Number} jpegQuality - JPEG quality between 0 and 1\n * @param {Boolean} canHaveTransparency - Source image is a format that can contain transparency\n * @returns {String}\n */\nexport function canvasToUploadDataUrl(canvas, jpegQuality = 0.92, canHaveTransparency = false) {\n  const ctx = canvas.getContext('2d')\n\n  if (canHaveTransparency) {\n    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)\n\n    if (hasTransparentInteriorPixels(imageData.data, canvas.width, canvas.height)) {\n      return canvas.toDataURL('image/png')\n    }\n  }\n\n  // Paint a white background behind the image so the JPEG never gets black corners or edges\n  ctx.globalCompositeOperation = 'destination-over'\n  ctx.fillStyle = '#fff'\n  ctx.fillRect(0, 0, canvas.width, canvas.height)\n  ctx.globalCompositeOperation = 'source-over'\n\n  return canvas.toDataURL('image/jpeg', jpegQuality)\n}\n","import Axios from 'axios'\nimport axios from 'axios'\nimport store from '../store'\nimport { canvasToUploadDataUrl, getMimeTypeFromDataUrl, mimeTypeCanHaveTransparency } from '@/utils/imageHelper'\n\nexport default {\n  methods: {\n    postArticleImage: async (articleId, base64Image) => {\n      base64Image = base64Image.split(',')[1]\n\n      return await axios.post(`${process.env.VUE_APP_API_BASE_URL}/api/v1/upload/image`, {\n          Base64Image: base64Image,\n          Type: 'Article',\n          ItemId: articleId,\n      },\n        {\n          headers: {\n            'Content-type': 'application/json',\n            apiToken: process.env.VUE_APP_API_KEY,\n            profileToken: store.getters['profileStore/getProfileToken']\n          }\n        })\n    },\n\n    /**\n     * Upload location image\n     * @param {Number} locationId\n     * @param {String} base64Image\n     */\n    async locationImage(locationId, base64Image) {\n      let img = await this.resizeImage(base64Image)\n      base64Image = img.split(',')[1]\n      const response = Axios.post(\n        `${process.env.VUE_APP_API_BASE_URL}/api/v1/upload/image`,\n        {\n          Base64Image: base64Image,\n          Type: 'Location',\n          ItemId: locationId,\n        },\n        {\n          headers: {\n            'Content-type': 'application/json',\n            apiToken: process.env.VUE_APP_API_KEY,\n            profileToken: store.getters['profileStore/getProfileToken'],\n          },\n        }\n      )\n      return response\n    },\n\n    /**\n     * Upload location image\n     * @param {Number} locationId\n     * @param {String} base64Image\n     */\n    async locationHost(locationId, base64Image) {\n      let img = await this.resizeImage(base64Image)\n      base64Image = img.split(',')[1]\n      const response = Axios.post(\n        `${process.env.VUE_APP_API_BASE_URL}/api/v1/upload/image`,\n        {\n          Base64Image: base64Image,\n          Type: 'VirtualManager',\n          ItemId: locationId,\n        },\n        {\n          headers: {\n            'Content-type': 'application/json',\n            apiToken: process.env.VUE_APP_API_KEY,\n            profileToken: store.getters['profileStore/getProfileToken'],\n          },\n        }\n      )\n      return response\n    },\n\n    /**\n     * Upload location logo\n     * @param {Number} locationId\n     * @param {String} base64Image\n     */\n    async locationLogo(locationId, base64Image) {\n      let img = await this.resizeImage(base64Image)\n      base64Image = img.split(',')[1]\n      const response = Axios.post(\n        `${process.env.VUE_APP_API_BASE_URL}/api/v1/upload/image`,\n        {\n          Base64Image: base64Image,\n          Type: 'Logo',\n          ItemId: locationId,\n        },\n        {\n          headers: {\n            'Content-type': 'application/json',\n            apiToken: process.env.VUE_APP_API_KEY,\n            profileToken: store.getters['profileStore/getProfileToken'],\n          },\n        }\n      )\n      return response\n    },\n\n    /**\n     * Upload event image\n     * @param {Number} eventId\n     * @param {String} base64Image\n     */\n    async eventImage(eventId, base64Image) {\n      let img = await this.resizeImage(base64Image)\n      base64Image = img.split(',')[1]\n\n      const response = Axios.post(\n        `${process.env.VUE_APP_API_BASE_URL}/api/v1/upload/image`,\n        {\n          Base64Image: base64Image,\n          Type: 'Event',\n          ItemId: eventId,\n        },\n        {\n          headers: {\n            'Content-type': 'application/json',\n            apiToken: process.env.VUE_APP_API_KEY,\n            profileToken: store.getters['profileStore/getProfileToken'],\n          },\n        }\n      )\n      return response\n    },\n\n    /**\n     * Resize images when needed\n     * @param {String} dataUrl\n     * @param {Number} maxWidth\n     * @param {Number} maxHeight\n     */\n    async resizeImage(dataUrl, maxWidth = 1920, maxHeight = 1920) {\n      return new Promise((resolve) => {\n        let img = new Image()\n        img.onload = (response) => {\n          if (img.width < maxWidth || img.height < maxHeight) {\n            resolve(dataUrl)\n          } else {\n            // Do resize\n            let canvas = document.createElement('canvas')\n\n            // let maxWidth = 1920 // Max width for the image\n            // let maxHeight = 1920 // Max height for the image\n            let ratio = 0 // Used for aspect ratio\n            let width = img.width // Current image width\n            let height = img.height // Current image height\n\n            // Check if the current width is larger than the max\n            if (width > maxWidth) {\n              ratio = maxWidth / width // get ratio for scaling image\n              height = height * ratio // Reset height to match scaled image\n              width = width * ratio // Reset width to match scaled image\n            }\n\n            // Check if current height is larger than max\n            if (height > maxHeight) {\n              ratio = maxHeight / height // get ratio for scaling image\n              width = width * ratio // Reset width to match scaled image\n            }\n            canvas.width = width\n            canvas.height = height\n\n            const ctx = canvas.getContext('2d')\n            ctx.imageSmoothingEnabled = true\n            ctx.imageSmoothingQuality = 'high'\n            ctx.drawImage(img, 0, 0, width, height)\n            resolve(canvasToUploadDataUrl(canvas, 1, mimeTypeCanHaveTransparency(getMimeTypeFromDataUrl(dataUrl))))\n          }\n        }\n        img.src = dataUrl\n      })\n    },\n  },\n}\n","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('ui-component-modal',{attrs:{\"modalSize\":\"large\",\"modalTitle\":_vm.$t('Components.Events.EventImage.Edit.Main_Title'),\"onClickCancel\":_vm.onClickCancel,\"showModal\":_vm.showModal,\"onClickSave\":_vm.saveEventImage,\"disableSaveButton\":_vm.disableSaveButton,\"isSaving\":_vm.isSaving,\"isSavingSuccess\":_vm.isSavingSuccess,\"isSavingError\":_vm.isSavingError,\"buttonLabelConfirm\":_vm.$t('Components.Events.EventImage.Edit.Button_UploadSave')},on:{\"closeModal\":_vm.onClickCancel},scopedSlots:_vm._u([{key:\"content\",fn:function(){return [_c('Message',{attrs:{\"message\":_vm.$t('Components.Events.EventImage.Edit.Information_FittingImage')}}),_c('div',{staticClass:\"columns is-mobile is-multiline is-vcentered\"},[_c('div',{staticClass:\"column is-7\"},[_c('ImageCropper',{ref:\"imageCropper\",attrs:{\"aspectRatio\":3 / 2,\"aspectRatioCssClass\":\"is-3by2\",\"guides\":false,\"viewMode\":3,\"previewContainer\":\".imagePreview\",\"originalImage\":_vm.eventImage},on:{\"callbackImageChosen\":val => { _vm.newImageChosen = val },\"errorCallbackInvalid\":val => { _vm.hasImageError = val }}})],1),_c('div',{staticClass:\"column is-5\"},[_c('div',{staticClass:\"wrapper-previews\"},[_c('div',{staticClass:\"imagePreview has-background-grey-light\"})])])])]},proxy:true}])})\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <ui-component-modal\n    modalSize=\"large\"\n    :modalTitle=\"$t('Components.Events.EventImage.Edit.Main_Title')\"\n    :onClickCancel=\"onClickCancel\"\n    :showModal=\"showModal\"\n    :onClickSave=\"saveEventImage\"\n    :disableSaveButton=\"disableSaveButton\"\n    :isSaving=\"isSaving\"\n    :isSavingSuccess=\"isSavingSuccess\"\n    :isSavingError=\"isSavingError\"\n    :buttonLabelConfirm=\"$t('Components.Events.EventImage.Edit.Button_UploadSave')\"\n    @closeModal=\"onClickCancel\"\n  >\n    <template v-slot:content>\n      <Message :message=\"\n          $t('Components.Events.EventImage.Edit.Information_FittingImage')\n        \" />\n\n      <div class=\"columns is-mobile is-multiline is-vcentered\">\n        <div class=\"column is-7\">\n          <ImageCropper\n            ref=\"imageCropper\"\n            :aspectRatio=\"3 / 2\"\n            aspectRatioCssClass=\"is-3by2\"\n            :guides=\"false\"\n            :viewMode=\"3\"\n            previewContainer=\".imagePreview\"\n            :originalImage=\"eventImage\"\n            @callbackImageChosen=\"val => { newImageChosen = val }\"\n            @errorCallbackInvalid=\"val => { hasImageError = val }\"\n          />\n        </div>\n        <div class=\"column is-5\">\n          <div class=\"wrapper-previews\">\n            <div class=\"imagePreview has-background-grey-light\"></div>\n          </div>\n        </div>\n      </div>\n    </template>\n  </ui-component-modal>\n</template>\n\n<script>\nimport { mapMutations } from 'vuex'\nimport ImageCropper from '@/components/UI/ImageCropper'\nimport Message from '@/components/UI/Message'\nimport uploadProvider from '../../providers/upload'\nimport eventProvider from '../../providers/event'\nimport { cleanSource } from '../../utils/objectHelper'\nexport default {\n  components: {\n    Message,\n    ImageCropper\n  },\n  props: {\n    showModal: {\n      type: Boolean,\n      default: false\n    },\n    onClickCancel: {\n      type: Function,\n      required: true\n    }\n  },\n  data() {\n    return {\n      eventId: this.$route.params.eventId,\n      eventImage: '',\n      isSaving: false,\n      isSavingSuccess: false,\n      isSavingError: false,\n      newImageChosen: false,\n      hasImageError: false,\n    }\n  },\n\n  computed: {\n    disableSaveButton() {\n      return this.isSaving || !this.newImageChosen || this.hasImageError\n    },\n  },\n\n  mounted() {\n    this.eventData = cleanSource(this.$store.getters['eventStore/getEventData'])\n    if (this.eventData !== null) {\n      this.eventImage = this.$options.filters.getEventImage(this.eventData.Image)\n    }\n  },\n\n  methods: {\n    ...mapMutations('eventStore', ['setEventData']),\n\n    /**\n     * Save event image\n     * First upload new event image\n     * Then save new image to event\n     */\n    async saveEventImage() {\n      if (this.disableSaveButton) { return }\n      this.isSaving = true\n\n      try {\n        const NEW_IMAGE = this.$refs.imageCropper.getCroppedCanvas()\n        let responseImageUpload = await uploadProvider.methods.eventImage(this.eventId, NEW_IMAGE)\n        if (responseImageUpload.status === 200) {\n          this.eventData.Image = responseImageUpload.data\n        }\n\n        let eventResponse = await eventProvider.methods.updateEvent(this.eventData)\n        this.isSavingSuccess = true\n        this.setEventData(eventResponse.data)\n\n        let t = setTimeout(() => {\n          this.onClickCancel()\n          clearTimeout(t)\n        }, 1500)\n      } catch {\n        this.isSavingError = true\n        this.isSaving = false\n      }\n    }\n  }\n}\n</script>\n\n\n<style lang=\"sass\" scoped>\n.wrapper-previews\n  display: flex\n  flex-grow: 1\n  .imagePreview\n    overflow: hidden\n    aspect-ratio: 16/9\n    &:nth-child(1)\n      max-width: 80%\n      width: 100%\n</style>\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!./ModalEditEventImage.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!./ModalEditEventImage.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./ModalEditEventImage.vue?vue&type=template&id=55c28339&scoped=true\"\nimport script from \"./ModalEditEventImage.vue?vue&type=script&lang=js\"\nexport * from \"./ModalEditEventImage.vue?vue&type=script&lang=js\"\nimport style0 from \"./ModalEditEventImage.vue?vue&type=style&index=0&id=55c28339&prod&lang=sass&scoped=true\"\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  \"55c28339\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}