Kamran Ahmed
2 years ago
parent
577613132b
commit
d7b201c7f7
8 changed files with 73 additions and 68 deletions
@ -1,65 +1,69 @@ |
||||
export class Modal { |
||||
constructor() { |
||||
this.triggerModal = this.triggerModal.bind(this); |
||||
this.onDOMLoaded = this.onDOMLoaded.bind(this); |
||||
this.handleCloseModal = this.handleCloseModal.bind(this); |
||||
this.handleKeydown = this.handleKeydown.bind(this); |
||||
export class Popup { |
||||
constructor() { |
||||
this.triggerPopup = this.triggerPopup.bind(this); |
||||
this.onDOMLoaded = this.onDOMLoaded.bind(this); |
||||
this.handleClosePopup = this.handleClosePopup.bind(this); |
||||
this.handleKeydown = this.handleKeydown.bind(this); |
||||
} |
||||
|
||||
/** |
||||
* Triggers the popup on target elements |
||||
* @param {Event} e |
||||
*/ |
||||
triggerPopup(e) { |
||||
const popupToShow = |
||||
e?.target?.closest('[data-popup]')?.dataset?.popup || 'unknown-popup'; |
||||
const popupEl = document.querySelector(`#${popupToShow}`); |
||||
|
||||
if (!popupEl) { |
||||
return; |
||||
} |
||||
|
||||
/** |
||||
* Triggers the modal on target elements |
||||
* @param {Event} e |
||||
*/ |
||||
triggerModal(e) { |
||||
const modalToShow = e?.target?.closest('[data-modal]')?.dataset?.modal || 'unknown-modal'; |
||||
const modalEl = document.querySelector(`#${modalToShow}`); |
||||
|
||||
if (!modalEl) { |
||||
return; |
||||
} |
||||
|
||||
modalEl.classList.remove('hidden'); |
||||
const focusEl = modalEl.querySelector('[autofocus]'); |
||||
if (focusEl) { |
||||
focusEl.focus(); |
||||
} |
||||
|
||||
popupEl.classList.remove('hidden'); |
||||
popupEl.classList.add('flex'); |
||||
const focusEl = popupEl.querySelector('[autofocus]'); |
||||
if (focusEl) { |
||||
focusEl.focus(); |
||||
} |
||||
|
||||
handleCloseModal(e) { |
||||
const target = e.target; |
||||
const modalBody = target.closest('.modal-body'); |
||||
const closestModal = target.closest('.modal'); |
||||
|
||||
if (modalBody) { |
||||
return; |
||||
} |
||||
|
||||
if (closestModal) { |
||||
closestModal.classList.add('hidden'); |
||||
} |
||||
} |
||||
|
||||
handleClosePopup(e) { |
||||
const target = e.target; |
||||
const popupBody = target.closest('.popup-body'); |
||||
const closestPopup = target.closest('.popup'); |
||||
|
||||
if (popupBody) { |
||||
return; |
||||
} |
||||
|
||||
handleKeydown(e) { |
||||
if (e.key !== 'Escape') { |
||||
return; |
||||
} |
||||
|
||||
const modal = document.querySelector('.modal:not(.hidden)'); |
||||
if (modal) { |
||||
modal.classList.add('hidden'); |
||||
} |
||||
|
||||
if (closestPopup) { |
||||
closestPopup.classList.add('hidden'); |
||||
closestPopup.classList.remove('flex'); |
||||
} |
||||
|
||||
onDOMLoaded() { |
||||
document.addEventListener('click', this.triggerModal); |
||||
document.addEventListener('click', this.handleCloseModal); |
||||
document.addEventListener('keydown', this.handleKeydown); |
||||
} |
||||
|
||||
handleKeydown(e) { |
||||
if (e.key !== 'Escape') { |
||||
return; |
||||
} |
||||
|
||||
init() { |
||||
window.addEventListener('DOMContentLoaded', this.onDOMLoaded); |
||||
|
||||
const popup = document.querySelector('.popup:not(.hidden)'); |
||||
if (popup) { |
||||
popup.classList.add('hidden'); |
||||
popup.classList.remove('flex'); |
||||
} |
||||
} |
||||
|
||||
const modalRef = new Modal(); |
||||
modalRef.init();
|
||||
|
||||
onDOMLoaded() { |
||||
document.addEventListener('click', this.triggerPopup); |
||||
document.addEventListener('click', this.handleClosePopup); |
||||
document.addEventListener('keydown', this.handleKeydown); |
||||
} |
||||
|
||||
init() { |
||||
window.addEventListener('DOMContentLoaded', this.onDOMLoaded); |
||||
} |
||||
} |
||||
|
||||
const popupRef = new Popup(); |
||||
popupRef.init(); |
||||
|
||||
Loading…
Reference in new issue