REFACTOR: admin-customize-colors-show (#16525)

- native class
- drops jquery
- @action
- uses clipboardCopy
- filterBy

app/assets/javascripts/admin/addon/controllers/admin-customize-colors-show.js

@@ -3,94 +3,87 @@ import I18n from "I18n";
 import bootbox from "bootbox";
 import discourseComputed from "discourse-common/utils/decorators";
 import { later } from "@ember/runloop";
+import { action } from "@ember/object";
+import { clipboardCopy } from "discourse/lib/utilities";
 
-export default Controller.extend({
+export default class AdminCustomizeColorsShowController extends Controller {
   @discourseComputed("model.colors", "onlyOverridden")
   colors(allColors, onlyOverridden) {
     if (onlyOverridden) {
-      return allColors.filter((color) => color.get("overridden"));
+      return allColors.filterBy("overridden");
     } else {
       return allColors;
     }
-  },
+  }
 
-  actions: {
-    revert(color) {
-      color.revert();
-    },
+  @action
+  revert(color) {
+    color.revert();
+  }
 
-    undo(color) {
-      color.undo();
-    },
+  @action
+  undo(color) {
+    color.undo();
+  }
 
-    copyToClipboard() {
-      $(".table.colors").hide();
-      let area = $("<textarea id='copy-range'></textarea>");
-      $(".table.colors").after(area);
-      area.text(this.model.schemeJson());
-      let range = document.createRange();
-      range.selectNode(area[0]);
-      window.getSelection().addRange(range);
-      let successful = document.execCommand("copy");
-      if (successful) {
-        this.set(
-          "model.savingStatus",
-          I18n.t("admin.customize.copied_to_clipboard")
-        );
-      } else {
-        this.set(
-          "model.savingStatus",
-          I18n.t("admin.customize.copy_to_clipboard_error")
-        );
-      }
-
-      later(() => {
-        this.set("model.savingStatus", null);
-      }, 2000);
-
-      window.getSelection().removeAllRanges();
-
-      $(".table.colors").show();
-      $(area).remove();
-    },
-
-    copy() {
-      const newColorScheme = this.model.copy();
-      newColorScheme.set(
-        "name",
-        I18n.t("admin.customize.colors.copy_name_prefix") +
-          " " +
-          this.get("model.name")
+  @action
+  copyToClipboard() {
+    if (clipboardCopy(this.model.schemeJson())) {
+      this.set(
+        "model.savingStatus",
+        I18n.t("admin.customize.copied_to_clipboard")
       );
-      newColorScheme.save().then(() => {
-        this.allColors.pushObject(newColorScheme);
-        this.replaceRoute("adminCustomize.colors.show", newColorScheme);
-      });
-    },
+    } else {
+      this.set(
+        "model.savingStatus",
+        I18n.t("admin.customize.copy_to_clipboard_error")
+      );
+    }
 
-    save() {
-      this.model.save();
-    },
+    later(() => {
+      this.set("model.savingStatus", null);
+    }, 2000);
+  }
 
-    applyUserSelectable() {
-      this.model.updateUserSelectable(this.get("model.user_selectable"));
-    },
+  @action
+  copy() {
+    const newColorScheme = this.model.copy();
+    newColorScheme.set(
+      "name",
+      I18n.t("admin.customize.colors.copy_name_prefix") +
+        " " +
+        this.get("model.name")
+    );
+    newColorScheme.save().then(() => {
+      this.allColors.pushObject(newColorScheme);
+      this.replaceRoute("adminCustomize.colors.show", newColorScheme);
+    });
+  }
 
-    destroy() {
-      const model = this.model;
-      return bootbox.confirm(
-        I18n.t("admin.customize.colors.delete_confirm"),
-        I18n.t("no_value"),
-        I18n.t("yes_value"),
-        (result) => {
-          if (result) {
-            model.destroy().then(() => {
-              this.allColors.removeObject(model);
-              this.replaceRoute("adminCustomize.colors");
-            });
-          }
+  @action
+  save() {
+    this.model.save();
+  }
+
+  @action
+  applyUserSelectable() {
+    this.model.updateUserSelectable(this.get("model.user_selectable"));
+  }
+
+  @action
+  destroy() {
+    return bootbox.confirm(
+      I18n.t("admin.customize.colors.delete_confirm"),
+      I18n.t("no_value"),
+      I18n.t("yes_value"),
+      (result) => {
+        if (result) {
+          this.model.destroy().then(() => {
+            this.allColors.removeObject(this.model);
+            this.replaceRoute("adminCustomize.colors");
+          });
         }
-      );
-    },
-  },
-});
+      }
+    );
+  }
+}