First steps for a decent custom theme generator

2020-08-31 02:59:47 +02:00 · 2020-08-31 02:59:47 +02:00 · 2052976909
commit 2052976909
parent a57b7d93fa
82 changed files with 1880 additions and 1311 deletions
--- a/UI/Input/TagInput.ts
+++ b/UI/Input/TagInput.ts
@ -0,0 +1,107 @@
+import {InputElement} from "./InputElement";
+import {UIEventSource} from "../../Logic/UIEventSource";
+import {DropDown} from "./DropDown";
+import {TextField} from "./TextField";
+import Combine from "../Base/Combine";
+import {Utils} from "../../Utils";
+
+export default class SingleTagInput extends InputElement<string> {
+
+    private readonly _value: UIEventSource<string>;
+    IsSelected: UIEventSource<boolean>;
+
+    private key: InputElement<string>;
+    private value: InputElement<string>;
+    private operator: DropDown<string>
+
+    constructor(value: UIEventSource<string> = undefined) {
+        super(undefined);
+        this._value = value ?? new UIEventSource<string>(undefined);
+       
+        this.key = new TextField({
+            placeholder: "key",
+            fromString: str => {
+                if (str?.match(/^[a-zA-Z][a-zA-Z0-9:]*$/)) {
+                    return str;
+                }
+                return undefined
+            },
+            toString: str => str
+        });
+
+        this.value = new TextField<string>({
+                placeholder: "value - if blank, matches if key is NOT present",
+                fromString: str => str,
+                toString: str => str
+            }
+        );
+        this.operator = new DropDown<string>("", [
+            {value: "=", shown: "="},
+            {value: "~", shown: "~"},
+            {value: "!~", shown: "!~"}
+        ]);
+        this.operator.GetValue().setData("=");
+
+        const self = this;
+
+        function updateValue() {
+            if (self.key.GetValue().data === undefined ||
+                self.value.GetValue().data === undefined ||
+                self.operator.GetValue().data === undefined) {
+                return undefined;
+            }
+            self._value.setData(self.key.GetValue().data + self.operator.GetValue().data + self.value.GetValue().data);
+        }
+
+        this.key.GetValue().addCallback(() => updateValue());
+        this.operator.GetValue().addCallback(() => updateValue());
+        this.value.GetValue().addCallback(() => updateValue());
+
+
+        function loadValue(value: string) {
+            if (value === undefined) {
+                return;
+            }
+            let parts: string[];
+            if (value.indexOf("=") >= 0) {
+                parts = Utils.SplitFirst(value, "=");
+                self.operator.GetValue().setData("=");
+            } else if (value.indexOf("!~") > 0) {
+                parts = Utils.SplitFirst(value, "!~");
+                self.operator.GetValue().setData("!~");
+
+            } else if (value.indexOf("~") > 0) {
+                parts = Utils.SplitFirst(value, "~");
+                self.operator.GetValue().setData("~");
+            } else {
+                console.warn("Invalid value for tag: ", value)
+                return;
+            }
+            self.key.GetValue().setData(parts[0]);
+            self.value.GetValue().setData(parts[1]);
+        }
+
+        self._value.addCallback(loadValue);
+        loadValue(self._value.data);
+        this.IsSelected = this.key.IsSelected.map(
+            isSelected => isSelected || this.value.IsSelected.data, [this.value.IsSelected]
+        )
+    }
+
+    IsValid(t: string): boolean {
+        return false;
+    }
+
+    InnerRender(): string {
+        return new Combine([
+            this.key, this.operator, this.value
+        ]).Render();
+    }
+
+
+    GetValue(): UIEventSource<string> {
+        return this._value;
+    }
+
+
+}