{"version":3,"sources":["file-drag-drop.js"],"names":["window","document","windowIsDetected","lastTarget","clone","dropFileBox","defaultMsg","multiple","typeImg","typeComma","typeOr","typeTextBefore","typeTextAfter","sizeBefore","sizeAfter","FileDrop","selector","_classCallCheck","this","File","FileList","FileReader","defualtOpt","inputEl","wrapperEl","parentElement","dragAreaEl","dropTipEl","showEl","delEl","selectedClass","dragClass","dropReadyClass","imgLoadingClass","on","eventOpt","msg","buildAlert","_len","arguments","length","args","Array","_key","opt","_objectSpread","params","alert","alertMsg","lang","init","_createClass","key","value","_this","rule","inputCheckRule","inputChange","bind","inputClone","inputClean","XMLHttpRequest","upload","fileDragHoverWindow","paste","push","fileDrop","dispatchEvent","CustomEvent","_typeof","el","input","inputOpt","size","accept","dataset","getAttribute","exponent","match","parseFloat","Math","pow","sizeText","replace","e","target","files","dataTransfer","clipboardData","type","id","cloneInput","parentNode","replaceChild","undefined","isError","forEach","call","file","i","indexOf","acceptFiles","split","acceptType","alertText","toUpperCase","parseImg","Event","event","fileElement","cloneNode","innerHTML","classList","remove","add","reader","onload","resultUrl","result","img","createElement","src","appendChild","readAsDataURL","stopPropagation","preventDefault","evt","dt","types","isFile","item","disabled","func","option","addEventListener","attachEvent","text","bgColor","setAttribute","concat","style","createTextNode","setTimeout","removeChild","body","fileDrops","querySelectorAll","index","querySelector","toast"],"mappings":"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","file":"../file-drag-drop.min.js","sourcesContent":["/* File Drag Drop - 檔案拖曳 v1.0.0\r\n * Copyright © 2022 Reginna(https://github.com/reginna-chao)\r\n * MIT License\r\n */\r\n\r\n(function(window, document) {\r\n\r\n\tlet windowIsDetected = false; // 是否有監測 windows\r\n\tlet lastTarget = null;\r\n\r\n\tconst clone = {}; // 複製Input快取，避免按上傳後取消\r\n\r\n\tconst dropFileBox = []; // 紀錄 Dropbox 物件\r\n\r\n\t// 預設錯誤訊息(EN)\r\n\tconst defaultMsg = {\r\n\t\tmultiple: 'Oops, you dragged more than one file!<br>Please only drag your desired file.',\r\n\t\ttypeImg: 'IMAGE',\r\n\t\ttypeComma: ', ',\r\n\t\ttypeOr: ' or ',\r\n\t\ttypeTextBefore: 'Make sure to upload a ',\r\n\t\ttypeTextAfter: ' file.<br>please try again!',\r\n\t\tsizeBefore: 'Sorry, your attachment for proof of purchase is larger than ',\r\n\t\tsizeAfter: ', <br>please try again!'\r\n\t}\r\n\r\n\t// TW\r\n\t// const msgTw = {\r\n\t// \tmultiple: '您同時拖曳多個檔案，只能選取一個檔案。',\r\n\t// \ttypeImg: '圖片',\r\n\t// \ttypeComma: '、',\r\n\t// \ttypeOr: '或',\r\n\t// \ttypeTextBefore: '請上傳',\r\n\t// \ttypeTextAfter: '檔案。',\r\n\t// \tsizeBefore: '您上傳的檔案過大，請上傳',\r\n\t// \tsizeAfter: '以下'\r\n\t// }\r\n\r\n\t/* ---------------------------------------- [START] DropFile Class */\r\n\tclass FileDrop {\r\n\t\tconstructor (selector, ...args) {\r\n\t\t\t// 避免不支援狀況\r\n\t\t\tif (!(window.File && window.FileList && window.FileReader)) {\r\n\t\t\t\treturn false;\r\n\t\t\t}\r\n\r\n\t\t\t// 預設變數\r\n\t\t\tconst defualtOpt = {\r\n\t\t\t\tinputEl: selector, // Input\r\n\t\t\t\twrapperEl: selector.parentElement, // 外層\r\n\t\t\t\tdragAreaEl: selector.parentElement, // 可拖曳放置的區域\r\n\t\t\t\tdropTipEl: null, // 拖曳的提醒物件\r\n\t\t\t\tshowEl: selector.parentElement, // 顯示圖片區域\r\n\t\t\t\tdelEl: null, // 刪除按鈕\r\n\t\t\t\tselectedClass: 'is-selected',\r\n\t\t\t\tdragClass: 'is-drag',\r\n\t\t\t\tdropReadyClass: 'is-drop-ready',\r\n\t\t\t\timgLoadingClass: 'is-img-loading',\r\n\t\t\t\ton: {}\r\n\t\t\t}\r\n\r\n\t\t\t// 預設變數 - 事件\r\n\t\t\tconst eventOpt = {\r\n\t\t\t\tmsg: buildAlert\r\n\t\t\t}\r\n\r\n\t\t\t// 合併變數\r\n\t\t\tconst opt = {\r\n\t\t\t\t...defualtOpt,\r\n\t\t\t\t...args[0]\r\n\t\t\t}\r\n\r\n\t\t\t// 合併事件\r\n\t\t\tif (args[0].on) {\r\n\t\t\t\topt.on = {\r\n\t\t\t\t\t...eventOpt,\r\n\t\t\t\t\t...args[0].on\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\topt.on = eventOpt\r\n\t\t\t}\r\n\r\n\t\t\tthis.params = opt;\r\n\r\n\t\t\t// 警告相關\r\n\t\t\tthis.alert = opt.on.msg;\r\n\t\t\tthis.alertMsg = defaultMsg;\r\n\r\n\t\t\t// 開放設置語系\r\n\t\t\tthis.lang = this.lang;\r\n\r\n\t\t\tthis.init();\r\n\t\t}\r\n\r\n\t\tinit () {\r\n\t\t\tconst _this = this;\r\n\t\t\tconst params = _this.params;\r\n\r\n\t\t\tthis.rule = _this.inputCheckRule(params.inputEl);\r\n\r\n\t\t\t// Input物件\r\n\t\t\ton(params.inputEl, 'change', _this.inputChange.bind(_this), false);\r\n\t\t\ton(params.inputEl, 'click', _this.inputClone, false);\r\n\r\n\t\t\t// 刪除物件\r\n\t\t\tif (params.delEl) {\r\n\t\t\t\ton(params.delEl, 'click', _this.inputClean.bind(_this), false);\r\n\t\t\t}\r\n\r\n\t\t\t// Drag & Drop\r\n\t\t\tconst xhr = new XMLHttpRequest();\r\n\t\t\tif (xhr.upload) {\r\n\t\t\t\t// on(params.dragAreaEl, 'dragover', _this.fileDragHover.bind(_this), false);\r\n\t\t\t\t// on(params.dragAreaEl, 'dragleave', _this.fileDragHover.bind(_this), false);\r\n\t\t\t\ton(params.dragAreaEl, 'drop', _this.inputChange.bind(_this), false);\r\n\r\n\t\t\t\tif (!windowIsDetected) {\r\n\t\t\t\t\twindowIsDetected = true;\r\n\r\n\t\t\t\t\ton(window, 'dragover', _this.fileDragHoverWindow.bind(_this), false);\r\n\t\t\t\t\ton(window, 'dragenter', _this.fileDragHoverWindow.bind(_this), false);\r\n\t\t\t\t\ton(window, 'dragleave', _this.fileDragHoverWindow.bind(_this), false);\r\n\t\t\t\t\ton(window, 'drop', _this.fileDragHoverWindow.bind(_this), false);\r\n\r\n\t\t\t\t\t// 貼上 (需要 windowIsDetected 變數，所以寫這)\r\n\t\t\t\t\ton(window, 'paste', _this.paste.bind(_this), false);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\tdropFileBox.push(_this); // 紀錄物件(window 監聽會需要)\r\n\r\n\t\t\t// FINAL: 記錄在物件上 & 觸發 init\r\n\t\t\tparams.inputEl.fileDrop = _this;\r\n\t\t\tparams.inputEl.dispatchEvent(new CustomEvent('fileDrop:init'));\r\n\t\t}\r\n\r\n\t\tlang (lang) {\r\n\t\t\tif (typeof lang === 'object') {\r\n\t\t\t\tthis.alertMsg = {\r\n\t\t\t\t\t...lang\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tinputCheckRule (el) {\r\n\t\t\tconst input = el;\r\n\t\t\tconst inputOpt = {\r\n\t\t\t\tsize: null, // 檔案限制大小，預設為無限制 (寫於data-size)\r\n\t\t\t\taccept: null // 接受的檔案類型，預設為無限制(寫於<input type=\"file\"> accept)\r\n\t\t\t}\r\n\t\t\t\r\n\t\t\t// 檔案大小 | Size\r\n\t\t\tconst size = input.dataset['size'] || input.getAttribute('data-size');\r\n\t\t\tif (size) {\r\n\t\t\t\tconst exponent = size.match(/KB/gi)\r\n\t\t\t\t\t? 1\r\n\t\t\t\t\t: size.match(/MB/gi)\r\n\t\t\t\t\t\t? 2\r\n\t\t\t\t\t\t: size.match(/GB/gi)\r\n\t\t\t\t\t\t\t? 3\r\n\t\t\t\t\t\t\t: 0;\r\n\r\n\t\t\t\tinputOpt.size = parseFloat(size) * Math.pow(1024, exponent);\r\n\t\t\t\tinputOpt.sizeText = size;\r\n\t\t\t}\r\n\r\n\t\t\t// 接受檔案類型 | Accept\r\n\t\t\tconst accept = input.accept || input.getAttribute('accept');\r\n\t\t\tif (accept) {\r\n\t\t\t\tinputOpt.accept = accept.replace(/\\*/g, '');\r\n\t\t\t}\r\n\r\n\t\t\tel.opt = inputOpt;\r\n\r\n\t\t\treturn inputOpt;\r\n\t\t}\r\n\r\n\t\tinputChange (e) {\r\n\t\t\tconst _this =  this;\r\n\t\t\tconst params =  _this.params;\r\n\t\t\tconst alertMsg = _this.alertMsg;\r\n\t\t\tconst rule = _this.rule;\r\n\r\n\t\t\tconst target = e.target;\r\n\r\n\t\t\t// Change || Drop || Paste\r\n\t\t\tconst files = target.files || (e.dataTransfer ? e.dataTransfer.files : null) || e.clipboardData.files;\r\n\r\n\t\t\t// 移除 Drag Drop 提示\r\n\t\t\tif(e.type === 'drop'){\r\n\t\t\t\t_this.fileDragHoverWindow(e);\r\n\t\t\t}\r\n\r\n\t\t\tif (files.length === 0) {\r\n\t\t\t\t// 如果沒有檔案 (按取消)\r\n\t\t\t\tif(e.type === 'change' && clone[target.id] !== null){\r\n\t\t\t\t\t// Clone有值 => 複製原本的\r\n\t\t\t\t\tvar cloneInput = clone[target.id];\r\n\r\n\t\t\t\t\t// 複製事件\r\n\t\t\t\t\ton(cloneInput, 'change', _this.inputChange.bind(_this), false);\r\n\t\t\t\t\ton(cloneInput, 'click', _this.inputClone, false);\r\n\t\t\t\t\ttarget.parentNode.replaceChild(cloneInput, target);\r\n\r\n\t\t\t\t\tparams.inputEl = cloneInput; // 更新項目\r\n\t\t\t\t}\r\n\r\n\t\t\t\treturn false;\r\n\t\t\t}\r\n\r\n\t\t\t// 檢測：單複數檔案\r\n\t\t\tif (!(target.multiple || target.getAttribute('multiple') === undefined) && files.length > 1) {\r\n\t\t\t\t// 如果是單數，但得到複數檔案\r\n\t\t\t\t// 錯誤訊息：「您同時拖曳多個檔案，只能選取一張相片。」\r\n\t\t\t\t_this.alert('error', alertMsg.multiple);\r\n\t\t\t\treturn false;\r\n\t\t\t}\r\n\r\n\t\t\tlet isError = false;\r\n\r\n\t\t\t[].forEach.call(files, (file, i) => {\r\n\t\t\t\t// 檢測：檔案類型不符\r\n\t\t\t\t// 拖入非指定檔為 -1\r\n\t\t\t\t// 拖入資料夾、特殊檔為 0\r\n\t\t\t\tif ( file.type === '' || ( rule.accept.indexOf(file.type) === -1 && file.type.indexOf(rule.accept) === -1 ) ) {\r\n\t\t\t\t\tconst acceptFiles = rule.accept.replace(/\\s+/g, \"\").split(',');\r\n\t\t\t\t\tconst acceptType = [];\r\n\t\t\t\t\tlet alertText = \"\";\r\n\r\n\t\t\t\t\tfor(let i = 0; i < acceptFiles.length; i++){\r\n\t\t\t\t\t\tif(acceptFiles[i] === 'image/'){\r\n\t\t\t\t\t\t\tacceptType.push(alertMsg.typeImg);\r\n\t\t\t\t\t\t\tbreak;\r\n\t\t\t\t\t\t}else if(acceptFiles[i] === 'image/jpeg'){\r\n\t\t\t\t\t\t\tacceptType.push('JPG');\r\n\t\t\t\t\t\t\tacceptType.push('JPEG');\r\n\t\t\t\t\t\t}else if(acceptFiles[i] === 'image/tiff'){\r\n\t\t\t\t\t\t\tacceptType.push('TIF');\r\n\t\t\t\t\t\t}else{\r\n\t\t\t\t\t\t\tacceptType.push(acceptFiles[i].split('/')[1].toUpperCase());\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tfor (let i = 0; i < acceptType.length; i++) {\r\n\t\t\t\t\t\talertText = alertText + acceptType[i];\r\n\r\n\t\t\t\t\t\tif(acceptType.length > 1){\r\n\t\t\t\t\t\t\tif(i < acceptType.length - 2){\r\n\t\t\t\t\t\t\t\talertText = alertText + alertMsg.typeComma\r\n\t\t\t\t\t\t\t}else if(i == acceptType.length - 2){\r\n\t\t\t\t\t\t\t\talertText = alertText + alertMsg.typeOr\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t// 錯誤訊息：「請上傳JPG或PNG檔案。」\r\n\t\t\t\t\talertText = alertMsg.typeTextBefore + alertText + alertMsg.typeTextAfter;\r\n\r\n\t\t\t\t\t_this.alert('error', alertText);\r\n\t\t\t\t\t_this.inputClean();\r\n\t\t\t\t\t\r\n\t\t\t\t\tisError = true;\r\n\t\t\t\t\treturn;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// 檢測：檔案大小\r\n\t\t\t\tif (rule.size != null && files[0].size > rule.size) {\r\n\t\t\t\t\t// 錯誤訊息：「您上傳的檔案過大，請上傳3MB以下。」\r\n\t\t\t\t\tconst alertText = alertMsg.sizeBefore + rule.sizeText + alertMsg.sizeAfter;\r\n\r\n\t\t\t\t\t_this.alert('error', alertText);\r\n\t\t\t\t\t_this.inputClean();\r\n\r\n\t\t\t\t\tisError = true;\r\n\t\t\t\t\treturn;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t_this.parseImg(file);\r\n\t\t\t});\r\n\r\n\t\t\tif (isError) {\r\n\t\t\t\treturn false;\r\n\t\t\t}\r\n\r\n\t\t\t// 拖曳時同步input FileList（只有Drop事件）\r\n\t\t\t// Reference: https://stackoverflow.com/a/47522812\r\n\t\t\tif(e.type ==='drop' || e.type ==='paste'){\r\n\t\t\t\tparams.inputEl.files = files;\r\n\t\t\t\tparams.inputEl.dispatchEvent(new Event('change'));\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// 複製Input (避免點擊取消 → 檔案被移除)\r\n\t\t// https://jsfiddle.net/mgpwr1as\r\n\t\tinputClone (event) {\r\n\t\t\tconst fileElement = event.target;\r\n\t\t\tif (fileElement.value !== '') {\r\n\t\t\t\tclone[fileElement.id] = fileElement.cloneNode(true); // Copying clone\r\n\t\t\t} else {\r\n\t\t\t\t// 沒值則清除\r\n\t\t\t\tclone[fileElement.id] = null\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// 清除input\r\n\t\tinputClean () {\r\n\t\t\tconst params = this.params;\r\n\r\n\t\t\tparams.inputEl.value = '';\r\n\t\t\tparams.showEl.innerHTML = '';\r\n\t\t\tparams.wrapperEl.classList.remove(params.selectedClass);\r\n\t\t}\r\n\r\n\t\t// Show Image\r\n\t\tparseImg (file) {\r\n\t\t\tconst params = this.params;\r\n\r\n\t\t\t// Is selected status\r\n\t\t\tparams.wrapperEl.classList.add(params.selectedClass);\r\n\t\t\tparams.showEl.classList.add(params.imgLoadingClass);\r\n\t\t\t\t\t\t\r\n\t\t\t// Read File\r\n\t\t\tconst reader = new FileReader();\r\n\t\t\treader.onload = (e) => {\r\n\t\t\t\tvar resultUrl = e.target.result;\r\n\r\n\t\t\t\tvar img = document.createElement('img');\r\n\t\t\t\timg.onload = function() {\r\n\t\t\t\t\tparams.showEl.classList.remove(params.imgLoadingClass);\r\n\t\t\t\t}\r\n\t\t\t\timg.src = resultUrl;\r\n\r\n\t\t\t\tparams.showEl.innerHTML = '';\r\n\t\t\t\tparams.showEl.appendChild(img);\r\n\t\t\t}\r\n\t\t\treader.readAsDataURL(file);\r\n\t\t}\r\n\r\n\t\t// fileDragHover (e) {\r\n\t\t// \tconsole.log('fileDragHover', e.type);\r\n\t\t// \te.stopPropagation();\r\n\t\t// \te.preventDefault();\r\n\r\n\t\t// \tif (e.type === 'dragover') {\r\n\t\t// \t\tthis.params.wrapperEl.classList.add(this.params.dropReadyClass);\r\n\r\n\t\t// \t\tthis.params.dropTipEl\r\n\t\t// \t} else {\r\n\t\t// \t\tthis.params.wrapperEl.classList.remove(this.params.dropReadyClass);\r\n\t\t// \t}\r\n\t\t// }\r\n\r\n\t\tfileDragHoverWindow (e) {\r\n\t\t\te.stopPropagation();\r\n\t\t\te.preventDefault();\r\n\r\n\t\t\tif (!isFile(e)) {\r\n\t\t\t\treturn false\r\n\t\t\t}\r\n\r\n\t\t\tif (e.type == 'dragover') {\r\n\t\t\t\treturn false\r\n\t\t\t}\r\n\r\n\t\t\tconst _this = this;\r\n\r\n\t\t\t// dragenter\r\n\t\t\tif (e.type == 'dragenter') {\r\n\t\t\t\tlastTarget = e.target;\r\n\r\n\t\t\t\tdropFileBox.forEach((item) => {\r\n\t\t\t\t\tif (item.params.inputEl.disabled) {\r\n\t\t\t\t\t\treturn\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t// 增加class，提示可以拖曳放置的區塊\r\n\t\t\t\t\titem.params.wrapperEl.classList.add(_this.params.dragClass);\r\n\t\t\t\t\t\r\n\t\t\t\t\t// 判斷是否在範圍內 => 增加「可放置」區塊\r\n\t\t\t\t\tif (lastTarget === item.params.dragAreaEl) {\r\n\t\t\t\t\t\titem.params.wrapperEl.classList.add(_this.params.dropReadyClass);\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\titem.params.wrapperEl.classList.remove(_this.params.dropReadyClass);\r\n\t\t\t\t\t}\r\n\t\t\t\t});\r\n\r\n\t\t\t\treturn false;\r\n\t\t\t}\r\n\r\n\t\t\t// dragleave\r\n\t\t\tif (e.target === document || e.target === lastTarget) {\r\n\t\t\t\tdropFileBox.forEach((item) => {\r\n\t\t\t\t\titem.params.wrapperEl.classList.remove(_this.params.dragClass);\r\n\t\t\t\t\titem.params.wrapperEl.classList.remove(_this.params.dropReadyClass);\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tpaste (e) {\r\n\t\t\t// https://www.telerik.com/kendo-react-ui/knowledge-base/upload-paste-image-from-clipboard/\r\n\t\t\t// 有檔案\r\n\t\t\tif (e.clipboardData.files.length === 1) {\r\n\t\t\t\tconst file = e.clipboardData.files[0];\r\n\r\n\t\t\t\t// 直接擋下非圖片、非符合資格檔案\r\n\t\t\t\tif (file.type !== '' && (this.rule.accept.indexOf(file.type) === 0 || file.type.indexOf(this.rule.accept) === 0)) {\r\n\t\t\t\t\tthis.inputChange(e);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\twindow.FileDrop = FileDrop;\r\n\t/* ---------------------------------------- [END] DropFile Class */\r\n\r\n\t\r\n\r\n\t/* ---------------------------------------- [START] Tool */\r\n\t/* ---------------------------------------- [START] Window EventListener */\r\n\tfunction on(target, event, func, option) {\r\n\t\ttarget = target || window;\r\n\t\tif (window.addEventListener) {\r\n\t\t\tvar opt = option || false;\r\n\t\t\ttarget.addEventListener(event, func, opt);\r\n\t\t} else {\r\n\t\t\ttarget.attachEvent('on' + event, func);\r\n\t\t}\r\n\t};\r\n\r\n\tfunction off(target, event, func) {\r\n\t\ttarget = target || window;\r\n\t\tif (window.addEventListener) target.removeEventListener(event, func, false);\r\n\t\telse target.detachEvent('on' + event, func);\r\n\t};\r\n\t/* ---------------------------------------- [END] Window EventListener */\r\n\t/* ---------------------------------------- [START] Is File */\r\n\t// 確認是否是檔案\r\n\tfunction isFile(evt) {\r\n\t\tvar dt = evt.dataTransfer;\r\n\t\tfor (var i = 0; i < dt.types.length; i++) {\r\n\t\t\tif (dt.types[i] === \"Files\") {\r\n\t\t\t\treturn true;\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn false;\r\n\t}\r\n\t/* ---------------------------------------- [END] Is File */\r\n\t/* ---------------------------------------- [START] Alert */\r\n\t// 顯示警告視窗\r\n\t// Reference: https://stackoverflow.com/a/15466856\r\n\tfunction buildAlert(type, text){\r\n\t\tconst el = document.createElement('div');\r\n\t\tconst bgColor = type === 'error'\r\n\t\t\t? 'rgba(232, 28, 41, 0.9)'\r\n\t\t\t: type === 'success'\r\n\t\t\t\t? 'rgba(157, 201, 58, 0.9)'\r\n\t\t\t\t: 'rgba(0, 0, 0, 0.9)';\r\n\t\t\r\n\t\tel.setAttribute('style', `position: fixed; z-index: 1000; top: 50%; left: 50%; padding: 0.5rem 1rem; font-size: 1rem; color: #fff; background: ${bgColor}; border-radius: 0.3125rem; box-shadow: 0 0 0.3125rem rgba(0,0,0,0.3); transform: translate(-50%, -50%); animation: showAlert 3s forwards;`)\r\n\t\tel.classList.add('alert-msg');\r\n\t\tel.innerHTML = text;\r\n\r\n\t\tconst style = document.createElement('style');\r\n\t\tconst css = '@keyframes showAlert { 0% { opacity: 0; top: 40%; } 25%, 75% { opacity: 1; top: 50%; } 100% { opacity: 0; top: 40%; } }';\r\n\t\tel.appendChild(style);\r\n\t\tstyle.appendChild(document.createTextNode(css));\r\n\r\n\t\tsetTimeout(function(){\r\n\t\t\tel.parentNode.removeChild(el);\r\n\t\t}, 5000);\r\n\t\tdocument.body.appendChild(el);\r\n\t}\r\n\t/* ---------------------------------------- [END] Alert */\r\n\t/* ---------------------------------------- [END] Tool */\r\n\r\n\t/* ---------------------------------------- [START] Build */\r\n\tfunction buildFileDrop() {\r\n\t\tconst fileDrops = document.querySelectorAll('.js-drop-file');\r\n\t\tif (fileDrops.length) {\r\n\t\t\tfileDrops.forEach((item, index) => {\r\n\t\t\t\tconst input = item.querySelector('input[type=\"file\"]');\r\n\r\n\t\t\t\tconst fd = new FileDrop(input, {\r\n\t\t\t\t\twrapperEl: item,\r\n\t\t\t\t\t// dragAreaEl: item.parentElement,\r\n\t\t\t\t\tdragAreaEl: item,\r\n\t\t\t\t\tdropTipEl: item.querySelector('[data-drop-tip]'),\r\n\t\t\t\t\tshowEl: item.querySelector('[data-img-preview]'),\r\n\t\t\t\t\tdelEl: item.querySelector('[data-del]'),\r\n\t\t\t\t\ton: {\r\n\t\t\t\t\t\tmsg (type, msg) {\r\n\t\t\t\t\t\t\ttoast(type === 'error' ? type : 'info', msg, 5000);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t});\r\n\t\t\t});\r\n\t\t}\r\n\t}\r\n\r\n\ton(window, 'load', buildFileDrop);\r\n\t/* ---------------------------------------- [END] Build */\r\n})(window, document);\r\n"],"sourceRoot":"../../src/"}