@kitschpatrol/tweakpane-plugin-file-import/dist/tweakpane-plugin-file-import.min.js

A fork of tweakpane-plugin-file-import with build optimizations.

import{ClassName as e,createPlugin as t,CompositeConstraint as i,parseRecord as n}from"@tweakpane/core";const a=e("ctn"),o=e("input"),s=e("btn");class r{constructor(e,t){this.element=e.createElement("div"),this.container=e.createElement("div"),this.container.classList.add(a()),t.viewProps.bindClassModifiers(this.container),this.input=e.createElement("input"),this.input.classList.add(o()),this.input.setAttribute("type","file"),this.input.setAttribute("accept",t.filetypes?t.filetypes.join(","):"*"),this.input.style.height=`calc(20px * ${t.lineCount})`,this.fileIcon=e.createElement("div"),this.fileIcon.classList.add(a("icon")),this.text=e.createElement("span"),this.text.classList.add(a("text")),this.warning=e.createElement("span"),this.warning.classList.add(a("warning")),this.warning.innerHTML=t.invalidFiletypeMessage,this.warning.style.display="none",this.deleteButton=e.createElement("button"),this.deleteButton.classList.add(s("b")),this.deleteButton.innerHTML="Delete",this.deleteButton.style.display="none",this.container.appendChild(this.input),this.container.appendChild(this.fileIcon),this.element.appendChild(this.container),this.element.appendChild(this.warning),this.element.appendChild(this.deleteButton)}changeDraggingState(e){var t,i;e?null===(t=this.container)||void 0===t||t.classList.add(a("input_area_dragging")):null===(i=this.container)||void 0===i||i.classList.remove(a("input_area_dragging"))}}class l{constructor(e,t){this.value=t.value,this.viewProps=t.viewProps,this.view=new r(e,{viewProps:this.viewProps,value:t.value,invalidFiletypeMessage:t.invalidFiletypeMessage,lineCount:t.lineCount,filetypes:t.filetypes}),this.config=t,this.onFile=this.onFile.bind(this),this.onDrop=this.onDrop.bind(this),this.onDragOver=this.onDragOver.bind(this),this.onDragLeave=this.onDragLeave.bind(this),this.onDeleteClick=this.onDeleteClick.bind(this),this.view.input.addEventListener("change",this.onFile),this.view.element.addEventListener("drop",this.onDrop),this.view.element.addEventListener("dragover",this.onDragOver),this.view.element.addEventListener("dragleave",this.onDragLeave),this.view.deleteButton.addEventListener("click",this.onDeleteClick),this.value.emitter.on("change",(()=>this.handleValueChange())),this.viewProps.handleDispose((()=>{this.view.input.removeEventListener("change",this.onFile),this.view.element.removeEventListener("drop",this.onDrop),this.view.element.removeEventListener("dragover",this.onDragOver),this.view.element.removeEventListener("dragleave",this.onDragLeave),this.view.deleteButton.removeEventListener("click",this.onDeleteClick)}))}onFile(e){const t=this.view.input;if(t.files&&t.files.length>0){const e=t.files[0];this.isFileValid(e)?this.value.setRawValue(e):this.showWarning()}}showWarning(){this.view.warning.style.display="block",setTimeout((()=>{this.view.warning.style.display="none"}),5e3)}isFileValid(e){var t;const i=this.config.filetypes,n="."+(null===(t=e.name.split(".").pop())||void 0===t?void 0:t.toLowerCase());return!(i&&i.length>0&&!i.includes(n)&&n)}onDeleteClick(){this.value.rawValue&&(this.value.setRawValue(null),this.view.input.value="",this.view.warning.style.display="none")}onDragOver(e){e.preventDefault(),this.view.changeDraggingState(!0)}onDragLeave(){this.view.changeDraggingState(!1)}onDrop(e){if(e instanceof DragEvent&&(e.preventDefault(),e.dataTransfer&&e.dataTransfer.files)){const t=e.dataTransfer.files;if(1==t.length){const e=t.item(0);e&&(this.isFileValid(e)?this.value.setRawValue(e):this.showWarning())}}this.view.changeDraggingState(!1)}handleValueChange(){const e=this.value.rawValue,t=this.view.container,i=this.view.text,n=this.view.fileIcon,a=this.view.deleteButton;e?(i.textContent=e.name,t.appendChild(i),t.contains(n)&&t.removeChild(n),this.view.warning.style.display="none",a.style.display="block",t.style.border="unset"):(i.textContent="",t.appendChild(n),t.removeChild(i),this.view.warning.style.display="none",a.style.display="none",t.style.border="1px dashed #717070")}}const h="file-input",p='.tp-ctnv{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:rgba(0,0,0,0);border-width:0;font-family:inherit;font-size:inherit;font-weight:inherit;margin:0;outline:none;padding:0}.tp-ctnv{background-color:var(--in-bg);border-radius:var(--bld-br);box-sizing:border-box;color:var(--in-fg);font-family:inherit;height:var(--cnt-usz);line-height:var(--cnt-usz);min-width:0;width:100%}.tp-ctnv:hover{background-color:var(--in-bg-h)}.tp-ctnv:focus{background-color:var(--in-bg-f)}.tp-ctnv:active{background-color:var(--in-bg-a)}.tp-ctnv:disabled{opacity:.5}.tp-ctnv{cursor:pointer;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;height:100%;width:100%;border:1px dashed #717070;border-radius:5px}.tp-ctnv.tp-v-disabled{opacity:.5}.tp-ctnv_input_area_dragging{border:1px dashed #6774ff;background-color:rgba(88,88,185,.231372549)}.tp-ctnv_warning{color:var(--in-fg);bottom:2px;display:inline-block;font-size:.9em;height:-moz-max-content;height:max-content;line-height:1.5;opacity:.5;white-space:normal;width:-moz-max-content;width:max-content;word-wrap:break-word;text-align:right;width:100%;margin-top:var(--cnt-vp)}.tp-ctnv_text{color:var(--in-fg);bottom:2px;display:inline-block;font-size:.9em;height:-moz-max-content;height:max-content;line-height:.9;margin:.2rem;max-height:100%;max-width:100%;opacity:.5;position:absolute;right:2px;text-align:right;white-space:normal;width:-moz-max-content;width:max-content;word-wrap:break-word}.tp-ctnv_frac{background-color:var(--in-fg);border-radius:1px;height:2px;left:50%;margin-top:-1px;position:absolute;top:50%}.tp-ctnv_icon{box-sizing:border-box;position:absolute;display:block;transform:scale(var(--ggs, 1));width:16px;height:6px;border:2px solid;border-top:0;border-bottom-left-radius:2px;border-bottom-right-radius:2px;margin-top:8px;opacity:.5}.tp-ctnv_icon::after{content:"";display:block;box-sizing:border-box;position:absolute;width:8px;height:8px;border-left:2px solid;border-top:2px solid;transform:rotate(45deg);left:2px;bottom:4px}.tp-ctnv_icon::before{content:"";display:block;box-sizing:border-box;position:absolute;border-radius:3px;width:2px;height:10px;background:currentColor;left:5px;bottom:3px}.tp-btnv_b{margin-top:10px}.tp-inputv{opacity:0}',d=[t({id:"file-input",type:"input",accept(e,t){if("string"!=typeof e)return null;const i=n(t,(e=>({view:e.required.constant("file-input"),invalidFiletypeMessage:e.optional.string,lineCount:e.optional.number,filetypes:e.optional.array(e.required.string)})));return i?{initialValue:e,params:i}:null},binding:{reader:e=>e=>e instanceof File?e:null,constraint:e=>new i([]),writer:e=>(e,t)=>{e.write(t)}},controller(e){var t,i;return new l(e.document,{value:e.value,viewProps:e.viewProps,invalidFiletypeMessage:null!==(t=e.params.invalidFiletypeMessage)&&void 0!==t?t:"Unaccepted file type.",lineCount:null!==(i=e.params.lineCount)&&void 0!==i?i:3,filetypes:e.params.filetypes})}})];export{p as css,h as id,d as plugins};