@govbr-ds/core
Version:
Padrão Digital de Governo
2 lines • 7.21 kB
JavaScript
!function e(t,i){"object"==typeof exports&&"object"==typeof module?module.exports=i():"function"==typeof define&&define.amd?define("core",[],i):"object"==typeof exports?exports.core=i():t.core=i()}(self,()=>(()=>{var e=()=>{},t,i=()=>{};(()=>{class e{constructor(e,t,i){this.name=e,this.component=t,this._inputElement=this.component.querySelector(".upload-input"),this._fileList=this.component.querySelector(".upload-list"),this._btnUpload=this.component.querySelector(".upload-button"),this._label=this.component.querySelector("label"),this._textHelp=document.querySelector(".text-base"),this._fileArray=[],this._uploadFiles=i,this._setBehavior()}_setBehavior(){if(this._inputElement){const e=document.createElement("button");if(e.className="upload-button",e.setAttribute("type","button"),e.setAttribute("aria-hidden","true"),this._inputElement.getAttribute("multiple")?e.innerHTML='<i class="fas fa-upload" aria-hidden="true"></i><span>Selecione o(s) arquivo(s)</span>':e.innerHTML='<i class="fas fa-upload" aria-hidden="true"></i><span>Selecione o arquivo</span>',this.component.append(this._label),this.component.append(this._inputElement),this.component.appendChild(e),this.component.append(this._fileList),this._btnUpload=this.component.querySelector(".upload-button"),this._btnUpload.addEventListener("click",()=>{this._clickUpload()},!1),this.component.getAttribute("disabled")){e.setAttribute("disabled","disabled");const t=document.createElement("span");t.classList.add("feedback","warning","mt-1"),t.setAttribute("role","alert"),t.innerHTML='<i class="fas fa-exclamation-triangle" aria-hidden="true"></i>Upload desabilitado',this.component.after(t)}this._fileArray=Array.from(this._inputElement.files),this._inputElement.addEventListener("change",e=>{this._handleFiles(e)},!1)}this._setDragAndDropBehavior()}_setDragAndDropBehavior(){const e=this.component.querySelector(".upload-button");["dragenter","dragover","dragleave","drop"].forEach(t=>{e.addEventListener(t,this._preventDefaults)}),["dragenter","dragover"].forEach(t=>{e.addEventListener(t,this._hightLight.bind(this))}),["dragleave","drop"].forEach(t=>{e.addEventListener(t,this._unHightLight.bind(this))}),e.addEventListener("drop",this._handleDrop.bind(this))}_preventDefaults(e){e.preventDefault(),e.stopPropagation()}_hightLight(){this.component.classList.add("dragging")}_unHightLight(){this.component.classList.remove("dragging")}_handleDrop(e){this.component.classList.remove("dragging");const t=e.dataTransfer,{files:i}=t;this._handleFiles(i)}_isDisabled(e){const t=undefined;return!!e.target.getAttribute("disabled")}_clickUpload(){this._inputElement.click()}_removeMessage(){for(const e of this.component.querySelectorAll(".feedback"))e.parentNode.removeChild(e),e.innerHTML=""}_removeStatus(){const e=undefined;["danger","warning","info","success"].forEach(e=>{this.component.dataset.hasOwnProperty(e)&&this.component.removeAttribute(`data-${e}`)})}_feedback(e,t){const i=`<i class="fas fa-times-circle" aria-hidden="true"></i>${t}`,n=`data-${e}`,s=document.createElement("div");switch(s.classList.add("feedback",e,"mt-1"),s.setAttribute("role","alert"),s.setAttribute("aria-live","assertive"),s.setAttribute("aria-label",t),e){case"danger":s.innerHTML=i;break;case"info":s.innerHTML=i.replace("fa-times-circle","fa-info-circle");break;case"success":s.innerHTML=i.replace("fa-times-circle","fa-check-circle");break;case"warning":s.innerHTML=i.replace("fa-times-circle","fa-exclamation-triangle");break;default:s.innerHTML=""}this._removeStatus(),this.component.setAttribute(n,n),this._fileList.before(s)}_concatFiles(e){const t=e.length?Array.from(e):Array.from(this._inputElement.files);this._fileArray=this._fileArray.concat(t)}_handleFiles(e){this._removeMessage(),!this._inputElement.multiple&&e.length>1?this._feedback("danger","É permitido o envio de somente 1 arquivo."):!this._inputElement.multiple&&this._fileArray.length>0?(this._fileArray=[],this._concatFiles(e),this._updateFileList(),this._feedback("warning","O arquivo enviado anteriormente foi substituído")):(this._concatFiles(e),this._updateFileList())}_updateFileList(){if(this._removeStatus(),this.component.nextElementSibling===this._textHelp&&(this._textHelp.style.display="none"),this._fileArray.length){this._fileList.innerHTML="";for(let e=0;e<this._fileArray.length;e++)"nowait"in this._fileArray[e]?this._fileArray[e].nowait&&this._renderItem(e):this._fileArray[e].requested||(this.uploadLoading(),this.uploadingFile(e))}else this._fileList.innerHTML="",this.component.nextElementSibling===this._textHelp&&(this._textHelp.style.display="")}uploadLoading(){const e=document.createElement("div"),t=document.createElement("span");t.classList.add("cargas"),t.innerText="Carregando...",e.setAttribute("sm",""),e.classList.add("my-3"),e.setAttribute("loading",""),e.appendChild(t),this._fileList.appendChild(e)}uploadingFile(e){this._uploadFiles&&(this._fileArray[e].requested=!0,this._uploadFiles().then(()=>{this._fileArray[e].nowait=!0,this._updateFileList()}))}_renderItem(e){const t=document.createElement("div");t.className="br-item d-flex",this._fileList.appendChild(t),t.innerHTML="";const i=document.createElement("div");i.className="name",t.appendChild(i),this._fileList.appendChild(t);const n=document.createElement("div");n.className="content",n.innerHTML=this._fileArray[e].name,this._alertAddItemA11y(n,this._fileArray[e].name);const s=document.createElement("div");s.classList.add("br-tooltip"),s.setAttribute("role","tooltip"),s.setAttribute("place","top"),s.setAttribute("info","info");const a=document.createElement("span");a.classList.add("text"),a.setAttribute("role","tooltip"),a.innerHTML=this._fileArray[e].name,s.appendChild(a),t.appendChild(n),t.appendChild(i),t.appendChild(s),n.classList.add("text-primary-default","mr-auto");const r=document.createElement("div");r.className="support mr-n2";const l=document.createElement("button"),o=document.createElement("span");o.className="mr-1",o.innerHTML=this._calcSize(this._fileArray[e].size),r.appendChild(o),l.className="br-button",l.type="button",l.setAttribute("circle",""),l.setAttribute("aria-label","apagar arquivo"+this._fileArray[e].name),l.addEventListener("click",t=>{this._removeFile(e,t)},!1);const d=document.createElement("i");d.className="fa fa-trash",l.appendChild(d),r.appendChild(l),t.appendChild(r),this._fileArray[e].nowait=!0;const c=[];for(const e of this.component.querySelectorAll(".br-tooltip"))c.push(new BRTooltip("br-tooltip",e))}_alertAddItemA11y(e,t){}_calcSize(e){if(e<1024)return`${e} bytes`;let t="",i=["KB","MB","GB","TB"],n=0,s=e/1024;for(;s>=1&&n<i.length;)t=`${s.toFixed(2)} ${i[n]}`,s/=1024,n++;return t}_removeFile(e,t){t.stopPropagation(),t.preventDefault(),this._removeStatus(),this._removeMessage(),this._fileArray.splice(e,1),this._updateFileList(),this._inputElement.multiple&&(this._inputElement.files=this._updateFileListItems(this._fileArray)),this._inputElement.multiple||(this._inputElement.value="")}_updateFileListItems(e){const t=new ClipboardEvent("").clipboardData||new DataTransfer;for(let i=0,n=e.length;i<n;i++)t.items.add(e[i]);return t.files}}var t=null})(),e();var n={};return i(),n})());
//# sourceMappingURL=upload.min.js.map