vicowa-web-components/dist/vicowa-uploader/vicowa-uploader.js

Various web components

import{WebComponentBaseClass as t}from"/third_party/web-component-base-class/dist/web-component-base-class.js";window.customElements.define("vicowa-uploader",class VicowaUploader extends t{constructor(){super()}static get properties(){return{multiple:{type:Boolean,value:!1,reflectToAttribute:!0,observer:t=>t.#t()},dropArea:{type:Boolean,value:!1,reflectToAttribute:!0},accept:{type:String,value:"",reflectToAttribute:!0,observer:t=>t.#e()},manualUpload:{type:Boolean,value:!1,reflectToAttribute:!0},target:{type:String,value:"",reflectToAttribute:!0},imagePreview:{type:Boolean,value:!1,reflectToAttribute:!0},progress:{type:Boolean,value:!1,reflectToAttribute:!0}}}attached(){this.addAutoEventListener(this.$.file,"change",(()=>{this.#n(Array.from(this.$.file.files))}));const t=t=>{t.preventDefault(),t.stopPropagation(),this.$.container.classList.add("drop-focus")},e=t=>{t.preventDefault(),t.stopPropagation(),this.$.container.classList.remove("drop-focus")};this.addAutoEventListener(this.$.container,"dragover",t),this.addAutoEventListener(this.$.container,"dragenter",t),this.addAutoEventListener(this.$.container,"dragleave",e),this.addAutoEventListener(this.$.container,"dragend",e),this.addAutoEventListener(this.$.container,"drop",(t=>{e(t),this.#n(Array.from(t.dataTransfer.files))})),this.addAutoEventListener(this.$.upload,"click",(()=>{this.#i(this.files)})),this.addAutoEventListener(this.$.more,"click",(()=>{this.$.container.classList.remove("success")})),this.addAutoEventListener(this.$.retry,"click",(()=>{this.$.container.classList.remove("error"),this.#i(this.files)}))}#t(){this.multiple?this.$.file.setAttribute("multiple",""):this.$.file.removeAttribute("multiple")}#e(){this.accept?this.$.file.setAttribute("accept",this.accept):this.$.file.removeAttribute("accept")}#o(t){const e=new FileReader;e.readAsDataURL(t),e.onloadend=()=>{const n=document.createElement("img");n.src=e.result,n.setAttribute("name",t.name),this.$.todo.appendChild(n)}}#s(t){const e=this.$.todo.querySelector(`[name=${t.name}]`);this.$.done.appendChild(e)}async#i(t){this.$.container.classList.add("upload-active"),this.imagePreview&&t.forEach((t=>{this.#o(t)}));const e=[];try{this.$.progress.max=t.length,this.$.progress.value=0,await Promise.all(t.map(((n,i)=>{const o=new FormData;return o.append("file",n),new Promise(((s,a)=>{this.uploadHandler?this.uploadHandler(n,(t=>{this.imagePreview&&this.#s(n),this.$.progress.value++,e.push(n),s(t)}),(t=>{a(t)}),t.length,i):fetch(this.target,{method:"POST",body:o}).then((t=>{if(!t.ok)throw t;this.imagePreview&&this.#s(n),this.$.progress.value++,e.push(n),s(t)})).catch(a)}))}))),this.$.container.classList.remove("has-files"),this.$.container.classList.remove("upload-active"),this.$.container.classList.add("success"),this.onSuccess&&this.onSuccess(e.map((t=>t.name)))}catch(n){e.forEach((e=>{const n=t.indexOf(e);-1!==n&&t.splice(n,1)})),this.$.container.classList.remove("has-files"),this.$.container.classList.remove("upload-active"),this.$.container.classList.add("error"),this.onError&&this.onError(n,e.map((t=>t.name)))}}#n(t){t.length&&(this.$.container.classList.add("has-files"),this.files=t,this.manualUpload?1===t.length?(this.$.uploadText.string="Upload %1s",this.$.uploadText.parameters=[t[0].name]):(this.$.uploadText.string="Upload %1d files",this.$.uploadText.parameters=[t.length]):this.#i(t))}static get template(){return'\n\t\t\t<style>\n\t\t\t\t:host {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\n\t\t\t\t#container {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-direction: column;\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t\talign-items: center;\n\t\t\t\t}\n\t\t\n\t\t\t\t#container,\n\t\t\t\t.styled-area {\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t}\n\t\t\n\t\t\t\t#file {\n\t\t\t\t\topacity: 0;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\twidth: 1px;\n\t\t\t\t\theight: 1px;\n\t\t\t\t}\n\t\t\n\t\t\t\t#file:focus + .choose {\n\t\t\n\t\t\t\t}\n\t\t\n\t\t\t\tlabel {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t}\n\t\t\n\t\t\t\t.choose {\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tfont-weight: bold;\n\t\t\t\t}\n\t\t\n\t\t\t\t.uploading,\n\t\t\t\t.success,\n\t\t\t\t.error {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t\tpadding: 10px;\n\t\t\t\t}\n\t\t\n\t\t\t\tslot[name="drop-area"] {\n\t\t\t\t}\n\t\t\n\t\t\t\t.drop-text {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\n\t\t\t\t.styled-area vicowa-icon {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t\twidth: 30%;\n\t\t\t\t\theight: 30%;\n\t\t\t\t\tmax-height: 48px;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([drop-area]) .drop-text {\n\t\t\t\t\tdisplay: inline;\n\t\t\t\t}\n\t\t\t\t:host([drop-area]) vicowa-icon {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t}\n\t\t\n\t\t\t\t#upload {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\n\t\t\t\t.has-files label,\n\t\t\t\t.error label,\n\t\t\t\t.success label {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([manual-upload]) .has-files #upload {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t}\n\t\t\n\t\t\t\t#upload {\n\t\t\t\t\tmargin: 1em;\n\t\t\t\t\twhite-space: nowrap;\n\t\t\t\t\twidth: calc(100% - 2em);\n\t\t\t\t}\n\t\t\n\t\t\t\t#upload vicowa-string {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\t}\n\t\t\n\t\t\t\t#upload vicowa-icon {\n\t\t\t\t\twidth: 30px;\n\t\t\t\t\theight: 30px;\n\t\t\t\t\tmargin-right: 1em;\n\t\t\t\t}\n\t\t\n\t\t\t\t.styled-area {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-direction: column;\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcolor: var(--vicowa-uploader-color, #aaf);\n\t\t\t\t\t--vicowa-icon-line-color: var(--vicowa-uploader-color, #aaf);\n\t\t\t\t\tpadding: 10px;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([drop-area]) .styled-area {\n\t\t\t\t\toutline: var(--vicowa-uploader-drop-outline, 2px dashed #aaf);\n\t\t\t\t\toutline-offset: -10px;\n\t\t\t\t}\n\t\t\t\t:host([drop-area]) .drop-focus .styled-area {\n\t\t\t\t\toutline-offset: -5px;\n\t\t\t\t}\n\t\t\n\t\t\t\t.gallery img {\n\t\t\t\t\tmax-width: 50%;\n\t\t\t\t\tmax-height: 50%;\n\t\t\t\t}\n\t\t\n\t\t\t\t.upload-active .uploading {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t}\n\t\t\n\t\t\t\t#container.error .error {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t}\n\t\t\n\t\t\t\t#container.success .success {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t}\n\t\t\n\t\t\t\tprogress {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([progress]) progress {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t}\n\t\t\t</style>\n\t\t<vicowa-web-components-icons></vicowa-web-components-icons>\n\t\t<div id="container">\n\t\t\t<input type="file" id="file">\n\t\t\t<label for="file">\n\t\t\t\t<slot name="drop-area">\n\t\t\t\t\t<div class="styled-area">\n\t\t\t\t\t\t<vicowa-icon icon="vicowa:drop"></vicowa-icon>\n\t\t\t\t\t\t<vicowa-string class="choose">Select a file...</vicowa-string><vicowa-string class="drop-text"> or drop files here</vicowa-string>\n\t\t\t\t\t</div>\n\t\t\t\t</slot>\n\t\t\t</label>\n\t\t\t<vicowa-button id="upload"><vicowa-icon icon="vicowa:upload" slot="custom-content"></vicowa-icon><vicowa-string id="upload-text" slot="custom-content">Upload</vicowa-string><slot name="upload-button"></slot></vicowa-button>\n\t\t\t<div class="gallery"><div id="done"></div><div id="todo"></div></div>\n\t\t\t\t<div class="uploading">\n\t\t\t\t\t<vicowa-string>Uploading...</vicowa-string>\n\t\t\t\t\t<progress id="progress"></progress>\n\t\t\t\t</div>\n\t\t\t\t<div class="success"><vicowa-string>Upload successful</vicowa-string><vicowa-string id="more" class="choose">Upload more</vicowa-string></div>\n\t\t\t\t<div class="error"><vicowa-string>Upload failed</vicowa-string><vicowa-string id="retry" class="choose">Retry</vicowa-string></div>\n\t\t\t</div>\n\t\t'}});
//# sourceMappingURL=vicowa-uploader.js.map