@eeacms/volto-marine-policy 0.1.20

package/src/index.js

@@ -0,0 +1,467 @@
+import React from 'react';
+import {
+  // HeroSectionView,
+  // FullwidthView,
+  DatabaseItemView,
+  MetadataListingView,
+  SimpleListingView,
+} from './components';
+// import installAppExtras from './components/theme/AppExtras';
+// import HomePageView from '@eeacms/volto-eea-website-theme/components/theme/Homepage/HomePageView';
+// import HomePageInverseView from '@eeacms/volto-eea-website-theme/components/theme/Homepage/HomePageInverseView';
+
+import installMsfdDataExplorerBlock from './components/Blocks/MsfdDataExplorerBlock';
+import { breadcrumb, localnavigation } from './reducers';
+import customBlockTemplates from '@eeacms/volto-marine-policy/components/Blocks/CustomBlockTemplates/customBlockTemplates';
+import TextAlignWidget from './components/Widgets/TextAlign';
+import './slate-styles.less';
+
+import installSearchEngine from './search';
+
+// import TokenWidget from '@plone/volto/components/manage/Widgets/TokenWidget';
+import linkSVG from '@plone/volto/icons/link.svg';
+import { makeInlineElementPlugin } from '@plone/volto-slate/elementEditor';
+import { LINK } from '@plone/volto-slate/constants';
+import { LinkElement } from '@plone/volto-slate/editor/plugins/AdvancedLink/render';
+import { withLink } from '@plone/volto-slate/editor/plugins/AdvancedLink/extensions';
+import { linkDeserializer } from '@plone/volto-slate/editor/plugins/AdvancedLink/deserialize';
+import LinkEditSchema from '@plone/volto-slate/editor/plugins/AdvancedLink/schema';
+
+import { defineMessages } from 'react-intl'; // , defineMessages
+
+import marineLogo from '@eeacms/volto-marine-policy/../theme/assets/images/Header/wise-marine-logo.svg';
+import marineLogoWhite from '@eeacms/volto-marine-policy/../theme/assets/images/Header/wise-marine-logo-white.svg';
+import eeaWhiteLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eea-logo-white.svg';
+import europeanComissionLogo from '@eeacms/volto-marine-policy/static/ec_logo_white.svg';
+import MeasureView from '@eeacms/volto-marine-policy/components/Widgets/MeasureViewWidget';
+
+const available_colors = [
+  '#ffffff',
+  '#f7f3ef',
+  '#e3edf7',
+  '#002d54',
+  '#59d3ff',
+  '#2dd2b7',
+  '#1271e1',
+  '#826A6A',
+  '#FAD0C3',
+  '#F3E2AB',
+  '#C1E1C5',
+  '#BEDADC',
+  '#BED3F3',
+  '#000000',
+];
+
+const restrictedBlocks = ['imagecards'];
+
+const messages = defineMessages({
+  edit: {
+    id: 'Edit link',
+    defaultMessage: 'Edit link',
+  },
+  delete: {
+    id: 'Remove link',
+    defaultMessage: 'Remove link',
+  },
+  document_view: {
+    id: 'Document View',
+    defaultMessage: 'Document View',
+  },
+  herosection_view: {
+    id: 'Hero Section View',
+    defaultMessage: 'Hero Section View',
+  },
+  fullwidth_view: {
+    id: 'Full Width View',
+    defaultMessage: 'Full Width View',
+  },
+});
+
+const applyConfig = (config) => {
+  config.views.layoutViews = {
+    ...config.views.layoutViews,
+    // document_view: HeroSectionView,
+    // herosection_view: HeroSectionView,
+    // fullwidth_view: FullwidthView,
+  };
+  config.views.layoutViewsNamesMapping = {
+    ...(config.views.layoutViewsNamesMapping || {}),
+    document_view: 'Document View',
+    // herosection_view: 'Hero Section View',
+    // fullwidth_view: 'Full Width View',
+  };
+  config.views.contentTypesViews = {
+    ...config.views.contentTypesViews,
+    // Folder: HomePageInverseView,
+    // Document: HeroSectionView,
+    dashboard: DatabaseItemView,
+    dataset: DatabaseItemView,
+    database: DatabaseItemView,
+    publication_report: DatabaseItemView,
+    indicator: DatabaseItemView,
+    briefing: DatabaseItemView,
+    // map_interactive: DatabaseItemView,
+  };
+
+  config.addonReducers = {
+    ...(config.addonReducers || {}),
+    breadcrumb,
+    localnavigation,
+  };
+
+  config.widgets.widget.text_align = TextAlignWidget;
+  // Disabled TokenWidget for 'theme', it breaks the 'theme' field in volto-tabs-block in the 'horizontal carousel' layout
+  // We have a 'theme' field in the wise catalogue metadata (CatalogueMetadata)
+  // config.widgets.id.theme = TokenWidget;
+
+  config.blocks.groupBlocksOrder = [
+    ...config.blocks.groupBlocksOrder,
+    { id: 'marine_addons', title: 'Marine' },
+  ];
+
+  config.blocks = {
+    ...config.blocks,
+    blocksConfig: { ...customBlockTemplates(config) },
+  };
+
+  // on home contextNavigation should return false
+  config.blocks.blocksConfig.contextNavigation = {
+    ...config.blocks.blocksConfig.contextNavigation,
+    blockHasValue: (data) => {
+      return data.pathname !== '/';
+    },
+  };
+  config.blocks.blocksConfig.listing = {
+    ...config.blocks.blocksConfig.listing,
+    variations: [
+      ...config.blocks.blocksConfig.listing.variations,
+      {
+        id: 'metadata',
+        title: 'Metadata Listing',
+        template: MetadataListingView,
+        isDefault: false,
+      },
+      {
+        id: 'simple',
+        title: 'Simple Listing',
+        template: SimpleListingView,
+        isDefault: false,
+      },
+    ],
+  };
+
+  config.settings.useQuantaToolbar = false;
+
+  config.settings.apiExpanders = [
+    ...config.settings.apiExpanders,
+    {
+      match: '/marine',
+      GET_CONTENT: ['object_provides'],
+    },
+    {
+      match: '/marine-new',
+      GET_CONTENT: ['object_provides'],
+    },
+  ];
+
+  // do not expand breadcrumbs. This fixed the breadcrumbs in contents view. The hasApiExpander needs to be made
+  // generic to also look for nonContentRoutes.
+  (config.settings.apiExpanders || []).forEach((item) => {
+    if (item.GET_CONTENT.includes('breadcrumbs')) {
+      item.GET_CONTENT.splice(item.GET_CONTENT.indexOf('breadcrumbs', 1));
+    }
+  });
+
+  config.settings.navDepth = 3;
+
+  config.settings.available_colors = available_colors;
+
+  config.settings.externalRoutes = [
+    ...(config.settings.externalRoutes || []),
+    ...(config.settings.prefixPath
+      ? [
+          {
+            match: {
+              path: /\/$/,
+              exact: true,
+              strict: true,
+            },
+
+            url(payload) {
+              return payload.location.pathname;
+            },
+          },
+        ]
+      : []),
+  ];
+  config.settings.externalRoutes = [
+    ...(config.settings.externalRoutes || []),
+    {
+      match: {
+        path: '/(.*)marine(-new)?/assessment-module(.*)',
+        exact: false,
+        strict: false,
+      },
+      url(payload) {
+        return payload.location.pathname;
+      },
+    },
+    {
+      match: {
+        path:
+          '/(.*)marine(-new)?/countries-and-regional-seas/country-profiles(.*)',
+        exact: false,
+        strict: false,
+      },
+      url(payload) {
+        return payload.location.pathname;
+      },
+    },
+    {
+      match: {
+        path:
+          '/(.*)marine(-new)?/policy-and-reporting/msfd-reports-and-assessments(.*)',
+        exact: false,
+        strict: false,
+      },
+      url(payload) {
+        return payload.location.pathname;
+      },
+    },
+    {
+      match: {
+        path:
+          '/(.*)marine(-new)?/policy-and-reporting/reports-and-assessments(.*)',
+        exact: false,
+        strict: false,
+      },
+      url(payload) {
+        return payload.location.pathname;
+      },
+    },
+    {
+      match: {
+        path:
+          '/(.*)marine(-new)?/policy-and-reporting/assessment-by-country(.*)',
+        exact: false,
+        strict: false,
+      },
+      url(payload) {
+        return payload.location.pathname;
+      },
+    },
+    {
+      match: {
+        path:
+          '/(.*)marine(-new)?/policy-and-reporting/assessment-by-region(.*)',
+        exact: false,
+        strict: false,
+      },
+      url(payload) {
+        return payload.location.pathname;
+      },
+    },
+  ];
+
+  config.settings.pluggableStyles = [
+    ...(config.settings.pluggableStyles || []),
+    {
+      id: 'uiContainer',
+      title: 'Container',
+      viewComponent: (props) => {
+        return <div className="ui container">{props.children}</div>;
+      },
+    },
+    {
+      id: 'primary-table',
+      title: 'Primary table',
+      // previewComponent: () => (
+      //   <Icon name={contentBoxSVG} size="88px" className="primary" />
+      // ),
+      viewComponent: (props) => {
+        return (
+          <div className="content-box primary-table">
+            <div className="content-box-inner">{props.children}</div>
+          </div>
+        );
+      },
+    },
+  ];
+
+  // restrict blocks
+  restrictedBlocks.forEach((block) => {
+    if (config.blocks.blocksConfig[block]) {
+      config.blocks.blocksConfig[block].restricted = true;
+    }
+  });
+
+  // mega menu layout settings
+  config.settings.menuItemsLayouts = {
+    ...config.settings.menuItemsLayouts,
+    '/marine/countries-and-regional-seas': {
+      menuItemColumns: ['eight wide column', 'four wide column'],
+      menuItemChildrenListColumns: [5, 1],
+      appendExtraMenuItemsToLastColumn: true,
+      hideChildrenFromNavigation: false,
+    },
+    '/marine/europe-seas': {
+      // menuItemColumns: [
+      //   'three wide column',
+      //   'three wide column',
+      //   'three wide column',
+      //   // 'three wide column',
+      //   // 'three wide column',
+      // ],
+      menuItemChildrenListColumns: [1, 1, 1],
+      appendExtraMenuItemsToLastColumn: false,
+      hideChildrenFromNavigation: false,
+    },
+    '/marine/resources': {
+      // menuItemColumns: [
+      //   'three wide column',
+      //   'three wide column',
+      //   'three wide column',
+      //   // 'three wide column',
+      //   // 'three wide column',
+      // ],
+      menuItemChildrenListColumns: [1, 1, 1],
+      appendExtraMenuItemsToLastColumn: false,
+      hideChildrenFromNavigation: false,
+    },
+  };
+
+  config.settings.slate.styleMenu = config.settings.slate.styleMenu || {};
+  config.settings.slate.styleMenu.inlineStyles = [
+    ...(config.settings.slate.styleMenu?.inlineStyles || []),
+    { cssClass: 'h1', label: 'H1 36px' },
+    { cssClass: 'h2', label: 'H2 30px' },
+    { cssClass: 'h3', label: 'H3 24px' },
+    { cssClass: 'h4', label: 'H4 18px' },
+    { cssClass: 'h5', label: 'H5 14px' },
+    { cssClass: 'p-text', label: 'Paragraph 18px' },
+    { cssClass: 'poppins-regular', label: 'Poppins Regular' },
+    { cssClass: 'poppins-light', label: 'Poppins Light' },
+    { cssClass: 'poppins-bold', label: 'Poppins Bold' },
+  ];
+
+  // EEA customizations
+  config.settings.eea.websiteTitle = 'Wise - Marine';
+  config.settings.eea = {
+    ...(config.settings.eea || {}),
+    headerOpts: {
+      ...(config.settings.eea?.headerOpts || {}),
+      logo: marineLogo,
+      logoWhite: marineLogoWhite,
+    },
+    headerSearchBox: [
+      {
+        isDefault: true,
+        path: '/marine/advanced-search',
+        placeholder: 'Search Marine...',
+        description:
+          'Looking for more information? Try searching the full EEA website content',
+        buttonTitle: 'Go to advanced search',
+        buttonUrl: 'https://www.eea.europa.eu/en/advanced-search',
+      },
+    ],
+    footerOpts: {
+      ...(config.settings.eea?.footerOpts || {}),
+      logosHeader: 'Managed by',
+      // description:
+      //   'WISE - Marine is a gateway to information on European marine issues in support of ecosystem based management and ocean governance',
+      managedBy: [
+        {
+          link: 'https://www.eea.europa.eu/',
+          src: eeaWhiteLogo,
+          alt: 'EEA Logo',
+          className: 'site logo',
+          columnSize: {
+            mobile: 6,
+            tablet: 12,
+            computer: 4,
+          },
+        },
+        {
+          link: 'https://commission.europa.eu/',
+          src: europeanComissionLogo,
+          alt: 'European Commission Logo',
+          className: 'ec logo',
+          columnSize: {
+            mobile: 6,
+            tablet: 12,
+            computer: 4,
+          },
+        },
+      ],
+      social: [],
+      actions: [
+        {
+          url: '/sitemap',
+          title: 'Sitemap',
+        },
+        {
+          url: '/#legal-notice',
+          title: 'Privacy statement',
+        },
+        {
+          url: '/marine/login',
+          title: 'Login',
+        },
+      ],
+
+      contacts: [
+        // {
+        //   icon: 'comment outline',
+        //   text: 'About',
+        //   link: '/marine/wise-marine',
+        //   children: [],
+        // },
+        // {
+        //   icon: 'comment outline',
+        //   text: 'Contact',
+        //   link: 'mailto:WISE@eea.europa.eu',
+        // },
+      ],
+    },
+    organisationName: 'Marine Water Information System for Europe',
+  };
+
+  // SPMeasure View widget
+  config.views.contentTypesViews.spmeasure = MeasureView;
+
+  //advancedlink is currently not working properly/not recognized in fise, so we add it to config manually
+  const { slate } = config.settings;
+
+  slate.toolbarButtons = [...(slate.toolbarButtons || []), LINK];
+  slate.expandedToolbarButtons = [
+    ...(slate.expandedToolbarButtons || []),
+    LINK,
+  ];
+
+  slate.htmlTagsToSlate.A = linkDeserializer;
+
+  const opts = {
+    title: 'Link',
+    pluginId: LINK,
+    elementType: LINK,
+    element: LinkElement,
+    isInlineElement: true,
+    editSchema: LinkEditSchema,
+    extensions: [withLink],
+    hasValue: (formData) => !!formData.link,
+    toolbarButtonIcon: linkSVG,
+    messages,
+  };
+
+  const [installLinkEditor] = makeInlineElementPlugin(opts);
+  config = installLinkEditor(config);
+
+  const final = [installMsfdDataExplorerBlock, installSearchEngine].reduce(
+    (acc, apply) => apply(acc),
+    config,
+  );
+
+  return final;
+};
+
+export default applyConfig;

