window-control connector.ts

import { BaseElement } from "../../../shared/_base";
import { CodeEditorContainer } from "../code-editor-container/code-editor-container";
import { WindowControl } from "./window-control";
import './window-control-connector.less';

export class WindowControlConnector extends BaseElement {

    onInit(): void {
        this.addEventListener("click", () => {
            this.toggle();
        })
    }

    toggle() {
        if (this.classList.contains("active")) {
            this.deactivate();
        }
        else {
            this.activate();
        }
    }

    activate() {
        this.classList.add("active");
        var target = this.getTarget();

        if (target) {
            target.classList.add("active");
            target.style.display = "";
        }

        this.distributeEvenly();
    }

    deactivate() {
        this.classList.remove("active");
        var target = this.getTarget();

        if (target) {
            target.classList.remove("active");
            target.style.display = "none";
        }

        this.distributeEvenly();
    }

    private distributeEvenly() {

        var windowControl = <WindowControl>this.parentElement;
        var distTarget = windowControl.getDistibuteTarget();

        if (distTarget) {
            var visibleTargetChildren = this.visibleChildren(distTarget);
            console.log(visibleTargetChildren);

            if (visibleTargetChildren.length === 0) {
                distTarget.classList.add("force-close");
            }
            else {
                distTarget.classList.remove("force-close");
                var size = (100 / visibleTargetChildren.length) + "%";
                for (let i = 0; i < visibleTargetChildren.length; i++) {
                    const element = visibleTargetChildren[i];

                    element.style.minHeight = size;
                    element.style.maxHeight = size;

                    if (i === 0) {
                        element.classList.add("first-visible");
                    }
                    else {
                        element.classList.remove("first-visible");
                    }
                    
                    if (i + 1 === visibleTargetChildren.length) {
                        element.classList.add("last-visible");
                    }
                    else {
                        element.classList.remove("last-visible");
                    }
                }
            }
        }
    }

    private getTarget() {
        var attr = this.getAttribute("target");
        if (attr) {
            return <HTMLElement>document.querySelector(attr);
        }

        return null;
    }

}