tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

First exeperiments with Desandro Masonry.

This commit is contained in:
mateuswetah 2022-06-16 10:18:01 -03:00
parent 21fe42bcb2
commit 8067dcd03b
3 changed files with 110 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
package-lock.json generated
View File

@ -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",

6
package.json
View File

@ -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",
"circular-dependency-plugin": "5.2.2"
"webpack-merge": "^5.8.0"
}
}

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

@ -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
role="list"
v-if="!isLoading && items.length > 0"
:cols="masonryCols"
:gutter="25"
<ul
v-if="!isLoading"
class="tainacan-masonry-container">
<div
role="listitem"
<li
: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)"
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium-full', 120)"
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium-full', 360)"
: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>
</masonry>
</li>
</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[1980 - this.containerWidthDiscount] = 5;
obj['default'] = 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>