package/src/reducers/breadcrumb/breadcrumb.js

@@ -0,0 +1,59 @@
+/**
+ * Breadcrumbs reducer.
+ * @module reducers/breadcrumbs/breadcrumbs
+ */
+
+import { map } from 'lodash';
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+import { GET_BREADCRUMBS } from '@plone/volto/constants/ActionTypes';
+
+const initialState = {
+  error: null,
+  items: [],
+  root: null,
+  loaded: false,
+  loading: false,
+};
+
+/**
+ * Breadcrumbs reducer.
+ * @function breadcrumbs
+ * @param {Object} state Current state.
+ * @param {Object} action Action to be handled.
+ * @returns {Object} New state.
+ */
+export default function breadcrumb(state = initialState, action = {}) {
+  switch (action.type) {
+    case `${GET_BREADCRUMBS}_PENDING`:
+      return {
+        ...state,
+        error: null,
+        loaded: false,
+        loading: true,
+      };
+    case `${GET_BREADCRUMBS}_SUCCESS`:
+      return {
+        ...state,
+        error: null,
+        items: map(action.result.items, (item) => ({
+          title: item.title,
+          url: flattenToAppURL(item['@id']),
+          review_state: item.review_state,
+        })),
+        root: flattenToAppURL(action.result.root),
+        loaded: true,
+        loading: false,
+      };
+    case `${GET_BREADCRUMBS}_FAIL`:
+      return {
+        ...state,
+        error: action.error,
+        items: [],
+        loaded: false,
+        loading: false,
+      };
+    default:
+      return state;
+  }
+}

