v1.2.7

- Style changes to interface elements for improved compatibility with other modules - Added setting for keeping Player List always on - Fixed icon color for attack button on Dnd5e
crlngn · Feb 8, 2025 · 0017d23 · 0017d23
1 parent c4d9e08
commit 0017d23
Show file tree

Hide file tree

Showing 22 changed files with 227 additions and 75 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-**Latest Version:** 1.2.6
+**Latest Version:** 1.2.7
 
 **Compatibility:** 
 - Foundry VTT version 12.328+

diff --git a/dist/module.json b/dist/module.json
@@ -1,7 +1,7 @@
 {
   "id": "crlngn-ui",
   "title": "Carolingian UI",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "description": "Style changes and tweaks to improve look and feel of Foundry UI",
   "url": "https://github.com/crlngn/crlngn-ui",
   "manifest": "https://github.com/crlngn/crlngn-ui/releases/latest/download/module.json",

diff --git a/dist/scripts/module.js b/dist/scripts/module.js
diff --git a/dist/scripts/module.js.map b/dist/scripts/module.js.map
diff --git a/dist/styles/module.css b/dist/styles/module.css
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "crlngn-ui",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "description": "Tweaks and style adjustments to improve UI on Foundry",
   "license": "MIT",
   "private": true,

diff --git a/src/components/GeneralUtil.mjs b/src/components/GeneralUtil.mjs
@@ -14,4 +14,12 @@ export class GeneralUtil {
   static html(parent, selector) {
     return parent.querySelector(selector);
   }
+
+  static getFullWidth(element) {
+    const style = window.getComputedStyle(element);
+    if (style.width === '0px') {
+      return 0;
+    }
+    return element.offsetWidth;
+  }
 }
diff --git a/src/components/Main.mjs b/src/components/Main.mjs
@@ -9,21 +9,21 @@ export class Main {
   static init(){
 
     Hooks.once(HOOKS_CORE.INIT, () => { 
-
+      document.querySelector("#ui-middle")?.classList.add("crlngn-ui");
       LogUtil.log("Initiating module", [], true); 
       // Main.setupKeyListeners(); 
       SettingsUtil.registerSettings();
       Hooks.on(HOOKS_CORE.RENDER_CHAT_MESSAGE, Main.#onRenderChatMessage); 
     });
 
     Hooks.once(HOOKS_CORE.READY, () => {
-      TopNavigation.init(); 
 
       var isDebugOn = SettingsUtil.get('debug-mode');
       if(isDebugOn){CONFIG.debug.hooks = true};
       LogUtil.log("Core Ready", []);
-    })
 
+      TopNavigation.init(); 
+    })
 
   }
 

diff --git a/src/components/SettingsUtil.mjs b/src/components/SettingsUtil.mjs
@@ -36,9 +36,10 @@ export class SettingsUtil {
         }
 
         LogUtil.log("registerSettings",[setting.tag, SettingsUtil.get(setting.tag)]);
-        SettingsUtil.applyLeftControlsSettings();
       });
 
+      Hooks.on(HOOKS_CORE.RENDER_SCENE_CONTROLS, SettingsUtil.applyLeftControlsSettings);
+      Hooks.on(HOOKS_CORE.RENDER_PLAYERS_LIST, SettingsUtil.applyPlayersListSettings); 
       Hooks.on(HOOKS_CORE.RENDER_HOTBAR, SettingsUtil.applyHotBarSettings);
 
       // apply chat style settings
@@ -122,6 +123,8 @@ export class SettingsUtil {
           SettingsUtil.applyHotBarSettings(); break;
         case SETTINGS.autoHideLeftControls.tag:
           SettingsUtil.applyLeftControlsSettings(); break;
+        case SETTINGS.autoHidePlayerList.tag:
+          SettingsUtil.applyPlayersListSettings(); break;
         default:
           // do nothing
       }
@@ -159,5 +162,14 @@ export class SettingsUtil {
         controls.classList.remove("auto-hide");
       }
     }
+
+    static applyPlayersListSettings(){
+      LogUtil.log("applyPlayersListSettings",[document.querySelector("#ui-left aside#players"), document.querySelector("aside#players"), SettingsUtil.get(SETTINGS.autoHidePlayerList.tag)]); 
+      if(SettingsUtil.get(SETTINGS.autoHidePlayerList.tag)){
+        document.querySelector("#ui-left aside#players")?.classList.add("auto-hide");
+      }else{
+        document.querySelector("#ui-left aside#players")?.classList.remove("auto-hide");
+      }
+    }
 }
 
