Handle global events in views with ease
If there are multiple views in your applicaiton handling global events then triggering these events only for the active views is hard, or it is as simple as this library.
npm i --save @ramlmn/viewIn your component.js file
// CJS style
const {viewIn, viewOut, shouldHandle} = require('@ramlmn/view');
// ESM style
import {viewIn, viewOut, shouldHandle} from '@ramlmn/view';
// actual component code
class Modal extends HTMLElement {
connectedCallback() {
// a global event listener
document.addEventListner('keydown', event => {
if (shouldHandle(this.viewId)) {
// do something
}
});
}
show() {
// guard for repeated `viewIn()` calls
this.viewId = viewIn();
}
hide() {
viewOut(this.viewId);
}
}