From f0344822cb28f223f18af0ae5bcf651e727e3432 Mon Sep 17 00:00:00 2001
From: Lex Lim <hyperzlib@outlook.com>
Date: Mon, 25 Nov 2024 08:42:05 +0000
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=B8=83=E5=B1=80=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 modules/masonry/ext.isekai.masonry.base.js | 33 ++++++++++++++++++++--
 modules/masonry/ext.isekai.masonry.less    |  4 +++
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/modules/masonry/ext.isekai.masonry.base.js b/modules/masonry/ext.isekai.masonry.base.js
index fe9ca8e..7d8aa56 100644
--- a/modules/masonry/ext.isekai.masonry.base.js
+++ b/modules/masonry/ext.isekai.masonry.base.js
@@ -1,9 +1,38 @@
+function debounce(func, wait, immediate) {
+    let timeout;
+    return function () {
+        let context = this;
+        let args = arguments;
+        let later = function () {
+            timeout = null;
+            if (!immediate) {
+                func.apply(context, args);
+            }
+        };
+        let callNow = immediate && !timeout;
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+        if (callNow) {
+            func.apply(context, args);
+        }
+    };
+}
+
 $(function () {
-    console.log('IsekaiWidgets: Masonry extension loaded');
-    new isekai.lib.Masonry('.isekai-masonry', {
+    let masonry = new isekai.lib.Masonry('.isekai-masonry', {
         itemSelector: '.isekai-masonry-item',
         columnWidth: '.isekai-masonry-sizer',
         gutter: '.isekai-masonry-gutter-sizer',
         percentPosition: true
     });
+
+    let resizeObserver = new ResizeObserver(debounce(function () {
+        console.log('masonry resize');
+        masonry.layout();
+    }, 100));
+
+    let items = document.querySelectorAll('.isekai-masonry-item');
+    items.forEach(function (item) {
+        resizeObserver.observe(item);
+    });
 });
\ No newline at end of file
diff --git a/modules/masonry/ext.isekai.masonry.less b/modules/masonry/ext.isekai.masonry.less
index 77409e9..a5b483f 100644
--- a/modules/masonry/ext.isekai.masonry.less
+++ b/modules/masonry/ext.isekai.masonry.less
@@ -13,6 +13,10 @@
         width: ~"calc(var(--masonry-col-width) - var(--masonry-gutter) - 1px)";
     }
 
+    .isekai-masonry-item {
+        margin-bottom: ~"var(--masonry-gutter)";
+    }
+
     // Column width tools
     .col-1 {
         width: 100%; // Fallback