Continues refactor of Vue components logic for #794.
This commit is contained in:
mateuswetah
parent
04d282af1a
commit
6db681a1f3
|
|
@ -26,7 +26,8 @@ module.exports = {
|
|||
"vue/no-v-model-argument": "off", // ADD
|
||||
'vue/multi-word-component-names': 'off',
|
||||
'vue/require-default-prop': 'off',
|
||||
'vue/no-v-text-v-html-on-component': 'off'
|
||||
'vue/no-v-text-v-html-on-component': 'off',
|
||||
'vue/no-multiple-template-root': 'off' // In Vue3, this rule is deprecated
|
||||
},
|
||||
globals: {
|
||||
'wp': true,
|
||||
|
|
|
|||
|
|
@ -42,7 +42,9 @@
|
|||
<span> > </span>
|
||||
<router-link
|
||||
v-if="childBreadCrumbItem.path != ''"
|
||||
:to="{ path: childBreadCrumbItem.path, query: index === $i18n.get('items') ? { fromBreadcrumb: true } : null }">{{ childBreadCrumbItem.label }}</router-link>
|
||||
:to="{ path: childBreadCrumbItem.path, query: index === $i18n.get('items') ? { fromBreadcrumb: true } : null }">
|
||||
{{ childBreadCrumbItem.label }}
|
||||
</router-link>
|
||||
<span v-else>{{ childBreadCrumbItem.label }}</span>
|
||||
</template>
|
||||
</nav>
|
||||
|
|
@ -52,6 +54,7 @@
|
|||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { useSlots } from 'vue';
|
||||
|
||||
export default {
|
||||
name: 'TainacanTitle',
|
||||
|
|
@ -68,7 +71,8 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
slotPassed() {
|
||||
return this.$slots && this.$slots.default && this.$slots.default[0] && (!!this.$slots.default[0].text || !!this.$slots.default[0].tag)
|
||||
const slots = useSlots();
|
||||
return !!slots['default'];
|
||||
},
|
||||
collection() {
|
||||
return this.getCollection();
|
||||
|
|
@ -124,7 +128,8 @@ export default {
|
|||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
|
||||
h1, h2 {
|
||||
:deep(h1),
|
||||
:deep(h2) {
|
||||
font-size: 1.25em;
|
||||
font-weight: 500;
|
||||
color: var(--tainacan-heading-color);
|
||||
|
|
|
|||
|
|
@ -356,7 +356,7 @@
|
|||
collectionId: [Number, String],
|
||||
metadatumId: Number,
|
||||
metadatum: Object,
|
||||
selected: Array,
|
||||
selected: [Array,Number],
|
||||
allowNew: Boolean,
|
||||
isTaxonomy: {
|
||||
type: Boolean,
|
||||
|
|
|
|||
|
|
@ -214,8 +214,8 @@ export default {
|
|||
this.$router.replace({ name: app.config.globalProperties.$route.name, query: {} });
|
||||
this.$router.replace({ name: app.config.globalProperties.$route.name, query: this.$store.getters['search/getPostQuery'], onabort: () => { console.log('abort'); }, onerror: () => { console.log('error'); }, onready: () => { console.log('ready'); }, onsuccess: () => { console.log('success'); } });
|
||||
} else {
|
||||
this.$router.replace({ path: '', query: {} });
|
||||
this.$router.replace({ path: '', query: this.$store.getters['search/getPostQuery'] });
|
||||
this.$router.replace({ path: this.$route.path, query: {} });
|
||||
this.$router.replace({ path: this.$route.path, query: this.$store.getters['search/getPostQuery'] });
|
||||
}
|
||||
},
|
||||
updateStoreFromURL() {
|
||||
|
|
|
|||
|
|
@ -15,93 +15,42 @@ export default (element) => {
|
|||
|
||||
// Checks if this carousel isn't already mounted
|
||||
blocks = blocks.filter((block) => block.classList && !block.classList.contains('has-mounted'));
|
||||
const blockIds = Object.values(blocks).map((block) => block.id);
|
||||
|
||||
// Creates a new Vue Instance to manage each block isolatelly
|
||||
for (let blockId of blockIds) {
|
||||
blocks.forEach((block) => {
|
||||
|
||||
// Configure Vue logic before passing it to constructor:
|
||||
let vueOptions = {
|
||||
data: () => {
|
||||
return {
|
||||
selectedItem: [],
|
||||
maxItemsNumber: 12,
|
||||
arrowsPosition: 'around',
|
||||
autoPlay: false,
|
||||
autoPlaySpeed: 3,
|
||||
largeArrows: false,
|
||||
arrowsStyle: 'type-1',
|
||||
maxCollectionsPerScreen: 6,
|
||||
spaceBetweenCollections: 32,
|
||||
spaceAroundCarousel: 50,
|
||||
imageSize: 'tainacan-medium',
|
||||
loopSlides: false,
|
||||
hideName: true,
|
||||
showCollectionThumbnail: false,
|
||||
tainacanApiRoot: '',
|
||||
tainacanBaseUrl: '',
|
||||
className: '',
|
||||
style: ''
|
||||
}
|
||||
},
|
||||
const VueCollectionsList = createApp( {
|
||||
render() {
|
||||
return h(CarouselCollectionsListTheme, {
|
||||
props: {
|
||||
blockId: blockId,
|
||||
selectedCollections: this.selectedCollections,
|
||||
maxItemsNumber: this.maxItemsNumber,
|
||||
arrowsPosition: this.arrowsPosition,
|
||||
autoPlay: this.autoPlay,
|
||||
autoPlaySpeed: this.autoPlaySpeed,
|
||||
loopSlides: this.loopSlides,
|
||||
largeArrows: this.largeArrows,
|
||||
arrowsStyle: this.arrowsStyle,
|
||||
imageSize: this.imageSize,
|
||||
maxCollectionsPerScreen: this.maxCollectionsPerScreen,
|
||||
spaceBetweenCollections: this.spaceBetweenCollections,
|
||||
spaceAroundCarousel: this.spaceAroundCarousel,
|
||||
hideName: this.hideName,
|
||||
showCollectionThumbnail: this.showCollectionThumbnail,
|
||||
tainacanApiRoot: this.tainacanApiRoot,
|
||||
tainacanBaseUrl: this.tainacanBaseUrl,
|
||||
className: this.className,
|
||||
customStyle: this.style
|
||||
}
|
||||
blockId: block.id,
|
||||
selectedCollections: block.attributes['selected-collections'] != undefined ? JSON.parse(block.attributes['selected-collections'].value) : undefined,
|
||||
maxItemsNumber: block.attributes['max-collections-number'] != undefined ? Number(block.attributes['max-collections-number'].value) : 12,
|
||||
maxCollectionsPerScreen: block.attributes['max-collections-per-screen'] != undefined ? Number(block.attributes['max-collections-per-screen'].value) : 6,
|
||||
spaceBetweenCollections: block.attributes['space-between-collections'] != undefined ? Number(block.attributes['space-between-collections'].value) : 32,
|
||||
spaceAroundCarousel: block.attributes['space-around-carousel'] != undefined ? Number(block.attributes['space-around-carousel'].value) : 50,
|
||||
arrowsPosition: block.attributes['arrows-position'] != undefined ? block.attributes['arrows-position'].value : undefined,
|
||||
autoPlay: block.attributes['auto-play'] != undefined ? block.attributes['auto-play'].value == 'true' : false,
|
||||
largeArrows: block.attributes['large-arrows'] != undefined ? block.attributes['large-arrows'].value == 'true' : false,
|
||||
arrowsStyle: block.attributes['arrows-style'] != undefined ? block.attributes['arrows-style'].value : 'type-1',
|
||||
autoPlaySpeed: block.attributes['auto-play-speed'] != undefined ? Number(block.attributes['auto-play-speed'].value) : 3,
|
||||
loopSlides: block.attributes['loop-slides'] != undefined ? block.attributes['loop-slides'].value == 'true' : false,
|
||||
imageSize: block.attributes['image-size'] != undefined ? block.attributes['image-size'].value : 'tainacan-medium',
|
||||
hideName: block.attributes['hide-name'] != undefined ? block.attributes['hide-name'].value == 'true' : false,
|
||||
showCollectionThumbnail: block.attributes['show-collection-thumbnail'] != undefined ? block.attributes['show-collection-thumbnail'].value == 'true' : false,
|
||||
tainacanApiRoot: block.attributes['tainacan-api-root'] != undefined ? block.attributes['tainacan-api-root'].value : undefined,
|
||||
tainacanBaseUrl: block.attributes['tainacan-base-url'] != undefined ? block.attributes['tainacan-base-url'].value : undefined,
|
||||
});
|
||||
},
|
||||
beforeMount () {
|
||||
this.className = this.$el.attributes.class != undefined ? this.$el.attributes.class.value : undefined;
|
||||
this.selectedCollections = this.$el.attributes['selected-collections'] != undefined ? JSON.parse(this.$el.attributes['selected-collections'].value) : undefined;
|
||||
this.maxItemsNumber = this.$el.attributes['max-collections-number'] != undefined ? this.$el.attributes['max-collections-number'].value : undefined;
|
||||
this.maxCollectionsPerScreen = this.$el.attributes['max-collections-per-screen'] != undefined ? this.$el.attributes['max-collections-per-screen'].value : 6;
|
||||
this.spaceBetweenCollections = this.$el.attributes['space-between-collections'] != undefined ? this.$el.attributes['space-between-collections'].value : 32;
|
||||
this.spaceAroundCarousel = this.$el.attributes['space-around-carousel'] != undefined ? this.$el.attributes['space-around-carousel'].value : 50;
|
||||
this.arrowsPosition = this.$el.attributes['arrows-position'] != undefined ? this.$el.attributes['arrows-position'].value : undefined;
|
||||
this.autoPlay = this.$el.attributes['auto-play'] != undefined ? this.$el.attributes['auto-play'].value == 'true' : false;
|
||||
this.largeArrows = this.$el.attributes['large-arrows'] != undefined ? this.$el.attributes['large-arrows'].value == 'true' : false;
|
||||
this.arrowsStyle = this.$el.attributes['arrows-style'] != undefined ? this.$el.attributes['arrows-style'].value : undefined;
|
||||
this.autoPlaySpeed = this.$el.attributes['auto-play-speed'] != undefined ? this.$el.attributes['auto-play-speed'].value : 3;
|
||||
this.loopSlides = this.$el.attributes['loop-slides'] != undefined ? this.$el.attributes['loop-slides'].value == 'true' : false;
|
||||
this.imageSize = this.$el.attributes['image-size'] != undefined ? this.$el.attributes['image-size'].value : 'tainacan-medium';
|
||||
this.hideName = this.$el.attributes['hide-name'] != undefined ? this.$el.attributes['hide-name'].value == 'true' : false;
|
||||
this.showCollectionThumbnail = this.$el.attributes['show-collection-thumbnail'] != undefined ? this.$el.attributes['show-collection-thumbnail'].value == 'true' : false;
|
||||
this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
|
||||
this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
|
||||
this.style = this.$el.attributes.style != undefined ? this.$el.attributes.style.value : undefined;
|
||||
},
|
||||
methods: {
|
||||
__(text, domain) {
|
||||
return wp.i18n.__(text, domain);
|
||||
}
|
||||
mounted() {
|
||||
block.classList.add('has-mounted');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const VueCollectionsList = createApp( Object.assign({ el: '#' + blockId }, vueOptions) );
|
||||
});
|
||||
|
||||
VueCollectionsList.use(VueBlurHash);
|
||||
VueCollectionsList.use(ThumbnailHelperPlugin);
|
||||
}
|
||||
|
||||
VueCollectionsList.mount('#' + block.id);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,147 +1,143 @@
|
|||
<template>
|
||||
<div
|
||||
:style="customStyle"
|
||||
:class="className + ' has-mounted'">
|
||||
<div
|
||||
:class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') "
|
||||
:style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }"
|
||||
v-if="collections.length > 0 || isLoading">
|
||||
<div
|
||||
class="swiper"
|
||||
:id="blockId + '-carousel'">
|
||||
<ul
|
||||
v-if="isLoading"
|
||||
role="list"
|
||||
class="swiper-wrapper">
|
||||
<li
|
||||
role="listitem"
|
||||
:key="index"
|
||||
v-for="index in 18"
|
||||
class="swiper-slide collection-list-item skeleton">
|
||||
<a>
|
||||
<img>
|
||||
<span v-if="!hideName" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul
|
||||
<div
|
||||
:class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') "
|
||||
:style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }"
|
||||
v-if="collections.length > 0 || isLoading">
|
||||
<div
|
||||
class="swiper"
|
||||
:id="blockId + '-carousel'">
|
||||
<ul
|
||||
v-if="isLoading"
|
||||
role="list"
|
||||
class="swiper-wrapper">
|
||||
<li
|
||||
role="listitem"
|
||||
:key="index"
|
||||
v-for="index in 18"
|
||||
class="swiper-slide collection-list-item skeleton">
|
||||
<a>
|
||||
<img>
|
||||
<span v-if="!hideName" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul
|
||||
v-else
|
||||
role="list"
|
||||
class="swiper-wrapper">
|
||||
<li
|
||||
role="listitem"
|
||||
:key="index"
|
||||
v-for="(collection, index) of collections"
|
||||
:class="'swiper-slide collection-list-item ' + (!showCollectionThumbnail ? 'collection-list-item-grid' : '')">
|
||||
<a
|
||||
v-if="showCollectionThumbnail"
|
||||
:id="isNaN(collection.id) ? collection.id : 'collection-id-' + collection.id"
|
||||
:href="collection.url">
|
||||
<img
|
||||
:src="
|
||||
collection.thumbnail && collection.thumbnail[imageSize] && collection.thumbnail[imageSize][0]
|
||||
?
|
||||
collection.thumbnail[imageSize][0]
|
||||
:
|
||||
(collection.thumbnail && collection.thumbnail['thumbnail'] && collection.thumbnail['thumbnail'][0]
|
||||
?
|
||||
collection.thumbnail['thumbnail'][0]
|
||||
:
|
||||
`${tainacanBaseUrl}/assets/images/placeholder_square.png`)
|
||||
"
|
||||
:data-src="
|
||||
collection.thumbnail && collection.thumbnail[imageSize] && collection.thumbnail[imageSize][0]
|
||||
?
|
||||
collection.thumbnail[imageSize][0]
|
||||
:
|
||||
(collection.thumbnail && collection.thumbnail['thumbnail'] && collection.thumbnail['thumbnail'][0]
|
||||
?
|
||||
collection.thumbnail['thumbnail'][0]
|
||||
:
|
||||
`${tainacanBaseUrl}/assets/images/placeholder_square.png`)
|
||||
"
|
||||
:alt="collection.name ? collection.name : wp.i18n.__('Thumbnail', 'tainacan')">
|
||||
<span v-if="!hideName">{{ collection.name ? collection.name : '' }}</span>
|
||||
</a>
|
||||
<a
|
||||
v-else
|
||||
:id="isNaN(collection.id) ? collection.id : 'collection-id-' + collection.id"
|
||||
:href="collection.url">
|
||||
<div class="collection-items-grid">
|
||||
<blur-hash-image
|
||||
:height="collectionItems[collection.id][0] ? $thumbHelper.getHeight(collectionItems[collection.id][0]['thumbnail'], imageSize) : 275"
|
||||
:width="collectionItems[collection.id][0] ? $thumbHelper.getWidth(collectionItems[collection.id][0]['thumbnail'], imageSize) : 275"
|
||||
:src="collectionItems[collection.id][0] ? $thumbHelper.getSrc(collectionItems[collection.id][0]['thumbnail'], imageSize, collectionItems[collection.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:srcset="collectionItems[collection.id][0] ? $thumbHelper.getSrcSet(collectionItems[collection.id][0]['thumbnail'], imageSize, collectionItems[collection.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:hash="collectionItems[collection.id][0] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][0]['thumbnail'], imageSize) : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
||||
:alt="collectionItems[collection.id][0] && collectionItems[collection.id][0].thumbnail_alt ? collectionItems[collection.id][0].thumbnail_alt : (collectionItems[collection.id][0] && collectionItems[collection.id][0].name ? collectionItems[collection.id][0].name : wp.i18n.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
<blur-hash-image
|
||||
:height="collectionItems[collection.id][1] ? $thumbHelper.getHeight(collectionItems[collection.id][1]['thumbnail'], imageSize) : 275"
|
||||
:width="collectionItems[collection.id][1] ? $thumbHelper.getWidth(collectionItems[collection.id][1]['thumbnail'], imageSize) : 275"
|
||||
:src="collectionItems[collection.id][1] ? $thumbHelper.getSrc(collectionItems[collection.id][1]['thumbnail'], imageSize, collectionItems[collection.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:srcset="collectionItems[collection.id][1] ? $thumbHelper.getSrcSet(collectionItems[collection.id][1]['thumbnail'], imageSize, collectionItems[collection.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:hash="collectionItems[collection.id][1] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][1]['thumbnail'], imageSize) : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
||||
:alt="collectionItems[collection.id][1] && collectionItems[collection.id][1].thumbnail_alt ? collectionItems[collection.id][1].thumbnail_alt : (collectionItems[collection.id][1] && collectionItems[collection.id][1].name ? collectionItems[collection.id][1].name : wp.i18n.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
<blur-hash-image
|
||||
:height="collectionItems[collection.id][2] ? $thumbHelper.getHeight(collectionItems[collection.id][2]['thumbnail'], imageSize) : 275"
|
||||
:width="collectionItems[collection.id][2] ? $thumbHelper.getWidth(collectionItems[collection.id][2]['thumbnail'], imageSize) : 275"
|
||||
:src="collectionItems[collection.id][2] ? $thumbHelper.getSrc(collectionItems[collection.id][2]['thumbnail'], imageSize, collectionItems[collection.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:srcset="collectionItems[collection.id][2] ? $thumbHelper.getSrcSet(collectionItems[collection.id][2]['thumbnail'], imageSize, collectionItems[collection.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:hash="collectionItems[collection.id][2] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][2]['thumbnail'], imageSize) : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
||||
:alt="collectionItems[collection.id][2] && collectionItems[collection.id][2].thumbnail_alt ? collectionItems[collection.id][2].thumbnail_alt : (collectionItems[collection.id][2] && collectionItems[collection.id][2].name ? collectionItems[collection.id][2].name : wp.i18n.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
</div>
|
||||
<span v-if="!hideName">{{ collection.name ? collection.name : '' }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button
|
||||
class="swiper-button-prev"
|
||||
:id="blockId + '-prev'"
|
||||
:style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
|
||||
<svg
|
||||
:width="largeArrows ? 60 : 42"
|
||||
:height="largeArrows ? 60 : 42"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
v-if="arrowsStyle === 'type-2'"
|
||||
d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
|
||||
<path
|
||||
v-else
|
||||
role="list"
|
||||
class="swiper-wrapper">
|
||||
<li
|
||||
role="listitem"
|
||||
:key="index"
|
||||
v-for="(collection, index) of collections"
|
||||
:class="'swiper-slide collection-list-item ' + (!showCollectionThumbnail ? 'collection-list-item-grid' : '')">
|
||||
<a
|
||||
v-if="showCollectionThumbnail"
|
||||
:id="isNaN(collection.id) ? collection.id : 'collection-id-' + collection.id"
|
||||
:href="collection.url">
|
||||
<img
|
||||
:src="
|
||||
collection.thumbnail && collection.thumbnail[imageSize] && collection.thumbnail[imageSize][0]
|
||||
?
|
||||
collection.thumbnail[imageSize][0]
|
||||
:
|
||||
(collection.thumbnail && collection.thumbnail['thumbnail'] && collection.thumbnail['thumbnail'][0]
|
||||
?
|
||||
collection.thumbnail['thumbnail'][0]
|
||||
:
|
||||
`${tainacanBaseUrl}/assets/images/placeholder_square.png`)
|
||||
"
|
||||
:data-src="
|
||||
collection.thumbnail && collection.thumbnail[imageSize] && collection.thumbnail[imageSize][0]
|
||||
?
|
||||
collection.thumbnail[imageSize][0]
|
||||
:
|
||||
(collection.thumbnail && collection.thumbnail['thumbnail'] && collection.thumbnail['thumbnail'][0]
|
||||
?
|
||||
collection.thumbnail['thumbnail'][0]
|
||||
:
|
||||
`${tainacanBaseUrl}/assets/images/placeholder_square.png`)
|
||||
"
|
||||
:alt="collection.name ? collection.name : $root.__('Thumbnail', 'tainacan')">
|
||||
<span v-if="!hideName">{{ collection.name ? collection.name : '' }}</span>
|
||||
</a>
|
||||
<a
|
||||
v-else
|
||||
:id="isNaN(collection.id) ? collection.id : 'collection-id-' + collection.id"
|
||||
:href="collection.url">
|
||||
<div class="collection-items-grid">
|
||||
<blur-hash-image
|
||||
:height="collectionItems[collection.id][0] ? $thumbHelper.getHeight(collectionItems[collection.id][0]['thumbnail'], imageSize) : 275"
|
||||
:width="collectionItems[collection.id][0] ? $thumbHelper.getWidth(collectionItems[collection.id][0]['thumbnail'], imageSize) : 275"
|
||||
:src="collectionItems[collection.id][0] ? $thumbHelper.getSrc(collectionItems[collection.id][0]['thumbnail'], imageSize, collectionItems[collection.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:srcset="collectionItems[collection.id][0] ? $thumbHelper.getSrcSet(collectionItems[collection.id][0]['thumbnail'], imageSize, collectionItems[collection.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:hash="collectionItems[collection.id][0] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][0]['thumbnail'], imageSize) : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
||||
:alt="collectionItems[collection.id][0] && collectionItems[collection.id][0].thumbnail_alt ? collectionItems[collection.id][0].thumbnail_alt : (collectionItems[collection.id][0] && collectionItems[collection.id][0].name ? collectionItems[collection.id][0].name : $root.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
<blur-hash-image
|
||||
:height="collectionItems[collection.id][1] ? $thumbHelper.getHeight(collectionItems[collection.id][1]['thumbnail'], imageSize) : 275"
|
||||
:width="collectionItems[collection.id][1] ? $thumbHelper.getWidth(collectionItems[collection.id][1]['thumbnail'], imageSize) : 275"
|
||||
:src="collectionItems[collection.id][1] ? $thumbHelper.getSrc(collectionItems[collection.id][1]['thumbnail'], imageSize, collectionItems[collection.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:srcset="collectionItems[collection.id][1] ? $thumbHelper.getSrcSet(collectionItems[collection.id][1]['thumbnail'], imageSize, collectionItems[collection.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:hash="collectionItems[collection.id][1] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][1]['thumbnail'], imageSize) : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
||||
:alt="collectionItems[collection.id][1] && collectionItems[collection.id][1].thumbnail_alt ? collectionItems[collection.id][1].thumbnail_alt : (collectionItems[collection.id][1] && collectionItems[collection.id][1].name ? collectionItems[collection.id][1].name : $root.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
<blur-hash-image
|
||||
:height="collectionItems[collection.id][2] ? $thumbHelper.getHeight(collectionItems[collection.id][2]['thumbnail'], imageSize) : 275"
|
||||
:width="collectionItems[collection.id][2] ? $thumbHelper.getWidth(collectionItems[collection.id][2]['thumbnail'], imageSize) : 275"
|
||||
:src="collectionItems[collection.id][2] ? $thumbHelper.getSrc(collectionItems[collection.id][2]['thumbnail'], imageSize, collectionItems[collection.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:srcset="collectionItems[collection.id][2] ? $thumbHelper.getSrcSet(collectionItems[collection.id][2]['thumbnail'], imageSize, collectionItems[collection.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:hash="collectionItems[collection.id][2] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][2]['thumbnail'], imageSize) : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
||||
:alt="collectionItems[collection.id][2] && collectionItems[collection.id][2].thumbnail_alt ? collectionItems[collection.id][2].thumbnail_alt : (collectionItems[collection.id][2] && collectionItems[collection.id][2].name ? collectionItems[collection.id][2].name : $root.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
</div>
|
||||
<span v-if="!hideName">{{ collection.name ? collection.name : '' }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button
|
||||
class="swiper-button-prev"
|
||||
:id="blockId + '-prev'"
|
||||
:style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
|
||||
<svg
|
||||
:width="largeArrows ? 60 : 42"
|
||||
:height="largeArrows ? 60 : 42"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
v-if="arrowsStyle === 'type-2'"
|
||||
d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
|
||||
<path
|
||||
v-else
|
||||
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="swiper-button-next"
|
||||
:id="blockId + '-next'"
|
||||
:style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
|
||||
<svg
|
||||
:width="largeArrows ? 60 : 42"
|
||||
:height="largeArrows ? 60 : 42"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
v-if="arrowsStyle === 'type-2'"
|
||||
d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
|
||||
<path
|
||||
v-else
|
||||
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="collections.length <= 0 && !isLoading"
|
||||
class="spinner-container">
|
||||
{{ $root.__('No collections found.', 'tainacan') }}
|
||||
</div>
|
||||
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="swiper-button-next"
|
||||
:id="blockId + '-next'"
|
||||
:style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
|
||||
<svg
|
||||
:width="largeArrows ? 60 : 42"
|
||||
:height="largeArrows ? 60 : 42"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
v-if="arrowsStyle === 'type-2'"
|
||||
d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
|
||||
<path
|
||||
v-else
|
||||
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="collections.length <= 0 && !isLoading"
|
||||
class="spinner-container">
|
||||
{{ wp.i18n.__('No collections found.', 'tainacan') }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -175,9 +171,7 @@ export default {
|
|||
imageSize: String,
|
||||
showCollectionThumbnail: Boolean,
|
||||
tainacanApiRoot: String,
|
||||
tainacanBaseUrl: String,
|
||||
className: String,
|
||||
customStyle: String
|
||||
tainacanBaseUrl: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -203,8 +197,8 @@ export default {
|
|||
this.tainacanAxios = axios.create({ baseURL: this.apiRoot });
|
||||
if (tainacan_blocks && tainacan_blocks.nonce)
|
||||
this.tainacanAxios.defaults.headers.common['X-WP-Nonce'] = tainacan_blocks.nonce;
|
||||
|
||||
this.fetchCollections();
|
||||
|
||||
this.fetchCollections();
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (typeof this.swiper.destroy == 'function')
|
||||
|
|
@ -223,7 +217,7 @@ export default {
|
|||
this.collectionsRequestSource.cancel('Previous collections search canceled.');
|
||||
|
||||
this.collectionsRequestSource = axios.CancelToken.source();
|
||||
|
||||
|
||||
let endpoint = '/collections?'+ qs.stringify({ postin: this.selectedCollections, perpage: this.selectedCollections.length, fetch_preview_image_items: this.showCollectionThumbnail ? 0 : 3 }) + '&orderby=post__in&fetch_only=name,url,thumbnail';
|
||||
|
||||
this.tainacanAxios.get(endpoint, { cancelToken: this.collectionsRequestSource.token })
|
||||
|
|
@ -285,10 +279,10 @@ export default {
|
|||
autoplay: (self.autoPlay && !self.isLoading) ? { delay: self.autoPlaySpeed*1000 } : false,
|
||||
loop: self.loopSlides && !self.isLoading,
|
||||
a11y: {
|
||||
prevSlideMessage: self.$root.__( 'Previous slide', 'tainacan'),
|
||||
nextSlideMessage: self.$root.__( 'Next slide', 'tainacan'),
|
||||
firstSlideMessage: self.$root.__('This is the first slide', 'tainacan'),
|
||||
lastSlideMessage: self.$root.__('This is the last slide', 'tainacan')
|
||||
prevSlideMessage: wp.i18n.__( 'Previous slide', 'tainacan'),
|
||||
nextSlideMessage: wp.i18n.__( 'Next slide', 'tainacan'),
|
||||
firstSlideMessage: wp.i18n.__('This is the first slide', 'tainacan'),
|
||||
lastSlideMessage: wp.i18n.__('This is the last slide', 'tainacan')
|
||||
},
|
||||
modules: [Autoplay, Navigation, A11y]
|
||||
});
|
||||
|
|
|
|||
|
|
@ -16,109 +16,48 @@ export default (element) => {
|
|||
|
||||
// Checks if this carousel isn't already mounted
|
||||
blocks = blocks.filter((block) => block.classList && !block.classList.contains('has-mounted'));
|
||||
const blockIds = blocks.map((block) => block.id);
|
||||
|
||||
|
||||
// Creates a new Vue Instance to manage each block isolatelly
|
||||
for (let blockId of blockIds) {
|
||||
// Configure Vue logic before passing it to constructor:
|
||||
let vueOptions = {
|
||||
data: () => {
|
||||
return {
|
||||
collectionId: '',
|
||||
searchURL: '',
|
||||
selectedItems: [],
|
||||
loadStrategy: 'search',
|
||||
maxItemsNumber: 12,
|
||||
maxItemsPerScreen: 7,
|
||||
spaceBetweenItems: 32,
|
||||
spaceAroundCarousel: 50,
|
||||
arrowsPosition: 'around',
|
||||
largeArrows: false,
|
||||
arrowsStyle: 'type-1',
|
||||
autoPlay: false,
|
||||
autoPlaySpeed: 3,
|
||||
loopSlides: false,
|
||||
hideTitle: true,
|
||||
imageSize: 'tainacan-medium',
|
||||
showCollectionHeader: false,
|
||||
showCollectionLabel: false,
|
||||
collectionBackgroundColor: '#373839',
|
||||
collectionTextColor: '#ffffff',
|
||||
tainacanApiRoot: '',
|
||||
tainacanBaseUrl: '',
|
||||
className: '',
|
||||
style: ''
|
||||
}
|
||||
},
|
||||
blocks.forEach((block) => {
|
||||
|
||||
const VueCarouselItemsList = createApp( {
|
||||
render() {
|
||||
return h(CarouselItemsListTheme, {
|
||||
props: {
|
||||
blockId: blockId,
|
||||
collectionId: this.collectionId,
|
||||
searchURL: this.searchURL,
|
||||
selectedItems: this.selectedItems,
|
||||
loadStrategy: this.loadStrategy,
|
||||
maxItemsNumber: this.maxItemsNumber,
|
||||
maxItemsPerScreen: this.maxItemsPerScreen,
|
||||
spaceBetweenItems: this.spaceBetweenItems,
|
||||
spaceAroundCarousel: this.spaceAroundCarousel,
|
||||
arrowsPosition: this.arrowsPosition,
|
||||
largeArrows: this.largeArrows,
|
||||
arrowsStyle: this.arrowsStyle,
|
||||
autoPlay: this.autoPlay,
|
||||
autoPlaySpeed: this.autoPlaySpeed,
|
||||
loopSlides: this.loopSlides,
|
||||
hideTitle: this.hideTitle,
|
||||
imageSize: this.imageSize,
|
||||
showCollectionHeader: this.showCollectionHeader,
|
||||
showCollectionLabel: this.showCollectionLabel,
|
||||
collectionBackgroundColor: this.collectionBackgroundColor,
|
||||
collectionTextColor: this.collectionTextColor,
|
||||
tainacanApiRoot: this.tainacanApiRoot,
|
||||
tainacanBaseUrl: this.tainacanBaseUrl,
|
||||
className: this.className,
|
||||
customStyle: this.style
|
||||
}
|
||||
return h(CarouselItemsListTheme, {
|
||||
blockId: block.id,
|
||||
searchURL: block.attributes['search-url'] != undefined ? block.attributes['search-url'].value : undefined,
|
||||
selectedItems: block.attributes['selected-items'] != undefined ? JSON.parse(block.attributes['selected-items'].value) : [],
|
||||
loadStrategy: block.attributes['load-strategy'] != undefined ? block.attributes['load-strategy'].value : 'search',
|
||||
collectionId: block.attributes['collection-id'] != undefined ? block.attributes['collection-id'].value : undefined,
|
||||
maxItemsNumber: block.attributes['max-items-number'] != undefined ? Number(block.attributes['max-items-number'].value) : 12,
|
||||
maxItemsPerScreen: block.attributes['max-items-per-screen'] != undefined ? Number(block.attributes['max-items-per-screen'].value) : 7,
|
||||
spaceBetweenItems: block.attributes['space-between-items'] != undefined ? Number(block.attributes['space-between-items'].value) : 32,
|
||||
spaceAroundCarousel: block.attributes['space-around-carousel'] != undefined ? Number(block.attributes['space-around-carousel'].value) : 50,
|
||||
arrowsPosition: block.attributes['arrows-position'] != undefined ? block.attributes['arrows-position'].value : 'around',
|
||||
largeArrows: block.attributes['large-arrows'] != undefined ? block.attributes['large-arrows'].value == 'true' : false,
|
||||
arrowsStyle: block.attributes['arrows-style'] != undefined ? block.attributes['arrows-style'].value : 'type-1',
|
||||
autoPlay: block.attributes['auto-play'] != undefined ? block.attributes['auto-play'].value == 'true' : false,
|
||||
autoPlaySpeed: block.attributes['auto-play-speed'] != undefined ? Number(block.attributes['auto-play-speed'].value) : 3,
|
||||
loopSlides: block.attributes['loop-slides'] != undefined ? block.attributes['loop-slides'].value == 'true' : false,
|
||||
hideTitle: block.attributes['hide-title'] != undefined ? block.attributes['hide-title'].value == 'true' : false,
|
||||
imageSize: block.attributes['image-size'] != undefined ? block.attributes['image-size'].value : 'tainacan-medium',
|
||||
showCollectionHeader: block.attributes['show-collection-header'] != undefined ? block.attributes['show-collection-header'].value == 'true' : false,
|
||||
showCollectionLabel: block.attributes['show-collection-label'] != undefined ? block.attributes['show-collection-label'].value == 'true' : false,
|
||||
collectionBackgroundColor: block.attributes['collection-background-color'] != undefined ? block.attributes['collection-background-color'].value : '#373839',
|
||||
collectionTextColor: block.attributes['collection-text-color'] != undefined ? block.attributes['collection-text-color'].value : '#ffffff',
|
||||
tainacanApiRoot: block.attributes['tainacan-api-root'] != undefined ? block.attributes['tainacan-api-root'].value : undefined,
|
||||
tainacanBaseUrl: block.attributes['tainacan-base-url'] != undefined ? block.attributes['tainacan-base-url'].value : undefined
|
||||
});
|
||||
},
|
||||
beforeMount () {
|
||||
this.className = this.$el.attributes.class != undefined ? this.$el.attributes.class.value : undefined;
|
||||
this.searchURL = this.$el.attributes['search-url'] != undefined ? this.$el.attributes['search-url'].value : undefined;
|
||||
this.selectedItems = this.$el.attributes['selected-items'] != undefined ? JSON.parse(this.$el.attributes['selected-items'].value) : undefined;
|
||||
this.loadStrategy = this.$el.attributes['load-strategy'] != undefined ? this.$el.attributes['load-strategy'].value : undefined;
|
||||
this.collectionId = this.$el.attributes['collection-id'] != undefined ? this.$el.attributes['collection-id'].value : undefined;
|
||||
this.maxItemsNumber = this.$el.attributes['max-items-number'] != undefined ? this.$el.attributes['max-items-number'].value : undefined;
|
||||
this.maxItemsPerScreen = this.$el.attributes['max-items-per-screen'] != undefined ? this.$el.attributes['max-items-per-screen'].value : 7;
|
||||
this.spaceBetweenItems = this.$el.attributes['space-between-items'] != undefined ? this.$el.attributes['space-between-items'].value : 32;
|
||||
this.spaceAroundCarousel = this.$el.attributes['space-around-carousel'] != undefined ? this.$el.attributes['space-around-carousel'].value : 50;
|
||||
this.arrowsPosition = this.$el.attributes['arrows-position'] != undefined ? this.$el.attributes['arrows-position'].value : undefined;
|
||||
this.largeArrows = this.$el.attributes['large-arrows'] != undefined ? this.$el.attributes['large-arrows'].value == 'true' : false;
|
||||
this.arrowsStyle = this.$el.attributes['arrows-style'] != undefined ? this.$el.attributes['arrows-style'].value : undefined;
|
||||
this.autoPlay = this.$el.attributes['auto-play'] != undefined ? this.$el.attributes['auto-play'].value == 'true' : false;
|
||||
this.autoPlaySpeed = this.$el.attributes['auto-play-speed'] != undefined ? this.$el.attributes['auto-play-speed'].value : 3;
|
||||
this.loopSlides = this.$el.attributes['loop-slides'] != undefined ? this.$el.attributes['loop-slides'].value == 'true' : false;
|
||||
this.hideTitle = this.$el.attributes['hide-title'] != undefined ? this.$el.attributes['hide-title'].value == 'true' : false;
|
||||
this.imageSize = this.$el.attributes['image-size'] != undefined ? this.$el.attributes['image-size'].value : 'tainacan-medium';
|
||||
this.showCollectionHeader = this.$el.attributes['show-collection-header'] != undefined ? this.$el.attributes['show-collection-header'].value == 'true' : false;
|
||||
this.showCollectionLabel = this.$el.attributes['show-collection-label'] != undefined ? this.$el.attributes['show-collection-label'].value == 'true' : false;
|
||||
this.collectionBackgroundColor = this.$el.attributes['collection-background-color'] != undefined ? this.$el.attributes['collection-background-color'].value : undefined;
|
||||
this.collectionTextColor = this.$el.attributes['collection-text-color'] != undefined ? this.$el.attributes['collection-text-color'].value : undefined;
|
||||
this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
|
||||
this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
|
||||
this.style = this.$el.attributes.style != undefined ? this.$el.attributes.style.value : undefined;
|
||||
},
|
||||
methods: {
|
||||
__(text, domain) {
|
||||
return wp.i18n.__(text, domain);
|
||||
}
|
||||
mounted() {
|
||||
block.classList.add('has-mounted');
|
||||
}
|
||||
};
|
||||
|
||||
const VueCarouselItemsList = createApp( Object.assign({ el: '#' + blockId }, vueOptions) );
|
||||
});
|
||||
|
||||
VueCarouselItemsList.use(ThumbnailHelperPlugin);
|
||||
VueCarouselItemsList.use(VueBlurHash);
|
||||
}
|
||||
|
||||
VueCarouselItemsList.mount('#' + block.id);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,150 +1,146 @@
|
|||
<template>
|
||||
<div
|
||||
:style="customStyle"
|
||||
:class="className + ' has-mounted'">
|
||||
<div v-if="showCollectionHeader">
|
||||
<div
|
||||
v-if="isLoadingCollection"
|
||||
class="carousel-items-collection-header skeleton"
|
||||
:style="{ height: '165px' }"/>
|
||||
<a
|
||||
v-else
|
||||
:href="collection.url ? collection.url : ''"
|
||||
class="carousel-items-collection-header">
|
||||
<div
|
||||
:style="{
|
||||
backgroundColor: collectionBackgroundColor ? collectionBackgroundColor : '',
|
||||
paddingRight: collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium']) ? '' : '20px',
|
||||
paddingTop: (!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) ? '1em' : '',
|
||||
width: collection && collection.header_image ? '' : '100%'
|
||||
}"
|
||||
:class="
|
||||
'collection-name ' +
|
||||
((!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) && (!collection || !collection.header_image) ? 'only-collection-name' : '')
|
||||
">
|
||||
<h3 :style="{ color: collectionTextColor ? collectionTextColor : '' }">
|
||||
<span
|
||||
v-if="showCollectionLabel"
|
||||
class="label">
|
||||
{{ $root.__('Collection', 'tainacan') }}
|
||||
<br>
|
||||
</span>
|
||||
{{ collection && collection.name ? collection.name : '' }}
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
v-if="collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium'])"
|
||||
class="collection-thumbnail"
|
||||
:style="{
|
||||
backgroundImage: 'url(' + (collection.thumbnail['tainacan-medium'] != undefined ? (collection.thumbnail['tainacan-medium'][0]) : (collection.thumbnail['medium'][0])) + ')',
|
||||
}"/>
|
||||
<div
|
||||
class="collection-header-image"
|
||||
:style="{
|
||||
backgroundImage: collection.header_image ? 'url(' + collection.header_image + ')' : '',
|
||||
minHeight: collection && collection.header_image ? '' : '80px',
|
||||
display: !(collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium'])) ? collection && collection.header_image ? '' : 'none' : ''
|
||||
}"/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
:class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') "
|
||||
:style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }"
|
||||
v-if="items.length > 0 || isLoading">
|
||||
<div
|
||||
class="swiper"
|
||||
:id="blockId + '-carousel'">
|
||||
<ul
|
||||
v-if="isLoading"
|
||||
role="list"
|
||||
class="swiper-wrapper"
|
||||
:style="{
|
||||
marginTop: showCollectionHeader ? '1.35em' : '0px'
|
||||
}">
|
||||
<li
|
||||
role="listitem"
|
||||
:key="index"
|
||||
v-for="index in 18"
|
||||
class="swiper-slide collection-list-item skeleton">
|
||||
<a>
|
||||
<img>
|
||||
<span v-if="!hideName" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul
|
||||
v-else
|
||||
role="list"
|
||||
class="swiper-wrapper"
|
||||
:style="{
|
||||
marginTop: showCollectionHeader ? '1.35em' : '0px'
|
||||
}">
|
||||
<li
|
||||
role="listitem"
|
||||
:key="index"
|
||||
v-for="(item, index) of items"
|
||||
class="swiper-slide item-list-item"
|
||||
:class="{ 'is-forced-square': ['tainacan-medium', 'tainacan-small'].indexOf(imageSize) > -1 }">
|
||||
<a
|
||||
:id="isNaN(item.id) ? item.id : 'item-id-' + item.id"
|
||||
:href="item.url">
|
||||
<blur-hash-image
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], imageSize)"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], imageSize)"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype'])"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], imageSize, item['document_mimetype'])"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], imageSize)"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : $root.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
<span v-if="!hideTitle">{{ item.title ? item.title : '' }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button
|
||||
class="swiper-button-prev"
|
||||
:id="blockId + '-prev'"
|
||||
:style="hideTitle ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
|
||||
<svg
|
||||
:width="largeArrows ? 60 : 42"
|
||||
:height="largeArrows ? 60 : 42"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
v-if="arrowsStyle === 'type-2'"
|
||||
d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
|
||||
<path
|
||||
v-else
|
||||
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="swiper-button-next"
|
||||
:id="blockId + '-next'"
|
||||
:style="hideTitle ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
|
||||
<svg
|
||||
:width="largeArrows ? 60 : 42"
|
||||
:height="largeArrows ? 60 : 42"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
v-if="arrowsStyle === 'type-2'"
|
||||
d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
|
||||
<path
|
||||
v-else
|
||||
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="showCollectionHeader">
|
||||
<div
|
||||
v-else-if="items.length <= 0 && !isLoading"
|
||||
class="spinner-container">
|
||||
{{ $root.__('No items found.', 'tainacan') }}
|
||||
v-if="isLoadingCollection"
|
||||
class="carousel-items-collection-header skeleton"
|
||||
:style="{ height: '165px' }"/>
|
||||
<a
|
||||
v-else
|
||||
:href="collection.url ? collection.url : ''"
|
||||
class="carousel-items-collection-header">
|
||||
<div
|
||||
:style="{
|
||||
backgroundColor: collectionBackgroundColor ? collectionBackgroundColor : '',
|
||||
paddingRight: collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium']) ? '' : '20px',
|
||||
paddingTop: (!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) ? '1em' : '',
|
||||
width: collection && collection.header_image ? '' : '100%'
|
||||
}"
|
||||
:class="
|
||||
'collection-name ' +
|
||||
((!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) && (!collection || !collection.header_image) ? 'only-collection-name' : '')
|
||||
">
|
||||
<h3 :style="{ color: collectionTextColor ? collectionTextColor : '' }">
|
||||
<span
|
||||
v-if="showCollectionLabel"
|
||||
class="label">
|
||||
{{ wp.i18n.__('Collection', 'tainacan') }}
|
||||
<br>
|
||||
</span>
|
||||
{{ collection && collection.name ? collection.name : '' }}
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
v-if="collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium'])"
|
||||
class="collection-thumbnail"
|
||||
:style="{
|
||||
backgroundImage: 'url(' + (collection.thumbnail['tainacan-medium'] != undefined ? (collection.thumbnail['tainacan-medium'][0]) : (collection.thumbnail['medium'][0])) + ')',
|
||||
}"/>
|
||||
<div
|
||||
class="collection-header-image"
|
||||
:style="{
|
||||
backgroundImage: collection.header_image ? 'url(' + collection.header_image + ')' : '',
|
||||
minHeight: collection && collection.header_image ? '' : '80px',
|
||||
display: !(collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium'])) ? collection && collection.header_image ? '' : 'none' : ''
|
||||
}"/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
:class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') "
|
||||
:style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }"
|
||||
v-if="items.length > 0 || isLoading">
|
||||
<div
|
||||
class="swiper"
|
||||
:id="blockId + '-carousel'">
|
||||
<ul
|
||||
v-if="isLoading"
|
||||
role="list"
|
||||
class="swiper-wrapper"
|
||||
:style="{
|
||||
marginTop: showCollectionHeader ? '1.35em' : '0px'
|
||||
}">
|
||||
<li
|
||||
role="listitem"
|
||||
:key="index"
|
||||
v-for="index in 18"
|
||||
class="swiper-slide collection-list-item skeleton">
|
||||
<a>
|
||||
<img>
|
||||
<span v-if="!hideTitle" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul
|
||||
v-else
|
||||
role="list"
|
||||
class="swiper-wrapper"
|
||||
:style="{
|
||||
marginTop: showCollectionHeader ? '1.35em' : '0px'
|
||||
}">
|
||||
<li
|
||||
role="listitem"
|
||||
:key="index"
|
||||
v-for="(item, index) of items"
|
||||
class="swiper-slide item-list-item"
|
||||
:class="{ 'is-forced-square': ['tainacan-medium', 'tainacan-small'].indexOf(imageSize) > -1 }">
|
||||
<a
|
||||
:id="isNaN(item.id) ? item.id : 'item-id-' + item.id"
|
||||
:href="item.url">
|
||||
<blur-hash-image
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], imageSize)"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], imageSize)"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype'])"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], imageSize, item['document_mimetype'])"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], imageSize)"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : wp.i18n.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
<span v-if="!hideTitle">{{ item.title ? item.title : '' }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button
|
||||
class="swiper-button-prev"
|
||||
:id="blockId + '-prev'"
|
||||
:style="hideTitle ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
|
||||
<svg
|
||||
:width="largeArrows ? 60 : 42"
|
||||
:height="largeArrows ? 60 : 42"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
v-if="arrowsStyle === 'type-2'"
|
||||
d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
|
||||
<path
|
||||
v-else
|
||||
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="swiper-button-next"
|
||||
:id="blockId + '-next'"
|
||||
:style="hideTitle ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
|
||||
<svg
|
||||
:width="largeArrows ? 60 : 42"
|
||||
:height="largeArrows ? 60 : 42"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
v-if="arrowsStyle === 'type-2'"
|
||||
d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
|
||||
<path
|
||||
v-else
|
||||
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="items.length <= 0 && !isLoading"
|
||||
class="spinner-container">
|
||||
{{ wp.i18n.__('No items found.', 'tainacan') }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -184,9 +180,7 @@ export default {
|
|||
collectionBackgroundColor: String,
|
||||
collectionTextColor: String,
|
||||
tainacanApiRoot: String,
|
||||
tainacanBaseUrl: String,
|
||||
className: String,
|
||||
customStyle: String
|
||||
tainacanBaseUrl: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -371,10 +365,10 @@ export default {
|
|||
autoplay: self.autoPlay ? { delay: self.autoPlaySpeed*1000 } : false,
|
||||
loop: self.loopSlides ? self.loopSlides : false,
|
||||
a11y: {
|
||||
prevSlideMessage: self.$root.__( 'Previous slide', 'tainacan'),
|
||||
nextSlideMessage: self.$root.__( 'Next slide', 'tainacan'),
|
||||
firstSlideMessage: self.$root.__('This is the first slide', 'tainacan'),
|
||||
lastSlideMessage: self.$root.__('This is the last slide', 'tainacan')
|
||||
prevSlideMessage: wp.i18n.__( 'Previous slide', 'tainacan'),
|
||||
nextSlideMessage: wp.i18n.__( 'Next slide', 'tainacan'),
|
||||
firstSlideMessage: wp.i18n.__('This is the first slide', 'tainacan'),
|
||||
lastSlideMessage: wp.i18n.__('This is the last slide', 'tainacan')
|
||||
},
|
||||
modules: [Autoplay, Navigation, A11y]
|
||||
});
|
||||
|
|
|
|||
|
|
@ -15,95 +15,43 @@ export default (element) => {
|
|||
|
||||
// Checks if this carousel isn't already mounted
|
||||
blocks = blocks.filter((block) => block.classList && !block.classList.contains('has-mounted'));
|
||||
const blockIds = Object.values(blocks).map((block) => block.id);
|
||||
|
||||
// Creates a new Vue Instance to manage each block isolatelly
|
||||
for (let blockId of blockIds) {
|
||||
blocks.forEach((block) => {
|
||||
|
||||
// Configure Vue logic before passing it to constructor:
|
||||
let vueOptions = {
|
||||
data: () => {
|
||||
return {
|
||||
selectedItem: [],
|
||||
maxItemsNumber: 12,
|
||||
arrowsPosition: 'around',
|
||||
autoPlay: false,
|
||||
autoPlaySpeed: 3,
|
||||
largeArrows: false,
|
||||
arrowsStyle: 'type-1',
|
||||
maxTermsPerScreen: 6,
|
||||
spaceBetweenTerms: 32,
|
||||
spaceAroundCarousel: 50,
|
||||
imageSize: 'tainacan-medium',
|
||||
loopSlides: false,
|
||||
hideName: true,
|
||||
showTermThumbnail: false,
|
||||
tainacanApiRoot: '',
|
||||
tainacanBaseUrl: '',
|
||||
className: '',
|
||||
taxonomyId: '',
|
||||
style: ''
|
||||
}
|
||||
},
|
||||
const VueCarouselTermsList = createApp({
|
||||
render() {
|
||||
return h(CarouselTermsListTheme, {
|
||||
props: {
|
||||
blockId: blockId,
|
||||
selectedTerms: this.selectedTerms,
|
||||
maxItemsNumber: this.maxItemsNumber,
|
||||
arrowsPosition: this.arrowsPosition,
|
||||
autoPlay: this.autoPlay,
|
||||
autoPlaySpeed: this.autoPlaySpeed,
|
||||
loopSlides: this.loopSlides,
|
||||
largeArrows: this.largeArrows,
|
||||
arrowsStyle: this.arrowsStyle,
|
||||
imageSize: this.imageSize,
|
||||
maxTermsPerScreen: this.maxTermsPerScreen,
|
||||
spaceBetweenTerms: this.spaceBetweenTerms,
|
||||
spaceAroundCarousel: this.spaceAroundCarousel,
|
||||
hideName: this.hideName,
|
||||
showTermThumbnail: this.showTermThumbnail,
|
||||
tainacanApiRoot: this.tainacanApiRoot,
|
||||
tainacanBaseUrl: this.tainacanBaseUrl,
|
||||
className: this.className,
|
||||
taxonomyId: this.taxonomyId,
|
||||
customStyle: this.style
|
||||
}
|
||||
blockId: block.id,
|
||||
selectedTerms: block.attributes['selected-terms'] != undefined ? JSON.parse(block.attributes['selected-terms'].value) : undefined,
|
||||
maxItemsNumber: block.attributes['max-terms-number'] != undefined ? block.attributes['max-terms-number'].value : 12,
|
||||
maxTermsPerScreen: block.attributes['max-terms-per-screen'] != undefined ? Number(block.attributes['max-terms-per-screen'].value) : 6,
|
||||
arrowsPosition: block.attributes['arrows-position'] != undefined ? block.attributes['arrows-position'].value : undefined,
|
||||
autoPlay: block.attributes['auto-play'] != undefined ? block.attributes['auto-play'].value == 'true' : false,
|
||||
autoPlaySpeed: block.attributes['auto-play-speed'] != undefined ? Number(block.attributes['auto-play-speed'].value) : 3,
|
||||
spaceBetweenTerms: block.attributes['space-between-terms'] != undefined ? Number(block.attributes['space-between-terms'].value) : 32,
|
||||
spaceAroundCarousel: block.attributes['space-around-carousel'] != undefined ? Number(block.attributes['space-around-carousel'].value) : 50,
|
||||
largeArrows: block.attributes['large-arrows'] != undefined ? block.attributes['large-arrows'].value == 'true' : false,
|
||||
arrowsStyle: block.attributes['arrows-style'] != undefined ? block.attributes['arrows-style'].value : 'type-1',
|
||||
loopSlides: block.attributes['loop-slides'] != undefined ? block.attributes['loop-slides'].value == 'true' : false,
|
||||
imageSize: block.attributes['image-size'] != undefined ? block.attributes['image-size'].value : 'tainacan-medium',
|
||||
hideName: block.attributes['hide-name'] != undefined ? block.attributes['hide-name'].value == 'true' : false,
|
||||
taxonomyId: block.attributes['taxonomy-id'] != undefined ? block.attributes['taxonomy-id'].value : undefined,
|
||||
showTermThumbnail: block.attributes['show-term-thumbnail'] != undefined ? block.attributes['show-term-thumbnail'].value == 'true' : false,
|
||||
tainacanApiRoot: block.attributes['tainacan-api-root'] != undefined ? block.attributes['tainacan-api-root'].value : undefined,
|
||||
tainacanBaseUrl: block.attributes['tainacan-base-url'] != undefined ? block.attributes['tainacan-base-url'].value : undefined
|
||||
});
|
||||
},
|
||||
beforeMount () {
|
||||
this.className = this.$el.attributes.class != undefined ? this.$el.attributes.class.value : undefined;
|
||||
this.selectedTerms = this.$el.attributes['selected-terms'] != undefined ? JSON.parse(this.$el.attributes['selected-terms'].value) : undefined;
|
||||
this.maxItemsNumber = this.$el.attributes['max-terms-number'] != undefined ? this.$el.attributes['max-terms-number'].value : undefined;
|
||||
this.maxTermsPerScreen = this.$el.attributes['max-terms-per-screen'] != undefined ? this.$el.attributes['max-terms-per-screen'].value : undefined;
|
||||
this.arrowsPosition = this.$el.attributes['arrows-position'] != undefined ? this.$el.attributes['arrows-position'].value : undefined;
|
||||
this.autoPlay = this.$el.attributes['auto-play'] != undefined ? this.$el.attributes['auto-play'].value == 'true' : false;
|
||||
this.autoPlaySpeed = this.$el.attributes['auto-play-speed'] != undefined ? this.$el.attributes['auto-play-speed'].value : 3;
|
||||
this.spaceBetweenTerms = this.$el.attributes['space-between-terms'] != undefined ? this.$el.attributes['space-between-terms'].value : 32;
|
||||
this.spaceAroundCarousel = this.$el.attributes['space-around-carousel'] != undefined ? this.$el.attributes['space-around-carousel'].value : 50;
|
||||
this.largeArrows = this.$el.attributes['large-arrows'] != undefined ? this.$el.attributes['large-arrows'].value == 'true' : false;
|
||||
this.arrowsStyle = this.$el.attributes['arrows-style'] != undefined ? this.$el.attributes['arrows-style'].value : undefined;
|
||||
this.loopSlides = this.$el.attributes['loop-slides'] != undefined ? this.$el.attributes['loop-slides'].value == 'true' : false;
|
||||
this.imageSize = this.$el.attributes['image-size'] != undefined ? this.$el.attributes['image-size'].value : 'tainacan-medium';
|
||||
this.hideName = this.$el.attributes['hide-name'] != undefined ? this.$el.attributes['hide-name'].value == 'true' : false;
|
||||
this.taxonomyId = this.$el.attributes['taxonomy-id'] != undefined ? this.$el.attributes['taxonomy-id'].value : undefined;
|
||||
this.showTermThumbnail = this.$el.attributes['show-term-thumbnail'] != undefined ? this.$el.attributes['show-term-thumbnail'].value == 'true' : false;
|
||||
this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
|
||||
this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
|
||||
this.style = this.$el.attributes.style != undefined ? this.$el.attributes.style.value : undefined;
|
||||
},
|
||||
methods: {
|
||||
__(text, domain) {
|
||||
return wp.i18n.__(text, domain);
|
||||
}
|
||||
mounted() {
|
||||
block.classList.add('has-mounted');
|
||||
}
|
||||
};
|
||||
|
||||
const VueCarouselTermsList = createApp( Object.assign({ el: '#' + blockId }, vueOptions) );
|
||||
});
|
||||
|
||||
VueCarouselTermsList.use(VueBlurHash);
|
||||
VueCarouselTermsList.use(ThumbnailHelperPlugin);
|
||||
}
|
||||
|
||||
VueCarouselTermsList.mount('#' + block.id);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,148 +1,143 @@
|
|||
<template>
|
||||
<div
|
||||
:style="customStyle"
|
||||
:class="className + ' has-mounted'">
|
||||
|
||||
<div
|
||||
:class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '')"
|
||||
:style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }"
|
||||
v-if="terms.length > 0 || isLoading">
|
||||
<div
|
||||
class="swiper"
|
||||
:id="blockId + '-carousel'">
|
||||
<ul
|
||||
v-if="isLoading"
|
||||
role="list"
|
||||
class="swiper-wrapper">
|
||||
<li
|
||||
role="listitem"
|
||||
:key="index"
|
||||
v-for="index in 18"
|
||||
class="swiper-slide term-list-item skeleton">
|
||||
<a>
|
||||
<img>
|
||||
<span v-if="!hideName" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul
|
||||
<div
|
||||
:class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '')"
|
||||
:style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }"
|
||||
v-if="terms.length > 0 || isLoading">
|
||||
<div
|
||||
class="swiper"
|
||||
:id="blockId + '-carousel'">
|
||||
<ul
|
||||
v-if="isLoading"
|
||||
role="list"
|
||||
class="swiper-wrapper">
|
||||
<li
|
||||
role="listitem"
|
||||
:key="index"
|
||||
v-for="index in 18"
|
||||
class="swiper-slide term-list-item skeleton">
|
||||
<a>
|
||||
<img>
|
||||
<span v-if="!hideName" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul
|
||||
v-else
|
||||
role="list"
|
||||
class="swiper-wrapper">
|
||||
<li
|
||||
role="listitem"
|
||||
:key="index"
|
||||
v-for="(term, index) of terms"
|
||||
:class="'swiper-slide term-list-item ' + (!showTermThumbnail ? 'term-list-item-grid' : '')">
|
||||
<a
|
||||
v-if="showTermThumbnail"
|
||||
:id="isNaN(term.id) ? term.id : 'term-id-' + term.id"
|
||||
:href="term.url">
|
||||
<img
|
||||
:src="
|
||||
term.thumbnail && term.thumbnail[imageSize] && term.thumbnail[imageSize][0]
|
||||
?
|
||||
term.thumbnail[imageSize][0]
|
||||
:
|
||||
(term.thumbnail && term.thumbnail['thumbnail'] && term.thumbnail['thumbnail'][0]
|
||||
?
|
||||
term.thumbnail['thumbnail'][0]
|
||||
:
|
||||
`${tainacanBaseUrl}/assets/images/placeholder_square.png`)
|
||||
"
|
||||
:data-src="
|
||||
term.thumbnail && term.thumbnail[imageSize] && term.thumbnail[imageSize][0]
|
||||
?
|
||||
term.thumbnail[imageSize][0]
|
||||
:
|
||||
(term.thumbnail && term.thumbnail['thumbnail'] && term.thumbnail['thumbnail'][0]
|
||||
?
|
||||
term.thumbnail['thumbnail'][0]
|
||||
:
|
||||
`${tainacanBaseUrl}/assets/images/placeholder_square.png`)
|
||||
"
|
||||
:alt="term.thumbnail_alt ? term.thumbnail_alt : (term.name ? term.name : wp.i18n.__('Thumbnail', 'tainacan'))" >
|
||||
<span v-if="!hideName">{{ term.name ? term.name : '' }}</span>
|
||||
</a>
|
||||
<a
|
||||
v-else
|
||||
:id="isNaN(term.id) ? term.id : 'term-id-' + term.id"
|
||||
:href="term.url">
|
||||
<div class="term-items-grid">
|
||||
<blur-hash-image
|
||||
:height="termItems[term.id][0] ? $thumbHelper.getHeight(termItems[term.id][0]['thumbnail'], 'tainacan-medium') : 275"
|
||||
:width="termItems[term.id][0] ? $thumbHelper.getWidth(termItems[term.id][0]['thumbnail'], 'tainacan-medium') : 275"
|
||||
:src="termItems[term.id][0] ? $thumbHelper.getSrc(termItems[term.id][0]['thumbnail'], 'tainacan-medium', termItems[term.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:srcset="termItems[term.id][0] ? $thumbHelper.getSrcSet(termItems[term.id][0]['thumbnail'], 'tainacan-medium', termItems[term.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:hash="termItems[term.id][0] ? $thumbHelper.getBlurhashString(termItems[term.id][0]['thumbnail'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
||||
:alt="termItems[term.id][0] && termItems[term.id][0].thumbnail_alt ? termItems[term.id][0].thumbnail_alt : (termItems[term.id][0] && termItems[term.id][0].name ? termItems[term.id][0].name : wp.i18n.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
<blur-hash-image
|
||||
:height="termItems[term.id][1] ? $thumbHelper.getHeight(termItems[term.id][1]['thumbnail'], 'tainacan-medium') : 275"
|
||||
:width="termItems[term.id][1] ? $thumbHelper.getWidth(termItems[term.id][1]['thumbnail'], 'tainacan-medium') : 275"
|
||||
:src="termItems[term.id][1] ? $thumbHelper.getSrc(termItems[term.id][1]['thumbnail'], 'tainacan-medium', termItems[term.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:srcset="termItems[term.id][1] ? $thumbHelper.getSrcSet(termItems[term.id][1]['thumbnail'], 'tainacan-medium', termItems[term.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:hash="termItems[term.id][1] ? $thumbHelper.getBlurhashString(termItems[term.id][1]['thumbnail'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
||||
:alt="termItems[term.id][1] && termItems[term.id][1].thumbnail_alt ? termItems[term.id][1].thumbnail_alt : (termItems[term.id][1] && termItems[term.id][1].name ? termItems[term.id][1].name : wp.i18n.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
<blur-hash-image
|
||||
:height="termItems[term.id][2] ? $thumbHelper.getHeight(termItems[term.id][2]['thumbnail'], 'tainacan-medium') : 275"
|
||||
:width="termItems[term.id][2] ? $thumbHelper.getWidth(termItems[term.id][2]['thumbnail'], 'tainacan-medium') : 275"
|
||||
:src="termItems[term.id][2] ? $thumbHelper.getSrc(termItems[term.id][2]['thumbnail'], 'tainacan-medium', termItems[term.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:srcset="termItems[term.id][2] ? $thumbHelper.getSrcSet(termItems[term.id][2]['thumbnail'], 'tainacan-medium', termItems[term.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:hash="termItems[term.id][2] ? $thumbHelper.getBlurhashString(termItems[term.id][2]['thumbnail'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
||||
:alt="termItems[term.id][2] && termItems[term.id][2].thumbnail_alt ? termItems[term.id][2].thumbnail_alt : (termItems[term.id][2] && termItems[term.id][2].name ? termItems[term.id][2].name : wp.i18n.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
</div>
|
||||
<span v-if="!hideName">{{ term.name ? term.name : '' }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button
|
||||
class="swiper-button-prev"
|
||||
:id="blockId + '-prev'"
|
||||
:style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
|
||||
<svg
|
||||
:width="largeArrows ? 60 : 42"
|
||||
:height="largeArrows ? 60 : 42"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
v-if="arrowsStyle === 'type-2'"
|
||||
d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
|
||||
<path
|
||||
v-else
|
||||
role="list"
|
||||
class="swiper-wrapper">
|
||||
<li
|
||||
role="listitem"
|
||||
:key="index"
|
||||
v-for="(term, index) of terms"
|
||||
:class="'swiper-slide term-list-item ' + (!showTermThumbnail ? 'term-list-item-grid' : '')">
|
||||
<a
|
||||
v-if="showTermThumbnail"
|
||||
:id="isNaN(term.id) ? term.id : 'term-id-' + term.id"
|
||||
:href="term.url">
|
||||
<img
|
||||
:src="
|
||||
term.thumbnail && term.thumbnail[imageSize] && term.thumbnail[imageSize][0]
|
||||
?
|
||||
term.thumbnail[imageSize][0]
|
||||
:
|
||||
(term.thumbnail && term.thumbnail['thumbnail'] && term.thumbnail['thumbnail'][0]
|
||||
?
|
||||
term.thumbnail['thumbnail'][0]
|
||||
:
|
||||
`${tainacanBaseUrl}/assets/images/placeholder_square.png`)
|
||||
"
|
||||
:data-src="
|
||||
term.thumbnail && term.thumbnail[imageSize] && term.thumbnail[imageSize][0]
|
||||
?
|
||||
term.thumbnail[imageSize][0]
|
||||
:
|
||||
(term.thumbnail && term.thumbnail['thumbnail'] && term.thumbnail['thumbnail'][0]
|
||||
?
|
||||
term.thumbnail['thumbnail'][0]
|
||||
:
|
||||
`${tainacanBaseUrl}/assets/images/placeholder_square.png`)
|
||||
"
|
||||
:alt="term.thumbnail_alt ? term.thumbnail_alt : (term.name ? term.name : $root.__('Thumbnail', 'tainacan'))" >
|
||||
<span v-if="!hideName">{{ term.name ? term.name : '' }}</span>
|
||||
</a>
|
||||
<a
|
||||
v-else
|
||||
:id="isNaN(term.id) ? term.id : 'term-id-' + term.id"
|
||||
:href="term.url">
|
||||
<div class="term-items-grid">
|
||||
<blur-hash-image
|
||||
:height="termItems[term.id][0] ? $thumbHelper.getHeight(termItems[term.id][0]['thumbnail'], 'tainacan-medium') : 275"
|
||||
:width="termItems[term.id][0] ? $thumbHelper.getWidth(termItems[term.id][0]['thumbnail'], 'tainacan-medium') : 275"
|
||||
:src="termItems[term.id][0] ? $thumbHelper.getSrc(termItems[term.id][0]['thumbnail'], 'tainacan-medium', termItems[term.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:srcset="termItems[term.id][0] ? $thumbHelper.getSrcSet(termItems[term.id][0]['thumbnail'], 'tainacan-medium', termItems[term.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:hash="termItems[term.id][0] ? $thumbHelper.getBlurhashString(termItems[term.id][0]['thumbnail'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
||||
:alt="termItems[term.id][0] && termItems[term.id][0].thumbnail_alt ? termItems[term.id][0].thumbnail_alt : (termItems[term.id][0] && termItems[term.id][0].name ? termItems[term.id][0].name : $root.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
<blur-hash-image
|
||||
:height="termItems[term.id][1] ? $thumbHelper.getHeight(termItems[term.id][1]['thumbnail'], 'tainacan-medium') : 275"
|
||||
:width="termItems[term.id][1] ? $thumbHelper.getWidth(termItems[term.id][1]['thumbnail'], 'tainacan-medium') : 275"
|
||||
:src="termItems[term.id][1] ? $thumbHelper.getSrc(termItems[term.id][1]['thumbnail'], 'tainacan-medium', termItems[term.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:srcset="termItems[term.id][1] ? $thumbHelper.getSrcSet(termItems[term.id][1]['thumbnail'], 'tainacan-medium', termItems[term.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:hash="termItems[term.id][1] ? $thumbHelper.getBlurhashString(termItems[term.id][1]['thumbnail'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
||||
:alt="termItems[term.id][1] && termItems[term.id][1].thumbnail_alt ? termItems[term.id][1].thumbnail_alt : (termItems[term.id][1] && termItems[term.id][1].name ? termItems[term.id][1].name : $root.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
<blur-hash-image
|
||||
:height="termItems[term.id][2] ? $thumbHelper.getHeight(termItems[term.id][2]['thumbnail'], 'tainacan-medium') : 275"
|
||||
:width="termItems[term.id][2] ? $thumbHelper.getWidth(termItems[term.id][2]['thumbnail'], 'tainacan-medium') : 275"
|
||||
:src="termItems[term.id][2] ? $thumbHelper.getSrc(termItems[term.id][2]['thumbnail'], 'tainacan-medium', termItems[term.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:srcset="termItems[term.id][2] ? $thumbHelper.getSrcSet(termItems[term.id][2]['thumbnail'], 'tainacan-medium', termItems[term.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:hash="termItems[term.id][2] ? $thumbHelper.getBlurhashString(termItems[term.id][2]['thumbnail'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
||||
:alt="termItems[term.id][2] && termItems[term.id][2].thumbnail_alt ? termItems[term.id][2].thumbnail_alt : (termItems[term.id][2] && termItems[term.id][2].name ? termItems[term.id][2].name : $root.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
</div>
|
||||
<span v-if="!hideName">{{ term.name ? term.name : '' }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button
|
||||
class="swiper-button-prev"
|
||||
:id="blockId + '-prev'"
|
||||
:style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
|
||||
<svg
|
||||
:width="largeArrows ? 60 : 42"
|
||||
:height="largeArrows ? 60 : 42"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
v-if="arrowsStyle === 'type-2'"
|
||||
d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
|
||||
<path
|
||||
v-else
|
||||
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="swiper-button-next"
|
||||
:id="blockId + '-next'"
|
||||
:style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
|
||||
<svg
|
||||
:width="largeArrows ? 60 : 42"
|
||||
:height="largeArrows ? 60 : 42"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
v-if="arrowsStyle === 'type-2'"
|
||||
d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
|
||||
<path
|
||||
v-else
|
||||
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="terms.length <= 0 && !isLoading"
|
||||
class="spinner-container">
|
||||
{{ $root.__('No terms found.', 'tainacan') }}
|
||||
</div>
|
||||
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="swiper-button-next"
|
||||
:id="blockId + '-next'"
|
||||
:style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
|
||||
<svg
|
||||
:width="largeArrows ? 60 : 42"
|
||||
:height="largeArrows ? 60 : 42"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
v-if="arrowsStyle === 'type-2'"
|
||||
d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
|
||||
<path
|
||||
v-else
|
||||
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="terms.length <= 0 && !isLoading"
|
||||
class="spinner-container">
|
||||
{{ wp.i18n.__('No terms found.', 'tainacan') }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -177,9 +172,7 @@ export default {
|
|||
showTermThumbnail: Boolean,
|
||||
tainacanApiRoot: String,
|
||||
tainacanBaseUrl: String,
|
||||
className: String,
|
||||
taxonomyId: String,
|
||||
customStyle: String
|
||||
taxonomyId: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -226,7 +219,7 @@ export default {
|
|||
|
||||
this.termsRequestSource = axios.CancelToken.source();
|
||||
|
||||
let endpoint = '/taxonomy/' + this.taxonomyId + '/terms/?'+ qs.stringify({ hideempty: 0, include: this.selectedTerms, fetch_preview_image_items: this.showTermThumbnail ? 0 : 3 }) + '&order=asc';
|
||||
const endpoint = '/taxonomy/' + this.taxonomyId + '/terms/?' + qs.stringify({ hideempty: 0, include: this.selectedTerms, fetch_preview_image_items: this.showTermThumbnail ? 0 : 3 }) + '&order=asc';
|
||||
|
||||
this.tainacanAxios.get(endpoint, { cancelToken: this.termsRequestSource.token })
|
||||
.then(response => {
|
||||
|
|
@ -253,6 +246,7 @@ export default {
|
|||
},
|
||||
mountCarousel() {
|
||||
const self = this;
|
||||
|
||||
this.swiper = new Swiper('#' + self.blockId + '-carousel', {
|
||||
mousewheel: {
|
||||
forceToAxis: true
|
||||
|
|
@ -285,10 +279,10 @@ export default {
|
|||
autoplay: (self.autoPlay && !self.isLoading) ? { delay: self.autoPlaySpeed*1000 } : false,
|
||||
loop: self.loopSlides && !self.isLoading,
|
||||
a11y: {
|
||||
prevSlideMessage: self.$root.__( 'Previous slide', 'tainacan'),
|
||||
nextSlideMessage: self.$root.__( 'Next slide', 'tainacan'),
|
||||
firstSlideMessage: self.$root.__('This is the first slide', 'tainacan'),
|
||||
lastSlideMessage: self.$root.__('This is the last slide', 'tainacan')
|
||||
prevSlideMessage: wp.i18n.__( 'Previous slide', 'tainacan'),
|
||||
nextSlideMessage: wp.i18n.__( 'Next slide', 'tainacan'),
|
||||
firstSlideMessage: wp.i18n.__('This is the first slide', 'tainacan'),
|
||||
lastSlideMessage: wp.i18n.__('This is the last slide', 'tainacan')
|
||||
},
|
||||
modules: [Autoplay, Navigation, A11y]
|
||||
});
|
||||
|
|
|
|||
|
|
@ -16,124 +16,54 @@ export default (element) => {
|
|||
|
||||
// Checks if this carousel isn't already mounted
|
||||
blocks = blocks.filter((block) => block.classList && !block.classList.contains('has-mounted'));
|
||||
const blockIds = Object.values(blocks).map((block) => block.id);
|
||||
|
||||
// Creates a new Vue Instance to manage each block isolatelly
|
||||
for (let blockId of blockIds) {
|
||||
blocks.forEach((block) => {
|
||||
|
||||
// Configure Vue logic before passing it to constructor:
|
||||
let vueOptions = {
|
||||
data: () => {
|
||||
return {
|
||||
collectionId: '',
|
||||
showImage: true,
|
||||
showName: true,
|
||||
layout: 'grid',
|
||||
gridMargin: 0,
|
||||
searchURL: '',
|
||||
selectedItems: [],
|
||||
loadStrategy: 'search',
|
||||
maxItemsNumber: 12,
|
||||
mosaicHeight: 40,
|
||||
mosaicDensity: 5,
|
||||
mosaicGridRows: 3,
|
||||
mosaicGridColumns: 3,
|
||||
mosaicItemFocalPointX : 0.5,
|
||||
mosaicItemFocalPointY : 0.5,
|
||||
maxColumnsCount: 4,
|
||||
imageSize: 'tainacan-medium',
|
||||
order: 'asc',
|
||||
orderBy: 'date',
|
||||
orderByMetaKey: '',
|
||||
showSearchBar: false,
|
||||
showCollectionHeader: false,
|
||||
showCollectionLabel: false,
|
||||
collectionBackgroundColor: '#373839',
|
||||
collectionTextColor: '#ffffff',
|
||||
tainacanApiRoot: '',
|
||||
tainacanBaseUrl: '',
|
||||
className: '',
|
||||
style: ''
|
||||
}
|
||||
},
|
||||
const VueDynamicItemsList = createApp( {
|
||||
render() {
|
||||
return h(DynamicItemsListTheme, {
|
||||
props: {
|
||||
collectionId: this.collectionId,
|
||||
showImage: this.showImage,
|
||||
showName: this.showName,
|
||||
layout: this.layout,
|
||||
gridMargin: this.gridMargin,
|
||||
mosaicDensity: this.mosaicDensity,
|
||||
mosaicHeight: this.mosaicHeight,
|
||||
mosaicGridRows: this.mosaicGridRows,
|
||||
mosaicGridColumns: this.mosaicGridColumns,
|
||||
mosaicItemFocalPointX: this.mosaicItemFocalPointX,
|
||||
mosaicItemFocalPointY: this.mosaicItemFocalPointY,
|
||||
maxColumnsCount: this.maxColumnsCount,
|
||||
imageSize: this.imageSize,
|
||||
searchURL: this.searchURL,
|
||||
selectedItems: this.selectedItems,
|
||||
loadStrategy: this.loadStrategy,
|
||||
maxItemsNumber: this.maxItemsNumber,
|
||||
order: this.order,
|
||||
orderBy: this.orderBy,
|
||||
orderByMetaKey: this.orderByMetaKey,
|
||||
showSearchBar: this.showSearchBar,
|
||||
showCollectionHeader: this.showCollectionHeader,
|
||||
showCollectionLabel: this.showCollectionLabel,
|
||||
collectionBackgroundColor: this.collectionBackgroundColor,
|
||||
collectionTextColor: this.collectionTextColor,
|
||||
tainacanApiRoot: this.tainacanApiRoot,
|
||||
tainacanBaseUrl: this.tainacanBaseUrl,
|
||||
className: this.className,
|
||||
customStyle: this.style
|
||||
}
|
||||
blockId: block.id,
|
||||
searchURL: block.attributes['search-url'] != undefined ? block.attributes['search-url'].value : undefined,
|
||||
selectedItems: block.attributes['selected-items'] != undefined ? JSON.parse(block.attributes['selected-items'].value) : undefined,
|
||||
loadStrategy: block.attributes['load-strategy'] != undefined ? block.attributes['load-strategy'].value : undefined,
|
||||
collectionId: block.attributes['collection-id'] != undefined ? block.attributes['collection-id'].value : undefined,
|
||||
showImage: block.attributes['show-image'] != undefined ? block.attributes['show-image'].value == 'true' : true,
|
||||
showName: block.attributes['show-name'] != undefined ? block.attributes['show-name'].value == 'true' : true,
|
||||
layout: block.attributes['layout'] != undefined ? block.attributes['layout'].value : undefined,
|
||||
gridMargin: block.attributes['grid-margin'] != undefined ? Number(block.attributes['grid-margin'].value) : undefined,
|
||||
mosaicDensity: block.attributes['mosaic-density'] != undefined ? Number(block.attributes['mosaic-density'].value) : undefined,
|
||||
mosaicHeight: block.attributes['mosaic-height'] != undefined ? Number(block.attributes['mosaic-height'].value) : undefined,
|
||||
mosaicGridRows: block.attributes['mosaic-grid-rows'] != undefined ? Number(block.attributes['mosaic-grid-rows'].value) : undefined,
|
||||
mosaicGridColumns: block.attributes['mosaic-grid-columns'] != undefined ? Number(block.attributes['mosaic-grid-columns'].value) : undefined,
|
||||
mosaicItemFocalPointX: block.attributes['mosaic-item-focal-point-x'] != undefined ? Number(block.attributes['mosaic-item-focal-point-x'].value) : undefined,
|
||||
mosaicItemFocalPointY: block.attributes['mosaic-item-focal-point-y'] != undefined ? Number(block.attributes['mosaic-item-focal-point-y'].value) : undefined,
|
||||
maxColumnsCount: block.attributes['max-columns-count'] != undefined ? block.attributes['max-columns-count'].value : 4,
|
||||
imageSize: block.attributes['image-size'] != undefined ? block.attributes['image-size'].value : 'tainacan-medium',
|
||||
maxItemsNumber: block.attributes['max-items-number'] != undefined ? block.attributes['max-items-number'].value : undefined,
|
||||
order: block.attributes['order'] != undefined ? block.attributes['order'].value : undefined,
|
||||
orderBy: block.attributes['order-by'] != undefined ? block.attributes['order-by'].value : undefined,
|
||||
orderByMetaKey: block.attributes['order-by-meta-key'] != undefined ? block.attributes['order-by-meta-key'].value : undefined,
|
||||
showSearchBar: block.attributes['show-search-bar'] != undefined ? block.attributes['show-search-bar'].value == 'true' : false,
|
||||
showCollectionHeader: block.attributes['show-collection-header'] != undefined ? block.attributes['show-collection-header'].value == 'true' : false,
|
||||
showCollectionLabel: block.attributes['show-collection-label'] != undefined ? block.attributes['show-collection-label'].value == 'true' : false,
|
||||
collectionBackgroundColor: block.attributes['collection-background-color'] != undefined ? block.attributes['collection-background-color'].value : undefined,
|
||||
collectionTextColor: block.attributes['collection-text-color'] != undefined ? block.attributes['collection-text-color'].value : undefined,
|
||||
tainacanApiRoot: block.attributes['tainacan-api-root'] != undefined ? block.attributes['tainacan-api-root'].value : undefined,
|
||||
tainacanBaseUrl: block.attributes['tainacan-base-url'] != undefined ? block.attributes['tainacan-base-url'].value : undefined
|
||||
});
|
||||
},
|
||||
beforeMount () {
|
||||
this.className = this.$el.attributes.class != undefined ? this.$el.attributes.class.value : undefined;
|
||||
this.searchURL = this.$el.attributes['search-url'] != undefined ? this.$el.attributes['search-url'].value : undefined;
|
||||
this.selectedItems = this.$el.attributes['selected-items'] != undefined ? JSON.parse(this.$el.attributes['selected-items'].value) : undefined;
|
||||
this.loadStrategy = this.$el.attributes['load-strategy'] != undefined ? this.$el.attributes['load-strategy'].value : undefined;
|
||||
this.collectionId = this.$el.attributes['collection-id'] != undefined ? this.$el.attributes['collection-id'].value : undefined;
|
||||
this.showImage = this.$el.attributes['show-image'] != undefined ? this.$el.attributes['show-image'].value == 'true' : true;
|
||||
this.showName = this.$el.attributes['show-name'] != undefined ? this.$el.attributes['show-name'].value == 'true' : true;
|
||||
this.layout = this.$el.attributes['layout'] != undefined ? this.$el.attributes['layout'].value : undefined;
|
||||
this.gridMargin = this.$el.attributes['grid-margin'] != undefined ? Number(this.$el.attributes['grid-margin'].value) : undefined;
|
||||
this.mosaicDensity = this.$el.attributes['mosaic-density'] != undefined ? Number(this.$el.attributes['mosaic-density'].value) : undefined;
|
||||
this.mosaicHeight = this.$el.attributes['mosaic-height'] != undefined ? Number(this.$el.attributes['mosaic-height'].value) : undefined;
|
||||
this.mosaicGridRows = this.$el.attributes['mosaic-grid-rows'] != undefined ? Number(this.$el.attributes['mosaic-grid-rows'].value) : undefined;
|
||||
this.mosaicGridColumns = this.$el.attributes['mosaic-grid-columns'] != undefined ? Number(this.$el.attributes['mosaic-grid-columns'].value) : undefined;
|
||||
this.mosaicItemFocalPointX = this.$el.attributes['mosaic-item-focal-point-x'] != undefined ? Number(this.$el.attributes['mosaic-item-focal-point-x'].value) : undefined;
|
||||
this.mosaicItemFocalPointY = this.$el.attributes['mosaic-item-focal-point-y'] != undefined ? Number(this.$el.attributes['mosaic-item-focal-point-y'].value) : undefined;
|
||||
this.maxColumnsCount = this.$el.attributes['max-columns-count'] != undefined ? this.$el.attributes['max-columns-count'].value : 4;
|
||||
this.imageSize = this.$el.attributes['image-size'] != undefined ? this.$el.attributes['image-size'].value : 'tainacan-medium';
|
||||
this.maxItemsNumber = this.$el.attributes['max-items-number'] != undefined ? this.$el.attributes['max-items-number'].value : undefined;
|
||||
this.order = this.$el.attributes['order'] != undefined ? this.$el.attributes['order'].value : undefined;
|
||||
this.orderBy = this.$el.attributes['order-by'] != undefined ? this.$el.attributes['order-by'].value : undefined;
|
||||
this.orderByMetaKey = this.$el.attributes['order-by-meta-key'] != undefined ? this.$el.attributes['order-by-meta-key'].value : undefined;
|
||||
this.showSearchBar = this.$el.attributes['show-search-bar'] != undefined ? this.$el.attributes['show-search-bar'].value == 'true' : false;
|
||||
this.showCollectionHeader = this.$el.attributes['show-collection-header'] != undefined ? this.$el.attributes['show-collection-header'].value == 'true' : false;
|
||||
this.showCollectionLabel = this.$el.attributes['show-collection-label'] != undefined ? this.$el.attributes['show-collection-label'].value == 'true' : false;
|
||||
this.collectionBackgroundColor = this.$el.attributes['collection-background-color'] != undefined ? this.$el.attributes['collection-background-color'].value : undefined;
|
||||
this.collectionTextColor = this.$el.attributes['collection-text-color'] != undefined ? this.$el.attributes['collection-text-color'].value : undefined;
|
||||
this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
|
||||
this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
|
||||
this.style = this.$el.attributes.style != undefined ? this.$el.attributes.style.value : undefined;
|
||||
},
|
||||
methods: {
|
||||
__(text, domain) {
|
||||
return wp.i18n.__(text, domain);
|
||||
}
|
||||
mounted() {
|
||||
block.classList.add('has-mounted');
|
||||
}
|
||||
};
|
||||
|
||||
const VueDynamicItemsList = createApp( Object.assign({ el: '#' + blockId }, vueOptions) );
|
||||
});
|
||||
|
||||
VueDynamicItemsList.use(ThumbnailHelperPlugin);
|
||||
VueDynamicItemsList.use(VueBlurHash);
|
||||
}
|
||||
|
||||
VueDynamicItemsList.mount('#' + block.id);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,211 +1,254 @@
|
|||
<template>
|
||||
<div
|
||||
:style="customStyle"
|
||||
:class="className + ' has-mounted'">
|
||||
<div v-if="showCollectionHeader">
|
||||
<div
|
||||
v-if="isLoadingCollection"
|
||||
class="dynamic-items-collection-header skeleton"
|
||||
:style="{ height: '165px' }"/>
|
||||
<a
|
||||
v-else
|
||||
:href="collection.url ? collection.url : ''"
|
||||
class="dynamic-items-collection-header">
|
||||
<div
|
||||
:style="{
|
||||
backgroundColor: collectionBackgroundColor ? collectionBackgroundColor : '',
|
||||
paddingRight: collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium']) ? '' : '20px',
|
||||
paddingTop: (!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) ? '1em' : '',
|
||||
width: collection && collection.header_image ? '' : '100%'
|
||||
}"
|
||||
:class="
|
||||
'collection-name ' +
|
||||
((!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) && (!collection || !collection.header_image) ? 'only-collection-name' : '')
|
||||
">
|
||||
<h3 :style="{ color: collectionTextColor ? collectionTextColor : '' }">
|
||||
<span
|
||||
v-if="showCollectionLabel"
|
||||
class="label">
|
||||
{{ $root.__('Collection', 'tainacan') }}
|
||||
<br>
|
||||
</span>
|
||||
{{ collection && collection.name ? collection.name : '' }}
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
v-if="collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium'])"
|
||||
class="collection-thumbnail"
|
||||
:style="{
|
||||
backgroundImage: 'url(' + (collection.thumbnail['tainacan-medium'] != undefined ? (collection.thumbnail['tainacan-medium'][0]) : (collection.thumbnail['medium'][0])) + ')',
|
||||
}"/>
|
||||
<div
|
||||
class="collection-header-image"
|
||||
:style="{
|
||||
backgroundImage: collection.header_image ? 'url(' + collection.header_image + ')' : '',
|
||||
minHeight: collection && collection.header_image ? '' : '80px',
|
||||
display: !(collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium'])) ? collection && collection.header_image ? '' : 'none' : ''
|
||||
}"/>
|
||||
</a>
|
||||
</div>
|
||||
<div v-if="showCollectionHeader">
|
||||
<div
|
||||
v-if="showSearchBar"
|
||||
class="dynamic-items-search-bar">
|
||||
<button
|
||||
@click="localOrder = 'asc'; fetchItems()"
|
||||
:class="localOrder == 'asc' ? 'sorting-button-selected' : ''"
|
||||
:label="$root.__('Sort ascending', 'tainacan')">
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="-2 -2 20 20">
|
||||
<path d="M6.7,10.8l-3.3,3.3L0,10.8h2.5V0h1.7v10.8H6.7z M11.7,0.8H8.3v1.7h3.3V0.8z M14.2,5.8H8.3v1.7h5.8V5.8z M16.7,10.8H8.3v1.7 h8.3V10.8z"/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
@click="localOrder = 'desc'; fetchItems(); "
|
||||
:class="localOrder == 'desc' ? 'sorting-button-selected' : ''"
|
||||
:label="$root.__('Sort descending', 'tainacan')">
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="-2 -2 20 20">
|
||||
<path
|
||||
d="M6.7,3.3H4.2v10.8H2.5V3.3H0L3.3,0L6.7,3.3z M11.6,2.5H8.3v1.7h3.3V2.5z M14.1,7.5H8.3v1.7h5.8V7.5z M16.6,12.5H8.3v1.7 h8.3V12.5z"/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
@click="fetchItems()"
|
||||
:label="$root.__('Search', 'tainacan')"
|
||||
class="search-button">
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="-2 -2 20 20">
|
||||
<path
|
||||
class="st0"
|
||||
d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5
|
||||
c0.7,0.3,1.3,0.7,1.8,1.2s0.9,1.1,1.2,1.8c0.5,1.2,0.5,2.5,0.2,3.7c0,0.2-0.1,0.4-0.2,0.6c0,0.1-0.2,0.6-0.2,0.6
|
||||
c0.6,0.6,1.3,1.3,1.9,1.9c0.7,0.7,1.3,1.3,2,2c0,0,0.3,0.2,0.3,0.3c0,0.3-0.1,0.7-0.3,1c-0.2,0.6-0.8,1-1.4,1.2
|
||||
c-0.1,0-0.6,0.2-0.6,0.1c0,0-4.2-4.2-4.2-4.2c0,0-0.8,0.3-0.8,0.4c-1.3,0.4-2.8,0.5-4.1-0.1c-0.7-0.3-1.3-0.7-1.8-1.2
|
||||
C1.2,9.3,0.8,8.7,0.5,8S0,6.6,0,5.8z M1.6,5.8c0,0.4,0.1,0.9,0.2,1.3C2.1,8.2,3,9.2,4.1,9.6c0.5,0.2,1,0.3,1.6,0.3
|
||||
c0.6,0,1.1-0.1,1.6-0.3C8.7,9,9.7,7.6,9.8,6c0.1-1.5-0.6-3.1-2-3.9c-0.9-0.5-2-0.6-3-0.4C4.6,1.8,4.4,1.9,4.1,2
|
||||
c-0.5,0.2-1,0.5-1.4,0.9C2,3.7,1.6,4.7,1.6,5.8z"/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
<input
|
||||
:value="searchString"
|
||||
@input="(value) => applySearchString(value)"
|
||||
type="text">
|
||||
<button
|
||||
class="previous-button"
|
||||
v-if="paged > 1"
|
||||
@click="paged--; fetchItems()"
|
||||
:label="$root.__('Previous page', 'tainacan')">
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg
|
||||
width="30"
|
||||
height="30"
|
||||
viewBox="0 2 20 20">
|
||||
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
:style="{ marginLeft: paged <= 1 ? 'auto' : '0' }"
|
||||
class="next-button"
|
||||
v-if="paged < totalItems/localMaxItemsNumber && items.length < totalItems"
|
||||
@click="paged++; fetchItems()"
|
||||
:label="$root.__('Next page', 'tainacan')">
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg
|
||||
width="30"
|
||||
height="30"
|
||||
viewBox="0 2 20 20">
|
||||
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<template v-if="isLoading">
|
||||
<ul
|
||||
v-if="layout !== 'mosaic'"
|
||||
v-if="isLoadingCollection"
|
||||
class="dynamic-items-collection-header skeleton"
|
||||
:style="{ height: '165px' }"/>
|
||||
<a
|
||||
v-else
|
||||
:href="collection.url ? collection.url : ''"
|
||||
class="dynamic-items-collection-header">
|
||||
<div
|
||||
:style="{
|
||||
marginTop: (showSearchBar || showCollectionHeader) ? ((showName ? gridMargin + 24 : gridMargin) + 'px') : '0px',
|
||||
gridGap: (showName ? gridMargin + 24 : gridMargin) + 'px',
|
||||
gap: (showName ? gridMargin + 24 : gridMargin) + 'px'
|
||||
backgroundColor: collectionBackgroundColor ? collectionBackgroundColor : '',
|
||||
paddingRight: collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium']) ? '' : '20px',
|
||||
paddingTop: (!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) ? '1em' : '',
|
||||
width: collection && collection.header_image ? '' : '100%'
|
||||
}"
|
||||
class="items-list"
|
||||
:class="'items-layout-' + layout + (!showName ? ' items-list-without-margin' : '') + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '')">
|
||||
<li
|
||||
:key="item"
|
||||
v-for="item in Number(localMaxItemsNumber)"
|
||||
class="item-list-item skeleton"
|
||||
:style="{
|
||||
marginBottom: layout == 'grid' ? (showName ? gridMargin + 12 : gridMargin) + 'px' : '',
|
||||
height: layout == 'grid' ? '230px' : '54px'
|
||||
}" />
|
||||
</ul>
|
||||
<ul
|
||||
v-if="layout === 'mosaic'"
|
||||
:class="
|
||||
'collection-name ' +
|
||||
((!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) && (!collection || !collection.header_image) ? 'only-collection-name' : '')
|
||||
">
|
||||
<h3 :style="{ color: collectionTextColor ? collectionTextColor : '' }">
|
||||
<span
|
||||
v-if="showCollectionLabel"
|
||||
class="label">
|
||||
{{ $root.__('Collection', 'tainacan') }}
|
||||
<br>
|
||||
</span>
|
||||
{{ collection && collection.name ? collection.name : '' }}
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
v-if="collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium'])"
|
||||
class="collection-thumbnail"
|
||||
:style="{
|
||||
backgroundImage: 'url(' + (collection.thumbnail['tainacan-medium'] != undefined ? (collection.thumbnail['tainacan-medium'][0]) : (collection.thumbnail['medium'][0])) + ')',
|
||||
}"/>
|
||||
<div
|
||||
class="collection-header-image"
|
||||
:style="{
|
||||
marginTop: showSearchBar || showCollectionHeader ? ((showName ? gridMargin + 24 : gridMargin) + 'px') : '0px',
|
||||
padding: '0 ' + (Number(gridMargin)/4) + 'px',
|
||||
minHeight: layout === 'mosaic' ? mosaicHeight + 'px' : ''
|
||||
backgroundImage: collection.header_image ? 'url(' + collection.header_image + ')' : '',
|
||||
minHeight: collection && collection.header_image ? '' : '80px',
|
||||
display: !(collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium'])) ? collection && collection.header_image ? '' : 'none' : ''
|
||||
}"/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
v-if="showSearchBar"
|
||||
class="dynamic-items-search-bar">
|
||||
<button
|
||||
@click="localOrder = 'asc'; fetchItems()"
|
||||
:class="localOrder == 'asc' ? 'sorting-button-selected' : ''"
|
||||
:label="$root.__('Sort ascending', 'tainacan')">
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="-2 -2 20 20">
|
||||
<path d="M6.7,10.8l-3.3,3.3L0,10.8h2.5V0h1.7v10.8H6.7z M11.7,0.8H8.3v1.7h3.3V0.8z M14.2,5.8H8.3v1.7h5.8V5.8z M16.7,10.8H8.3v1.7 h8.3V10.8z"/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
@click="localOrder = 'desc'; fetchItems(); "
|
||||
:class="localOrder == 'desc' ? 'sorting-button-selected' : ''"
|
||||
:label="$root.__('Sort descending', 'tainacan')">
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="-2 -2 20 20">
|
||||
<path
|
||||
d="M6.7,3.3H4.2v10.8H2.5V3.3H0L3.3,0L6.7,3.3z M11.6,2.5H8.3v1.7h3.3V2.5z M14.1,7.5H8.3v1.7h5.8V7.5z M16.6,12.5H8.3v1.7 h8.3V12.5z"/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
@click="fetchItems()"
|
||||
:label="$root.__('Search', 'tainacan')"
|
||||
class="search-button">
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="-2 -2 20 20">
|
||||
<path
|
||||
class="st0"
|
||||
d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5
|
||||
c0.7,0.3,1.3,0.7,1.8,1.2s0.9,1.1,1.2,1.8c0.5,1.2,0.5,2.5,0.2,3.7c0,0.2-0.1,0.4-0.2,0.6c0,0.1-0.2,0.6-0.2,0.6
|
||||
c0.6,0.6,1.3,1.3,1.9,1.9c0.7,0.7,1.3,1.3,2,2c0,0,0.3,0.2,0.3,0.3c0,0.3-0.1,0.7-0.3,1c-0.2,0.6-0.8,1-1.4,1.2
|
||||
c-0.1,0-0.6,0.2-0.6,0.1c0,0-4.2-4.2-4.2-4.2c0,0-0.8,0.3-0.8,0.4c-1.3,0.4-2.8,0.5-4.1-0.1c-0.7-0.3-1.3-0.7-1.8-1.2
|
||||
C1.2,9.3,0.8,8.7,0.5,8S0,6.6,0,5.8z M1.6,5.8c0,0.4,0.1,0.9,0.2,1.3C2.1,8.2,3,9.2,4.1,9.6c0.5,0.2,1,0.3,1.6,0.3
|
||||
c0.6,0,1.1-0.1,1.6-0.3C8.7,9,9.7,7.6,9.8,6c0.1-1.5-0.6-3.1-2-3.9c-0.9-0.5-2-0.6-3-0.4C4.6,1.8,4.4,1.9,4.1,2
|
||||
c-0.5,0.2-1,0.5-1.4,0.9C2,3.7,1.6,4.7,1.6,5.8z"/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
<input
|
||||
:value="searchString"
|
||||
@input="(value) => applySearchString(value)"
|
||||
type="text">
|
||||
<button
|
||||
class="previous-button"
|
||||
v-if="paged > 1"
|
||||
@click="paged--; fetchItems()"
|
||||
:label="$root.__('Previous page', 'tainacan')">
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg
|
||||
width="30"
|
||||
height="30"
|
||||
viewBox="0 2 20 20">
|
||||
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
:style="{ marginLeft: paged <= 1 ? 'auto' : '0' }"
|
||||
class="next-button"
|
||||
v-if="paged < totalItems/localMaxItemsNumber && items.length < totalItems"
|
||||
@click="paged++; fetchItems()"
|
||||
:label="$root.__('Next page', 'tainacan')">
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg
|
||||
width="30"
|
||||
height="30"
|
||||
viewBox="0 2 20 20">
|
||||
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<template v-if="isLoading">
|
||||
<ul
|
||||
v-if="layout !== 'mosaic'"
|
||||
:style="{
|
||||
marginTop: (showSearchBar || showCollectionHeader) ? ((showName ? gridMargin + 24 : gridMargin) + 'px') : '0px',
|
||||
gridGap: (showName ? gridMargin + 24 : gridMargin) + 'px',
|
||||
gap: (showName ? gridMargin + 24 : gridMargin) + 'px'
|
||||
}"
|
||||
class="items-list"
|
||||
:class="'items-layout-' + layout + (!showName ? ' items-list-without-margin' : '') + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '')">
|
||||
<li
|
||||
:key="item"
|
||||
v-for="item in Number(localMaxItemsNumber)"
|
||||
class="item-list-item skeleton"
|
||||
:style="{
|
||||
marginBottom: layout == 'grid' ? (showName ? gridMargin + 12 : gridMargin) + 'px' : '',
|
||||
height: layout == 'grid' ? '230px' : '54px'
|
||||
}" />
|
||||
</ul>
|
||||
<ul
|
||||
v-if="layout === 'mosaic'"
|
||||
:style="{
|
||||
marginTop: showSearchBar || showCollectionHeader ? ((showName ? gridMargin + 24 : gridMargin) + 'px') : '0px',
|
||||
padding: '0 ' + (Number(gridMargin)/4) + 'px',
|
||||
minHeight: layout === 'mosaic' ? mosaicHeight + 'px' : ''
|
||||
}"
|
||||
class="items-list"
|
||||
:class="'items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')">
|
||||
<div
|
||||
:style="{
|
||||
width: 'calc((100% / ' + mosaicPartition(items).length + ') - ' + gridMargin + 'px)',
|
||||
height: 'calc(((' + (mosaicGridRows - 1) + ' * ' + gridMargin + 'px) + ' + mosaicHeight + 'px))',
|
||||
margin: gridMargin + 'px'
|
||||
}"
|
||||
class="items-list"
|
||||
:class="'items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')">
|
||||
<div
|
||||
:style="{
|
||||
width: 'calc((100% / ' + mosaicPartition(items).length + ') - ' + gridMargin + 'px)',
|
||||
height: 'calc(((' + (mosaicGridRows - 1) + ' * ' + gridMargin + 'px) + ' + mosaicHeight + 'px))',
|
||||
margin: gridMargin + 'px'
|
||||
}"
|
||||
class="mosaic-container skeleton"
|
||||
:key="mosaicIndex"
|
||||
v-for="(mosaicGroup, mosaicIndex) of mosaicPartition(items)" />
|
||||
</ul>
|
||||
</template>
|
||||
<div v-else>
|
||||
<ul
|
||||
v-if="items.length > 0 && layout !== 'mosaic'"
|
||||
:style="{
|
||||
gridGap: layout == 'grid' ? ((showName ? gridMargin + 24 : gridMargin) + 'px') : 'inherit',
|
||||
marginTop: (showSearchBar || showCollectionHeader) ? ((showName ? gridMargin + 24 : gridMargin) + 'px') : '0px'
|
||||
class="mosaic-container skeleton"
|
||||
:key="mosaicIndex"
|
||||
v-for="(mosaicGroup, mosaicIndex) of mosaicPartition(items)" />
|
||||
</ul>
|
||||
</template>
|
||||
<div v-else>
|
||||
<ul
|
||||
v-if="items.length > 0 && layout !== 'mosaic'"
|
||||
:style="{
|
||||
gridGap: layout == 'grid' ? ((showName ? gridMargin + 24 : gridMargin) + 'px') : 'inherit',
|
||||
marginTop: (showSearchBar || showCollectionHeader) ? ((showName ? gridMargin + 24 : gridMargin) + 'px') : '0px'
|
||||
}"
|
||||
class="items-list"
|
||||
:class="'items-layout-' + layout + (!showName ? ' items-list-without-margin' : '') + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '')">
|
||||
<li
|
||||
:key="index"
|
||||
v-for="(item, index) of items"
|
||||
class="item-list-item">
|
||||
<a
|
||||
:id="isNaN(item.id) ? item.id : 'item-id-' + item.id"
|
||||
:href="item.url"
|
||||
:class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')">
|
||||
<blur-hash-image
|
||||
v-if="showImage"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], imageSize)"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], imageSize)"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype'])"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], imageSize, item['document_mimetype'])"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], imageSize)"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.name ? item.name : $root.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
<span v-if="item.title">{{ item.title }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul
|
||||
v-if="items.length > 0 && layout === 'mosaic'"
|
||||
:style="{
|
||||
marginTop: showSearchBar || showCollectionHeader ? ((showName ? gridMargin + 24 : gridMargin) + 'px') : '0px',
|
||||
padding: '0 ' + (Number(gridMargin)/4) + 'px',
|
||||
minHeight: layout === 'mosaic' ? mosaicHeight + 'px' : ''
|
||||
}"
|
||||
class="items-list"
|
||||
:class="'items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')">
|
||||
<div
|
||||
:style="{
|
||||
width: 'calc((100% / ' + mosaicPartition(items).length + ') - ' + gridMargin + 'px)',
|
||||
height: 'calc(((' + (mosaicGridRows - 1) + ' * ' + gridMargin + 'px) + ' + mosaicHeight + 'px))',
|
||||
gridTemplateColumns: 'repeat(' + mosaicGridColumns + ', calc((100% / ' + mosaicGridColumns + ') - (' + ((mosaicGridColumns - 1)*Number(gridMargin)) + 'px/' + mosaicGridColumns + ')))',
|
||||
margin: gridMargin + 'px',
|
||||
gridGap: gridMargin + 'px',
|
||||
gap: gridMargin + 'px'
|
||||
}"
|
||||
class="items-list"
|
||||
:class="'items-layout-' + layout + (!showName ? ' items-list-without-margin' : '') + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '')">
|
||||
class="mosaic-container"
|
||||
:class="'mosaic-container--' + mosaicGroup.length + '-' + mosaicGridRows + 'x' + mosaicGridColumns"
|
||||
:key="mosaicIndex"
|
||||
v-for="(mosaicGroup, mosaicIndex) of mosaicPartition(items)">
|
||||
<li
|
||||
:key="index"
|
||||
v-for="(item, index) of items"
|
||||
class="item-list-item">
|
||||
v-for="(item, index) of mosaicGroup"
|
||||
class="item-list-item"
|
||||
:style="{
|
||||
backgroundImage: layout == 'mosaic' ? `url(${$thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype'])})` : 'none',
|
||||
backgroundPosition: layout == 'mosaic' ? `${ mosaicItemFocalPointX * 100 }% ${ mosaicItemFocalPointY * 100 }%` : 'none'
|
||||
}">
|
||||
<a
|
||||
:id="isNaN(item.id) ? item.id : 'item-id-' + item.id"
|
||||
:href="item.url"
|
||||
:class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')">
|
||||
<blur-hash-image
|
||||
v-if="showImage"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], imageSize)"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], imageSize)"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype'])"
|
||||
|
|
@ -216,59 +259,12 @@
|
|||
<span v-if="item.title">{{ item.title }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul
|
||||
v-if="items.length > 0 && layout === 'mosaic'"
|
||||
:style="{
|
||||
marginTop: showSearchBar || showCollectionHeader ? ((showName ? gridMargin + 24 : gridMargin) + 'px') : '0px',
|
||||
padding: '0 ' + (Number(gridMargin)/4) + 'px',
|
||||
minHeight: layout === 'mosaic' ? mosaicHeight + 'px' : ''
|
||||
}"
|
||||
class="items-list"
|
||||
:class="'items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')">
|
||||
<div
|
||||
:style="{
|
||||
width: 'calc((100% / ' + mosaicPartition(items).length + ') - ' + gridMargin + 'px)',
|
||||
height: 'calc(((' + (mosaicGridRows - 1) + ' * ' + gridMargin + 'px) + ' + mosaicHeight + 'px))',
|
||||
gridTemplateColumns: 'repeat(' + mosaicGridColumns + ', calc((100% / ' + mosaicGridColumns + ') - (' + ((mosaicGridColumns - 1)*Number(gridMargin)) + 'px/' + mosaicGridColumns + ')))',
|
||||
margin: gridMargin + 'px',
|
||||
gridGap: gridMargin + 'px',
|
||||
gap: gridMargin + 'px'
|
||||
}"
|
||||
class="mosaic-container"
|
||||
:class="'mosaic-container--' + mosaicGroup.length + '-' + mosaicGridRows + 'x' + mosaicGridColumns"
|
||||
:key="mosaicIndex"
|
||||
v-for="(mosaicGroup, mosaicIndex) of mosaicPartition(items)">
|
||||
<li
|
||||
:key="index"
|
||||
v-for="(item, index) of mosaicGroup"
|
||||
class="item-list-item"
|
||||
:style="{
|
||||
backgroundImage: layout == 'mosaic' ? `url(${$thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype'])})` : 'none',
|
||||
backgroundPosition: layout == 'mosaic' ? `${ mosaicItemFocalPointX * 100 }% ${ mosaicItemFocalPointY * 100 }%` : 'none'
|
||||
}">
|
||||
<a
|
||||
:id="isNaN(item.id) ? item.id : 'item-id-' + item.id"
|
||||
:href="item.url"
|
||||
:class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')">
|
||||
<blur-hash-image
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], imageSize)"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], imageSize)"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype'])"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], imageSize, item['document_mimetype'])"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], imageSize)"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.name ? item.name : $root.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
<span v-if="item.title">{{ item.title }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<div
|
||||
v-else-if="!isLoading && items.length <= 0"
|
||||
class="spinner-container">
|
||||
{{ $root.__(errorMessage, 'tainacan') }}
|
||||
</div>
|
||||
</ul>
|
||||
<div
|
||||
v-else-if="!isLoading && items.length <= 0"
|
||||
class="spinner-container">
|
||||
{{ $root.__(errorMessage, 'tainacan') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -307,9 +303,7 @@ export default {
|
|||
collectionBackgroundColor: String,
|
||||
collectionTextColor: String,
|
||||
tainacanApiRoot: String,
|
||||
tainacanBaseUrl: String,
|
||||
className: String,
|
||||
customStyle: String
|
||||
tainacanBaseUrl: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import qs from 'qs';
|
||||
import ThemeItemsPage from '../theme-items-page.vue';
|
||||
|
||||
const themeRoutes = [];
|
||||
const themeRoutes = [
|
||||
// Catch-all route to handle any path
|
||||
{
|
||||
path: '/:catchAll(.*)*',
|
||||
component: ThemeItemsPage, // The component where you want to respond to changes
|
||||
}
|
||||
];
|
||||
|
||||
export default createRouter ({
|
||||
history: createWebHistory(window.document.location.pathname),
|
||||
routes: themeRoutes,
|
||||
// set custom query resolver
|
||||
parseQuery(query) {
|
||||
return qs.parse(query);
|
||||
},
|
||||
stringifyQuery(query) {
|
||||
let result = qs.stringify(query);
|
||||
return result ? result : '';
|
||||
}
|
||||
routes: themeRoutes
|
||||
});
|
||||
|
|
@ -1011,7 +1011,7 @@
|
|||
},
|
||||
created() {
|
||||
this.isRepositoryLevel = (this.collectionId == undefined || this.collectionId == '' || this.collectionId == null);
|
||||
|
||||
|
||||
this.$eventBusSearch.updateStoreFromURL();
|
||||
|
||||
// Sets initial variables important to searchbus
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ export default (element) => {
|
|||
showFullscreenWithViewModes: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
beforeMount() {
|
||||
// Loads params if passed previously
|
||||
if (this.$route.hash && this.$route.hash.split('#/?') && this.$route.hash.split('#/?')[1]) {
|
||||
const existingQueries = qs.parse(this.$route.hash.split('#/?')[1]);
|
||||
|
|
@ -104,78 +104,76 @@ export default (element) => {
|
|||
for (let key of Object.keys(existingQueries))
|
||||
this.$route.query[key] = existingQueries[key];
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
// Collection or Term source settings
|
||||
if (this.$el.attributes['collection-id'] != undefined)
|
||||
this.collectionId = this.$el.attributes['collection-id'].value;
|
||||
if (this.$el.attributes['term-id'] != undefined)
|
||||
this.termId = this.$el.attributes['term-id'].value;
|
||||
if (this.$el.attributes['taxonomy'] != undefined)
|
||||
this.taxonomy = this.$el.attributes['taxonomy'].value;
|
||||
if (blockElement.attributes['collection-id'] != undefined)
|
||||
this.collectionId = blockElement.attributes['collection-id'].value;
|
||||
if (blockElement.attributes['term-id'] != undefined)
|
||||
this.termId = blockElement.attributes['term-id'].value;
|
||||
if (blockElement.attributes['taxonomy'] != undefined)
|
||||
this.taxonomy = blockElement.attributes['taxonomy'].value;
|
||||
|
||||
// Sorting options
|
||||
if (this.$el.attributes['default-order'] != undefined)
|
||||
this.defaultOrder = this.$el.attributes['default-order'].value;
|
||||
if (this.$el.attributes['default-orderby'] != undefined) {
|
||||
this.defaultOrderBy = this.maybeConvertFromJSON(this.$el.attributes['default-orderby'].value);
|
||||
if (blockElement.attributes['default-order'] != undefined)
|
||||
this.defaultOrder = blockElement.attributes['default-order'].value;
|
||||
if (blockElement.attributes['default-orderby'] != undefined) {
|
||||
this.defaultOrderBy = this.maybeConvertFromJSON(blockElement.attributes['default-orderby'].value);
|
||||
this.defaultOrderBy === 'creation_date' ? 'date' : this.defaultOrderBy;
|
||||
}
|
||||
if (this.$el.attributes['default-orderby-meta'] != undefined)
|
||||
this.defaultOrderByMeta = this.$el.attributes['default-orderby-meta'].value;
|
||||
if (this.$el.attributes['default-orderby-type'] != undefined)
|
||||
this.defaultOrderByType = this.maybeConvertFromJSON(this.$el.attributes['default-orderby-type'].value);
|
||||
if (blockElement.attributes['default-orderby-meta'] != undefined)
|
||||
this.defaultOrderByMeta = blockElement.attributes['default-orderby-meta'].value;
|
||||
if (blockElement.attributes['default-orderby-type'] != undefined)
|
||||
this.defaultOrderByType = this.maybeConvertFromJSON(blockElement.attributes['default-orderby-type'].value);
|
||||
|
||||
// View modes settings
|
||||
if (this.$el.attributes['is-forced-view-mode'] != undefined)
|
||||
this.isForcedViewMode = new Boolean(this.$el.attributes['is-forced-view-mode'].value);
|
||||
if (blockElement.attributes['is-forced-view-mode'] != undefined)
|
||||
this.isForcedViewMode = new Boolean(blockElement.attributes['is-forced-view-mode'].value);
|
||||
|
||||
this.defaultViewMode = possibleDefaultViewMode;
|
||||
this.enabledViewModes = possibleViewModes;
|
||||
|
||||
// Options related to hidding elements
|
||||
this.hideFilters = possibleHideFilters;
|
||||
if (this.$el.attributes['hide-hide-filters-button'] != undefined)
|
||||
if (blockElement.attributes['hide-hide-filters-button'] != undefined)
|
||||
this.hideHideFiltersButton = this.isParameterTrue('hide-hide-filters-button');
|
||||
if (this.$el.attributes['hide-search'] != undefined)
|
||||
if (blockElement.attributes['hide-search'] != undefined)
|
||||
this.hideSearch = this.isParameterTrue('hide-search');
|
||||
if (this.$el.attributes['hide-advanced-search'] != undefined)
|
||||
if (blockElement.attributes['hide-advanced-search'] != undefined)
|
||||
this.hideAdvancedSearch = this.isParameterTrue('hide-advanced-search');
|
||||
if (this.$el.attributes['hide-displayed-metadata-button'] != undefined)
|
||||
if (blockElement.attributes['hide-displayed-metadata-button'] != undefined)
|
||||
this.hideDisplayedMetadataButton = this.isParameterTrue('hide-displayed-metadata-button');
|
||||
if (this.$el.attributes['hide-sorting-area'] != undefined)
|
||||
if (blockElement.attributes['hide-sorting-area'] != undefined)
|
||||
this.hideSortingArea = this.isParameterTrue('hide-sorting-area');
|
||||
if (this.$el.attributes['hide-items-thumbnail'] != undefined)
|
||||
if (blockElement.attributes['hide-items-thumbnail'] != undefined)
|
||||
this.hideItemsThumbnail = this.isParameterTrue('hide-items-thumbnail');
|
||||
if (this.$el.attributes['hide-sort-by-button'] != undefined)
|
||||
if (blockElement.attributes['hide-sort-by-button'] != undefined)
|
||||
this.hideSortByButton = this.isParameterTrue('hide-sort-by-button');
|
||||
if (this.$el.attributes['hide-exposers-button'] != undefined)
|
||||
if (blockElement.attributes['hide-exposers-button'] != undefined)
|
||||
this.hideExposersButton = this.isParameterTrue('hide-exposers-button');
|
||||
if (this.$el.attributes['hide-items-per-page-button'] != undefined)
|
||||
if (blockElement.attributes['hide-items-per-page-button'] != undefined)
|
||||
this.hideItemsPerPageButton = this.isParameterTrue('hide-items-per-page-button');
|
||||
if (this.$el.attributes['hide-go-to-page-button'] != undefined)
|
||||
if (blockElement.attributes['hide-go-to-page-button'] != undefined)
|
||||
this.hideGoToPageButton = this.isParameterTrue('hide-go-to-page-button');
|
||||
if (this.$el.attributes['hide-pagination-area'] != undefined)
|
||||
if (blockElement.attributes['hide-pagination-area'] != undefined)
|
||||
this.hidePaginationArea = this.isParameterTrue('hide-pagination-area');
|
||||
|
||||
// Other Tweaks
|
||||
if (this.$el.attributes['default-items-per-page'] != undefined)
|
||||
this.defaultItemsPerPage = Number(this.$el.attributes['default-items-per-page'].value);
|
||||
if (this.$el.attributes['show-filters-button-inside-search-control'] != undefined)
|
||||
if (blockElement.attributes['default-items-per-page'] != undefined)
|
||||
this.defaultItemsPerPage = Number(blockElement.attributes['default-items-per-page'].value);
|
||||
if (blockElement.attributes['show-filters-button-inside-search-control'] != undefined)
|
||||
this.showFiltersButtonInsideSearchControl = this.isParameterTrue('show-filters-button-inside-search-control');
|
||||
if (this.$el.attributes['start-with-filters-hidden'] != undefined)
|
||||
if (blockElement.attributes['start-with-filters-hidden'] != undefined)
|
||||
this.startWithFiltersHidden = this.isParameterTrue('start-with-filters-hidden');
|
||||
if (this.$el.attributes['filters-as-modal'] != undefined)
|
||||
if (blockElement.attributes['filters-as-modal'] != undefined)
|
||||
this.filtersAsModal = this.isParameterTrue('filters-as-modal');
|
||||
if (this.$el.attributes['show-inline-view-mode-options'] != undefined)
|
||||
if (blockElement.attributes['show-inline-view-mode-options'] != undefined)
|
||||
this.showInlineViewModeOptions = this.isParameterTrue('show-inline-view-mode-options');
|
||||
if (this.$el.attributes['show-fullscreen-with-view-modes'] != undefined)
|
||||
if (blockElement.attributes['show-fullscreen-with-view-modes'] != undefined)
|
||||
this.showFullscreenWithViewModes = this.isParameterTrue('show-fullscreen-with-view-modes');
|
||||
},
|
||||
methods: {
|
||||
isParameterTrue(parameter) {
|
||||
const value = this.$el.attributes[parameter].value;
|
||||
const value = blockElement.attributes[parameter].value;
|
||||
return (value == true || value == 'true' || value == '1' || value == 1) ? true : false;
|
||||
},
|
||||
maybeConvertFromJSON(someString) {
|
||||
|
|
|
|||
|
|
@ -89,67 +89,67 @@ export default (element) => {
|
|||
},
|
||||
beforeMount () {
|
||||
// Collection source settings
|
||||
if (this.$el.attributes['collection-id'] != undefined)
|
||||
this.collectionId = this.$el.attributes['collection-id'].value;
|
||||
if (blockElement.attributes['collection-id'] != undefined)
|
||||
this.collectionId = blockElement.attributes['collection-id'].value;
|
||||
|
||||
// Elements shown on form
|
||||
if (this.$el.attributes['hide-file-modal-button'] != undefined)
|
||||
if (blockElement.attributes['hide-file-modal-button'] != undefined)
|
||||
this.hideFileModalButton = this.isParameterTrue('hide-file-modal-button');
|
||||
if (this.$el.attributes['hide-text-modal-button'] != undefined)
|
||||
if (blockElement.attributes['hide-text-modal-button'] != undefined)
|
||||
this.hideTextModalButton = this.isParameterTrue('hide-text-modal-button');
|
||||
if (this.$el.attributes['hide-link-modal-button'] != undefined)
|
||||
if (blockElement.attributes['hide-link-modal-button'] != undefined)
|
||||
this.hideLinkModalButton = this.isParameterTrue('hide-link-modal-button');
|
||||
if (this.$el.attributes['hide-thumbnail-section'] != undefined)
|
||||
if (blockElement.attributes['hide-thumbnail-section'] != undefined)
|
||||
this.hideThumbnailSection = this.isParameterTrue('hide-thumbnail-section');
|
||||
if (this.$el.attributes['hide-attachments-section'] != undefined)
|
||||
if (blockElement.attributes['hide-attachments-section'] != undefined)
|
||||
this.hideAttachmentsSection = this.isParameterTrue('hide-attachments-section');
|
||||
if (this.$el.attributes['show-allow-comments-section'] != undefined)
|
||||
if (blockElement.attributes['show-allow-comments-section'] != undefined)
|
||||
this.showAllowCommentsSection = this.isParameterTrue('show-allow-comments-section');
|
||||
if (this.$el.attributes['hide-collapses'] != undefined)
|
||||
if (blockElement.attributes['hide-collapses'] != undefined)
|
||||
this.hideCollapses = this.isParameterTrue('hide-collapses');
|
||||
if (this.$el.attributes['hide-help-buttons'] != undefined)
|
||||
if (blockElement.attributes['hide-help-buttons'] != undefined)
|
||||
this.hideHelpButtons = this.isParameterTrue('hide-help-buttons');
|
||||
if (this.$el.attributes['hide-metadata-types'] != undefined)
|
||||
if (blockElement.attributes['hide-metadata-types'] != undefined)
|
||||
this.hideMetadataTypes = this.isParameterTrue('hide-metadata-types');
|
||||
if (this.$el.attributes['help-info-bellow-label'] != undefined)
|
||||
if (blockElement.attributes['help-info-bellow-label'] != undefined)
|
||||
this.helpInfoBellowLabel = this.isParameterTrue('help-info-bellow-label');
|
||||
if (this.$el.attributes['is-layout-steps'] != undefined)
|
||||
if (blockElement.attributes['is-layout-steps'] != undefined)
|
||||
this.isLayoutSteps = this.isParameterTrue('is-layout-steps');
|
||||
|
||||
// Form sections labels
|
||||
if (this.$el.attributes['document-section-label'] != undefined)
|
||||
this.documentSectionLabel = this.$el.attributes['document-section-label'].value;
|
||||
if (this.$el.attributes['thumbnail-section-label'] != undefined)
|
||||
this.thumbnailSectionLabel = this.$el.attributes['thumbnail-section-label'].value;
|
||||
if (this.$el.attributes['attachments-section-label'] != undefined)
|
||||
this.attachmentsSectionLabel = this.$el.attributes['attachments-section-label'].value;
|
||||
if (this.$el.attributes['metadata-section-label'] != undefined)
|
||||
this.metadataSectionLabel = this.$el.attributes['metadata-section-label'].value;
|
||||
if (blockElement.attributes['document-section-label'] != undefined)
|
||||
this.documentSectionLabel = blockElement.attributes['document-section-label'].value;
|
||||
if (blockElement.attributes['thumbnail-section-label'] != undefined)
|
||||
this.thumbnailSectionLabel = blockElement.attributes['thumbnail-section-label'].value;
|
||||
if (blockElement.attributes['attachments-section-label'] != undefined)
|
||||
this.attachmentsSectionLabel = blockElement.attributes['attachments-section-label'].value;
|
||||
if (blockElement.attributes['metadata-section-label'] != undefined)
|
||||
this.metadataSectionLabel = blockElement.attributes['metadata-section-label'].value;
|
||||
|
||||
// Form submission feedback messages
|
||||
if (this.$el.attributes['sent-form-heading'] != undefined)
|
||||
this.sentFormHeading = this.$el.attributes['sent-form-heading'].value;
|
||||
if (this.$el.attributes['sent-form-message'] != undefined)
|
||||
this.sentFormMessage = this.$el.attributes['sent-form-message'].value;
|
||||
if (this.$el.attributes['item-link-button-label'] != undefined)
|
||||
this.itemLinkButtonLabel = this.$el.attributes['item-link-button-label'].value;
|
||||
if (this.$el.attributes['show-item-link-button'] != undefined)
|
||||
if (blockElement.attributes['sent-form-heading'] != undefined)
|
||||
this.sentFormHeading = blockElement.attributes['sent-form-heading'].value;
|
||||
if (blockElement.attributes['sent-form-message'] != undefined)
|
||||
this.sentFormMessage = blockElement.attributes['sent-form-message'].value;
|
||||
if (blockElement.attributes['item-link-button-label'] != undefined)
|
||||
this.itemLinkButtonLabel = blockElement.attributes['item-link-button-label'].value;
|
||||
if (blockElement.attributes['show-item-link-button'] != undefined)
|
||||
this.showItemLinkButton = this.isParameterTrue('show-item-link-button');
|
||||
|
||||
/* Terms agreements confirmation checkbox */
|
||||
if (this.$el.attributes['show-terms-agreement-checkbox'] != undefined)
|
||||
if (blockElement.attributes['show-terms-agreement-checkbox'] != undefined)
|
||||
this.showTermsAgreementCheckbox = this.isParameterTrue('show-terms-agreement-checkbox');
|
||||
if (this.$el.attributes['terms-agreement-message'] != undefined)
|
||||
this.termsAgreementMessage = this.$el.attributes['terms-agreement-message'].value;
|
||||
if (blockElement.attributes['terms-agreement-message'] != undefined)
|
||||
this.termsAgreementMessage = blockElement.attributes['terms-agreement-message'].value;
|
||||
|
||||
// List of metadata
|
||||
if (this.$el.attributes['enabled-metadata'] != undefined && this.$el.attributes['enabled-metadata'].value)
|
||||
this.enabledMetadata = this.$el.attributes['enabled-metadata'].value.split(',');
|
||||
if (blockElement.attributes['enabled-metadata'] != undefined && blockElement.attributes['enabled-metadata'].value)
|
||||
this.enabledMetadata = blockElement.attributes['enabled-metadata'].value.split(',');
|
||||
|
||||
},
|
||||
methods: {
|
||||
isParameterTrue(parameter) {
|
||||
const value = this.$el.attributes[parameter].value;
|
||||
const value = blockElement.attributes[parameter].value;
|
||||
return (value == true || value == 'true' || value == '1' || value == 1) ? true : false;
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue