From 1197db388740347b085eb91fe9e42fcb38822f81 Mon Sep 17 00:00:00 2001 From: Giulia Ghisini Date: Thu, 1 Feb 2024 11:01:08 +0100 Subject: [PATCH 01/15] feat: added appearance Card to slider template --- locales/de/LC_MESSAGES/volto.po | 17 +- locales/en/LC_MESSAGES/volto.po | 17 +- locales/es/LC_MESSAGES/volto.po | 17 +- locales/fr/LC_MESSAGES/volto.po | 17 +- locales/it/LC_MESSAGES/volto.po | 17 +- locales/volto.pot | 19 +- .../Listing/SimpleCard/Card/SimpleCard.jsx | 174 +++++++++++++++++ .../SimpleCard/SimpleCardTemplateDefault.jsx | 175 +----------------- .../ListingOptions/simpleCardTemplate.js | 50 +++-- .../Blocks/ListingOptions/sliderTemplate.js | 64 +++++-- 10 files changed, 352 insertions(+), 215 deletions(-) create mode 100644 src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard.jsx diff --git a/locales/de/LC_MESSAGES/volto.po b/locales/de/LC_MESSAGES/volto.po index 061786a29..7372d4719 100644 --- a/locales/de/LC_MESSAGES/volto.po +++ b/locales/de/LC_MESSAGES/volto.po @@ -51,6 +51,7 @@ msgid "Allow Externals" msgstr "" #: config/Blocks/ListingOptions/simpleCardTemplate +#: config/Blocks/ListingOptions/sliderTemplate # defaultMessage: Aspetto msgid "Aspetto" msgstr "" @@ -75,7 +76,7 @@ msgstr "" msgid "Block style" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Vedi msgid "Card detail label" @@ -2774,7 +2775,7 @@ msgstr "" msgid "provvedimento_finale" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Data di pubblicazione msgid "publication_date" @@ -3627,6 +3628,16 @@ msgstr "" msgid "slideDot" msgstr "" +#: config/Blocks/ListingOptions/sliderTemplate +# defaultMessage: Qui puoi selezionare, per il template 'Slider', un aspetto diverso da quello di default per gli elementi mostrati nello slider. +msgid "slider_listing_appearance_description" +msgstr "" + +#: config/Blocks/ListingOptions/sliderTemplate +# defaultMessage: Card semplice +msgid "slider_listing_appearance_simplecard" +msgstr "" + #: config/Blocks/ListingOptions/sliderTemplate # defaultMessage: N° slide da mostrare msgid "slidesToShow" @@ -3961,7 +3972,7 @@ msgstr "" msgid "uo_type" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Data di aggiornamento msgid "update_date" diff --git a/locales/en/LC_MESSAGES/volto.po b/locales/en/LC_MESSAGES/volto.po index 0a25f9260..415e66b41 100644 --- a/locales/en/LC_MESSAGES/volto.po +++ b/locales/en/LC_MESSAGES/volto.po @@ -36,6 +36,7 @@ msgid "Allow Externals" msgstr "Accept external URL to embed" #: config/Blocks/ListingOptions/simpleCardTemplate +#: config/Blocks/ListingOptions/sliderTemplate # defaultMessage: Aspetto msgid "Aspetto" msgstr "" @@ -60,7 +61,7 @@ msgstr "" msgid "Block style" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Vedi msgid "Card detail label" @@ -2759,7 +2760,7 @@ msgstr "Online procedure" msgid "provvedimento_finale" msgstr "Final provision" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Data di pubblicazione msgid "publication_date" @@ -3612,6 +3613,16 @@ msgstr "" msgid "slideDot" msgstr "" +#: config/Blocks/ListingOptions/sliderTemplate +# defaultMessage: Qui puoi selezionare, per il template 'Slider', un aspetto diverso da quello di default per gli elementi mostrati nello slider. +msgid "slider_listing_appearance_description" +msgstr "" + +#: config/Blocks/ListingOptions/sliderTemplate +# defaultMessage: Card semplice +msgid "slider_listing_appearance_simplecard" +msgstr "" + #: config/Blocks/ListingOptions/sliderTemplate # defaultMessage: N° slide da mostrare msgid "slidesToShow" @@ -3946,7 +3957,7 @@ msgstr "Search for a structure" msgid "uo_type" msgstr "Type" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Data di aggiornamento msgid "update_date" diff --git a/locales/es/LC_MESSAGES/volto.po b/locales/es/LC_MESSAGES/volto.po index d22f9120b..61531653b 100644 --- a/locales/es/LC_MESSAGES/volto.po +++ b/locales/es/LC_MESSAGES/volto.po @@ -45,6 +45,7 @@ msgid "Allow Externals" msgstr "Aceptar URL externa para incrustar" #: config/Blocks/ListingOptions/simpleCardTemplate +#: config/Blocks/ListingOptions/sliderTemplate # defaultMessage: Aspetto msgid "Aspetto" msgstr "Yo espero" @@ -69,7 +70,7 @@ msgstr "Título del bloque..." msgid "Block style" msgstr "Estilo de Bloque" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Vedi msgid "Card detail label" @@ -2768,7 +2769,7 @@ msgstr "Trámite informatizado en línea" msgid "provvedimento_finale" msgstr "Disposición final" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Data di pubblicazione msgid "publication_date" @@ -3621,6 +3622,16 @@ msgstr "" msgid "slideDot" msgstr "" +#: config/Blocks/ListingOptions/sliderTemplate +# defaultMessage: Qui puoi selezionare, per il template 'Slider', un aspetto diverso da quello di default per gli elementi mostrati nello slider. +msgid "slider_listing_appearance_description" +msgstr "" + +#: config/Blocks/ListingOptions/sliderTemplate +# defaultMessage: Card semplice +msgid "slider_listing_appearance_simplecard" +msgstr "" + #: config/Blocks/ListingOptions/sliderTemplate # defaultMessage: N° slide da mostrare msgid "slidesToShow" @@ -3955,7 +3966,7 @@ msgstr "Buscar una estructura" msgid "uo_type" msgstr "Tipo" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Data di aggiornamento msgid "update_date" diff --git a/locales/fr/LC_MESSAGES/volto.po b/locales/fr/LC_MESSAGES/volto.po index f5cfed8f9..27be9a7d0 100644 --- a/locales/fr/LC_MESSAGES/volto.po +++ b/locales/fr/LC_MESSAGES/volto.po @@ -53,6 +53,7 @@ msgid "Allow Externals" msgstr "Accepter les URL externes pour l'intégration" #: config/Blocks/ListingOptions/simpleCardTemplate +#: config/Blocks/ListingOptions/sliderTemplate # defaultMessage: Aspetto msgid "Aspetto" msgstr "" @@ -77,7 +78,7 @@ msgstr "" msgid "Block style" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Vedi msgid "Card detail label" @@ -2776,7 +2777,7 @@ msgstr "" msgid "provvedimento_finale" msgstr "Disposition finale" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Data di pubblicazione msgid "publication_date" @@ -3629,6 +3630,16 @@ msgstr "" msgid "slideDot" msgstr "" +#: config/Blocks/ListingOptions/sliderTemplate +# defaultMessage: Qui puoi selezionare, per il template 'Slider', un aspetto diverso da quello di default per gli elementi mostrati nello slider. +msgid "slider_listing_appearance_description" +msgstr "" + +#: config/Blocks/ListingOptions/sliderTemplate +# defaultMessage: Card semplice +msgid "slider_listing_appearance_simplecard" +msgstr "" + #: config/Blocks/ListingOptions/sliderTemplate # defaultMessage: N° slide da mostrare msgid "slidesToShow" @@ -3963,7 +3974,7 @@ msgstr "Chercher une structure" msgid "uo_type" msgstr "Typologie" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Data di aggiornamento msgid "update_date" diff --git a/locales/it/LC_MESSAGES/volto.po b/locales/it/LC_MESSAGES/volto.po index 7dd9dfe50..fce217298 100644 --- a/locales/it/LC_MESSAGES/volto.po +++ b/locales/it/LC_MESSAGES/volto.po @@ -36,6 +36,7 @@ msgid "Allow Externals" msgstr "Accetta URL esterni per l'embed" #: config/Blocks/ListingOptions/simpleCardTemplate +#: config/Blocks/ListingOptions/sliderTemplate # defaultMessage: Aspetto msgid "Aspetto" msgstr "Aspetto" @@ -60,7 +61,7 @@ msgstr "Titolo del blocco..." msgid "Block style" msgstr "Stile del blocco" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Vedi msgid "Card detail label" @@ -2759,7 +2760,7 @@ msgstr "Procedura informatizzata online" msgid "provvedimento_finale" msgstr "Provvedimento finale" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Data di pubblicazione msgid "publication_date" @@ -3612,6 +3613,16 @@ msgstr "Skype" msgid "slideDot" msgstr "Vai alla slide {index}" +#: config/Blocks/ListingOptions/sliderTemplate +# defaultMessage: Qui puoi selezionare, per il template 'Slider', un aspetto diverso da quello di default per gli elementi mostrati nello slider. +msgid "slider_listing_appearance_description" +msgstr "" + +#: config/Blocks/ListingOptions/sliderTemplate +# defaultMessage: Card semplice +msgid "slider_listing_appearance_simplecard" +msgstr "" + #: config/Blocks/ListingOptions/sliderTemplate # defaultMessage: N° slide da mostrare msgid "slidesToShow" @@ -3946,7 +3957,7 @@ msgstr "Cerca una struttura" msgid "uo_type" msgstr "Tipologia" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Data di aggiornamento msgid "update_date" diff --git a/locales/volto.pot b/locales/volto.pot index 8a9a4e40b..f4b60caac 100644 --- a/locales/volto.pot +++ b/locales/volto.pot @@ -1,7 +1,7 @@ msgid "" msgstr "" "Project-Id-Version: Plone\n" -"POT-Creation-Date: 2024-01-15T16:05:18.583Z\n" +"POT-Creation-Date: 2024-02-01T10:01:31.687Z\n" "Last-Translator: Plone i18n \n" "Language-Team: Plone i18n \n" "MIME-Version: 1.0\n" @@ -38,6 +38,7 @@ msgid "Allow Externals" msgstr "" #: config/Blocks/ListingOptions/simpleCardTemplate +#: config/Blocks/ListingOptions/sliderTemplate # defaultMessage: Aspetto msgid "Aspetto" msgstr "" @@ -62,7 +63,7 @@ msgstr "" msgid "Block style" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Vedi msgid "Card detail label" @@ -2761,7 +2762,7 @@ msgstr "" msgid "provvedimento_finale" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Data di pubblicazione msgid "publication_date" @@ -3614,6 +3615,16 @@ msgstr "" msgid "slideDot" msgstr "" +#: config/Blocks/ListingOptions/sliderTemplate +# defaultMessage: Qui puoi selezionare, per il template 'Slider', un aspetto diverso da quello di default per gli elementi mostrati nello slider. +msgid "slider_listing_appearance_description" +msgstr "" + +#: config/Blocks/ListingOptions/sliderTemplate +# defaultMessage: Card semplice +msgid "slider_listing_appearance_simplecard" +msgstr "" + #: config/Blocks/ListingOptions/sliderTemplate # defaultMessage: N° slide da mostrare msgid "slidesToShow" @@ -3948,7 +3959,7 @@ msgstr "" msgid "uo_type" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Data di aggiornamento msgid "update_date" diff --git a/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard.jsx b/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard.jsx new file mode 100644 index 000000000..abd81c7bf --- /dev/null +++ b/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard.jsx @@ -0,0 +1,174 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { defineMessages, useIntl } from 'react-intl'; +import moment from 'moment'; +import cx from 'classnames'; +import { + Card, + CardBody, + CardTitle, + CardText, + CardReadMore, +} from 'design-react-kit'; +import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable'; +import { UniversalLink } from '@plone/volto/components'; + +import { CardCategory } from 'design-comuni-plone-theme/components/ItaliaTheme'; +import { getCategory } from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/utils'; +import { + getItemIcon, + ListingCategory, + ListingText, +} from 'design-comuni-plone-theme/components/ItaliaTheme'; +import { + getCalendarDate, + getEventRecurrenceMore, + getComponentWithFallback, +} from 'design-comuni-plone-theme/helpers'; + +const messages = defineMessages({ + card_detail_label: { id: 'Card detail label', defaultMessage: 'Vedi' }, + publication_date: { + id: 'publication_date', + defaultMessage: 'Data di pubblicazione', + }, + update_date: { + id: 'update_date', + defaultMessage: 'Data di aggiornamento', + }, +}); + +const SimpleCard = (props) => { + const intl = useIntl(); + + moment.locale(intl.locale); + + const { + item, + isEditMode, + show_icon = true, + show_section = true, + show_type, + show_description = true, + show_detail_link, + detail_link_label, + hide_dates, + id_lighthouse, + rrule, + index, + } = props; + + const getItemClass = (item) => { + let className = null; + switch (item['@type']) { + case 'News Item': + className = + item.tipologia_notizia + ?.map?.((tipologia) => + tipologia.token.toLowerCase().replace(' ', '_'), + ) + .join(' ') ?? ''; + break; + default: + className = null; + break; + } + return className; + }; + + const icon = show_icon ? getItemIcon(item) : null; + const itemTitle = item.title || item.id; + const date = hide_dates ? null : getCalendarDate(item, rrule.rrulestr); + const eventRecurrenceMore = hide_dates + ? null + : getEventRecurrenceMore(item, isEditMode); + const listingText = show_description ? : null; + const category = getCategory(item, show_type, show_section, props); + const type = item['@type']; + + const BlockExtraTags = getComponentWithFallback({ + name: 'BlockExtraTags', + dependencies: ['SimpleCard', type], + }).component; + + return ( + + + {(icon || category || date) && ( + + {category && ( + + + + )} + + )} + + + {itemTitle} + + + {listingText && ( + + {listingText} + {(type === 'Modulo' || type === 'Documento') && !hide_dates && ( +
+ {item?.effective && ( +

+ + {intl.formatMessage(messages.publication_date)}:{' '} + + {moment(item.effective).format('DD-MM-YYYY')} +

+ )} + {item?.modified && ( +

+ + {intl.formatMessage(messages.update_date)}:{' '} + + {moment(item.modified).format('DD-MM-YYYY')} +

+ )} +
+ )} + + )} + + {eventRecurrenceMore} + {show_detail_link && ( + + + ); +}; + +SimpleCard.propTypes = { + item: PropTypes.any.isRequired, + isEditMode: PropTypes.bool, +}; + +export default injectLazyLibs(['rrule'])(SimpleCard); diff --git a/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault.jsx b/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault.jsx index 2f224bce5..23bdbef92 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault.jsx @@ -1,75 +1,25 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; -import { defineMessages, useIntl } from 'react-intl'; -import moment from 'moment'; import cx from 'classnames'; -import { - Card, - CardBody, - CardTitle, - CardText, - CardReadMore, - Button, - Row, - Col, -} from 'design-react-kit'; -import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable'; -import { UniversalLink } from '@plone/volto/components'; +import { Button, Row, Col } from 'design-react-kit'; -import { CardCategory } from 'design-comuni-plone-theme/components/ItaliaTheme'; -import { getCategory } from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/utils'; -import { - getItemIcon, - ListingCategory, - ListingText, - ListingLinkMore, -} from 'design-comuni-plone-theme/components/ItaliaTheme'; -import { - getCalendarDate, - getEventRecurrenceMore, - getComponentWithFallback, -} from 'design-comuni-plone-theme/helpers'; - -const messages = defineMessages({ - card_detail_label: { id: 'Card detail label', defaultMessage: 'Vedi' }, - publication_date: { - id: 'publication_date', - defaultMessage: 'Data di pubblicazione', - }, - update_date: { - id: 'update_date', - defaultMessage: 'Data di aggiornamento', - }, -}); +import SimpleCard from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard'; +import { ListingLinkMore } from 'design-comuni-plone-theme/components/ItaliaTheme'; const SimpleCardTemplateDefault = (props) => { - const intl = useIntl(); - - moment.locale(intl.locale); - const { items, - isEditMode, linkTitle, linkHref, linkAlign, titleLine, - show_icon = true, - show_section = true, - show_type, - show_description = true, - show_detail_link, - detail_link_label, title, show_block_bg, - hide_dates, path_filters, show_path_filters, addFilters, additionalFilters = [], - id_lighthouse, linkmore_id_lighthouse, - rrule, } = props; let currentPathFilter = additionalFilters @@ -82,24 +32,6 @@ const SimpleCardTemplateDefault = (props) => { const [pathFilter, setPathFilter] = useState(currentPathFilter?.[0] || null); - const getItemClass = (item) => { - let className = null; - switch (item['@type']) { - case 'News Item': - className = - item.tipologia_notizia - ?.map?.((tipologia) => - tipologia.token.toLowerCase().replace(' ', '_'), - ) - .join(' ') ?? ''; - break; - default: - className = null; - break; - } - return className; - }; - const path_filters_buttons = show_path_filters && path_filters ? Object.keys(path_filters) @@ -176,101 +108,9 @@ const SimpleCardTemplateDefault = (props) => { )}
- {items.map((item, index) => { - const icon = show_icon ? getItemIcon(item) : null; - const itemTitle = item.title || item.id; - const date = hide_dates - ? null - : getCalendarDate(item, rrule.rrulestr); - const eventRecurrenceMore = hide_dates - ? null - : getEventRecurrenceMore(item, isEditMode); - const listingText = show_description ? ( - - ) : null; - const category = getCategory(item, show_type, show_section, props); - const type = item['@type']; - - const BlockExtraTags = getComponentWithFallback({ - name: 'BlockExtraTags', - dependencies: ['SimpleCardTemplateDefault', type], - }).component; - - return ( - - - {(icon || category || date) && ( - - {category && ( - - - - )} - - )} - - - {itemTitle} - - - {listingText && ( - - {listingText} - {(type === 'Modulo' || type === 'Documento') && - !hide_dates && ( -
- {item?.effective && ( -

- - {intl.formatMessage(messages.publication_date)}:{' '} - - {moment(item.effective).format('DD-MM-YYYY')} -

- )} - {item?.modified && ( -

- - {intl.formatMessage(messages.update_date)}:{' '} - - {moment(item.modified).format('DD-MM-YYYY')} -

- )} -
- )} - - )} - - {eventRecurrenceMore} - {show_detail_link && ( - - - ); - })} + {items.map((item, index) => ( + + ))}
{ SimpleCardTemplateDefault.propTypes = { items: PropTypes.arrayOf(PropTypes.any).isRequired, - isEditMode: PropTypes.bool, linkTitle: PropTypes.any, linkHref: PropTypes.any, }; -export default injectLazyLibs(['rrule'])(SimpleCardTemplateDefault); +export default SimpleCardTemplateDefault; diff --git a/src/config/Blocks/ListingOptions/simpleCardTemplate.js b/src/config/Blocks/ListingOptions/simpleCardTemplate.js index ae82f9320..1ab7e0321 100644 --- a/src/config/Blocks/ListingOptions/simpleCardTemplate.js +++ b/src/config/Blocks/ListingOptions/simpleCardTemplate.js @@ -79,28 +79,44 @@ export const addSimpleCardTemplateOptions = ( pos, ); } else { - pos = templatesOptions( + pos = simpleCardTemplateOptions_appearance_default( schema, formData, intl, - [ - 'show_icon', - 'hide_dates', - 'show_section', - 'show_type', - 'show_description', - 'show_detail_link', - 'show_path_filters', - ], - { - hide_dates: { default: false }, - show_icon: { default: true }, - show_type: { default: false }, - show_detail_link: { default: false }, - show_path_filters: { default: false }, - }, pos, ); } return pos; }; + +export const simpleCardTemplateOptions_appearance_default = ( + schema, + formData, + intl, + position, +) => { + let pos = position; + pos = templatesOptions( + schema, + formData, + intl, + [ + 'show_icon', + 'hide_dates', + 'show_section', + 'show_type', + 'show_description', + 'show_detail_link', + 'show_path_filters', + ], + { + hide_dates: { default: false }, + show_icon: { default: true }, + show_type: { default: false }, + show_detail_link: { default: false }, + show_path_filters: { default: false }, + }, + pos, + ); + return pos; +}; diff --git a/src/config/Blocks/ListingOptions/sliderTemplate.js b/src/config/Blocks/ListingOptions/sliderTemplate.js index f5a09b5ad..2a1a871ef 100644 --- a/src/config/Blocks/ListingOptions/sliderTemplate.js +++ b/src/config/Blocks/ListingOptions/sliderTemplate.js @@ -1,6 +1,7 @@ import { defineMessages } from 'react-intl'; import { addSchemaField } from 'design-comuni-plone-theme/config/Blocks/ListingOptions'; +import { simpleCardTemplateOptions_appearance_default } from 'design-comuni-plone-theme/config/Blocks/ListingOptions/simpleCardTemplate'; const messages = defineMessages({ show_full_width: { @@ -31,8 +32,23 @@ const messages = defineMessages({ id: 'autoplay_speed_description', defaultMessage: 'La velocità di autoplay deve essere espressa in secondi.', }, + appearance: { + id: 'Aspetto', + defaultMessage: 'Aspetto', + }, + slider_listing_appearance_description: { + id: 'slider_listing_appearance_description', + defaultMessage: + "Qui puoi selezionare, per il template 'Slider', un aspetto diverso da quello di default per gli elementi mostrati nello slider.", + }, + slider_listing_appearance_simplecard: { + id: 'slider_listing_appearance_simplecard', + defaultMessage: 'Card semplice', + }, }); +export const SliderTemplateAppearance_SIMPLECARD = 'simple_card'; + export const addSliderTemplateOptions = ( schema, formData, @@ -51,16 +67,6 @@ export const addSliderTemplateOptions = ( ); pos++; - addSchemaField( - schema, - 'show_image_title', - intl.formatMessage(messages.show_image_title), - null, - { type: 'boolean', default: true }, - pos, - ); - pos++; - addSchemaField( schema, 'show_dots', @@ -91,7 +97,7 @@ export const addSliderTemplateOptions = ( ); pos++; - pos = addSchemaField( + addSchemaField( schema, 'slidesToShow', intl.formatMessage(messages.slidesToShow), @@ -99,5 +105,41 @@ export const addSliderTemplateOptions = ( { type: 'number', default: 1 }, pos, ); + pos++; + //appearance options + + let choices = [ + [ + SliderTemplateAppearance_SIMPLECARD, + intl.formatMessage(messages.slider_listing_appearance_simplecard), + ], + ]; + + addSchemaField( + schema, + 'appearance', + intl.formatMessage(messages.appearance), + intl.formatMessage(messages.slider_listing_appearance_description), + { + choices, + }, + pos, + ); + pos++; + + if (formData.appearance === SliderTemplateAppearance_SIMPLECARD) { + simpleCardTemplateOptions_appearance_default(schema, formData, intl, pos); + pos++; + } else { + addSchemaField( + schema, + 'show_image_title', + intl.formatMessage(messages.show_image_title), + null, + { type: 'boolean', default: true }, + pos, + ); + pos++; + } return pos; }; From 4c39a02b12f8f1caca0beadcdfaafed43094782a Mon Sep 17 00:00:00 2001 From: Giulia Ghisini Date: Thu, 1 Feb 2024 14:43:22 +0100 Subject: [PATCH 02/15] feat: added appearance SimpleCard and ImageCard to listing slider template --- RELEASE.md | 5 + locales/de/LC_MESSAGES/volto.po | 11 +- locales/en/LC_MESSAGES/volto.po | 11 +- locales/es/LC_MESSAGES/volto.po | 11 +- locales/fr/LC_MESSAGES/volto.po | 11 +- locales/it/LC_MESSAGES/volto.po | 11 +- locales/volto.pot | 13 +- .../CardWithImage/CardWithImageDefault.jsx | 178 ++++++++++++++++++ .../Blocks/Listing/CardWithImageTemplate.jsx | 172 +---------------- .../{SimpleCard.jsx => SimpleCardDefault.jsx} | 8 +- .../SimpleCard/SimpleCardTemplateDefault.jsx | 4 +- .../Listing/Slider/SlideItemDefault.jsx | 52 +++++ .../Blocks/Listing/SliderTemplate.jsx | 60 ++---- .../ListingOptions/cardWithImageTemplate.js | 16 +- .../ListingOptions/simpleCardTemplate.js | 3 +- .../Blocks/ListingOptions/sliderTemplate.js | 21 ++- src/config/Blocks/listingVariations.js | 8 + .../ItaliaTheme/Blocks/_sliderTemplate.scss | 23 +++ 18 files changed, 381 insertions(+), 237 deletions(-) create mode 100644 src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx rename src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/{SimpleCard.jsx => SimpleCardDefault.jsx} (96%) create mode 100644 src/components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault.jsx diff --git a/RELEASE.md b/RELEASE.md index a8edf225c..401d517a8 100644 --- a/RELEASE.md +++ b/RELEASE.md @@ -41,6 +41,11 @@ - ... --> +## Versione x.x.x (xx/xx/xxxx) + +### Novità +- Nel template Slider del blocco elenco, ora è possibile scegliere l'aspetto degli elementi dello slider (default: slide semplice con immagine e titolo cliccabile, Card semplice, Card con immagine). + ## Versione 11.3.3 (30/01/2024) ### Migliorie diff --git a/locales/de/LC_MESSAGES/volto.po b/locales/de/LC_MESSAGES/volto.po index 7372d4719..a06233a7c 100644 --- a/locales/de/LC_MESSAGES/volto.po +++ b/locales/de/LC_MESSAGES/volto.po @@ -76,7 +76,7 @@ msgstr "" msgid "Block style" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Vedi msgid "Card detail label" @@ -2775,7 +2775,7 @@ msgstr "" msgid "provvedimento_finale" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Data di pubblicazione msgid "publication_date" @@ -3633,6 +3633,11 @@ msgstr "" msgid "slider_listing_appearance_description" msgstr "" +#: config/Blocks/ListingOptions/sliderTemplate +# defaultMessage: Card con immagine +msgid "slider_listing_appearance_imagecard" +msgstr "" + #: config/Blocks/ListingOptions/sliderTemplate # defaultMessage: Card semplice msgid "slider_listing_appearance_simplecard" @@ -3972,7 +3977,7 @@ msgstr "" msgid "uo_type" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Data di aggiornamento msgid "update_date" diff --git a/locales/en/LC_MESSAGES/volto.po b/locales/en/LC_MESSAGES/volto.po index 415e66b41..d7725c5a4 100644 --- a/locales/en/LC_MESSAGES/volto.po +++ b/locales/en/LC_MESSAGES/volto.po @@ -61,7 +61,7 @@ msgstr "" msgid "Block style" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Vedi msgid "Card detail label" @@ -2760,7 +2760,7 @@ msgstr "Online procedure" msgid "provvedimento_finale" msgstr "Final provision" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Data di pubblicazione msgid "publication_date" @@ -3618,6 +3618,11 @@ msgstr "" msgid "slider_listing_appearance_description" msgstr "" +#: config/Blocks/ListingOptions/sliderTemplate +# defaultMessage: Card con immagine +msgid "slider_listing_appearance_imagecard" +msgstr "" + #: config/Blocks/ListingOptions/sliderTemplate # defaultMessage: Card semplice msgid "slider_listing_appearance_simplecard" @@ -3957,7 +3962,7 @@ msgstr "Search for a structure" msgid "uo_type" msgstr "Type" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Data di aggiornamento msgid "update_date" diff --git a/locales/es/LC_MESSAGES/volto.po b/locales/es/LC_MESSAGES/volto.po index 61531653b..405da04c3 100644 --- a/locales/es/LC_MESSAGES/volto.po +++ b/locales/es/LC_MESSAGES/volto.po @@ -70,7 +70,7 @@ msgstr "Título del bloque..." msgid "Block style" msgstr "Estilo de Bloque" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Vedi msgid "Card detail label" @@ -2769,7 +2769,7 @@ msgstr "Trámite informatizado en línea" msgid "provvedimento_finale" msgstr "Disposición final" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Data di pubblicazione msgid "publication_date" @@ -3627,6 +3627,11 @@ msgstr "" msgid "slider_listing_appearance_description" msgstr "" +#: config/Blocks/ListingOptions/sliderTemplate +# defaultMessage: Card con immagine +msgid "slider_listing_appearance_imagecard" +msgstr "" + #: config/Blocks/ListingOptions/sliderTemplate # defaultMessage: Card semplice msgid "slider_listing_appearance_simplecard" @@ -3966,7 +3971,7 @@ msgstr "Buscar una estructura" msgid "uo_type" msgstr "Tipo" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Data di aggiornamento msgid "update_date" diff --git a/locales/fr/LC_MESSAGES/volto.po b/locales/fr/LC_MESSAGES/volto.po index 27be9a7d0..e58d967c2 100644 --- a/locales/fr/LC_MESSAGES/volto.po +++ b/locales/fr/LC_MESSAGES/volto.po @@ -78,7 +78,7 @@ msgstr "" msgid "Block style" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Vedi msgid "Card detail label" @@ -2777,7 +2777,7 @@ msgstr "" msgid "provvedimento_finale" msgstr "Disposition finale" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Data di pubblicazione msgid "publication_date" @@ -3635,6 +3635,11 @@ msgstr "" msgid "slider_listing_appearance_description" msgstr "" +#: config/Blocks/ListingOptions/sliderTemplate +# defaultMessage: Card con immagine +msgid "slider_listing_appearance_imagecard" +msgstr "" + #: config/Blocks/ListingOptions/sliderTemplate # defaultMessage: Card semplice msgid "slider_listing_appearance_simplecard" @@ -3974,7 +3979,7 @@ msgstr "Chercher une structure" msgid "uo_type" msgstr "Typologie" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Data di aggiornamento msgid "update_date" diff --git a/locales/it/LC_MESSAGES/volto.po b/locales/it/LC_MESSAGES/volto.po index fce217298..5ba66c4dd 100644 --- a/locales/it/LC_MESSAGES/volto.po +++ b/locales/it/LC_MESSAGES/volto.po @@ -61,7 +61,7 @@ msgstr "Titolo del blocco..." msgid "Block style" msgstr "Stile del blocco" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Vedi msgid "Card detail label" @@ -2760,7 +2760,7 @@ msgstr "Procedura informatizzata online" msgid "provvedimento_finale" msgstr "Provvedimento finale" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Data di pubblicazione msgid "publication_date" @@ -3618,6 +3618,11 @@ msgstr "Vai alla slide {index}" msgid "slider_listing_appearance_description" msgstr "" +#: config/Blocks/ListingOptions/sliderTemplate +# defaultMessage: Card con immagine +msgid "slider_listing_appearance_imagecard" +msgstr "" + #: config/Blocks/ListingOptions/sliderTemplate # defaultMessage: Card semplice msgid "slider_listing_appearance_simplecard" @@ -3957,7 +3962,7 @@ msgstr "Cerca una struttura" msgid "uo_type" msgstr "Tipologia" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Data di aggiornamento msgid "update_date" diff --git a/locales/volto.pot b/locales/volto.pot index f4b60caac..4fd842002 100644 --- a/locales/volto.pot +++ b/locales/volto.pot @@ -1,7 +1,7 @@ msgid "" msgstr "" "Project-Id-Version: Plone\n" -"POT-Creation-Date: 2024-02-01T10:01:31.687Z\n" +"POT-Creation-Date: 2024-02-01T13:43:41.048Z\n" "Last-Translator: Plone i18n \n" "Language-Team: Plone i18n \n" "MIME-Version: 1.0\n" @@ -63,7 +63,7 @@ msgstr "" msgid "Block style" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Vedi msgid "Card detail label" @@ -2762,7 +2762,7 @@ msgstr "" msgid "provvedimento_finale" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Data di pubblicazione msgid "publication_date" @@ -3620,6 +3620,11 @@ msgstr "" msgid "slider_listing_appearance_description" msgstr "" +#: config/Blocks/ListingOptions/sliderTemplate +# defaultMessage: Card con immagine +msgid "slider_listing_appearance_imagecard" +msgstr "" + #: config/Blocks/ListingOptions/sliderTemplate # defaultMessage: Card semplice msgid "slider_listing_appearance_simplecard" @@ -3959,7 +3964,7 @@ msgstr "" msgid "uo_type" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard +#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault #: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow # defaultMessage: Data di aggiornamento msgid "update_date" diff --git a/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx b/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx new file mode 100644 index 000000000..085642442 --- /dev/null +++ b/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx @@ -0,0 +1,178 @@ +/* + * componente per visulizzare un CT "Persona" nei Listing o in aclune pagine + */ +import React from 'react'; +import PropTypes from 'prop-types'; +import cx from 'classnames'; + +import { + Card, + CardBody, + CardTitle, + CardText, + Chip, + ChipLabel, +} from 'design-react-kit'; +import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable'; +import { UniversalLink } from '@plone/volto/components'; +import { flattenToAppURL } from '@plone/volto/helpers'; +import { CardCategory } from 'design-comuni-plone-theme/components/ItaliaTheme'; +import { + getCalendarDate, + getEventRecurrenceMore, + getComponentWithFallback, +} from 'design-comuni-plone-theme/helpers'; +import { getCategory } from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/utils'; + +import { + getItemIcon, + CardCalendar, + ListingCategory, + ListingImage, + ListingText, + CardPersona, +} from 'design-comuni-plone-theme/components/ItaliaTheme'; + +const CardWithImageDefault = (props) => { + const { + item, + index, + isEditMode, + always_show_image = false, + set_four_columns = false, + show_type = true, + show_section, + show_icon = true, + show_description = true, + show_topics = true, + hide_dates = false, + natural_image_size = false, + id_lighthouse, + rrule, + } = props; + + const imagesToShow = set_four_columns ? 4 : 3; + + const icon = show_icon ? getItemIcon(item) : null; + const date = hide_dates ? null : getCalendarDate(item, rrule.rrulestr); + const eventRecurrenceMore = hide_dates + ? null + : getEventRecurrenceMore(item, isEditMode); + const listingText = show_description ? : null; + + const image = ListingImage({ item }); + + const showImage = + (index < imagesToShow || always_show_image) && image != null; + const category = getCategory(item, show_type, show_section, props); + const topics = show_topics ? item.tassonomia_argomenti : null; + + const BlockExtraTags = getComponentWithFallback({ + name: 'BlockExtraTags', + dependencies: ['CardWithImageDefault', item['@type']], + }).component; + + return ( + <> + {item['@type'] === 'Persona' ? ( + + ) : ( + + {/* wrapperClassName="card-overlapping" */} + {showImage && ( +
+
+
{image}
+ {item['@type'] === 'Event' && ( + + )} +
+
+ )} + + {(icon || category || date) && ( + + + + )} + + + {item.title || item.id} + + + {listingText && ( + 0, + })} + > + {listingText} + + )} + + {topics?.length > 0 && ( +
+ {topics.map((argument, index) => ( + + + {argument.title} + + + ))} +
+ )} + + {eventRecurrenceMore} + + + )} + + ); +}; + +CardWithImageDefault.propTypes = { + item: PropTypes.any.isRequired, + isEditMode: PropTypes.bool, +}; + +export default injectLazyLibs(['rrule'])(CardWithImageDefault); diff --git a/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx index e8ece7bdc..adf4b0f4c 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx @@ -5,64 +5,24 @@ import React from 'react'; import PropTypes from 'prop-types'; import cx from 'classnames'; -import { - Container, - Row, - Col, - Card, - CardBody, - CardTitle, - CardText, - Chip, - ChipLabel, -} from 'design-react-kit'; -import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable'; -import { UniversalLink } from '@plone/volto/components'; -import { flattenToAppURL } from '@plone/volto/helpers'; -import { - CardCategory, - ListingLinkMore, -} from 'design-comuni-plone-theme/components/ItaliaTheme'; -import { - getCalendarDate, - getEventRecurrenceMore, - getComponentWithFallback, -} from 'design-comuni-plone-theme/helpers'; -import { getCategory } from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/utils'; +import { Container, Row, Col } from 'design-react-kit'; +import { ListingLinkMore } from 'design-comuni-plone-theme/components/ItaliaTheme'; -import { - getItemIcon, - CardCalendar, - ListingCategory, - ListingImage, - ListingText, - CardPersona, -} from 'design-comuni-plone-theme/components/ItaliaTheme'; +import CardWithImageDefault from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault'; const CardWithImageTemplate = (props) => { const { items, - isEditMode, title, linkAlign, linkTitle, linkHref, show_block_bg = false, - always_show_image = false, set_four_columns = false, - show_type = true, - show_section, - show_icon = true, - show_description = true, - show_topics = true, - hide_dates = false, - natural_image_size = false, - id_lighthouse, linkmore_id_lighthouse, titleLine, - rrule, } = props; - const imagesToShow = set_four_columns ? 4 : 3; + return (
@@ -82,28 +42,6 @@ const CardWithImageTemplate = (props) => { )} {items.map((item, index) => { - const icon = show_icon ? getItemIcon(item) : null; - const date = hide_dates - ? null - : getCalendarDate(item, rrule.rrulestr); - const eventRecurrenceMore = hide_dates - ? null - : getEventRecurrenceMore(item, isEditMode); - const listingText = show_description ? ( - - ) : null; - - const image = ListingImage({ item }); - - const showImage = - (index < imagesToShow || always_show_image) && image != null; - const category = getCategory(item, show_type, show_section, props); - const topics = show_topics ? item.tassonomia_argomenti : null; - - const BlockExtraTags = getComponentWithFallback({ - name: 'BlockExtraTags', - dependencies: ['CardWithImageTemplate', item['@type']], - }).component; const layoutSelected = set_four_columns ? '3' : '4'; return ( @@ -113,105 +51,7 @@ const CardWithImageTemplate = (props) => { key={item['@id']} className="col-item mb-3" > - {item['@type'] === 'Persona' ? ( - - ) : ( - - {/* wrapperClassName="card-overlapping" */} - {showImage && ( -
-
-
{image}
- {item['@type'] === 'Event' && ( - - )} -
-
- )} - - {(icon || category || date) && ( - - - - )} - - - {item.title || item.id} - - - {listingText && ( - 0, - })} - > - {listingText} - - )} - - {topics?.length > 0 && ( -
- {topics.map((argument, index) => ( - - - - {argument.title} - - - - ))} -
- )} - - {eventRecurrenceMore} - - - )} + ); })} @@ -236,4 +76,4 @@ CardWithImageTemplate.propTypes = { title: PropTypes.string, }; -export default injectLazyLibs(['rrule'])(CardWithImageTemplate); +export default CardWithImageTemplate; diff --git a/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard.jsx b/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault.jsx similarity index 96% rename from src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard.jsx rename to src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault.jsx index abd81c7bf..1fcd2b19b 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault.jsx @@ -38,7 +38,7 @@ const messages = defineMessages({ }, }); -const SimpleCard = (props) => { +const SimpleCardDefault = (props) => { const intl = useIntl(); moment.locale(intl.locale); @@ -88,7 +88,7 @@ const SimpleCard = (props) => { const BlockExtraTags = getComponentWithFallback({ name: 'BlockExtraTags', - dependencies: ['SimpleCard', type], + dependencies: ['SimpleCardDefault', type], }).component; return ( @@ -166,9 +166,9 @@ const SimpleCard = (props) => { ); }; -SimpleCard.propTypes = { +SimpleCardDefault.propTypes = { item: PropTypes.any.isRequired, isEditMode: PropTypes.bool, }; -export default injectLazyLibs(['rrule'])(SimpleCard); +export default injectLazyLibs(['rrule'])(SimpleCardDefault); diff --git a/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault.jsx b/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault.jsx index 23bdbef92..e3bb75e03 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import cx from 'classnames'; import { Button, Row, Col } from 'design-react-kit'; -import SimpleCard from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCard'; +import SimpleCardDefault from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault'; import { ListingLinkMore } from 'design-comuni-plone-theme/components/ItaliaTheme'; const SimpleCardTemplateDefault = (props) => { @@ -109,7 +109,7 @@ const SimpleCardTemplateDefault = (props) => {
{items.map((item, index) => ( - + ))}
diff --git a/src/components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault.jsx b/src/components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault.jsx new file mode 100644 index 000000000..a52d9067b --- /dev/null +++ b/src/components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault.jsx @@ -0,0 +1,52 @@ +import React from 'react'; +import { UniversalLink } from '@plone/volto/components'; +import { Container } from 'design-react-kit'; +import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme'; + +const SlideItemDefault = ({ + item, + index, + image, + show_image_title, + full_width, + intl, + setUserAutoplay, + userAutoplay, + slider, + messages, + handleKeyboardUsers, +}) => { + return ( + + {image ? ( +
{image}
+ ) : ( +
+ )} + {show_image_title && ( +
+ + {full_width ? ( + + {item.title} + + ) : ( + <> + {item.title} + + )} + +
+ )} + + ); +}; + +export default SlideItemDefault; diff --git a/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx index badf03459..75efb4b87 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx @@ -2,6 +2,7 @@ * Slider */ import 'slick-carousel/slick/slick.css'; +import config from '@plone/volto/registry'; import 'design-comuni-plone-theme/components/slick-carousel/slick/slick-theme.css'; import { Col, Container, Row } from 'design-react-kit'; import { @@ -16,7 +17,6 @@ import { import React, { useState } from 'react'; import { defineMessages, useIntl } from 'react-intl'; import PropTypes from 'prop-types'; -import { UniversalLink } from '@plone/volto/components'; import cx from 'classnames'; import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable'; @@ -134,17 +134,8 @@ function PrevArrow(props) { ); } -const Slide = ({ - item, - index, - image, - show_image_title, - full_width, - intl, - setUserAutoplay, - userAutoplay, - slider, -}) => { +const Slide = (props) => { + const { item, index, appearance, appearanceProp } = props; const handleKeyboardUsers = (e) => { const { key, shiftKey } = e; if (key === 'Tab') { @@ -161,40 +152,24 @@ const Slide = ({ } }; + const appearances = config.blocks.blocksConfig.listing.variations.filter( + (v) => v.id === 'slider', + )[0]?.appearance; + const SlideItemAppearance = appearances[appearance] ?? appearances['default']; + return (
-
- {image ? ( -
{image}
- ) : ( -
- )} - {show_image_title && ( -
- - {full_width ? ( - - {item.title} - - ) : ( - <> - {item.title} - - )} - -
- )} +
+
); @@ -213,7 +188,9 @@ const SliderTemplate = ({ show_dots = true, autoplay = false, autoplay_speed = 2, //seconds + slide_appearance = 'default', reactSlick, + ...appearanceProp }) => { const intl = useIntl(); const [userAutoplay, setUserAutoplay] = useState(autoplay); @@ -311,6 +288,7 @@ const SliderTemplate = ({
@@ -367,6 +345,8 @@ const SliderTemplate = ({ setUserAutoplay={setUserAutoplay} userAutoplay={userAutoplay} slider={slider} + appearance={slide_appearance} + appearanceProp={appearanceProp} /> ); })} diff --git a/src/config/Blocks/ListingOptions/cardWithImageTemplate.js b/src/config/Blocks/ListingOptions/cardWithImageTemplate.js index 344c4c35e..dc5356afa 100644 --- a/src/config/Blocks/ListingOptions/cardWithImageTemplate.js +++ b/src/config/Blocks/ListingOptions/cardWithImageTemplate.js @@ -38,6 +38,19 @@ export const addCardWithImageTemplateOptions = ( pos = addDefaultOptions(schema, formData, intl, pos); + pos = imageCardTemplateOptions(schema, formData, intl, position); + + return pos; +}; + +export const imageCardTemplateOptions = ( + schema, + formData, + intl, + position, + hide_fields = [], //array of string +) => { + let pos = position; pos = templatesOptions( schema, formData, @@ -52,7 +65,7 @@ export const addCardWithImageTemplateOptions = ( 'hide_dates', 'show_description', 'show_topics', - ], + ].filter((f) => hide_fields.indexOf(f) < 0), { always_show_image: { default: false, @@ -72,6 +85,5 @@ export const addCardWithImageTemplateOptions = ( }, pos, ); - return pos; }; diff --git a/src/config/Blocks/ListingOptions/simpleCardTemplate.js b/src/config/Blocks/ListingOptions/simpleCardTemplate.js index 1ab7e0321..3d3717ec6 100644 --- a/src/config/Blocks/ListingOptions/simpleCardTemplate.js +++ b/src/config/Blocks/ListingOptions/simpleCardTemplate.js @@ -94,6 +94,7 @@ export const simpleCardTemplateOptions_appearance_default = ( formData, intl, position, + hide_fields = [], //array of string ) => { let pos = position; pos = templatesOptions( @@ -108,7 +109,7 @@ export const simpleCardTemplateOptions_appearance_default = ( 'show_description', 'show_detail_link', 'show_path_filters', - ], + ].filter((f) => hide_fields.indexOf(f) < 0), { hide_dates: { default: false }, show_icon: { default: true }, diff --git a/src/config/Blocks/ListingOptions/sliderTemplate.js b/src/config/Blocks/ListingOptions/sliderTemplate.js index 2a1a871ef..5eb3c16a8 100644 --- a/src/config/Blocks/ListingOptions/sliderTemplate.js +++ b/src/config/Blocks/ListingOptions/sliderTemplate.js @@ -2,6 +2,7 @@ import { defineMessages } from 'react-intl'; import { addSchemaField } from 'design-comuni-plone-theme/config/Blocks/ListingOptions'; import { simpleCardTemplateOptions_appearance_default } from 'design-comuni-plone-theme/config/Blocks/ListingOptions/simpleCardTemplate'; +import { imageCardTemplateOptions } from 'design-comuni-plone-theme/config/Blocks/ListingOptions/cardWithImageTemplate'; const messages = defineMessages({ show_full_width: { @@ -45,9 +46,14 @@ const messages = defineMessages({ id: 'slider_listing_appearance_simplecard', defaultMessage: 'Card semplice', }, + slider_listing_appearance_imagecard: { + id: 'slider_listing_appearance_imagecard', + defaultMessage: 'Card con immagine', + }, }); export const SliderTemplateAppearance_SIMPLECARD = 'simple_card'; +export const SliderTemplateAppearance_IMAGECARD = 'image_card'; export const addSliderTemplateOptions = ( schema, @@ -113,11 +119,15 @@ export const addSliderTemplateOptions = ( SliderTemplateAppearance_SIMPLECARD, intl.formatMessage(messages.slider_listing_appearance_simplecard), ], + [ + SliderTemplateAppearance_IMAGECARD, + intl.formatMessage(messages.slider_listing_appearance_imagecard), + ], ]; addSchemaField( schema, - 'appearance', + 'slide_appearance', intl.formatMessage(messages.appearance), intl.formatMessage(messages.slider_listing_appearance_description), { @@ -127,8 +137,13 @@ export const addSliderTemplateOptions = ( ); pos++; - if (formData.appearance === SliderTemplateAppearance_SIMPLECARD) { - simpleCardTemplateOptions_appearance_default(schema, formData, intl, pos); + if (formData.slide_appearance === SliderTemplateAppearance_SIMPLECARD) { + simpleCardTemplateOptions_appearance_default(schema, formData, intl, pos, [ + 'show_path_filters', + ]); + pos++; + } else if (formData.slide_appearance === SliderTemplateAppearance_IMAGECARD) { + imageCardTemplateOptions(schema, formData, intl, pos, ['set_four_columns']); pos++; } else { addSchemaField( diff --git a/src/config/Blocks/listingVariations.js b/src/config/Blocks/listingVariations.js index 59c5a6614..a13ac961a 100644 --- a/src/config/Blocks/listingVariations.js +++ b/src/config/Blocks/listingVariations.js @@ -26,6 +26,9 @@ import PhotogalleryTemplateSkeleton from 'design-comuni-plone-theme/components/I import SliderTemplate from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/SliderTemplate'; import SliderTemplateSkeleton from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/TemplatesSkeletons/SliderTemplateSkeleton'; +import SlideItemDefault from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault'; +import SlideItemSimpleCard from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault'; +import SlideItemImageCard from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault'; import GridGalleryTemplate from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/GridGalleryTemplate'; import GridGalleryTemplateSkeleton from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/TemplatesSkeletons/GridGalleryTemplateSkeleton'; @@ -226,6 +229,11 @@ const italiaListingVariations = [ return schema; }, cloneData: cloneBlock, + appearance: { + default: SlideItemDefault, + simple_card: SlideItemSimpleCard, + image_card: SlideItemImageCard, + }, }, { id: 'gridGalleryTemplate', diff --git a/src/theme/ItaliaTheme/Blocks/_sliderTemplate.scss b/src/theme/ItaliaTheme/Blocks/_sliderTemplate.scss index f1919538b..e2eeadd12 100644 --- a/src/theme/ItaliaTheme/Blocks/_sliderTemplate.scss +++ b/src/theme/ItaliaTheme/Blocks/_sliderTemplate.scss @@ -146,6 +146,29 @@ margin-bottom: 0; } + &.appearance_image_card { + .slick-track { + align-items: start; + } + + .listing-item { + .img-responsive-wrapper { + &.natural-image-size { + .img-responsive { + position: static; + height: auto; + padding: 0; + + figure.img-wrapper { + position: static; + margin: 0; + } + } + } + } + } + } + .slider-container.full-width { .slick-arrow.slick-prev { z-index: 1; From 3aa3506d33becd0470e0d9fa9c39f318869be1d4 Mon Sep 17 00:00:00 2001 From: Giulia Ghisini Date: Fri, 2 Feb 2024 12:35:18 +0100 Subject: [PATCH 03/15] fix: infos --- .../Blocks/Listing/CardWithImage/CardWithImageDefault.jsx | 2 +- .../ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx | 2 +- src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx | 2 +- src/config/Blocks/ListingOptions/cardWithImageTemplate.js | 4 ++++ 4 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx b/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx index 085642442..d47aee95b 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx @@ -1,5 +1,5 @@ /* - * componente per visulizzare un CT "Persona" nei Listing o in aclune pagine + * componente per visulizzare un elemento del template 'Card con immagine' del blocco listing con l'aspetto di default. */ import React from 'react'; import PropTypes from 'prop-types'; diff --git a/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx index adf4b0f4c..5e7e9dfb0 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx @@ -1,5 +1,5 @@ /* - * componente per visulizzare un CT "Persona" nei Listing o in aclune pagine + * componente per visulizzare i risultati del blocco Listing con il template 'Card con immagine' */ import React from 'react'; import PropTypes from 'prop-types'; diff --git a/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx index 75efb4b87..d9db1f7af 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx @@ -2,7 +2,6 @@ * Slider */ import 'slick-carousel/slick/slick.css'; -import config from '@plone/volto/registry'; import 'design-comuni-plone-theme/components/slick-carousel/slick/slick-theme.css'; import { Col, Container, Row } from 'design-react-kit'; import { @@ -19,6 +18,7 @@ import { defineMessages, useIntl } from 'react-intl'; import PropTypes from 'prop-types'; import cx from 'classnames'; import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable'; +import config from '@plone/volto/registry'; const messages = defineMessages({ viewImage: { diff --git a/src/config/Blocks/ListingOptions/cardWithImageTemplate.js b/src/config/Blocks/ListingOptions/cardWithImageTemplate.js index dc5356afa..2e68aaddb 100644 --- a/src/config/Blocks/ListingOptions/cardWithImageTemplate.js +++ b/src/config/Blocks/ListingOptions/cardWithImageTemplate.js @@ -43,6 +43,10 @@ export const addCardWithImageTemplateOptions = ( return pos; }; +/*questa funzione è riutilizzabile. +Serve per fare in modo che le opzioni relative alla visualizzazione di ogni singola card, +si possano riutilizzare in altre variations del blocco listing, dove appunto viene riutilizzato il componente di visualizzazione dell'elemento. +Ad esempio, è stato usato anche nella variazione 'slider' per poter mostrare gli elementi con aspetto 'Card con immagine'.*/ export const imageCardTemplateOptions = ( schema, formData, From 5763f94a582938f142dba12b966ad3948c61d916 Mon Sep 17 00:00:00 2001 From: Giulia Ghisini Date: Fri, 2 Feb 2024 14:41:16 +0100 Subject: [PATCH 04/15] fix: styles --- .../CardWithImage/CardWithImageDefault.jsx | 9 +- .../SimpleCard/Card/SimpleCardDefault.jsx | 4 +- .../Blocks/_cardWithImageAndInEvidence.scss | 92 ++++++++---- .../Blocks/_simpleCardTemplate.scss | 132 +++++++++--------- .../ItaliaTheme/Blocks/_sliderTemplate.scss | 69 +++++++-- 5 files changed, 195 insertions(+), 111 deletions(-) diff --git a/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx b/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx index d47aee95b..6bdc80fd9 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx @@ -87,9 +87,12 @@ const CardWithImageDefault = (props) => { /> ) : ( {/* wrapperClassName="card-overlapping" */} {showImage && ( diff --git a/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault.jsx b/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault.jsx index 1fcd2b19b..5d3ed23a9 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault.jsx @@ -93,7 +93,9 @@ const SimpleCardDefault = (props) => { return ( div { + height: 100%; + } + + .it-single-slide-wrapper { + height: 100%; + .slide-wrapper { + height: 100%; + + > .card, + > .card-wrapper { + height: 100%; + } + } + } + } + } } + } - .listing-item { - .img-responsive-wrapper { - &.natural-image-size { - .img-responsive { - position: static; - height: auto; - padding: 0; - - figure.img-wrapper { - position: static; - margin: 0; + &.appearance_image_card { + .slider-container { + .slick-track { + align-items: start; + } + .slick-slide { + .slide-wrapper { + .listing-item { + .img-responsive-wrapper { + .img-wrapper { + height: 100%; + position: absolute; + img { + min-height: unset !important; + min-width: unset !important; + } + } + + &.natural-image-size { + .img-responsive { + position: static; + height: auto; + padding: 0; + + figure.img-wrapper { + position: static; + margin: 0; + } + } + } } } } From 2d6ff0a19d1fa9fd2d29f32520c00ab4c43469cc Mon Sep 17 00:00:00 2001 From: Giulia Ghisini Date: Mon, 5 Feb 2024 10:47:06 +0100 Subject: [PATCH 05/15] chore: splitted cardWithImageAndInEvidence.scss file --- .../ListingOptions/cardWithImageTemplate.js | 2 +- ...AndInEvidence.scss => _cardWithImage.scss} | 3 +- .../Blocks/_inevidencetemplate.scss | 91 ++++++++++++++++++- src/theme/site.scss | 4 +- 4 files changed, 94 insertions(+), 6 deletions(-) rename src/theme/ItaliaTheme/Blocks/{_cardWithImageAndInEvidence.scss => _cardWithImage.scss} (97%) diff --git a/src/config/Blocks/ListingOptions/cardWithImageTemplate.js b/src/config/Blocks/ListingOptions/cardWithImageTemplate.js index 2e68aaddb..76f4d0607 100644 --- a/src/config/Blocks/ListingOptions/cardWithImageTemplate.js +++ b/src/config/Blocks/ListingOptions/cardWithImageTemplate.js @@ -38,7 +38,7 @@ export const addCardWithImageTemplateOptions = ( pos = addDefaultOptions(schema, formData, intl, pos); - pos = imageCardTemplateOptions(schema, formData, intl, position); + pos = imageCardTemplateOptions(schema, formData, intl, pos); return pos; }; diff --git a/src/theme/ItaliaTheme/Blocks/_cardWithImageAndInEvidence.scss b/src/theme/ItaliaTheme/Blocks/_cardWithImage.scss similarity index 97% rename from src/theme/ItaliaTheme/Blocks/_cardWithImageAndInEvidence.scss rename to src/theme/ItaliaTheme/Blocks/_cardWithImage.scss index 2bf5a0dfb..32d17513d 100644 --- a/src/theme/ItaliaTheme/Blocks/_cardWithImageAndInEvidence.scss +++ b/src/theme/ItaliaTheme/Blocks/_cardWithImage.scss @@ -1,5 +1,4 @@ -.block.listing .card-with-image-template, -.block.listing .in-evidence { +.block.listing .card-with-image-template { .col-item { margin-bottom: 22px; } diff --git a/src/theme/ItaliaTheme/Blocks/_inevidencetemplate.scss b/src/theme/ItaliaTheme/Blocks/_inevidencetemplate.scss index f8385a780..9aba74934 100644 --- a/src/theme/ItaliaTheme/Blocks/_inevidencetemplate.scss +++ b/src/theme/ItaliaTheme/Blocks/_inevidencetemplate.scss @@ -1,4 +1,93 @@ -.in-evidence { +.block.listing .in-evidence { + .col-item { + margin-bottom: 22px; + } + + .icon { + width: 32px; + height: 32px; + } + + .listing-item { + a { + display: inline; + } + + .img-responsive-wrapper { + width: inherit; + + .img-responsive { + .img-wrapper { + display: flex; + align-items: center; + + picture { + display: flex; + width: 100%; + height: 100%; + } + + img { + margin-right: 0; + } + } + } + + &.natural-image-size { + .img-responsive { + position: static; + height: auto; + padding: 0; + + figure.img-wrapper { + position: static; + margin: 0; + } + } + } + } + + .img-link { + &:after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: transparentize($color: white, $amount: 1); + content: ''; + transition: 0.2s background-color ease; + } + + &:hover, + &:focus { + &:after { + background-color: transparentize($color: white, $amount: 0.9); + } + } + } + + .card-title { + a { + display: inline; + width: initial; + color: $body-color; + text-decoration: none; + transition: 0.2s color ease; + + &:hover, + &:focus { + color: $link-color; + text-decoration: underline; + } + } + } + + .event-recurrences-more { + bottom: $v-gap * 3; + } + } + .in-evidence-cards-wrapper { display: -ms-grid; display: grid; diff --git a/src/theme/site.scss b/src/theme/site.scss index 322278aca..aa347fcfe 100644 --- a/src/theme/site.scss +++ b/src/theme/site.scss @@ -54,7 +54,7 @@ @import 'ItaliaTheme/Blocks/iconBlocks'; @import 'ItaliaTheme/Blocks/imageBlock'; @import 'ItaliaTheme/Blocks/searchSections'; -@import 'ItaliaTheme/Blocks/cardWithImageAndInEvidence'; +@import 'ItaliaTheme/Blocks/cardWithImage'; @import 'ItaliaTheme/Blocks/cardWithImageTextBlock'; @import 'ItaliaTheme/Blocks/cardWithSlideUpTextTemplate'; @import 'ItaliaTheme/Blocks/smallblockLinkstemplate'; @@ -62,7 +62,7 @@ @import 'ItaliaTheme/Blocks/squaresImageTemplate'; @import 'ItaliaTheme/Blocks/photogallerytemplate'; @import 'ItaliaTheme/Blocks/sliderTemplate'; -@import 'ItaliaTheme/Blocks/inevidencetemplate'; +@import 'ItaliaTheme/Blocks/inEvidenceTemplate'; @import 'ItaliaTheme/Blocks/contentInEvidenceTemplate'; @import 'ItaliaTheme/Blocks/mapTemplate'; @import 'ItaliaTheme/Blocks/bandiInEvidenceTemplate'; From f895a7b0460fddc6a209504440a5418dc00e4262 Mon Sep 17 00:00:00 2001 From: Giulia Ghisini <51911425+giuliaghisini@users.noreply.github.com> Date: Mon, 5 Feb 2024 10:54:21 +0100 Subject: [PATCH 06/15] chore: Rename _inevidencetemplate.scss to _inEvidenceTemplate.scss --- .../Blocks/{_inevidencetemplate.scss => _inEvidenceTemplate.scss} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/theme/ItaliaTheme/Blocks/{_inevidencetemplate.scss => _inEvidenceTemplate.scss} (100%) diff --git a/src/theme/ItaliaTheme/Blocks/_inevidencetemplate.scss b/src/theme/ItaliaTheme/Blocks/_inEvidenceTemplate.scss similarity index 100% rename from src/theme/ItaliaTheme/Blocks/_inevidencetemplate.scss rename to src/theme/ItaliaTheme/Blocks/_inEvidenceTemplate.scss From ddd50090bdce687109c35c1d1dd62f1c8b2fd1f2 Mon Sep 17 00:00:00 2001 From: Giulia Ghisini Date: Mon, 5 Feb 2024 11:47:58 +0100 Subject: [PATCH 07/15] fix: avoid items repeat if nSlides is lower than results lenght --- src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx | 5 ++++- src/theme/ItaliaTheme/Blocks/_sliderTemplate.scss | 4 ++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx index d9db1f7af..737377f8f 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx @@ -194,7 +194,10 @@ const SliderTemplate = ({ }) => { const intl = useIntl(); const [userAutoplay, setUserAutoplay] = useState(autoplay); - const nSlidesToShow = parseInt(slidesToShow); + const nSlidesToShow = + items.length < parseInt(slidesToShow) + ? items.length + : parseInt(slidesToShow); const Slider = reactSlick.default; const { slider, focusNext } = useSlider(userAutoplay); const toggleAutoplay = () => { diff --git a/src/theme/ItaliaTheme/Blocks/_sliderTemplate.scss b/src/theme/ItaliaTheme/Blocks/_sliderTemplate.scss index 5beabd097..17473f61e 100644 --- a/src/theme/ItaliaTheme/Blocks/_sliderTemplate.scss +++ b/src/theme/ItaliaTheme/Blocks/_sliderTemplate.scss @@ -168,6 +168,10 @@ > .card-wrapper { height: 100%; } + + > .card { + margin: 0.5rem 0; + } } } } From 55e9dcd7c733b589c7e6f8f2ff9e4bb39a6cfda8 Mon Sep 17 00:00:00 2001 From: Giulia Ghisini Date: Thu, 22 Feb 2024 12:52:25 +0100 Subject: [PATCH 08/15] fix: a11y --- locales/de/LC_MESSAGES/volto.po | 10 +++ locales/en/LC_MESSAGES/volto.po | 10 +++ locales/es/LC_MESSAGES/volto.po | 10 +++ locales/fr/LC_MESSAGES/volto.po | 10 +++ locales/it/LC_MESSAGES/volto.po | 10 +++ locales/volto.pot | 12 ++- .../Blocks/Listing/SliderTemplate.jsx | 75 ++++++++++++------- .../ItaliaTheme/Blocks/_sliderTemplate.scss | 12 ++- yarn.lock | 20 ++--- 9 files changed, 128 insertions(+), 41 deletions(-) diff --git a/locales/de/LC_MESSAGES/volto.po b/locales/de/LC_MESSAGES/volto.po index a06233a7c..4f1056db9 100644 --- a/locales/de/LC_MESSAGES/volto.po +++ b/locales/de/LC_MESSAGES/volto.po @@ -1141,6 +1141,16 @@ msgstr "" msgid "card_width_image" msgstr "" +#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +# defaultMessage: Carosello +msgid "carousel" +msgstr "" + +#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +# defaultMessage: Slide +msgid "carouselSlide" +msgstr "" + #: components/ItaliaTheme/View/CartellaModulisticaView/CartellaModulisticaView # defaultMessage: Formati scaricabili msgid "cartellamodulistica_formati_scaricabili" diff --git a/locales/en/LC_MESSAGES/volto.po b/locales/en/LC_MESSAGES/volto.po index d7725c5a4..f1e0f6738 100644 --- a/locales/en/LC_MESSAGES/volto.po +++ b/locales/en/LC_MESSAGES/volto.po @@ -1126,6 +1126,16 @@ msgstr "Read more" msgid "card_width_image" msgstr "" +#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +# defaultMessage: Carosello +msgid "carousel" +msgstr "" + +#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +# defaultMessage: Slide +msgid "carouselSlide" +msgstr "" + #: components/ItaliaTheme/View/CartellaModulisticaView/CartellaModulisticaView # defaultMessage: Formati scaricabili msgid "cartellamodulistica_formati_scaricabili" diff --git a/locales/es/LC_MESSAGES/volto.po b/locales/es/LC_MESSAGES/volto.po index 405da04c3..36bab9aa1 100644 --- a/locales/es/LC_MESSAGES/volto.po +++ b/locales/es/LC_MESSAGES/volto.po @@ -1135,6 +1135,16 @@ msgstr "Leer mas" msgid "card_width_image" msgstr "Tarjeta con imagen" +#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +# defaultMessage: Carosello +msgid "carousel" +msgstr "" + +#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +# defaultMessage: Slide +msgid "carouselSlide" +msgstr "" + #: components/ItaliaTheme/View/CartellaModulisticaView/CartellaModulisticaView # defaultMessage: Formati scaricabili msgid "cartellamodulistica_formati_scaricabili" diff --git a/locales/fr/LC_MESSAGES/volto.po b/locales/fr/LC_MESSAGES/volto.po index e58d967c2..876efb2f4 100644 --- a/locales/fr/LC_MESSAGES/volto.po +++ b/locales/fr/LC_MESSAGES/volto.po @@ -1143,6 +1143,16 @@ msgstr "" msgid "card_width_image" msgstr "" +#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +# defaultMessage: Carosello +msgid "carousel" +msgstr "" + +#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +# defaultMessage: Slide +msgid "carouselSlide" +msgstr "" + #: components/ItaliaTheme/View/CartellaModulisticaView/CartellaModulisticaView # defaultMessage: Formati scaricabili msgid "cartellamodulistica_formati_scaricabili" diff --git a/locales/it/LC_MESSAGES/volto.po b/locales/it/LC_MESSAGES/volto.po index 5ba66c4dd..23ed970c3 100644 --- a/locales/it/LC_MESSAGES/volto.po +++ b/locales/it/LC_MESSAGES/volto.po @@ -1126,6 +1126,16 @@ msgstr "Vedi" msgid "card_width_image" msgstr "Card con immagine" +#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +# defaultMessage: Carosello +msgid "carousel" +msgstr "" + +#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +# defaultMessage: Slide +msgid "carouselSlide" +msgstr "" + #: components/ItaliaTheme/View/CartellaModulisticaView/CartellaModulisticaView # defaultMessage: Formati scaricabili msgid "cartellamodulistica_formati_scaricabili" diff --git a/locales/volto.pot b/locales/volto.pot index 4fd842002..a88173918 100644 --- a/locales/volto.pot +++ b/locales/volto.pot @@ -1,7 +1,7 @@ msgid "" msgstr "" "Project-Id-Version: Plone\n" -"POT-Creation-Date: 2024-02-01T13:43:41.048Z\n" +"POT-Creation-Date: 2024-02-22T11:52:48.638Z\n" "Last-Translator: Plone i18n \n" "Language-Team: Plone i18n \n" "MIME-Version: 1.0\n" @@ -1128,6 +1128,16 @@ msgstr "" msgid "card_width_image" msgstr "" +#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +# defaultMessage: Carosello +msgid "carousel" +msgstr "" + +#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +# defaultMessage: Slide +msgid "carouselSlide" +msgstr "" + #: components/ItaliaTheme/View/CartellaModulisticaView/CartellaModulisticaView # defaultMessage: Formati scaricabili msgid "cartellamodulistica_formati_scaricabili" diff --git a/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx index 737377f8f..f1147f3d7 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx @@ -28,11 +28,11 @@ const messages = defineMessages({ }, play: { id: 'Play slider', - defaultMessage: 'Seleziona per riprodurre', + defaultMessage: 'Seleziona per riprodurre lo slider', }, pause: { id: 'Pause slider', - defaultMessage: 'Seleziona per mettere in pausa', + defaultMessage: 'Seleziona per mettere in pausa lo slider', }, precedente: { id: 'precedente', @@ -50,6 +50,11 @@ const messages = defineMessages({ id: 'slideDot', defaultMessage: 'Vai alla slide {index}', }, + carousel: { id: 'carousel', defaultMessage: 'Carosello' }, + carouselSlide: { + id: 'carouselSlide', + defaultMessage: 'Slide', + }, }); function NextArrow(props) { @@ -135,7 +140,7 @@ function PrevArrow(props) { } const Slide = (props) => { - const { item, index, appearance, appearanceProp } = props; + const { item, index, appearance, appearanceProp, intl } = props; const handleKeyboardUsers = (e) => { const { key, shiftKey } = e; if (key === 'Tab') { @@ -162,6 +167,10 @@ const Slide = (props) => { className="it-single-slide-wrapper" key={item['@id'] + index} data-slide={index} + role="group" + aria-label={ + intl.formatMessage(messages.carouselSlide) + ' ' + (index + 1) + } >
)} - - {items.map((item, index) => { - const image = ListingImage({ - item, - loading: index === 0 ? 'eager' : 'lazy', - sizes: `max-width(991px) 620px, ${1300 / nSlidesToShow}px`, - critical: true, - }); - return ( - - ); - })} - +
+ + {items.map((item, index) => { + const image = ListingImage({ + item, + loading: index === 0 ? 'eager' : 'lazy', + sizes: `max-width(991px) 620px, ${1300 / nSlidesToShow}px`, + critical: true, + }); + return ( + + ); + })} + +
diff --git a/src/theme/ItaliaTheme/Blocks/_sliderTemplate.scss b/src/theme/ItaliaTheme/Blocks/_sliderTemplate.scss index 17473f61e..e03c49853 100644 --- a/src/theme/ItaliaTheme/Blocks/_sliderTemplate.scss +++ b/src/theme/ItaliaTheme/Blocks/_sliderTemplate.scss @@ -155,12 +155,14 @@ .slick-slide { height: auto; + > div { height: 100%; } .it-single-slide-wrapper { height: 100%; + .slide-wrapper { height: 100%; @@ -172,6 +174,10 @@ > .card { margin: 0.5rem 0; } + + .shadow { + box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15) !important; + } } } } @@ -184,16 +190,18 @@ .slick-track { align-items: start; } + .slick-slide { .slide-wrapper { .listing-item { .img-responsive-wrapper { .img-wrapper { - height: 100%; position: absolute; + height: 100%; + img { - min-height: unset !important; min-width: unset !important; + min-height: unset !important; } } diff --git a/yarn.lock b/yarn.lock index 98d8c880b..8467bc4dd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12,6 +12,15 @@ __metadata: languageName: node linkType: hard +"@accessible360/accessible-slick@npm:1.0.1": + version: 1.0.1 + resolution: "@accessible360/accessible-slick@npm:1.0.1" + peerDependencies: + jquery: ">=1.8.0" + checksum: fc0b3f11b2c6110ce39074ff705fb57f0bf91006b5450377e2f7012d29debe030aef407f3bdab45b7937fd89f7411324c4f8733ac235c19088ca6b9637fa93b6 + languageName: node + linkType: hard + "@ampproject/remapping@npm:^2.1.0": version: 2.2.0 resolution: "@ampproject/remapping@npm:2.2.0" @@ -6520,6 +6529,7 @@ __metadata: version: 0.0.0-use.local resolution: "design-comuni-plone-theme@workspace:." dependencies: + "@accessible360/accessible-slick": 1.0.1 "@babel/core": 7.19.6 "@babel/eslint-parser": 7.23.3 "@babel/plugin-proposal-export-default-from": 7.18.9 @@ -6562,7 +6572,6 @@ __metadata: react-select: ^4.3.1 react-slick: ^0.29.0 release-it: 16.1.3 - slick-carousel: 1.8.1 stylelint: 15.11.0 stylelint-config-idiomatic-order: 9.0.0 stylelint-prettier: 4.0.2 @@ -12983,15 +12992,6 @@ __metadata: languageName: node linkType: hard -"slick-carousel@npm:1.8.1": - version: 1.8.1 - resolution: "slick-carousel@npm:1.8.1" - peerDependencies: - jquery: ">=1.8.0" - checksum: acaad391e4d8bc1c7fdb8d361faa1f1d60829b31d618b54bc38c0550a59b26de36537e0ab4bc0364176ec11d1a61d0cf11e99d8d5b1285d656673c9a1a719257 - languageName: node - linkType: hard - "smart-buffer@npm:^4.2.0": version: 4.2.0 resolution: "smart-buffer@npm:4.2.0" From 9907cad708974ad0823c6459268fecd0706c1fcf Mon Sep 17 00:00:00 2001 From: Giulia Ghisini Date: Thu, 22 Feb 2024 16:14:13 +0100 Subject: [PATCH 09/15] fix: slider a11y --- locales/de/LC_MESSAGES/volto.po | 38 +--- locales/en/LC_MESSAGES/volto.po | 38 +--- locales/es/LC_MESSAGES/volto.po | 38 +--- locales/fr/LC_MESSAGES/volto.po | 38 +--- locales/it/LC_MESSAGES/volto.po | 38 +--- locales/volto.pot | 40 +--- .../ItaliaTheme/Blocks/Calendar/Body.jsx | 68 ++---- .../Blocks/Listing/Commons/NextArrow.jsx | 10 - .../Blocks/Listing/Commons/PrevArrow.jsx | 10 - .../Blocks/Listing/PhotogalleryTemplate.jsx | 60 +++--- .../Blocks/Listing/SliderTemplate.jsx | 198 +++++++----------- .../ItaliaTheme/Blocks/VideoGallery/Body.jsx | 58 +---- .../ItaliaTheme/Blocks/VideoGallery/Edit.jsx | 5 +- .../ItaliaTheme/Blocks/VideoGallery/View.jsx | 5 +- .../ItaliaTheme/Slider/ButtonPlayPause.jsx | 43 ++++ .../ItaliaTheme/Slider/CarouselWrapper.jsx | 23 ++ .../ItaliaTheme/Slider/NextArrow.jsx | 31 +++ .../ItaliaTheme/Slider/PrevArrow.jsx | 33 +++ .../ItaliaTheme/Slider/SingleSlideWrapper.jsx | 30 +++ .../ItaliaTheme/View/Commons/Gallery.jsx | 22 +- src/components/ItaliaTheme/index.js | 9 +- .../ItaliaTheme/Blocks/_sliderTemplate.scss | 5 +- yarn.lock | 20 +- 23 files changed, 378 insertions(+), 482 deletions(-) delete mode 100644 src/components/ItaliaTheme/Blocks/Listing/Commons/NextArrow.jsx delete mode 100644 src/components/ItaliaTheme/Blocks/Listing/Commons/PrevArrow.jsx create mode 100644 src/components/ItaliaTheme/Slider/ButtonPlayPause.jsx create mode 100644 src/components/ItaliaTheme/Slider/CarouselWrapper.jsx create mode 100644 src/components/ItaliaTheme/Slider/NextArrow.jsx create mode 100644 src/components/ItaliaTheme/Slider/PrevArrow.jsx create mode 100644 src/components/ItaliaTheme/Slider/SingleSlideWrapper.jsx diff --git a/locales/de/LC_MESSAGES/volto.po b/locales/de/LC_MESSAGES/volto.po index 4f1056db9..27288109d 100644 --- a/locales/de/LC_MESSAGES/volto.po +++ b/locales/de/LC_MESSAGES/volto.po @@ -460,9 +460,8 @@ msgstr "" msgid "Path filter filtro" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate -# defaultMessage: Metti in pausa +#: components/ItaliaTheme/Slider/ButtonPlayPause +# defaultMessage: Seleziona per mettere in pausa lo slider msgid "Pause slider" msgstr "Pause" @@ -477,9 +476,8 @@ msgstr "" msgid "Piccolo" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate -# defaultMessage: Play +#: components/ItaliaTheme/Slider/ButtonPlayPause +# defaultMessage: Seleziona per riprodurre lo slider msgid "Play slider" msgstr "" @@ -1100,21 +1098,11 @@ msgstr "" msgid "calendarBlockSidebarTitle" msgstr "" -#: components/ItaliaTheme/Blocks/Calendar/Body -# defaultMessage: Prossimo -msgid "calendar_next_arrow" -msgstr "" - #: components/ItaliaTheme/Blocks/Calendar/Body # defaultMessage: Nessun evento disponibile al momento msgid "calendar_no_results" msgstr "" -#: components/ItaliaTheme/Blocks/Calendar/Body -# defaultMessage: Precedente -msgid "calendar_prev_arrow" -msgstr "" - #: components/ItaliaTheme/manage/Widgets/CanaleDigitaleWidget # defaultMessage: Accedere al servizio msgid "canale_digitale_widget_title" @@ -1141,12 +1129,12 @@ msgstr "" msgid "card_width_image" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +#: components/ItaliaTheme/Slider/CarouselWrapper # defaultMessage: Carosello msgid "carousel" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +#: components/ItaliaTheme/Slider/SingleSlideWrapper # defaultMessage: Slide msgid "carouselSlide" msgstr "" @@ -2759,7 +2747,7 @@ msgstr "" msgid "playStoreLink" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +#: components/ItaliaTheme/Slider/PrevArrow # defaultMessage: Precedente msgid "precedente" msgstr "" @@ -3793,7 +3781,7 @@ msgstr "" msgid "subjects" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +#: components/ItaliaTheme/Slider/NextArrow # defaultMessage: Successivo msgid "successivo" msgstr "" @@ -4012,16 +4000,6 @@ msgstr "" msgid "venues" msgstr "" -#: components/ItaliaTheme/Blocks/VideoGallery/Body -# defaultMessage: Prossimo video -msgid "videogallery_next_arrow" -msgstr "" - -#: components/ItaliaTheme/Blocks/VideoGallery/Body -# defaultMessage: Video precedente -msgid "videogallery_prev_arrow" -msgstr "" - #: components/ItaliaTheme/Blocks/Listing/SliderTemplate # defaultMessage: Sei attualmente in un carosello, per navigare usa le frecce sinistra e destra msgid "viewImage" diff --git a/locales/en/LC_MESSAGES/volto.po b/locales/en/LC_MESSAGES/volto.po index f1e0f6738..dbfe3f223 100644 --- a/locales/en/LC_MESSAGES/volto.po +++ b/locales/en/LC_MESSAGES/volto.po @@ -445,9 +445,8 @@ msgstr "Page" msgid "Path filter filtro" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate -# defaultMessage: Metti in pausa +#: components/ItaliaTheme/Slider/ButtonPlayPause +# defaultMessage: Seleziona per mettere in pausa lo slider msgid "Pause slider" msgstr "Pause" @@ -462,9 +461,8 @@ msgstr "" msgid "Piccolo" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate -# defaultMessage: Play +#: components/ItaliaTheme/Slider/ButtonPlayPause +# defaultMessage: Seleziona per riprodurre lo slider msgid "Play slider" msgstr "Play" @@ -1085,21 +1083,11 @@ msgstr "Navigation path" msgid "calendarBlockSidebarTitle" msgstr "" -#: components/ItaliaTheme/Blocks/Calendar/Body -# defaultMessage: Prossimo -msgid "calendar_next_arrow" -msgstr "" - #: components/ItaliaTheme/Blocks/Calendar/Body # defaultMessage: Nessun evento disponibile al momento msgid "calendar_no_results" msgstr "" -#: components/ItaliaTheme/Blocks/Calendar/Body -# defaultMessage: Precedente -msgid "calendar_prev_arrow" -msgstr "" - #: components/ItaliaTheme/manage/Widgets/CanaleDigitaleWidget # defaultMessage: Accedere al servizio msgid "canale_digitale_widget_title" @@ -1126,12 +1114,12 @@ msgstr "Read more" msgid "card_width_image" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +#: components/ItaliaTheme/Slider/CarouselWrapper # defaultMessage: Carosello msgid "carousel" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +#: components/ItaliaTheme/Slider/SingleSlideWrapper # defaultMessage: Slide msgid "carouselSlide" msgstr "" @@ -2744,7 +2732,7 @@ msgstr "Help text" msgid "playStoreLink" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +#: components/ItaliaTheme/Slider/PrevArrow # defaultMessage: Precedente msgid "precedente" msgstr "" @@ -3778,7 +3766,7 @@ msgstr "" msgid "subjects" msgstr "Tags" -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +#: components/ItaliaTheme/Slider/NextArrow # defaultMessage: Successivo msgid "successivo" msgstr "" @@ -3997,16 +3985,6 @@ msgstr "Change in balance sheet" msgid "venues" msgstr "Venues" -#: components/ItaliaTheme/Blocks/VideoGallery/Body -# defaultMessage: Prossimo video -msgid "videogallery_next_arrow" -msgstr "Next video" - -#: components/ItaliaTheme/Blocks/VideoGallery/Body -# defaultMessage: Video precedente -msgid "videogallery_prev_arrow" -msgstr "Previous video" - #: components/ItaliaTheme/Blocks/Listing/SliderTemplate # defaultMessage: Sei attualmente in un carosello, per navigare usa le frecce sinistra e destra msgid "viewImage" diff --git a/locales/es/LC_MESSAGES/volto.po b/locales/es/LC_MESSAGES/volto.po index 36bab9aa1..e710386f8 100644 --- a/locales/es/LC_MESSAGES/volto.po +++ b/locales/es/LC_MESSAGES/volto.po @@ -454,9 +454,8 @@ msgstr "" msgid "Path filter filtro" msgstr "Filtrar" -#: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate -# defaultMessage: Metti in pausa +#: components/ItaliaTheme/Slider/ButtonPlayPause +# defaultMessage: Seleziona per mettere in pausa lo slider msgid "Pause slider" msgstr "Pausa" @@ -471,9 +470,8 @@ msgstr "Camino" msgid "Piccolo" msgstr "Pequeño" -#: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate -# defaultMessage: Play +#: components/ItaliaTheme/Slider/ButtonPlayPause +# defaultMessage: Seleziona per riprodurre lo slider msgid "Play slider" msgstr "Reproducir" @@ -1094,21 +1092,11 @@ msgstr "" msgid "calendarBlockSidebarTitle" msgstr "Calendario" -#: components/ItaliaTheme/Blocks/Calendar/Body -# defaultMessage: Prossimo -msgid "calendar_next_arrow" -msgstr "Próximo" - #: components/ItaliaTheme/Blocks/Calendar/Body # defaultMessage: Nessun evento disponibile al momento msgid "calendar_no_results" msgstr "No hay eventos disponibles en este momento" -#: components/ItaliaTheme/Blocks/Calendar/Body -# defaultMessage: Precedente -msgid "calendar_prev_arrow" -msgstr "Precedente" - #: components/ItaliaTheme/manage/Widgets/CanaleDigitaleWidget # defaultMessage: Accedere al servizio msgid "canale_digitale_widget_title" @@ -1135,12 +1123,12 @@ msgstr "Leer mas" msgid "card_width_image" msgstr "Tarjeta con imagen" -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +#: components/ItaliaTheme/Slider/CarouselWrapper # defaultMessage: Carosello msgid "carousel" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +#: components/ItaliaTheme/Slider/SingleSlideWrapper # defaultMessage: Slide msgid "carouselSlide" msgstr "" @@ -2753,7 +2741,7 @@ msgstr "Texto de ayuda" msgid "playStoreLink" msgstr "Enlaces de Play Store" -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +#: components/ItaliaTheme/Slider/PrevArrow # defaultMessage: Precedente msgid "precedente" msgstr "" @@ -3787,7 +3775,7 @@ msgstr "Visibile" msgid "subjects" msgstr "Etiquetas" -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +#: components/ItaliaTheme/Slider/NextArrow # defaultMessage: Successivo msgid "successivo" msgstr "" @@ -4006,16 +3994,6 @@ msgstr "Cambio en el balance" msgid "venues" msgstr "Lugares" -#: components/ItaliaTheme/Blocks/VideoGallery/Body -# defaultMessage: Prossimo video -msgid "videogallery_next_arrow" -msgstr "" - -#: components/ItaliaTheme/Blocks/VideoGallery/Body -# defaultMessage: Video precedente -msgid "videogallery_prev_arrow" -msgstr "" - #: components/ItaliaTheme/Blocks/Listing/SliderTemplate # defaultMessage: Sei attualmente in un carosello, per navigare usa le frecce sinistra e destra msgid "viewImage" diff --git a/locales/fr/LC_MESSAGES/volto.po b/locales/fr/LC_MESSAGES/volto.po index 876efb2f4..ae13af631 100644 --- a/locales/fr/LC_MESSAGES/volto.po +++ b/locales/fr/LC_MESSAGES/volto.po @@ -462,9 +462,8 @@ msgstr "" msgid "Path filter filtro" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate -# defaultMessage: Metti in pausa +#: components/ItaliaTheme/Slider/ButtonPlayPause +# defaultMessage: Seleziona per mettere in pausa lo slider msgid "Pause slider" msgstr "Pause" @@ -479,9 +478,8 @@ msgstr "" msgid "Piccolo" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate -# defaultMessage: Play +#: components/ItaliaTheme/Slider/ButtonPlayPause +# defaultMessage: Seleziona per riprodurre lo slider msgid "Play slider" msgstr "Début" @@ -1102,21 +1100,11 @@ msgstr "" msgid "calendarBlockSidebarTitle" msgstr "" -#: components/ItaliaTheme/Blocks/Calendar/Body -# defaultMessage: Prossimo -msgid "calendar_next_arrow" -msgstr "" - #: components/ItaliaTheme/Blocks/Calendar/Body # defaultMessage: Nessun evento disponibile al momento msgid "calendar_no_results" msgstr "" -#: components/ItaliaTheme/Blocks/Calendar/Body -# defaultMessage: Precedente -msgid "calendar_prev_arrow" -msgstr "" - #: components/ItaliaTheme/manage/Widgets/CanaleDigitaleWidget # defaultMessage: Accedere al servizio msgid "canale_digitale_widget_title" @@ -1143,12 +1131,12 @@ msgstr "" msgid "card_width_image" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +#: components/ItaliaTheme/Slider/CarouselWrapper # defaultMessage: Carosello msgid "carousel" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +#: components/ItaliaTheme/Slider/SingleSlideWrapper # defaultMessage: Slide msgid "carouselSlide" msgstr "" @@ -2761,7 +2749,7 @@ msgstr "" msgid "playStoreLink" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +#: components/ItaliaTheme/Slider/PrevArrow # defaultMessage: Precedente msgid "precedente" msgstr "" @@ -3795,7 +3783,7 @@ msgstr "" msgid "subjects" msgstr "Sujettes" -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +#: components/ItaliaTheme/Slider/NextArrow # defaultMessage: Successivo msgid "successivo" msgstr "" @@ -4014,16 +4002,6 @@ msgstr "Changement de bilan" msgid "venues" msgstr "Lieux" -#: components/ItaliaTheme/Blocks/VideoGallery/Body -# defaultMessage: Prossimo video -msgid "videogallery_next_arrow" -msgstr "Prochaine vidéo" - -#: components/ItaliaTheme/Blocks/VideoGallery/Body -# defaultMessage: Video precedente -msgid "videogallery_prev_arrow" -msgstr "Vidéo précédente" - #: components/ItaliaTheme/Blocks/Listing/SliderTemplate # defaultMessage: Sei attualmente in un carosello, per navigare usa le frecce sinistra e destra msgid "viewImage" diff --git a/locales/it/LC_MESSAGES/volto.po b/locales/it/LC_MESSAGES/volto.po index 23ed970c3..4537ae02f 100644 --- a/locales/it/LC_MESSAGES/volto.po +++ b/locales/it/LC_MESSAGES/volto.po @@ -445,9 +445,8 @@ msgstr "" msgid "Path filter filtro" msgstr "Filtro" -#: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate -# defaultMessage: Metti in pausa +#: components/ItaliaTheme/Slider/ButtonPlayPause +# defaultMessage: Seleziona per mettere in pausa lo slider msgid "Pause slider" msgstr "Metti in pausa" @@ -462,9 +461,8 @@ msgstr "Percorso" msgid "Piccolo" msgstr "Piccolo" -#: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate -# defaultMessage: Play +#: components/ItaliaTheme/Slider/ButtonPlayPause +# defaultMessage: Seleziona per riprodurre lo slider msgid "Play slider" msgstr "Seleziona per riprodurre" @@ -1085,21 +1083,11 @@ msgstr "" msgid "calendarBlockSidebarTitle" msgstr "Calendario" -#: components/ItaliaTheme/Blocks/Calendar/Body -# defaultMessage: Prossimo -msgid "calendar_next_arrow" -msgstr "Prossimo" - #: components/ItaliaTheme/Blocks/Calendar/Body # defaultMessage: Nessun evento disponibile al momento msgid "calendar_no_results" msgstr "Nessun evento disponibile al momento" -#: components/ItaliaTheme/Blocks/Calendar/Body -# defaultMessage: Precedente -msgid "calendar_prev_arrow" -msgstr "Precedente" - #: components/ItaliaTheme/manage/Widgets/CanaleDigitaleWidget # defaultMessage: Accedere al servizio msgid "canale_digitale_widget_title" @@ -1126,12 +1114,12 @@ msgstr "Vedi" msgid "card_width_image" msgstr "Card con immagine" -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +#: components/ItaliaTheme/Slider/CarouselWrapper # defaultMessage: Carosello msgid "carousel" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +#: components/ItaliaTheme/Slider/SingleSlideWrapper # defaultMessage: Slide msgid "carouselSlide" msgstr "" @@ -2744,7 +2732,7 @@ msgstr "Testo di aiuto" msgid "playStoreLink" msgstr "PlayStore Link" -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +#: components/ItaliaTheme/Slider/PrevArrow # defaultMessage: Precedente msgid "precedente" msgstr "Precedente" @@ -3778,7 +3766,7 @@ msgstr "Visibile" msgid "subjects" msgstr "Tags" -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +#: components/ItaliaTheme/Slider/NextArrow # defaultMessage: Successivo msgid "successivo" msgstr "Successivo" @@ -3997,16 +3985,6 @@ msgstr "Variazione situazione patrimoniale" msgid "venues" msgstr "Luoghi" -#: components/ItaliaTheme/Blocks/VideoGallery/Body -# defaultMessage: Prossimo video -msgid "videogallery_next_arrow" -msgstr "Prossimo video" - -#: components/ItaliaTheme/Blocks/VideoGallery/Body -# defaultMessage: Video precedente -msgid "videogallery_prev_arrow" -msgstr "Video precedente" - #: components/ItaliaTheme/Blocks/Listing/SliderTemplate # defaultMessage: Sei attualmente in un carosello, per navigare usa le frecce sinistra e destra msgid "viewImage" diff --git a/locales/volto.pot b/locales/volto.pot index a88173918..4baf5931a 100644 --- a/locales/volto.pot +++ b/locales/volto.pot @@ -1,7 +1,7 @@ msgid "" msgstr "" "Project-Id-Version: Plone\n" -"POT-Creation-Date: 2024-02-22T11:52:48.638Z\n" +"POT-Creation-Date: 2024-02-22T15:14:34.905Z\n" "Last-Translator: Plone i18n \n" "Language-Team: Plone i18n \n" "MIME-Version: 1.0\n" @@ -447,9 +447,8 @@ msgstr "" msgid "Path filter filtro" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate -# defaultMessage: Metti in pausa +#: components/ItaliaTheme/Slider/ButtonPlayPause +# defaultMessage: Seleziona per mettere in pausa lo slider msgid "Pause slider" msgstr "" @@ -464,9 +463,8 @@ msgstr "" msgid "Piccolo" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate -# defaultMessage: Play +#: components/ItaliaTheme/Slider/ButtonPlayPause +# defaultMessage: Seleziona per riprodurre lo slider msgid "Play slider" msgstr "" @@ -1087,21 +1085,11 @@ msgstr "" msgid "calendarBlockSidebarTitle" msgstr "" -#: components/ItaliaTheme/Blocks/Calendar/Body -# defaultMessage: Prossimo -msgid "calendar_next_arrow" -msgstr "" - #: components/ItaliaTheme/Blocks/Calendar/Body # defaultMessage: Nessun evento disponibile al momento msgid "calendar_no_results" msgstr "" -#: components/ItaliaTheme/Blocks/Calendar/Body -# defaultMessage: Precedente -msgid "calendar_prev_arrow" -msgstr "" - #: components/ItaliaTheme/manage/Widgets/CanaleDigitaleWidget # defaultMessage: Accedere al servizio msgid "canale_digitale_widget_title" @@ -1128,12 +1116,12 @@ msgstr "" msgid "card_width_image" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +#: components/ItaliaTheme/Slider/CarouselWrapper # defaultMessage: Carosello msgid "carousel" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +#: components/ItaliaTheme/Slider/SingleSlideWrapper # defaultMessage: Slide msgid "carouselSlide" msgstr "" @@ -2746,7 +2734,7 @@ msgstr "" msgid "playStoreLink" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +#: components/ItaliaTheme/Slider/PrevArrow # defaultMessage: Precedente msgid "precedente" msgstr "" @@ -3780,7 +3768,7 @@ msgstr "" msgid "subjects" msgstr "" -#: components/ItaliaTheme/Blocks/Listing/SliderTemplate +#: components/ItaliaTheme/Slider/NextArrow # defaultMessage: Successivo msgid "successivo" msgstr "" @@ -3999,16 +3987,6 @@ msgstr "" msgid "venues" msgstr "" -#: components/ItaliaTheme/Blocks/VideoGallery/Body -# defaultMessage: Prossimo video -msgid "videogallery_next_arrow" -msgstr "" - -#: components/ItaliaTheme/Blocks/VideoGallery/Body -# defaultMessage: Video precedente -msgid "videogallery_prev_arrow" -msgstr "" - #: components/ItaliaTheme/Blocks/Listing/SliderTemplate # defaultMessage: Sei attualmente in un carosello, per navigare usa le frecce sinistra e destra msgid "viewImage" diff --git a/src/components/ItaliaTheme/Blocks/Calendar/Body.jsx b/src/components/ItaliaTheme/Blocks/Calendar/Body.jsx index 7ff3e95cb..cfcbe89ed 100644 --- a/src/components/ItaliaTheme/Blocks/Calendar/Body.jsx +++ b/src/components/ItaliaTheme/Blocks/Calendar/Body.jsx @@ -3,8 +3,11 @@ import { useDispatch, useSelector } from 'react-redux'; import { useIntl, defineMessages } from 'react-intl'; import useDeepCompareEffect from 'use-deep-compare-effect'; import { - FontAwesomeIcon, ListingLinkMore, + CarouselWrapper, + SingleSlideWrapper, + NextArrow, + PrevArrow, } from 'design-comuni-plone-theme/components/ItaliaTheme'; import { Card, Row, Col, Container, Button } from 'design-react-kit'; import cx from 'classnames'; @@ -28,14 +31,6 @@ const messages = defineMessages({ id: 'calendar_no_results', defaultMessage: 'Nessun evento disponibile al momento', }, - calendar_next_arrow: { - id: 'calendar_next_arrow', - defaultMessage: 'Prossimo', - }, - calendar_prev_arrow: { - id: 'calendar_prev_arrow', - defaultMessage: 'Precedente', - }, }); const copyFields = ['limit', 'query', 'sort_on', 'sort_order', 'depth']; @@ -169,29 +164,6 @@ const Body = ({ data, block, inEditMode, path, onChangeBlock, reactSlick }) => { setAdditionalFilters(filters); }; - const NextArrow = (props) => { - const { onClick, className } = props; - return ( - - ); - }; - const PrevArrow = (props) => { - const { onClick, className } = props; - return ( - - ); - }; - const settings = { dots: true, arrows: true, @@ -316,19 +288,25 @@ const Body = ({ data, block, inEditMode, path, onChangeBlock, reactSlick }) => {
{calendarResults[block]?.items?.length > 0 ? ( - - {calendarResults[block].items.map((day, index) => ( -
- -
- ))} - + + + {calendarResults[block].items.map((day, index) => ( + + + + ))} + + ) : inEditMode ? ( {intl.formatMessage(messages.insert_filter)} diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/NextArrow.jsx b/src/components/ItaliaTheme/Blocks/Listing/Commons/NextArrow.jsx deleted file mode 100644 index 3ac16ee96..000000000 --- a/src/components/ItaliaTheme/Blocks/Listing/Commons/NextArrow.jsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme'; - -export default function NextArrow(props) { - const { className, style, onClick } = props; - return ( -
- -
- ); -} diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/PrevArrow.jsx b/src/components/ItaliaTheme/Blocks/Listing/Commons/PrevArrow.jsx deleted file mode 100644 index 1ba29a168..000000000 --- a/src/components/ItaliaTheme/Blocks/Listing/Commons/PrevArrow.jsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme'; - -export default function PrevArrow(props) { - const { className, style, onClick } = props; - return ( -
- -
- ); -} diff --git a/src/components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate.jsx index 5380b9362..7a6462e1f 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate.jsx @@ -4,22 +4,26 @@ import 'slick-carousel/slick/slick.css'; import 'design-comuni-plone-theme/components/slick-carousel/slick/slick-theme.css'; +import React, { useRef, useState } from 'react'; +import { defineMessages, useIntl } from 'react-intl'; +import cx from 'classnames'; +import PropTypes from 'prop-types'; import { Col, Container, Row } from 'design-react-kit'; + +import { UniversalLink } from '@plone/volto/components'; +import { flattenToAppURL } from '@plone/volto/helpers'; +import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable'; + import { ListingImage, ListingLinkMore, NextArrow, PrevArrow, + SingleSlideWrapper, + CarouselWrapper, + ButtonPlayPause, } from 'design-comuni-plone-theme/components/ItaliaTheme'; -import React, { useRef, useState } from 'react'; -import { defineMessages, useIntl } from 'react-intl'; import { GalleryPreview } from 'design-comuni-plone-theme/components/ItaliaTheme'; -import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme'; -import PropTypes from 'prop-types'; -import { UniversalLink } from '@plone/volto/components'; -import cx from 'classnames'; -import { flattenToAppURL } from '@plone/volto/helpers'; -import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable'; const messages = defineMessages({ viewImage: { @@ -30,14 +34,6 @@ const messages = defineMessages({ id: 'gallery_viewPreview', defaultMessage: "Vedi l'anteprima di", }, - play: { - id: 'Play slider', - defaultMessage: 'Play', - }, - pause: { - id: 'Pause slider', - defaultMessage: 'Metti in pausa', - }, }); const PhotogalleryTemplate = ({ @@ -116,21 +112,12 @@ const PhotogalleryTemplate = ({ prevArrow: , appendDots: (dots) => (
-
- -
+ +
    {dots}
@@ -162,7 +149,7 @@ const PhotogalleryTemplate = ({ )}
-
+ {items.map((item, i) => { const image = ListingImage({ @@ -178,11 +165,12 @@ const PhotogalleryTemplate = ({ }px`, }); return ( -
{!show_image_popup ? ( )} -
+ ); })} @@ -231,7 +219,7 @@ const PhotogalleryTemplate = ({ items={items} /> ) : null} -
+
{ onClick(options, false); }; @@ -76,35 +60,20 @@ function NextArrow(props) { }; return ( - + id={id} + /> ); } -function PrevArrow(props) { +function SliderPrevArrow(props) { // Custom handling of focus for a11y - const { - className, - style, - onClick, - intl, - focusNext, - currentSlide, - slideCount, - } = props; + const { className, style, onClick, focusNext, currentSlide, slideCount, id } = + props; const handleClick = (options) => { onClick(options, false); }; @@ -121,38 +90,32 @@ function PrevArrow(props) { } }; return ( - + id={id} + /> ); } const Slide = (props) => { - const { item, index, appearance, appearanceProp, intl } = props; + const { item, index, appearance, appearanceProp, block_id } = props; const handleKeyboardUsers = (e) => { const { key, shiftKey } = e; if (key === 'Tab') { - e.stopPropagation(); e.preventDefault(); + e.stopPropagation(); + // Keeping auto pause off for now // if (userAutoplay) setUserAutoplay(false); // slider.current.slickPause(); let elementToFocus; if (shiftKey) { - elementToFocus = document.getElementById('sliderPrevArrow'); - } else elementToFocus = document.getElementById('sliderNextArrow'); + elementToFocus = document.getElementById('sliderPrevArrow_' + block_id); + } else + elementToFocus = document.getElementById('sliderNextArrow_' + block_id); elementToFocus.focus(); } }; @@ -163,15 +126,7 @@ const Slide = (props) => { const SlideItemAppearance = appearances[appearance] ?? appearances['default']; return ( -
+
{ handleKeyboardUsers={handleKeyboardUsers} />
-
+ ); }; @@ -201,7 +156,9 @@ const SliderTemplate = ({ reactSlick, ...appearanceProp }) => { + const block_id = uuid(); const intl = useIntl(); + const [userAutoplay, setUserAutoplay] = useState(autoplay); const nSlidesToShow = items.length < parseInt(slidesToShow) @@ -280,8 +237,20 @@ const SliderTemplate = ({ focusOnSelect: false, draggable: true, accessibility: true, - nextArrow: , - prevArrow: , + nextArrow: ( + + ), + prevArrow: ( + + ), appendDots: renderCustomDots, // Custom handling of focus for a11y afterChange: focusNext, @@ -317,63 +286,40 @@ const SliderTemplate = ({ 'full-width': full_width, })} > -
+ {items?.length > nSlidesToShow && ( -
- -
+ + {userAutoplay ? 'pause' : 'play'} + )} -
- - {items.map((item, index) => { - const image = ListingImage({ - item, - loading: index === 0 ? 'eager' : 'lazy', - sizes: `max-width(991px) 620px, ${1300 / nSlidesToShow}px`, - critical: true, - }); - return ( - - ); - })} - -
-
+ + {items.map((item, index) => { + const image = ListingImage({ + item, + loading: index === 0 ? 'eager' : 'lazy', + sizes: `max-width(991px) 620px, ${1300 / nSlidesToShow}px`, + critical: true, + }); + return ( + + ); + })} + +
diff --git a/src/components/ItaliaTheme/Blocks/VideoGallery/Body.jsx b/src/components/ItaliaTheme/Blocks/VideoGallery/Body.jsx index 3f42325bd..787f73a9d 100644 --- a/src/components/ItaliaTheme/Blocks/VideoGallery/Body.jsx +++ b/src/components/ItaliaTheme/Blocks/VideoGallery/Body.jsx @@ -7,10 +7,14 @@ import React from 'react'; import PropTypes from 'prop-types'; import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable'; -import { useIntl, defineMessages } from 'react-intl'; -import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme'; -import { FontAwesomeIcon } from 'design-comuni-plone-theme/components/ItaliaTheme'; -import { Button, Container } from 'design-react-kit'; + +import { + Icon, + CarouselWrapper, + NextArrow, + PrevArrow, +} from 'design-comuni-plone-theme/components/ItaliaTheme'; +import { Container } from 'design-react-kit'; import { UniversalLink } from '@plone/volto/components'; /** @@ -19,49 +23,7 @@ import { UniversalLink } from '@plone/volto/components'; * @extends Component */ -const messages = defineMessages({ - videogallery_next_arrow: { - id: 'videogallery_next_arrow', - defaultMessage: 'Prossimo video', - }, - videogallery_prev_arrow: { - id: 'videogallery_prev_arrow', - defaultMessage: 'Video precedente', - }, -}); - const Body = ({ data, children, nItems = 0, reactSlick }) => { - const intl = useIntl(); - - const NextArrow = (props) => { - const { onClick, className } = props; - return ( - - ); - }; - const PrevArrow = (props) => { - const { onClick, className } = props; - return ( - - ); - }; - const Slider = reactSlick.default; const settings = { @@ -122,9 +84,9 @@ const Body = ({ data, children, nItems = 0, reactSlick }) => { )}
-
+ {children} -
+
diff --git a/src/components/ItaliaTheme/Blocks/VideoGallery/Edit.jsx b/src/components/ItaliaTheme/Blocks/VideoGallery/Edit.jsx index d9f38912f..ec5b8aebd 100644 --- a/src/components/ItaliaTheme/Blocks/VideoGallery/Edit.jsx +++ b/src/components/ItaliaTheme/Blocks/VideoGallery/Edit.jsx @@ -14,6 +14,7 @@ import { import Sidebar from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/VideoGallery/Sidebar'; import Body from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/VideoGallery/Body'; import EditBlock from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/VideoGallery/Block/EditBlock'; +import { SingleSlideWrapper } from 'design-comuni-plone-theme/components/ItaliaTheme'; const messages = defineMessages({ addItem: { @@ -51,14 +52,14 @@ class Edit extends SubblocksEdit { {this.state.subblocks.map((subblock, subindex) => ( -
+ -
+ ))} {this.state.subblocks.length === 0 && (
{this.props.intl.formatMessage(messages.noVideos)}
diff --git a/src/components/ItaliaTheme/Blocks/VideoGallery/View.jsx b/src/components/ItaliaTheme/Blocks/VideoGallery/View.jsx index effd0cc4c..b427830a0 100644 --- a/src/components/ItaliaTheme/Blocks/VideoGallery/View.jsx +++ b/src/components/ItaliaTheme/Blocks/VideoGallery/View.jsx @@ -7,6 +7,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Body from './Body'; import ViewBlock from './Block/ViewBlock'; +import { SingleSlideWrapper } from 'design-comuni-plone-theme/components/ItaliaTheme'; /** * View icons blocks class. @@ -18,9 +19,9 @@ const View = ({ data, block }) => {
{data.subblocks.map((subblock, subindex) => ( -
+ -
+ ))}
diff --git a/src/components/ItaliaTheme/Slider/ButtonPlayPause.jsx b/src/components/ItaliaTheme/Slider/ButtonPlayPause.jsx new file mode 100644 index 000000000..0d55c6d4c --- /dev/null +++ b/src/components/ItaliaTheme/Slider/ButtonPlayPause.jsx @@ -0,0 +1,43 @@ +import React from 'react'; +import { defineMessages, useIntl } from 'react-intl'; +import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme'; +const messages = defineMessages({ + play: { + id: 'Play slider', + defaultMessage: 'Seleziona per riprodurre lo slider', + }, + pause: { + id: 'Pause slider', + defaultMessage: 'Seleziona per mettere in pausa lo slider', + }, +}); +const ButtonPlayPause = ({ onClick, autoplay, showLabel = true, children }) => { + const intl = useIntl(); + + return ( +
+ +
+ ); +}; + +export default ButtonPlayPause; diff --git a/src/components/ItaliaTheme/Slider/CarouselWrapper.jsx b/src/components/ItaliaTheme/Slider/CarouselWrapper.jsx new file mode 100644 index 000000000..3f4122d88 --- /dev/null +++ b/src/components/ItaliaTheme/Slider/CarouselWrapper.jsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { defineMessages, useIntl } from 'react-intl'; +const messages = defineMessages({ + carousel: { + id: 'carousel', + defaultMessage: 'Carosello', + }, +}); +const CarouselWrapper = ({ className, children }) => { + const intl = useIntl(); + + return ( +
+ {children} +
+ ); +}; + +export default CarouselWrapper; diff --git a/src/components/ItaliaTheme/Slider/NextArrow.jsx b/src/components/ItaliaTheme/Slider/NextArrow.jsx new file mode 100644 index 000000000..b6bede92a --- /dev/null +++ b/src/components/ItaliaTheme/Slider/NextArrow.jsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme'; +import { defineMessages, useIntl } from 'react-intl'; + +const messages = defineMessages({ + successivo: { + id: 'successivo', + defaultMessage: 'Successivo', + }, +}); + +export default function NextArrow(props) { + const intl = useIntl(); + const { className, style, onClick, onKeyDown, title, id } = props; + const _title = title ?? intl.formatMessage(messages.successivo); + return ( + + ); +} diff --git a/src/components/ItaliaTheme/Slider/PrevArrow.jsx b/src/components/ItaliaTheme/Slider/PrevArrow.jsx new file mode 100644 index 000000000..006b965ba --- /dev/null +++ b/src/components/ItaliaTheme/Slider/PrevArrow.jsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme'; +import { defineMessages, useIntl } from 'react-intl'; + +const messages = defineMessages({ + precedente: { + id: 'precedente', + defaultMessage: 'Precedente', + }, +}); + +export default function PrevArrow(props) { + const intl = useIntl(); + const { className, style, onClick, onKeyDown, title, id } = props; + + const _title = title ?? intl.formatMessage(messages.precedente); + + return ( + + ); +} diff --git a/src/components/ItaliaTheme/Slider/SingleSlideWrapper.jsx b/src/components/ItaliaTheme/Slider/SingleSlideWrapper.jsx new file mode 100644 index 000000000..75c9fb719 --- /dev/null +++ b/src/components/ItaliaTheme/Slider/SingleSlideWrapper.jsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { defineMessages, useIntl } from 'react-intl'; +const messages = defineMessages({ + carouselSlide: { + id: 'carouselSlide', + defaultMessage: 'Slide', + }, +}); +const SingleSlideWrapper = ({ className, key, index, children }) => { + const intl = useIntl(); + const wrapperKey = key ?? 'slide-wrapper-' + index; + + return ( +
+ {children} +
+ ); +}; + +export default SingleSlideWrapper; diff --git a/src/components/ItaliaTheme/View/Commons/Gallery.jsx b/src/components/ItaliaTheme/View/Commons/Gallery.jsx index fbc12a5ef..788ea3b83 100644 --- a/src/components/ItaliaTheme/View/Commons/Gallery.jsx +++ b/src/components/ItaliaTheme/View/Commons/Gallery.jsx @@ -8,7 +8,11 @@ import { resetSearchContent, searchContent } from '@plone/volto/actions'; import { useDispatch, useSelector } from 'react-redux'; import EmbeddedVideo from './EmbeddedVideo'; -import { GalleryPreview } from 'design-comuni-plone-theme/components/ItaliaTheme'; +import { + GalleryPreview, + SingleSlideWrapper, + CarouselWrapper, +} from 'design-comuni-plone-theme/components/ItaliaTheme'; import PropTypes from 'prop-types'; import { contentFolderHasItems } from 'design-comuni-plone-theme/helpers'; import { UniversalLink } from '@plone/volto/components'; @@ -146,10 +150,10 @@ const Gallery = ({ {title_type === 'h5' &&
{gallery_title}
}
-
+ {images.map((item, i) => ( -
+
-
+ ))} @@ -191,7 +195,7 @@ const Gallery = ({ setViewIndex={setViewImageIndex} items={images} /> -
+ ) : null} @@ -219,20 +223,20 @@ const Gallery = ({ )} -
+ {videos.map((item, i) => ( -
+ -
+ ))} -
+ ) : null} diff --git a/src/components/ItaliaTheme/index.js b/src/components/ItaliaTheme/index.js index e9dd9bd30..8d037bb4b 100644 --- a/src/components/ItaliaTheme/index.js +++ b/src/components/ItaliaTheme/index.js @@ -83,11 +83,16 @@ export CardCalendar from 'design-comuni-plone-theme/components/ItaliaTheme/Block export ListingCategory from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/ListingCategory'; export ListingText from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/ListingText'; export ListingLinkMore from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/ListingLinkMore'; -export NextArrow from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/NextArrow'; -export PrevArrow from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/PrevArrow'; + export ListingImage, { getListingImageBackground, } from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage'; +/*Slider*/ +export SingleSlideWrapper from 'design-comuni-plone-theme/components/ItaliaTheme/Slider/SingleSlideWrapper'; +export CarouselWrapper from 'design-comuni-plone-theme/components/ItaliaTheme/Slider/CarouselWrapper'; +export ButtonPlayPause from 'design-comuni-plone-theme/components/ItaliaTheme/Slider/ButtonPlayPause'; +export NextArrow from 'design-comuni-plone-theme/components/ItaliaTheme/Slider/NextArrow'; +export PrevArrow from 'design-comuni-plone-theme/components/ItaliaTheme/Slider/PrevArrow'; /********* ERROR PAGES ********* */ export Unauthorized from 'design-comuni-plone-theme/components/ItaliaTheme/Unauthorized/Unauthorized'; diff --git a/src/theme/ItaliaTheme/Blocks/_sliderTemplate.scss b/src/theme/ItaliaTheme/Blocks/_sliderTemplate.scss index e03c49853..6cb5783ad 100644 --- a/src/theme/ItaliaTheme/Blocks/_sliderTemplate.scss +++ b/src/theme/ItaliaTheme/Blocks/_sliderTemplate.scss @@ -175,7 +175,8 @@ margin: 0.5rem 0; } - .shadow { + .shadow, + .card-bg { box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15) !important; } } @@ -194,6 +195,8 @@ .slick-slide { .slide-wrapper { .listing-item { + margin-top: 0.5rem; + .img-responsive-wrapper { .img-wrapper { position: absolute; diff --git a/yarn.lock b/yarn.lock index 8467bc4dd..98d8c880b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12,15 +12,6 @@ __metadata: languageName: node linkType: hard -"@accessible360/accessible-slick@npm:1.0.1": - version: 1.0.1 - resolution: "@accessible360/accessible-slick@npm:1.0.1" - peerDependencies: - jquery: ">=1.8.0" - checksum: fc0b3f11b2c6110ce39074ff705fb57f0bf91006b5450377e2f7012d29debe030aef407f3bdab45b7937fd89f7411324c4f8733ac235c19088ca6b9637fa93b6 - languageName: node - linkType: hard - "@ampproject/remapping@npm:^2.1.0": version: 2.2.0 resolution: "@ampproject/remapping@npm:2.2.0" @@ -6529,7 +6520,6 @@ __metadata: version: 0.0.0-use.local resolution: "design-comuni-plone-theme@workspace:." dependencies: - "@accessible360/accessible-slick": 1.0.1 "@babel/core": 7.19.6 "@babel/eslint-parser": 7.23.3 "@babel/plugin-proposal-export-default-from": 7.18.9 @@ -6572,6 +6562,7 @@ __metadata: react-select: ^4.3.1 react-slick: ^0.29.0 release-it: 16.1.3 + slick-carousel: 1.8.1 stylelint: 15.11.0 stylelint-config-idiomatic-order: 9.0.0 stylelint-prettier: 4.0.2 @@ -12992,6 +12983,15 @@ __metadata: languageName: node linkType: hard +"slick-carousel@npm:1.8.1": + version: 1.8.1 + resolution: "slick-carousel@npm:1.8.1" + peerDependencies: + jquery: ">=1.8.0" + checksum: acaad391e4d8bc1c7fdb8d361faa1f1d60829b31d618b54bc38c0550a59b26de36537e0ab4bc0364176ec11d1a61d0cf11e99d8d5b1285d656673c9a1a719257 + languageName: node + linkType: hard + "smart-buffer@npm:^4.2.0": version: 4.2.0 resolution: "smart-buffer@npm:4.2.0" From 75e8a8c591740312031ed6bcddb3abc95c83b4a9 Mon Sep 17 00:00:00 2001 From: Giulia Ghisini Date: Tue, 5 Mar 2024 16:20:03 +0100 Subject: [PATCH 10/15] fix: slider tab --- .../Blocks/Listing/Commons/utils.js | 122 +++++++++++++---- .../SimpleCard/Card/SimpleCardDefault.jsx | 2 + .../Blocks/Listing/SliderTemplate.jsx | 125 ++++++------------ .../ItaliaTheme/View/Commons/RenderBlocks.jsx | 27 +++- .../manage/Blocks/Listing/ListingBody.jsx | 5 + 5 files changed, 159 insertions(+), 122 deletions(-) diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js b/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js index 82282bd32..949c7ef7c 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js +++ b/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js @@ -1,4 +1,8 @@ import { useRef, useEffect } from 'react'; +import { + NextArrow, + PrevArrow, +} from 'design-comuni-plone-theme/components/ItaliaTheme'; export const getCategory = (item, show_type, show_section, props) => { let cat = []; @@ -17,19 +21,11 @@ export const getCategory = (item, show_type, show_section, props) => { } return null; }; -export const visibleSlideTitle = (selector) => { - // Needed to deal with react-slick duplicating a lot of slides - // when used in infinite mode. It's an useless and counterproductive - // thing to do on their part, there are multiple issues opened. - // The lib is not actually mantained so... - return Array.from(document.querySelectorAll(selector)).find((e) => { - const rect = e.getBoundingClientRect(); - return rect.left >= 0 && rect.right <= window.innerWidth; - }); -}; -export const useSlider = (userAutoplay) => { +export const useSlider = (userAutoplay, block_id) => { const slider = useRef(null); + const sliderContainer = document.getElementById('outside-slider-' + block_id); + const sliderElement = document.querySelector(`#slider_${block_id}`); const onIntersection = (entries, opt) => { entries.forEach((entry) => entry.target.classList.toggle('visible', entry.isIntersecting), @@ -39,49 +35,119 @@ export const useSlider = (userAutoplay) => { root: null, threshold: 0.5, }); - if (document.querySelector('.block.listing.slider')) - observer.observe(document.querySelector('.block.listing.slider')); + + if (sliderContainer) observer.observe(sliderContainer); useEffect(() => { return () => observer.disconnect(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const focusNext = (currentSlide) => { - const sliderElement = document.querySelector('.block.listing.slider'); if (!sliderElement) return; - const sliderIsVisible = sliderElement.classList.contains('visible'); + const sliderIsVisible = sliderContainer.classList.contains('visible'); if (!sliderIsVisible) { slider.current.slickPause(); return; } - const slide = sliderElement.querySelectorAll( - `a.slide-link[data-slide="${currentSlide}"]`, + const slide = sliderElement.querySelector( + `#slider_${block_id} .slick-slide[data-index="${currentSlide}"]`, ); - if ((userAutoplay && !slide) || (userAutoplay && !slide.length > 0)) return; - - // Custom handling of focus for a11y - const link = visibleSlideTitle( - `a.slide-link[data-slide="${currentSlide}"]`, - ); + if (userAutoplay && !slide) return; - if (!link || document.activeElement === link) { + if (!slide || document.activeElement === slide) { return; } // eslint-disable-next-line no-unused-expressions else if ( // if the focus was already on a slide, move it to the current one - Array.from(document.querySelectorAll('.slick-slide')).some((el) => - el.contains(document.activeElement), - ) + Array.from( + document.querySelectorAll(`#slider_${block_id} .slick-slide`), + ).some((el) => el.contains(document.activeElement)) ) { - link.focus(); + slide.focus(); } }; + const visibleSlide = (selector) => { + // Needed to deal with react-slick duplicating a lot of slides + // when used in infinite mode. It's an useless and counterproductive + // thing to do on their part, there are multiple issues opened. + // The lib is not actually mantained so... + + return Array.from(document.querySelectorAll(selector)).find((e) => { + const slick_slide = e.closest('.slick-slide'); + return !slick_slide.classList.contains('slick-cloned'); + }); + }; + + const SliderNextArrow = (props) => { + // Custom handling of focus for a11y + const { className, style, onClick, currentSlide } = props; + const handleClick = (options) => { + onClick(options, false); + }; + const handleKeyboardUsers = (e) => { + if (e.key === 'Tab' && e.shiftKey) { + e.stopPropagation(); + e.preventDefault(); + + const slide = visibleSlide( + `#slider_${block_id} .slick-slide[data-index="${currentSlide}"]`, + ); + slide && slide.focus(); + } + }; + + return ( + + ); + }; + + const SliderPrevArrow = (props) => { + // Custom handling of focus for a11y + const { className, style, onClick, focusNext, currentSlide, slideCount } = + props; + const handleClick = (options) => { + onClick(options, false); + }; + const handleKeyboardUsers = (e) => { + if (e.key === 'Tab' && !e.shiftKey) { + e.stopPropagation(); + e.preventDefault(); + + if (currentSlide < slideCount) { + const slide = visibleSlide( + `#slider_${block_id} .slick-slide[data-index="${currentSlide}"]`, + ); + + slide && slide.focus(); + } else focusNext(0, block_id); + } + }; + return ( + + ); + }; + return { slider, focusNext, + visibleSlide, + SliderNextArrow, + SliderPrevArrow, }; }; diff --git a/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault.jsx b/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault.jsx index 5d3ed23a9..5e1f26be9 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault.jsx @@ -56,6 +56,7 @@ const SimpleCardDefault = (props) => { id_lighthouse, rrule, index, + handleKeyboardUsers = () => {}, //for slider template handler } = props; const getItemClass = (item) => { @@ -119,6 +120,7 @@ const SimpleCardDefault = (props) => { item={!isEditMode ? item : null} href={isEditMode ? '#' : null} data-element={id_lighthouse} + onKeyDown={handleKeyboardUsers} > {itemTitle} diff --git a/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx index 1fe281dfb..335615e7c 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx @@ -10,19 +10,13 @@ import { SingleSlideWrapper, CarouselWrapper, ButtonPlayPause, - NextArrow, - PrevArrow, } from 'design-comuni-plone-theme/components/ItaliaTheme'; -import { - useSlider, - visibleSlideTitle, -} from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/utils'; +import { useSlider } from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/utils'; import React, { useState } from 'react'; import { defineMessages, useIntl } from 'react-intl'; import PropTypes from 'prop-types'; import cx from 'classnames'; import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable'; -import { v4 as uuid } from 'uuid'; import config from '@plone/volto/registry'; const messages = defineMessages({ @@ -41,67 +35,17 @@ const messages = defineMessages({ }, }); -function SliderNextArrow(props) { - // Custom handling of focus for a11y - const { className, style, onClick, currentSlide, id } = props; - const handleClick = (options) => { - onClick(options, false); - }; - const handleKeyboardUsers = (e) => { - if (e.key === 'Tab' && e.shiftKey) { - e.stopPropagation(); - e.preventDefault(); - - const link = visibleSlideTitle( - `a.slide-link[data-slide="${currentSlide}"]`, - ); - link && link.focus(); - } - }; - - return ( - - ); -} - -function SliderPrevArrow(props) { - // Custom handling of focus for a11y - const { className, style, onClick, focusNext, currentSlide, slideCount, id } = - props; - const handleClick = (options) => { - onClick(options, false); - }; - const handleKeyboardUsers = (e) => { - if (e.key === 'Tab' && !e.shiftKey) { - e.stopPropagation(); - e.preventDefault(); - if (currentSlide < slideCount) { - const link = visibleSlideTitle( - `a.slide-link[data-slide="${currentSlide}"]`, - ); - link && link.focus(); - } else focusNext(0); - } - }; - return ( - - ); -} - const Slide = (props) => { - const { item, index, appearance, appearanceProp, block_id } = props; + const { + item, + index, + nextIndex, + prevIndex, + appearance, + appearanceProp, + block_id, + } = props; + const handleKeyboardUsers = (e) => { const { key, shiftKey } = e; if (key === 'Tab') { @@ -112,10 +56,21 @@ const Slide = (props) => { // if (userAutoplay) setUserAutoplay(false); // slider.current.slickPause(); let elementToFocus; + if (shiftKey) { - elementToFocus = document.getElementById('sliderPrevArrow_' + block_id); + elementToFocus = + prevIndex != null + ? document.querySelector( + `#slider_${block_id} .slick-slide[data-index="${prevIndex}"]`, + ) + : document.getElementById('sliderPrevArrow_' + block_id); } else - elementToFocus = document.getElementById('sliderNextArrow_' + block_id); + elementToFocus = + nextIndex != null + ? document.querySelector( + `#slider_${block_id} .slick-slide[data-index="${nextIndex}"]`, + ) + : document.getElementById('sliderNextArrow_' + block_id); elementToFocus.focus(); } }; @@ -154,9 +109,10 @@ const SliderTemplate = ({ autoplay_speed = 2, //seconds slide_appearance = 'default', reactSlick, - ...appearanceProp + block, + ...otherProps }) => { - const block_id = uuid(); + const block_id = block; const intl = useIntl(); const [userAutoplay, setUserAutoplay] = useState(autoplay); @@ -165,7 +121,11 @@ const SliderTemplate = ({ ? items.length : parseInt(slidesToShow); const Slider = reactSlick.default; - const { slider, focusNext } = useSlider(userAutoplay); + const { slider, focusNext, SliderNextArrow, SliderPrevArrow } = useSlider( + userAutoplay, + block_id, + ); + const toggleAutoplay = () => { if (!slider?.current) return; if (userAutoplay) { @@ -237,20 +197,8 @@ const SliderTemplate = ({ focusOnSelect: false, draggable: true, accessibility: true, - nextArrow: ( - - ), - prevArrow: ( - - ), + nextArrow: , + prevArrow: , appendDots: renderCustomDots, // Custom handling of focus for a11y afterChange: focusNext, @@ -271,6 +219,7 @@ const SliderTemplate = ({ 'no-margin': full_width, ['appearance_' + slide_appearance]: slide_appearance, })} + id={'slider_' + block_id} > {title && ( @@ -305,6 +254,8 @@ const SliderTemplate = ({ ); diff --git a/src/components/ItaliaTheme/View/Commons/RenderBlocks.jsx b/src/components/ItaliaTheme/View/Commons/RenderBlocks.jsx index 06d5c319a..258221c5e 100644 --- a/src/components/ItaliaTheme/View/Commons/RenderBlocks.jsx +++ b/src/components/ItaliaTheme/View/Commons/RenderBlocks.jsx @@ -16,6 +16,13 @@ const messages = defineMessages({ defaultMessage: 'Blocco sconosciuto', }, }); +const Wrapper = ({ block, id, children }) => { + return block['@type'] === 'listing' && block.variation === 'slider' ? ( +
{children}
+ ) : ( + <>{children} + ); +}; /** * RenderBlocks view component class. * @function RenderBlocks @@ -54,15 +61,21 @@ const RenderBlocks = ({ {map(items, (block) => { const blockType = blockContent[blocksFieldname]?.[block]?.['@type']; const Block = config.blocks.blocksConfig[blockType]?.['view'] || null; + if (Block != null) { return ( - + + + ); } else { return ( diff --git a/src/customizations/volto/components/manage/Blocks/Listing/ListingBody.jsx b/src/customizations/volto/components/manage/Blocks/Listing/ListingBody.jsx index ea9dd328c..c6b86975d 100644 --- a/src/customizations/volto/components/manage/Blocks/Listing/ListingBody.jsx +++ b/src/customizations/volto/components/manage/Blocks/Listing/ListingBody.jsx @@ -5,6 +5,7 @@ CUSTOMIZATIONS: - 'background class' and 'block class' - 'background class' and 'block class' logic for search block - search block integration +- pass 'block' prop to listing variation */ import React from 'react'; import { FormattedMessage, injectIntl } from 'react-intl'; @@ -37,7 +38,9 @@ const ListingBody = React.memo( loadingQuery, listingRef, additionalFilters, + block, } = props; + let ListingBodyTemplate; let templateConfig; // Legacy support if template is present @@ -97,6 +100,7 @@ const ListingBody = React.memo( // Also need to purge title from searchblock schema, it's the name of the listing template used const listingBodyProps = variation?.['@type'] !== 'search' ? data : { ...variation, title: '' }; + return (
{loadingQuery && ( @@ -114,6 +118,7 @@ const ListingBody = React.memo( Date: Wed, 6 Mar 2024 13:28:29 +0100 Subject: [PATCH 11/15] fix: slider a11y --- .../Blocks/Listing/Commons/utils.js | 32 ++++---- .../SimpleCard/Card/SimpleCardDefault.jsx | 2 - .../Listing/Slider/SlideItemDefault.jsx | 2 - .../Blocks/Listing/SliderTemplate.jsx | 75 ++++++++++++------- .../ItaliaTheme/Slider/SingleSlideWrapper.jsx | 11 ++- 5 files changed, 70 insertions(+), 52 deletions(-) diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js b/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js index 949c7ef7c..18468d9bd 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js +++ b/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js @@ -25,7 +25,8 @@ export const getCategory = (item, show_type, show_section, props) => { export const useSlider = (userAutoplay, block_id) => { const slider = useRef(null); const sliderContainer = document.getElementById('outside-slider-' + block_id); - const sliderElement = document.querySelector(`#slider_${block_id}`); + const sliderElementSelector = `#slider_${block_id}`; + const sliderElement = document.querySelector(sliderElementSelector); const onIntersection = (entries, opt) => { entries.forEach((entry) => entry.target.classList.toggle('visible', entry.isIntersecting), @@ -42,7 +43,7 @@ export const useSlider = (userAutoplay, block_id) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - const focusNext = (currentSlide) => { + const focusSlide = (slideIndex) => { if (!sliderElement) return; const sliderIsVisible = sliderContainer.classList.contains('visible'); @@ -50,8 +51,9 @@ export const useSlider = (userAutoplay, block_id) => { slider.current.slickPause(); return; } - const slide = sliderElement.querySelector( - `#slider_${block_id} .slick-slide[data-index="${currentSlide}"]`, + + const slide = document.querySelector( + `${sliderElementSelector} .slick-slide[data-index="${slideIndex}"] .it-single-slide-wrapper`, ); if (userAutoplay && !slide) return; @@ -59,15 +61,8 @@ export const useSlider = (userAutoplay, block_id) => { if (!slide || document.activeElement === slide) { return; } - // eslint-disable-next-line no-unused-expressions - else if ( - // if the focus was already on a slide, move it to the current one - Array.from( - document.querySelectorAll(`#slider_${block_id} .slick-slide`), - ).some((el) => el.contains(document.activeElement)) - ) { - slide.focus(); - } + + slide.focus(); }; const visibleSlide = (selector) => { @@ -94,7 +89,7 @@ export const useSlider = (userAutoplay, block_id) => { e.preventDefault(); const slide = visibleSlide( - `#slider_${block_id} .slick-slide[data-index="${currentSlide}"]`, + `${sliderElementSelector} .slick-slide[data-index="${currentSlide}"]`, ); slide && slide.focus(); } @@ -113,8 +108,7 @@ export const useSlider = (userAutoplay, block_id) => { const SliderPrevArrow = (props) => { // Custom handling of focus for a11y - const { className, style, onClick, focusNext, currentSlide, slideCount } = - props; + const { className, style, onClick, currentSlide, slideCount } = props; const handleClick = (options) => { onClick(options, false); }; @@ -125,11 +119,11 @@ export const useSlider = (userAutoplay, block_id) => { if (currentSlide < slideCount) { const slide = visibleSlide( - `#slider_${block_id} .slick-slide[data-index="${currentSlide}"]`, + `${sliderElementSelector} .slick-slide[data-index="${currentSlide}"]`, ); slide && slide.focus(); - } else focusNext(0, block_id); + } } }; return ( @@ -145,7 +139,7 @@ export const useSlider = (userAutoplay, block_id) => { return { slider, - focusNext, + focusSlide, visibleSlide, SliderNextArrow, SliderPrevArrow, diff --git a/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault.jsx b/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault.jsx index 5e1f26be9..5d3ed23a9 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault.jsx @@ -56,7 +56,6 @@ const SimpleCardDefault = (props) => { id_lighthouse, rrule, index, - handleKeyboardUsers = () => {}, //for slider template handler } = props; const getItemClass = (item) => { @@ -120,7 +119,6 @@ const SimpleCardDefault = (props) => { item={!isEditMode ? item : null} href={isEditMode ? '#' : null} data-element={id_lighthouse} - onKeyDown={handleKeyboardUsers} > {itemTitle} diff --git a/src/components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault.jsx b/src/components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault.jsx index a52d9067b..16373e402 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault.jsx @@ -14,7 +14,6 @@ const SlideItemDefault = ({ userAutoplay, slider, messages, - handleKeyboardUsers, }) => { return ( @@ -31,7 +30,6 @@ const SlideItemDefault = ({ tabIndex={0} data-slide={index} className={'slide-link no-external-if-link'} - onKeyDown={handleKeyboardUsers} > {full_width ? ( diff --git a/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx index 335615e7c..414821f41 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx @@ -44,34 +44,52 @@ const Slide = (props) => { appearance, appearanceProp, block_id, + slider, } = props; const handleKeyboardUsers = (e) => { const { key, shiftKey } = e; + if (key === 'Tab') { - e.preventDefault(); - e.stopPropagation(); + const slide_selector = `#slider_${block_id} .slick-slide[data-index="${index}"]`; + + const focusableSlideElements = document.querySelectorAll( + `${slide_selector} a, ${slide_selector} button, ${slide_selector} [tabindex="0"]`, + ); + const isFirstSlideFocusableElement = + e.target === focusableSlideElements[0]; + const isLastSlideFocusableElement = + e.target === focusableSlideElements[focusableSlideElements.length - 1]; + + if ( + (isFirstSlideFocusableElement && shiftKey) || + (isLastSlideFocusableElement && !shiftKey) + ) { + e.preventDefault(); + e.stopPropagation(); + //shift+tab ed è il primo elemento focusabile nella slide, oppure tab ed è l'ultimo elemento focusabile nella slide + //go to next/prev slide or to next/prev button. + } else { + return; //continue doing default bhv of Tab key, to focus next focusable element inside slide. + } // Keeping auto pause off for now // if (userAutoplay) setUserAutoplay(false); // slider.current.slickPause(); - let elementToFocus; - + console.log(index, prevIndex, nextIndex); if (shiftKey) { - elementToFocus = - prevIndex != null - ? document.querySelector( - `#slider_${block_id} .slick-slide[data-index="${prevIndex}"]`, - ) - : document.getElementById('sliderPrevArrow_' + block_id); - } else - elementToFocus = - nextIndex != null - ? document.querySelector( - `#slider_${block_id} .slick-slide[data-index="${nextIndex}"]`, - ) - : document.getElementById('sliderNextArrow_' + block_id); - elementToFocus.focus(); + if (prevIndex != null) { + slider.current.slickGoTo(prevIndex); + } else { + document.getElementById('sliderPrevArrow_' + block_id).focus(); + } + } else { + if (nextIndex != null) { + slider.current.slickGoTo(nextIndex); + } else { + document.getElementById('sliderNextArrow_' + block_id).focus(); + } + } } }; @@ -81,13 +99,16 @@ const Slide = (props) => { const SlideItemAppearance = appearances[appearance] ?? appearances['default']; return ( - -
+ +
@@ -121,7 +142,7 @@ const SliderTemplate = ({ ? items.length : parseInt(slidesToShow); const Slider = reactSlick.default; - const { slider, focusNext, SliderNextArrow, SliderPrevArrow } = useSlider( + const { slider, focusSlide, SliderNextArrow, SliderPrevArrow } = useSlider( userAutoplay, block_id, ); @@ -197,11 +218,11 @@ const SliderTemplate = ({ focusOnSelect: false, draggable: true, accessibility: true, - nextArrow: , - prevArrow: , + nextArrow: , + prevArrow: , appendDots: renderCustomDots, // Custom handling of focus for a11y - afterChange: focusNext, + afterChange: focusSlide, responsive: [ { breakpoint: 980, @@ -254,8 +275,8 @@ const SliderTemplate = ({ 0 ? index - 1 : null} full_width={full_width} item={item} show_image_title={show_image_title} diff --git a/src/components/ItaliaTheme/Slider/SingleSlideWrapper.jsx b/src/components/ItaliaTheme/Slider/SingleSlideWrapper.jsx index 75c9fb719..8eae07681 100644 --- a/src/components/ItaliaTheme/Slider/SingleSlideWrapper.jsx +++ b/src/components/ItaliaTheme/Slider/SingleSlideWrapper.jsx @@ -6,7 +6,7 @@ const messages = defineMessages({ defaultMessage: 'Slide', }, }); -const SingleSlideWrapper = ({ className, key, index, children }) => { +const SingleSlideWrapper = ({ className, key, index, children, onKeyDown }) => { const intl = useIntl(); const wrapperKey = key ?? 'slide-wrapper-' + index; @@ -15,12 +15,19 @@ const SingleSlideWrapper = ({ className, key, index, children }) => { className={`it-single-slide-wrapper ${className ?? ''}`} key={wrapperKey} data-slide={index} - role="group" + role="button" + aria-roledescription="group" aria-label={ intl.formatMessage(messages.carouselSlide) + ' ' + (index ? index + 1 : '') } + onKeyDown={onKeyDown} + onClick={(e) => { + e.preventDefault(); + e.stopPropagation(); + }} + tabIndex={0} > {children}
From 8e694a221f69d6ca82cecbe0b192e67aa671bc75 Mon Sep 17 00:00:00 2001 From: Giulia Ghisini Date: Wed, 6 Mar 2024 13:38:49 +0100 Subject: [PATCH 12/15] chore: moved handleSlideKeydown inside slider utils2 --- .../Blocks/Listing/Commons/utils.js | 47 ++++++++++++ .../Blocks/Listing/SliderTemplate.jsx | 73 +++---------------- 2 files changed, 59 insertions(+), 61 deletions(-) diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js b/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js index 18468d9bd..bdeb6905f 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js +++ b/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js @@ -137,11 +137,58 @@ export const useSlider = (userAutoplay, block_id) => { ); }; + const handleSlideKeydown = (index, prevIndex, nextIndex) => (e) => { + const { key, shiftKey } = e; + + if (key === 'Tab') { + const slide_selector = `#slider_${block_id} .slick-slide[data-index="${index}"]`; + + const focusableSlideElements = document.querySelectorAll( + `${slide_selector} a, ${slide_selector} button, ${slide_selector} [tabindex="0"]`, + ); + const isFirstSlideFocusableElement = + e.target === focusableSlideElements[0]; + const isLastSlideFocusableElement = + e.target === focusableSlideElements[focusableSlideElements.length - 1]; + + if ( + (isFirstSlideFocusableElement && shiftKey) || + (isLastSlideFocusableElement && !shiftKey) + ) { + e.preventDefault(); + e.stopPropagation(); + //shift+tab ed è il primo elemento focusabile nella slide, oppure tab ed è l'ultimo elemento focusabile nella slide + //go to next/prev slide or to next/prev button. + } else { + return; //continue doing default bhv of Tab key, to focus next focusable element inside slide. + } + + // Keeping auto pause off for now + // if (userAutoplay) setUserAutoplay(false); + // slider.current.slickPause(); + + if (shiftKey) { + if (prevIndex != null) { + slider.current.slickGoTo(prevIndex); + } else { + document.getElementById('sliderPrevArrow_' + block_id).focus(); + } + } else { + if (nextIndex != null) { + slider.current.slickGoTo(nextIndex); + } else { + document.getElementById('sliderNextArrow_' + block_id).focus(); + } + } + } + }; + return { slider, focusSlide, visibleSlide, SliderNextArrow, SliderPrevArrow, + handleSlideKeydown, }; }; diff --git a/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx index 414821f41..869d56378 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx @@ -36,62 +36,7 @@ const messages = defineMessages({ }); const Slide = (props) => { - const { - item, - index, - nextIndex, - prevIndex, - appearance, - appearanceProp, - block_id, - slider, - } = props; - - const handleKeyboardUsers = (e) => { - const { key, shiftKey } = e; - - if (key === 'Tab') { - const slide_selector = `#slider_${block_id} .slick-slide[data-index="${index}"]`; - - const focusableSlideElements = document.querySelectorAll( - `${slide_selector} a, ${slide_selector} button, ${slide_selector} [tabindex="0"]`, - ); - const isFirstSlideFocusableElement = - e.target === focusableSlideElements[0]; - const isLastSlideFocusableElement = - e.target === focusableSlideElements[focusableSlideElements.length - 1]; - - if ( - (isFirstSlideFocusableElement && shiftKey) || - (isLastSlideFocusableElement && !shiftKey) - ) { - e.preventDefault(); - e.stopPropagation(); - //shift+tab ed è il primo elemento focusabile nella slide, oppure tab ed è l'ultimo elemento focusabile nella slide - //go to next/prev slide or to next/prev button. - } else { - return; //continue doing default bhv of Tab key, to focus next focusable element inside slide. - } - - // Keeping auto pause off for now - // if (userAutoplay) setUserAutoplay(false); - // slider.current.slickPause(); - console.log(index, prevIndex, nextIndex); - if (shiftKey) { - if (prevIndex != null) { - slider.current.slickGoTo(prevIndex); - } else { - document.getElementById('sliderPrevArrow_' + block_id).focus(); - } - } else { - if (nextIndex != null) { - slider.current.slickGoTo(nextIndex); - } else { - document.getElementById('sliderNextArrow_' + block_id).focus(); - } - } - } - }; + const { item, index, appearance, appearanceProp, onKeyDown } = props; const appearances = config.blocks.blocksConfig.listing.variations.filter( (v) => v.id === 'slider', @@ -102,7 +47,7 @@ const Slide = (props) => {
{ if (!slider?.current) return; @@ -271,6 +219,8 @@ const SliderTemplate = ({ sizes: `max-width(991px) 620px, ${1300 / nSlidesToShow}px`, critical: true, }); + const nextIndex = index < items.length ? index + 1 : null; + const prevIndex = index > 0 ? index - 1 : null; return ( ); })} From 62402d777950c9060743b783c48009aed119e6f9 Mon Sep 17 00:00:00 2001 From: Giulia Ghisini Date: Wed, 6 Mar 2024 16:17:32 +0100 Subject: [PATCH 13/15] chore: moved useSlider in dedicated file --- .../CardWithImage/CardWithImageDefault.jsx | 1 + .../Blocks/Listing/Commons/utils.js | 177 --------------- .../SimpleCard/Card/SimpleCardDefault.jsx | 1 + .../Listing/Slider/SlideItemDefault.jsx | 2 - .../Blocks/Listing/SliderTemplate.jsx | 21 +- .../ItaliaTheme/Slider/SingleSlideWrapper.jsx | 10 +- src/components/ItaliaTheme/Slider/slider.js | 203 ++++++++++++++++++ 7 files changed, 219 insertions(+), 196 deletions(-) create mode 100644 src/components/ItaliaTheme/Slider/slider.js diff --git a/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx b/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx index 6bdc80fd9..7c7c4f672 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx @@ -124,6 +124,7 @@ const CardWithImageDefault = (props) => { item={!isEditMode ? item : null} href={isEditMode ? '#' : ''} data-element={id_lighthouse} + tabIndex={0} > {item.title || item.id} diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js b/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js index bdeb6905f..4889306b4 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js +++ b/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js @@ -1,9 +1,3 @@ -import { useRef, useEffect } from 'react'; -import { - NextArrow, - PrevArrow, -} from 'design-comuni-plone-theme/components/ItaliaTheme'; - export const getCategory = (item, show_type, show_section, props) => { let cat = []; @@ -21,174 +15,3 @@ export const getCategory = (item, show_type, show_section, props) => { } return null; }; - -export const useSlider = (userAutoplay, block_id) => { - const slider = useRef(null); - const sliderContainer = document.getElementById('outside-slider-' + block_id); - const sliderElementSelector = `#slider_${block_id}`; - const sliderElement = document.querySelector(sliderElementSelector); - const onIntersection = (entries, opt) => { - entries.forEach((entry) => - entry.target.classList.toggle('visible', entry.isIntersecting), - ); - }; - const observer = new IntersectionObserver(onIntersection, { - root: null, - threshold: 0.5, - }); - - if (sliderContainer) observer.observe(sliderContainer); - useEffect(() => { - return () => observer.disconnect(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - const focusSlide = (slideIndex) => { - if (!sliderElement) return; - const sliderIsVisible = sliderContainer.classList.contains('visible'); - - if (!sliderIsVisible) { - slider.current.slickPause(); - return; - } - - const slide = document.querySelector( - `${sliderElementSelector} .slick-slide[data-index="${slideIndex}"] .it-single-slide-wrapper`, - ); - - if (userAutoplay && !slide) return; - - if (!slide || document.activeElement === slide) { - return; - } - - slide.focus(); - }; - - const visibleSlide = (selector) => { - // Needed to deal with react-slick duplicating a lot of slides - // when used in infinite mode. It's an useless and counterproductive - // thing to do on their part, there are multiple issues opened. - // The lib is not actually mantained so... - - return Array.from(document.querySelectorAll(selector)).find((e) => { - const slick_slide = e.closest('.slick-slide'); - return !slick_slide.classList.contains('slick-cloned'); - }); - }; - - const SliderNextArrow = (props) => { - // Custom handling of focus for a11y - const { className, style, onClick, currentSlide } = props; - const handleClick = (options) => { - onClick(options, false); - }; - const handleKeyboardUsers = (e) => { - if (e.key === 'Tab' && e.shiftKey) { - e.stopPropagation(); - e.preventDefault(); - - const slide = visibleSlide( - `${sliderElementSelector} .slick-slide[data-index="${currentSlide}"]`, - ); - slide && slide.focus(); - } - }; - - return ( - - ); - }; - - const SliderPrevArrow = (props) => { - // Custom handling of focus for a11y - const { className, style, onClick, currentSlide, slideCount } = props; - const handleClick = (options) => { - onClick(options, false); - }; - const handleKeyboardUsers = (e) => { - if (e.key === 'Tab' && !e.shiftKey) { - e.stopPropagation(); - e.preventDefault(); - - if (currentSlide < slideCount) { - const slide = visibleSlide( - `${sliderElementSelector} .slick-slide[data-index="${currentSlide}"]`, - ); - - slide && slide.focus(); - } - } - }; - return ( - - ); - }; - - const handleSlideKeydown = (index, prevIndex, nextIndex) => (e) => { - const { key, shiftKey } = e; - - if (key === 'Tab') { - const slide_selector = `#slider_${block_id} .slick-slide[data-index="${index}"]`; - - const focusableSlideElements = document.querySelectorAll( - `${slide_selector} a, ${slide_selector} button, ${slide_selector} [tabindex="0"]`, - ); - const isFirstSlideFocusableElement = - e.target === focusableSlideElements[0]; - const isLastSlideFocusableElement = - e.target === focusableSlideElements[focusableSlideElements.length - 1]; - - if ( - (isFirstSlideFocusableElement && shiftKey) || - (isLastSlideFocusableElement && !shiftKey) - ) { - e.preventDefault(); - e.stopPropagation(); - //shift+tab ed è il primo elemento focusabile nella slide, oppure tab ed è l'ultimo elemento focusabile nella slide - //go to next/prev slide or to next/prev button. - } else { - return; //continue doing default bhv of Tab key, to focus next focusable element inside slide. - } - - // Keeping auto pause off for now - // if (userAutoplay) setUserAutoplay(false); - // slider.current.slickPause(); - - if (shiftKey) { - if (prevIndex != null) { - slider.current.slickGoTo(prevIndex); - } else { - document.getElementById('sliderPrevArrow_' + block_id).focus(); - } - } else { - if (nextIndex != null) { - slider.current.slickGoTo(nextIndex); - } else { - document.getElementById('sliderNextArrow_' + block_id).focus(); - } - } - } - }; - - return { - slider, - focusSlide, - visibleSlide, - SliderNextArrow, - SliderPrevArrow, - handleSlideKeydown, - }; -}; diff --git a/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault.jsx b/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault.jsx index 5d3ed23a9..0fd2abdc3 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault.jsx @@ -119,6 +119,7 @@ const SimpleCardDefault = (props) => { item={!isEditMode ? item : null} href={isEditMode ? '#' : null} data-element={id_lighthouse} + tabIndex={0} > {itemTitle} diff --git a/src/components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault.jsx b/src/components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault.jsx index 16373e402..31c77fe40 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault.jsx @@ -13,7 +13,6 @@ const SlideItemDefault = ({ setUserAutoplay, userAutoplay, slider, - messages, }) => { return ( @@ -26,7 +25,6 @@ const SlideItemDefault = ({
{ + const intl = useIntl(); const { item, index, appearance, appearanceProp, onKeyDown } = props; const appearances = config.blocks.blocksConfig.listing.variations.filter( @@ -48,13 +49,10 @@ const Slide = (props) => { key={item['@id'] + index} index={index} onKeyDown={onKeyDown} + aria-label={intl.formatMessage(messages.carouselItemAriaLabel)} >
- +
); @@ -93,7 +91,7 @@ const SliderTemplate = ({ SliderNextArrow, SliderPrevArrow, handleSlideKeydown, - } = useSlider(userAutoplay, block_id); + } = useSlider(userAutoplay, setUserAutoplay, block_id); const toggleAutoplay = () => { if (!slider?.current) return; @@ -219,19 +217,16 @@ const SliderTemplate = ({ sizes: `max-width(991px) 620px, ${1300 / nSlidesToShow}px`, critical: true, }); - const nextIndex = index < items.length ? index + 1 : null; + const nextIndex = index < items.length - 1 ? index + 1 : null; const prevIndex = index > 0 ? index - 1 : null; return ( 0 ? index - 1 : null} full_width={full_width} item={item} show_image_title={show_image_title} intl={intl} - setUserAutoplay={setUserAutoplay} userAutoplay={userAutoplay} slider={slider} appearance={slide_appearance} diff --git a/src/components/ItaliaTheme/Slider/SingleSlideWrapper.jsx b/src/components/ItaliaTheme/Slider/SingleSlideWrapper.jsx index 8eae07681..fe7f48d40 100644 --- a/src/components/ItaliaTheme/Slider/SingleSlideWrapper.jsx +++ b/src/components/ItaliaTheme/Slider/SingleSlideWrapper.jsx @@ -6,7 +6,8 @@ const messages = defineMessages({ defaultMessage: 'Slide', }, }); -const SingleSlideWrapper = ({ className, key, index, children, onKeyDown }) => { +const SingleSlideWrapper = (props) => { + const { className, key, index, children, onKeyDown } = props; const intl = useIntl(); const wrapperKey = key ?? 'slide-wrapper-' + index; @@ -15,12 +16,13 @@ const SingleSlideWrapper = ({ className, key, index, children, onKeyDown }) => { className={`it-single-slide-wrapper ${className ?? ''}`} key={wrapperKey} data-slide={index} - role="button" - aria-roledescription="group" + role="group" aria-label={ intl.formatMessage(messages.carouselSlide) + ' ' + - (index ? index + 1 : '') + (index ? index + 1 : '') + + ' - ' + + (props['aria-label'] ?? '') } onKeyDown={onKeyDown} onClick={(e) => { diff --git a/src/components/ItaliaTheme/Slider/slider.js b/src/components/ItaliaTheme/Slider/slider.js new file mode 100644 index 000000000..1eca06982 --- /dev/null +++ b/src/components/ItaliaTheme/Slider/slider.js @@ -0,0 +1,203 @@ +import { useRef, useEffect } from 'react'; +import { + NextArrow, + PrevArrow, +} from 'design-comuni-plone-theme/components/ItaliaTheme'; + +export const useSlider = (userAutoplay, setUserAutoplay, block_id) => { + const slider = useRef(null); + const sliderContainer = document.getElementById('outside-slider-' + block_id); + const sliderElementSelector = `#slider_${block_id}`; + const sliderElement = document.querySelector(sliderElementSelector); + const onIntersection = (entries, opt) => { + entries.forEach((entry) => + entry.target.classList.toggle('visible', entry.isIntersecting), + ); + }; + const observer = new IntersectionObserver(onIntersection, { + root: null, + threshold: 0.5, + }); + + const setAutoplay = (a) => { + setUserAutoplay(a); + slider.current.slickPause(a); + }; + + if (sliderContainer) observer.observe(sliderContainer); + useEffect(() => { + return () => observer.disconnect(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + const focusSlide = (slideIndex) => { + if (!sliderElement) return; + const sliderIsVisible = sliderContainer.classList.contains('visible'); + + if (!sliderIsVisible) { + setAutoplay(false); + return; + } + + const slide = document.querySelector( + `${sliderElementSelector} .slick-slide[data-index="${slideIndex}"] .it-single-slide-wrapper`, + ); + + if (userAutoplay && !slide) return; + + if (!slide || document.activeElement === slide) { + return; + } + + //se c'è l'autoplay e non ho il focus sullo, non faccio il focus sulle slide per non perdere il focus sull'elemento della pagina su cui sono e che sta fuori dallo slider. + const focusedSliderElement = Array.from( + document.querySelectorAll(sliderElementSelector), + ).some((node) => node.contains(document.activeElement)); + + if (focusedSliderElement) { + slide.focus(); + } + }; + + const visibleSlide = (selector) => { + // Needed to deal with react-slick duplicating a lot of slides + // when used in infinite mode. It's an useless and counterproductive + // thing to do on their part, there are multiple issues opened. + // The lib is not actually mantained so... + + return Array.from(document.querySelectorAll(selector)).find((e) => { + const slick_slide = e.closest('.slick-slide'); + return !slick_slide.classList.contains('slick-cloned'); + }); + }; + + const SliderNextArrow = (props) => { + // Custom handling of focus for a11y + const { className, style, onClick, currentSlide } = props; + const handleClick = (options) => { + onClick(options, false); + }; + const handleKeyboardUsers = (e) => { + if (e.key === 'Tab' && e.shiftKey) { + e.stopPropagation(); + e.preventDefault(); + setAutoplay(false); + const slide = visibleSlide( + `${sliderElementSelector} .slick-slide[data-index="${currentSlide}"]`, + ); + slide && slide.focus(); + } + }; + + return ( + + ); + }; + + const SliderPrevArrow = (props) => { + // Custom handling of focus for a11y + const { className, style, onClick, currentSlide, slideCount } = props; + const handleClick = (options) => { + onClick(options, false); + }; + const handleKeyboardUsers = (e) => { + if (e.key === 'Tab' && !e.shiftKey) { + e.stopPropagation(); + e.preventDefault(); + + setAutoplay(false); + + if (currentSlide < slideCount) { + const slide = visibleSlide( + `${sliderElementSelector} .slick-slide[data-index="${currentSlide}"]`, + ); + + slide && slide.focus(); + } + } + }; + return ( + + ); + }; + + const handleSlideKeydown = (index, prevIndex, nextIndex) => (e) => { + const { key, shiftKey } = e; + + setAutoplay(false); + + if (key === 'Tab') { + const slide_selector = `#slider_${block_id} .slick-slide[data-index="${index}"]`; + + const focusableSlideElements = document.querySelectorAll( + `${slide_selector} a, ${slide_selector} button, ${slide_selector} [tabindex="0"]`, + ); + const isFirstSlideFocusableElement = + e.target === focusableSlideElements[0]; + const isLastSlideFocusableElement = + e.target === focusableSlideElements[focusableSlideElements.length - 1]; + + if ( + (isFirstSlideFocusableElement && shiftKey) || + (isLastSlideFocusableElement && !shiftKey) + ) { + e.preventDefault(); + e.stopPropagation(); + //shift+tab ed è il primo elemento focusabile nella slide, oppure tab ed è l'ultimo elemento focusabile nella slide + //go to next/prev slide or to next/prev button. + } else { + return; //continue doing default bhv of Tab key, to focus next focusable element inside slide. + } + + if (shiftKey) { + if (prevIndex != null) { + slider.current.slickGoTo(prevIndex); + } else { + document.getElementById('sliderPrevArrow_' + block_id).focus(); + } + } else { + if (nextIndex != null) { + slider.current.slickGoTo(nextIndex); + } else { + document.getElementById('sliderNextArrow_' + block_id).focus(); + } + } + } + + if (key === 'ArrowRight') { + if (nextIndex != null) { + e.preventDefault(); + e.stopPropagation(); + slider.current.slickGoTo(nextIndex); + } + } + if (key === 'ArrowLeft') { + if (prevIndex != null) { + e.preventDefault(); + e.stopPropagation(); + slider.current.slickGoTo(prevIndex); + } + } + }; + + return { + slider, + focusSlide, + visibleSlide, + SliderNextArrow, + SliderPrevArrow, + handleSlideKeydown, + }; +}; From 1f6bc0be239970eb6895e65e1fd54f69d33f591a Mon Sep 17 00:00:00 2001 From: Giulia Ghisini Date: Thu, 7 Mar 2024 09:47:12 +0100 Subject: [PATCH 14/15] fix: only carouse images --- .../Blocks/Listing/SliderTemplate.jsx | 19 ++++++++++++++++--- src/components/ItaliaTheme/Slider/slider.js | 2 +- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx index fd7224d68..9496bf1b4 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx @@ -43,13 +43,22 @@ const Slide = (props) => { (v) => v.id === 'slider', )[0]?.appearance; const SlideItemAppearance = appearances[appearance] ?? appearances['default']; - + console.log( + intl.formatMessage(messages.carouselItemAriaLabel) + + (index + 1) + + props['aria-label'] + ? ' - ' + props['aria-label'] + : '', + ); return (
@@ -226,12 +235,16 @@ const SliderTemplate = ({ full_width={full_width} item={item} show_image_title={show_image_title} - intl={intl} userAutoplay={userAutoplay} slider={slider} appearance={slide_appearance} appearanceProp={otherProps} block_id={block_id} + aria-label={ + !show_image_title && slide_appearance === 'default' + ? item.title + : null + } onKeyDown={handleSlideKeydown(index, prevIndex, nextIndex)} /> ); diff --git a/src/components/ItaliaTheme/Slider/slider.js b/src/components/ItaliaTheme/Slider/slider.js index 1eca06982..7ccc1b64a 100644 --- a/src/components/ItaliaTheme/Slider/slider.js +++ b/src/components/ItaliaTheme/Slider/slider.js @@ -32,7 +32,7 @@ export const useSlider = (userAutoplay, setUserAutoplay, block_id) => { const focusSlide = (slideIndex) => { if (!sliderElement) return; - const sliderIsVisible = sliderContainer.classList.contains('visible'); + const sliderIsVisible = sliderContainer?.classList?.contains('visible'); if (!sliderIsVisible) { setAutoplay(false); From 3d1eb2ff88ad9437d4318487e6ed55e2409a4339 Mon Sep 17 00:00:00 2001 From: Giulia Ghisini Date: Thu, 7 Mar 2024 10:08:33 +0100 Subject: [PATCH 15/15] chore: removed console.log --- .../ItaliaTheme/Blocks/Listing/SliderTemplate.jsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx index 9496bf1b4..43f21e7be 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx @@ -43,13 +43,7 @@ const Slide = (props) => { (v) => v.id === 'slider', )[0]?.appearance; const SlideItemAppearance = appearances[appearance] ?? appearances['default']; - console.log( - intl.formatMessage(messages.carouselItemAriaLabel) + - (index + 1) + - props['aria-label'] - ? ' - ' + props['aria-label'] - : '', - ); + return (