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

View File

@ -21,7 +21,7 @@
<!-- SKELETON LOADING --> <!-- SKELETON LOADING -->
<masonry <masonry
v-if="isLoading" v-if="isLoading"
:cols="{default: 7, 1919: 6, 1407: 5, 1215: 4, 1023: 3, 767: 2, 343: 1}" :cols="masonryCols"
:gutter="25" :gutter="25"
class="tainacan-masonry-container"> class="tainacan-masonry-container">
<div <div
@ -35,7 +35,7 @@
<masonry <masonry
role="list" role="list"
v-if="!isLoading && items.length > 0" 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" :gutter="25"
class="tainacan-masonry-container"> class="tainacan-masonry-container">
<a <a
@ -78,17 +78,36 @@ export default {
items: Array, items: Array,
isLoading: false, isLoading: false,
itemsPerPage: Number, itemsPerPage: Number,
itemColumnWidth: Number,
isFiltersMenuCompressed: Boolean isFiltersMenuCompressed: Boolean
}, },
watch: { watch: {
isFiltersMenuCompressed() { 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(); 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 () { data () {
return { 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: { methods: {
@ -122,9 +141,16 @@ export default {
this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined) this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined)
this.itemColumnWidth = this.$refs.masonryWrapper.children[0].children[0].clientWidth; this.itemColumnWidth = this.$refs.masonryWrapper.children[0].children[0].clientWidth;
return (imageHeight*this.itemColumnWidth)/imageWidth; return (imageHeight*this.itemColumnWidth)/imageWidth;
}, },
recalculateItemsHeight: _.debounce( function() { 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(); this.$forceUpdate();
}, 500) }, 500)
}, },

View File

@ -1,6 +1,8 @@
<template> <template>
<div class="table-container"> <div class="table-container">
<div class="table-wrapper"> <div
ref="masonryWrapper"
class="table-wrapper">
<!-- Empty result placeholder --> <!-- Empty result placeholder -->
<section <section
@ -19,7 +21,7 @@
<!-- SKELETON LOADING --> <!-- SKELETON LOADING -->
<masonry <masonry
v-if="isLoading" v-if="isLoading"
:cols="{default: 4, 1919: 3, 1407: 2, 1215: 2, 1023: 1, 767: 1, 343: 1}" :cols="masonryCols"
:gutter="30" :gutter="30"
class="tainacan-records-container"> class="tainacan-records-container">
<div <div
@ -33,7 +35,7 @@
<masonry <masonry
role="list" role="list"
v-if="!isLoading && items.length > 0" 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" :gutter="30"
class="tainacan-records-container"> class="tainacan-records-container">
<a <a
@ -103,7 +105,8 @@ export default {
collectionId: Number, collectionId: Number,
displayedMetadata: Array, displayedMetadata: Array,
items: Array, items: Array,
isLoading: false isLoading: false,
isFiltersMenuCompressed: Boolean
}, },
computed: { computed: {
amountOfDisplayedMetadata() { amountOfDisplayedMetadata() {
@ -112,7 +115,30 @@ export default {
}, },
data () { data () {
return { 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: { methods: {
@ -138,6 +164,32 @@ export default {
let itemWidth = 120; let itemWidth = 120;
return (imageHeight*itemWidth)/imageWidth; 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> </script>