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

Begins implementing vue-blurhash on view modes.

This commit is contained in:
mateuswetah 2020-12-17 17:09:11 -03:00
parent 233912475e
commit 884b5d405d
11 changed files with 126 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
package-lock.json generated
View File

@ -2163,6 +2163,11 @@
"integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==", "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
"dev": true "dev": true
}, },
"blurhash": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/blurhash/-/blurhash-1.1.3.tgz",
"integrity": "sha512-yUhPJvXexbqbyijCIE/T2NCXcj9iNPhWmOKbPTuR/cm7Q5snXYIfnVnz6m7MWOXxODMz/Cr3UcVkRdHiuDVRDw=="
},
"bn.js": { "bn.js": {
"version": "4.11.8", "version": "4.11.8",
"resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz", "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz",
@ -5780,9 +5785,9 @@
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.8",
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
"integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
"dev": true "dev": true
}, },
"inquirer": { "inquirer": {
@ -6914,9 +6919,9 @@
"dev": true "dev": true
}, },
"node-forge": { "node-forge": {
"version": "0.9.0", "version": "0.10.0",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
"integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==", "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
"dev": true "dev": true
}, },
"node-gyp": { "node-gyp": {
@ -8879,12 +8884,12 @@
"dev": true "dev": true
}, },
"selfsigned": { "selfsigned": {
"version": "1.10.7", "version": "1.10.8",
"resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz", "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz",
"integrity": "sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==", "integrity": "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==",
"dev": true, "dev": true,
"requires": { "requires": {
"node-forge": "0.9.0" "node-forge": "^0.10.0"
} }
}, },
"semver": { "semver": {
@ -10723,6 +10728,11 @@
"resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz", "resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
"integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ==" "integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ=="
}, },
"vue-blurhash": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/vue-blurhash/-/vue-blurhash-0.1.4.tgz",
"integrity": "sha512-B76GgfHXHkdmYgAfI2rZl3BgCMD9OxAgn4Jw2Ro0a8ZoAKa6gqTWUrTo5EGXOftm/EKuMYi1Cc+UcAvV0jnoRw=="
},
"vue-eslint-parser": { "vue-eslint-parser": {
"version": "5.0.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz",

2
package.json
View File

@ -9,6 +9,7 @@
}, },
"dependencies": { "dependencies": {
"axios": "^0.19.2", "axios": "^0.19.2",
"blurhash": "^1.1.3",
"buefy": "^0.9.4", "buefy": "^0.9.4",
"bulma": "^0.9.1", "bulma": "^0.9.1",
"css-vars-ponyfill": "^2.3.1", "css-vars-ponyfill": "^2.3.1",
@ -23,6 +24,7 @@
"v-tooltip": "^2.0.3", "v-tooltip": "^2.0.3",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-awesome-swiper": "^4.1.1", "vue-awesome-swiper": "^4.1.1",
"vue-blurhash": "^0.1.4",
"vue-masonry-css": "^1.0.3", "vue-masonry-css": "^1.0.3",
"vue-router": "^3.1.6", "vue-router": "^3.1.6",
"vue-the-mask": "^0.11.1", "vue-the-mask": "^0.11.1",

62
src/views/admin/components/lists/items-list.vue
View File

@ -176,11 +176,15 @@
v-if="item.thumbnail != undefined" v-if="item.thumbnail != undefined"
@click.left="onClickItem($event, item)" @click.left="onClickItem($event, item)"
@click.right="onRightClickItem($event, item)" @click.right="onRightClickItem($event, item)"
class="grid-item-thumbnail" class="grid-item-thumbnail">
:style="{ backgroundImage: 'url(' + $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item.document_type) + ')' }"> <blur-hash-image
<img :width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium', 120)"
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium', 120)"
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium')"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item.document_type)"
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')" :alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item.document_type)"> :transition-duration="500"
/>
</a> </a>
<!-- Actions --> <!-- Actions -->
@ -286,16 +290,19 @@
</div> </div>
<!-- Thumbnail --> <!-- Thumbnail -->
<div <blur-hash-image
@click.left="onClickItem($event, item)" @click.left="onClickItem($event, item)"
@click.right="onRightClickItem($event, item)" @click.right="onRightClickItem($event, item)"
v-if="item.thumbnail != undefined" v-if="item.thumbnail != undefined"
class="tainacan-masonry-item-thumbnail" class="tainacan-masonry-item-thumbnail"
:style="{ backgroundImage: 'url(' + $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_type) + ')' }"> :width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium-full', 120)"
<img :height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium-full', 120)"
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')" :hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium-full')"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_type)"> :src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_type)"
</div> :srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-medium-full', item.document_type)"
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
:transition-duration="500"
/>
<!-- Actions --> <!-- Actions -->
<div <div
@ -459,13 +466,19 @@
@click.right="onRightClickItem($event, item)"> @click.right="onRightClickItem($event, item)">
<div <div
v-if="collection && collection.hide_items_thumbnail_on_lists != 'yes'" v-if="collection && collection.hide_items_thumbnail_on_lists != 'yes'"
:style="{ backgroundImage: 'url(' + $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item.document_type) + ')' }"
class="card-thumbnail"> class="card-thumbnail">
<img <blur-hash-image
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
v-if="item.thumbnail != undefined" v-if="item.thumbnail != undefined"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item.document_type)"> class="tainacan-masonry-item-thumbnail"
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium', 120)"
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium', 120)"
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium')"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item.document_type)"
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
:transition-duration="500"
/>
</div> </div>
<div class="list-metadata media-body"> <div class="list-metadata media-body">
<!-- Description --> <!-- Description -->
@ -827,10 +840,15 @@
v-html="renderMetadata(item.metadata, column) != '' ? renderMetadata(item.metadata, column) : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`"/> v-html="renderMetadata(item.metadata, column) != '' ? renderMetadata(item.metadata, column) : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`"/>
<span v-if="column.metadatum == 'row_thumbnail'"> <span v-if="column.metadatum == 'row_thumbnail'">
<img <blur-hash-image
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
class="table-thumb" class="table-thumb"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small', item.document_type)"> :width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-small', 40)"
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-small', 40)"
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-small')"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small', item.document_type)"
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
:transition-duration="500"
/>
</span> </span>
<p <p
v-tooltip="{ v-tooltip="{
@ -1033,9 +1051,15 @@
<div <div
class="tainacan-list-thumbnail" class="tainacan-list-thumbnail"
v-if="item.thumbnail != undefined"> v-if="item.thumbnail != undefined">
<img <blur-hash-image
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium-full', 120)"
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium-full', 120)"
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium-full')"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_type)"
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-medium-full', item.document_type)"
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')" :alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_type)"> :transition-duration="500"
/>
</div> </div>
<div class="list-metadata media-body"> <div class="list-metadata media-body">
<span <span

2
src/views/admin/js/main.js
View File

@ -10,6 +10,7 @@ import VueMasonry from 'vue-masonry-css';
import draggable from 'vuedraggable'; import draggable from 'vuedraggable';
import VueTheMask from 'vue-the-mask'; import VueTheMask from 'vue-the-mask';
import cssVars from 'css-vars-ponyfill'; import cssVars from 'css-vars-ponyfill';
import VueBlurHash from 'vue-blurhash';
// Vue Dev Tools! // Vue Dev Tools!
Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development'; Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
@ -85,6 +86,7 @@ Vue.use(Buefy, {
}); });
Vue.use(VTooltip); Vue.use(VTooltip);
Vue.use(VueMasonry); Vue.use(VueMasonry);
Vue.use(VueBlurHash);
Vue.use(I18NPlugin); Vue.use(I18NPlugin);
Vue.use(UserPrefsPlugin); Vue.use(UserPrefsPlugin);
Vue.use(RouterHelperPlugin); Vue.use(RouterHelperPlugin);

