Opacity settings & refactoring

languages/en.json

@@ -5,6 +5,10 @@
       "enable-blur-hint": "⚠️ Activating this setting may cause a drop in performance. This setting is disabled by default for the Firefox browser, due to Firefox's poor filters (blur) performance.",
       "chat-opacity-name": "Chat opacity (world)",
       "chat-opacity-hint": "If this setting is enabled, the chat cards will become transparent after a certain delay. Hover over a chat card will make it opaque again.",
+      "chat-opacity-value-name": "Chat opacity value (world)",
+      "chat-opacity-value-hint": "If \"Chat opacity\" is enabled, this setting controls the opacity value of the chat cards.",
+      "chat-opacity-timer-name": "Chat opacity timer (world)",
+      "chat-opacity-timer-hint": "If \"Chat opacity\" is enabled, this setting controls how long before a newly created chat card becomes transparent (in seconds).",
       "collapse-hotbar-name": "Collapse hotbar (world)",
       "collapse-hotbar-hint": "Collapses the hotbar on startup. You may find this setting usefull if your party do not use macros.",
       "no-pause-name": "Remove pause (world)",

languages/fr.json

@@ -5,6 +5,10 @@
       "enable-blur-hint": "⚠️ Activer ce paramètre peut causer une baisse de performance. Ce paramètre est désactivé par défaut pour le navigateur Firefox à cause d'une mauvaise gestion des performances des filtres (flou) de Firefox.",
       "chat-opacity-name": "Opacité du chat (global)",
       "chat-opacity-hint": "Si ce paramètre est activé, les cartes du chat deviendront moins opaque passé un certain délai. Elle redeviendront opaque au survol de la souris.",
+      "chat-opacity-value-name": "Valeur de l'opacité du chat (world)",
+      "chat-opacity-value-hint": "Si \"Opacité du chat\" est activé, ce paramètre contrôle la valeur d'opacité des cartes du chat.",
+      "chat-opacity-timer-name": "Temps avant transparence du chat (world)",
+      "chat-opacity-timer-hint": "Si \"Opacité du chat\" est activé, ce paramètre contrôle la temps avant qu'une carte du chat devienne transparente (en secondes).",
       "collapse-hotbar-name": "Réduire la barre de macro (global)",
       "collapse-hotbar-hint": "Réduit la barre de macro à l'ouverture de FoundryVTT. Ce paramètre est utile si votre table n'utilise pas de macros.",
       "no-pause-name": "Enlever la pause (global)",

modules/features/BaseFeature.js

@@ -0,0 +1,53 @@
+import { SETTINGS } from "../settings";
+import { CONSTANTS } from "../shared/constants";
+
+/**
+ * Abstract feature
+ */
+export default class BaseFeature {
+  /**
+   * @param {string} hookName hook to fire
+   */
+  hookName = "";
+
+  /**
+   * @param {null|boolean} byPassSetting if the setting check should be bypass
+   */
+  byPassSetting = null;
+
+  /**
+   * @param {string} settingName the setting to check before firing the feature
+   */
+  settingName = "";
+
+  /**
+   * On hook firing
+   */
+  onHook() {
+    // Hook definition must be provide by the class
+    if (!this.hookName) {
+      throw new Error("Missing hook definition");
+    }
+
+    Hooks.once(this.hookName, this.handle.bind(this));
+  }
+
+  /**
+   * Handle the firing of the feature
+   */
+  handle() {
+    // Check setting
+    this.setting =
+      this.byPassSetting ?? game.settings.get(CONSTANTS.MODULE_NAME, SETTINGS[this.settingName]);
+
+    if (!this.setting) return;
+
+    // Fire feature
+    this.fireFeature();
+  }
+
+  /**
+   * Feature will be fired if setting is truthy or bypassed
+   */
+  fireFeature() {}
+}

modules/features/BlurInterface.js

@@ -0,0 +1,17 @@
+import BaseFeature from "./BaseFeature";
+
+/**
+ * Applies blur effects
+ */
+export class BlurInterface extends BaseFeature {
+  /** @override */
+  settingName = "ENABLE_BLUR";
+
+  /** @override */
+  hookName = "ready";
+
+  /** @override */
+  fireFeature() {
+    document.body.classList.add("shouldBlur");
+  }
+}

modules/features/BlurWarningMessage.js

