Swapped out Packery for MagicGrid

This switches the Gallery shortcode to use MagicGrid instead of Packery. The main benefit is size (2.7k as opposed to 32k), and the results are mostly similar minus a few differences in image position.
2025-02-02 03:22:33 -06:00 · 2024-03-06 20:04:54 -06:00 · 2024-03-06 20:04:54 -06:00 · f1d582ff98
commit f1d582ff98
parent ef4068911b
6 changed files with 26 additions and 82 deletions
--- a/assets/js/shortcodes/gallery.js
+++ b/assets/js/shortcodes/gallery.js
@ -1,11 +1,3 @@
-function _getDefaultPackeryOptions() {
-    return {
-        percentPosition: true,
-        gutter: 5,
-        resize: true
-    };
-}
-
 (function init() {

    $(window).on("load", function () {
@ -13,10 +5,16 @@ function _getDefaultPackeryOptions() {
        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", packeries);
        console.groupEnd();
    });
-})();
+})();
--- a/assets/lib/magic-grid/magic-grid.min.js
+++ b/assets/lib/magic-grid/magic-grid.min.js
@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.MagicGrid=e()}(this,function(){"use strict";var t=function(t){if(!t)throw new Error("No config object has been provided.");"boolean"!=typeof t.useTransform&&(t.useTransform=!0),"number"!=typeof t.gutter&&(t.gutter=25),t.container||e("container"),t.items||t.static||e("items or static")},e=function(t){throw new Error("Missing property '"+t+"' in MagicGrid config")},i=function(t){var e=t[0];for(var i of t)i.height<e.height&&(e=i);return e},n=function(e){t(e),e.container instanceof HTMLElement?(this.container=e.container,this.containerClass=e.container.className):(this.containerClass=e.container,this.container=document.querySelector(e.container)),this.items=this.container.children,this.static=e.static||!1,this.size=e.items,this.gutter=e.gutter,this.maxColumns=e.maxColumns||!1,this.useMin=e.useMin||!1,this.useTransform=e.useTransform,this.animate=e.animate||!1,this.started=!1,this.init()};return n.prototype.init=function(){if(this.ready()&&!this.started){this.container.style.position="relative";for(var t=0;t<this.items.length;t++){var e=this.items[t].style;e.position="absolute",this.animate&&(e.transition=(this.useTransform?"transform":"top, left")+" 0.2s ease")}this.started=!0}},n.prototype.colWidth=function(){return this.items[0].getBoundingClientRect().width+this.gutter},n.prototype.setup=function(){var t=this.container.getBoundingClientRect().width,e=this.colWidth(),i=Math.floor(t/e)||1,n=[];this.maxColumns&&i>this.maxColumns&&(i=this.maxColumns);for(var s=0;s<i;s++)n[s]={height:0,index:s};return{cols:n,wSpace:t-i*e+this.gutter}},n.prototype.nextCol=function(t,e){return this.useMin?i(t):t[e%t.length]},n.prototype.positionItems=function(){var t=this.setup(),e=t.cols,i=t.wSpace,n=0,s=this.colWidth();i=Math.floor(i/2);for(var o=0;o<this.items.length;o++){var r=this.nextCol(e,o),a=this.items[o],h=r.height?this.gutter:0,c=r.index*s+i+"px",u=r.height+h+"px";this.useTransform?a.style.transform="translate("+c+", "+u+")":(a.style.top=u,a.style.left=c),r.height+=a.getBoundingClientRect().height+h,r.height>n&&(n=r.height)}this.container.style.height=n+"px"},n.prototype.ready=function(){return!!this.static||this.items.length>=this.size},n.prototype.getReady=function(){var t=this,e=setInterval(function(){t.container=document.querySelector(t.containerClass),t.items=t.container.children,t.ready()&&(clearInterval(e),t.init(),t.listen())},100)},n.prototype.listen=function(){var t=this;if(this.ready()){var e;window.addEventListener("resize",function(){e||(e=setTimeout(function(){t.positionItems(),e=null},200))}),this.positionItems()}else this.getReady()},n});
--- a/assets/lib/packery/packery.pkgd.min.js
+++ b/assets/lib/packery/packery.pkgd.min.js
--- a/layouts/partials/vendor.html
+++ b/layouts/partials/vendor.html
@ -48,8 +48,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" }}
@ -60,4 +60,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 }}
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "hugo-blowfish-theme",
-  "version": "2.60.0",
+  "version": "2.61.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "hugo-blowfish-theme",
-      "version": "2.60.0",
+      "version": "2.61.0",
      "hasInstallScript": true,
      "license": "MIT",
      "dependencies": {
@ -21,7 +21,7 @@
        "fuse.js": "^7.0.0",
        "jquery": "^3.7.1",
        "katex": "^0.16.9",
-        "packery": "^2.1.2",
+        "magic-grid": "^3.2.4",
        "prettier": "^3.2.5",
        "prettier-plugin-go-template": "^0.0.15",
        "prettier-plugin-tailwindcss": "^0.5.11",
@ -879,12 +879,6 @@
        "node": ">= 14"
      }
    },
