{"version":3,"sources":["components/dropzone.js"],"names":["dmx","Component","extends","initialData","file","files","lastError","attributes","accept","type","String","default","required","Boolean","message","thumbs","thumbsWidth","Number","thumbsHeight","imageMaxWidth","imageMaxHeight","imageType","enum","imageQuality","methods","remove","id","this","_remove","reset","_reset","init","node","_clickHandler","bind","_dragoverHandler","_dragenterHandler","_dragleaveHandler","_dropHandler","_changeHandler","_resetHandler","_imageTypes","png","jpeg","webp","_imageExtensions","_form","form","_cnt","render","_dropzoneElement","document","createElement","attr","setAttribute","name","value","classList","add","Object","defineProperties","willValidate","get","set","dmxExtraData","$node","Array","isArray","data","props","multiple","disabled","setCustomValidity","_messageElement","className","innerHTML","append","addEventListener","dom","replace","dmxExtraElements","push","performUpdate","updatedProps","has","_updateMessage","destroy","removeEventListener","_validate","validate","dirty","invalid","validity","valid","validationMessage","validateReset","nextTick","dispatchEvent","length","_addItems","items","i","entry","webkitGetAsEntry","isFile","_addFile","getAsFile","isDirectory","_addDirectory","path","createReader","readEntries","entries","fullPath","_addFiles","resized","_resizeImage","then","_id","self","info","date","lastModified","Date","lastModifiedDate","toISOString","size","dataUrl","_reader","_dataUrl","fileUtils","blobToDataURL","map","f","catch","error","console","_createThumb","includes","FileReader","onload","result","readAsDataURL","index","findIndex","thumb","_thumb","URL","revokeObjectURL","_objectURL","splice","slice","style","width","height","title","createObjectURL","backgroundImage","event","preventDefault","stopPropagation","filename","textContent","filesize","_formatBytes","Promise","resolve","startsWith","blobUrl","img","Image","src","onerror","ratio","needResize","newType","canvas","ctx","getContext","drawImage","toBlob","blob","newName","newFile","File","undefined","bytes","toFixed","click","target","dataTransfer"],"mappings":"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","file":"dmxDropzone.js","sourcesContent":["dmx.Component('dropzone', {\r\n\r\n  extends: 'form-element',\r\n\r\n  initialData: {\r\n    file: null,\r\n    files: [],\r\n    lastError: '',\r\n  },\r\n\r\n  attributes: {\r\n    accept: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n\r\n    required: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n\r\n    message: {\r\n      type: String,\r\n      default: 'Drop files here or click to browse.',\r\n    },\r\n\r\n    thumbs: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n\r\n    thumbsWidth: {\r\n      type: Number,\r\n      default: 100,\r\n    },\r\n\r\n    thumbsHeight: {\r\n      type: Number,\r\n      default: 100,\r\n    },\r\n\r\n    imageMaxWidth: {\r\n      type: Number,\r\n      default: null,\r\n    },\r\n\r\n    imageMaxHeight: {\r\n      type: Number,\r\n      default: null,\r\n    },\r\n\r\n    imageType: {\r\n      type: String,\r\n      default: null,\r\n      enum: ['png', 'jpeg', 'webp'],\r\n    },\r\n\r\n    imageQuality: {\r\n      type: Number,\r\n      default: null,\r\n    },\r\n  },\r\n\r\n  methods: {\r\n    remove (id) {\r\n      this._remove(id);\r\n    },\r\n\r\n    reset () {\r\n      this._reset();\r\n    },\r\n  },\r\n\r\n  init (node) {\r\n    this._clickHandler = this._clickHandler.bind(this);\r\n    this._dragoverHandler = this._dragoverHandler.bind(this);\r\n    this._dragenterHandler = this._dragenterHandler.bind(this);\r\n    this._dragleaveHandler = this._dragleaveHandler.bind(this);\r\n    this._dropHandler = this._dropHandler.bind(this);\r\n    this._changeHandler = this._changeHandler.bind(this);\r\n    this._resetHandler = this._resetHandler.bind(this);\r\n\r\n    this._imageTypes = {\r\n      png: 'image/png',\r\n      jpeg: 'image/jpeg',\r\n      webp: 'image/webp',\r\n      'image/png': 'image/png',\r\n      'image/jpeg': 'image/jpeg',\r\n      'image/webp': 'image/webp',\r\n    };\r\n\r\n    this._imageExtensions = {\r\n      'image/png': 'png',\r\n      'image/jpeg': 'jpg',\r\n      'image/webp': 'webp',\r\n    };\r\n\r\n    this._form = node.form;\r\n    this._cnt = 0;\r\n  },\r\n\r\n  render (node) {\r\n    this._dropzoneElement = document.createElement('div');\r\n    for (let attr of node.attributes) {\r\n      this._dropzoneElement.setAttribute(attr.name, attr.value);\r\n    }\r\n    this._dropzoneElement.classList.add('dmxDropzone');\r\n\r\n    Object.defineProperties(this._dropzoneElement, {\r\n      willValidate: {\r\n        get: () => true,\r\n        set: () => {},\r\n      },\r\n      files: {\r\n        get: () => {\r\n          const files = this._form.dmxExtraData[this.$node.name];\r\n          if (Array.isArray(files)) return files;\r\n          return files ? [files] : [];\r\n        },\r\n        set: () => {},\r\n      },\r\n      value: {\r\n        get: () => this.data.file || String(this.data.files),\r\n        set: () => {},\r\n      },\r\n    });\r\n\r\n    this._dropzoneElement.type = 'file';\r\n    this._dropzoneElement.required = this.props.required;\r\n    this._dropzoneElement.multiple = node.multiple;\r\n    this._dropzoneElement.accept = this.props.accept;\r\n    this._dropzoneElement.name = node.name;\r\n    this._dropzoneElement.disabled = node.disabled;\r\n    this._dropzoneElement.setCustomValidity = message => {\r\n      this.set('isinvalid', message != '');\r\n      this.set('validityMessage', message || '');\r\n    };\r\n    \r\n    this._messageElement = document.createElement('div');\r\n    this._messageElement.className = 'dmxDropzoneMessage';\r\n    this._messageElement.innerHTML = this.props.message;\r\n\r\n    this._dropzoneElement.append(this._messageElement);\r\n\r\n    this._dropzoneElement.addEventListener('click', this._clickHandler);\r\n    this._dropzoneElement.addEventListener('dragover', this._dragoverHandler);\r\n    this._dropzoneElement.addEventListener('dragenter', this._dragenterHandler);\r\n    this._dropzoneElement.addEventListener('dragleave', this._dragleaveHandler);\r\n    this._dropzoneElement.addEventListener('drop', this._dropHandler);\r\n\r\n    node.addEventListener('change', this._changeHandler);\r\n    node.accept = this.props.accept;\r\n    \r\n    dmx.dom.replace(node, this._dropzoneElement);\r\n\r\n    if (this._form) {\r\n      if (Array.isArray(this._form.dmxExtraElements)) {\r\n        this._form.dmxExtraElements.push(this._dropzoneElement);\r\n      }\r\n      this._form.addEventListener('reset', this._resetHandler);\r\n    }\r\n  },\r\n\r\n  performUpdate (updatedProps) {\r\n    if (updatedProps.has('accept')) {\r\n      this.$node.accept = this.props.accept;\r\n    }\r\n\r\n    if (updatedProps.has('message')) {\r\n      this._updateMessage();\r\n    }\r\n  },\r\n\r\n  destroy () {\r\n    this._dropzoneElement.removeEventListener('click', this._clickHandler);\r\n    this._dropzoneElement.removeEventListener('dragover', this._dragoverHandler);\r\n    this._dropzoneElement.removeEventListener('dragenter', this._dragenterHandler);\r\n    this._dropzoneElement.removeEventListener('dragleave', this._dragleaveHandler);\r\n    this._dropzoneElement.removeEventListener('drop', this._dropHandler);\r\n\r\n    this.$node.removeEventListener('change', this._changeHandler);\r\n\r\n    if (this._form) {\r\n      this._form.removeEventListener('reset', this._resetHandler);\r\n    }\r\n\r\n    dmx.dom.replace(this._dropzoneElement, this.$node);\r\n  },\r\n\r\n  _validate () {\r\n    dmx.validate(this._dropzoneElement);\r\n\r\n    if (this.$node.dirty) {\r\n      this.set({\r\n        invalid: !this.$node.validity.valid,\r\n        validationMessage: this.$node.validationMessage,\r\n      });\r\n    }\r\n  },\r\n\r\n  _reset () {\r\n    dmx.validateReset(this._dropzoneElement);\r\n    this._dropzoneElement.dirty = false;\r\n    this.$node.dirty = false;\r\n    this.set({\r\n      invalid: false,\r\n      validationMessage: '',\r\n    });\r\n    this._remove();\r\n    dmx.nextTick(() => this.dispatchEvent(\"updated\"));\r\n  },\r\n\r\n  _updateMessage () {\r\n    let message = this.props.message;\r\n\r\n    if (this.data.files.length) {\r\n      message += ` (${this.data.files.length} files)`;\r\n    } else if (this.data.file) {\r\n      message += ` (${this.data.file.name})`;\r\n    }\r\n\r\n    this._messageElement.innerHTML = message;\r\n  },\r\n\r\n  _addItems (items) {\r\n    for (let i = 0; i < items.length; i++) {\r\n      const entry = items[i].webkitGetAsEntry();\r\n\r\n      if (entry.isFile) {\r\n        this._addFile(items[i].getAsFile());\r\n      } else if (entry.isDirectory) {\r\n        this._addDirectory(entry);\r\n      }\r\n    }\r\n  },\r\n\r\n  _addDirectory (entry, path = '') {\r\n    const reader = entry.createReader();\r\n\r\n    reader.readEntries(entries => {\r\n      for (let i = 0; i < entries.length; i++) {\r\n        const entry = entries[i];\r\n\r\n        if (entry.isFile) {\r\n          entry.file(file => {\r\n            file.fullPath = path + file.name;\r\n            this._addFile(file);\r\n          });\r\n        } else if (entry.isDirectory) {\r\n          this._addDirectory(entry, path + entry.name + '/');\r\n        }\r\n      }\r\n    });\r\n  },\r\n\r\n  _addFiles (files) {\r\n    for (let i = 0; i < files.length; i++) {\r\n      this._addFile(files[i]);\r\n    }\r\n  },\r\n\r\n  _addFile (file) {\r\n    if ((this.props.imageMaxWidth || this.props.imageMaxHeight || this.props.imageType) && !file.resized) {\r\n      this._resizeImage(file).then(file => {\r\n        this._addFile(file);\r\n      });\r\n      return;\r\n    }\r\n\r\n    if (this.$node.multiple) {\r\n      this._form.dmxExtraData[this.$node.name] = this._form.dmxExtraData[this.$node.name] || [];\r\n      this._form.dmxExtraData[this.$node.name].push(file);\r\n    } else {\r\n      this._remove();\r\n      this._form.dmxExtraData[this.$node.name] = file;\r\n    }\r\n\r\n    file._id = ++this._cnt;\r\n\r\n    const self = this;\r\n    const info = {\r\n      id: file._id,\r\n      date: (file.lastModified ? new Date(file.lastModified) : file.lastModifiedDate).toISOString(),\r\n      name: file.name,\r\n      size: file.size,\r\n      type: file.type,\r\n      get dataUrl () {\r\n        if (!file._reader && !file._dataUrl) {\r\n          dmx.fileUtils.blobToDataURL(file).then(dataUrl => {\r\n            file._dataUrl = dataUrl;\r\n            if (self.$node.multiple) {\r\n              self.set('files', self.data.files.map(f => f.id == info.id ? {...f, dataUrl} : f));\r\n            } else {\r\n              self.set('file', {...info, dataUrl});\r\n            }\r\n          }).catch(error => {\r\n            console.error(error);\r\n          });\r\n        }\r\n\r\n        return null;\r\n      },\r\n    };\r\n\r\n    if (this.props.thumbs) {\r\n      this._createThumb(file);\r\n    }\r\n    \r\n    if (file.type.includes('image/') && !file._reader) {\r\n      file._reader = new FileReader();\r\n\r\n      file._reader.onload = () => {\r\n        //info.dataUrl = file._reader.result;\r\n        if (this.$node.multiple) {\r\n          this.set('files', this.data.files.map(f => f.id == info.id ? {...f, dataUrl: file._reader.result} : f));\r\n        } else {\r\n          this.set('file', {...info, dataUrl: file._reader.result});\r\n        }\r\n      };\r\n\r\n      file._reader.readAsDataURL(file);\r\n    }\r\n\r\n    if (this.$node.multiple) {\r\n      this.set('files', [...this.data.files, info]);\r\n    } else {\r\n      this.set('file', info);\r\n    }\r\n\r\n    if (this._dropzoneElement.dirty) {\r\n      this._validate();\r\n    }\r\n  },\r\n\r\n  _remove (id) {\r\n    if (this.$node.multiple) {\r\n      if (!id) {\r\n        if (Array.isArray(this._form.dmxExtraData[this.$node.name])) {\r\n          for (let file of this._form.dmxExtraData[this.$node.name]) {\r\n            const thumb = file._thumb;\r\n            if (thumb) {\r\n              thumb.remove();\r\n              URL.revokeObjectURL(thumb._objectURL);\r\n            }\r\n          }\r\n        }\r\n        delete this._form.dmxExtraData[this.$node.name];\r\n        this.set('files', []);\r\n    } else {\r\n        const index = this.data.files.findIndex(file => file.id == id);\r\n\r\n        if (index != -1) {\r\n          const thumb = this._form.dmxExtraData[this.$node.name][index]._thumb;\r\n          if (thumb) {\r\n            thumb.remove();\r\n            URL.revokeObjectURL(thumb._objectURL);\r\n          }\r\n          this._form.dmxExtraData[this.$node.name].splice(index, 1);\r\n          this.set('files', [...this.data.files.slice(0, index), ...this.data.files.slice(index + 1)]);\r\n        }\r\n      }\r\n    } else if (this.data.file) {\r\n      const thumb = this._form.dmxExtraData[this.$node.name]._thumb;\r\n      if (thumb) {\r\n        thumb.remove();\r\n        URL.revokeObjectURL(thumb._objectURL);\r\n      }\r\n      delete this._form.dmxExtraData[this.$node.name];\r\n      this.set('file', null);\r\n    }\r\n\r\n    if (this._dropzoneElement.dirty) {\r\n      this._validate();\r\n    }\r\n  },\r\n\r\n  _createThumb (file) {\r\n    const thumb = document.createElement('div');\r\n    thumb.id = 'dmxDropzoneThumb' + file._id;\r\n    thumb.className = 'dmxDropzoneThumb';\r\n    thumb.style.width = this.props.thumbsWidth + 'px';\r\n    thumb.style.height = this.props.thumbsHeight + 'px';\r\n    thumb.title = file.name;\r\n    thumb._objectURL = URL.createObjectURL(file);\r\n    thumb.style.backgroundImage = `url(${thumb._objectURL})`;\r\n    thumb.addEventListener('click', event => {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      this._remove(file._id);\r\n    });\r\n\r\n    const filename = document.createElement('div');\r\n    filename.className = 'dmxDropzoneFilename';\r\n    filename.textContent = file.name;\r\n    thumb.append(filename);\r\n\r\n    const filesize = document.createElement('div');\r\n    filesize.className = 'dmxDropzoneFilesize';\r\n    filesize.textContent = this._formatBytes(file.size);\r\n    thumb.append(filesize);\r\n\r\n    file._thumb = thumb;\r\n\r\n    this._dropzoneElement.append(thumb);\r\n  },\r\n\r\n  _resizeImage (file) {\r\n    file.resized = true;\r\n\r\n    return new Promise(resolve => {\r\n      if (!file.type.startsWith('image/')) {\r\n        resolve(file);\r\n        return;\r\n      }\r\n\r\n      const blobUrl = URL.createObjectURL(file);\r\n      const img = new Image();\r\n      img.src = blobUrl;\r\n      img.onerror = () => URL.revokeObjectURL(blobUrl);\r\n      img.onload = () => {\r\n        URL.revokeObjectURL(blobUrl);\r\n\r\n        const { imageMaxWidth, imageMaxHeight, imageType, imageQuality } = this.props;\r\n\r\n        let width = img.width;\r\n        let height = img.height;\r\n        let ratio = width / height;\r\n        let needResize = false;\r\n\r\n        if (imageMaxWidth && width > imageMaxWidth) {\r\n          width = imageMaxWidth;\r\n          height = ~~(width / ratio);\r\n          needResize = true;\r\n        }\r\n\r\n        if (imageMaxHeight && height > imageMaxHeight) {\r\n          height = imageMaxHeight;\r\n          width = ~~(height * ratio);\r\n          needResize = true;\r\n        }\r\n\r\n        const newType = imageType ? this._imageTypes[imageType] : file.type;\r\n\r\n        if (newType !== file.type || needResize) {\r\n          const canvas = document.createElement('canvas');\r\n          const ctx = canvas.getContext('2d');\r\n\r\n          canvas.width = width;\r\n          canvas.height = height;\r\n\r\n          ctx.drawImage(img, 0, 0, width, height);\r\n\r\n          canvas.toBlob(blob => {\r\n            if (blob == null) {\r\n              return console.error('Could not resize image!');\r\n            }\r\n            const newName = file.name.replace(/\\.\\w+$/, '.' + this._imageExtensions[blob.type]);\r\n            const newFile = new File([blob], newName, { type: blob.type });\r\n            resolve(newFile);\r\n          }, newType, imageQuality ? imageQuality / 100 : undefined);\r\n        } else {\r\n          resolve(file);\r\n        }\r\n      };\r\n    });\r\n  },\r\n\r\n  _formatBytes (bytes) {\r\n    const units = ['B', 'KB', 'MB', 'GB', 'TB'];\r\n    let i = 0;\r\n\r\n    while (bytes >= 1000) {\r\n      bytes /= 1000;\r\n      i++;\r\n    }\r\n\r\n    return bytes.toFixed(1) + units[i];\r\n  },\r\n\r\n  _clickHandler (event) {\r\n    this.$node.click();\r\n  },\r\n\r\n  _changeHandler (event) {\r\n    this._addFiles(event.target.files);\r\n    this.$node.value = '';\r\n    this.$node.type = '';\r\n    this.$node.type = 'file';\r\n    if (event) this.dispatchEvent('changed');\r\n    dmx.nextTick(() => this.dispatchEvent(\"updated\"));\r\n  },\r\n\r\n  _dragoverHandler (event) {\r\n    event.preventDefault();\r\n    event.stopPropagation();\r\n  },\r\n\r\n  _dragenterHandler (event) {\r\n    event.preventDefault();\r\n    event.stopPropagation();\r\n\r\n    this._dropzoneElement.classList.add('dmxDropzoneHover');\r\n  },\r\n\r\n  _dragleaveHandler (event) {\r\n    this._dropzoneElement.classList.remove('dmxDropzoneHover');\r\n  },\r\n\r\n  _dropHandler (event) {\r\n    event.preventDefault();\r\n    event.stopPropagation();\r\n\r\n    this._dropzoneElement.classList.remove('dmxDropzoneHover');\r\n\r\n    if (!event.dataTransfer.files.length) {\r\n      return;\r\n    }\r\n\r\n    if (event.dataTransfer.items.length && event.dataTransfer.items[0].webkitGetAsEntry) {\r\n      this._addItems(event.dataTransfer.items);\r\n    } else {\r\n      this._addFiles(event.dataTransfer.files);\r\n    }\r\n\r\n    this.dispatchEvent('change');\r\n  },\r\n\r\n  _resetHandler (event) {\r\n    this._reset();\r\n    this.dispatchEvent('changed');\r\n  },\r\n\r\n});\r\n"]}