@eeacms/volto-eea-website-policy 0.2.6 → 0.3.2

package/CHANGELOG.md

@@ -4,8 +4,30 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [0.3.2](https://github.com/eea/volto-eea-website-policy/compare/0.3.1...0.3.2)
+
+- Safely get data - refs #153018 [`aefc689`](https://github.com/eea/volto-eea-website-policy/commit/aefc68979f6aad86ea02952f82e639dfe8c566f2)
+- Customize Blocks helper - copy unchanged from @plone/volto 16.alpha.12 [`368ffa8`](https://github.com/eea/volto-eea-website-policy/commit/368ffa8c9ebfc54d364d7bf13b60f4016f1c90e8)
+
+#### [0.3.1](https://github.com/eea/volto-eea-website-policy/compare/0.3.0...0.3.1)
+
+> 1 August 2022
+
+- feature(navigation): addde context navigation block [`#14`](https://github.com/eea/volto-eea-website-policy/pull/14)
+
+#### [0.3.0](https://github.com/eea/volto-eea-website-policy/compare/0.2.6...0.3.0)
+
+> 6 July 2022
+
+- change(teaser): enabled theming for icon and text color [`#13`](https://github.com/eea/volto-eea-website-policy/pull/13)
+- change(package): bump release version [`1b00439`](https://github.com/eea/volto-eea-website-policy/commit/1b0043933442bb73c1042dce644a2c09e5f210f4)
+- change(item): enable theming for icon and text color and added tertiary option [`58c2d28`](https://github.com/eea/volto-eea-website-policy/commit/58c2d2864fe94c9e7808064b61d3b6c4e6fccbb1)
+- change(item): commented sizes too small for item icons and enabled tertiary theme [`0f02d7d`](https://github.com/eea/volto-eea-website-policy/commit/0f02d7d6204b068b78c3f977a561782a19b6f79e)
+
 #### [0.2.6](https://github.com/eea/volto-eea-website-policy/compare/0.2.5...0.2.6)
 
+> 1 July 2022
+
 - Fix Cannot read properties of undefined (reading 'translations') [`8e7b8b8`](https://github.com/eea/volto-eea-website-policy/commit/8e7b8b8533b14f173d77783fe2d0b517c29c5937)
 - Customize Toolbar.jsx - copied unchanged from @plone/volto 16.0.0.alpha.11 [`b7add4f`](https://github.com/eea/volto-eea-website-policy/commit/b7add4faa8ef2dde7d77489fc8bc431cbb023314)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-policy",
-  "version": "0.2.6",
+  "version": "0.3.2",
   "description": "@eeacms/volto-eea-website-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/Blocks/ContextNavigation/ContextNavigationEdit.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { EditSchema } from './schema';
+import { InlineForm, SidebarPortal } from '@plone/volto/components';
+import ContextNavigationView from './ContextNavigationView';
+
+const ContextNavigationFillView = (props) => {
+  const schema = EditSchema();
+  return (
+    <>
+      <h3>Context navigation</h3>
+      <ContextNavigationView {...props} />{' '}
+      <SidebarPortal selected={props.selected}>
+        {props.selected && (
+          <InlineForm
+            title={schema.title}
+            schema={schema}
+            formData={props.data}
+            onChangeField={(id, value) => {
+              props.onChangeBlock(props.block, {
+                ...props.data,
+                [id]: value,
+              });
+            }}
+          />
+        )}
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default ContextNavigationFillView;

package/src/components/Blocks/ContextNavigation/ContextNavigationView.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ConnectedContextNavigation from '@plone/volto/components/theme/Navigation/ContextNavigation';
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+const ContextNavigationView = ({ data = {} }) => {
+  const navProps = { ...data };
+  const root_path = data?.root_node?.[0]?.['@id'];
+  if (root_path) navProps['root_path'] = flattenToAppURL(root_path);
+
+  return (
+    <>
+      <ConnectedContextNavigation params={navProps} />
+    </>
+  );
+};
+
+export default ContextNavigationView;

package/src/components/Blocks/ContextNavigation/index.js

@@ -0,0 +1,26 @@
+import codeSVG from '@plone/volto/icons/code.svg';
+import ContextNavigationEdit from './ContextNavigationEdit';
+import ContextNavigationView from './ContextNavigationView';
+import BlockSettingsSchema from '@plone/volto/components/manage/Blocks/Block/Schema';
+
+export default (config) => {
+  config.blocks.blocksConfig.contextNavigation = {
+    id: 'contextNavigation',
+    title: 'Navigation',
+    icon: codeSVG,
+    group: 'site',
+    view: ContextNavigationView,
+    edit: ContextNavigationEdit,
+    schema: BlockSettingsSchema,
+    restricted: false,
+    mostUsed: true,
+    blockHasOwnFocusManagement: true,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  };
+
+  return config;
+};

package/src/components/Blocks/ContextNavigation/schema.js

@@ -0,0 +1,81 @@
+export const EditSchema = () => {
+  return {
+    title: 'Navigation',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [
+          'name',
+          'root_node',
+          'includeTop',
+          'currentFolderOnly',
+          'topLevel',
+          'bottomLevel',
+          'no_icons',
+          'thumb_scale',
+          'no_thumbs',
+        ],
+      },
+    ],
+    required: [],
+    properties: {
+      name: {
+        title: 'Title',
+        description: 'The title of the navigation tree',
+      },
+      root_node: {
+        title: 'Root node',
+        description:
+          'You may search for and choose a folder to act as the root of the navigation tree. Leave blank to use the Plone site root.',
+        widget: 'object_browser',
+        // TODO: these don't work. Why?
+        mode: 'link',
+        selectedItemAttrs: ['Title', 'Description'],
+      },
+      includeTop: {
+        title: 'Include top node',
+        description:
+          "Whether or not to show the top, or 'root', node in the navigation tree. This is affected by the 'Start level' setting.",
+        type: 'boolean',
+      },
+      currentFolderOnly: {
+        title: 'Only show the contents of the current folder',
+        description:
+          'If selected, the navigation tree will only show the current folder and its children at all times.',
+        type: 'boolean',
+      },
+
+      topLevel: {
+        title: 'Start level',
+        description:
+          'An integer value that specifies the number of folder levels below the site root that must be exceeded before the navigation tree will display. 0 means that the navigation tree should be displayed everywhere including pages in the root of the site. 1 means the tree only shows up inside folders located in the root and downwards, never showing at the top level.',
+        type: 'number',
+        default: 1,
+      },
+      bottomLevel: {
+        title: 'Navigation tree depth',
+        description:
+          'How many folders should be included before the navigation tree stops. 0 means no limit. 1 only includes the root folder.',
+        type: 'number',
+        default: 0,
+      },
+      no_icons: {
+        title: 'Supress icons',
+        description:
+          'If enabled, the portlet will not show document type icons.',
+        type: 'boolean',
+      },
+      thumb_scale: {
+        title: 'Override thumb scale',
+        description:
+          "Enter a valid scale name (see 'Image Handling' control panel) to override (e.g. icon, tile, thumb, mini, preview, ... ). Leave empty to use default (see 'Site' control panel).",
+      },
+      no_thumbs: {
+        title: 'Supress thumbs',
+        type: 'boolean',
+        description: 'If enabled, the portlet will not show thumbs.',
+      },
+    },
+  };
+};

package/src/components/Blocks/Item/schema.js

@@ -12,7 +12,13 @@ export default ({ data }) => {
         ? [{ id: 'image', title: 'Image', fields: ['image', 'imageSize'] }]
         : []),
       ...(assetType === 'icon'
-        ? [{ id: 'icon', title: 'Icon', fields: ['icon', 'iconSize'] }]
+        ? [
+            {
+              id: 'icon',
+              title: 'Icon',
+              fields: ['icon', 'iconSize', 'iconTheme'],
+            },
+          ]
         : []),
     ],
     properties: {
@@ -31,10 +37,11 @@ export default ({ data }) => {
       imageSize: {
         title: 'Image size',
         choices: [
-          ['mini', 'Mini'],
-          ['tile', 'Tile'],
-          ['tiny', 'Tiny'],
-          ['small', 'Small'],
+          // commented as they were too small to use as item icons
+          // ['mini', 'Mini'],
+          // ['tile', 'Tile'],
+          // ['tiny', 'Tiny'],
+          // ['small', 'Small'],
           ['large', 'Large'],
           ['big', 'Big'],
           ['huge', 'Huge'],
@@ -63,6 +70,7 @@ export default ({ data }) => {
         choices: [
           ['primary', 'Primary'],
           ['secondary', 'Secondary'],
+          ['tertiary', 'Tertiary'],
         ],
       },
     },
@@ -86,6 +94,7 @@ export const stylingSchema = ({ intl }) => ({
       choices: [
         ['primary', 'Primary'],
         ['secondary', 'Secondary'],
+        ['tertiary', 'Tertiary'],
       ],
     },
     verticalAlign: {

package/src/customizations/volto/helpers/Blocks/Blocks.js

@@ -0,0 +1,440 @@
+/**
+ * Blocks helper.
+ * @module helpers/Blocks
+ */
+
+import { omit, without, endsWith, find, isObject, keys, toPairs } from 'lodash';
+import move from 'lodash-move';
+import { v4 as uuid } from 'uuid';
+import config from '@plone/volto/registry';
+import { applySchemaEnhancer } from '@plone/volto/helpers';
+
+/**
+ * Get blocks field.
+ * @function getBlocksFieldname
+ * @param {Object} props Properties.
+ * @return {string} Field name of the blocks
+ */
+export function getBlocksFieldname(props) {
+  return (
+    find(
+      keys(props),
+      (key) => key !== 'volto.blocks' && endsWith(key, 'blocks'),
+    ) || null
+  );
+}
+
+/**
+ * Get blocks layout field.
+ * @function getBlocksLayoutFieldname
+ * @param {Object} props Properties.
+ * @return {string} Field name of the blocks layout
+ */
+export function getBlocksLayoutFieldname(props) {
+  return (
+    find(
+      keys(props),
+      (key) => key !== 'volto.blocks' && endsWith(key, 'blocks_layout'),
+    ) || null
+  );
+}
+
+/**
+ * Has blocks data.
+ * @function hasBlocksData
+ * @param {Object} props Properties.
+ * @return {boolean} True if it has blocks data.
+ */
+export function hasBlocksData(props) {
+  return (
+    find(
+      keys(props),
+      (key) => key !== 'volto.blocks' && endsWith(key, 'blocks'),
+    ) !== undefined
+  );
+}
+
+/**
+ * Pluggable method to test if a block has a set value (any non-empty value)
+ * @function blockHasValue
+ * @param {Object} data Block data
+ * @return {boolean} True if block has a non-empty value
+ */
+export function blockHasValue(data) {
+  const { blocks } = config;
+  const blockType = data['@type'];
+  const check = blocks.blocksConfig[blockType]?.blockHasValue;
+  if (!check) {
+    return true;
+  }
+  return check(data);
+}
+
+/**
+ * Get block pairs of [id, block] from content properties
+ * @function getBlocks
+ * @param {Object} properties
+ * @return {Array} a list of block [id, value] pairs, in order from layout
+ */
+export const getBlocks = (properties) => {
+  const blocksFieldName = getBlocksFieldname(properties);
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
+  return (
+    properties[blocksLayoutFieldname]?.items?.map((n) => [
+      n,
+      properties[blocksFieldName][n],
+    ]) || []
+  );
+};
+
+/**
+ * Move block to different location index within blocks_layout
+ * @function moveBlock
+ * @param {Object} formData Form data
+ * @param {number} source index within form blocks_layout items
+ * @param {number} destination index within form blocks_layout items
+ * @return {Object} New form data
+ */
+export function moveBlock(formData, source, destination) {
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
+  return {
+    ...formData,
+    [blocksLayoutFieldname]: {
+      items: move(formData[blocksLayoutFieldname].items, source, destination),
+    },
+  };
+}
+
+/**
+ * Delete block by id
+ * @function deleteBlock
+ * @param {Object} formData Form data
+ * @param {string} blockId Block uid
+ * @return {Object} New form data
+ */
+export function deleteBlock(formData, blockId) {
+  const blocksFieldname = getBlocksFieldname(formData);
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
+
+  let newFormData = {
+    ...formData,
+    [blocksLayoutFieldname]: {
+      items: without(formData[blocksLayoutFieldname].items, blockId),
+    },
+    [blocksFieldname]: omit(formData[blocksFieldname], [blockId]),
+  };
+
+  if (newFormData[blocksLayoutFieldname].items.length === 0) {
+    newFormData = addBlock(newFormData, config.settings.defaultBlockType, 0);
+  }
+
+  return newFormData;
+}
+
+/**
+ * Add block
+ * @function addBlock
+ * @param {Object} formData Form data
+ * @param {string} type Block type
+ * @param {number} index Destination index
+ * @return {Array} New block id, New form data
+ */
+export function addBlock(formData, type, index) {
+  const { settings } = config;
+  const id = uuid();
+  const idTrailingBlock = uuid();
+  const blocksFieldname = getBlocksFieldname(formData);
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
+  const totalItems = formData[blocksLayoutFieldname].items.length;
+  const insert = index === -1 ? totalItems : index;
+
+  return [
+    id,
+    {
+      ...formData,
+      [blocksLayoutFieldname]: {
+        items: [
+          ...formData[blocksLayoutFieldname].items.slice(0, insert),
+          id,
+          ...(type !== settings.defaultBlockType ? [idTrailingBlock] : []),
+          ...formData[blocksLayoutFieldname].items.slice(insert),
+        ],
+      },
+      [blocksFieldname]: {
+        ...formData[blocksFieldname],
+        [id]: {
+          '@type': type,
+        },
+        ...(type !== settings.defaultBlockType && {
+          [idTrailingBlock]: {
+            '@type': settings.defaultBlockType,
+          },
+        }),
+      },
+      selected: id,
+    },
+  ];
+}
+
+/**
+ * Mutate block
+ * @function mutateBlock
+ * @param {Object} formData Form data
+ * @param {string} id Block uid to mutate
+ * @param {number} value Block's new value
+ * @return {Object} New form data
+ */
+export function mutateBlock(formData, id, value) {
+  const { settings } = config;
+  const blocksFieldname = getBlocksFieldname(formData);
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
+  const index = formData[blocksLayoutFieldname].items.indexOf(id) + 1;
+
+  // Test if block at index is already a placeholder (trailing) block
+  const trailId = formData[blocksLayoutFieldname].items[index];
+  if (trailId) {
+    const block = formData[blocksFieldname][trailId];
+    if (!blockHasValue(block)) {
+      return {
+        ...formData,
+        [blocksFieldname]: {
+          ...formData[blocksFieldname],
+          [id]: value || null,
+        },
+      };
+    }
+  }
+
+  const idTrailingBlock = uuid();
+  return {
+    ...formData,
+    [blocksFieldname]: {
+      ...formData[blocksFieldname],
+      [id]: value || null,
+      [idTrailingBlock]: {
+        '@type': settings.defaultBlockType,
+      },
+    },
+    [blocksLayoutFieldname]: {
+      items: [
+        ...formData[blocksLayoutFieldname].items.slice(0, index),
+        idTrailingBlock,
+        ...formData[blocksLayoutFieldname].items.slice(index),
+      ],
+    },
+  };
+}
+
+/**
+ * Insert new block before another block
+ * @function insertBlock
+ * @param {Object} formData Form data
+ * @param {string} id Insert new block before the block with this id
+ * @param {number} value New block's value
+ * @return {Array} New block id, New form data
+ */
+export function insertBlock(formData, id, value, current = {}) {
+  const blocksFieldname = getBlocksFieldname(formData);
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
+  const index = formData[blocksLayoutFieldname].items.indexOf(id);
+
+  const newBlockId = uuid();
+  return [
+    newBlockId,
+    {
+      ...formData,
+      [blocksFieldname]: {
+        ...formData[blocksFieldname],
+        [newBlockId]: value || null,
+        [id]: {
+          ...formData[blocksFieldname][id],
+          ...current,
+        },
+      },
+      [blocksLayoutFieldname]: {
+        items: [
+          ...formData[blocksLayoutFieldname].items.slice(0, index),
+          newBlockId,
+          ...formData[blocksLayoutFieldname].items.slice(index),
+        ],
+      },
+    },
+  ];
+}
+
+/**
+ * Change block
+ * @function changeBlock
+ * @param {Object} formData Form data
+ * @param {string} id Block uid to change
+ * @param {number} value Block's new value
+ * @return {Object} New form data
+ */
+export function changeBlock(formData, id, value) {
+  const blocksFieldname = getBlocksFieldname(formData);
+  return {
+    ...formData,
+    [blocksFieldname]: {
+      ...formData[blocksFieldname],
+      [id]: value || null,
+    },
+  };
+}
+
+/**
+ * Get the next block UID within form
+ * @function nextBlockId
+ * @param {Object} formData Form data
+ * @param {string} currentBlock Block uid
+ * @return {string} Next block uid
+ */
+export function nextBlockId(formData, currentBlock) {
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
+  const currentIndex = formData[blocksLayoutFieldname].items.indexOf(
+    currentBlock,
+  );
+
+  if (currentIndex === formData[blocksLayoutFieldname].items.length - 1) {
+    // We are already at the bottom block don't do anything
+    return null;
+  }
+
+  const newIndex = currentIndex + 1;
+  return formData[blocksLayoutFieldname].items[newIndex];
+}
+
+/**
+ * Get the previous block UID within form
+ * @function previousBlockId
+ * @param {Object} formData Form data
+ * @param {string} currentBlock Block uid
+ * @return {string} Previous block uid
+ */
+export function previousBlockId(formData, currentBlock) {
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
+  const currentIndex = formData[blocksLayoutFieldname].items.indexOf(
+    currentBlock,
+  );
+
+  if (currentIndex === 0) {
+    // We are already at the top block don't do anything
+    return null;
+  }
+  const newindex = currentIndex - 1;
+  return formData[blocksLayoutFieldname].items[newindex];
+}
+
+/**
+ * Generate empty block form
+ * @function emptyBlocksForm
+ * @param {Object} formData Form data
+ * @return {Object} Empty blocks form with one defaultBlockType block
+ */
+export function emptyBlocksForm() {
+  const { settings } = config;
+  const id = uuid();
+  return {
+    blocks: {
+      [id]: {
+        '@type': settings.defaultBlockType,
+      },
+    },
+    blocks_layout: { items: [id] },
+  };
+}
+
+/**
+ * Recursively discover blocks in data and call the provided callback
+ * @function visitBlocks
+ * @param {Object} content A content data structure (an object with blocks and blocks_layout)
+ * @param {Function} callback A function to call on each discovered block
+ */
+export function visitBlocks(content, callback) {
+  const queue = getBlocks(content);
+  while (queue.length > 0) {
+    const [id, blockdata] = queue.shift();
+    callback([id, blockdata]);
+
+    // assumes that a block value is like: {blocks, blocks_layout} or
+    // { data: {blocks, blocks_layout}}
+    if (Object.keys(blockdata || {}).indexOf('blocks') > -1) {
+      queue.push(...getBlocks(blockdata));
+    }
+    if (Object.keys(blockdata?.data || {}).indexOf('blocks') > -1) {
+      queue.push(...getBlocks(blockdata.data));
+    }
+  }
+}
+
+/**
+ * Initializes data with the default values coming from schema
+ */
+export function applySchemaDefaults({ data = {}, schema }) {
+  const derivedData = {
+    ...Object.keys(schema.properties).reduce((accumulator, currentField) => {
+      return schema.properties[currentField].default
+        ? {
+            ...accumulator,
+            [currentField]: schema.properties[currentField].default,
+          }
+        : accumulator;
+    }, {}),
+    ...data,
+  };
+  return derivedData;
+}
+
+/**
+ * Apply the block's default (as defined in schema) to the block data.
+ *
+ * @function applyBlockDefaults
+ * @param {Object} params An object with data, intl and anything else
+ * @return {Object} Derived data, with the defaults extracted from the schema
+ */
+export function applyBlockDefaults({ data = {}, intl, ...rest }, blocksConfig) {
+  const block_type = data['@type'];
+  const { blockSchema } =
+    (blocksConfig || config.blocks.blocksConfig)[block_type] || {};
+  if (!blockSchema) return data;
+
+  let schema =
+    typeof blockSchema === 'function'
+      ? blockSchema({ data, intl, ...rest })
+      : blockSchema;
+  schema = applySchemaEnhancer({ schema, formData: data, intl });
+
+  return applySchemaDefaults({ data, schema });
+}
+
+export const buildStyleClassNamesFromData = (styles) => {
+  // styles has the form
+  // const styles = {
+  // color: 'red',
+  // backgroundColor: '#AABBCC',
+  // }
+  // Returns: ['has--color--red', 'has--backgroundColor--AABBCC']
+  let styleArray = [];
+  const pairedStyles = toPairs(styles);
+  pairedStyles.forEach((item) => {
+    if (isObject(item[1])) {
+      const flattenedNestedStyles = toPairs(item[1]).map((nested) => [
+        item[0],
+        ...nested,
+      ]);
+      flattenedNestedStyles.forEach((sub) => styleArray.push(sub));
+    } else {
+      styleArray.push(item);
+    }
+  });
+  return styleArray.map((item) => {
+    const classname = item.map((item) => {
+      const str_item = item ? item.toString() : '';
+      return str_item && str_item.startsWith('#')
+        ? str_item.replace('#', '')
+        : str_item;
+    });
+    return `has--${classname[0]}--${classname[1]}${
+      classname[2] ? `--${classname[2]}` : ''
+    }`;
+  });
+};

package/src/index.js

@@ -2,6 +2,7 @@ import { runtimeConfig } from '@plone/volto/runtime_config';
 import installCallout from 'volto-slate/editor/plugins/Callout';
 import installItemBlock from '@eeacms/volto-eea-website-policy/components/Blocks/Item';
 import customizeTeaserBlock from '@eeacms/volto-eea-website-policy/components/Blocks/Teaser';
+import installContextNavigationBlock from '@eeacms/volto-eea-website-policy/components/Blocks/ContextNavigation';
 
 const applyConfig = (config) => {
   // if (process.env.NODE_ENV === 'production') {
@@ -99,10 +100,11 @@ const applyConfig = (config) => {
   }
 
   // Custom blocks
-  config = [installItemBlock, customizeTeaserBlock].reduce(
-    (acc, apply) => apply(acc),
-    config,
-  );
+  config = [
+    installItemBlock,
+    installContextNavigationBlock,
+    customizeTeaserBlock,
+  ].reduce((acc, apply) => apply(acc), config);
   config.blocks.blocksConfig.item.mostUsed = true;
 
   // Disable some blocks