package/src/reducers/index.js

@@ -0,0 +1,2 @@
+export breadcrumb from './breadcrumb/breadcrumb';
+export localnavigation from './localnavigation/localnavigation';

package/src/reducers/localnavigation/localnavigation.js

@@ -0,0 +1,69 @@
+/**
+ * Navigation reducer.
+ * @module reducers/navigation/navigation
+ */
+
+import { map } from 'lodash';
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+import { GET_NAVIGATION } from '@plone/volto/constants/ActionTypes';
+
+const initialState = {
+  error: null,
+  items: [],
+  loaded: false,
+  loading: false,
+};
+
+/**
+ * Recursive function that process the items returned by the navigation
+ * endpoint
+ * @function getRecursiveItems
+ * @param {array} items The items inside a navigation response.
+ * @returns {*} The navigation items object (recursive)
+ */
+function getRecursiveItems(items) {
+  return map(items, (item) => ({
+    title: item.title,
+    url: flattenToAppURL(item['@id']),
+    ...(item.items && { items: getRecursiveItems(item.items) }),
+    review_state: item.review_state,
+  }));
+}
+
+/**
+ * Navigation reducer.
+ * @function navigation
+ * @param {Object} state Current state.
+ * @param {Object} action Action to be handled.
+ * @returns {Object} New state.
+ */
+export default function localnavigation(state = initialState, action = {}) {
+  switch (action.type) {
+    case `${GET_NAVIGATION}_PENDING`:
+      return {
+        ...state,
+        error: null,
+        loaded: false,
+        loading: true,
+      };
+    case `${GET_NAVIGATION}_SUCCESS`:
+      return {
+        ...state,
+        error: null,
+        items: getRecursiveItems(action.result.items),
+        loaded: true,
+        loading: false,
+      };
+    case `${GET_NAVIGATION}_FAIL`:
+      return {
+        ...state,
+        error: action.error,
+        items: [],
+        loaded: false,
+        loading: false,
+      };
+    default:
+      return state;
+  }
+}

