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

Makes masonry and recorsd masonry adjust their grids based on container size instead of screen.

This commit is contained in:
Mateus Machado Luna 2019-05-13 13:53:33 -03:00
parent ac69d6565d
commit 2e71d421a5
2 changed files with 87 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/theme-helper/view-mode-masonry.vue
View File

@ -21,7 +21,7 @@
<!-- SKELETON LOADING -->
<masonry
v-if="isLoading"
:cols="{default: 7, 1919: 6, 1407: 5, 1215: 4, 1023: 3, 767: 2, 343: 1}"
:cols="masonryCols"
:gutter="25"
class="tainacan-masonry-container">
<div
@ -35,7 +35,7 @@
<masonry
role="list"
v-if="!isLoading && items.length > 0"
:cols="{default: 7, 1919: 6, 1407: 5, 1215: 4, 1023: 3, 767: 2, 343: 1}"
:cols="masonryCols"
:gutter="25"
class="tainacan-masonry-container">
<a
@ -78,17 +78,36 @@ export default {
items: Array,
isLoading: false,
itemsPerPage: Number,
itemColumnWidth: Number,
isFiltersMenuCompressed: Boolean
},
watch: {
isFiltersMenuCompressed() {
if (this.$refs.masonryWrapper != undefined &&
this.$refs.masonryWrapper.children[0] != undefined &&
this.$refs.masonryWrapper.children[0].children[0] != undefined &&
this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined) {
this.containerWidthDiscount = jQuery(window).width() - this.$refs.masonryWrapper.clientWidth;
}
this.$forceUpdate();
},
containerWidthDiscount() {
let obj = {};
obj['default'] = 7;
obj[1980 - this.containerWidthDiscount] = 6;
obj[1460 - this.containerWidthDiscount] = 5;
obj[1275 - this.containerWidthDiscount] = 4;
obj[1080 - this.containerWidthDiscount] = 3;
obj[828 - this.containerWidthDiscount] = 2;
obj[400] = 1;
this.masonryCols = obj;
}
},
data () {
return {
thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png'
thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png',
itemColumnWidth: Number,
containerWidthDiscount: Number,
masonryCols: {default: 7, 1919: 6, 1407: 5, 1215: 4, 1023: 3, 767: 2, 343: 1}
}
},
methods: {
@ -122,9 +141,16 @@ export default {
this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined)
this.itemColumnWidth = this.$refs.masonryWrapper.children[0].children[0].clientWidth;
return (imageHeight*this.itemColumnWidth)/imageWidth;
},
recalculateItemsHeight: _.debounce( function() {
if (this.$refs.masonryWrapper != undefined &&
this.$refs.masonryWrapper.children[0] != undefined &&
this.$refs.masonryWrapper.children[0].children[0] != undefined &&
this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined) {
this.containerWidthDiscount = jQuery(window).width() - this.$refs.masonryWrapper.clientWidth;
}
this.$forceUpdate();
}, 500)
},

62
src/theme-helper/view-mode-records.vue
View File

@ -1,6 +1,8 @@
<template>
<div class="table-container">
<div class="table-wrapper">
<div
ref="masonryWrapper"
class="table-wrapper">
<!-- Empty result placeholder -->
<section
@ -19,7 +21,7 @@
<!-- SKELETON LOADING -->
<masonry
v-if="isLoading"
:cols="{default: 4, 1919: 3, 1407: 2, 1215: 2, 1023: 1, 767: 1, 343: 1}"
:cols="masonryCols"
:gutter="30"
class="tainacan-records-container">
<div
@ -33,7 +35,7 @@
<masonry
role="list"
v-if="!isLoading && items.length > 0"
:cols="{default: 4, 1919: 3, 1407: 2, 1215: 2, 1023: 1, 767: 1, 343: 1}"
:cols="masonryCols"
:gutter="30"
class="tainacan-records-container">
<a
@ -103,7 +105,8 @@ export default {
collectionId: Number,
displayedMetadata: Array,
items: Array,
isLoading: false
isLoading: false,
isFiltersMenuCompressed: Boolean
},
computed: {
amountOfDisplayedMetadata() {
@ -112,7 +115,30 @@ export default {
},
data () {
return {
thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png'
thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png',
masonryCols: {default: 4, 1919: 3, 1407: 2, 1215: 2, 1023: 1, 767: 1, 343: 1}
}
},
watch: {
isFiltersMenuCompressed() {
if (this.$refs.masonryWrapper != undefined &&
this.$refs.masonryWrapper.children[0] != undefined &&
this.$refs.masonryWrapper.children[0].children[0] != undefined &&
this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined) {
this.containerWidthDiscount = jQuery(window).width() - this.$refs.masonryWrapper.clientWidth;
}
this.$forceUpdate();
},
containerWidthDiscount() {
let obj = {};
obj['default'] = 4;
obj[1980 - this.containerWidthDiscount] = 3;
obj[1460 - this.containerWidthDiscount] = 2;
obj[1275 - this.containerWidthDiscount] = 2;
obj[1080 - this.containerWidthDiscount] = 1;
obj[828 - this.containerWidthDiscount] = 1;
obj[400] = 1;
this.masonryCols = obj;
}
},
methods: {
@ -138,6 +164,32 @@ export default {
let itemWidth = 120;
return (imageHeight*itemWidth)/imageWidth;
},
recalculateContainerWidth: _.debounce( function() {
if (this.$refs.masonryWrapper != undefined &&
this.$refs.masonryWrapper.children[0] != undefined &&
this.$refs.masonryWrapper.children[0].children[0] != undefined &&
this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined) {
this.containerWidthDiscount = jQuery(window).width() - this.$refs.masonryWrapper.clientWidth;
}
this.$forceUpdate();
}, 500)
},
mounted() {
if (this.$refs.masonryWrapper != undefined &&
this.$refs.masonryWrapper.children[0] != undefined &&
this.$refs.masonryWrapper.children[0].children[0] != undefined &&
this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined) {
this.itemColumnWidth = this.$refs.masonryWrapper.children[0].children[0].clientWidth;
this.recalculateContainerWidth();
} else
this.itemColumnWidth = 202;
},
created() {
window.addEventListener('resize', this.recalculateContainerWidth);
},
beforeDestroy() {
window.removeEventListener('resize', this.recalculateContainerWidth);
}
}
</script>