| | |
|---|
| | | window.jvbPopup=class{constructor(e={}){this.config={toggle:document.querySelector("[data-toggles]"),popup:document.querySelector(".jvb-pop"),name:"Popup",onOpen:()=>{},onClose:()=>{},onEscape:()=>{},...e},this.a11y=window.jvbA11y,this.toggleID=""===this.config.toggle.id?"."+this.config.toggle.className.split(" ").join("."):this.config.toggle.id,this.initListeners()}initListeners(){this.clickHandler=this.handleClick.bind(this),this.keyHandler=this.handleEscape.bind(this),document.addEventListener("click",this.handleToggle.bind(this))}handleToggle(e){(e.target===this.config.toggle||e.target.closest(this.toggleID))&&this.togglePopup()}handleClick(e){this.config.popup.contains(e.target)||e.target===this.config.toggle?window.targetCheck(e,".close")&&this.closePopup():this.closePopup()}togglePopup(){this.config.popup.classList.contains("expanded")?this.closePopup():this.openPopup()}openPopup(e=`Opened ${this.config.name}`){this.config.popup.classList.add("expanded"),this.config.toggle.classList.add("expanded"),this.config.toggle.title=`Hide ${this.config.name}`,this.config.toggle.ariaExpanded=!0,this.config.toggle.querySelector("span").textContent=`Close ${this.config.name}`,this.a11y.announce(e),this.config.onOpen(),document.addEventListener("keydown",this.keyHandler),document.addEventListener("click",this.clickHandler)}closePopup(e=`Closed ${this.config.name}`){this.config.popup.classList.remove("expanded"),this.config.toggle.classList.remove("expanded"),this.config.toggle.title=`Show ${this.config.name}`,this.config.toggle.ariaExpanded=!1,this.config.toggle.querySelector("span").textContent="",this.a11y.announce(e),this.config.onClose(),document.removeEventListener("keydown",this.keyHandler),document.removeEventListener("click",this.clickHandler)}handleEscape(e){"Escape"===e.key&&(this.closePopup(`Closed ${this.config.name} with escape key`),this.config.onEscape())}}; |
|---|
| | | (()=>{class e{constructor(){if(e.instance)return e.instance;e.instance=this,this.a11y=window.jvbA11y,this.popups=new Map,this.activePopup=null,this.clickHandler=this.handleClick.bind(this),this.keyHandler=this.handleEscape.bind(this),document.addEventListener("click",this.clickHandler)}registerPopup(e={}){const t=e.popup,p=e.toggle;if(!t||!p)return console.warn("Popup registration requires both popup and toggle elements"),null;const o=p.id||"."+p.className.split(" ").join("."),s={id:o,toggle:p,popup:t,name:e.name||"Popup",onOpen:e.onOpen||(()=>{}),onClose:e.onClose||(()=>{}),onEscape:e.onEscape||(()=>{}),isOpen:!1};return this.popups.set(o,s),this.getPopupAPI(o)}getPopupAPI(e){return{openPopup:t=>this.openPopup(e,t),closePopup:t=>this.closePopup(e,t),togglePopup:()=>this.togglePopup(e),isOpen:()=>this.popups.get(e)?.isOpen||!1,destroy:()=>this.popups.delete(e)}}handleClick(e){for(const[t,p]of this.popups)if(e.target===p.toggle||e.target.closest(t))return void this.togglePopup(t);if(this.activePopup){const t=this.popups.get(this.activePopup);(t&&!t.popup.contains(e.target)||t&&window.targetCheck(e,".close"))&&this.closePopup(this.activePopup)}}handleEscape(e){if("Escape"===e.key&&this.activePopup){const e=this.popups.get(this.activePopup);this.closePopup(this.activePopup,`Closed ${e.name} with escape key`),e.onEscape()}}togglePopup(e){const t=this.popups.get(e);t&&(t.isOpen?this.closePopup(e):this.openPopup(e))}openPopup(e,t){const p=this.popups.get(e);p&&(this.activePopup&&this.activePopup!==e&&this.closePopup(this.activePopup),p.isOpen=!0,this.activePopup=e,p.popup.classList.add("expanded"),p.toggle.classList.add("expanded"),p.toggle.title=`Hide ${p.name}`,p.toggle.ariaExpanded=!0,p.toggle.querySelector("span").textContent=`Close ${p.name}`,this.a11y.announce(t||`Opened ${p.name}`),p.onOpen(),document.addEventListener("keydown",this.keyHandler))}closePopup(e,t){const p=this.popups.get(e);p&&(p.isOpen=!1,this.activePopup===e&&(this.activePopup=null),p.popup.classList.remove("expanded"),p.toggle.classList.remove("expanded"),p.toggle.title=`Show ${p.name}`,p.toggle.ariaExpanded=!1,p.toggle.querySelector("span").textContent="",this.a11y.announce(t||`Closed ${p.name}`),p.onClose(),this.activePopup||document.removeEventListener("keydown",this.keyHandler))}destroy(){document.removeEventListener("click",this.clickHandler),document.removeEventListener("keydown",this.keyHandler),this.popups.clear(),this.activePopup=null}}document.addEventListener("DOMContentLoaded",(function(){window.jvbPopup=new e}))})(); |
|---|