package/src/search/config.js

@@ -0,0 +1,93 @@
+import { mergeConfig } from '@eeacms/search';
+import facets from './facets';
+import views from './views';
+import { build_runtime_mappings } from '@eeacms/volto-globalsearch/utils';
+
+const getClientProxyAddress = () => {
+  const url = new URL(window.location);
+  url.pathname = '';
+  url.search = '';
+  return url.toString();
+};
+
+export const clusters = {
+  name: 'op_cluster',
+  field: 'objectProvides',
+  clusters: [
+    {
+      name: 'Maps and Charts',
+      values: ['Map (interactive)', 'Map (simple)', 'Chart (interactive)'],
+      defaultResultView: 'horizontalCard',
+    },
+    {
+      name: 'Dashboards',
+      values: ['Dashboard'],
+      defaultResultView: 'horizontalCard',
+    },
+    {
+      name: 'Web pages',
+      values: ['Webpage'],
+      defaultResultView: 'horizontalCard',
+    },
+    {
+      name: 'Country factsheet',
+      values: ['Country fact sheet'],
+      defaultResultView: 'horizontalCard',
+    },
+    {
+      name: 'Others',
+      values: [
+        'Glossary term',
+        'Case study',
+        'Measure',
+        'Shipping and Ports Measure',
+      ],
+      defaultResultView: 'horizontalCard',
+    },
+  ],
+};
+
+const marineMeasureSearchConfig = {
+  title: 'Marine measure search',
+  ...facets,
+  ...views,
+};
+
+export default function install(config) {
+  const envConfig = process.env.RAZZLE_ENV_CONFIG
+    ? JSON.parse(process.env.RAZZLE_ENV_CONFIG)
+    : marineMeasureSearchConfig;
+
+  const pjson = require('../../package.json');
+  envConfig.app_name = pjson.name;
+  envConfig.app_version = pjson.version;
+
+  config.searchui.marinemeasure = {
+    ...mergeConfig(envConfig, config.searchui.globalsearch),
+    elastic_index: '_es/marinemeasure',
+    index_name: 'wisetest_searchui',
+    host: process.env.RAZZLE_ES_PROXY_ADDR || 'http://localhost:3000',
+    runtime_mappings: build_runtime_mappings(clusters),
+  };
+
+  config.searchui.marinemeasure.facets = envConfig.facets;
+
+  config.searchui.marinemeasure.contentSectionsParams = {
+    enable: true,
+    sectionFacetsField: 'op_cluster',
+    sections: clusters.clusters,
+    clusterMapping: Object.assign(
+      {},
+      ...clusters.clusters.map(({ name, values }) =>
+        Object.assign({}, ...values.map((v) => ({ [v]: name }))),
+      ),
+    ),
+  };
+
+  if (typeof window !== 'undefined') {
+    config.searchui.marinemeasure.host =
+      process.env.RAZZLE_ES_PROXY_ADDR || getClientProxyAddress();
+  }
+
+  return config;
+}