Skip to content

Customizing Modal Event Listeners

it is possible to customize click and keydown event listener callbacks for modals.

Available since 1.1.13

In older releases of Hyva_Theme the callbacks where not exposed globally and could not be customized without overriding the page/js/modal.phtml Hyva_Theme template.
If you are using an older version, be sure to upgrade the theme module.

At the time of writing, the two callbacks are globally available as

  • window.hyva.modal.eventListeners.click
  • window.hyva.modal.eventListeners.keydown

For example, to remove the modal click-away event listener, the following code can be used:

document.removeEventListener('click', window.hyva.modal.eventListeners.click)

Wrapping the event listeners

This example wraps the keydown event in a way that it could also be further extended by other code: 

(function () {
    // store reference to the original event subscriber function
    const originalListener = window.hyva.modal.eventListeners.keydown;
    // remove the original event subscriber
    document.removeEventListener('keydown', originalListener);
    // declare the new event subscriber function on the global window.hyva.modal.eventListeners object
    window.hyva.modal.eventListeners.keydown = event => {
        console.log('my wrapper', event);
        originalListener(event); // call original listener if needed
    };
    // Activate the new event listener
    document.addEventListener('keydown', window.hyva.modal.eventListeners.keydown);
})()