46
src/views/admin/js/utilities.js
View File

@ -359,24 +359,26 @@ ThumbnailHelperPlugin.install = function (Vue, options = {}) {
Vue.prototype.$thumbHelper = { Vue.prototype.$thumbHelper = {
imagesFolderPath: tainacan_plugin.base_url + '/assets/images/', imagesFolderPath: tainacan_plugin.base_url + '/assets/images/',
getSrc(thumbnail, tainacanSize, documentType) { getSrc(thumbnail, tainacanSize, documentType) {
const wordpressSize = this.getWordpressFallbackSize(tainacanSize);
let wordpressSize = '';
switch(tainacanSize) {
case 'tainacan-medium-full':
wordpressSize = 'medium_large';
break;
case 'tainacan-medium':
wordpressSize = 'medium';
break;
case 'tainacan-small':
wordpressSize = 'thumbnail';
break;
default:
wordpressSize = 'thumbnail';
}
return (thumbnail && thumbnail[tainacanSize]) ? thumbnail[tainacanSize][0] : ((thumbnail && thumbnail[wordpressSize]) ? thumbnail[wordpressSize][0] : this.getEmptyThumbnailPlaceholder(documentType, tainacanSize)); return (thumbnail && thumbnail[tainacanSize]) ? thumbnail[tainacanSize][0] : ((thumbnail && thumbnail[wordpressSize]) ? thumbnail[wordpressSize][0] : this.getEmptyThumbnailPlaceholder(documentType, tainacanSize));
}, },
getSrcSet(thumbnail, tainacanSize, documentType) {
const defaultSrc = this.getSrc(thumbnail, tainacanSize, documentType);
const retinaSrc = (thumbnail && thumbnail['full']) ? thumbnail['full'][0] : this.getEmptyThumbnailPlaceholder(documentType, 'full');
return defaultSrc + ' 1x, ' + retinaSrc + ' 2x';
},
getWidth(thumbnail, tainacanSize, fallbackSizeValue) {
const wordpressSize = this.getWordpressFallbackSize(tainacanSize);
return (thumbnail && thumbnail[tainacanSize]) ? thumbnail[tainacanSize][1] : ((thumbnail && thumbnail[wordpressSize]) ? thumbnail[wordpressSize][1] : (fallbackSizeValue ? fallbackSizeValue : 120));
},
getHeight(thumbnail, tainacanSize, fallbackSizeValue) {
const wordpressSize = this.getWordpressFallbackSize(tainacanSize);
return (thumbnail && thumbnail[tainacanSize]) ? thumbnail[tainacanSize][2] : ((thumbnail && thumbnail[wordpressSize]) ? thumbnail[wordpressSize][2] : (fallbackSizeValue ? fallbackSizeValue : 120));
},
getBlurhashString(thumbnail, tainacanSize) {
const wordpressSize = this.getWordpressFallbackSize(tainacanSize);
return (thumbnail && thumbnail[tainacanSize]) ? thumbnail[tainacanSize][4] : ((thumbnail && thumbnail[wordpressSize]) ? thumbnail[wordpressSize][4] : '');
},
getEmptyThumbnailPlaceholder(documentType, tainacanSize) { getEmptyThumbnailPlaceholder(documentType, tainacanSize) {
let imageSrc = ''; let imageSrc = '';
@ -436,6 +438,18 @@ ThumbnailHelperPlugin.install = function (Vue, options = {}) {
default: default:
return this.imagesFolderPath + imageSrc + '.png'; return this.imagesFolderPath + imageSrc + '.png';
} }
},
getWordpressFallbackSize(tainacanSize) {
switch(tainacanSize) {
case 'tainacan-medium-full':
return 'medium_large';
case 'tainacan-medium':
return 'medium';
case 'tainacan-small':
return 'thumbnail';
default:
return 'thumbnail';
}
} }
} }
}; };

