From 884b5d405d70d7572ccbddb688e623b4f8fd0e49 Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Thu, 17 Dec 2020 17:09:11 -0300 Subject: [PATCH] Begins implementing vue-blurhash on view modes. --- package-lock.json | 30 ++++++--- package.json | 2 + .../admin/components/lists/items-list.vue | 62 +++++++++++++------ src/views/admin/js/main.js | 2 + src/views/admin/js/utilities.js | 46 +++++++++----- src/views/admin/scss/_tables.scss | 7 ++- src/views/admin/scss/_view-mode-masonry.scss | 16 ++--- src/views/admin/scss/tainacan-admin.scss | 3 + .../components/view-mode-masonry.vue | 55 +++------------- src/views/theme-search/js/theme-main.js | 2 + src/views/theme-search/theme-search.vue | 3 + 11 files changed, 126 insertions(+), 102 deletions(-) diff --git a/package-lock.json b/package-lock.json index 495847f64..693eab29b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2163,6 +2163,11 @@ "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==", "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": { "version": "4.11.8", "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz", @@ -5780,9 +5785,9 @@ "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" }, "ini": { - "version": "1.3.5", - "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", - "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", + "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", "dev": true }, "inquirer": { @@ -6914,9 +6919,9 @@ "dev": true }, "node-forge": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz", - "integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==", + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz", + "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==", "dev": true }, "node-gyp": { @@ -8879,12 +8884,12 @@ "dev": true }, "selfsigned": { - "version": "1.10.7", - "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz", - "integrity": "sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==", + "version": "1.10.8", + "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz", + "integrity": "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==", "dev": true, "requires": { - "node-forge": "0.9.0" + "node-forge": "^0.10.0" } }, "semver": { @@ -10723,6 +10728,11 @@ "resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz", "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": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz", diff --git a/package.json b/package.json index 0ee87963b..bbc47d128 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ }, "dependencies": { "axios": "^0.19.2", + "blurhash": "^1.1.3", "buefy": "^0.9.4", "bulma": "^0.9.1", "css-vars-ponyfill": "^2.3.1", @@ -23,6 +24,7 @@ "v-tooltip": "^2.0.3", "vue": "^2.6.11", "vue-awesome-swiper": "^4.1.1", + "vue-blurhash": "^0.1.4", "vue-masonry-css": "^1.0.3", "vue-router": "^3.1.6", "vue-the-mask": "^0.11.1", diff --git a/src/views/admin/components/lists/items-list.vue b/src/views/admin/components/lists/items-list.vue index 48ce946cb..9289a4152 100644 --- a/src/views/admin/components/lists/items-list.vue +++ b/src/views/admin/components/lists/items-list.vue @@ -176,11 +176,15 @@ v-if="item.thumbnail != undefined" @click.left="onClickItem($event, item)" @click.right="onRightClickItem($event, item)" - class="grid-item-thumbnail" - :style="{ backgroundImage: 'url(' + $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item.document_type) + ')' }"> - + + :transition-duration="500" + /> @@ -286,16 +290,19 @@ -
- -
+ :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')" + :transition-duration="500" + />
- + 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" + />
+
@@ -827,10 +840,15 @@ v-html="renderMetadata(item.metadata, column) != '' ? renderMetadata(item.metadata, column) : `` + $i18n.get('label_value_not_provided') + ``"/> - + :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" + />

- + :transition-duration="500" + />

-
- -
+ :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')" + :transition-duration="500" + />
@@ -91,7 +93,6 @@ export default { ], data () { return { - itemColumnWidth: Number, containerWidthDiscount: Number, masonryCols: {default: 6, 1919: 5, 1407: 4, 1215: 3, 1023: 3, 767: 2, 343: 1} } @@ -119,49 +120,13 @@ export default { 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: { randomHeightForMasonryItem() { let min = 120; let max = 380; 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) + } } } diff --git a/src/views/theme-search/js/theme-main.js b/src/views/theme-search/js/theme-main.js index 7ea0cec18..c4706b8c2 100644 --- a/src/views/theme-search/js/theme-main.js +++ b/src/views/theme-search/js/theme-main.js @@ -5,6 +5,7 @@ import VTooltip from 'v-tooltip'; import VueMasonry from 'vue-masonry-css'; import cssVars from 'css-vars-ponyfill'; import qs from 'qs'; +import VueBlurHash from 'vue-blurhash'; // Vue Dev Tools! Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development'; @@ -81,6 +82,7 @@ document.addEventListener("DOMContentLoaded", () => { }); Vue.use(VTooltip); Vue.use(VueMasonry); + Vue.use(VueBlurHash); Vue.use(I18NPlugin); Vue.use(UserPrefsPlugin); Vue.use(ThumbnailHelperPlugin); diff --git a/src/views/theme-search/theme-search.vue b/src/views/theme-search/theme-search.vue index bdc23071a..d04cdbf6a 100644 --- a/src/views/theme-search/theme-search.vue +++ b/src/views/theme-search/theme-search.vue @@ -58,6 +58,9 @@ export default { @import "../../../node_modules/buefy/src/scss/components/_notices.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 @import "../admin/scss/_tables.scss"; @import "../admin/scss/_modals.scss";