Added a setting to enable and disable HUD visibility

chrisgoringe · Jun 1, 2024 · 306f2d3 · 306f2d3
1 parent 5956288
commit 306f2d3
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/js/image_chooser.js b/js/image_chooser.js
@@ -136,6 +136,13 @@ app.registerExtension({
         /*
         Additional settings
         */
+        app.ui.settings.addSetting({
+            id: "ImageChooser.hudVisbility",
+            name: "Image Chooser HUD: show / hide",
+            type: "boolean",
+            defaultValue: true,
+            onChange: (newValue) => { hud.setVisibility(newValue); }
+        });
         app.ui.settings.addSetting({
             id: "ImageChooser.hudpos",
             name: "Image Chooser HUD position (-1 for off)",

diff --git a/js/image_chooser_hud.js b/js/image_chooser_hud.js
@@ -2,6 +2,10 @@ import { $el } from "../../scripts/ui.js";
 import { app } from "../../scripts/app.js";
 
 class HUD {
+    // define style "constants"
+    #VISIBLE_OPACITY = 0.8;
+    #INVISIBLE_OPACITY = 0;
+
     constructor() {
         this.span = $el("span", { style: { color:"white" }, textContent: "" });
         this.hud = $el("div", {
@@ -11,7 +15,7 @@ class HUD {
                 "left":"10px", 
                 "border":"thin solid #f66", 
                 "padding":"8px", 
-                "opacity":0.8,
+                "opacity": this.#VISIBLE_OPACITY,
             }},
             [
                 this.span
@@ -27,7 +31,10 @@ class HUD {
 
     move(newtop) {
         this.hud.style.top = `${newtop}px`;
-        this.hud.style.opacity = newtop>=0 ? 0.8 : 0;
+    }
+
+    setVisibility(newVisibility) {
+        this.hud.style.opacity = newVisibility ? this.#VISIBLE_OPACITY : this.#INVISIBLE_OPACITY;
     }
 
     update() {