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: 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-collections-list .tainacan-carousel .swiper .swiper-slide.collection-list-item-grid .collection-items-grid > * { .wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide.collection-list-item-grid .collection-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-collections-list .tainacan-carousel .swiper .swiper-slide.collection-list-item-grid .collection-items-grid img { .wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide.collection-list-item-grid .collection-items-grid img {
object-fit: cover; object-fit: cover;
object-position: center; } object-position: center;
width: 100%; }
.wp-block-tainacan-carousel-collections-list .preview-warning { .wp-block-tainacan-carousel-collections-list .preview-warning {
width: 100%; width: 100%;
font-size: 0.875rem; 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 ); 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"
},
"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 */ /* Deprecated on 0.20.4 to replace collectionBackgroundColor */
{ {
attributes: { attributes: {

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

@ -25,22 +25,21 @@ export default function ({ attributes }) {
return <div return <div
{ ...blockProps } { ...blockProps }
data-module="carousel-collections-list" data-module="carousel-collections-list"
selected-collections={ JSON.stringify(selectedCollections.map((collection) => { return collection.id })) } data-selected-collections={ JSON.stringify(selectedCollections.map((collection) => { return collection.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-collections-number={ maxCollectionsNumber } data-max-collections-number={ maxCollectionsNumber }
max-collections-per-screen={ maxCollectionsPerScreen } data-max-collections-per-screen={ maxCollectionsPerScreen }
space-between-collections={ spaceBetweenCollections } data-space-between-collections={ spaceBetweenCollections }
space-around-carousel={ spaceAroundCarousel } data-space-around-carousel={ spaceAroundCarousel }
tainacan-api-root={ tainacan_blocks.root } data-tainacan-api-root={ tainacan_blocks.root }
tainacan-base-url={ tainacan_blocks.base_url } data-show-collection-thumbnail={ '' + showCollectionThumbnail }
show-collection-thumbnail={ '' + showCollectionThumbnail }
id={ 'wp-block-tainacan-carousel-collections-list_' + blockId }> id={ 'wp-block-tainacan-carousel-collections-list_' + blockId }>
{ content } { content }
</div> </div>

5
src/views/gutenberg-blocks/blocks/carousel-collections-list/style.scss
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%;
} }
} }
} }

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 CarouselCollectionsListTheme 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,22 +24,21 @@ export default (element) => {
render() { render() {
return h(CarouselCollectionsListTheme, { return h(CarouselCollectionsListTheme, {
blockId: block.id, blockId: block.id,
selectedCollections: block.attributes['selected-collections'] != undefined ? JSON.parse(block.attributes['selected-collections'].value) : undefined, selectedCollections: JSON.parse(getDataAttribute(block, 'selected-collections', '[]')),
maxItemsNumber: block.attributes['max-collections-number'] != undefined ? Number(block.attributes['max-collections-number'].value) : 12, maxItemsNumber: Number(getDataAttribute(block, 'max-collections-number', 12)),
maxCollectionsPerScreen: block.attributes['max-collections-per-screen'] != undefined ? Number(block.attributes['max-collections-per-screen'].value) : 6, maxCollectionsPerScreen: Number(getDataAttribute(block, 'max-collections-per-screen', 9)),
spaceBetweenCollections: block.attributes['space-between-collections'] != undefined ? Number(block.attributes['space-between-collections'].value) : 32, spaceBetweenCollections: Number(getDataAttribute(block, 'space-between-collections', 32)),
spaceAroundCarousel: block.attributes['space-around-carousel'] != undefined ? Number(block.attributes['space-around-carousel'].value) : 50, spaceAroundCarousel: Number(getDataAttribute(block, 'space-around-carousel', 50)),
arrowsPosition: block.attributes['arrows-position'] != undefined ? block.attributes['arrows-position'].value : undefined, arrowsPosition: getDataAttribute(block, 'arrows-position', 'around'),
autoPlay: block.attributes['auto-play'] != undefined ? block.attributes['auto-play'].value == 'true' : false, autoPlay: getDataAttribute(block, 'auto-play', 'false') == 'true',
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'),
autoPlaySpeed: block.attributes['auto-play-speed'] != undefined ? Number(block.attributes['auto-play-speed'].value) : 3, autoPlaySpeed: Number(getDataAttribute(block, 'auto-play-speed', 3)),
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',
showCollectionThumbnail: block.attributes['show-collection-thumbnail'] != undefined ? block.attributes['show-collection-thumbnail'].value == 'true' : false, showCollectionThumbnail: getDataAttribute(block, 'show-collection-thumbnail', 'false') == 'true',
tainacanApiRoot: block.attributes['tainacan-api-root'] != undefined ? block.attributes['tainacan-api-root'].value : undefined, tainacanApiRoot: getDataAttribute(block, 'tainacan-api-root'),
tainacanBaseUrl: block.attributes['tainacan-base-url'] != undefined ? block.attributes['tainacan-base-url'].value : undefined,
}); });
}, },
mounted() { mounted() {

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

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

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

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

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

@ -1,15 +1,15 @@
import { createApp, h } from 'vue'; import { createApp, h } from 'vue';
import CarouselItemsListTheme from './theme.vue'; import CarouselItemsListTheme 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) => {
function renderTainacanItemCarouselBlocks() { function renderTainacanItemCarouselBlocks() {
// Gets all divs with content created by our block; // 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) { if (blocksElements) {
let blocks = Object.values(blocksElements); let blocks = Object.values(blocksElements);
@ -20,32 +20,31 @@ export default (element) => {
// Creates a new Vue Instance to manage each block isolatelly // Creates a new Vue Instance to manage each block isolatelly
blocks.forEach((block) => { blocks.forEach((block) => {
const VueCarouselItemsList = createApp( { const VueCarouselItemsList = createApp({
render() { render() {
return h(CarouselItemsListTheme, { return h(CarouselItemsListTheme, {
blockId: block.id, blockId: block.id,
searchURL: block.attributes['search-url'] != undefined ? block.attributes['search-url'].value : undefined, searchURL: getDataAttribute(block, 'search-url'),
selectedItems: block.attributes['selected-items'] != undefined ? JSON.parse(block.attributes['selected-items'].value) : [], selectedItems: JSON.parse(getDataAttribute(block, 'selected-items', '[]')),
loadStrategy: block.attributes['load-strategy'] != undefined ? block.attributes['load-strategy'].value : 'search', loadStrategy: getDataAttribute(block, 'load-strategy', 'search'),
collectionId: block.attributes['collection-id'] != undefined ? block.attributes['collection-id'].value : undefined, collectionId: getDataAttribute(block, 'collection-id', undefined),
maxItemsNumber: block.attributes['max-items-number'] != undefined ? Number(block.attributes['max-items-number'].value) : 12, maxItemsNumber: Number(getDataAttribute(block, 'max-items-number', 12)),
maxItemsPerScreen: block.attributes['max-items-per-screen'] != undefined ? Number(block.attributes['max-items-per-screen'].value) : 7, maxItemsPerScreen: Number(getDataAttribute(block, 'max-items-per-screen', 7)),
spaceBetweenItems: block.attributes['space-between-items'] != undefined ? Number(block.attributes['space-between-items'].value) : 32, spaceBetweenItems: Number(getDataAttribute(block, 'space-between-items', 32)),
spaceAroundCarousel: block.attributes['space-around-carousel'] != undefined ? Number(block.attributes['space-around-carousel'].value) : 50, spaceAroundCarousel: Number(getDataAttribute(block, 'space-around-carousel', 50)),
arrowsPosition: block.attributes['arrows-position'] != undefined ? block.attributes['arrows-position'].value : 'around', arrowsPosition: getDataAttribute(block, 'arrows-position', 'around'),
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'),
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)),
loopSlides: block.attributes['loop-slides'] != undefined ? block.attributes['loop-slides'].value == 'true' : false, loopSlides: getDataAttribute(block, 'loop-slides', false) == 'true',
hideTitle: block.attributes['hide-title'] != undefined ? block.attributes['hide-title'].value == 'true' : false, hideTitle: getDataAttribute(block, 'hide-title', false) == 'true',
imageSize: block.attributes['image-size'] != undefined ? block.attributes['image-size'].value : 'tainacan-medium', imageSize: getDataAttribute(block, 'image-size', 'tainacan-medium'),
showCollectionHeader: block.attributes['show-collection-header'] != undefined ? block.attributes['show-collection-header'].value == 'true' : false, showCollectionHeader: getDataAttribute(block, 'show-collection-header', false) == 'true',
showCollectionLabel: block.attributes['show-collection-label'] != undefined ? block.attributes['show-collection-label'].value == 'true' : false, showCollectionLabel: getDataAttribute(block, 'show-collection-label', false) == 'true',
collectionBackgroundColor: block.attributes['collection-background-color'] != undefined ? block.attributes['collection-background-color'].value : '#373839', collectionBackgroundColor: getDataAttribute(block, 'collection-background-color', '#373839'),
collectionTextColor: block.attributes['collection-text-color'] != undefined ? block.attributes['collection-text-color'].value : '#ffffff', collectionTextColor: getDataAttribute(block, 'collection-text-color', '#ffffff'),
tainacanApiRoot: block.attributes['tainacan-api-root'] != undefined ? block.attributes['tainacan-api-root'].value : undefined, tainacanApiRoot: getDataAttribute(block, 'tainacan-api-root')
tainacanBaseUrl: block.attributes['tainacan-base-url'] != undefined ? block.attributes['tainacan-base-url'].value : undefined
}); });
}, },
mounted() { mounted() {

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

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