-    "node_modules/desandro-matches-selector": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz",
-      "integrity": "sha512-+1q0nXhdzg1IpIJdMKalUwvvskeKnYyEe3shPRwedNcWtnhEKT3ZxvFjzywHDeGcKViIxTCAoOYQWP1qD7VNyg==",
-      "dev": true
-    },
    "node_modules/devtools-protocol": {
      "version": "0.0.1249869",
      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1249869.tgz",
@ -1010,12 +1004,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/ev-emitter": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz",
-      "integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q==",
-      "dev": true
-    },
    "node_modules/extract-zip": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
@ -1096,15 +1084,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/fizzy-ui-utils": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz",
-      "integrity": "sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==",
-      "dev": true,
-      "dependencies": {
-        "desandro-matches-selector": "^2.0.0"
-      }
-    },
    "node_modules/foreground-child": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
@ -1176,12 +1155,6 @@
        "node": "6.* || 8.* || >= 10.*"
      }
    },
-    "node_modules/get-size": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/get-size/-/get-size-2.0.3.tgz",
-      "integrity": "sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q==",
-      "dev": true
-    },
    "node_modules/get-stream": {
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
@ -1580,6 +1553,12 @@
        "node": "14 || >=16.14"
      }
    },
+    "node_modules/magic-grid": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/magic-grid/-/magic-grid-3.2.4.tgz",
+      "integrity": "sha512-zdV8b4q3YpmWZKLcbbfKisxAWlYF9S2dguCi3LR9pq59yq2pl140td4ViwDqYkZGZ6TP+B7YaExaVE3YNqN7/g==",
+      "dev": true
+    },
    "node_modules/merge2": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@ -1741,17 +1720,6 @@
        "wrappy": "1"
      }
    },
-    "node_modules/outlayer": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/outlayer/-/outlayer-2.1.1.tgz",
-      "integrity": "sha512-+GplXsCQ3VrbGujAeHEzP9SXsBmJxzn/YdDSQZL0xqBmAWBmortu2Y9Gwdp9J0bgDQ8/YNIPMoBM13nTwZfAhw==",
-      "dev": true,
-      "dependencies": {
-        "ev-emitter": "^1.0.0",
-        "fizzy-ui-utils": "^2.0.0",
-        "get-size": "^2.0.2"
-      }
-    },
    "node_modules/pac-proxy-agent": {
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-7.0.1.tgz",
@ -1784,16 +1752,6 @@
        "node": ">= 14"
      }
    },
