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

Merge pull request #707 from tainacan/feature/706 

Adds option to choose image sizes on some blocks. Feature/706
This commit is contained in:
Mateus Machado Luna 2022-06-02 11:47:54 -03:00 committed by GitHub
parent c8f42c43b6 1ecb9915de
commit e84c4a0d2e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 869 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/classes/theme-helper/class-tainacan-theme-helper.php
View File

@ -914,7 +914,7 @@ class Theme_Helper {
* @type integer $auto_play_speed The time in s to translate to the next slide automatically * @type integer $auto_play_speed The time in s to translate to the next slide automatically
* @type bool $loop_slides Should slides loop when reached the end of the Carousel? * @type bool $loop_slides Should slides loop when reached the end of the Carousel?
* @type bool $hide_title Should the title of the items be displayed? * @type bool $hide_title Should the title of the items be displayed?
* @type bool $crop_images_to_square Should it use the `tainacan-medium-size` instead of the `tainacan-medium-large-size`? * @type string $image_size Item image size. Defaults to 'tainacan-medium'
* @type bool $show_collection_header Should it display a small version of the collection header? * @type bool $show_collection_header Should it display a small version of the collection header?
* @type bool $show_collection_label Should it displar a 'Collection' label before the collection name on the collection header? * @type bool $show_collection_label Should it displar a 'Collection' label before the collection name on the collection header?
* @type string $collection_background_color Color of the collection header background * @type string $collection_background_color Color of the collection header background
@ -937,7 +937,7 @@ class Theme_Helper {
'auto_play_speed' => 3, 'auto_play_speed' => 3,
'loop_slides' => false, 'loop_slides' => false,
'hide_title' => false, 'hide_title' => false,
'crop_images_to_square' => true, 'image_size' => 'tainacan-medium',
'show_collection_header' => false, 'show_collection_header' => false,
'show_collection_label' => false, 'show_collection_label' => false,
'collection_background_color' => '#454647', 'collection_background_color' => '#454647',
@ -948,6 +948,11 @@ class Theme_Helper {
); );
$args = wp_parse_args($args, $defaults); $args = wp_parse_args($args, $defaults);
/* Compatibility with previous version */
if ( isset($args['crop_images_to_square ']) && !$args['crop_images_to_square'] ) {
$args['image_size'] = 'tainacan-medium-full';
}
$props = ' '; $props = ' ';
// Always pass the class needed by Vue to mount the component; // Always pass the class needed by Vue to mount the component;
@ -988,7 +993,7 @@ class Theme_Helper {
* @type string $show_name Show the item title * @type string $show_name Show the item title
* @type string $show_image Show the item thumbnail * @type string $show_image Show the item thumbnail
* @type string $layout Either 'grid', 'list' or 'mosaic' * @type string $layout Either 'grid', 'list' or 'mosaic'
* @type string $crop_images_to_square Force images shape to be squared * @type string $image_size Item image size. Defaults to 'tainacan-medium'
* @type bool $show_collection_header Should it display a small version of the collection header? * @type bool $show_collection_header Should it display a small version of the collection header?
* @type bool $show_collection_label Should it displar a 'Collection' label before the collection name on the collection header? * @type bool $show_collection_label Should it displar a 'Collection' label before the collection name on the collection header?
* @type string $collection_background_color Color of the collection header background * @type string $collection_background_color Color of the collection header background
@ -1015,7 +1020,7 @@ class Theme_Helper {
'show_name' => true, 'show_name' => true,
'show_image' => true, 'show_image' => true,
'layout' => 'grid', 'layout' => 'grid',
'crop_images_to_square' => true, 'image_size' => 'tainacan-medium',
'show_collection_header' => false, 'show_collection_header' => false,
'show_collection_label' => false, 'show_collection_label' => false,
'collection_background_color' => '#454647', 'collection_background_color' => '#454647',
@ -1032,6 +1037,11 @@ class Theme_Helper {
); );
$args = wp_parse_args($args, $defaults); $args = wp_parse_args($args, $defaults);
/* Compatibility with previous version */
if ( isset($args['crop_images_to_square ']) && !$args['crop_images_to_square'] ) {
$args['image_size'] = 'tainacan-medium-full';
}
$props = ' '; $props = ' ';
// Always pass the class needed by Vue to mount the component; // Always pass the class needed by Vue to mount the component;

2
src/classes/theme-helper/template-tags.php
View File

@ -1039,7 +1039,7 @@ function tainacan_get_the_mime_type_icon($mime_type, $image_size = 'medium') {
* @type integer $auto_play_speed The time in s to translate to the next slide automatically * @type integer $auto_play_speed The time in s to translate to the next slide automatically
* @type bool $loop_slides Should slides loop when reached the end of the Carousel? * @type bool $loop_slides Should slides loop when reached the end of the Carousel?
* @type bool $hide_title Should the title of the items be displayed? * @type bool $hide_title Should the title of the items be displayed?
* @type bool $crop_images_to_square Should it use the `tainacan-medium-size` instead of the `tainacan-medium-large-size`? * @type string $image_size Item image size. Defaults to 'tainacan-medium'
* @type bool $show_collection_header Should it display a small version of the collection header? * @type bool $show_collection_header Should it display a small version of the collection header?
* @type bool $show_collection_label Should it displar a 'Collection' label before the collection name on the collection header? * @type bool $show_collection_label Should it displar a 'Collection' label before the collection name on the collection header?
* @type string $collection_background_color Color of the collection header background * @type string $collection_background_color Color of the collection header background

9
src/tainacan.php
View File

@ -36,6 +36,15 @@ add_action( 'after_setup_theme', function() {
add_image_size( 'tainacan-medium', 275, 275, true ); add_image_size( 'tainacan-medium', 275, 275, true );
add_image_size( 'tainacan-medium-full', 205, 1500 ); add_image_size( 'tainacan-medium-full', 205, 1500 );
} ); } );
// This enables Tainacan media sizes in the admin interface, including Gutenberg blocks
add_filter( 'image_size_names_choose', function ( $sizes ) {
return array_merge( $sizes, array(
'tainacan-small' => __( 'Tainacan small (40x40 - cropped)', 'tainacan' ),
'tainacan-medium' => __( 'Tainacan medium (275x275 - cropped)', 'tainacan' ),
'tainacan-medium-full' => __( 'Tainacan medium full (205x1500 - not cropped)', 'tainacan' )
) );
} );
add_action('init', ['Tainacan\Migrations', 'run_migrations']); add_action('init', ['Tainacan\Migrations', 'run_migrations']);

48
src/views/gutenberg-blocks/blocks/carousel-collections-list/block.json
View File

@ -33,91 +33,91 @@
"selector": "div" "selector": "div"
}, },
"collections": { "collections": {
"type": "Array", "type": "array",
"default": [] "default": []
}, },
"isModalOpen": { "isModalOpen": {
"type": "Boolean", "type": "boolean",
"default": false "default": false
}, },
"selectedCollections": { "selectedCollections": {
"type": "Array", "type": "array",
"default": [] "default": []
}, },
"itemsRequestSource": { "itemsRequestSource": {
"type": "String", "type": "string",
"default": false "default": false
}, },
"maxCollectionsNumber": { "maxCollectionsNumber": {
"type": "Number", "type": "number",
"value": false "value": false
}, },
"maxCollectionsPerScreen": { "maxCollectionsPerScreen": {
"type": "Number", "type": "number",
"value": 6 "value": 6
}, },
"spaceBetweenCollections": { "spaceBetweenCollections": {
"type": "Number", "type": "number",
"value": 32 "value": 32
}, },
"spaceAroundCarousel": { "spaceAroundCarousel": {
"type": "Number", "type": "number",
"value": 50 "value": 50
}, },
"isLoading": { "isLoading": {
"type": "Boolean", "type": "boolean",
"value": false "value": false
}, },
"isLoadingCollection": { "isLoadingCollection": {
"type": "Boolean", "type": "boolean",
"value": false "value": false
}, },
"arrowsPosition": { "arrowsPosition": {
"type": "String", "type": "string",
"value": "around" "value": "around"
}, },
"largeArrows": { "largeArrows": {
"type": "Boolean", "type": "boolean",
"value": false "value": false
}, },
"arrowsStyle": { "arrowsStyle": {
"type": "String", "type": "string",
"value": "type-1" "value": "type-1"
}, },
"autoPlay": { "autoPlay": {
"type": "Boolean", "type": "boolean",
"value": false "value": false
}, },
"autoPlaySpeed": { "autoPlaySpeed": {
"type": "Number", "type": "number",
"value": 3 "value": 3
}, },
"loopSlides": { "loopSlides": {
"type": "Boolean", "type": "boolean",
"value": false "value": false
}, },
"hideName": { "hideName": {
"type": "Boolean", "type": "boolean",
"value": true "value": true
}, },
"showCollectionThumbnail": { "showCollectionThumbnail": {
"type": "Boolean", "type": "boolean",
"value": false "value": false
}, },
"cropImagesToSquare": { "imageSize": {
"type": "Boolean", "type": "string",
"value": true "value": "tainacan-medium"
}, },
"blockId": { "blockId": {
"type": "String", "type": "string",
"default": "" "default": ""
}, },
"collectionBackgroundColor": { "collectionBackgroundColor": {
"type": "String", "type": "string",
"default": "#454647" "default": "#454647"
}, },
"collectionTextColor": { "collectionTextColor": {
"type": "String", "type": "string",
"default": "#ffffff" "default": "#ffffff"
} }
}, },

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

