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

Creates viewModesMixin to group common functions among view modes including the new getItemLink #403.

This commit is contained in:
mateuswetah 2020-07-20 18:16:15 -03:00
parent 66f45fd75a
commit bac32d3827
6 changed files with 67 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/views/theme-search/components/view-mode-cards.vue
View File

@ -37,7 +37,7 @@
:key="index"
v-for="(item, index) of items"
class="tainacan-card"
:href="item.url">
:href="getItemLink(item.url)">
<!-- Title -->
<div class="metadata-title">
<p
@ -112,32 +112,20 @@
</template>
<script>
import { viewModesMixin } from '../js/view-modes-mixin.js';
export default {
name: 'ViewModeCards',
mixins: [
viewModesMixin
],
props: {
collectionId: Number,
displayedMetadata: Array,
items: Array,
isLoading: false,
shouldUseSmallCard: false
},
data () {
return {
thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png'
}
isLoading: false
},
methods: {
renderMetadata(itemMetadata, column) {
let metadata = itemMetadata[column.slug] != undefined ? itemMetadata[column.slug] : false;
if (!metadata) {
return '';
} else {
return metadata.value_as_html;
}
},
getLimitedDescription(description) {
let maxCharacter = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) <= 480 ? 155 : 330;
return description.length > maxCharacter ? description.substring(0, maxCharacter - 3) + '...' : description;

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

@ -43,7 +43,7 @@
:key="index"
v-for="(item, index) of items"
class="tainacan-masonry-item"
:href="item.url">
:href="getItemLink(item.url)">
<!-- Title -->
<div class="metadata-title">
@ -68,9 +68,13 @@
<script>
import { mapGetters } from 'vuex';
import { viewModesMixin } from '../js/view-modes-mixin.js';
export default {
name: 'ViewModeMasonry',
mixins: [
viewModesMixin
],
props: {
collectionId: Number,
displayedMetadata: Array,
@ -81,7 +85,6 @@ export default {
},
data () {
return {
thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png',
itemColumnWidth: Number,
containerWidthDiscount: Number,
masonryCols: {default: 6, 1919: 5, 1407: 4, 1215: 3, 1023: 3, 767: 2, 343: 1}
@ -130,19 +133,6 @@ export default {
...mapGetters('search', [
'getItemsPerPage',
]),
goToItemPage(item) {
window.location.href = item.url;
},
renderMetadata(itemMetadata, column) {
let metadata = itemMetadata[column.slug] != undefined ? itemMetadata[column.slug] : false;
if (!metadata) {
return '';
} else {
return metadata.value_as_html;
}
},
randomHeightForMasonryItem() {
let min = 120;
let max = 380;

23
src/views/theme-search/components/view-mode-records.vue
View File

@ -40,11 +40,11 @@
class="tainacan-records-container">
<a
role="listitem"
:href="item.url"
:href="getItemLink(item.url)"
:key="index"
v-for="(item, index) of items"
class="tainacan-record">
<!-- <div :href="item.url"> -->
<!-- <div :href="getItemLink(item.url)"> -->
<!-- Title -->
<p
v-tooltip="{
@ -99,8 +99,13 @@
</template>
<script>
import { viewModesMixin } from '../js/view-modes-mixin.js';
export default {
name: 'ViewModeRecords',
mixins: [
viewModesMixin
],
props: {
collectionId: Number,
displayedMetadata: Array,
@ -110,7 +115,6 @@ export default {
},
data () {
return {
thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png',
masonryCols: {default: 4, 1919: 3, 1407: 2, 1215: 2, 1023: 1, 767: 1, 343: 1}
}
},
@ -159,19 +163,6 @@ export default {
window.removeEventListener('resize', this.recalculateContainerWidth);
},
methods: {
goToItemPage(item) {
window.location.href = item.url;
},
renderMetadata(itemMetadata, column) {
let metadata = (itemMetadata != undefined && itemMetadata[column.slug] != undefined) ? itemMetadata[column.slug] : false;
if (!metadata) {
return '';
} else {
return metadata.value_as_html;
}
},
randomHeightForRecordsItem() {
let min = (70*this.amountOfDisplayedMetadata)*0.8;
let max = (70*this.amountOfDisplayedMetadata)*1.2;

17
src/views/theme-search/components/view-mode-slideshow.vue
View File

@ -308,6 +308,7 @@ import axios from '../../admin/js/axios';
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import CircularCounter from './circular-counter.vue';
import { viewModesMixin } from '../js/view-modes-mixin.js';
export default {
name: 'ViewModeSlideshow',
@ -316,6 +317,9 @@ export default {
swiperSlide,
CircularCounter
},
mixins: [
viewModesMixin
],
props: {
collectionId: Number,
displayedMetadata: Array,
@ -365,8 +369,7 @@ export default {
1406: { slidesPerView: 14 },
1600: { slidesPerView: 16 }
}
},
thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png'
}
}
},
computed: {
@ -621,16 +624,6 @@ export default {
}
}
},
renderMetadata(itemMetadata, column) {
let metadata = itemMetadata[column.slug] != undefined ? itemMetadata[column.slug] : false;
if (!metadata) {
return '';
} else {
return metadata.value_as_html;
}
},
closeSlideViewMode() {
this.$parent.onChangeViewMode(this.$parent.defaultViewMode);
}

17
src/views/theme-search/components/view-mode-table.vue
View File

@ -107,7 +107,7 @@
column.metadata_type_object.primitive_type == 'compound' ||
column.metadata_type_object.related_mapped_prop == 'description') : false,
}">
<a :href="item.url">
<a :href="getItemLink(item.url)">
<p
v-tooltip="{
delay: {
@ -146,7 +146,7 @@
hide: 300,
},
classes: [ column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea' ? 'metadata-type-textarea' : '' ],
content: renderMetadata(item.metadata, column) != '' ? renderMetadata(item.metadata, column) : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_informed') + `</span>`,
content: renderMetadataWithLabel(item.metadata, column) != '' ? renderMetadataWithLabel(item.metadata, column) : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_informed') + `</span>`,
html: true,
autoHide: false,
placement: 'auto-start'
@ -158,7 +158,7 @@
column.metadatum !== 'row_author' &&
column.metadatum !== 'row_title' &&
column.metadatum !== 'row_description'"
v-html="renderMetadata(item.metadata, column) != '' ? renderMetadata(item.metadata, column) : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_informed') + `</span>`"/>
v-html="renderMetadataWithLabel(item.metadata, column) != '' ? renderMetadataWithLabel(item.metadata, column) : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_informed') + `</span>`"/>
<span v-if="column.metadatum == 'row_thumbnail'">
<img
@ -177,22 +177,21 @@
</template>
<script>
import { viewModesMixin } from '../js/view-modes-mixin.js';
export default {
name: 'ViewModeTable',
mixins: [
viewModesMixin
],
props: {
collectionId: undefined,
displayedMetadata: Array,
items: Array,
isLoading: false
},
data () {
return {
thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png'
}
},
methods: {
renderMetadata(itemMetadata, column) {
renderMetadataWithLabel(itemMetadata, column) {
let metadata = (itemMetadata != undefined && itemMetadata[column.slug] != undefined) ? itemMetadata[column.slug] : false;

36
src/views/theme-search/js/view-modes-mixin.js Normal file
View File

@ -0,0 +1,36 @@
import qs from 'qs';
export const viewModesMixin = {
data() {
return {
thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png'
}
},
computed: {
queries() {
let currentQueries = JSON.parse(JSON.stringify(this.$route.query));
if (currentQueries) {
delete currentQueries['view_mode'];
delete currentQueries['fetch_only'];
delete currentQueries['fetch_only_meta'];
}
return currentQueries
}
},
methods: {
getItemLink(itemUrl) {
if (this.queries)
return itemUrl + '?' + qs.stringify(this.queries);
return itemUrl;
},
renderMetadata(itemMetadata, metadatum) {
let metadata = (itemMetadata && itemMetadata[metadatum.slug] != undefined) ? itemMetadata[metadatum.slug] : false;
if (!metadata)
return '';
else
return metadata.value_as_html;
}
}
}