Fix bug with collapsible grids inside of group widget

Also move utils to new file
glanceapp · Sep 29, 2024 · b0c4d70 · b0c4d70
1 parent d5fa642
commit b0c4d70
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 29 deletions.
diff --git a/internal/assets/static/js/main.js b/internal/assets/static/js/main.js
@@ -1,27 +1,5 @@
 import { setupPopovers } from './popover.js';
-
-function throttledDebounce(callback, maxDebounceTimes, debounceDelay) {
-    let debounceTimeout;
-    let timesDebounced = 0;
-
-    return function () {
-        if (timesDebounced == maxDebounceTimes) {
-            clearTimeout(debounceTimeout);
-            timesDebounced = 0;
-            callback();
-            return;
-        }
-
-        clearTimeout(debounceTimeout);
-        timesDebounced++;
-
-        debounceTimeout = setTimeout(() => {
-            timesDebounced = 0;
-            callback();
-        }, debounceDelay);
-    };
-};
-
+import { throttledDebounce, isElementVisible } from './utils.js';
 
 async function fetchPageContent(pageData) {
     // TODO: handle non 200 status codes/time outs
@@ -427,7 +405,7 @@ function setupCollapsibleGrids() {
 
         const button = attachExpandToggleButton(gridElement);
 
-        let cardsPerRow = 2;
+        let cardsPerRow;
 
         const resolveCollapsibleItems = () => {
             const hideItemsAfterIndex = cardsPerRow * collapseAfterRows;
@@ -457,12 +435,11 @@ function setupCollapsibleGrids() {
             }
         };
 
-        afterContentReady(() => {
-            cardsPerRow = getCardsPerRow();
-            resolveCollapsibleItems();
-        });
+        const observer = new ResizeObserver(() => {
+            if (!isElementVisible(gridElement)) {
+                return;
+            }
 
-        window.addEventListener("resize", () => {
             const newCardsPerRow = getCardsPerRow();
 
             if (cardsPerRow == newCardsPerRow) {
@@ -472,6 +449,8 @@ function setupCollapsibleGrids() {
             cardsPerRow = newCardsPerRow;
             resolveCollapsibleItems();
         });
+
+        afterContentReady(() => observer.observe(gridElement));
     }
 }
 

diff --git a/internal/assets/static/js/utils.js b/internal/assets/static/js/utils.js
@@ -0,0 +1,25 @@
+export function throttledDebounce(callback, maxDebounceTimes, debounceDelay) {
+    let debounceTimeout;
+    let timesDebounced = 0;
+
+    return function () {
+        if (timesDebounced == maxDebounceTimes) {
+            clearTimeout(debounceTimeout);
+            timesDebounced = 0;
+            callback();
+            return;
+        }
+
+        clearTimeout(debounceTimeout);
+        timesDebounced++;
+
+        debounceTimeout = setTimeout(() => {
+            timesDebounced = 0;
+            callback();
+        }, debounceDelay);
+    };
+};
+
+export function isElementVisible(element) {
+    return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
+}