jspanel4
Version:
A JavaScript library to create highly configurable multifunctional floating panels that can also be used as modal, tooltip, hint or contextmenu
1 lines • 1.55 kB
JavaScript
import{jsPanel}from"../../jspanel.js";jsPanel.modal||(jsPanel.modal={version:"1.2.5",date:"2020-04-26 23:23",defaults:{closeOnEscape:!0,closeOnBackdrop:!0,dragit:!1,headerControls:"closeonly",resizeit:!1,syncMargins:!1},addBackdrop(e){let a=document.getElementsByClassName("jsPanel-modal-backdrop").length,n=document.createElement("div");return n.id="jsPanel-modal-backdrop-"+e,0===a?n.className="jsPanel-modal-backdrop":a>0&&(n.className="jsPanel-modal-backdrop jsPanel-modal-backdrop-multi"),n.style.zIndex=this.ziModal.next(),n},removeBackdrop(e){let a=document.getElementById(`jsPanel-modal-backdrop-${e}`);a.classList.add("jsPanel-modal-backdrop-out");let n=1e3*parseFloat(getComputedStyle(a).animationDuration);window.setTimeout(function(){document.body.removeChild(a)},n)},create(e={}){e.paneltype="modal",e.id?"function"==typeof e.id&&(e.id=e.id()):e.id=`jsPanel-${jsPanel.idCounter+=1}`;let a=e,n=this.addBackdrop(a.id);return e.config&&delete(a=Object.assign({},e.config,e)).config,a=Object.assign({},this.defaults,a,{container:"window"}),document.body.append(n),jsPanel.create(a,e=>{e.style.zIndex=jsPanel.modal.ziModal.next(),e.header.style.cursor="default",e.footer.style.cursor="default",a.closeOnBackdrop&&jsPanel.pointerup.forEach(function(n){document.getElementById(`jsPanel-modal-backdrop-${a.id}`).addEventListener(n,function(){e.close(null,!0)})}),e.options.onclosed.unshift(function(){return jsPanel.modal.removeBackdrop(a.id),!0})})}},jsPanel.modal.ziModal=(()=>{let e=jsPanel.ziBase+1e4;return{next:function(){return e++}}})());