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

Logic for loading collections items on editor side.

This commit is contained in:
Mateus Machado Luna 2019-08-15 10:44:55 -03:00
parent 8667fef0ee
commit f4b641e7b3
3 changed files with 55 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -310,35 +310,35 @@
width: calc(16.666% - 32px);
min-width: calc(16.666% - 32px); }
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid {
width: calc(20% - 32px) !important;
min-width: calc(20% - 32px) !important; } }
width: calc(20% - 32px);
min-width: calc(20% - 32px); } }
@media only screen and (max-width: 1452px) {
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
width: calc(20% - 32px);
min-width: calc(20% - 32px); }
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid {
width: calc(25% - 32px) !important;
min-width: calc(25% - 32px) !important; } }
width: calc(25% - 32px);
min-width: calc(25% - 32px); } }
@media only screen and (max-width: 1118px) {
.wp-block-tainacan-carousel-collections-list ul.collections-edit li.collection-list-item {
width: calc(25% - 32px);
min-width: calc(25% - 32px); }
.wp-block-tainacan-carousel-collections-list ul.collections-edit li.collection-list-item.collection-list-item-grid {
width: calc(33.333% - 32px) !important;
min-width: calc(33.333% - 32px) !important; } }
width: calc(33.333% - 32px);
min-width: calc(33.333% - 32px); } }
@media only screen and (max-width: 854px) {
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
width: calc(33.333% - 32px);
min-width: calc(33.333% - 32px); }
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid {
width: calc(50% - 32px) !important;
min-width: calc(50% - 32px) !important; } }
width: calc(50% - 32px);
min-width: calc(50% - 32px); } }
@media only screen and (max-width: 584px) {
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
width: calc(50% - 32px);
min-width: calc(50% - 32px); }
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid {
width: calc(100% - 32px) !important;
min-width: calc(100% - 32px) !important; } }
width: calc(100% - 32px);
min-width: calc(100% - 32px); } }
/*# sourceMappingURL=tainacan-gutenberg-block-carousel-collections-list.css.map */

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

68
src/gutenberg-blocks/tainacan-collections/carousel-collections-list/index.js
View File

@ -124,7 +124,7 @@ registerBlockType('tainacan/carousel-collections-list', {
// Obtains block's client id to render it on save function
setAttributes({ blockId: clientId });
function prepareItem(collection) {
function prepareItem(collection, collectionItems) {
return (
<li
key={ collection.id }
@ -141,43 +141,43 @@ registerBlockType('tainacan/carousel-collections-list', {
<div class="collection-items-grid">
<img
src={
collection.thumbnail && collection.thumbnail['tainacan-medium'][0] && collection.thumbnail['tainacan-medium'][0]
collectionItems[0].thumbnail && collectionItems[0].thumbnail['tainacan-medium'][0] && collectionItems[0].thumbnail['tainacan-medium'][0]
?
collection.thumbnail['tainacan-medium'][0]
collectionItems[0].thumbnail['tainacan-medium'][0]
:
(collection.thumbnail && collection.thumbnail['thumbnail'][0] && collection.thumbnail['thumbnail'][0]
(collectionItems[0].thumbnail && collectionItems[0].thumbnail['thumbnail'][0] && collectionItems[0].thumbnail['thumbnail'][0]
?
collection.thumbnail['thumbnail'][0]
collectionItems[0].thumbnail['thumbnail'][0]
:
`${tainacan_plugin.base_url}/admin/images/placeholder_square.png`)
}
alt={ collection.name ? collection.name : __( 'Thumbnail', 'tainacan' ) }/>
alt={ collectionItems[0].name ? collectionItems[0].name : __( 'Thumbnail', 'tainacan' ) }/>
<img
src={
collection.thumbnail && collection.thumbnail['tainacan-medium'][0] && collection.thumbnail['tainacan-medium'][0]
collectionItems[1].thumbnail && collectionItems[1].thumbnail['tainacan-medium'][0] && collectionItems[1].thumbnail['tainacan-medium'][0]
?
collection.thumbnail['tainacan-medium'][0]
collectionItems[1].thumbnail['tainacan-medium'][0]
:
(collection.thumbnail && collection.thumbnail['thumbnail'][0] && collection.thumbnail['thumbnail'][0]
(collectionItems[1].thumbnail && collectionItems[1].thumbnail['thumbnail'][0] && collectionItems[1].thumbnail['thumbnail'][0]
?
collection.thumbnail['thumbnail'][0]
collectionItems[1].thumbnail['thumbnail'][0]
:
`${tainacan_plugin.base_url}/admin/images/placeholder_square.png`)
}
alt={ collection.name ? collection.name : __( 'Thumbnail', 'tainacan' ) }/>
alt={ collectionItems[1].name ? collectionItems[1].name : __( 'Thumbnail', 'tainacan' ) }/>
<img
src={
collection.thumbnail && collection.thumbnail['tainacan-medium'][0] && collection.thumbnail['tainacan-medium'][0]
collectionItems[2].thumbnail && collectionItems[2].thumbnail['tainacan-medium'][0] && collectionItems[2].thumbnail['tainacan-medium'][0]
?
collection.thumbnail['tainacan-medium'][0]
collectionItems[2].thumbnail['tainacan-medium'][0]
:
(collection.thumbnail && collection.thumbnail['thumbnail'][0] && collection.thumbnail['thumbnail'][0]
(collectionItems[2].thumbnail && collectionItems[2].thumbnail['thumbnail'][0] && collectionItems[2].thumbnail['thumbnail'][0]
?
collection.thumbnail['thumbnail'][0]
collectionItems[2].thumbnail['thumbnail'][0]
:
`${tainacan_plugin.base_url}/admin/images/placeholder_square.png`)
}
alt={ collection.name ? collection.name : __( 'Thumbnail', 'tainacan' ) }/>
alt={ collectionItems[2].name ? collectionItems[2].name : __( 'Thumbnail', 'tainacan' ) }/>
</div>
:
<img
@ -218,15 +218,35 @@ registerBlockType('tainacan/carousel-collections-list', {
tainacan.get(endpoint, { cancelToken: itemsRequestSource.token })
.then(response => {
for (let collection of response.data)
if (showCollectionThumbnail) {
collections.push(prepareItem(collection));
setAttributes({
content: <div></div>,
collections: collections,
isLoading: false,
itemsRequestSource: itemsRequestSource
});
setAttributes({
content: <div></div>,
collections: collections,
isLoading: false,
itemsRequestSource: itemsRequestSource
});
} else {
let promises = [];
for (let collection of response.data) {
promises.push(
tainacan.get('/collection/' + collection.id + '/items?perpage=3&fetch_only=name,url,thumbnail')
.then(response => { return({ collection: collection, collectionItems: response.data.items }) })
.catch((error) => console.log(error))
);
}
axios.all(promises).then((results) => {
for (let result of results) {
collections.push(prepareItem(result.collection, result.collectionItems));
}
setAttributes({
content: <div></div>,
collections: collections,
isLoading: false,
itemsRequestSource: itemsRequestSource
});
})
}
});
}