First exeperiments with Desandro Masonry.

package-lock.json

@@ -1471,12 +1471,30 @@
         "@types/node": "*"
       }
     },
+    "@types/jquery": {
+      "version": "3.5.14",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.14.tgz",
+      "integrity": "sha512-X1gtMRMbziVQkErhTQmSe2jFwwENA/Zr+PprCkF63vFq+Yt5PZ4AlKqgmeNlwgn7dhsXEK888eIW2520EpC+xg==",
+      "dev": true,
+      "requires": {
+        "@types/sizzle": "*"
+      }
+    },
     "@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
+    "@types/masonry-layout": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@types/masonry-layout/-/masonry-layout-4.2.5.tgz",
+      "integrity": "sha512-/DSIDMDsXlS+7JfzywA2zm9x+veO/z1QDcjKLS4OhDZH7sFdreKJbNFKb7jYA3NrY3bRvFGCamp5+DeIArLzow==",
+      "dev": true,
+      "requires": {
+        "@types/jquery": "*"
+      }
+    },
     "@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -1542,6 +1560,12 @@
         "@types/node": "*"
       }
     },
+    "@types/sizzle": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
+      "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==",
+      "dev": true
+    },
     "@types/sockjs": {
       "version": "0.3.33",
       "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
@@ -2969,6 +2993,11 @@
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
       "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
     },
+    "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=="
+    },
     "destroy": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
@@ -3455,6 +3484,11 @@
       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
       "dev": true
     },
+    "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=="
+    },
     "eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -3764,6 +3798,14 @@
         "path-exists": "^4.0.0"
       }
     },
+    "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==",
+      "requires": {
+        "desandro-matches-selector": "^2.0.0"
+      }
+    },
     "flat-cache": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
@@ -3938,6 +3980,11 @@
         "has-symbols": "^1.0.1"
       }
     },
+    "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=="
+    },
     "get-stdin": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
@@ -4728,6 +4775,15 @@
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
       "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ=="
     },
+    "masonry-layout": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/masonry-layout/-/masonry-layout-4.2.2.tgz",
+      "integrity": "sha512-iGtAlrpHNyxaR19CvKC3npnEcAwszXoyJiI8ARV2ePi7fmYhIud25MHK8Zx4P0LCC4d3TNO9+rFa1KoK1OEOaA==",
+      "requires": {
+        "get-size": "^2.0.2",
+        "outlayer": "^2.1.0"
+      }
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -5287,6 +5343,16 @@
         "word-wrap": "^1.2.3"
       }
     },
+    "outlayer": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/outlayer/-/outlayer-2.1.1.tgz",
+      "integrity": "sha512-+GplXsCQ3VrbGujAeHEzP9SXsBmJxzn/YdDSQZL0xqBmAWBmortu2Y9Gwdp9J0bgDQ8/YNIPMoBM13nTwZfAhw==",
+      "requires": {
+        "ev-emitter": "^1.0.0",
+        "fizzy-ui-utils": "^2.0.0",
+        "get-size": "^2.0.2"
+      }
+    },
     "p-limit": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",

package.json

@@ -17,6 +17,7 @@
     "countup.js": "^2.1.0",
     "css-vars-ponyfill": "^2.4.7",
     "floating-vue": "^1.0.0-beta.15",
+    "masonry-layout": "^4.2.2",
     "moment": "^2.29.1",
     "node-sass": "^7.0.1",
     "photoswipe": "^5.2.2",
@@ -39,9 +40,11 @@
     "@babel/core": "^7.17.8",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
+    "@types/masonry-layout": "^4.2.5",
     "acorn": "^8.7.0",
     "autoprefixer": "^10.4.4",
     "babel-loader": "^8.2.4",
+    "circular-dependency-plugin": "5.2.2",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",
     "eslint": "^8.12.0",
@@ -59,7 +62,6 @@
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.7.4",
-    "webpack-merge": "^5.8.0",
+    "webpack-merge": "^5.8.0"
-    "circular-dependency-plugin": "5.2.2"
   }
 }

src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-masonry.vue

