Moves terms carousel block to new data- attribute strategy.
This commit is contained in:
parent
a53ed64fd7
commit
2c933b6192
|
@ -432,11 +432,9 @@
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: block; }
|
display: block; }
|
||||||
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper .is-forced-square > a > div {
|
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper .is-forced-square > a > div img {
|
||||||
padding-bottom: 100% !important; }
|
object-fit: cover;
|
||||||
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper .is-forced-square > a > div img {
|
object-position: center; }
|
||||||
object-fit: cover;
|
|
||||||
object-position: center; }
|
|
||||||
.wp-block-tainacan-carousel-items-list .preview-warning {
|
.wp-block-tainacan-carousel-items-list .preview-warning {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -448,17 +448,16 @@
|
||||||
-ms-grid-row: 1;
|
-ms-grid-row: 1;
|
||||||
-ms-grid-row-span: 2;
|
-ms-grid-row-span: 2;
|
||||||
grid-column: 1/3;
|
grid-column: 1/3;
|
||||||
grid-row: 1/3;
|
grid-row: 1/3; }
|
||||||
padding-bottom: 100% !important; }
|
|
||||||
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide.term-list-item-grid .term-items-grid > * {
|
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide.term-list-item-grid .term-items-grid > * {
|
||||||
flex-basis: 50%;
|
flex-basis: 50%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px; }
|
||||||
padding-bottom: 100% !important; }
|
|
||||||
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide.term-list-item-grid .term-items-grid img {
|
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide.term-list-item-grid .term-items-grid img {
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
object-position: center; }
|
object-position: center;
|
||||||
|
width: 100%; }
|
||||||
.wp-block-tainacan-carousel-terms-list .preview-warning {
|
.wp-block-tainacan-carousel-terms-list .preview-warning {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -181,7 +181,7 @@
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.is-forced-square>a>div {
|
.is-forced-square>a>div {
|
||||||
padding-bottom: 100% !important;
|
//padding-bottom: 100% !important;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
|
|
@ -1,6 +1,159 @@
|
||||||
const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||||
|
|
||||||
export default [
|
export default [
|
||||||
|
/* Deprecated during Vue 3 migration to prepend attributes with data- */
|
||||||
|
{
|
||||||
|
"attributes": {
|
||||||
|
"content": {
|
||||||
|
"type": "array",
|
||||||
|
"source": "children",
|
||||||
|
"selector": "div"
|
||||||
|
},
|
||||||
|
"terms": {
|
||||||
|
"type": "array",
|
||||||
|
"default": []
|
||||||
|
},
|
||||||
|
"isModalOpen": {
|
||||||
|
"type": "boolean",
|
||||||
|
"default": false
|
||||||
|
},
|
||||||
|
"selectedTerms": {
|
||||||
|
"type": "array",
|
||||||
|
"default": []
|
||||||
|
},
|
||||||
|
"itemsRequestSource": {
|
||||||
|
"type": "string",
|
||||||
|
"default": ""
|
||||||
|
},
|
||||||
|
"maxTermsnumber": {
|
||||||
|
"type": "number",
|
||||||
|
"value": 12
|
||||||
|
},
|
||||||
|
"maxTermsPerScreen": {
|
||||||
|
"type": "number",
|
||||||
|
"value": 6
|
||||||
|
},
|
||||||
|
"spaceBetweenTerms": {
|
||||||
|
"type": "number",
|
||||||
|
"value": 32
|
||||||
|
},
|
||||||
|
"spaceAroundCarousel": {
|
||||||
|
"type": "number",
|
||||||
|
"value": 50
|
||||||
|
},
|
||||||
|
"isLoading": {
|
||||||
|
"type": "boolean",
|
||||||
|
"value": false
|
||||||
|
},
|
||||||
|
"isLoadingTerm": {
|
||||||
|
"type": "boolean",
|
||||||
|
"value": false
|
||||||
|
},
|
||||||
|
"arrowsPosition": {
|
||||||
|
"type": "string",
|
||||||
|
"value": "around"
|
||||||
|
},
|
||||||
|
"largeArrows": {
|
||||||
|
"type": "boolean",
|
||||||
|
"value": false
|
||||||
|
},
|
||||||
|
"arrowsStyle": {
|
||||||
|
"type": "string",
|
||||||
|
"value": "type-1"
|
||||||
|
},
|
||||||
|
"autoPlay": {
|
||||||
|
"type": "boolean",
|
||||||
|
"value": false
|
||||||
|
},
|
||||||
|
"autoPlaySpeed": {
|
||||||
|
"type": "number",
|
||||||
|
"value": 3
|
||||||
|
},
|
||||||
|
"loopSlides": {
|
||||||
|
"type": "boolean",
|
||||||
|
"value": false
|
||||||
|
},
|
||||||
|
"hideName": {
|
||||||
|
"type": "boolean",
|
||||||
|
"value": true
|
||||||
|
},
|
||||||
|
"showTermThumbnail": {
|
||||||
|
"type": "boolean",
|
||||||
|
"value": false
|
||||||
|
},
|
||||||
|
"term": {
|
||||||
|
"type": "object",
|
||||||
|
"value": {}
|
||||||
|
},
|
||||||
|
"imageSize": {
|
||||||
|
"type": "string",
|
||||||
|
"default": "tainacan-medium"
|
||||||
|
},
|
||||||
|
"blockId": {
|
||||||
|
"type": "string",
|
||||||
|
"default": ""
|
||||||
|
},
|
||||||
|
"termBackgroundColor": {
|
||||||
|
"type": "string",
|
||||||
|
"default": "#373839"
|
||||||
|
},
|
||||||
|
"termTextColor": {
|
||||||
|
"type": "string",
|
||||||
|
"default": "#ffffff"
|
||||||
|
},
|
||||||
|
"taxonomyId": {
|
||||||
|
"type": "string",
|
||||||
|
"default": ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
save: function({ attributes }) {
|
||||||
|
const {
|
||||||
|
content,
|
||||||
|
blockId,
|
||||||
|
selectedTerms,
|
||||||
|
arrowsPosition,
|
||||||
|
largeArrows,
|
||||||
|
arrowsStyle,
|
||||||
|
maxTermsPerScreen,
|
||||||
|
maxTermsNumber,
|
||||||
|
spaceBetweenTerms,
|
||||||
|
spaceAroundCarousel,
|
||||||
|
autoPlay,
|
||||||
|
autoPlaySpeed,
|
||||||
|
loopSlides,
|
||||||
|
hideName,
|
||||||
|
imageSize,
|
||||||
|
showTermThumbnail,
|
||||||
|
taxonomyId
|
||||||
|
} = attributes;
|
||||||
|
|
||||||
|
// Gets attributes such as style, that are automatically added by the editor hook
|
||||||
|
const blockProps = useBlockProps.save();
|
||||||
|
return <div
|
||||||
|
{ ...blockProps }
|
||||||
|
data-module="carousel-terms-list"
|
||||||
|
selected-terms={ JSON.stringify(selectedTerms.map((term) => { return term.id; })) }
|
||||||
|
arrows-position={ arrowsPosition }
|
||||||
|
auto-play={ '' + autoPlay }
|
||||||
|
auto-play-speed={ autoPlaySpeed }
|
||||||
|
loop-slides={ '' + loopSlides }
|
||||||
|
hide-name={ '' + hideName }
|
||||||
|
large-arrows={ '' + largeArrows }
|
||||||
|
arrows-style={ arrowsStyle }
|
||||||
|
image-size={ imageSize }
|
||||||
|
max-terms-number={ maxTermsNumber }
|
||||||
|
max-terms-per-screen={ maxTermsPerScreen }
|
||||||
|
space-between-terms={ spaceBetweenTerms }
|
||||||
|
space-around-carousel={ spaceAroundCarousel }
|
||||||
|
taxonomy-id={ taxonomyId }
|
||||||
|
tainacan-api-root={ tainacan_blocks.root }
|
||||||
|
tainacan-base-url={ tainacan_blocks.base_url }
|
||||||
|
show-term-thumbnail={ '' + showTermThumbnail }
|
||||||
|
id={ 'wp-block-tainacan-carousel-terms-list_' + blockId }>
|
||||||
|
{ content }
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
},
|
||||||
/* Deprecated on 0.20.4 to replace termBackgroundColor */
|
/* Deprecated on 0.20.4 to replace termBackgroundColor */
|
||||||
{
|
{
|
||||||
attributes: {
|
attributes: {
|
||||||
|
|
|
@ -26,23 +26,22 @@ export default function({ attributes }) {
|
||||||
return <div
|
return <div
|
||||||
{ ...blockProps }
|
{ ...blockProps }
|
||||||
data-module="carousel-terms-list"
|
data-module="carousel-terms-list"
|
||||||
selected-terms={ JSON.stringify(selectedTerms.map((term) => { return term.id; })) }
|
data-selected-terms={ JSON.stringify(selectedTerms.map((term) => { return term.id; })) }
|
||||||
arrows-position={ arrowsPosition }
|
data-arrows-position={ arrowsPosition }
|
||||||
auto-play={ '' + autoPlay }
|
data-auto-play={ '' + autoPlay }
|
||||||
auto-play-speed={ autoPlaySpeed }
|
data-auto-play-speed={ autoPlaySpeed }
|
||||||
loop-slides={ '' + loopSlides }
|
data-loop-slides={ '' + loopSlides }
|
||||||
hide-name={ '' + hideName }
|
data-hide-name={ '' + hideName }
|
||||||
large-arrows={ '' + largeArrows }
|
data-large-arrows={ '' + largeArrows }
|
||||||
arrows-style={ arrowsStyle }
|
data-arrows-style={ arrowsStyle }
|
||||||
image-size={ imageSize }
|
data-image-size={ imageSize }
|
||||||
max-terms-number={ maxTermsNumber }
|
data-max-terms-number={ maxTermsNumber }
|
||||||
max-terms-per-screen={ maxTermsPerScreen }
|
data-max-terms-per-screen={ maxTermsPerScreen }
|
||||||
space-between-terms={ spaceBetweenTerms }
|
data-space-between-terms={ spaceBetweenTerms }
|
||||||
space-around-carousel={ spaceAroundCarousel }
|
data-space-around-carousel={ spaceAroundCarousel }
|
||||||
taxonomy-id={ taxonomyId }
|
data-taxonomy-id={ taxonomyId }
|
||||||
tainacan-api-root={ tainacan_blocks.root }
|
data-tainacan-api-root={ tainacan_blocks.root }
|
||||||
tainacan-base-url={ tainacan_blocks.base_url }
|
data-show-term-thumbnail={ '' + showTermThumbnail }
|
||||||
show-term-thumbnail={ '' + showTermThumbnail }
|
|
||||||
id={ 'wp-block-tainacan-carousel-terms-list_' + blockId }>
|
id={ 'wp-block-tainacan-carousel-terms-list_' + blockId }>
|
||||||
{ content }
|
{ content }
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -191,7 +191,7 @@
|
||||||
&>*:first-of-type {
|
&>*:first-of-type {
|
||||||
flex-basis: 100%;
|
flex-basis: 100%;
|
||||||
@include grid-child(1, 3, 1, 3);
|
@include grid-child(1, 3, 1, 3);
|
||||||
padding-bottom: 100% !important;
|
// padding-bottom: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&>* {
|
&>* {
|
||||||
|
@ -199,12 +199,13 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
padding-bottom: 100% !important;
|
// padding-bottom: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
object-position: center;
|
object-position: center;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,6 +2,7 @@ import { createApp, h } from 'vue';
|
||||||
import CarouselTermsListTheme from './theme.vue';
|
import CarouselTermsListTheme from './theme.vue';
|
||||||
import { ThumbnailHelperPlugin } from '../../../admin/js/utilities.js';
|
import { ThumbnailHelperPlugin } from '../../../admin/js/utilities.js';
|
||||||
import VueBlurHash from 'another-vue3-blurhash';
|
import VueBlurHash from 'another-vue3-blurhash';
|
||||||
|
import getDataAttribute from '../../js/compatibility/tainacan-blocks-compat-data-attributes.js';
|
||||||
|
|
||||||
export default (element) => {
|
export default (element) => {
|
||||||
|
|
||||||
|
@ -23,23 +24,22 @@ export default (element) => {
|
||||||
render() {
|
render() {
|
||||||
return h(CarouselTermsListTheme, {
|
return h(CarouselTermsListTheme, {
|
||||||
blockId: block.id,
|
blockId: block.id,
|
||||||
selectedTerms: block.attributes['selected-terms'] != undefined ? JSON.parse(block.attributes['selected-terms'].value) : undefined,
|
selectedTerms: JSON.parse(getDataAttribute(block, 'selected-terms', '[]')),
|
||||||
maxItemsNumber: block.attributes['max-terms-number'] != undefined ? block.attributes['max-terms-number'].value : 12,
|
maxItemsNumber: Number(getDataAttribute(block, 'max-terms-number', 12)),
|
||||||
maxTermsPerScreen: block.attributes['max-terms-per-screen'] != undefined ? Number(block.attributes['max-terms-per-screen'].value) : 6,
|
maxTermsPerScreen: Number(getDataAttribute(block, 'max-terms-per-screen', 6)),
|
||||||
arrowsPosition: block.attributes['arrows-position'] != undefined ? block.attributes['arrows-position'].value : undefined,
|
arrowsPosition: getDataAttribute(block, 'arrows-position', undefined),
|
||||||
autoPlay: block.attributes['auto-play'] != undefined ? block.attributes['auto-play'].value == 'true' : false,
|
autoPlay: getDataAttribute(block, 'auto-play', 'false') == 'true',
|
||||||
autoPlaySpeed: block.attributes['auto-play-speed'] != undefined ? Number(block.attributes['auto-play-speed'].value) : 3,
|
autoPlaySpeed: Number(getDataAttribute(block, 'auto-play-speed', 3)),
|
||||||
spaceBetweenTerms: block.attributes['space-between-terms'] != undefined ? Number(block.attributes['space-between-terms'].value) : 32,
|
spaceBetweenTerms: Number(getDataAttribute(block, 'space-between-terms', 32)),
|
||||||
spaceAroundCarousel: block.attributes['space-around-carousel'] != undefined ? Number(block.attributes['space-around-carousel'].value) : 50,
|
spaceAroundCarousel: Number(getDataAttribute(block, 'space-around-carousel', 50)),
|
||||||
largeArrows: block.attributes['large-arrows'] != undefined ? block.attributes['large-arrows'].value == 'true' : false,
|
largeArrows: getDataAttribute(block, 'large-arrows', 'false') == 'true',
|
||||||
arrowsStyle: block.attributes['arrows-style'] != undefined ? block.attributes['arrows-style'].value : 'type-1',
|
arrowsStyle: getDataAttribute(block, 'arrows-style', 'type-1'),
|
||||||
loopSlides: block.attributes['loop-slides'] != undefined ? block.attributes['loop-slides'].value == 'true' : false,
|
loopSlides: getDataAttribute(block, 'loop-slides', 'false') == 'true',
|
||||||
imageSize: block.attributes['image-size'] != undefined ? block.attributes['image-size'].value : 'tainacan-medium',
|
imageSize: getDataAttribute(block, 'image-size', 'tainacan-medium'),
|
||||||
hideName: block.attributes['hide-name'] != undefined ? block.attributes['hide-name'].value == 'true' : false,
|
hideName: getDataAttribute(block, 'hide-name', 'false') == 'true',
|
||||||
taxonomyId: block.attributes['taxonomy-id'] != undefined ? block.attributes['taxonomy-id'].value : undefined,
|
taxonomyId: getDataAttribute(block, 'taxonomy-id', undefined),
|
||||||
showTermThumbnail: block.attributes['show-term-thumbnail'] != undefined ? block.attributes['show-term-thumbnail'].value == 'true' : false,
|
showTermThumbnail: getDataAttribute(block, 'show-term-thumbnail', 'false') == 'true',
|
||||||
tainacanApiRoot: block.attributes['tainacan-api-root'] != undefined ? block.attributes['tainacan-api-root'].value : undefined,
|
tainacanApiRoot: getDataAttribute(block, 'tainacan-api-root', undefined),
|
||||||
tainacanBaseUrl: block.attributes['tainacan-base-url'] != undefined ? block.attributes['tainacan-base-url'].value : undefined
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
|
@ -44,7 +44,7 @@
|
||||||
?
|
?
|
||||||
term.thumbnail['thumbnail'][0]
|
term.thumbnail['thumbnail'][0]
|
||||||
:
|
:
|
||||||
`${tainacanBaseUrl}/assets/images/placeholder_square.png`)
|
$thumbHelper.getEmptyThumbnailPlaceholder('empty', imageSize))
|
||||||
"
|
"
|
||||||
:data-src="
|
:data-src="
|
||||||
term.thumbnail && term.thumbnail[imageSize] && term.thumbnail[imageSize][0]
|
term.thumbnail && term.thumbnail[imageSize] && term.thumbnail[imageSize][0]
|
||||||
|
@ -55,9 +55,9 @@
|
||||||
?
|
?
|
||||||
term.thumbnail['thumbnail'][0]
|
term.thumbnail['thumbnail'][0]
|
||||||
:
|
:
|
||||||
`${tainacanBaseUrl}/assets/images/placeholder_square.png`)
|
$thumbHelper.getEmptyThumbnailPlaceholder('empty', imageSize))
|
||||||
"
|
"
|
||||||
:alt="term.thumbnail_alt ? term.thumbnail_alt : (term.name ? term.name : wp.i18n.__('Thumbnail', 'tainacan'))" >
|
:alt="term.thumbnail_alt ? term.thumbnail_alt : (term.name ? term.name : wpI18n('Thumbnail', 'tainacan'))" >
|
||||||
<span v-if="!hideName">{{ term.name ? term.name : '' }}</span>
|
<span v-if="!hideName">{{ term.name ? term.name : '' }}</span>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
|
@ -68,26 +68,26 @@
|
||||||
<blur-hash-image
|
<blur-hash-image
|
||||||
:height="termItems[term.id][0] ? $thumbHelper.getHeight(termItems[term.id][0]['thumbnail'], 'tainacan-medium') : 275"
|
: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"
|
: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`"
|
:src="termItems[term.id][0] ? $thumbHelper.getSrc(termItems[term.id][0]['thumbnail'], 'tainacan-medium', termItems[term.id][0]['document_mimetype']) : $thumbHelper.getEmptyThumbnailPlaceholder('empty', imageSize)"
|
||||||
: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`"
|
:srcset="termItems[term.id][0] ? $thumbHelper.getSrcSet(termItems[term.id][0]['thumbnail'], 'tainacan-medium', termItems[term.id][0]['document_mimetype']) : $thumbHelper.getEmptyThumbnailPlaceholder('empty', imageSize)"
|
||||||
:hash="termItems[term.id][0] ? $thumbHelper.getBlurhashString(termItems[term.id][0]['thumbnail'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
: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' ))"
|
: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 : wpI18n( 'Thumbnail', 'tainacan' ))"
|
||||||
:transition-duration="500" />
|
:transition-duration="500" />
|
||||||
<blur-hash-image
|
<blur-hash-image
|
||||||
:height="termItems[term.id][1] ? $thumbHelper.getHeight(termItems[term.id][1]['thumbnail'], 'tainacan-medium') : 275"
|
: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"
|
: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`"
|
:src="termItems[term.id][1] ? $thumbHelper.getSrc(termItems[term.id][1]['thumbnail'], 'tainacan-medium', termItems[term.id][1]['document_mimetype']) : $thumbHelper.getEmptyThumbnailPlaceholder('empty', imageSize)"
|
||||||
: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`"
|
:srcset="termItems[term.id][1] ? $thumbHelper.getSrcSet(termItems[term.id][1]['thumbnail'], 'tainacan-medium', termItems[term.id][1]['document_mimetype']) : $thumbHelper.getEmptyThumbnailPlaceholder('empty', imageSize)"
|
||||||
:hash="termItems[term.id][1] ? $thumbHelper.getBlurhashString(termItems[term.id][1]['thumbnail'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
: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' ))"
|
: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 : wpI18n( 'Thumbnail', 'tainacan' ))"
|
||||||
:transition-duration="500" />
|
:transition-duration="500" />
|
||||||
<blur-hash-image
|
<blur-hash-image
|
||||||
:height="termItems[term.id][2] ? $thumbHelper.getHeight(termItems[term.id][2]['thumbnail'], 'tainacan-medium') : 275"
|
: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"
|
: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`"
|
:src="termItems[term.id][2] ? $thumbHelper.getSrc(termItems[term.id][2]['thumbnail'], 'tainacan-medium', termItems[term.id][2]['document_mimetype']) : $thumbHelper.getEmptyThumbnailPlaceholder('empty', imageSize)"
|
||||||
: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`"
|
:srcset="termItems[term.id][2] ? $thumbHelper.getSrcSet(termItems[term.id][2]['thumbnail'], 'tainacan-medium', termItems[term.id][2]['document_mimetype']) : $thumbHelper.getEmptyThumbnailPlaceholder('empty', imageSize)"
|
||||||
:hash="termItems[term.id][2] ? $thumbHelper.getBlurhashString(termItems[term.id][2]['thumbnail'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
: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' ))"
|
: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 : wpI18n( 'Thumbnail', 'tainacan' ))"
|
||||||
:transition-duration="500" />
|
:transition-duration="500" />
|
||||||
</div>
|
</div>
|
||||||
<span v-if="!hideName">{{ term.name ? term.name : '' }}</span>
|
<span v-if="!hideName">{{ term.name ? term.name : '' }}</span>
|
||||||
|
@ -137,7 +137,7 @@
|
||||||
<div
|
<div
|
||||||
v-else-if="terms.length <= 0 && !isLoading"
|
v-else-if="terms.length <= 0 && !isLoading"
|
||||||
class="spinner-container">
|
class="spinner-container">
|
||||||
{{ wp.i18n.__('No terms found.', 'tainacan') }}
|
{{ wpI18n('No terms found.', 'tainacan') }}
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -171,7 +171,6 @@ export default {
|
||||||
imageSize: String,
|
imageSize: String,
|
||||||
showTermThumbnail: Boolean,
|
showTermThumbnail: Boolean,
|
||||||
tainacanApiRoot: String,
|
tainacanApiRoot: String,
|
||||||
tainacanBaseUrl: String,
|
|
||||||
taxonomyId: String
|
taxonomyId: String
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
|
@ -206,6 +205,9 @@ export default {
|
||||||
this.swiper.destroy();
|
this.swiper.destroy();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
wpI18n(string, context) {
|
||||||
|
return wp && wp.i18n ? wp.i18n.__(string, context) : string;
|
||||||
|
},
|
||||||
fetchTerms() {
|
fetchTerms() {
|
||||||
this.isLoading = true;
|
this.isLoading = true;
|
||||||
this.errorMessage = 'No terms found.';
|
this.errorMessage = 'No terms found.';
|
||||||
|
|
Loading…
Reference in New Issue