diff --git a/src/components/TopNavUtil.mjs b/src/components/TopNavUtil.mjs
@@ -8,23 +8,37 @@ export class TopNavigation {
   static #navElem;
   static #scenesList;
   static #navTimeout;
+  static #navExtras;
 
   static init(){
     // if user disabled Scene Navigation Styles,
     // skip everything
     if(SettingsUtil.get(SETTINGS.sceneNavDisabled.tag)){
+      document.querySelector("#ui-middle")?.classList.remove("crlngn-ui");
       return;
     }else{
       document.querySelector("#ui-middle")?.classList.add("crlngn-ui");
     }
 
-    Hooks.on(HOOKS_CORE.RENDER_SCENE_NAV, (a, b, c) => { 
-      TopNavigation.addListeners()
+    TopNavigation.addListeners(); 
+
+    LogUtil.log(HOOKS_CORE.RENDER_SCENE_NAV, [ui.nav, SettingsUtil.get(SETTINGS.sceneNavCollapsed.tag)]); 
+    // TopNavigation.setNavPosition(0);
+
+    TopNavigation.placeNavButtons(); 
+    if(SettingsUtil.get(SETTINGS.sceneNavCollapsed.tag)){ 
+      ui.nav.collapse();
+    }else{
+      ui.nav.expand();
+    }
+
+    Hooks.on(HOOKS_CORE.RENDER_SCENE_NAV, () => { 
+      TopNavigation.addListeners(); 
 
       LogUtil.log(HOOKS_CORE.RENDER_SCENE_NAV, [ui.nav, SettingsUtil.get(SETTINGS.sceneNavCollapsed.tag)]); 
-      TopNavigation.setNavPosition();
-      TopNavigation.placeNavButtons();
+      // TopNavigation.setNavPosition(0);
 
+      TopNavigation.placeNavButtons(); 
       if(SettingsUtil.get(SETTINGS.sceneNavCollapsed.tag)){ 
         ui.nav.collapse();
       }else{
@@ -49,8 +63,9 @@ export class TopNavigation {
   static addListeners(){
     this.#navElem = document.querySelector("#navigation"); 
     this.#scenesList = document.querySelector("#scene-list"); 
+    this.#navExtras = document.querySelector("#navigation .nav-item.is-root"); 
 
-    this.#navElem.addEventListener("mouseenter", ()=>{
+    this.#navElem?.addEventListener("mouseenter", ()=>{
       if( !SettingsUtil.get(SETTINGS.sceneNavCollapsed.tag) ||
           !SettingsUtil.get(SETTINGS.showSceneNavOnHover.tag) ){ 
             return;
@@ -64,7 +79,7 @@ export class TopNavigation {
       navigation.classList.remove("collapsed");
     });
 
-    this.#navElem.addEventListener("mouseleave", (e)=>{
+    this.#navElem?.addEventListener("mouseleave", (e)=>{
       if( !SettingsUtil.get(SETTINGS.sceneNavCollapsed.tag) ||
           !SettingsUtil.get(SETTINGS.showSceneNavOnHover.tag) ){ 
             return;
@@ -87,7 +102,11 @@ export class TopNavigation {
   }
 
   static placeNavButtons(){ 
-
+    const isNavOverflowing = this.#scenesList?.scrollWidth >= this.#navElem?.offsetWidth;//this.#navElem?.scrollWidth >= this.#navElem?.offsetWidth;
+    LogUtil.log("placeNavButtons", [ isNavOverflowing, this.#scenesList?.scrollWidth, this.#navElem?.offsetWidth]);
+    if(!isNavOverflowing){
+      return;
+    }
     const btnLast = document.createElement("button"); 
     btnLast.classList.add("crlngn"); 
     btnLast.classList.add("ui-nav-left"); 
@@ -106,45 +125,52 @@ export class TopNavigation {
     btnNext.append(arrowRight); 
     btnNext.addEventListener("click", this.#onNavNext);
 
-    this.#navElem.appendChild(btnLast);
-    this.#navElem.appendChild(btnNext);
+    this.#navElem?.appendChild(btnLast);
+    this.#navElem?.appendChild(btnNext);
   }
 
   static #onNavLast = (e) => {
+    const extrasWidth = GeneralUtil.isModuleOn("compact-scene-navigation") ? this.#navExtras?.offsetWidth : 0;
     const firstElem = this.#scenesList?.querySelector("li:first-child");
+    const firstScene = this.#scenesList?.querySelector("li.nav-item:not(.is-root):first-of-type");
     const itemWidth = firstElem.offsetWidth;
-    const itemsPerPage = Math.floor(this.#scenesList?.offsetWidth/itemWidth);
+    const itemsPerPage = Math.floor((this.#navElem?.offsetWidth - extrasWidth)/itemWidth);
     const currScrollPos = parseInt(firstElem.style.marginLeft || 0); 
+    let newMargin = 0;
     let newPos = 0;
 
     if(currScrollPos < 0){
-      const newMargin = Number(currScrollPos + (itemWidth*itemsPerPage));
+      newMargin = Number(currScrollPos + (itemWidth*itemsPerPage) + extrasWidth);
       newPos = (newMargin < 0 ? newMargin : 0);
     }
     SettingsUtil.set(SETTINGS.sceneNavPos.tag, newPos);
     TopNavigation.setNavPosition(newPos); 
 
-    LogUtil.log("onNavLast", [itemsPerPage, itemWidth, currScrollPos, newPos]);
+    LogUtil.log("onNavLast", [itemsPerPage, newPos]);
   }
 
   static #onNavNext = (e) => {
+    const extrasWidth = GeneralUtil.isModuleOn("compact-scene-navigation") ? this.#navExtras?.offsetWidth : 0;
     const firstElem = this.#scenesList?.querySelector("li:first-child");
-    const itemWidth = firstElem.offsetWidth;
-    const itemsPerPage = Math.floor(this.#scenesList?.offsetWidth/itemWidth);
+    const firstScene = this.#scenesList?.querySelector("li.nav-item:not(.is-root)");
+    const itemWidth = firstScene.offsetWidth;
+    const itemsPerPage = Math.floor((this.#navElem?.offsetWidth - extrasWidth)/itemWidth);
     const currScrollPos = parseInt(firstElem.style.marginLeft || 0); 
-
+    let newMargin, minMargin = 0;
     let newPos = currScrollPos;
-    LogUtil.log("onNavNext", [firstElem.style.marginLeft, currScrollPos]);
-
-    if(this.#scenesList?.scrollWidth + currScrollPos > this.#scenesList?.offsetWidth){
-      const newMargin = Number(currScrollPos - (itemWidth*itemsPerPage));
-      const minMargin = -(this.#scenesList?.offsetWidth - itemWidth);
+    LogUtil.log("onNavNext a", [itemWidth, itemsPerPage]);
+
+    let diff = this.#scenesList?.scrollWidth - this.#navElem?.offsetWidth;
+    // if(this.#scenesList?.offsetWidth + currScrollPos + 70 > this.#navElem?.offsetWidth){
+    if(diff > -70){
+      newMargin = currScrollPos - (itemWidth*itemsPerPage) + extrasWidth;
+      minMargin = currScrollPos - this.#scenesList?.scrollWidth + itemWidth + extrasWidth;
       newPos = (newMargin > minMargin ? newMargin : minMargin);
     }
     SettingsUtil.set(SETTINGS.sceneNavPos.tag, newPos);
     TopNavigation.setNavPosition(newPos);
-
-    LogUtil.log("onNavNext", [itemsPerPage, itemWidth, currScrollPos, newPos, this.#scenesList?.offsetWidth]);
+    LogUtil.log("onNavNext b", [this.#scenesList?.scrollWidth, this.#navElem?.offsetWidth, newMargin, minMargin, currScrollPos]);
+    LogUtil.log("onNavNext c", [itemsPerPage, newPos]);
   }
 
   static setNavPosition(pos){

diff --git a/src/constants/Hooks.mjs b/src/constants/Hooks.mjs
@@ -14,7 +14,9 @@ export const HOOKS_CORE = {
   REFRESH_MEASURED_TEMPLATE: "refreshMeasuredTemplate",
   GET_SCENE_CONTROLS: "getSceneControlButtons",
   RENDER_SCENE_NAV: "renderSceneNavigation",
+  RENDER_SCENE_CONTROLS: "renderSceneControls",
   RENDER_HOTBAR: "renderHotbar",
+  RENDER_PLAYERS_LIST: "renderPlayerList",
   COLLAPSE_SCENE_NAV: "collapseSceneNavigation",
   EXPAND_SCENE_NAV: "expandSceneNavigation"
 }
diff --git a/src/constants/Settings.mjs b/src/constants/Settings.mjs
@@ -28,7 +28,7 @@ export const SETTINGS = {
     hint: "You can type the name of custom fonts loaded on Foundry core and they will be used throughout the interface. Names with spaces must be written with double quotes (\"Font Name\"). If the font doesn't load you haven't typed the name correctly, or the font was not found. Default value: "+`"Work Sans", Arial, sans-serif`, 
     propType: String, 
     inputType: SETTING_INPUT.text, 
-    default: `"Work Sans", Arial, sans-serif`, 
+    default: `"Work Sans", "Roboto", Arial, sans-serif`, 
     scope: SETTING_SCOPE.client, 
     config: true, 
     requiresReload: true 
@@ -115,4 +115,16 @@ export const SETTINGS = {
     requiresReload: false 
   },
 
+  autoHidePlayerList: { 
+    tag: "auto-hide-player-list", 
+    label: "Auto hide player list", 
+    hint: "Enable to keep player list on the bottom left minimized unless hovered", 
+    propType: Boolean,
+    inputType: SETTING_INPUT.checkbox,
+    default: true, 
+    scope: SETTING_SCOPE.client, 
+    config: true, 
+    requiresReload: false 
+  },
+
 }
diff --git a/src/module.json b/src/module.json
@@ -1,7 +1,7 @@
 {
   "id": "crlngn-ui",
   "title": "Carolingian UI",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "description": "Style changes and tweaks to improve look and feel of Foundry UI",
   "url": "https://github.com/crlngn/crlngn-ui",
   "manifest": "https://github.com/crlngn/crlngn-ui/releases/latest/download/module.json",