Merge pull request #1296 from StandingPadAnimations/gallery-magic-grid

Gallery: Switch Packery to MagicGrid

assets/js/shortcodes/gallery.js

@@ -1,22 +1,20 @@
-function _getDefaultPackeryOptions() {
-    return {
-        percentPosition: true,
-        gutter: 5,
-        resize: true
-    };
-}
-
 (function init() {
 
     $(window).on("load", function () {
         let packeries = [];
         let nodeGalleries = document.querySelectorAll('.gallery');
 
         nodeGalleries.forEach(nodeGallery => {
-            // TODO : implement a reader of Packery configuration _getPackeryOptions; for example by reading data-attribute
-            let packery = new Packery(nodeGallery, _getDefaultPackeryOptions());
-            packeries.push(packery);
+            let magicGrid = new MagicGrid({
+                container: nodeGallery,  
+                static: true,
+                gutter: 5,
+                animate: false,
+            });
+            magicGrid.listen();
+            magicGrids.push(magicGrid);
         });
+        console.log("Galleries founded and initialized with MagicGrid", magicGrids);
         console.groupEnd();
     });
-})();
+})();

layouts/partials/vendor.html

@@ -52,8 +52,8 @@
 
 {{/* Packery */}}
 {{ if .Page.HasShortcode "gallery" }}
-    {{ $packeryLib := resources.Get "lib/packery/packery.pkgd.min.js" }}
-    <script defer src="{{ $packeryLib.RelPermalink }}" integrity="{{ $packeryLib.Data.Integrity }}"></script>
+    {{ $magicGridLib := resources.Get "lib/magic-grid/magic-grid.min.js" }}
+    <script defer src="{{ $magicGridLib.RelPermalink }}" integrity="{{ $magicGridLib.Data.Integrity }}"></script>
 
     {{ $jsShortcodeGallery := resources.Get "js/shortcodes/gallery.js" }}
     {{ $jsShortcodeGallery = $jsShortcodeGallery | resources.Minify | resources.Fingerprint "sha512" }}
@@ -64,4 +64,4 @@
 {{ if or (.Page.HasShortcode "carousel") (.Page.HasShortcode "timeline")}}
 {{ $twelementsLib := resources.Get "lib/tw-elements/index.min.js" }}
 <script defer src="{{ $twelementsLib.RelPermalink }}" integrity="{{ $twelementsLib.Data.Integrity }}"></script>
-{{ end }}
+{{ end }}

package.json

@@ -39,8 +39,8 @@
     "fuse.js": "^7.0.0",
     "jquery": "^3.7.1",
     "katex": "^0.16.9",
+    "magic-grid": "^3.2.4",
     "mermaid": "^10.9.0",
-    "packery": "^2.1.2",
     "prettier": "^3.2.5",
     "prettier-plugin-go-template": "^0.0.15",
     "prettier-plugin-tailwindcss": "^0.5.11",
@@ -90,8 +90,8 @@
       "to": "assets/lib/jquery/jquery.slim.min.js"
     },
     {
-      "from": "node_modules/packery/dist/packery.pkgd.min.js",
-      "to": "assets/lib/packery/packery.pkgd.min.js"
+      "from": "node_modules/magic-grid/dist/magic-grid.min.js",
+      "to": "assets/lib/magic-grid/magic-grid.min.js"
     },
     {
       "from": "node_modules/tw-elements/js/tw-elements.umd.min.js",