pragma-views2/webcomponents/pragma-group/pragma-group.js

import {initializeContent} from "../lib/content-helpers.js";

class PragmaGroup extends HTMLElement {
    constructor() {
        super();
        this.expanded = "true";
    }

    static get observedAttributes() {
        return ["expanded"]; // array of string for attributes changing ["attribute1"]
    }

    get expanded() {
        return this.getAttribute("expanded") || this._expanded;
    }

    set expanded(newValue) {
        this._expanded = newValue;
        if (newValue == "false") {
            this.classList.add("pragma-group-hidden");
        }
        else {
            this.classList.remove("pragma-group-hidden");
        }
    }

    get title() {
        return this.getAttribute("title") || this._title;
    }

    set title(newValue) {
        this._title = newValue;
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (name == "expanded") {
            this.expanded = newValue;
        }
    }

    connectedCallback() {
        if (this._isLoaded == true) return;
        
        this.initTemplate();
        this.setGroupTitle();
        this.setToggleButton();
        this._isLoaded = true;
    }

    disconnectedCallback() {
        this.removeEventListener('click', this.toggleHandler);
        this.toggleHandler = null;
    }

    initTemplate() {
        const instance = document.importNode(window.templates.get("pragma-group"), true);
        this.attachShadow({mode: 'open'}).appendChild(instance.cloneNode(true));
    }

    setGroupTitle() {
        const h2Element = this.shadowRoot.querySelector("h2");
        if (h2Element != undefined) {
            h2Element.innerText = this.title;
        }
    }

    setToggleButton() {
        this.toggleHandler = this.toggleGroup.bind(this);
        const toggleButtonElement = this.shadowRoot.querySelector(".pragma-group-expand-button");
        if (toggleButtonElement != undefined) {
            toggleButtonElement.addEventListener("click", this.toggleHandler)
        }
    }

    toggleGroup() {
        if (this.expanded == "false") {
            this.setAttribute("expanded", "true");
        }
        else {
            this.setAttribute("expanded", "false");
        }
    }
}

customElements.define('pragma-group', PragmaGroup);