Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@tiberiuichim
tiberiuichim committed Sep 26, 2022
1 parent a5a1324 commit a4c7ae5
Show file tree
Hide file tree
Showing 6 changed files with 138 additions and 78 deletions.
33 changes: 21 additions & 12 deletions src/blocks/Listing/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
import CardsCarousel from './templates/CardsCarousel';
import CustomCardsGalleryTemplate from './templates/CardsGallery';
import CustomNewsListTemplate from './templates/NewsList';
import CustomSummaryListingBlockTemplate from './templates/Summary';
import CardsGallery from './templates/CardsGallery';
import NewsList from './templates/NewsList';
import Summary from './templates/Summary';

import {
DefaultCardLayout,
ImageCardLayout,
LeftImageCardLayout,
RightImageCardLayout,
} from './CardTemplates';

import { DefaultItemLayout } from './ItemTemplates';
import { SearchItemLayout } from './SearchItemTemplate';

import { ListingStylingSchemaEnhancer } from './schema';
import { BasicListingBlockStylesSchema } from './schema';

// import { ListingStylingSchemaEnhancer } from './schema';

const applyConfig = (config) => {
// moment date locale. See https://momentjs.com/ - Multiple Locale Support
Expand All @@ -22,9 +26,12 @@ const applyConfig = (config) => {

const { schemaEnhancer } = listing;

// listing.stylesSchema = BasicListingBlockStylesSchema;

listing.schemaEnhancer = (props) => {
// NOTE: this is a schema finalizer
const schema = schemaEnhancer ? schemaEnhancer(props) : props.schema;
//

// move querystring to its own fieldset;
schema.fieldsets[0].fields = schema.fieldsets[0].fields.filter(
(f) => f !== 'querystring',
Expand All @@ -44,29 +51,31 @@ const applyConfig = (config) => {
id: 'summary',
isDefault: false,
title: 'Item listing',
template: CustomSummaryListingBlockTemplate,
schemaEnhancer: CustomSummaryListingBlockTemplate.schemaEnhancer,
template: Summary,
schemaEnhancer: Summary.schemaEnhancer,
stylesSchema: Summary.styleSchemaEnhancer,
},
{
id: 'cardsCarousel',
isDefault: false,
title: 'Cards carousel',
template: CardsCarousel,
schemaEnhancer: CardsCarousel.schemaEnhancer,
stylesSchema: CardsCarousel.styleSchemaEnhancer,
},
{
id: 'customCardsGalleryVariationId',
isDefault: false,
title: 'Cards gallery',
template: CustomCardsGalleryTemplate,
schemaEnhancer: CustomCardsGalleryTemplate.schemaEnhancer,
template: CardsGallery,
schemaEnhancer: CardsGallery.schemaEnhancer,
},
{
id: 'customNewsListVariationId',
isDefault: false,
title: 'News List',
template: CustomNewsListTemplate,
schemaEnhancer: CustomNewsListTemplate.schemaEnhancer,
template: NewsList,
schemaEnhancer: NewsList.schemaEnhancer,
},
];

Expand All @@ -84,7 +93,7 @@ const applyConfig = (config) => {
isDefault: false,
title: 'Search Item',
view: SearchItemLayout,
stylesSchema: ListingStylingSchemaEnhancer,
// stylesSchema: ListingStylingSchemaEnhancer,
},
],
cardTemplates: [
Expand Down
87 changes: 37 additions & 50 deletions src/blocks/Listing/schema.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,59 +62,46 @@ const messages = defineMessages({
},
});

export const ListingStylingSchemaEnhancer = ({ schema, intl }) => {
// console.log('schema', schema);
export const ListingStylingSchemaEnhancer = ({ schema }) => {
return schema;
};

schema.fieldsets.push({
id: 'styling',
title: intl.formatMessage(messages.styling),
fields: ['styles'],
});
export const BasicListingBlockStylesSchema = ({ schema, intl }) => {
// return schema;
schema.fieldsets[0].fields.push(
'theme',
'text_align',
// 'rounded',
// 'inverted',
);

const stylesSchema = {
title: intl.formatMessage(messages.Type),
block: 'listing',
fieldsets: [
{
id: 'default',
title: 'Default',
fields: ['theme', 'text_align', 'rounded', 'inverted'],
},
],
properties: {
theme: {
title: intl.formatMessage(messages.Theme),
description: intl.formatMessage(messages.ThemeHelp),
choices: [
['', intl.formatMessage(messages.ThemeDefault)],
['primary', intl.formatMessage(messages.ThemePrimary)],
['secondary', intl.formatMessage(messages.ThemeSecondary)],
['tertiary', intl.formatMessage(messages.ThemeTertiary)],
],
},
text_align: {
title: 'Text align',
widget: 'style_text_align',
actions: ALIGN_VALUE_MAP,
},
inverted: {
title: intl.formatMessage(messages.Inverted),
description: intl.formatMessage(messages.InvertedHelp),
type: 'boolean',
},
rounded: {
title: intl.formatMessage(messages.Rounded),
description: intl.formatMessage(messages.RoundedHelp),
type: 'boolean',
},
schema.properties = {
...schema.properties,
theme: {
title: intl.formatMessage(messages.Theme),
description: intl.formatMessage(messages.ThemeHelp),
choices: [
['', intl.formatMessage(messages.ThemeDefault)],
['primary', intl.formatMessage(messages.ThemePrimary)],
['secondary', intl.formatMessage(messages.ThemeSecondary)],
['tertiary', intl.formatMessage(messages.ThemeTertiary)],
],
},
required: [],
};

schema.properties.styles = {
widget: 'object',
title: intl.formatMessage(messages.styling),
schema: stylesSchema,
text_align: {
title: 'Text align',
widget: 'style_text_align',
actions: ALIGN_VALUE_MAP,
},
// inverted: {
// title: intl.formatMessage(messages.Inverted),
// description: intl.formatMessage(messages.InvertedHelp),
// type: 'boolean',
// },
// rounded: {
// title: intl.formatMessage(messages.Rounded),
// description: intl.formatMessage(messages.RoundedHelp),
// type: 'boolean',
// },
};

return schema;
Expand Down
5 changes: 5 additions & 0 deletions src/blocks/Listing/templates/Summary.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,11 @@ SummaryListing.schemaEnhancer = (args) => {
return schema;
};

SummaryListing.styleSchemaEnhancer = ({ schema }) => {
// console.log('style', schema);
return schema;
};

SummaryListing.propTypes = {
items: PropTypes.arrayOf(PropTypes.any).isRequired,
linkMore: PropTypes.any,
Expand Down
7 changes: 5 additions & 2 deletions src/components/UniversalCard/schema.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { defineMessages } from 'react-intl';
import { enhanceSchema } from '@eeacms/volto-listing-block/schema-utils';
import { schemaEnhancerFactory } from '@eeacms/volto-listing-block/schema-utils';

const messages = defineMessages({
title: {
Expand Down Expand Up @@ -110,7 +110,10 @@ const CardSchema = ({ formData }) => {

export default function universalCardSchemaEnhancer(props) {
const { schema } = props;
const enhancer = enhanceSchema({ extensionName: 'cardTemplates', messages });
const enhancer = schemaEnhancerFactory({
extensionName: 'cardTemplates',
messages,
});
return {
...schema,
fieldsets: [
Expand Down
15 changes: 10 additions & 5 deletions src/components/UniversalItem/schema.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {
enhanceSchema,
addStylingSchema,
schemaEnhancerFactory,
enhanceStylingSchema,
} from '@eeacms/volto-listing-block/schema-utils';
import { defineMessages } from 'react-intl';

Expand Down Expand Up @@ -77,10 +77,14 @@ const ItemSchema = ({ formData }) => {

export default function universalItemSchemaEnhancer(props) {
const { schema } = props;
const enhanceItemModel = enhanceSchema({

const enhanceItemModel = schemaEnhancerFactory({
extensionName: 'itemTemplates',
messages,
blockType: 'listing',
extensionField: '@type',
});

const baseSchema = {
...schema,
fieldsets: [
Expand All @@ -104,10 +108,11 @@ export default function universalItemSchemaEnhancer(props) {
},
};

const styledSchema = addStylingSchema({
const styledSchema = enhanceStylingSchema({
...props,
schema: baseSchema,
formData: props.formData?.itemModel || {},
// schema: baseSchema.properties.styles.schema,
formData: props.formData,
});

return styledSchema;
Expand Down
69 changes: 60 additions & 9 deletions src/schema-utils.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { cloneDeep } from 'lodash';
import config from '@plone/volto/registry';

import { defineMessages } from 'react-intl';
import { defaultStyleSchema } from '@plone/volto/components/manage/Blocks/Block/StylesSchema';

const addTypeSelect = ({ intl, schema, extensionName, messages }) => {
const field = '@type';
const extensions = config.blocks.blocksConfig.listing.extensions;
Expand All @@ -15,21 +18,25 @@ const addTypeSelect = ({ intl, schema, extensionName, messages }) => {
return schema;
};

export const enhanceSchema = ({
// Creates a factory that can trigger schemaEnhancer for a given extension
export const schemaEnhancerFactory = ({
extensionName,
messages,
blockType = 'listing',
extensionField = '@type',
}) => ({ schema: originalSchema, formData, intl }) => {
const extensionType = '@type'; // the attribute name that's stored in the block data
//
// the attribute name that's stored in the block data
// it identifies the type of extension that's
// applied. Similar in scope, for example, with the block @type

const blockConfig = config.blocks.blocksConfig[blockType];
const extensions = blockConfig.extensions;
const variations = extensions[extensionName];
const templates = extensions[extensionName];

const activeItemName = formData?.[extensionType];
let activeItem = variations?.find((item) => item.id === activeItemName);
if (!activeItem) activeItem = variations?.find((item) => item.isDefault);
const activeItemName = formData?.[extensionField];
let activeItem = templates?.find((item) => item.id === activeItemName);
if (!activeItem) activeItem = templates?.find((item) => item.isDefault);

const schemaEnhancer = activeItem?.['schemaEnhancer'];

Expand All @@ -40,13 +47,55 @@ export const enhanceSchema = ({
return addTypeSelect({ schema, intl, extensionName, messages });
};

export const addStylingSchema = ({
const messages = defineMessages({
variation: {
id: 'Variation',
defaultMessage: 'Variation',
},
styling: {
id: 'Styling',
defaultMessage: 'Styling',
},
});

const addStylesField = ({ schema, intl, formData }) => {
// Add the default style schema as the first step in the "ladder".
// The order is as follows:
//
// - default volto style schema
// - listing block -> default style schema enhancer
// - listing block variation -> style schema enhancer
// - listing block card/item extension -> style schema enhancer
//
// We omit the first step in ladder because of bugs in Volto < 16.0.0-alpha.36
// In later versions we won't have to redefine the styles field

if (schema.properties.styles) return schema;

schema.fieldsets.push({
id: 'styling',
title: intl.formatMessage(messages.styling),
fields: ['styles'],
});

schema.properties.styles = {
widget: 'object',
title: intl.formatMessage(messages.styling),
schema: defaultStyleSchema({ formData, intl }),
};

return schema;
};
export const enhanceStylingSchema = ({
formData,
schema,
blockType = 'listing',
extensionName = 'itemTemplates',
extensionName = 'itemModel',
intl,
}) => {
// Adds (to the limited styles schema) the new styling schema enhancements
schema = addStylesField({ formData, schema, intl });

const extensionType = '@type'; // the attribute name that's stored in the block data
const activeItemName = formData?.[extensionType];
const blockConfig = config.blocks.blocksConfig[blockType];
Expand All @@ -58,10 +107,12 @@ export const addStylingSchema = ({
const variations = extensions[extensionName];
let activeItem = variations?.find((item) => item.id === activeItemName);

const variationStyleSchema = activeVariation.stylesSchema;
// TODO: not needed after bug fix in Volto
const variationStyleSchema = activeVariation?.stylesSchema;
schema = variationStyleSchema
? variationStyleSchema({ schema: cloneDeep(schema), formData, intl })
: schema;
// end TODO

const stylingSchema = activeItem?.['stylesSchema'];
schema = stylingSchema
Expand Down

0 comments on commit a4c7ae5

Please sign in to comment.