added html and css editors

2022-03-26 20:44:52 +01:00
parent cda1b5c972
commit 6ed4b80c64
23 changed files with 548 additions and 144 deletions
@@ -0,0 +1,74 @@
+import { BaseElement } from "../../../shared/_base";
+import { CodeEditorContainer } from "../code-editor-container/code-editor-container";
+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 = "block";
+        }
+
+        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 elements = <CodeEditorContainer[]>this.findVisible("code-editor-container");
+        var containers = document.getElementsByClassName("code-editor-containers")[0];
+
+        if (elements.length === 0) {
+            containers.classList.add("force-close");
+        }
+        else {
+            containers.classList.remove("force-close");
+            var size = (100 / elements.length) + "%";
+            for (let i = 0; i < elements.length; i++) {
+                const element = elements[i];
+
+                element.style.minHeight = size;
+                element.style.maxHeight = size;
+            }
+        }
+    }
+
+    private getTarget() {
+        var attr = this.getAttribute("target");
+        if (attr) {
+            return <HTMLElement>document.querySelector(attr);
+        }
+
+        return null;
+    }
+
+}