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

Moves Items and Collections carousel to new data- attributes logic.

This commit is contained in:
mateuswetah 2023-12-12 16:17:23 -03:00
parent a2fd2f3dce
commit a53ed64fd7
12 changed files with 440 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/assets/css/tainacan-gutenberg-block-carousel-collections-list.css
View File

@ -448,17 +448,16 @@
-ms-grid-row: 1;
-ms-grid-row-span: 2;
grid-column: 1/3;
grid-row: 1/3;
padding-bottom: 100% !important; }
grid-row: 1/3; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide.collection-list-item-grid .collection-items-grid > * {
flex-basis: 50%;
width: 100%;
height: auto;
margin-bottom: 0px;
padding-bottom: 100% !important; }
margin-bottom: 0px; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide.collection-list-item-grid .collection-items-grid img {
object-fit: cover;
object-position: center; }
object-position: center;
width: 100%; }
.wp-block-tainacan-carousel-collections-list .preview-warning {
width: 100%;
font-size: 0.875rem;

2
src/assets/css/tainacan-gutenberg-block-carousel-collections-list.css.map
View File

File diff suppressed because one or more lines are too long

143
src/views/gutenberg-blocks/blocks/carousel-collections-list/deprecated.js
View File

@ -1,6 +1,149 @@
const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
export default [
/* Deprecated during Vue 3 migration to prepend attributes with data- */
{
"attributes" :{
"content": {
"type": "array",
"source": "children",
"selector": "div"
},
"collections": {
"type": "array",
"default": []
},
"isModalOpen": {
"type": "boolean",
"default": false
},
"selectedCollections": {
"type": "array",
"default": []
},
"itemsRequestSource": {
"type": "string",
"default": false
},
"maxCollectionsNumber": {
"type": "number",
"default": false
},
"maxCollectionsPerScreen": {
"type": "number",
"default": 6
},
"spaceBetweenCollections": {
"type": "number",
"default": 32
},
"spaceAroundCarousel": {
"type": "number",
"default": 50
},
"isLoading": {
"type": "boolean",
"default": false
},
"isLoadingCollection": {
"type": "boolean",
"default": false
},
"arrowsPosition": {
"type": "string",
"default": "around"
},
"largeArrows": {
"type": "boolean",
"default": false
},
"arrowsStyle": {
"type": "string",
"default": "type-1"
},
"autoPlay": {
"type": "boolean",
"default": false
},
"autoPlaySpeed": {
"type": "number",
"default": 3
},
"loopSlides": {
"type": "boolean",
"default": false
},
"hideName": {
"type": "boolean",
"default": true
},
"showCollectionThumbnail": {
"type": "boolean",
"default": false
},
"imageSize": {
"type": "string",
"default": "tainacan-medium"
},
"blockId": {
"type": "string",
"default": ""
},
"collectionBackgroundColor": {
"type": "string",
"default": "#373839"
},
"collectionTextColor": {
"type": "string",
"default": "#ffffff"
}
},
save: function ({ attributes }) {
const {
content,
blockId,
selectedCollections,
arrowsPosition,
largeArrows,
arrowsStyle,
imageSize,
maxCollectionsPerScreen,
maxCollectionsNumber,
spaceBetweenCollections,
spaceAroundCarousel,
autoPlay,
autoPlaySpeed,
loopSlides,
hideName,
showCollectionThumbnail
} = attributes;
// Gets attributes such as style, that are automatically added by the editor hook
const blockProps = useBlockProps.save();
return <div
{ ...blockProps }
data-module="carousel-collections-list"
selected-collections={ JSON.stringify(selectedCollections.map((collection) => { return collection.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-collections-number={ maxCollectionsNumber }
max-collections-per-screen={ maxCollectionsPerScreen }
space-between-collections={ spaceBetweenCollections }
space-around-carousel={ spaceAroundCarousel }
tainacan-api-root={ tainacan_blocks.root }
tainacan-base-url={ tainacan_blocks.base_url }
show-collection-thumbnail={ '' + showCollectionThumbnail }
id={ 'wp-block-tainacan-carousel-collections-list_' + blockId }>
{ content }
</div>
}
},
/* Deprecated on 0.20.4 to replace collectionBackgroundColor */
{
attributes: {

31
src/views/gutenberg-blocks/blocks/carousel-collections-list/save.js
View File

@ -25,22 +25,21 @@ export default function ({ attributes }) {
return <div
{ ...blockProps }
data-module="carousel-collections-list"
selected-collections={ JSON.stringify(selectedCollections.map((collection) => { return collection.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-collections-number={ maxCollectionsNumber }
max-collections-per-screen={ maxCollectionsPerScreen }
space-between-collections={ spaceBetweenCollections }
space-around-carousel={ spaceAroundCarousel }
tainacan-api-root={ tainacan_blocks.root }
tainacan-base-url={ tainacan_blocks.base_url }
show-collection-thumbnail={ '' + showCollectionThumbnail }
data-selected-collections={ JSON.stringify(selectedCollections.map((collection) => { return collection.id })) }
data-arrows-position={ arrowsPosition }
data-auto-play={ '' + autoPlay }
data-auto-play-speed={ autoPlaySpeed }
data-loop-slides={ '' + loopSlides }
data-hide-name={ '' + hideName }
data-large-arrows={ '' + largeArrows }
data-arrows-style={ arrowsStyle }
data-image-size={ imageSize }
data-max-collections-number={ maxCollectionsNumber }
data-max-collections-per-screen={ maxCollectionsPerScreen }
data-space-between-collections={ spaceBetweenCollections }
data-space-around-carousel={ spaceAroundCarousel }
data-tainacan-api-root={ tainacan_blocks.root }
data-show-collection-thumbnail={ '' + showCollectionThumbnail }
id={ 'wp-block-tainacan-carousel-collections-list_' + blockId }>
{ content }
</div>

5
src/views/gutenberg-blocks/blocks/carousel-collections-list/style.scss
View File

@ -191,7 +191,7 @@
&>*:first-of-type {
flex-basis: 100%;
@include grid-child(1, 3, 1, 3);
padding-bottom: 100% !important;
// padding-bottom: 100% !important;
}
&>* {
@ -199,12 +199,13 @@
width: 100%;
height: auto;
margin-bottom: 0px;
padding-bottom: 100% !important;
// padding-bottom: 100% !important;
}
img {
object-fit: cover;
object-position: center;
width: 100%;
}
}
}

32
src/views/gutenberg-blocks/blocks/carousel-collections-list/theme.js
View File

@ -2,6 +2,7 @@ import { createApp, h } from 'vue';
import CarouselCollectionsListTheme from './theme.vue';
import { ThumbnailHelperPlugin } from '../../../admin/js/utilities.js';
import VueBlurHash from 'another-vue3-blurhash';
import getDataAttribute from '../../js/compatibility/tainacan-blocks-compat-data-attributes.js';
export default (element) => {
@ -23,22 +24,21 @@ export default (element) => {
render() {
return h(CarouselCollectionsListTheme, {
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,
selectedCollections: JSON.parse(getDataAttribute(block, 'selected-collections', '[]')),
maxItemsNumber: Number(getDataAttribute(block, 'max-collections-number', 12)),
maxCollectionsPerScreen: Number(getDataAttribute(block, 'max-collections-per-screen', 9)),
spaceBetweenCollections: Number(getDataAttribute(block, 'space-between-collections', 32)),
spaceAroundCarousel: Number(getDataAttribute(block, 'space-around-carousel', 50)),
arrowsPosition: getDataAttribute(block, 'arrows-position', 'around'),
autoPlay: getDataAttribute(block, 'auto-play', 'false') == 'true',
largeArrows: getDataAttribute(block, 'large-arrows', 'false') == 'true',
arrowsStyle: getDataAttribute(block, 'arrows-style', 'type-1'),
autoPlaySpeed: Number(getDataAttribute(block, 'auto-play-speed', 3)),
loopSlides: getDataAttribute(block, 'loop-slides', 'false') == 'true',
imageSize: getDataAttribute(block, 'image-size', 'tainacan-medium'),
hideName: getDataAttribute(block, 'hide-name', 'false') == 'true',
showCollectionThumbnail: getDataAttribute(block, 'show-collection-thumbnail', 'false') == 'true',
tainacanApiRoot: getDataAttribute(block, 'tainacan-api-root'),
});
},
mounted() {

30
src/views/gutenberg-blocks/blocks/carousel-collections-list/theme.vue
View File

@ -44,7 +44,7 @@
?
collection.thumbnail['thumbnail'][0]
:
`${tainacanBaseUrl}/assets/images/placeholder_square.png`)
$thumbHelper.getEmptyThumbnailPlaceholder('empty', imageSize))
"
:data-src="
collection.thumbnail && collection.thumbnail[imageSize] && collection.thumbnail[imageSize][0]
@ -55,9 +55,9 @@
?
collection.thumbnail['thumbnail'][0]
:
`${tainacanBaseUrl}/assets/images/placeholder_square.png`)
$thumbHelper.getEmptyThumbnailPlaceholder('empty', imageSize))
"
:alt="collection.name ? collection.name : wp.i18n.__('Thumbnail', 'tainacan')">
:alt="collection.name ? collection.name : wpI18n('Thumbnail', 'tainacan')">
<span v-if="!hideName">{{ collection.name ? collection.name : '' }}</span>
</a>
<a
@ -68,26 +68,26 @@
<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`"
:src="collectionItems[collection.id][0] ? $thumbHelper.getSrc(collectionItems[collection.id][0]['thumbnail'], imageSize, collectionItems[collection.id][0]['document_mimetype']) : $thumbHelper.getEmptyThumbnailPlaceholder('empty', imageSize)"
:srcset="collectionItems[collection.id][0] ? $thumbHelper.getSrcSet(collectionItems[collection.id][0]['thumbnail'], imageSize, collectionItems[collection.id][0]['document_mimetype']) : $thumbHelper.getEmptyThumbnailPlaceholder('empty', imageSize)"
: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' ))"
: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 : wpI18n( '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`"
:src="collectionItems[collection.id][1] ? $thumbHelper.getSrc(collectionItems[collection.id][1]['thumbnail'], imageSize, collectionItems[collection.id][1]['document_mimetype']) : $thumbHelper.getEmptyThumbnailPlaceholder('empty', imageSize)"
:srcset="collectionItems[collection.id][1] ? $thumbHelper.getSrcSet(collectionItems[collection.id][1]['thumbnail'], imageSize, collectionItems[collection.id][1]['document_mimetype']) : $thumbHelper.getEmptyThumbnailPlaceholder('empty', imageSize)"
: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' ))"
: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 : wpI18n( '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`"
:src="collectionItems[collection.id][2] ? $thumbHelper.getSrc(collectionItems[collection.id][2]['thumbnail'], imageSize, collectionItems[collection.id][2]['document_mimetype']) : $thumbHelper.getEmptyThumbnailPlaceholder('empty', imageSize)"
:srcset="collectionItems[collection.id][2] ? $thumbHelper.getSrcSet(collectionItems[collection.id][2]['thumbnail'], imageSize, collectionItems[collection.id][2]['document_mimetype']) : $thumbHelper.getEmptyThumbnailPlaceholder('empty', imageSize)"
: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' ))"
: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 : wpI18n( 'Thumbnail', 'tainacan' ))"
:transition-duration="500" />
</div>
<span v-if="!hideName">{{ collection.name ? collection.name : '' }}</span>
@ -137,7 +137,7 @@
<div
v-else-if="collections.length <= 0 && !isLoading"
class="spinner-container">
{{ wp.i18n.__('No collections found.', 'tainacan') }}
{{ wpI18n('No collections found.', 'tainacan') }}
</div>
</template>
@ -191,7 +191,6 @@ export default {
}
},
created() {
this.apiRoot = (tainacan_blocks && tainacan_blocks.root && !this.tainacanApiRoot) ? tainacan_blocks.root : this.tainacanApiRoot;
this.tainacanAxios = axios.create({ baseURL: this.apiRoot });
@ -205,6 +204,9 @@ export default {
this.swiper.destroy();
},
methods: {
wpI18n(string, context) {
return wp && wp.i18n ? wp.i18n.__(string, context) : string;
},
fetchCollections() {
this.isLoading = true;
this.errorMessage = 'No collections found.';

176
src/views/gutenberg-blocks/blocks/carousel-items-list/deprecated.js
View File

@ -1,6 +1,182 @@
const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
export default [
/* Deprecated during Vue 3 migration to prepend attributes with data- */
{
"attributes": {
"content": {
"type": "array",
"source": "children",
"selector": "div"
},
"collectionId": {
"type": "string",
"default": ""
},
"items": {
"type": "array",
"default": []
},
"isModalOpen": {
"type": "boolean",
"default": false
},
"searchURL": {
"type": "string",
"default": ""
},
"selectedItems": {
"type": "array",
"default": []
},
"itemsRequestSource": {
"type": "string",
"default": ""
},
"maxItemsNumber": {
"type": "number",
"default": 12
},
"maxItemsPerScreen": {
"type": "number",
"default": 7
},
"spaceBetweenItems": {
"type": "number",
"default": 32
},
"spaceAroundCarousel": {
"type": "number",
"default": 50
},
"isLoading": {
"type": "boolean",
"default": false
},
"isLoadingCollection": {
"type": "boolean",
"default": false
},
"loadStrategy": {
"type": "string",
"default": "search"
},
"arrowsPosition": {
"type": "string",
"default": "around"
},
"largeArrows": {
"type": "boolean",
"default": false
},
"arrowsStyle": {
"type": "string",
"default": "type-1"
},
"autoPlay": {
"type": "boolean",
"default": false
},
"autoPlaySpeed": {
"type": "number",
"default": 3
},
"loopSlides": {
"type": "boolean",
"default": false
},
"hideTitle": {
"type": "boolean",
"default": true
},
"showCollectionHeader": {
"type": "boolean",
"default": false
},
"showCollectionLabel": {
"type": "boolean",
"default": false
},
"imageSize": {
"type": "string",
"default": "tainacan-medium"
},
"collection": {
"type": "object",
"default": {}
},
"blockId": {
"type": "string",
"default": ""
},
"collectionBackgroundColor": {
"type": "string",
"default": "#373839"
},
"collectionTextColor": {
"type": "string",
"default": "#ffffff"
}
},
save: function ({ attributes }) {
const {
content,
blockId,
collectionId,
searchURL,
selectedItems,
arrowsPosition,
largeArrows,
arrowsStyle,
loadStrategy,
maxItemsNumber,
maxItemsPerScreen,
spaceBetweenItems,
spaceAroundCarousel,
autoPlay,
autoPlaySpeed,
loopSlides,
hideTitle,
imageSize,
showCollectionHeader,
showCollectionLabel,
collectionBackgroundColor,
collectionTextColor
} = attributes;
// Gets attributes such as style, that are automatically added by the editor hook
const blockProps = useBlockProps.save();
return <div
{ ...blockProps }
data-module="carousel-items-list"
search-url={ searchURL }
selected-items={ JSON.stringify(selectedItems) }
arrows-position={ arrowsPosition }
load-strategy={ loadStrategy }
collection-id={ collectionId }
auto-play={ '' + autoPlay }
auto-play-speed={ autoPlaySpeed }
loop-slides={ '' + loopSlides }
hide-title={ '' + hideTitle }
large-arrows={ '' + largeArrows }
arrows-style={ arrowsStyle }
image-size={ imageSize }
show-collection-header={ '' + showCollectionHeader }
show-collection-label={ '' + showCollectionLabel }
collection-background-color={ collectionBackgroundColor }
collection-text-color={ collectionTextColor }
max-items-number={ maxItemsNumber }
max-items-per-screen={ maxItemsPerScreen }
space-between-items={ spaceBetweenItems }
space-around-carousel={ spaceAroundCarousel }
tainacan-api-root={ tainacan_blocks.root }
tainacan-base-url={ tainacan_blocks.base_url }
id={ 'wp-block-tainacan-carousel-items-list_' + blockId }>
{ content }
</div>
}
},
/* Deprecated on 0.20.4 to replace collectionBackgroundColor */
{
attributes: {

43
src/views/gutenberg-blocks/blocks/carousel-items-list/save.js
View File

@ -32,28 +32,27 @@ export default function ({ attributes }) {
return <div
{ ...blockProps }
data-module="carousel-items-list"
search-url={ searchURL }
selected-items={ JSON.stringify(selectedItems) }
arrows-position={ arrowsPosition }
load-strategy={ loadStrategy }
collection-id={ collectionId }
auto-play={ '' + autoPlay }
auto-play-speed={ autoPlaySpeed }
loop-slides={ '' + loopSlides }
hide-title={ '' + hideTitle }
large-arrows={ '' + largeArrows }
arrows-style={ arrowsStyle }
image-size={ imageSize }
show-collection-header={ '' + showCollectionHeader }
show-collection-label={ '' + showCollectionLabel }
collection-background-color={ collectionBackgroundColor }
collection-text-color={ collectionTextColor }
max-items-number={ maxItemsNumber }
max-items-per-screen={ maxItemsPerScreen }
space-between-items={ spaceBetweenItems }
space-around-carousel={ spaceAroundCarousel }
tainacan-api-root={ tainacan_blocks.root }
tainacan-base-url={ tainacan_blocks.base_url }
data-search-url={ searchURL }
data-selected-items={ JSON.stringify(selectedItems) }
data-arrows-position={ arrowsPosition }
data-load-strategy={ loadStrategy }
data-collection-id={ collectionId }
data-auto-play={ '' + autoPlay }
data-auto-play-speed={ autoPlaySpeed }
data-loop-slides={ '' + loopSlides }
data-hide-title={ '' + hideTitle }
data-large-arrows={ '' + largeArrows }
data-arrows-style={ arrowsStyle }
data-image-size={ imageSize }
data-show-collection-header={ '' + showCollectionHeader }
data-show-collection-label={ '' + showCollectionLabel }
data-collection-background-color={ collectionBackgroundColor }
data-collection-text-color={ collectionTextColor }
data-max-items-number={ maxItemsNumber }
data-max-items-per-screen={ maxItemsPerScreen }
data-space-between-items={ spaceBetweenItems }
data-space-around-carousel={ spaceAroundCarousel }
data-tainacan-api-root={ tainacan_blocks.root }
id={ 'wp-block-tainacan-carousel-items-list_' + blockId }>
{ content }
</div>

59
src/views/gutenberg-blocks/blocks/carousel-items-list/theme.js
View File

@ -1,51 +1,50 @@
import { createApp, h } from 'vue';
import CarouselItemsListTheme from './theme.vue';
import { ThumbnailHelperPlugin } from '../../../admin/js/utilities.js';
import VueBlurHash from 'another-vue3-blurhash';
import getDataAttribute from '../../js/compatibility/tainacan-blocks-compat-data-attributes.js';
export default (element) => {
function renderTainacanItemCarouselBlocks() {
// Gets all divs with content created by our block;
let blocksElements = element ? [ element ] : document.getElementsByClassName('wp-block-tainacan-carousel-items-list');
let blocksElements = element ? [element] : document.getElementsByClassName('wp-block-tainacan-carousel-items-list');
if (blocksElements) {
let blocks = Object.values(blocksElements);
// Checks if this carousel isn't already mounted
blocks = blocks.filter((block) => block.classList && !block.classList.contains('has-mounted'));
// Creates a new Vue Instance to manage each block isolatelly
blocks.forEach((block) => {
const VueCarouselItemsList = createApp( {
render() {
return h(CarouselItemsListTheme, {
const VueCarouselItemsList = createApp({
render() {
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
searchURL: getDataAttribute(block, 'search-url'),
selectedItems: JSON.parse(getDataAttribute(block, 'selected-items', '[]')),
loadStrategy: getDataAttribute(block, 'load-strategy', 'search'),
collectionId: getDataAttribute(block, 'collection-id', undefined),
maxItemsNumber: Number(getDataAttribute(block, 'max-items-number', 12)),
maxItemsPerScreen: Number(getDataAttribute(block, 'max-items-per-screen', 7)),
spaceBetweenItems: Number(getDataAttribute(block, 'space-between-items', 32)),
spaceAroundCarousel: Number(getDataAttribute(block, 'space-around-carousel', 50)),
arrowsPosition: getDataAttribute(block, 'arrows-position', 'around'),
largeArrows: getDataAttribute(block, 'large-arrows', false) == 'true',
arrowsStyle: getDataAttribute(block, 'arrows-style', 'type-1'),
autoPlay: getDataAttribute(block, 'auto-play', false) == 'true',
autoPlaySpeed: Number(getDataAttribute(block, 'auto-play-speed', 3)),
loopSlides: getDataAttribute(block, 'loop-slides', false) == 'true',
hideTitle: getDataAttribute(block, 'hide-title', false) == 'true',
imageSize: getDataAttribute(block, 'image-size', 'tainacan-medium'),
showCollectionHeader: getDataAttribute(block, 'show-collection-header', false) == 'true',
showCollectionLabel: getDataAttribute(block, 'show-collection-label', false) == 'true',
collectionBackgroundColor: getDataAttribute(block, 'collection-background-color', '#373839'),
collectionTextColor: getDataAttribute(block, 'collection-text-color', '#ffffff'),
tainacanApiRoot: getDataAttribute(block, 'tainacan-api-root')
});
},
mounted() {

12
src/views/gutenberg-blocks/blocks/carousel-items-list/theme.vue
View File

@ -23,7 +23,7 @@
<span
v-if="showCollectionLabel"
class="label">
{{ wp.i18n.__('Collection', 'tainacan') }}
{{ wpI18n('Collection', 'tainacan') }}
<br>
</span>
{{ collection && collection.name ? collection.name : '' }}
@ -91,7 +91,7 @@
: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' ))"
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : wpI18n( 'Thumbnail', 'tainacan' ))"
:transition-duration="500" />
<span v-if="!hideTitle">{{ item.title ? item.title : '' }}</span>
</a>
@ -140,7 +140,7 @@
<div
v-else-if="items.length <= 0 && !isLoading"
class="spinner-container">
{{ wp.i18n.__('No items found.', 'tainacan') }}
{{ wpI18n('No items found.', 'tainacan') }}
</div>
</template>
@ -179,8 +179,7 @@ export default {
showCollectionLabel: Boolean,
collectionBackgroundColor: String,
collectionTextColor: String,
tainacanApiRoot: String,
tainacanBaseUrl: String
tainacanApiRoot: String
},
data() {
return {
@ -217,6 +216,9 @@ export default {
this.swiper.destroy();
},
methods: {
wpI18n(string, context) {
return wp && wp.i18n ? wp.i18n.__(string, context) : string;
},
fetchItems() {
this.isLoading = true;

9
src/views/gutenberg-blocks/js/compatibility/tainacan-blocks-compat-data-attributes.js Normal file
View File

@ -0,0 +1,9 @@
// Checks if we have legacy data attributes and returns the correct ones
export default function getDataAttribute(block, key, defaultValue) {
if (block.getAttribute('data-' + key) != undefined)
return block.getAttribute('data-' + key);
else if ( block.attributes[key] != undefined )
return block.attributes[key].value;
else
return defaultValue;
};