7
src/views/admin/scss/_tables.scss
View File

@ -202,11 +202,16 @@
text-decoration: none !important; text-decoration: none !important;
} }
} }
img.table-thumb { img.table-thumb,
.table-thumb img {
max-height: 38px !important; max-height: 38px !important;
min-height: 38px; min-height: 38px;
max-width: 38px; max-width: 38px;
border-radius: 0px; border-radius: 0px;
padding-bottom: 0px !important;
padding-left: 0px !important;
padding-right: 0px !important;
padding-top: 0px !important;
} }
td.actions-cell { td.actions-cell {
padding: 0px; padding: 0px;

16
src/views/admin/scss/_view-mode-masonry.scss
View File

@ -10,7 +10,6 @@
animation-duration: 0.5s; animation-duration: 0.5s;
.tainacan-masonry-item { .tainacan-masonry-item {
background-color: var(--tainacan-item-background-color);
display: block; display: block;
width: 100%; width: 100%;
flex-basis: 0; flex-basis: 0;
@ -19,12 +18,15 @@
text-decoration: none; text-decoration: none;
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
&:hover { &:hover:not(.skeleton) {
background-color: var(--tainacan-item-heading-hover-background-color); background-color: var(--tainacan-item-heading-hover-background-color);
} }
&.selected-masonry-item { &.selected-masonry-item:not(.skeleton) {
background-color: var(--tainacan-turquoise1); background-color: var(--tainacan-turquoise1);
} }
&:not(.skeleton) {
background-color: var(--tainacan-item-background-color);
}
.masonry-item-checkbox { .masonry-item-checkbox {
position: absolute; position: absolute;
@ -89,14 +91,6 @@
transition: height 0.2s ease; transition: height 0.2s ease;
display: block; display: block;
} }
img:not(.skeleton) {
visibility: hidden;
}
.skeleton {
background: var(--tainacan-skeleton-color);
color: transparent !important;
}
} }
.metadata-title { .metadata-title {

3
src/views/admin/scss/tainacan-admin.scss
View File

@ -9,6 +9,9 @@
@import "../../../../node_modules/bulma/bulma.sass"; @import "../../../../node_modules/bulma/bulma.sass";
@import "../../../../node_modules/buefy/src/scss/buefy.scss"; @import "../../../../node_modules/buefy/src/scss/buefy.scss";
// Vue Blurhash transtition effect
@import '../../../../node_modules/vue-blurhash/dist/vue-blurhash.css';
// Import Tainacan custom styles // Import Tainacan custom styles
@import "../scss/_tainacan-form.scss"; @import "../scss/_tainacan-form.scss";
@import "../scss/_control.scss"; @import "../scss/_control.scss";

55
src/views/theme-search/components/view-mode-masonry.vue
View File

@ -66,15 +66,17 @@
</div> </div>
<!-- Thumbnail --> <!-- Thumbnail -->
<div <blur-hash-image
v-if="item.thumbnail != undefined" v-if="item.thumbnail != undefined"
class="tainacan-masonry-item-thumbnail" class="tainacan-masonry-item-thumbnail"
:style="{ backgroundImage: 'url(' + $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_type) + ')' }"> :width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium-full', 120)"
<img :height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium-full', 120)"
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')" :hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium-full')"
:style="{ minHeight: getItemImageHeight(item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][1] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[1] : 120), item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][2] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[2] : 120)) + 'px'}" :src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_type)"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_type)" > :srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-medium-full', item.document_type)"
</div> :alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
:transition-duration="500"
/>
</a> </a>
</masonry> </masonry>
</div> </div>
@ -91,7 +93,6 @@ export default {
], ],
data () { data () {
return { return {
itemColumnWidth: Number,
containerWidthDiscount: Number, containerWidthDiscount: Number,
masonryCols: {default: 6, 1919: 5, 1407: 4, 1215: 3, 1023: 3, 767: 2, 343: 1} masonryCols: {default: 6, 1919: 5, 1407: 4, 1215: 3, 1023: 3, 767: 2, 343: 1}
} }
@ -119,49 +120,13 @@ export default {
this.masonryCols = obj; this.masonryCols = obj;
} }
}, },
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.recalculateItemsHeight();
} else
this.itemColumnWidth = 202;
},
created() {
window.addEventListener('resize', this.recalculateItemsHeight);
},
beforeDestroy() {
window.removeEventListener('resize', this.recalculateItemsHeight);
},
methods: { methods: {
randomHeightForMasonryItem() { randomHeightForMasonryItem() {
let min = 120; let min = 120;
let max = 380; let max = 380;
return Math.floor(Math.random()*(max-min+1)+min); return Math.floor(Math.random()*(max-min+1)+min);
}, }
getItemImageHeight(imageWidth, imageHeight) {
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;
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 = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) - this.$refs.masonryWrapper.clientWidth;
}
this.$forceUpdate();
}, 500)
} }
} }
</script> </script>

