diff --git a/src/AdvancedListingBlockTemplate.jsx b/src/AdvancedListingBlockTemplate.jsx index b7b0b80..64753d8 100644 --- a/src/AdvancedListingBlockTemplate.jsx +++ b/src/AdvancedListingBlockTemplate.jsx @@ -10,8 +10,11 @@ import moment from 'moment'; import { useIntl } from 'react-intl'; const AdvancedListingBlockTemplate = ({ items, - linkTitle, - linkHref, + moreLinkText, + moreLinkUrl, + header, + headerUrl, + headerTag, isEditMode, imageSide, imageWidth, @@ -20,16 +23,28 @@ const AdvancedListingBlockTemplate = ({ titleTag, showDescription, }) => { - let link = null; - let href = linkHref?.[0]?.['@id'] || ''; - if (isInternalURL(href)) { - link = ( - - {linkTitle || href} + let moreLink = null; + let moreHref = moreLinkUrl?.[0]?.['@id'] || ''; + if (isInternalURL(moreHref)) { + moreLink = ( + + {moreLinkText || moreHref} ); - } else if (href) { - link = {linkTitle || href}; + } else if (moreHref) { + moreLink = {moreLinkText || moreHref}; + } + + let headerLink = null; + let headerHref = headerUrl?.[0]?.['@id'] || ''; + if (isInternalURL(headerHref)) { + headerLink = ( + + {header || headerHref} + + ); + } else if (headerHref) { + moreLink = {moreLinkText || headerHref}; } const hasImage = imageSide !== null; @@ -42,24 +57,31 @@ const AdvancedListingBlockTemplate = ({ ? 12 - imageWidth : 12; const intl = useIntl(); + const TitleTag = titleTag ? titleTag : 'h3'; + const HeaderTag = headerTag ? headerTag : 'h3'; moment.locale(intl.locale); return ( <> + + {headerUrl ? headerLink : header} + {items.map((item) => ( - - - {['up', 'left'].includes(imageSide) && ( - - {!item.image_field && ( + + {['up', 'left'].includes(imageSide) && ( + + {!item.image_field && ( + This content has no image, this is a default placeholder. - )} - {item.image_field && ( + + )} + {item.image_field && ( + {item.title} - )} - - )} - - {titleTag ? ( - titleTag(item.title ? item.title : item.id) - ) : ( -

{item.title ? item.title : item.id}

- )} - {effectiveDate &&

{moment(item.effective).format('L')}

} - {showDescription && item.description && ( -

{item.description}

+
)}
- {['right', 'down'].includes(imageSide) && ( - - {!item.image_field && ( + )} + + + + {item.title ? item.title : item.id} + + + {effectiveDate &&

{moment(item.effective).format('L')}

} + {showDescription && item.description && ( +

{item.description}

+ )} +
+ {['right', 'down'].includes(imageSide) && ( + + {!item.image_field && ( + This content has no image, this is a default placeholder. - )} - {item.image_field && ( + + )} + {item.image_field && ( + {item.title} - )} - - )} -
-
+ + )} + + )} + ))} - {link &&
{link}
} + {moreLink &&
{moreLink}
} ); }; diff --git a/src/advancedSchema.js b/src/advancedSchema.js index b3d772d..6e0fd1d 100644 --- a/src/advancedSchema.js +++ b/src/advancedSchema.js @@ -6,6 +6,11 @@ export const advancedSchema = (props) => { const imageWidth = ['right', 'left'].includes(formData.imageSide) ? ['imageWidth'] : []; + const headingChoices = [ + ['h2', 'H2'], + ['h3', 'H3'], + ['h4', 'H4'], + ]; return { ...schema, fieldsets: [ @@ -19,6 +24,11 @@ export const advancedSchema = (props) => { title: intl.formatMessage(messages.querystring), fields: ['querystring'], }, + { + id: 'header', + title: intl.formatMessage(messages.headerConfiguration), + fields: ['header', 'headerUrl', 'headerTag'], + }, { id: 'columns', title: intl.formatMessage(messages.columnsConfiguration), @@ -44,11 +54,32 @@ export const advancedSchema = (props) => { title: intl.formatMessage(messages.dateConfiguration), fields: ['effectiveDate'], }, + { + id: 'moreLink', + title: intl.formatMessage(messages.moreLinkConfiguration), + fields: ['moreLinkText', 'moreLinkUrl'], + }, ], properties: { ...schema.properties, + header: { + title: intl.formatMessage(messages.header), + description: intl.formatMessage(messages.headerDescription), + }, + headerUrl: { + title: intl.formatMessage(messages.headerUrl), + description: intl.formatMessage(messages.headerUrlDescription), + widget: 'object_browser', + mode: 'link', + allowExternals: true, + }, + headerTag: { + title: intl.formatMessage(messages.headerTag), + description: intl.formatMessage(messages.headerTagDescription), + choices: [['h1', 'H1'], ...headingChoices], + }, howManyColumns: { - title: intl.formatMessage(messages.columnsCountConfiguration), + title: intl.formatMessage(messages.columnsCount), choices: [ [1, '1'], [2, '2'], @@ -57,10 +88,8 @@ export const advancedSchema = (props) => { ], }, imageWidth: { - title: intl.formatMessage(messages.imageWidthConfiguration), - description: intl.formatMessage( - messages.imageWidthConfigurationDescription, - ), + title: intl.formatMessage(messages.imageWidth), + description: intl.formatMessage(messages.imageWidthDescription), choices: [ [2, '2/12'], [3, '3/12'], @@ -70,10 +99,8 @@ export const advancedSchema = (props) => { ], }, imageSide: { - title: intl.formatMessage(messages.imagePositionConfiguration), - description: intl.formatMessage( - messages.imagePositionConfigurationDescription, - ), + title: intl.formatMessage(messages.imagePosition), + description: intl.formatMessage(messages.imagePositionDescription), choices: [ [null, 'No image'], ['up', 'up'], @@ -83,29 +110,32 @@ export const advancedSchema = (props) => { ], }, titleTag: { - title: intl.formatMessage(messages.titleTagConfiguration), - description: intl.formatMessage( - messages.titleTagConfigurationDescription, - ), - choices: [ - [(children) =>

{children}

, 'H2'], - [(children) =>

{children}

, 'H3'], - [(children) =>

{children}

, 'H4'], - ], + title: intl.formatMessage(messages.titleTag), + description: intl.formatMessage(messages.titleTagDescription), + choices: headingChoices, }, showDescription: { - title: intl.formatMessage(messages.descriptionConfigurationTitle), - description: intl.formatMessage( - messages.descriptionConfigurationDescription, - ), + title: intl.formatMessage(messages.descriptionTitle), + description: intl.formatMessage(messages.descriptionDescription), type: 'boolean', default: true, }, effectiveDate: { - title: intl.formatMessage(messages.dateConfiguration), - description: intl.formatMessage(messages.dateConfigurationDescription), + title: intl.formatMessage(messages.date), + description: intl.formatMessage(messages.dateDescription), type: 'boolean', }, + moreLinkText: { + title: intl.formatMessage(messages.moreLinkText), + description: intl.formatMessage(messages.moreLinkTextDescription), + }, + moreLinkUrl: { + title: intl.formatMessage(messages.moreLinkUrl), + description: intl.formatMessage(messages.moreLinkUrlDescription), + widget: 'object_browser', + mode: 'link', + allowExternals: true, + }, }, }; }; diff --git a/src/messages.js b/src/messages.js index 916d841..3a3b776 100644 --- a/src/messages.js +++ b/src/messages.js @@ -4,11 +4,39 @@ const messages = defineMessages({ id: 'Query', defaultMessage: 'Query', }, + headerConfiguration: { + id: 'Header', + defaultMessage: 'Header', + }, + header: { + id: 'Header text', + defaultMessage: 'Header text', + }, + headerDescription: { + id: 'Header description', + defaultMessage: 'Block header text', + }, + headerUrl: { + id: 'Header url', + defaultMessage: 'Header url or object', + }, + headerUrlDescription: { + id: 'Header url description', + defaultMessage: 'Paste an external link or a plone object', + }, + headerTag: { + id: 'Header Tag', + defaultMessage: 'Header Tag', + }, + headerTagDescription: { + id: 'Header Tag description', + defaultMessage: 'Default HTML tag will be H3', + }, columnsConfiguration: { id: 'Columns configuration', - defaultMessage: 'Columns configuration', + defaultMessage: 'Columns', }, - columnsCountConfiguration: { + columnsCount: { id: 'How many columns:', defaultMessage: 'How many columns:', }, @@ -16,31 +44,31 @@ const messages = defineMessages({ id: 'Image position/size', defaultMessage: 'Image position/size', }, - imageWidthConfiguration: { + imageWidth: { id: 'Image width (x/12):', defaultMessage: 'Image width (x/12):', }, - imageWidthConfigurationDescription: { + imageWidthDescription: { id: 'Default image width will be 2/12', defaultMessage: 'Default image width will be 2/12', }, - imagePositionConfiguration: { + imagePosition: { id: 'Image position:', defaultMessage: 'Image position:', }, - imagePositionConfigurationDescription: { + imagePositionDescription: { id: 'Default with no image', defaultMessage: 'Default with no image', }, titleConfiguration: { id: 'Title configuration', - defaultMessage: 'Title configuration', + defaultMessage: 'Title', }, - titleTagConfiguration: { + titleTag: { id: 'Title text HTML tag', defaultMessage: 'Title text HTML tag', }, - titleTagConfigurationDescription: { + titleTagDescription: { id: 'Default HTML tag will be H3', defaultMessage: 'Default HTML tag will be H3', }, @@ -48,23 +76,46 @@ const messages = defineMessages({ id: 'description', defaultMessage: 'Description', }, - descriptionConfigurationTitle: { - id: 'descriptionConfigurationTitle', + descriptionTitle: { + id: 'descriptionTitle', defaultMessage: 'Show the description?', }, - descriptionConfigurationDescription: { - id: 'descriptionConfigurationDescription', + descriptionDescription: { + id: 'descriptionDescription', defaultMessage: 'If selected, the description will be shown', }, - dateConfiguration: { id: 'effectiveDate', - defaultMessage: 'effectiveDate', + defaultMessage: 'Effective date', + }, + date: { + id: 'effectiveDate', + defaultMessage: 'Effective date', }, - dateConfigurationDescription: { + dateDescription: { id: 'Show effectiveDate', defaultMessage: 'Show effectiveDate', }, + moreLinkConfiguration: { + id: 'moreLinkConfiguration', + defaultMessage: 'More link', + }, + moreLinkText: { + id: 'moreLinkText', + defaultMessage: 'Text', + }, + moreLinkTextDescription: { + id: 'moreLinkTextDescription', + defaultMessage: 'More link text', + }, + moreLinkUrl: { + id: 'moreLinkUrl', + defaultMessage: 'More link url or object', + }, + moreLinkUrlDescription: { + id: 'moreLinkUrlDescription', + defaultMessage: 'Paste an external link or a plone object', + }, }); export default messages;