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

2
package.json
View File

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

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

@ -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) + ')' }">
<img
class="grid-item-thumbnail">
<blur-hash-image
: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')"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item.document_type)">
:transition-duration="500"
/>
</a>
<!-- Actions -->
@ -286,16 +290,19 @@
</div>
<!-- Thumbnail -->
<div
<blur-hash-image
@click.left="onClickItem($event, item)"
@click.right="onRightClickItem($event, item)"
v-if="item.thumbnail != undefined"
class="tainacan-masonry-item-thumbnail"
:style="{ backgroundImage: 'url(' + $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_type) + ')' }">
<img
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_type)">
</div>
: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"
/>
<!-- Actions -->
<div
@ -459,14 +466,20 @@
@click.right="onRightClickItem($event, item)">
<div
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">
<img
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
<blur-hash-image
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 class="list-metadata media-body">
<!-- Description -->
<p
@ -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>`"/>
<span v-if="column.metadatum == 'row_thumbnail'">
<img
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
<blur-hash-image
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>
<p
v-tooltip="{
@ -1033,9 +1051,15 @@
<div
class="tainacan-list-thumbnail"
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')"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_type)">
:transition-duration="500"
/>
</div>
<div class="list-metadata media-body">
<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 VueTheMask from 'vue-the-mask';
import cssVars from 'css-vars-ponyfill';
import VueBlurHash from 'vue-blurhash';
// Vue Dev Tools!
Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
@ -85,6 +86,7 @@ Vue.use(Buefy, {
});
Vue.use(VTooltip);
Vue.use(VueMasonry);
Vue.use(VueBlurHash);
Vue.use(I18NPlugin);
Vue.use(UserPrefsPlugin);
Vue.use(RouterHelperPlugin);

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

@ -359,24 +359,26 @@ ThumbnailHelperPlugin.install = function (Vue, options = {}) {
Vue.prototype.$thumbHelper = {
imagesFolderPath: tainacan_plugin.base_url + '/assets/images/',
getSrc(thumbnail, tainacanSize, documentType) {
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';
}
const wordpressSize = this.getWordpressFallbackSize(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) {
let imageSrc = '';
@ -436,6 +438,18 @@ ThumbnailHelperPlugin.install = function (Vue, options = {}) {
default:
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;
}
}
img.table-thumb {
img.table-thumb,
.table-thumb img {
max-height: 38px !important;
min-height: 38px;
max-width: 38px;
border-radius: 0px;
padding-bottom: 0px !important;
padding-left: 0px !important;
padding-right: 0px !important;
padding-top: 0px !important;
}
td.actions-cell {
padding: 0px;

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

@ -10,7 +10,6 @@
animation-duration: 0.5s;
.tainacan-masonry-item {
background-color: var(--tainacan-item-background-color);
display: block;
width: 100%;
flex-basis: 0;
@ -19,12 +18,15 @@
text-decoration: none;
transition: background-color 0.2s ease;
&:hover {
&:hover:not(.skeleton) {
background-color: var(--tainacan-item-heading-hover-background-color);
}
&.selected-masonry-item {
&.selected-masonry-item:not(.skeleton) {
background-color: var(--tainacan-turquoise1);
}
&:not(.skeleton) {
background-color: var(--tainacan-item-background-color);
}
.masonry-item-checkbox {
position: absolute;
@ -89,14 +91,6 @@
transition: height 0.2s ease;
display: block;
}
img:not(.skeleton) {
visibility: hidden;
}
.skeleton {
background: var(--tainacan-skeleton-color);
color: transparent !important;
}
}
.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/buefy/src/scss/buefy.scss";
// Vue Blurhash transtition effect
@import '../../../../node_modules/vue-blurhash/dist/vue-blurhash.css';
// Import Tainacan custom styles
@import "../scss/_tainacan-form.scss";
@import "../scss/_control.scss";

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

@ -66,15 +66,17 @@
</div>
<!-- Thumbnail -->
<div
<blur-hash-image
v-if="item.thumbnail != undefined"
class="tainacan-masonry-item-thumbnail"
:style="{ backgroundImage: 'url(' + $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_type) + ')' }">
<img
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
: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)" >
</div>
: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"
/>
</a>
</masonry>
</div>
@ -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)
}
}
}
</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 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);

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/_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";