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;
+    }
+
+}
@@ -0,0 +1,46 @@
+
+@import url('../../../shared/theme.less');
+
+window-control {
+    display: inline-block;
+    margin-left: 20px;
+}
+
+window-control-connector {
+    position: relative;
+    font-size: 12px;
+    display: inline-block;
+    background: lighten(@editor-bg-white, 1%);
+    padding: 6px;
+    padding-right: 16px;
+    transition: all 200ms;
+    cursor: pointer;
+}
+
+window-control-connector::after {
+    position: absolute;
+    content: "❌";
+    font-size: 8px;
+    transform: rotate(45deg);
+    filter: grayscale();
+    top: 4px;
+    right: 4px;
+    transition: all 200ms;
+    pointer-events: none;
+}
+
+window-control-connector.active {
+    transform: translateY(7px);
+}
+
+window-control-connector.active::after {
+    transform: rotate(0);
+    transform-origin: center;
+}
+
+@media (prefers-color-scheme: dark) {
+    window-control-connector {
+        background: lighten(@editor-bg-dark, 1%);
+        color: @primary-text-color-dark;
+    }
+}
@@ -0,0 +1,18 @@
+import { BaseElement } from "../../../shared/_base";
+import { WindowControlConnector } from "./window-control connector";
+
+export class WindowControl extends BaseElement {
+    
+    setActive(element: WindowControlConnector) {
+        for (let i = 0; i < this.children.length; i++) {
+            const child = <WindowControlConnector>this.children[i];
+
+            if (element == child) {
+                child.activate();
+            }
+            else {
+                child.deactivate();
+            }
+        }
+    }
+}