2
src/views/theme-search/js/theme-main.js
View File

@ -5,6 +5,7 @@ import VTooltip from 'v-tooltip';
import VueMasonry from 'vue-masonry-css'; import VueMasonry from 'vue-masonry-css';
import cssVars from 'css-vars-ponyfill'; import cssVars from 'css-vars-ponyfill';
import qs from 'qs'; import qs from 'qs';
import VueBlurHash from 'vue-blurhash';
// Vue Dev Tools! // Vue Dev Tools!
Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development'; Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
@ -81,6 +82,7 @@ document.addEventListener("DOMContentLoaded", () => {
}); });
Vue.use(VTooltip); Vue.use(VTooltip);
Vue.use(VueMasonry); Vue.use(VueMasonry);
Vue.use(VueBlurHash);
Vue.use(I18NPlugin); Vue.use(I18NPlugin);
Vue.use(UserPrefsPlugin); Vue.use(UserPrefsPlugin);
Vue.use(ThumbnailHelperPlugin); Vue.use(ThumbnailHelperPlugin);

3
src/views/theme-search/theme-search.vue
View File

@ -58,6 +58,9 @@ export default {
@import "../../../node_modules/buefy/src/scss/components/_notices.scss"; @import "../../../node_modules/buefy/src/scss/components/_notices.scss";
@import "../../../node_modules/buefy/src/scss/components/_numberinput.scss"; @import "../../../node_modules/buefy/src/scss/components/_numberinput.scss";
// Vue Blurhash transtition effect
@import '../../../node_modules/vue-blurhash/dist/vue-blurhash.css';
// Tainacan imports // Tainacan imports
@import "../admin/scss/_tables.scss"; @import "../admin/scss/_tables.scss";
@import "../admin/scss/_modals.scss"; @import "../admin/scss/_modals.scss";