Merge pull request #179 from Oxy949/feature/hide-custom-css

Hide By CSS Selectors

Author: megahead11

src/module.js

@@ -514,12 +514,22 @@ Hooks.on("theatreDockActive", (insertCount) => {
     // The "MyTab" module inserts another element with id "pause". Use querySelectorAll to make sure we catch both
     document.querySelectorAll("#pause").forEach((ele) => KHelpers.addClass(ele, "theatre-centered"));
 
+
+
     if (!game.settings.get(CONSTANTS.MODULE_ID, "autoHideBottom")) {
         return;
     }
     if (!theatre.isSuppressed) {
         $("#players").addClass("theatre-invisible");
         $("#hotbar").addClass("theatre-invisible");
+
+        const customSelectors = game.settings.get(CONSTANTS.MODULE_ID, "suppressCustomCss");
+        if (customSelectors) {
+            const selectors = customSelectors.split(";").map(selector => selector.trim());
+            selectors.forEach(selector => {
+                $(selector).addClass("theatre-invisible");
+            });
+        }
     }
 });
 
@@ -577,9 +587,25 @@ Hooks.on("theatreSuppression", (suppressed) => {
     if (suppressed) {
         $("#players").removeClass("theatre-invisible");
         $("#hotbar").removeClass("theatre-invisible");
+
+        const customSelectors = game.settings.get(CONSTANTS.MODULE_ID, "suppressCustomCss");
+        if (customSelectors) {
+            const selectors = customSelectors.split(";").map(selector => selector.trim());
+            selectors.forEach(selector => {
+                $(selector).removeClass("theatre-invisible");
+            });
+        }
     } else {
         $("#players").addClass("theatre-invisible");
         $("#hotbar").addClass("theatre-invisible");
+
+        const customSelectors = game.settings.get(CONSTANTS.MODULE_ID, "suppressCustomCss");
+        if (customSelectors) {
+            const selectors = customSelectors.split(";").map(selector => selector.trim());
+            selectors.forEach(selector => {
+                $(selector).addClass("theatre-invisible");
+            });
+        }
     }
 });
 

src/scripts/Theatre.js

@@ -2121,6 +2121,13 @@ export class Theatre {
             document.querySelectorAll("#pause").forEach((ele) => KHelpers.removeClass(ele, "theatre-centered"));
             $("#players").removeClass("theatre-invisible");
             $("#hotbar").removeClass("theatre-invisible");
+            const customSelectors = game.settings.get(CONSTANTS.MODULE_ID, "suppressCustomCss");
+            if (customSelectors) {
+                const selectors = customSelectors.split(";").map(selector => selector.trim());
+                selectors.forEach(selector => {
+                    $(selector).removeClass("theatre-invisible");
+                });
+            }
         }
         // force a render update
         //app.render();

src/scripts/settings.js

@@ -204,6 +204,15 @@ export const registerSettings = function () {
         default: true,
     });
 
+    game.settings.register(CONSTANTS.MODULE_ID, "suppressCustomCss", {
+        name: "Hide By CSS Selectors",
+        hint: "Hides elements specified by CSS selectors. Multiple selectors should be delimited by a semi-colon (;)",
+        scope: "world",
+        config: true,
+        default: "",
+        type: String
+    });
+
     game.settings.register(CONSTANTS.MODULE_ID, "showUIAboveStage", {
         name: "Theatre.UI.Settings.showUIAboveStage",
         hint: "Theatre.UI.Settings.showUIAboveStageHint",

src/styles/theatre.css

@@ -1685,6 +1685,12 @@
   transition: opacity 500ms ease 0ms;
 }
 
+/* id.class is utilized to gain priority over styling rules of the "Minimal UI" module */
+.theatre-invisible {
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
+
 /* id.class is utilized to gain priority over styling rules of the "Minimal UI" module */
 #players.theatre-invisible,
 #hotbar.theatre-invisible {