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

Merge pull request #911 from tainacan/feature/910 

Creates option to display items carousel with variable width. #910.
This commit is contained in:
Mateus Machado Luna 2024-07-25 09:11:41 -03:00 committed by GitHub
parent 8ca72b8bbc 4547df698b
commit d835725409
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 248 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/css/tainacan-gutenberg-block-carousel-items-list.css
View File

@ -540,10 +540,14 @@
min-width: calc(14.285% - var(--spaceBetweenItems, var(--spaceBetweenItems, 32px) ) );
scroll-snap-align: start;
scroll-margin: 0 calc(var(--spaceBetweenItems, 32px) / 2 ); }
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.variable-item-width {
min-width: unset !important;
width: auto !important; }
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item a {
color: inherit;
font-weight: bold;
line-height: normal; }
line-height: normal;
pointer-events: none; }
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item a > span {
color: inherit;
font-weight: bold;

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

File diff suppressed because one or more lines are too long

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

@ -1076,7 +1076,8 @@ class Theme_Helper {
'data-max-items-per-screen' => true,
'data-space-between-items' => true,
'data-space-around-carousel' => true,
'data-tainacan-api-root' => true
'data-tainacan-api-root' => true,
'data-variable-items-width' => true
]
];

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

@ -125,6 +125,10 @@
"collectionTextColor": {
"type": "string",
"default": "#ffffff"
},
"variableItemsWidth": {
"type": "boolean",
"default": false
}
},
"supports": {

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

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

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

@ -43,7 +43,8 @@ export default function({ attributes, setAttributes, isSelected, clientId }){
isLoadingCollection,
collection,
collectionBackgroundColor,
collectionTextColor
collectionTextColor,
variableItemsWidth
} = attributes;
// Gets blocks props from hook
@ -67,6 +68,10 @@ export default function({ attributes, setAttributes, isSelected, clientId }){
imageSize = 'tainacan-medium';
setAttributes({ imageSize: imageSize });
}
if (variableItemsWidth === undefined) {
variableItemsWidth = false;
setAttributes({ variableItemsWidth: variableItemsWidth });
}
// Get available image sizes
const { imageSizes } = useSelect(
@ -89,7 +94,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }){
return (
<li
key={ item.id }
className={ 'swiper-slide item-list-item ' + (maxItemsPerScreen ? ' max-items-per-screen-' + maxItemsPerScreen : '') + (['tainacan-medium', 'tainacan-small'].indexOf(imageSize) > -1 ? ' is-forced-square' : '') }>
className={ 'swiper-slide item-list-item ' + ( variableItemsWidth ? ' variable-item-width' : '') + (!variableItemsWidth && maxItemsPerScreen ? ' max-items-per-screen-' + maxItemsPerScreen : '') + (['tainacan-medium', 'tainacan-small'].indexOf(imageSize) > -1 ? ' is-forced-square' : '') }>
{ loadStrategy == 'selection' ?
<Button
onClick={ () => removeItemOfId(item.id) }
@ -105,11 +110,13 @@ export default function({ attributes, setAttributes, isSelected, clientId }){
href={ item.url }>
<div className="items-list-item--image-wrap">
<img
height={ thumbHelper.getHeight(item['thumbnail'], imageSize) }
width={ thumbHelper.getWidth(item['thumbnail'], imageSize) }
src={ thumbHelper.getSrc(item['thumbnail'], imageSize, 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' )) }/>
</div>
{ !hideTitle ? <span>{ item.title ? item.title : '' }</span> : null }
{ !hideTitle ? <span style={{ maxWidth: variableItemsWidth ? thumbHelper.getWidth(item['thumbnail'], imageSize) + 'px' : 'unset' }}>{ item.title ? item.title : '' }</span> : null }
</a>
</li>
);
@ -375,8 +382,19 @@ export default function({ attributes, setAttributes, isSelected, clientId }){
initialOpen={ true }
>
<div>
<ToggleControl
label={__('Variable items width', 'tainacan')}
help={ !variableItemsWidth ? __('Toggle to define each slide size based on its content natural width.', 'tainacan') : __('Toggle to define a fixed amount of items that should appear per screen size.', 'tainacan')}
checked={ variableItemsWidth }
onChange={ ( isChecked ) => {
variableItemsWidth = isChecked;
setAttributes({ variableItemsWidth: variableItemsWidth });
setContent();
}
}
/>
{
loadStrategy != 'parent' ?
loadStrategy != 'parent' && variableItemsWidth !== true ?
<RangeControl
label={ __('Maximum items per slide on a wide screen', 'tainacan') }
help={ maxItemsPerScreen <= 4 ? __('Warning: with such a small number of items per slide, the image size is greater, thus the cropped version of the thumbnail won\'t be used.', 'tainacan') : null }

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

@ -23,7 +23,8 @@ export default function ({ attributes }) {
showCollectionHeader,
showCollectionLabel,
collectionBackgroundColor,
collectionTextColor
collectionTextColor,
variableItemsWidth
} = attributes;
// Gets attributes such as style, that are automatically added by the editor hook
@ -53,6 +54,7 @@ export default function ({ attributes }) {
data-space-between-items={ spaceBetweenItems }
data-space-around-carousel={ spaceAroundCarousel }
data-tainacan-api-root={ tainacan_blocks.root }
data-variable-items-width={ '' + variableItemsWidth }
id={ 'wp-block-tainacan-carousel-items-list_' + blockId }>
{ content }
</div>

6
src/views/gutenberg-blocks/blocks/carousel-items-list/style.scss
View File

@ -302,10 +302,16 @@
scroll-snap-align: start;
scroll-margin: 0 calc(var(--spaceBetweenItems, 32px) / 2 );
&.variable-item-width {
min-width: unset !important;
width: auto !important;
}
a {
color: inherit;
font-weight: bold;
line-height: normal;
pointer-events: none;
&>span {
color: inherit;

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

@ -44,7 +44,8 @@ export default (element) => {
showCollectionLabel: getDataAttribute(block, 'show-collection-label', false) == 'true',
collectionBackgroundColor: getDataAttribute(block, 'collection-background-color', '#373839'),
collectionTextColor: getDataAttribute(block, 'collection-text-color', '#ffffff'),
tainacanApiRoot: getDataAttribute(block, 'tainacan-api-root')
tainacanApiRoot: getDataAttribute(block, 'tainacan-api-root'),
variableItemsWidth: getDataAttribute(block, 'variable-items-width', false) == 'true',
});
},
mounted() {

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

@ -62,6 +62,7 @@
v-for="index in 18"
:key="index"
role="listitem"
:style="variableItemsWidth ? 'width: auto;' : ''"
class="swiper-slide collection-list-item skeleton">
<a>
<img>
@ -80,6 +81,7 @@
v-for="(item, index) of items"
:key="index"
role="listitem"
:style="variableItemsWidth ? 'width: auto;' : ''"
class="swiper-slide item-list-item"
:class="{ 'is-forced-square': ['tainacan-medium', 'tainacan-small'].indexOf(imageSize) > -1 }">
<a
@ -93,7 +95,11 @@
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], imageSize)"
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : wpI18n( 'Thumbnail', 'tainacan' ))"
:transition-duration="500" />
<span v-if="!hideTitle">{{ item.title ? item.title : '' }}</span>
<span
v-if="!hideTitle"
:style="variableItemsWidth ? ('max-width: ' + $thumbHelper.getWidth(item['thumbnail'], imageSize) + 'px') : ''">
{{ item.title ? item.title : '' }}
</span>
</a>
</li>
</ul>
@ -179,7 +185,8 @@ export default {
showCollectionLabel: Boolean,
collectionBackgroundColor: String,
collectionTextColor: String,
tainacanApiRoot: String
tainacanApiRoot: String,
variableItemsWidth: Boolean
},
data() {
return {
@ -334,7 +341,7 @@ export default {
const self = this;
const spaceBetween = Number(self.spaceBetweenItems);
const slidesPerView = Number(self.maxItemsPerScreen);
this.swiper = new Swiper('#' + self.blockId + '-carousel', {
let swiperOptions = {
watchOverflow: true,
mousewheel: {
forceToAxis: true
@ -343,7 +350,7 @@ export default {
preventInteractionOnTransition: true,
allowClick: true,
allowTouchMove: true,
slidesPerView: 1,
slidesPerView: self.variableItemsWidth ? 'auto' : 1,
slidesPerGroup: 1,
spaceBetween: spaceBetween,
slideToClickedSlide: true,
@ -351,7 +358,18 @@ export default {
nextEl: '#' + self.blockId + '-next',
prevEl: '#' + self.blockId + '-prev',
},
breakpoints: (!isNaN(self.maxItemsPerScreen) && self.maxItemsPerScreen != 6) ? {
autoplay: self.autoPlay ? { delay: self.autoPlaySpeed*1000 } : false,
loop: self.loopSlides ? self.loopSlides : false,
a11y: {
prevSlideMessage: wp.i18n.__( 'Previous slide', 'tainacan'),
nextSlideMessage: wp.i18n.__( 'Next slide', 'tainacan'),
firstSlideMessage: wp.i18n.__('This is the first slide', 'tainacan'),
lastSlideMessage: wp.i18n.__('This is the last slide', 'tainacan')
},
modules: [Autoplay, Navigation, A11y]
}
if ( !self.variableItemsWidth ) {
swiperOptions.breakpoints = (!isNaN(self.maxItemsPerScreen) && self.maxItemsPerScreen != 6) ? {
498: { slidesPerView: slidesPerView - 4 > 0 ? slidesPerView - 4 : 1, spaceBetween: spaceBetween },
768: { slidesPerView: slidesPerView - 3 > 0 ? slidesPerView - 3 : 1, spaceBetween: spaceBetween },
1024: { slidesPerView: slidesPerView - 2 > 0 ? slidesPerView - 2 : 1, spaceBetween: spaceBetween },
@ -363,17 +381,9 @@ export default {
1024: { slidesPerView: 4, spaceBetween: spaceBetween },
1366: { slidesPerView: 5, spaceBetween: spaceBetween },
1600: { slidesPerView: 6, spaceBetween: spaceBetween }
},
autoplay: self.autoPlay ? { delay: self.autoPlaySpeed*1000 } : false,
loop: self.loopSlides ? self.loopSlides : false,
a11y: {
prevSlideMessage: wp.i18n.__( 'Previous slide', 'tainacan'),
nextSlideMessage: wp.i18n.__( 'Next slide', 'tainacan'),
firstSlideMessage: wp.i18n.__('This is the first slide', 'tainacan'),
lastSlideMessage: wp.i18n.__('This is the last slide', 'tainacan')
},
modules: [Autoplay, Navigation, A11y]
});
}
}
this.swiper = new Swiper('#' + self.blockId + '-carousel', swiperOptions);
}
}
}

6
src/views/gutenberg-blocks/blocks/item-submission-form/theme.vue
View File

@ -1201,12 +1201,10 @@ export default {
return this.conditionalSections[sectionId] && this.conditionalSections[sectionId].hide;
},
getMetadatumOrderInSection(sectionIndex, metadatum) {
if ( !this.collection || !Array.isArray(this.collection['metadata_section_order']) || !this.collection['metadata_section_order'][sectionIndex] || !Array.isArray(this.collection['metadata_section_order'][sectionIndex]['metadata_order']) )
if ( !this.collectionMetadataSectionOrder || !Array.isArray(this.collectionMetadataSectionOrder) || !this.collectionMetadataSectionOrder[sectionIndex] || !Array.isArray(this.collectionMetadataSectionOrder[sectionIndex]['metadata_order']) )
return -1;
let enabledMetadataInSection = [];
for (let metadatum of this.collection['metadata_section_order'][sectionIndex]['metadata_order']) {
for (let metadatum of this.collectionMetadataSectionOrder[sectionIndex]['metadata_order']) {
if ( metadatum.enabled )
enabledMetadataInSection.push(metadatum.id);
}