pragma-views2/webcomponents/pragma-split-view/pragma-split-view.js

class PragmaSplitView extends HTMLElement {
    
    constructor() {
        super();
    }

    static get observedAttributes() {
        return ["visible"]; 
    }
    
    get visible() {
        return this.getAttribute("visible") || this._visible;
    }
    
    set visible(newValue) {
        this._visible = newValue;
        if (this._visible == true) {

            const rightElement = this.shadowRoot.querySelector("#pragma-split-view-right");
            this.classList.add("visible");

            rightElement.addEventListener("transitionend",() => {
                // Only margin left container when right animated
                this.classList.add("left-spaced")
            }, {once:true})
        }
        else {
            this.classList.remove("visible", "left-spaced");
        }
    }
    
    _initTemplate() {
        const instance = document.importNode(window.templates.get("pragma-split-view-template"), true);
        this.attachShadow({mode: 'open'}).appendChild(instance.cloneNode(true));
    }
    
    _setRightSize(){
        const percentageSize = this.getAttribute("split-percentage");
        const rightPercentageSize = `${percentageSize}%`;
        this.style.setProperty("--split-percentage", rightPercentageSize)
    }

    connectedCallback() {
        this._initTemplate();
        this._setRightSize();
    }

    onMessage(params) {
        if (this[params.message] != undefined) {
            this[params.message]();
        }
    }

    toggle() {
        this.visible = !this.visible;
    }

    hide() {
        this.visible = false;
    }
}


customElements.define('pragma-split-view', PragmaSplitView);