@nent/core
Version:
119 lines (118 loc) • 3.81 kB
JavaScript
/*!
* NENT 2022
*/
import { EventEmitter } from '../../../services/common/emitter';
import { debugIf } from '../../../services/common/logging';
import { commonState } from '../../../services/common/state';
import { ELEMENTS_COMMANDS, ELEMENTS_TOPIC } from './interfaces';
/* It listens for actions on the `ELEMENTS_TOPIC` topic and executes the corresponding command on the
element(s) specified by the `selector` property */
export class ElementsActionListener {
constructor() {
this.changed = new EventEmitter();
}
/**
* It listens for events on the action bus, and when it receives one, it calls the `commandReceived`
* function
* @param {Window} win - Window - the window object of the browser
* @param {IEventEmitter} actionBus - This is the event bus that the extension listens to for
* commands from the extension.
* @param {IEventEmitter} eventBus - This is the event bus that the plugin is using to communicate
* with the rest of the application.
*/
initialize(win, actionBus, eventBus) {
this.body = win.document.body;
this.eventBus = eventBus;
this.actionsSubscription = actionBus.on(ELEMENTS_TOPIC, async (ev) => {
debugIf(commonState.debug, `elements-listener: action received ${ev.topic}:${ev.command}`);
await this.commandReceived(ev.command, ev.data);
this.changed.emit('changed');
});
}
async commandReceived(command, data) {
switch (command) {
case ELEMENTS_COMMANDS.toggleClass: {
this.toggleClass(data);
break;
}
case ELEMENTS_COMMANDS.addClasses: {
this.addClasses(data);
break;
}
case ELEMENTS_COMMANDS.removeClasses: {
this.removeClasses(data);
break;
}
case ELEMENTS_COMMANDS.setAttribute: {
this.setAttribute(data);
break;
}
case ELEMENTS_COMMANDS.removeAttribute: {
this.removeAttribute(data);
break;
}
case ELEMENTS_COMMANDS.callMethod: {
this.callMethod(data);
break;
}
default:
}
}
toggleClass(args) {
const { selector, className } = args;
if (!className)
return;
const element = this.body.querySelector(selector);
if (element && className)
element.classList.toggle(className);
}
addClasses(args) {
const { selector, classes } = args;
if (!classes)
return;
const element = this.body.querySelector(selector);
if (element && classes)
classes.split(' ').forEach((c) => {
element.classList.add(c);
});
}
removeClasses(args) {
const { selector, classes } = args;
const element = this.body.querySelector(selector);
if (element && classes)
classes === null || classes === void 0 ? void 0 : classes.split(' ').forEach((c) => {
element === null || element === void 0 ? void 0 : element.classList.remove(c);
});
}
setAttribute(args) {
const { selector, attribute, value } = args;
if (!attribute)
return;
const element = this.body.querySelector(selector);
if (element && attribute)
element.setAttribute(attribute, value || '');
}
removeAttribute(args) {
const { selector, attribute } = args;
if (!attribute)
return;
const element = this.body.querySelector(selector);
if (element && attribute)
element === null || element === void 0 ? void 0 : element.removeAttribute(attribute);
}
callMethod(args) {
const { selector, method, data } = args;
if (!method)
return;
const element = this.body.querySelector(selector);
if (element) {
const elementMethod = element[method];
if (elementMethod && typeof element === 'function') {
elementMethod(data);
}
}
}
destroy() {
this.actionsSubscription();
}
}