@ -1,6 +1,157 @@
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 on 0.19 to replace cropImagesToSquare by imageSize feature */
{
migrate( attributes ) {
if (attributes.cropImagesToSquare == true)
attributes.imageSize = 'tainacan-medium';
else
attributes.imageSize = 'tainacan-medium-full';
return attributes;
},
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",
"value": false
},
"maxCollectionsPerScreen": {
"type": "Number",
"value": 6
},
"spaceBetweenCollections": {
"type": "Number",
"value": 32
},
"spaceAroundCarousel": {
"type": "Number",
"value": 50
},
"isLoading": {
"type": "Boolean",
"value": false
},
"isLoadingCollection": {
"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
},
"showCollectionThumbnail": {
"type": "Boolean",
"value": false
},
"cropImagesToSquare": {
"type": "Boolean",
"value": true
},
"blockId": {
"type": "String",
"default": ""
},
"collectionBackgroundColor": {
"type": "String",
"default": "#454647"
},
"collectionTextColor": {
"type": "String",
"default": "#ffffff"
}
},
save: function ({ attributes, className }) {
const {
content,
blockId,
selectedCollections,
arrowsPosition,
largeArrows,
arrowsStyle,
cropImagesToSquare,
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 = tainacan_blocks.wp_version < '5.6' ? { className: className } : 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 }
crop-images-to-square={ '' + cropImagesToSquare }
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 Tainacan 0.18.6 due to arrowsStyle option */ /* Deprecated on Tainacan 0.18.6 due to arrowsStyle option */
{ {
"attributes": { "attributes": {

71
src/views/gutenberg-blocks/blocks/carousel-collections-list/edit.js
View File

@ -1,9 +1,12 @@
const { RangeControl, Spinner, Button, BaseControl, ToggleControl, SelectControl, Placeholder, IconButton, PanelBody } = wp.components; const { RangeControl, Spinner, Button, BaseControl, ToggleControl, SelectControl, Placeholder, IconButton, PanelBody } = wp.components;
const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor ); const { InspectorControls, BlockControls, useBlockProps, store } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
const { __ } = wp.i18n; const { __ } = wp.i18n;
const { useSelect } = wp.data;
import { map, pick } from 'lodash';
import CarouselCollectionsModal from './carousel-collections-modal.js'; import CarouselCollectionsModal from './carousel-collections-modal.js';
import tainacan from '../../js/axios.js'; import tainacan from '../../js/axios.js';
import axios from 'axios'; import axios from 'axios';
@ -24,7 +27,7 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
selectedCollections, selectedCollections,
largeArrows, largeArrows,
arrowsStyle, arrowsStyle,
cropImagesToSquare, imageSize,
maxCollectionsPerScreen, maxCollectionsPerScreen,
spaceBetweenCollections, spaceBetweenCollections,
spaceAroundCarousel, spaceAroundCarousel,
@ -48,13 +51,30 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
maxCollectionsPerScreen = 6; maxCollectionsPerScreen = 6;
setAttributes({ maxCollectionsPerScreen: maxCollectionsPerScreen }); setAttributes({ maxCollectionsPerScreen: maxCollectionsPerScreen });
} }
if (cropImagesToSquare === undefined) { if (imageSize === undefined) {
cropImagesToSquare = true; imageSize = 'tainacan-medium';
setAttributes({ cropImagesToSquare: cropImagesToSquare }); setAttributes({ imageSize: imageSize });
} }
const thumbHelper = ThumbnailHelperFunctions(); const thumbHelper = ThumbnailHelperFunctions();
// Get available image sizes
const { imageSizes } = useSelect(
( select ) => {
const { getSettings } = select( store );
const settings = pick( getSettings(), [
'imageSizes'
] );
return settings
},
[ clientId ]
);
const imageSizeOptions = map(
imageSizes,
( { name, slug } ) => ( { value: slug, label: name } )
);
function prepareItem(collection, collectionItems) { function prepareItem(collection, collectionItems) {
return ( return (
<li <li
@ -77,24 +97,24 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
{ ( !showCollectionThumbnail && Array.isArray(collectionItems) ) ? { ( !showCollectionThumbnail && Array.isArray(collectionItems) ) ?
<div class="collection-items-grid"> <div class="collection-items-grid">
<img <img
src={ collectionItems[0] ? thumbHelper.getSrc(collectionItems[0]['thumbnail'], 'tainacan-medium', collectionItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` } src={ collectionItems[0] ? thumbHelper.getSrc(collectionItems[0]['thumbnail'], imageSize, collectionItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
srcSet={ collectionItems[0] ? thumbHelper.getSrcSet(collectionItems[0]['thumbnail'], 'tainacan-medium', collectionItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` } srcSet={ collectionItems[0] ? thumbHelper.getSrcSet(collectionItems[0]['thumbnail'], imageSize, collectionItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
alt={ collectionItems[0] && collectionItems[0].thumbnail_alt ? collectionItems[0].thumbnail_alt : (collectionItems[0] && collectionItems[0].name ? collectionItems[0].name : __( 'Thumbnail', 'tainacan' )) } /> alt={ collectionItems[0] && collectionItems[0].thumbnail_alt ? collectionItems[0].thumbnail_alt : (collectionItems[0] && collectionItems[0].name ? collectionItems[0].name : __( 'Thumbnail', 'tainacan' )) } />
<img <img
src={ collectionItems[1] ? thumbHelper.getSrc(collectionItems[1]['thumbnail'], 'tainacan-medium', collectionItems[1]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` } src={ collectionItems[1] ? thumbHelper.getSrc(collectionItems[1]['thumbnail'], imageSize, collectionItems[1]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
srcSet={ collectionItems[1] ? thumbHelper.getSrcSet(collectionItems[1]['thumbnail'], 'tainacan-medium', collectionItems[1]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` } srcSet={ collectionItems[1] ? thumbHelper.getSrcSet(collectionItems[1]['thumbnail'], imageSize, collectionItems[1]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
alt={ collectionItems[1] && collectionItems[1].thumbnail_alt ? collectionItems[1].thumbnail_alt : (collectionItems[1] && collectionItems[1].name ? collectionItems[1].name : __( 'Thumbnail', 'tainacan' )) } /> alt={ collectionItems[1] && collectionItems[1].thumbnail_alt ? collectionItems[1].thumbnail_alt : (collectionItems[1] && collectionItems[1].name ? collectionItems[1].name : __( 'Thumbnail', 'tainacan' )) } />
<img <img
src={ collectionItems[2] ? thumbHelper.getSrc(collectionItems[2]['thumbnail'], 'tainacan-medium', collectionItems[2]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` } src={ collectionItems[2] ? thumbHelper.getSrc(collectionItems[2]['thumbnail'], imageSize, collectionItems[2]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
srcSet={ collectionItems[2] ? thumbHelper.getSrcSet(collectionItems[2]['thumbnail'], 'tainacan-medium', collectionItems[2]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` } srcSet={ collectionItems[2] ? thumbHelper.getSrcSet(collectionItems[2]['thumbnail'], imageSize, collectionItems[2]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
alt={ collectionItems[2] && collectionItems[2].thumbnail_alt ? collectionItems[2].thumbnail_alt : (collectionItems[2] && collectionItems[2].name ? collectionItems[2].name : __( 'Thumbnail', 'tainacan' )) } /> alt={ collectionItems[2] && collectionItems[2].thumbnail_alt ? collectionItems[2].thumbnail_alt : (collectionItems[2] && collectionItems[2].name ? collectionItems[2].name : __( 'Thumbnail', 'tainacan' )) } />
</div> </div>
: :
<img <img
src={ src={
collection.thumbnail && collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0] && collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0] collection.thumbnail && collection.thumbnail[imageSize] && collection.thumbnail[imageSize][0]
? ?
collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0] collection.thumbnail[imageSize][0]
: :
(collection.thumbnail && collection.thumbnail['thumbnail'][0] && collection.thumbnail['thumbnail'][0] (collection.thumbnail && collection.thumbnail['thumbnail'][0] && collection.thumbnail['thumbnail'][0]
? ?
@ -237,7 +257,7 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
</BaseControl> </BaseControl>
<RangeControl <RangeControl
label={ __('Maximum collections per slide on a wide screen', 'tainacan') } label={ __('Maximum collections per slide on a wide screen', 'tainacan') }
help={ (showCollectionThumbnail && maxCollectionsPerScreen <= 4) ? __('Warning: with such a small number of collections per slide, the image size is greater, thus the cropped version of the thumbnail won\'t be used.', 'tainacan') : null } help={ (showCollectionThumbnail && maxCollectionsPerScreen <= 4) ? __('Warning: with such a small number of collections per slide, the slide item is larger, thus you must also set a larger image size.', 'tainacan') : null }
value={ maxCollectionsPerScreen ? maxCollectionsPerScreen : 6 } value={ maxCollectionsPerScreen ? maxCollectionsPerScreen : 6 }
onChange={ ( aMaxCollectionsPerScreen ) => { onChange={ ( aMaxCollectionsPerScreen ) => {
maxCollectionsPerScreen = aMaxCollectionsPerScreen; maxCollectionsPerScreen = aMaxCollectionsPerScreen;
@ -247,19 +267,16 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
min={ 1 } min={ 1 }
max={ 9 } max={ 9 }
/> />
{ showCollectionThumbnail ? <SelectControl
<ToggleControl label={__('Image size', 'tainacan')}
label={__('Crop Images', 'tainacan')} value={ imageSize }
help={ cropImagesToSquare && maxCollectionsPerScreen > 4 ? __('Do not use square cropeed version of the collection thumbnail.', 'tainacan') : __('Toggle to use square cropped version of the collection thumbnail.', 'tainacan') } options={ imageSizeOptions }
checked={ cropImagesToSquare && maxCollectionsPerScreen > 4 } onChange={ ( anImageSize ) => {
onChange={ ( isChecked ) => { imageSize = anImageSize;
cropImagesToSquare = isChecked; setAttributes({ imageSize: imageSize });
setAttributes({ cropImagesToSquare: cropImagesToSquare }); setContent();
setContent(); }}
} />
}
/>
: null }
<RangeControl <RangeControl
label={ __('Space between each collection', 'tainacan') } label={ __('Space between each collection', 'tainacan') }
value={ !isNaN(spaceBetweenCollections) ? spaceBetweenCollections : 32 } value={ !isNaN(spaceBetweenCollections) ? spaceBetweenCollections : 32 }

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

@ -8,7 +8,7 @@ export default function ({ attributes, className }) {
arrowsPosition, arrowsPosition,
largeArrows, largeArrows,
arrowsStyle, arrowsStyle,
cropImagesToSquare, imageSize,
maxCollectionsPerScreen, maxCollectionsPerScreen,
maxCollectionsNumber, maxCollectionsNumber,
spaceBetweenCollections, spaceBetweenCollections,
@ -33,7 +33,7 @@ export default function ({ attributes, className }) {
hide-name={ '' + hideName } hide-name={ '' + hideName }
large-arrows={ '' + largeArrows } large-arrows={ '' + largeArrows }
arrows-style={ arrowsStyle } arrows-style={ arrowsStyle }
crop-images-to-square={ '' + cropImagesToSquare } image-size={ imageSize }
max-collections-number={ maxCollectionsNumber } max-collections-number={ maxCollectionsNumber }
max-collections-per-screen={ maxCollectionsPerScreen } max-collections-per-screen={ maxCollectionsPerScreen }
space-between-collections={ spaceBetweenCollections } space-between-collections={ spaceBetweenCollections }

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

@ -36,7 +36,7 @@ export default (element) => {
maxCollectionsPerScreen: 6, maxCollectionsPerScreen: 6,
spaceBetweenCollections: 32, spaceBetweenCollections: 32,
spaceAroundCarousel: 50, spaceAroundCarousel: 50,
cropImagesToSquare: true, imageSize: 'tainacan-medium',
loopSlides: false, loopSlides: false,
hideName: true, hideName: true,
showCollectionThumbnail: false, showCollectionThumbnail: false,
@ -57,7 +57,7 @@ export default (element) => {
loopSlides: this.loopSlides, loopSlides: this.loopSlides,
largeArrows: this.largeArrows, largeArrows: this.largeArrows,
arrowsStyle: this.arrowsStyle, arrowsStyle: this.arrowsStyle,
cropImagesToSquare: this.cropImagesToSquare, imageSize: this.imageSize,
maxCollectionsPerScreen: this.maxCollectionsPerScreen, maxCollectionsPerScreen: this.maxCollectionsPerScreen,
spaceBetweenCollections: this.spaceBetweenCollections, spaceBetweenCollections: this.spaceBetweenCollections,
spaceAroundCarousel: this.spaceAroundCarousel, spaceAroundCarousel: this.spaceAroundCarousel,
@ -83,7 +83,7 @@ export default (element) => {
this.arrowsStyle = this.$el.attributes['arrows-style'] != undefined ? this.$el.attributes['arrows-style'].value : undefined; this.arrowsStyle = this.$el.attributes['arrows-style'] != undefined ? this.$el.attributes['arrows-style'].value : undefined;
this.autoPlaySpeed = this.$el.attributes['auto-play-speed'] != undefined ? this.$el.attributes['auto-play-speed'].value : 3; this.autoPlaySpeed = this.$el.attributes['auto-play-speed'] != undefined ? this.$el.attributes['auto-play-speed'].value : 3;
this.loopSlides = this.$el.attributes['loop-slides'] != undefined ? this.$el.attributes['loop-slides'].value == 'true' : false; this.loopSlides = this.$el.attributes['loop-slides'] != undefined ? this.$el.attributes['loop-slides'].value == 'true' : false;
this.cropImagesToSquare = this.$el.attributes['crop-images-to-square'] != undefined ? this.$el.attributes['crop-images-to-square'].value == 'true' : false; this.imageSize = this.$el.attributes['image-size'] != undefined ? this.$el.attributes['image-size'].value : 'tainacan-medium';
this.hideName = this.$el.attributes['hide-name'] != undefined ? this.$el.attributes['hide-name'].value == 'true' : false; this.hideName = this.$el.attributes['hide-name'] != undefined ? this.$el.attributes['hide-name'].value == 'true' : false;
this.showCollectionThumbnail = this.$el.attributes['show-collection-thumbnail'] != undefined ? this.$el.attributes['show-collection-thumbnail'].value == 'true' : false; this.showCollectionThumbnail = this.$el.attributes['show-collection-thumbnail'] != undefined ? this.$el.attributes['show-collection-thumbnail'].value == 'true' : false;
this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined; this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;

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

@ -39,22 +39,22 @@
:href="collection.url"> :href="collection.url">
<img <img
:src=" :src="
collection.thumbnail && collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0] && collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0] collection.thumbnail && collection.thumbnail[imageSize] && collection.thumbnail[imageSize][0]
? ?
collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0] collection.thumbnail[imageSize][0]
: :
(collection.thumbnail && collection.thumbnail['thumbnail'][0] && collection.thumbnail['thumbnail'][0] (collection.thumbnail && collection.thumbnail['thumbnail'] && collection.thumbnail['thumbnail'][0]
? ?
collection.thumbnail['thumbnail'][0] collection.thumbnail['thumbnail'][0]
: :
`${tainacanBaseUrl}/assets/images/placeholder_square.png`) `${tainacanBaseUrl}/assets/images/placeholder_square.png`)
" "
:data-src=" :data-src="
collection.thumbnail && collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0] && collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0] collection.thumbnail && collection.thumbnail[imageSize] && collection.thumbnail[imageSize][0]
? ?
collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0] collection.thumbnail[imageSize][0]
: :
(collection.thumbnail && collection.thumbnail['thumbnail'][0] && collection.thumbnail['thumbnail'][0] (collection.thumbnail && collection.thumbnail['thumbnail'] && collection.thumbnail['thumbnail'][0]
? ?
collection.thumbnail['thumbnail'][0] collection.thumbnail['thumbnail'][0]
: :
@ -69,27 +69,27 @@
:href="collection.url"> :href="collection.url">
<div class="collection-items-grid"> <div class="collection-items-grid">
<blur-hash-image <blur-hash-image
:height="collectionItems[collection.id][0] ? $thumbHelper.getHeight(collectionItems[collection.id][0]['thumbnail'], 'tainacan-medium') : 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'], 'tainacan-medium') : 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'], 'tainacan-medium', 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']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
:srcset="collectionItems[collection.id][0] ? $thumbHelper.getSrcSet(collectionItems[collection.id][0]['thumbnail'], 'tainacan-medium', 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`"
:hash="collectionItems[collection.id][0] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][0]['thumbnail'], 'tainacan-medium') : '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 : $root.__( '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 : $root.__( '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'], 'tainacan-medium') : 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'], 'tainacan-medium') : 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'], 'tainacan-medium', 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']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
:srcset="collectionItems[collection.id][1] ? $thumbHelper.getSrcSet(collectionItems[collection.id][1]['thumbnail'], 'tainacan-medium', 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`"
:hash="collectionItems[collection.id][1] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][1]['thumbnail'], 'tainacan-medium') : '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 : $root.__( '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 : $root.__( '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'], 'tainacan-medium') : 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'], 'tainacan-medium') : 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'], 'tainacan-medium', 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']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
:srcset="collectionItems[collection.id][2] ? $thumbHelper.getSrcSet(collectionItems[collection.id][2]['thumbnail'], 'tainacan-medium', 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`"
:hash="collectionItems[collection.id][2] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][2]['thumbnail'], 'tainacan-medium') : '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 : $root.__( '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 : $root.__( 'Thumbnail', 'tainacan' ))"
:transition-duration="500" /> :transition-duration="500" />
</div> </div>
@ -172,7 +172,7 @@ export default {
hideName: Boolean, hideName: Boolean,
largeArrows: Boolean, largeArrows: Boolean,
arrowsStyle: String, arrowsStyle: String,
cropImagesToSquare: Boolean, imageSize: String,
showCollectionThumbnail: Boolean, showCollectionThumbnail: Boolean,
tainacanApiRoot: String, tainacanApiRoot: String,
tainacanBaseUrl: String, tainacanBaseUrl: String,

58
src/views/gutenberg-blocks/blocks/carousel-items-list/block.json
View File

@ -19,111 +19,111 @@
"selector": "div" "selector": "div"
}, },
"collectionId": { "collectionId": {
"type": "String", "type": "string",
"default": "" "default": ""
}, },
"items": { "items": {
"type": "Array", "type": "array",
"default": [] "default": []
}, },
"isModalOpen": { "isModalOpen": {
"type": "Boolean", "type": "boolean",
"default": false "default": false
}, },
"searchURL": { "searchURL": {
"type": "String", "type": "string",
"default": "" "default": ""
}, },
"selectedItems": { "selectedItems": {
"type": "Array", "type": "array",
"default": [] "default": []
}, },
"itemsRequestSource": { "itemsRequestSource": {
"type": "String", "type": "string",
"default": "" "default": ""
}, },
"maxItemsNumber": { "maxItemsNumber": {
"type": "Number", "type": "number",
"value": 12 "value": 12
}, },
"maxItemsPerScreen": { "maxItemsPerScreen": {
"type": "Number", "type": "number",
"value": 7 "value": 7
}, },
"spaceBetweenItems": { "spaceBetweenItems": {
"type": "Number", "type": "number",
"value": 32 "value": 32
}, },
"spaceAroundCarousel": { "spaceAroundCarousel": {
"type": "Number", "type": "number",
"value": 50 "value": 50
}, },
"isLoading": { "isLoading": {
"type": "Boolean", "type": "boolean",
"value": false "value": false
}, },
"isLoadingCollection": { "isLoadingCollection": {
"type": "Boolean", "type": "boolean",
"value": false "value": false
}, },
"loadStrategy": { "loadStrategy": {
"type": "String", "type": "string",
"value": "search" "value": "search"
}, },
"arrowsPosition": { "arrowsPosition": {
"type": "String", "type": "string",
"value": "around" "value": "around"
}, },
"largeArrows": { "largeArrows": {
"type": "Boolean", "type": "boolean",
"value": false "value": false
}, },
"arrowsStyle": { "arrowsStyle": {
"type": "String", "type": "string",
"value": "type-1" "value": "type-1"
}, },
"autoPlay": { "autoPlay": {
"type": "Boolean", "type": "boolean",
"value": false "value": false
}, },
"autoPlaySpeed": { "autoPlaySpeed": {
"type": "Number", "type": "number",
"value": 3 "value": 3
}, },
"loopSlides": { "loopSlides": {
"type": "Boolean", "type": "boolean",
"value": false "value": false
}, },
"hideTitle": { "hideTitle": {
"type": "Boolean", "type": "boolean",
"value": true "value": true
}, },
"showCollectionHeader": { "showCollectionHeader": {
"type": "Boolean", "type": "boolean",
"value": false "value": false
}, },
"showCollectionLabel": { "showCollectionLabel": {
"type": "Boolean", "type": "boolean",
"value": false "value": false
}, },
"cropImagesToSquare": { "imageSize": {
"type": "Boolean", "type": "string",
"value": true "value": "tainacan-medium"
}, },
"collection": { "collection": {
"type": "Object", "type": "object",
"value": {} "value": {}
}, },
"blockId": { "blockId": {
"type": "String", "type": "string",
"default": "" "default": ""
}, },
"collectionBackgroundColor": { "collectionBackgroundColor": {
"type": "String", "type": "string",
"default": "#454647" "default": "#454647"
}, },
"collectionTextColor": { "collectionTextColor": {
"type": "String", "type": "string",
"default": "#ffffff" "default": "#ffffff"
} }
}, },

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

@ -1,6 +1,192 @@
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 on 0.19 to replace cropImagesToSquare by imageSize feature */
{
migrate( attributes ) {
if (attributes.cropImagesToSquare == true)
attributes.imageSize = 'tainacan-medium';
else
attributes.imageSize = 'tainacan-medium-full';
if ( isNaN(attributes.maxItemsNumber) )
attributes.maxItemsNumber = 12;
return attributes;
},
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",
"value": 12
},
"maxItemsPerScreen": {
"type": "Number",
"value": 7
},
"spaceBetweenItems": {
"type": "Number",
"value": 32
},
"spaceAroundCarousel": {
"type": "Number",
"value": 50
},
"isLoading": {
"type": "Boolean",
"value": false
},
"isLoadingCollection": {
"type": "Boolean",
"value": false
},
"loadStrategy": {
"type": "String",
"value": "search"
},
"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
},
"hideTitle": {
"type": "Boolean",
"value": true
},
"showCollectionHeader": {
"type": "Boolean",
"value": false
},
"showCollectionLabel": {
"type": "Boolean",
"value": false
},
"cropImagesToSquare": {
"type": "Boolean",
"value": true
},
"collection": {
"type": "Object",
"value": {}
},
"blockId": {
"type": "String",
"default": ""
},
"collectionBackgroundColor": {
"type": "String",
"default": "#454647"
},
"collectionTextColor": {
"type": "String",
"default": "#ffffff"
}
},
save: function ({ attributes, className }) {
const {
content,
blockId,
collectionId,
searchURL,
selectedItems,
arrowsPosition,
largeArrows,
arrowsStyle,
loadStrategy,
maxItemsNumber,
maxItemsPerScreen,
spaceBetweenItems,
spaceAroundCarousel,
autoPlay,
autoPlaySpeed,
loopSlides,
hideTitle,
cropImagesToSquare,
showCollectionHeader,
showCollectionLabel,
collectionBackgroundColor,
collectionTextColor
} = attributes;
// Gets attributes such as style, that are automatically added by the editor hook
const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : 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 }
crop-images-to-square={ '' + cropImagesToSquare }
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 Tainacan 0.18.6 due to arrowsStyle option */ /* Deprecated on Tainacan 0.18.6 due to arrowsStyle option */
{ {
"attributes": { "attributes": {

61
src/views/gutenberg-blocks/blocks/carousel-items-list/edit.js
View File

@ -2,8 +2,11 @@ const { __ } = wp.i18n;
const { RangeControl, Spinner, Button, ToggleControl, SelectControl, Placeholder, IconButton, ColorPalette, BaseControl, PanelBody } = wp.components; const { RangeControl, Spinner, Button, ToggleControl, SelectControl, Placeholder, IconButton, ColorPalette, BaseControl, PanelBody } = wp.components;
const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor ); const { InspectorControls, BlockControls, useBlockProps, store } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
const { useSelect } = wp.data;
import { map, pick } from 'lodash';
import CarouselItemsModal from './dynamic-and-carousel-items-modal.js'; import CarouselItemsModal from './dynamic-and-carousel-items-modal.js';
import tainacan from '../../js/axios.js'; import tainacan from '../../js/axios.js';
import axios from 'axios'; import axios from 'axios';
@ -38,7 +41,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
autoPlaySpeed, autoPlaySpeed,
loopSlides, loopSlides,
hideTitle, hideTitle,
cropImagesToSquare, imageSize,
showCollectionHeader, showCollectionHeader,
showCollectionLabel, showCollectionLabel,
isLoadingCollection, isLoadingCollection,
@ -59,16 +62,37 @@ export default function({ attributes, setAttributes, className, isSelected, clie
maxItemsPerScreen = 7; maxItemsPerScreen = 7;
setAttributes({ maxItemsPerScreen: maxItemsPerScreen }); setAttributes({ maxItemsPerScreen: maxItemsPerScreen });
} }
if (cropImagesToSquare === undefined) { if (maxItemsNumber === undefined) {
cropImagesToSquare = true; maxItemsNumber = 12;
setAttributes({ cropImagesToSquare: cropImagesToSquare }); setAttributes({ maxItemsNumber: maxItemsNumber });
} }
if (imageSize === undefined) {
imageSize = 'tainacan-medium';
setAttributes({ imageSize: imageSize });
}
// Get available image sizes
const { imageSizes } = useSelect(
( select ) => {
const { getSettings } = select( store );
const settings = pick( getSettings(), [
'imageSizes'
] );
return settings
},
[ clientId ]
);
const imageSizeOptions = map(
imageSizes,
( { name, slug } ) => ( { value: slug, label: name } )
);
function prepareItem(item) { function prepareItem(item) {
return ( return (
<li <li
key={ item.id } key={ item.id }
className={ 'swiper-slide item-list-item ' + (maxItemsPerScreen ? ' max-itens-per-screen-' + maxItemsPerScreen : '') + (cropImagesToSquare ? ' is-forced-square' : '') }> className={ 'swiper-slide item-list-item ' + (maxItemsPerScreen ? ' max-itens-per-screen-' + maxItemsPerScreen : '') + (['tainacan-medium', 'tainacan-small'].indexOf(imageSize) > -1 ? ' is-forced-square' : '') }>
{ loadStrategy == 'selection' ? { loadStrategy == 'selection' ?
( tainacan_blocks.wp_version < '5.4' ? ( tainacan_blocks.wp_version < '5.4' ?
<IconButton <IconButton
@ -88,8 +112,8 @@ export default function({ attributes, setAttributes, className, isSelected, clie
href={ item.url }> href={ item.url }>
<div class="items-list-item--image-wrap"> <div class="items-list-item--image-wrap">
<img <img
src={ thumbHelper.getSrc(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype']) } src={ thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype']) }
srcSet={ thumbHelper.getSrcSet(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype']) } srcSet={ thumbHelper.getSrcSet(item['thumbnail'], imageSize, item['document_mimetype']) }
alt={ item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : __( 'Thumbnail', 'tainacan' )) }/> alt={ item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : __( 'Thumbnail', 'tainacan' )) }/>
</div> </div>
{ !hideTitle ? <span>{ item.title ? item.title : '' }</span> : null } { !hideTitle ? <span>{ item.title ? item.title : '' }</span> : null }
@ -155,7 +179,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
if (maxItemsNumber != undefined && maxItemsNumber > 0) if (maxItemsNumber != undefined && maxItemsNumber > 0)
queryObject.perpage = maxItemsNumber; queryObject.perpage = maxItemsNumber;
else if (queryObject.perpage != undefined && queryObject.perpage > 0) else if (queryObject.perpage != undefined && queryObject.perpage > 0)
setAttributes({ maxItemsNumber: queryObject.perpage }); setAttributes({ maxItemsNumber: Number(queryObject.perpage) });
else { else {
queryObject.perpage = 12; queryObject.perpage = 12;
setAttributes({ maxItemsNumber: 12 }); setAttributes({ maxItemsNumber: 12 });
@ -374,16 +398,15 @@ export default function({ attributes, setAttributes, className, isSelected, clie
/> />
: null : null
} }
<ToggleControl <SelectControl
label={__('Crop Images', 'tainacan')} label={__('Image size', 'tainacan')}
help={ cropImagesToSquare ? __('Do not use square cropeed version of the item thumbnail.', 'tainacan') : __('Toggle to use square cropped version of the item thumbnail.', 'tainacan') } value={ imageSize }
checked={ cropImagesToSquare } options={ imageSizeOptions }
onChange={ ( isChecked ) => { onChange={ ( anImageSize ) => {
cropImagesToSquare = isChecked; imageSize = anImageSize;
setAttributes({ cropImagesToSquare: cropImagesToSquare }); setAttributes({ imageSize: imageSize });
setContent(); setContent();
} }}
}
/> />
<RangeControl <RangeControl
label={ __('Space between each item', 'tainacan') } label={ __('Space between each item', 'tainacan') }

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

@ -19,7 +19,7 @@ export default function ({ attributes, className }) {
autoPlaySpeed, autoPlaySpeed,
loopSlides, loopSlides,
hideTitle, hideTitle,
cropImagesToSquare, imageSize,
showCollectionHeader, showCollectionHeader,
showCollectionLabel, showCollectionLabel,
collectionBackgroundColor, collectionBackgroundColor,
@ -42,7 +42,7 @@ export default function ({ attributes, className }) {
hide-title={ '' + hideTitle } hide-title={ '' + hideTitle }
large-arrows={ '' + largeArrows } large-arrows={ '' + largeArrows }
arrows-style={ arrowsStyle } arrows-style={ arrowsStyle }
crop-images-to-square={ '' + cropImagesToSquare } image-size={ imageSize }
show-collection-header={ '' + showCollectionHeader } show-collection-header={ '' + showCollectionHeader }
show-collection-label={ '' + showCollectionLabel } show-collection-label={ '' + showCollectionLabel }
collection-background-color={ collectionBackgroundColor } collection-background-color={ collectionBackgroundColor }

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

@ -41,7 +41,7 @@ export default (element) => {
autoPlaySpeed: 3, autoPlaySpeed: 3,
loopSlides: false, loopSlides: false,
hideTitle: true, hideTitle: true,
cropImagesToSquare: true, imageSize: 'tainacan-medium',
showCollectionHeader: false, showCollectionHeader: false,
showCollectionLabel: false, showCollectionLabel: false,
collectionBackgroundColor: '#454647', collectionBackgroundColor: '#454647',
@ -70,7 +70,7 @@ export default (element) => {
autoPlaySpeed: this.autoPlaySpeed, autoPlaySpeed: this.autoPlaySpeed,
loopSlides: this.loopSlides, loopSlides: this.loopSlides,
hideTitle: this.hideTitle, hideTitle: this.hideTitle,
cropImagesToSquare: this.cropImagesToSquare, imageSize: this.imageSize,
showCollectionHeader: this.showCollectionHeader, showCollectionHeader: this.showCollectionHeader,
showCollectionLabel: this.showCollectionLabel, showCollectionLabel: this.showCollectionLabel,
collectionBackgroundColor: this.collectionBackgroundColor, collectionBackgroundColor: this.collectionBackgroundColor,
@ -99,7 +99,7 @@ export default (element) => {
this.autoPlaySpeed = this.$el.attributes['auto-play-speed'] != undefined ? this.$el.attributes['auto-play-speed'].value : 3; this.autoPlaySpeed = this.$el.attributes['auto-play-speed'] != undefined ? this.$el.attributes['auto-play-speed'].value : 3;
this.loopSlides = this.$el.attributes['loop-slides'] != undefined ? this.$el.attributes['loop-slides'].value == 'true' : false; this.loopSlides = this.$el.attributes['loop-slides'] != undefined ? this.$el.attributes['loop-slides'].value == 'true' : false;
this.hideTitle = this.$el.attributes['hide-title'] != undefined ? this.$el.attributes['hide-title'].value == 'true' : false; this.hideTitle = this.$el.attributes['hide-title'] != undefined ? this.$el.attributes['hide-title'].value == 'true' : false;
this.cropImagesToSquare = this.$el.attributes['crop-images-to-square'] != undefined ? this.$el.attributes['crop-images-to-square'].value == 'true' : true; this.imageSize = this.$el.attributes['image-size'] != undefined ? this.$el.attributes['image-size'].value : 'tainacan-medium';
this.showCollectionHeader = this.$el.attributes['show-collection-header'] != undefined ? this.$el.attributes['show-collection-header'].value == 'true' : false; this.showCollectionHeader = this.$el.attributes['show-collection-header'] != undefined ? this.$el.attributes['show-collection-header'].value == 'true' : false;
this.showCollectionLabel = this.$el.attributes['show-collection-label'] != undefined ? this.$el.attributes['show-collection-label'].value == 'true' : false; this.showCollectionLabel = this.$el.attributes['show-collection-label'] != undefined ? this.$el.attributes['show-collection-label'].value == 'true' : false;
this.collectionBackgroundColor = this.$el.attributes['collection-background-color'] != undefined ? this.$el.attributes['collection-background-color'].value : undefined; this.collectionBackgroundColor = this.$el.attributes['collection-background-color'] != undefined ? this.$el.attributes['collection-background-color'].value : undefined;

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

@ -84,16 +84,16 @@
:key="index" :key="index"
v-for="(item, index) of items" v-for="(item, index) of items"
class="swiper-slide item-list-item" class="swiper-slide item-list-item"
:class="{ 'is-forced-square': cropImagesToSquare }"> :class="{ 'is-forced-square': ['tainacan-medium', 'tainacan-small'].indexOf(imageSize) > -1 }">
<a <a
:id="isNaN(item.id) ? item.id : 'item-id-' + item.id" :id="isNaN(item.id) ? item.id : 'item-id-' + item.id"
:href="item.url"> :href="item.url">
<blur-hash-image <blur-hash-image
:height="$thumbHelper.getHeight(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'))" :height="$thumbHelper.getHeight(item['thumbnail'], imageSize)"
:width="$thumbHelper.getWidth(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'))" :width="$thumbHelper.getWidth(item['thumbnail'], imageSize)"
:src="$thumbHelper.getSrc(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype'])" :src="$thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype'])"
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype'])" :srcset="$thumbHelper.getSrcSet(item['thumbnail'], imageSize, item['document_mimetype'])"
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'))" :hash="$thumbHelper.getBlurhashString(item['thumbnail'], imageSize)"
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : $root.__( 'Thumbnail', 'tainacan' ))" :alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : $root.__( '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>
@ -178,7 +178,7 @@ export default {
autoPlaySpeed: Number, autoPlaySpeed: Number,
loopSlides: Boolean, loopSlides: Boolean,
hideTitle: Boolean, hideTitle: Boolean,
cropImagesToSquare: Boolean, imageSize: String,
showCollectionHeader: Boolean, showCollectionHeader: Boolean,
showCollectionLabel: Boolean, showCollectionLabel: Boolean,
collectionBackgroundColor: String, collectionBackgroundColor: String,

68
src/views/gutenberg-blocks/blocks/dynamic-items-list/block.json
View File

@ -14,136 +14,136 @@
}, },
"attributes": { "attributes": {
"content": { "content": {
"type": "Array", "type": "array",
"source": "children", "source": "children",
"selector": "div" "selector": "div"
}, },
"collectionId": { "collectionId": {
"type": "String", "type": "string",
"default": "" "default": ""
}, },
"items": { "items": {
"type": "Array", "type": "array",
"default": [] "default": []
}, },
"showImage": { "showImage": {
"type": "Boolean", "type": "boolean",
"default": true "default": true
}, },
"showName": { "showName": {
"type": "Boolean", "type": "boolean",
"default": true "default": true
}, },
"layout": { "layout": {
"type": "String", "type": "string",
"default": "grid" "default": "grid"
}, },
"isModalOpen": { "isModalOpen": {
"type": "Boolean", "type": "boolean",
"default": false "default": false
}, },
"gridMargin": { "gridMargin": {
"type": "Number", "type": "number",
"default": 0 "default": 0
}, },
"searchURL": { "searchURL": {
"type": "String", "type": "string",
"default": "" "default": ""
}, },
"itemsRequestSource": { "itemsRequestSource": {
"type": "String", "type": "string",
"default": "" "default": ""
}, },
"maxItemsNumber": { "maxItemsNumber": {
"type": "Number", "type": "number",
"value": 12 "value": 12
}, },
"isLoading": { "isLoading": {
"type": "Boolean", "type": "boolean",
"value": false "value": false
}, },
"isLoadingCollection": { "isLoadingCollection": {
"type": "Boolean", "type": "boolean",
"value": false "value": false
}, },
"showSearchBar": { "showSearchBar": {
"type": "Boolean", "type": "boolean",
"value": false "value": false
}, },
"showCollectionHeader": { "showCollectionHeader": {
"type": "Boolean", "type": "boolean",
"value": false "value": false
}, },
"showCollectionLabel": { "showCollectionLabel": {
"type": "Boolean", "type": "boolean",
"value": false "value": false
}, },
"collection": { "collection": {
"type": "Object", "type": "object",
"value": {} "value": {}
}, },
"searchString": { "searchString": {
"type": "String", "type": "string",
"default": "" "default": ""
}, },
"selectedItems": { "selectedItems": {
"type": "Array", "type": "array",
"default": [] "default": []
}, },
"loadStrategy": { "loadStrategy": {
"type": "String", "type": "string",
"value": "search" "value": "search"
}, },
"order": { "order": {
"type": "String", "type": "string",
"default": "" "default": ""
}, },
"blockId": { "blockId": {
"type": "String", "type": "string",
"default": "" "default": ""
}, },
"collectionBackgroundColor": { "collectionBackgroundColor": {
"type": "String", "type": "string",
"default": "#454647" "default": "#454647"
}, },
"collectionTextColor": { "collectionTextColor": {
"type": "String", "type": "string",
"default": "#ffffff" "default": "#ffffff"
}, },
"mosaicHeight": { "mosaicHeight": {
"type": "Number", "type": "number",
"value": 280 "value": 280
}, },
"mosaicGridColumns": { "mosaicGridColumns": {
"type": "Number", "type": "number",
"value": 3 "value": 3
}, },
"mosaicGridRows": { "mosaicGridRows": {
"type": "Number", "type": "number",
"value": 3 "value": 3
}, },
"sampleBackgroundImage": { "sampleBackgroundImage": {
"type": "String", "type": "string",
"default": "" "default": ""
}, },
"mosaicItemFocalPoint": { "mosaicItemFocalPoint": {
"type": "Object", "type": "object",
"default": { "default": {
"x": 0.5, "x": 0.5,
"y": 0.5 "y": 0.5
} }
}, },
"mosaicDensity": { "mosaicDensity": {
"type": "Number", "type": "number",
"default": 5 "default": 5
}, },
"maxColumnsCount": { "maxColumnsCount": {
"type": "Number", "type": "number",
"default": 4 "default": 4
}, },
"cropImagesToSquare": { "imageSize": {
"type": "Boolean", "type": "string",
"value": true "value": "tainacan-medium"
} }
}, },
"supports": { "supports": {

210
src/views/gutenberg-blocks/blocks/dynamic-items-list/deprecated.js
View File

@ -1,6 +1,216 @@
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 on 0.19 to replace cropImagesToSquare by imageSize feature */
{
migrate( attributes ) {
if (attributes.cropImagesToSquare == true)
attributes.imageSize = 'tainacan-medium';
else
attributes.imageSize = 'tainacan-medium-full';
if ( isNaN(attributes.maxItemsNumber) )
attributes.maxItemsNumber = 12;
return attributes;
},
attributes: {
"content": {
"type": "Array",
"source": "children",
"selector": "div"
},
"collectionId": {
"type": "String",
"default": ""
},
"items": {
"type": "Array",
"default": []
},
"showImage": {
"type": "Boolean",
"default": true
},
"showName": {
"type": "Boolean",
"default": true
},
"layout": {
"type": "String",
"default": "grid"
},
"isModalOpen": {
"type": "Boolean",
"default": false
},
"gridMargin": {
"type": "Number",
"default": 0
},
"searchURL": {
"type": "String",
"default": ""
},
"itemsRequestSource": {
"type": "String",
"default": ""
},
"maxItemsNumber": {
"type": "Number",
"value": 12
},
"isLoading": {
"type": "Boolean",
"value": false
},
"isLoadingCollection": {
"type": "Boolean",
"value": false
},
"showSearchBar": {
"type": "Boolean",
"value": false
},
"showCollectionHeader": {
"type": "Boolean",
"value": false
},
"showCollectionLabel": {
"type": "Boolean",
"value": false
},
"collection": {
"type": "Object",
"value": {}
},
"searchString": {
"type": "String",
"default": ""
},
"selectedItems": {
"type": "Array",
"default": []
},
"loadStrategy": {
"type": "String",
"value": "search"
},
"order": {
"type": "String",
"default": ""
},
"blockId": {
"type": "String",
"default": ""
},
"collectionBackgroundColor": {
"type": "String",
"default": "#454647"
},
"collectionTextColor": {
"type": "String",
"default": "#ffffff"
},
"mosaicHeight": {
"type": "Number",
"value": 280
},
"mosaicGridColumns": {
"type": "Number",
"value": 3
},
"mosaicGridRows": {
"type": "Number",
"value": 3
},
"sampleBackgroundImage": {
"type": "String",
"default": ""
},
"mosaicItemFocalPoint": {
"type": "Object",
"default": {
"x": 0.5,
"y": 0.5
}
},
"mosaicDensity": {
"type": "Number",
"default": 5
},
"maxColumnsCount": {
"type": "Number",
"default": 4
},
"cropImagesToSquare": {
"type": "Boolean",
"value": true
}
},
save: function({ attributes, className }) {
const {
content,
blockId,
collectionId,
loadStrategy,
selectedItems,
showImage,
showName,
layout,
gridMargin,
searchURL,
maxItemsNumber,
order,
showSearchBar,
showCollectionHeader,
showCollectionLabel,
collectionBackgroundColor,
collectionTextColor,
mosaicHeight,
mosaicGridRows,
mosaicGridColumns,
mosaicItemFocalPoint,
mosaicDensity,
maxColumnsCount,
cropImagesToSquare
} = attributes;
// Gets attributes such as style, that are automatically added by the editor hook
const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save();
return <div
{ ...blockProps }
data-module="dynamic-items-list"
search-url={ searchURL }
selected-items={ JSON.stringify(selectedItems) }
collection-id={ collectionId }
show-image={ '' + showImage }
show-name={ '' + showName }
show-search-bar={ '' + showSearchBar }
show-collection-header={ '' + showCollectionHeader }
show-collection-label={ '' + showCollectionLabel }
crop-images-to-square={ '' + cropImagesToSquare }
layout={ layout }
load-strategy={ loadStrategy }
mosaic-height={ mosaicHeight }
mosaic-density={ mosaicDensity }
mosaic-grid-rows={ mosaicGridRows }
mosaic-grid-columns={ mosaicGridColumns }
mosaic-item-focal-point-x={ (mosaicItemFocalPoint && mosaicItemFocalPoint.x ? mosaicItemFocalPoint.x : 0.5) }
mosaic-item-focal-point-y={ (mosaicItemFocalPoint && mosaicItemFocalPoint.y ? mosaicItemFocalPoint.y : 0.5) }
max-columns-count={ maxColumnsCount }
collection-background-color={ collectionBackgroundColor }
collection-text-color={ collectionTextColor }
grid-margin={ gridMargin }
max-items-number={ maxItemsNumber }
order={ order }
tainacan-api-root={ tainacan_blocks.root }
tainacan-base-url={ tainacan_blocks.base_url }
id={ 'wp-block-tainacan-dynamic-items-list_' + blockId }>
{ content }
</div>
}
},
/* Deprecated to fix the selection strategy on 0.18.7 */ /* Deprecated to fix the selection strategy on 0.18.7 */
{ {
"attributes": { "attributes": {

104
src/views/gutenberg-blocks/blocks/dynamic-items-list/edit.js
View File

@ -2,8 +2,11 @@ const { __ } = wp.i18n;
const { ResizableBox, FocalPointPicker, SelectControl, RangeControl, Spinner, Button, ToggleControl, Placeholder, ColorPalette, BaseControl, PanelBody } = wp.components; const { ResizableBox, FocalPointPicker, SelectControl, RangeControl, Spinner, Button, ToggleControl, Placeholder, ColorPalette, BaseControl, PanelBody } = wp.components;
const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor ); const { InspectorControls, BlockControls, useBlockProps, store } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
const { useSelect } = wp.data;
import { map, pick } from 'lodash';
import DynamicItemsModal from '../carousel-items-list/dynamic-and-carousel-items-modal.js'; import DynamicItemsModal from '../carousel-items-list/dynamic-and-carousel-items-modal.js';
import tainacan from '../../js/axios.js'; import tainacan from '../../js/axios.js';
import axios from 'axios'; import axios from 'axios';
@ -44,7 +47,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
sampleBackgroundImage, sampleBackgroundImage,
mosaicDensity, mosaicDensity,
maxColumnsCount, maxColumnsCount,
cropImagesToSquare imageSize
} = attributes; } = attributes;
// Gets blocks props from hook // Gets blocks props from hook
@ -59,15 +62,56 @@ export default function({ attributes, setAttributes, className, isSelected, clie
maxColumnsCount = 5; maxColumnsCount = 5;
setAttributes({ maxColumnsCount: maxColumnsCount }); setAttributes({ maxColumnsCount: maxColumnsCount });
} }
if (cropImagesToSquare === undefined) { if (maxItemsNumber === undefined) {
cropImagesToSquare = true; maxItemsNumber = 12;
setAttributes({ cropImagesToSquare: cropImagesToSquare }); setAttributes({ maxItemsNumber: maxItemsNumber });
} }
if (loadStrategy === undefined) { if (loadStrategy === undefined) {
loadStrategy = 'search'; loadStrategy = 'search';
setAttributes({ loadStrategy: loadStrategy }); setAttributes({ loadStrategy: loadStrategy });
} }
if (imageSize === undefined) {
imageSize = 'tainacan-medium';
setAttributes({ imageSize: imageSize });
}
const layoutControls = [
{
icon: 'grid-view',
title: __( 'Grid View', 'tainacan' ),
onClick: () => updateLayout('grid'),
isActive: layout === 'grid',
},
{
icon: 'list-view',
title: __( 'List View', 'tainacan' ),
onClick: () => updateLayout('list'),
isActive: layout === 'list',
},
{
icon: 'layout',
title: __( 'Mosaic View', 'tainacan' ),
onClick: () => updateLayout('mosaic'),
isActive: layout === 'mosaic',
}
];
// Get available image sizes
const { imageSizes } = useSelect(
( select ) => {
const { getSettings } = select( store );
const settings = pick( getSettings(), [
'imageSizes'
] );
return settings
},
[ clientId ]
);
const imageSizeOptions = map(
imageSizes,
( { name, slug } ) => ( { value: slug, label: name } )
);
function prepareItem(item) { function prepareItem(item) {
return ( return (
<li <li
@ -98,8 +142,8 @@ export default function({ attributes, setAttributes, className, isSelected, clie
onClick={ (event) => event.preventDefault() } onClick={ (event) => event.preventDefault() }
className={ (!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '') }> className={ (!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '') }>
<img <img
src={ thumbHelper.getSrc(item['thumbnail'], ( (layout == 'list' || cropImagesToSquare) ? 'tainacan-medium' : 'tainacan-medium-full'), item['document_mimetype']) } src={ thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype']) }
srcSet={ thumbHelper.getSrcSet(item['thumbnail'], ( (layout == 'list' || cropImagesToSquare) ? 'tainacan-medium' : 'tainacan-medium-full'), item['document_mimetype']) } srcSet={ thumbHelper.getSrcSet(item['thumbnail'], imageSize, item['document_mimetype']) }
alt={ item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : __( 'Thumbnail', 'tainacan' )) }/> alt={ item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : __( 'Thumbnail', 'tainacan' )) }/>
{ item.title ? { item.title ?
<span>{ item.title }</span> <span>{ item.title }</span>
@ -246,7 +290,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
if (maxItemsNumber != undefined && maxItemsNumber > 0) if (maxItemsNumber != undefined && maxItemsNumber > 0)
queryObject.perpage = maxItemsNumber; queryObject.perpage = maxItemsNumber;
else if (queryObject.perpage != undefined && queryObject.perpage > 0) else if (queryObject.perpage != undefined && queryObject.perpage > 0)
setAttributes({ maxItemsNumber: queryObject.perpage }); setAttributes({ maxItemsNumber: Number(queryObject.perpage) });
else { else {
queryObject.perpage = 12; queryObject.perpage = 12;
setAttributes({ maxItemsNumber: 12 }); setAttributes({ maxItemsNumber: 12 });
@ -468,27 +512,6 @@ export default function({ attributes, setAttributes, className, isSelected, clie
// Executed only on the first load of page // Executed only on the first load of page
if(content && content.length && content[0].type) if(content && content.length && content[0].type)
setContent(); setContent();
const layoutControls = [
{
icon: 'grid-view',
title: __( 'Grid View', 'tainacan' ),
onClick: () => updateLayout('grid'),
isActive: layout === 'grid',
},
{
icon: 'list-view',
title: __( 'List View', 'tainacan' ),
onClick: () => updateLayout('list'),
isActive: layout === 'list',
},
{
icon: 'layout',
title: __( 'Mosaic View', 'tainacan' ),
onClick: () => updateLayout('mosaic'),
isActive: layout === 'mosaic',
}
];
return content == 'preview' ? return content == 'preview' ?
<div className={className}> <div className={className}>
@ -701,19 +724,18 @@ export default function({ attributes, setAttributes, className, isSelected, clie
min={ 1 } min={ 1 }
max={ 7 } max={ 7 }
/> />
<ToggleControl
label={__('Crop Images', 'tainacan')}
help={ cropImagesToSquare ? __('Do not use square cropeed version of the item thumbnail.', 'tainacan') : __('Toggle to use square cropped version of the item thumbnail.', 'tainacan') }
checked={ cropImagesToSquare }
onChange={ ( isChecked ) => {
cropImagesToSquare = isChecked;
setAttributes({ cropImagesToSquare: cropImagesToSquare });
setContent();
}
}
/>
</div> </div>
: null } : null }
<SelectControl
label={__('Image size', 'tainacan')}
value={ imageSize }
options={ imageSizeOptions }
onChange={ ( anImageSize ) => {
imageSize = anImageSize;
setAttributes({ imageSize: imageSize });
setContent();
}}
/>
</div> </div>
</PanelBody> </PanelBody>
{ layout == 'mosaic' ? { layout == 'mosaic' ?

4
src/views/gutenberg-blocks/blocks/dynamic-items-list/save.js
View File

@ -25,7 +25,7 @@ export default function({ attributes, className }) {
mosaicItemFocalPoint, mosaicItemFocalPoint,
mosaicDensity, mosaicDensity,
maxColumnsCount, maxColumnsCount,
cropImagesToSquare imageSize
} = attributes; } = attributes;
// Gets attributes such as style, that are automatically added by the editor hook // Gets attributes such as style, that are automatically added by the editor hook
@ -41,7 +41,7 @@ export default function({ attributes, className }) {
show-search-bar={ '' + showSearchBar } show-search-bar={ '' + showSearchBar }
show-collection-header={ '' + showCollectionHeader } show-collection-header={ '' + showCollectionHeader }
show-collection-label={ '' + showCollectionLabel } show-collection-label={ '' + showCollectionLabel }
crop-images-to-square={ '' + cropImagesToSquare } image-size={ imageSize }
layout={ layout } layout={ layout }
load-strategy={ loadStrategy } load-strategy={ loadStrategy }
mosaic-height={ mosaicHeight } mosaic-height={ mosaicHeight }

6
src/views/gutenberg-blocks/blocks/dynamic-items-list/theme.js
View File

@ -42,7 +42,7 @@ export default (element) => {
mosaicItemFocalPointX : 0.5, mosaicItemFocalPointX : 0.5,
mosaicItemFocalPointY : 0.5, mosaicItemFocalPointY : 0.5,
maxColumnsCount: 4, maxColumnsCount: 4,
cropImagesToSquare: true, imageSize: 'tainacan-medium',
order: 'asc', order: 'asc',
showSearchBar: false, showSearchBar: false,
showCollectionHeader: false, showCollectionHeader: false,
@ -69,7 +69,7 @@ export default (element) => {
mosaicItemFocalPointX: this.mosaicItemFocalPointX, mosaicItemFocalPointX: this.mosaicItemFocalPointX,
mosaicItemFocalPointY: this.mosaicItemFocalPointY, mosaicItemFocalPointY: this.mosaicItemFocalPointY,
maxColumnsCount: this.maxColumnsCount, maxColumnsCount: this.maxColumnsCount,
cropImagesToSquare: this.cropImagesToSquare, imageSize: this.imageSize,
searchURL: this.searchURL, searchURL: this.searchURL,
selectedItems: this.selectedItems, selectedItems: this.selectedItems,
loadStrategy: this.loadStrategy, loadStrategy: this.loadStrategy,
@ -104,7 +104,7 @@ export default (element) => {
this.mosaicItemFocalPointX = this.$el.attributes['mosaic-item-focal-point-x'] != undefined ? Number(this.$el.attributes['mosaic-item-focal-point-x'].value) : undefined; this.mosaicItemFocalPointX = this.$el.attributes['mosaic-item-focal-point-x'] != undefined ? Number(this.$el.attributes['mosaic-item-focal-point-x'].value) : undefined;
this.mosaicItemFocalPointY = this.$el.attributes['mosaic-item-focal-point-y'] != undefined ? Number(this.$el.attributes['mosaic-item-focal-point-y'].value) : undefined; this.mosaicItemFocalPointY = this.$el.attributes['mosaic-item-focal-point-y'] != undefined ? Number(this.$el.attributes['mosaic-item-focal-point-y'].value) : undefined;
this.maxColumnsCount = this.$el.attributes['max-columns-count'] != undefined ? this.$el.attributes['max-columns-count'].value : 4; this.maxColumnsCount = this.$el.attributes['max-columns-count'] != undefined ? this.$el.attributes['max-columns-count'].value : 4;
this.cropImagesToSquare = this.$el.attributes['crop-images-to-square'] != undefined ? this.$el.attributes['crop-images-to-square'].value == 'true' : true; this.imageSize = this.$el.attributes['image-size'] != undefined ? this.$el.attributes['image-size'].value : 'tainacan-medium';
this.maxItemsNumber = this.$el.attributes['max-items-number'] != undefined ? this.$el.attributes['max-items-number'].value : undefined; this.maxItemsNumber = this.$el.attributes['max-items-number'] != undefined ? this.$el.attributes['max-items-number'].value : undefined;
this.order = this.$el.attributes['order'] != undefined ? this.$el.attributes['order'].value : undefined; this.order = this.$el.attributes['order'] != undefined ? this.$el.attributes['order'].value : undefined;
this.showSearchBar = this.$el.attributes['show-search-bar'] != undefined ? this.$el.attributes['show-search-bar'].value == 'true' : false; this.showSearchBar = this.$el.attributes['show-search-bar'] != undefined ? this.$el.attributes['show-search-bar'].value == 'true' : false;

36
src/views/gutenberg-blocks/blocks/dynamic-items-list/theme.vue
View File

@ -14,13 +14,13 @@
<div <div
:style="{ :style="{
backgroundColor: collectionBackgroundColor ? collectionBackgroundColor : '', backgroundColor: collectionBackgroundColor ? collectionBackgroundColor : '',
paddingRight: collection && collection.thumbnail && (collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )] || collection.thumbnail['medium']) ? '' : '20px', paddingRight: collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium']) ? '' : '20px',
paddingTop: (!collection || !collection.thumbnail || (!collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )] && !collection.thumbnail['medium'])) ? '1em' : '', paddingTop: (!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) ? '1em' : '',
width: collection && collection.header_image ? '' : '100%' width: collection && collection.header_image ? '' : '100%'
}" }"
:class=" :class="
'collection-name ' + 'collection-name ' +
((!collection || !collection.thumbnail || (!collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )] && !collection.thumbnail['medium'])) && (!collection || !collection.header_image) ? 'only-collection-name' : '') ((!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) && (!collection || !collection.header_image) ? 'only-collection-name' : '')
"> ">
<h3 :style="{ color: collectionTextColor ? collectionTextColor : '' }"> <h3 :style="{ color: collectionTextColor ? collectionTextColor : '' }">
<span <span
@ -33,17 +33,17 @@
</h3> </h3>
</div> </div>
<div <div
v-if="collection && collection.thumbnail && (collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )] || collection.thumbnail['medium'])" v-if="collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium'])"
class="collection-thumbnail" class="collection-thumbnail"
:style="{ :style="{
backgroundImage: 'url(' + (collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )] != undefined ? (collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )][0]) : (collection.thumbnail['medium'][0])) + ')', backgroundImage: 'url(' + (collection.thumbnail['tainacan-medium'] != undefined ? (collection.thumbnail['tainacan-medium'][0]) : (collection.thumbnail['medium'][0])) + ')',
}"/> }"/>
<div <div
class="collection-header-image" class="collection-header-image"
:style="{ :style="{
backgroundImage: collection.header_image ? 'url(' + collection.header_image + ')' : '', backgroundImage: collection.header_image ? 'url(' + collection.header_image + ')' : '',
minHeight: collection && collection.header_image ? '' : '80px', minHeight: collection && collection.header_image ? '' : '80px',
display: !(collection && collection.thumbnail && (collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )] || collection.thumbnail['medium'])) ? collection && collection.header_image ? '' : 'none' : '' display: !(collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium'])) ? collection && collection.header_image ? '' : 'none' : ''
}"/> }"/>
</a> </a>
</div> </div>
@ -206,11 +206,11 @@
:class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')"> :class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')">
<blur-hash-image <blur-hash-image
v-if="showImage" v-if="showImage"
:height="$thumbHelper.getHeight(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))" :height="$thumbHelper.getHeight(item['thumbnail'], ( layout == 'list' || imageSize ))"
:width="$thumbHelper.getWidth(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))" :width="$thumbHelper.getWidth(item['thumbnail'], ( layout == 'list' || imageSize ))"
:src="$thumbHelper.getSrc(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ), item['document_mimetype'])" :src="$thumbHelper.getSrc(item['thumbnail'], ( layout == 'list' || imageSize ), item['document_mimetype'])"
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ), item['document_mimetype'])" :srcset="$thumbHelper.getSrcSet(item['thumbnail'], ( layout == 'list' || imageSize ), item['document_mimetype'])"
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))" :hash="$thumbHelper.getBlurhashString(item['thumbnail'], ( layout == 'list' || imageSize ))"
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.name ? item.name : $root.__( 'Thumbnail', 'tainacan' ))" :alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.name ? item.name : $root.__( 'Thumbnail', 'tainacan' ))"
:transition-duration="500" /> :transition-duration="500" />
<span v-if="item.title">{{ item.title }}</span> <span v-if="item.title">{{ item.title }}</span>
@ -244,7 +244,7 @@
v-for="(item, index) of mosaicGroup" v-for="(item, index) of mosaicGroup"
class="item-list-item" class="item-list-item"
:style="{ :style="{
backgroundImage: layout == 'mosaic' ? `url(${$thumbHelper.getSrc(item['thumbnail'], 'medium_large', item['document_mimetype'])})` : 'none', backgroundImage: layout == 'mosaic' ? `url(${$thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype'])})` : 'none',
backgroundPosition: layout == 'mosaic' ? `${ mosaicItemFocalPointX * 100 }% ${ mosaicItemFocalPointY * 100 }%` : 'none' backgroundPosition: layout == 'mosaic' ? `${ mosaicItemFocalPointX * 100 }% ${ mosaicItemFocalPointY * 100 }%` : 'none'
}"> }">
<a <a
@ -252,11 +252,11 @@
:href="item.url" :href="item.url"
:class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')"> :class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')">
<blur-hash-image <blur-hash-image
:height="$thumbHelper.getHeight(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))" :height="$thumbHelper.getHeight(item['thumbnail'], ( layout == 'list' || imageSize ))"
:width="$thumbHelper.getWidth(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))" :width="$thumbHelper.getWidth(item['thumbnail'], ( layout == 'list' || imageSize ))"
:src="$thumbHelper.getSrc(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ), item['document_mimetype'])" :src="$thumbHelper.getSrc(item['thumbnail'], ( layout == 'list' || imageSize ), item['document_mimetype'])"
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ), item['document_mimetype'])" :srcset="$thumbHelper.getSrcSet(item['thumbnail'], ( layout == 'list' || imageSize ), item['document_mimetype'])"
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))" :hash="$thumbHelper.getBlurhashString(item['thumbnail'], ( layout == 'list' || imageSize ))"
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.name ? item.name : $root.__( 'Thumbnail', 'tainacan' ))" :alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.name ? item.name : $root.__( 'Thumbnail', 'tainacan' ))"
:transition-duration="500" /> :transition-duration="500" />
<span v-if="item.title">{{ item.title }}</span> <span v-if="item.title">{{ item.title }}</span>
@ -297,7 +297,7 @@ export default {
mosaicItemFocalPointX: Number, mosaicItemFocalPointX: Number,
mosaicItemFocalPointY: Number, mosaicItemFocalPointY: Number,
maxColumnsCount: Number, maxColumnsCount: Number,
cropImagesToSquare: Boolean, imageSize: String,
order: String, order: String,
showSearchBar: Boolean, showSearchBar: Boolean,
showCollectionHeader: Boolean, showCollectionHeader: Boolean,