pragma-views2/webcomponents/lib/bindable-element.js

export class BindableElement extends HTMLElement {
    connectedCallback() {
        this.events = new Array();
        this.processBindings(this);
    }

    disconnectedCallback() {
        for (let event of this.events) {
            event.element.removeEventListener(event.event, event.handler);
        }
        this.events = null;
    }

    async processBindings(parent) {
        if (parent.children == undefined) return;
        const children = Array.from(parent.children);
        for (let child of children) {
            this.setupDelegates(child);
            this.processInnerText(child);
            this.processBindings(child);
        }
    }

    async setupDelegates(element) {
        const attributes = Array.from(element.attributes).filter(item => item.nodeName.indexOf(".delegate") > -1);

        for (let attribute of attributes) {
            const event = attribute.nodeName.split('.')[0];
            const value = attribute.value;
            const handler = this[value].bind(this);
            element.addEventListener(event, handler);

            this.events.push({
                element: element,
                event: event,
                handler: handler
            })
        }
    }

    async processInnerText(element) {
        const innerHTML = element.innerHTML.trim();
        if (innerHTML.startsWith("@translation")) {
            element.innerHTML = this.getTranslation(innerHTML.replace("@translations.", ""));
        }
    }

    getTranslation(translationPath) {
        if (window.translations != undefined) {
            return this.getValueOnPath(window.translations, translationPath);
        }

        return translationPath;
    }

    getValueOnPath(obj, path) {
        let current = obj;
        path.split('.').forEach(p => current = current[p]);
        return current;
    }
}