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 && (
+
- )}
- {item.image_field && (
+
+ )}
+ {item.image_field && (
+
- )}
-
- )}
-
- {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 && (
+
- )}
- {item.image_field && (
+
+ )}
+ {item.image_field && (
+
- )}
-
- )}
-
-
+
+ )}
+
+ )}
+
))}
- {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;