FEATURE: Use native color-picker (#15748)

app/assets/javascripts/admin/addon/components/color-input.js

@@ -1,8 +1,6 @@
 import { action, computed } from "@ember/object";
-import loadScript, { loadCSS } from "discourse/lib/load-script";
 import Component from "@ember/component";
 import { observes } from "discourse-common/utils/decorators";
-import { schedule } from "@ember/runloop";
 
 /**
   An input field for a color.
@@ -22,13 +20,25 @@ export default Component.extend({
     return this.onlyHex ? 6 : null;
   }),
 
+  normalizedHexValue: computed("hexValue", function () {
+    return this.normalize(this.hexValue);
+  }),
+
   normalize(color) {
-    if (/^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(color)) {
+    if (this._valid(color)) {
       if (!color.startsWith("#")) {
         color = "#" + color;
       }
+      if (color.length === 4) {
+        color =
+          "#" +
+          color
+            .slice(1)
+            .split("")
+            .map((hex) => hex + hex)
+            .join("");
+      }
     }
-
     return color;
   },
 
@@ -39,49 +49,25 @@ export default Component.extend({
     }
   },
 
+  @action
+  onPickerInput(event) {
+    this.set("hexValue", event.target.value.replace("#", ""));
+  },
+
   @observes("hexValue", "brightnessValue", "valid")
   hexValueChanged() {
     const hex = this.hexValue;
-    let text = this.element.querySelector("input.hex-input");
 
     if (this.attrs.onChangeColor) {
       this.attrs.onChangeColor(this.normalize(hex));
     }
 
-    if (this.valid) {
-      this.styleSelection &&
-        text.setAttribute(
-          "style",
-          "color: " +
-            (this.brightnessValue > 125 ? "black" : "white") +
-            "; background-color: #" +
-            hex +
-            ";"
-        );
-
-      if (this.pickerLoaded) {
-        $(this.element.querySelector(".picker")).spectrum({
-          color: "#" + hex,
-        });
-      }
-    } else {
-      this.styleSelection && text.setAttribute("style", "");
+    if (this._valid()) {
+      this.element.querySelector(".picker").value = this.normalize(hex);
     }
   },
 
-  didInsertElement() {
-    loadScript("/javascripts/spectrum.js").then(() => {
-      loadCSS("/javascripts/spectrum.css").then(() => {
-        schedule("afterRender", () => {
-          $(this.element.querySelector(".picker"))
-            .spectrum({ color: "#" + this.hexValue })
-            .on("change.spectrum", (me, color) => {
-              this.set("hexValue", color.toHexString().replace("#", ""));
-            });
-          this.set("pickerLoaded", true);
-        });
-      });
-    });
-    schedule("afterRender", () => this.hexValueChanged());
+  _valid(color = this.hexValue) {
+    return /^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(color);
   },
 });