Moves terms carousel block to new data- attribute strategy.

This commit is contained in:
mateuswetah 2023-12-13 14:46:56 -03:00
parent a53ed64fd7
commit 2c933b6192
10 changed files with 215 additions and 63 deletions

View File

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

View File

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

View File

@ -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;

View File

@ -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: {

View File

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

View File

@ -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%;
} }
} }
} }

View File

@ -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() {

View File

@ -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.';