@@ -19,7 +19,7 @@
             </section>
 
             <!-- SKELETON LOADING -->
-            <masonry
+            <!-- <masonry
                     v-if="isLoading"
                     :cols="masonryCols"
                     :gutter="25"                    
@@ -29,22 +29,19 @@
                         v-for="item in 12"
                         :style="{'min-height': randomHeightForMasonryItem() + 'px' }"
                         class="skeleton tainacan-masonry-item" />
-            </masonry>
+            </masonry> -->
 
             <!-- MASONRY VIEW MODE -->
-            <masonry
+            <ul 
-                    role="list"
+                    v-if="!isLoading"
-                    v-if="!isLoading && items.length > 0" 
-                    :cols="masonryCols"
-                    :gutter="25"
                     class="tainacan-masonry-container">
-                <div
+                <li
-                        role="listitem"
                         :data-tainacan-item-id="item.id"
                         :aria-setsize="totalItems"
                         :aria-posinset="getPosInSet(index)"
                         :key="index"
-                        v-for="(item, index) of items">
+                        v-for="(item, index) of items"
+                        :class="{ 'tainacan-masonry-grid-sizer': index == 0 }">
                     <a 
                             
                             class="tainacan-masonry-item" 
@@ -74,8 +71,8 @@
                         <blur-hash-image
                                 v-if="item.thumbnail != undefined"
                                 class="tainacan-masonry-item-thumbnail"
-                                :width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium-full', 120)"
+                                :width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium-full', 360)"
-                                :height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium-full', 120)"
+                                :height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium-full', 360)"
                                 :hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium-full')"
                                 :src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
                                 :srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
@@ -83,14 +80,15 @@
                                 :transition-duration="500"
                             />
                     </a>
-                </div>
+                </li>
-            </masonry>
+            </ul>
         </div> 
     </div>
 </template>
 
 <script>
 import { viewModesMixin } from '../js/view-modes-mixin.js';
+import Masonry from 'masonry-layout';
 
 export default {
     name: 'ViewModeMasonry',
@@ -100,7 +98,8 @@ export default {
     data () {
         return {
             containerWidthDiscount: Number,
-            masonryCols: {default: 6, 1919: 5, 1407: 4, 1215: 3, 1023: 3, 767: 2, 343: 1}
+            masonryCols: { default: 5, 2559: 5, 1919: 4, 1407: 4, 1215: 3, 1023: 3, 767: 2, 343: 1 },
+            masonry: false
         }
     },
     watch: {
@@ -116,14 +115,34 @@ export default {
         },
         containerWidthDiscount() {
             let obj = {};
-            obj['default'] = 6;
+            obj['default'] = 5;
-            obj[1980 - this.containerWidthDiscount] = 5;
+            obj[2560 - this.containerWidthDiscount] = 5;
+            obj[1980 - this.containerWidthDiscount] = 4;
             obj[1460 - this.containerWidthDiscount] = 4;
             obj[1275 - this.containerWidthDiscount] = 3;
             obj[1080 - this.containerWidthDiscount] = 3;
             obj[828 - this.containerWidthDiscount] = 2;
             obj[400] = 1;
             this.masonryCols = obj;
+        },
+        isLoading: { 
+            handler() {
+                if (this.items && this.items.length > 0) {
+                    this.$nextTick(() => {
+                        console.log(this.items[0]['thumbnail']) // update based on existence of large-medium
+                        console.log(this.masonry)
+                        if (this.masonry !== false)
+                            this.masonry.destroy();
+                        
+                        this.masonry = new Masonry( '.tainacan-masonry-container', {
+                            itemSelector: 'li',
+                            columnWidth: 400,
+                            gutter: 25
+                        });
+                    });
+                }
+            },
+            immediate: true
         }
     },
     methods: {
@@ -133,6 +152,10 @@ export default {
 
             return Math.floor(Math.random()*(max-min+1)+min);
         }
+    },
+    beforeDestroy() {
+        if (this.masonry !== false)
+            this.masonry.destroy();
     }
 }
 </script>