@github/catalyst/lib/actionable.js

Helpers for creating HTML Elements as Controllers

import { registerTag, observeElementForTags, parseElementTags } from './tag-observer.js';
import { attach } from './controllable.js';
const parseActionAttribute = (tag) => {
    const eventSep = tag.lastIndexOf(':');
    const methodSep = Math.max(0, tag.lastIndexOf('#')) || tag.length;
    return [tag.slice(eventSep + 1, methodSep), tag.slice(0, eventSep), tag.slice(methodSep + 1) || 'handleEvent'];
};
registerTag('data-action', parseActionAttribute, (el, controller, tag, event) => {
    el.addEventListener(event, handleEvent);
});
const actionables = new WeakSet();
// Bind a single function to all events to avoid anonymous closure performance penalty.
function handleEvent(event) {
    const el = event.currentTarget;
    for (const [tag, type, method] of parseElementTags(el, 'data-action', parseActionAttribute)) {
        if (event.type === type) {
            const controller = el.closest(tag);
            if (actionables.has(controller) && typeof controller[method] === 'function') {
                controller[method](event);
            }
            const root = el.getRootNode();
            if (root instanceof ShadowRoot) {
                const shadowController = root.host;
                if (shadowController.matches(tag) && actionables.has(shadowController)) {
                    if (typeof shadowController[method] === 'function') {
                        shadowController[method](event);
                    }
                }
            }
        }
    }
}
export class ActionableController {
    constructor(host) {
        this.host = host;
        actionables.add(this.host);
        observeElementForTags(this.host);
    }
    hostShadowCreated(root) {
        observeElementForTags(root);
    }
}
export const actionable = attach(ActionableController);
//# sourceMappingURL=actionable.js.map