-    "node_modules/packery": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/packery/-/packery-2.1.2.tgz",
-      "integrity": "sha512-Coc+8Atz03c0iu1RK0PZIJMKcKrE4i9Z8UBBywqz7Dhy40mMPM5wMQfqO9P2eqFP+lxKjGMTHgRAwjBQc+AQ5w==",
-      "dev": true,
-      "dependencies": {
-        "get-size": "^2.0.2",
-        "outlayer": "^2.0.0"
-      }
-    },
    "node_modules/parent-module": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
--- a/package.json
+++ b/package.json
@ -39,7 +39,7 @@
    "fuse.js": "^7.0.0",
    "jquery": "^3.7.1",
    "katex": "^0.16.9",
-    "packery": "^2.1.2",
+    "magic-grid": "^3.2.4",
    "prettier": "^3.2.5",
    "prettier-plugin-go-template": "^0.0.15",
    "prettier-plugin-tailwindcss": "^0.5.11",
@ -85,8 +85,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",
				`@ -0,0 +1 @@`
				!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.MagicGrid=e()}(this,function(){"use strict";var t=function(t){if(!t)throw new Error("No config object has been provided.");"boolean"!=typeof t.useTransform&&(t.useTransform=!0),"number"!=typeof t.gutter&&(t.gutter=25),t.container\|\|e("container"),t.items\|\|t.static\|\|e("items or static")},e=function(t){throw new Error("Missing property '"+t+"' in MagicGrid config")},i=function(t){var e=t[0];for(var i of t)i.height<e.height&&(e=i);return e},n=function(e){t(e),e.container instanceof HTMLElement?(this.container=e.container,this.containerClass=e.container.className):(this.containerClass=e.container,this.container=document.querySelector(e.container)),this.items=this.container.children,this.static=e.static\|\|!1,this.size=e.items,this.gutter=e.gutter,this.maxColumns=e.maxColumns\|\|!1,this.useMin=e.useMin\|\|!1,this.useTransform=e.useTransform,this.animate=e.animate\|\|!1,this.started=!1,this.init()};return n.prototype.init=function(){if(this.ready()&&!this.started){this.container.style.position="relative";for(var t=0;t<this.items.length;t++){var e=this.items[t].style;e.position="absolute",this.animate&&(e.transition=(this.useTransform?"transform":"top, left")+" 0.2s ease")}this.started=!0}},n.prototype.colWidth=function(){return this.items[0].getBoundingClientRect().width+this.gutter},n.prototype.setup=function(){var t=this.container.getBoundingClientRect().width,e=this.colWidth(),i=Math.floor(t/e)\|\|1,n=[];this.maxColumns&&i>this.maxColumns&&(i=this.maxColumns);for(var s=0;s<i;s++)n[s]={height:0,index:s};return{cols:n,wSpace:t-ie+this.gutter}},n.prototype.nextCol=function(t,e){return this.useMin?i(t):t[e%t.length]},n.prototype.positionItems=function(){var t=this.setup(),e=t.cols,i=t.wSpace,n=0,s=this.colWidth();i=Math.floor(i/2);for(var o=0;o<this.items.length;o++){var r=this.nextCol(e,o),a=this.items[o],h=r.height?this.gutter:0,c=r.indexs+i+"px",u=r.height+h+"px";this.useTransform?a.style.transform="translate("+c+", "+u+")":(a.style.top=u,a.style.left=c),r.height+=a.getBoundingClientRect().height+h,r.height>n&&(n=r.height)}this.container.style.height=n+"px"},n.prototype.ready=function(){return!!this.static\|\|this.items.length>=this.size},n.prototype.getReady=function(){var t=this,e=setInterval(function(){t.container=document.querySelector(t.containerClass),t.items=t.container.children,t.ready()&&(clearInterval(e),t.init(),t.listen())},100)},n.prototype.listen=function(){var t=this;if(this.ready()){var e;window.addEventListener("resize",function(){e\|\|(e=setTimeout(function(){t.positionItems(),e=null},200))}),this.positionItems()}else this.getReady()},n});