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);
   },
 });

app/assets/javascripts/discourse/app/lib/public-js-versions.js

@@ -11,6 +11,4 @@ export const PUBLIC_JS_VERSIONS = {
   "jquery.magnific-popup.min.js":
     "magnific-popup/1.1.0/jquery.magnific-popup.min.js",
   "pikaday.js": "pikaday/1.8.0/pikaday.js",
-  "spectrum.js": "spectrum-colorpicker/1.8.0/spectrum.js",
-  "spectrum.css": "spectrum-colorpicker/1.8.0/spectrum.css",
 };

app/assets/javascripts/discourse/app/templates/components/color-input.hbs

@@ -1,7 +1,7 @@
-{{text-field
+{{#if onlyHex}}<span class="add-on">#</span>{{/if}}{{text-field
   class="hex-input"
   value=hexValue
   maxlength=maxlength
   input=(action "onHexInput" value="target.value")
 }}
-<input class="picker" type="input">
+<input class="picker" type="color" value={{normalizedHexValue}} {{on "input" this.onPickerInput}}>

app/assets/javascripts/discourse/app/templates/components/edit-category-general.hbs

@@ -64,7 +64,7 @@
         <section class="field">
           <span class="color-title">{{i18n "category.background_color"}}:</span>
           <div class="colorpicker-wrapper">
-            <span class="add-on">#</span>{{text-field value=category.color placeholderKey="category.color_placeholder" maxlength="6"}}
+            {{color-input hexValue=category.color valid=category.colorValid}}
             {{color-picker colors=backgroundColors usedColors=usedBackgroundColors value=category.color}}
           </div>
         </section>
@@ -72,7 +72,7 @@
         <section class="field">
           <span class="color-title">{{i18n "category.foreground_color"}}:</span>
           <div class="colorpicker-wrapper edit-text-color">
-            <span class="add-on">#</span>{{text-field value=category.text_color placeholderKey="category.color_placeholder" maxlength="6"}}
+            {{color-input hexValue=category.text_color}}
             {{color-picker colors=foregroundColors value=category.text_color id="edit-text-color"}}
           </div>
         </section>