@@ -0,0 +1,59 @@
+import { CONSTANTS } from "../shared/constants";
+import BaseFeature from "./BaseFeature";
+
+/**
+ * Create a warning message for blurred content
+ */
+export class BlurWarningMessage extends BaseFeature {
+  /** @override */
+  byPassSetting = true;
+
+  /** @override */
+  hookName = "ready";
+
+  /** @override */
+  fireFeature() {
+    // Listener
+    document.body.addEventListener("click", async (event) => {
+      if (
+        event.target.classList.contains("glass-theme-blur-message") ||
+        event.target.parentNode.classList.contains("glass-theme-blur-message")
+      ) {
+        new SettingsConfig().render(true);
+        await new Promise((r) => setTimeout(r, 100)).then(() =>
+          ui.activeWindow.activateTab(CONSTANTS.MODULE_NAME)
+        );
+      }
+    });
+
+    // Chat message
+    if (!game.user.getFlag(CONSTANTS.MODULE_NAME, "blurWarningMessageShown")) {
+      const content = [
+        `
+          <div>
+            <h3>Theme: Glass</h3>
+            <p>${game.i18n.localize(`${CONSTANTS.MODULE_NAME}.blurWarningMessage`)}</p>
+            <p>
+              <button type="button" class="glass-theme-blur-message" data-key="theme-glass.enable-blur">
+                <i class="fas fa-cogs"></i> ${game.i18n.localize("SETTINGS.Configure")}
+              </button>
+            </p>
+          </div>
+        `
+      ];
+
+      const chatData = content.map((c) => {
+        return {
+          whisper: [game.user.id],
+          speaker: { alias: "Theme: Glass" },
+          flags: { core: { canPopout: true } },
+          content: c
+        };
+      });
+
+      ChatMessage.implementation.createDocuments(chatData);
+
+      game.user.setFlag(CONSTANTS.MODULE_NAME, "blurWarningMessageShown", true);
+    }
+  }
+}

modules/features/ChatOpacity.js

@@ -0,0 +1,46 @@
+import { SETTINGS } from "../settings";
+import { CONSTANTS } from "../shared/constants";
+import BaseFeature from "./BaseFeature";
+
+/**
+ * Applies a chat opacity
+ */
+export class ChatOpacity extends BaseFeature {
+  /** @override */
+  settingName = "CHAT_OPACITY";
+
+  /** @override */
+  hookName = "ready";
+
+  /** @override */
+  fireFeature() {
+    document.body.classList.add("addChatOpacity");
+    document.documentElement.style.setProperty(
+      "--chat-opactity-value",
+      game.settings.get(CONSTANTS.MODULE_NAME, SETTINGS.CHAT_OPACITY_VALUE)
+    );
+
+    // Handle old chat cards
+    document
+      .querySelectorAll("#chat-log li.chat-message")
+      .forEach((e) => e.classList.add("opacity-transition"));
+
+    // Handle newly created chat cards
+    this.handleNewChatCards();
+  }
+
+  /**
+   * Handle the opacity of a newly created chat cards
+   */
+  handleNewChatCards() {
+    Hooks.on("renderChatMessage", async (message, html) => {
+      html[0].classList.add("opacity-delay");
+
+      const timer = game.settings.get(CONSTANTS.MODULE_NAME, SETTINGS.CHAT_OPACITY_TIMER) * 1000;
+      await new Promise((r) => setTimeout(r, timer)).then(() => {
+        html[0].classList.add("opacity-transition");
+        html[0].classList.remove("opacity-delay");
+      });
+    });
+  }
+}

modules/features/CollapseHotbar.js

@@ -0,0 +1,17 @@
+import BaseFeature from "./BaseFeature";
+
+/**
+ * Collapses macro hotbar
+ */
+export class CollapseHotbar extends BaseFeature {
+  /** @override */
+  settingName = "COLLAPSE_HOTBAR";
+
+  /** @override */
+  hookName = "renderHotbar";
+
+  /** @override */
+  fireFeature() {
+    ui.hotbar.collapse();
+  }
+}

modules/features/HideLogo.js

@@ -0,0 +1,17 @@
+import BaseFeature from "./BaseFeature";
+
+/**
+ * Hides the fvtt logo
+ */
+export class HideLogo extends BaseFeature {
+  /** @override */
+  settingName = "HIDE_LOGO";
+
+  /** @override */
+  hookName = "ready";
+
+  /** @override */
+  fireFeature() {
+    document.body.classList.add("hideLogo");
+  }
+}

modules/features/ReduceScenesHeight.js

@@ -0,0 +1,17 @@
+import BaseFeature from "./BaseFeature";
+
+/**
+ * Reduces scenes height
+ */
+export class ReduceScenesHeight extends BaseFeature {
+  /** @override */
+  settingName = "REDUCE_SCENE_LIST";
+
+  /** @override */
+  hookName = "ready";
+
+  /** @override */
+  fireFeature() {
+    document.body.classList.add("changeScenesHeight");
+  }
+}

modules/features/RemovePause.js

@@ -0,0 +1,19 @@
+import BaseFeature from "./BaseFeature";
+
+/**
+ * Removes pause
+ */
+export class RemovePause extends BaseFeature {
+  /** @override */
+  settingName = "NO_PAUSE";
+
+  /** @override */
+  hookName = "ready";
+
+  /** @override */
+  fireFeature() {
+    if (game.users.current.isGM && game.paused) {
+      game.togglePause(false, true);
+    }
+  }
+}

modules/features/index.js

@@ -0,0 +1,7 @@
+export * from "./BlurInterface.js";
+export * from "./BlurWarningMessage.js";
+export * from "./ChatOpacity.js";
+export * from "./CollapseHotbar.js";
+export * from "./HideLogo.js";
+export * from "./ReduceScenesHeight.js";
+export * from "./RemovePause.js";