add new components: mc-switch

Author: jerrychan7

src/UI/MCSwitch.html

@@ -0,0 +1,26 @@
+
+<style>
+    :host {
+        display: inline-block;
+        text-align: center;
+        color: #E0E0E0;
+        cursor: pointer;
+        text-shadow: 0.13rem 0.13rem 0 #383838;
+        padding: 0.5em;
+        --mc-ui-button-border-width: calc(3px * var(--mc-ui-button-img-border-top));
+        border-width: var(--mc-ui-button-border-width);
+    }
+    :host(:hover) {
+        color: #FFFFA0;
+        text-shadow: 0.13rem 0.13rem 0 #3F3F28;
+    }
+    :host(:active) {
+        color: #979797;
+    }
+    :host([disabled]) {
+        color: #979797;
+        cursor: not-allowed;
+    }
+</style>
+<slot></slot><slot name="sep">: </slot>
+<slot name="on">ON</slot><slot name="off">OFF</slot>

src/UI/MCSwitch.js

@@ -0,0 +1,57 @@
+
+import { MCComponent } from "./Component.js";
+
+class MCSwitch extends MCComponent {
+    static get componentName() { return "mc-switch"; };
+    static get templateUrl() { return "src/UI/MCSwitch.html" };
+    static observedAttributes = ["disabled", "value", "sep", "checked", "on", "off"];
+    #on = this.shadowRoot.querySelector("slot[name=on]");
+    #off = this.shadowRoot.querySelector("slot[name=off");
+    #refresh(checked = this.checked) {
+        this.#on.style.display = checked? null: "none";
+        this.#off.style.display = checked? "none": null;
+    };
+    constructor() {
+        super();
+        this.#refresh();
+        this.addEventListener("click", e => {
+            if (this.disabled) return false;
+            this.checked = !this.checked;
+            this.dispatchEvent("toggle", { global: true, data: this.checked, });
+        });
+    };
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "checked") this.#refresh(newValue !== null);
+        else if (name === "disabled") this.disabled = newValue;
+        else if (name === "value")
+            this.shadowRoot.querySelector("slot").innerHTML = newValue;
+        else if (name === "sep")
+            this.shadowRoot.querySelector("slot[name=sep]").innerHTML = newValue;
+        else if (name === "on")
+            this.#on.innerHTML = newValue;
+        else if (name === "off")
+            this.#off.innerHTML = newValue;
+    };
+    get disabled() { return this.hasAttribute("disabled"); };
+    set disabled(val) {
+        if (val) this.setAttribute("disabled", "");
+        else this.removeAttribute("disabled");
+    };
+    get checked() { return this.hasAttribute("checked"); };
+    set checked(val) {
+        if (this.disabled) return;
+        if (val) this.setAttribute("checked", "");
+        else this.removeAttribute("checked");
+    };
+};
+
+MCSwitch.setBorderAndWaitImg("button", ":host");
+MCSwitch.setBorderAndWaitImg("button-hover", ":host(:hover)");
+MCSwitch.setBorderAndWaitImg("button-active", ":host(:active)");
+MCSwitch.setBorderAndWaitImg("button-disabled", ":host([disabled])");
+
+MCSwitch.asyncLoadAndDefine();
+
+export {
+    MCSwitch
+};

src/UI/index.js

@@ -16,3 +16,4 @@ export * from "./MCFullScreenBtn.js";
 export * from "./MCInventory.js";
 export * from "./MCMoveBtns.js";
 export * from "./MCSlider.js";
+export * from "./MCSwitch.js";