digitalcampusframework / dcf

Digital Campus Framework
BSD 3-Clause "New" or "Revised" License
8 stars 13 forks source link

Multiple popups can be open at the same time #485

Closed tommyneu closed 1 year ago

tommyneu commented 1 year ago

When using hover popups multiple can be open at the same time when moving between them due to their delay. Currently non-hover popups can not be opened at the same time due global click listeners.

This could be fixed by dispatching an event when the popup is opened. We could then have a listener created on the document with useCapture set to true to listen for these events and close when the target does not match the current element.

Something like this(not exact code):

// This for dispatching event when button is opened
popupBtn.addEventListener(DCFToggleButton.event('toggleButtonOn'), () => {
   popup.dispatchEvent(this.popupOpenedEvent);
});
// This for closing when another popup is opened
document.addEventListener(DCFPopup.event('popupOpened'), (e) => { 
   if (e.target.id != popup.id) { 
      popupBtn.dispatchEvent(this.commandClose); 
   } 
}, true);