@eeacms/volto-marine-policy 2.0.2 → 2.0.4

package/src/index.js

@@ -14,7 +14,6 @@ import installMsfdDataExplorerBlock from './components/Blocks/MsfdDataExplorerBl
 import { breadcrumb, localnavigation } from './reducers';
 import customBlockTemplates from '@eeacms/volto-marine-policy/components/Blocks/CustomBlockTemplates/customBlockTemplates';
 import TextAlignWidget from './components/Widgets/TextAlign';
-import installContextNavigation from './components/Blocks/ContextNavigation';
 import './slate-styles.less';
 
 import installSearchEngine from './search';
@@ -29,7 +28,7 @@ import { linkDeserializer } from '@plone/volto-slate/editor/plugins/AdvancedLink
 import LinkEditSchema from '@plone/volto-slate/editor/plugins/AdvancedLink/schema';
 import { getBlocks } from '@plone/volto/helpers';
 import { defineMessages } from 'react-intl'; // , defineMessages
-
+import installDemoSitesExplorer from './components/Blocks/DemoSitesExplorer';
 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';
@@ -110,6 +109,11 @@ const applyConfig = (config) => {
     localnavigation,
   };
 
+  if (__SERVER__) {
+    const installExpressMiddleware = require('./express-middleware').default;
+    config = installExpressMiddleware(config);
+  }
+
   config.widgets.widget.text_align = TextAlignWidget;
   // check if 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)
@@ -127,12 +131,12 @@ const applyConfig = (config) => {
   };
 
   // on home contextNavigation should return false
-  config.blocks.blocksConfig.contextNavigation = {
-    ...config.blocks.blocksConfig.contextNavigation,
-    blockHasValue: (data) => {
-      return data.pathname !== '/';
-    },
-  };
+  // config.blocks.blocksConfig.contextNavigation = {
+  //   ...config.blocks.blocksConfig.contextNavigation,
+  //   blockHasValue: (data) => {
+  //     return data.pathname !== '/';
+  //   },
+  // };
   config.blocks.blocksConfig.listing = {
     ...config.blocks.blocksConfig.listing,
     variations: [
@@ -269,9 +273,6 @@ const applyConfig = (config) => {
 
   config.settings.openExternalLinkInNewTab = true;
 
-  if (config.blocks.blocksConfig.contextNavigation)
-    config.blocks.blocksConfig.contextNavigation.restricted = false;
-
   config.settings.pluggableStyles = [
     ...(config.settings.pluggableStyles || []),
     {
@@ -519,7 +520,7 @@ const applyConfig = (config) => {
   const final = [
     installMsfdDataExplorerBlock,
     installSearchEngine,
-    installContextNavigation,
+    installDemoSitesExplorer,
   ].reduce((acc, apply) => apply(acc), config);
 
   return final;

package/theme/extras/print.less

@@ -0,0 +1,64 @@
+@media print {
+  a {
+    word-break: break-word;
+  }
+
+  .logo {
+    margin-left: 0 !important;
+  }
+
+  .block.call-to-action,
+  .block.context-navigation {
+    display: none;
+  }
+
+  .content-box-inner {
+    padding: 25px !important;
+
+    .column-blocks-wrapper {
+      margin-bottom: 0;
+    }
+  }
+
+  [class~='container'] > [class*='styled-'] {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .ui.section.divider {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .ui.grid > .row > [class*='twelve wide'].column,
+  .ui.grid > .column.row > [class*='twelve wide'].column,
+  .ui.grid > [class*='twelve wide'].column,
+  .ui.column.grid > [class*='twelve wide'].column {
+    padding: 0 25px !important;
+  }
+
+  .visualization,
+  .content-box-inner,
+  .embed-map,
+  .embed-tableau,
+  .embed-map-visualization,
+  .embed-visualization {
+    break-inside: avoid;
+  }
+}
+
+@media print and (min-width: 600px) {
+  .columns-view {
+    .ui.grid > .row > [class*='four wide computer'].column,
+    .ui.grid > .column.row > [class*='four wide computer'].column,
+    .ui.grid > [class*='four wide computer'].column,
+    .ui.column.grid > [class*='four wide computer'].column {
+      width: @fourWide !important;
+    }
+  }
+}
+
+@page {
+  margin-top: 15mm;
+  margin-bottom: 15mm;
+}

package/theme/globals/site.overrides

@@ -2,15 +2,16 @@
         Global Overrides
 *******************************/
 
+@import '../extras/print';
+
 .documentFirstHeading {
   border-bottom: none !important;
-  
+
   &::before {
     border-bottom: none !important;
   }
 }
 
-
 #page-document > blockquote {
   margin-right: revert !important;
   margin-left: revert !important;
@@ -200,7 +201,9 @@ body.view-viewview .full {
     }
   }
 
-  body.view-viewview.has-toolbar-collapsed:not(.has-sidebar):not(.has-sidebar-collapsed) {
+  body.view-viewview.has-toolbar-collapsed:not(.has-sidebar):not(
+      .has-sidebar-collapsed
+    ) {
     .full > div {
       width: calc(100% - @collapsedToolbarWidth) !important;
     }
@@ -233,7 +236,9 @@ body.view-viewview .full {
 
 @media screen and (max-width: @largestMobileScreen) {
   body.view-viewview.has-toolbar:not(.has-sidebar):not(.has-sidebar-collapsed),
-  body.view-viewview.has-toolbar-collapsed:not(.has-sidebar):not(.has-sidebar-collapsed) {
+  body.view-viewview.has-toolbar-collapsed:not(.has-sidebar):not(
+      .has-sidebar-collapsed
+    ) {
     .full > div {
       width: 100% !important;
     }
@@ -373,8 +378,8 @@ body.custom-page-header .breadcrumbs {
 }
 
 @media only screen and (max-height: @tabletBreakpoint) {
-#toolbar .toolbar-content.show {
+  #toolbar .toolbar-content.show {
     max-height: 700px !important;
     z-index: 5;
+  }
 }
-}

package/theme/globals/site.variables

@@ -1,6 +1,7 @@
 /*******************************
          Site Settings
 *******************************/
+
 @import '../extras/mixins';
 
 /*-------------------

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

@@ -1,85 +0,0 @@
-import React from 'react';
-import { Accordion as SemanticAccordion, Icon } from 'semantic-ui-react';
-import AccordionContent from './AccordionContent';
-import { useHistory } from 'react-router-dom';
-
-const Accordion = (props) => {
-  const { items = {}, curent_location, activeMenu, data = {} } = props;
-  const [currentIndex, setIndex] = React.useState(activeMenu ?? 0);
-  const [showChildren, setShowChildren] = React.useState(false);
-  const history = useHistory();
-
-  const handleClick = (e, item) => {
-    let itemUrl = '/' + item['@id'].split('/').slice(3).join('/');
-    history.push(itemUrl);
-  };
-
-  const handleIconClick = (e, index) => {
-    e.stopPropagation();
-    const newIndex = currentIndex === index ? -1 : index;
-    setIndex(newIndex);
-  };
-
-  return (
-    <>
-      <div className="context-navigation-header">{data?.title}</div>
-      {items.map((item, index) => {
-        const { id } = item;
-        const active = currentIndex === index;
-
-        return (
-          <SemanticAccordion id={id} key={index} className="secondary">
-            <SemanticAccordion.Title
-              role="button"
-              tabIndex={0}
-              active={activeMenu === index}
-              aria-expanded={activeMenu === index}
-              index={index}
-              onClick={(e) => {
-                handleClick(e, item);
-              }}
-              onKeyDown={(e) => {
-                if (e.keyCode === 13 || e.keyCode === 32) {
-                  e.preventDefault();
-                  handleClick(e, item);
-                }
-              }}
-            >
-              <span className="item-title">{item.title}</span>
-              {active && showChildren ? (
-                <Icon
-                  className="ri-arrow-up-s-line"
-                  onClick={(e) => {
-                    handleIconClick(e, index);
-                  }}
-                />
-              ) : showChildren ? (
-                <Icon
-                  className="ri-arrow-down-s-line"
-                  onClick={(e) => {
-                    handleIconClick(e, index);
-                  }}
-                />
-              ) : null}
-            </SemanticAccordion.Title>
-            <SemanticAccordion.Content active={active && showChildren}>
-              <AccordionContent
-                curent_location={curent_location}
-                key={index}
-                main={{
-                  title: item.title,
-                  href: item['@id'],
-                  url: item.url,
-                }}
-                data={data}
-                setShowChildren={setShowChildren}
-              />
-            </SemanticAccordion.Content>
-          </SemanticAccordion>
-        );
-      })}
-    </>
-  );
-};
-
-export default Accordion;

package/src/components/Blocks/ContextNavigation/Accordion.test.jsx

@@ -1,106 +0,0 @@
-import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
-import configureStore from 'redux-mock-store';
-import { render, fireEvent, waitFor, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import { Provider } from 'react-intl-redux';
-import Accordion from './Accordion';
-
-const mockStore = configureStore();
-
-describe('RASTAccordion', () => {
-  let store;
-  let data;
-
-  beforeEach(() => {
-    store = mockStore({
-      userSession: { token: '1234' },
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-      content: {
-        subrequests: {},
-      },
-    });
-
-    data = {
-      items: [
-        {
-          id: 'item1',
-          title: 'Item 1',
-          '@id': '/item1',
-          '@type': 'Folder',
-          href: '/item1-href',
-        },
-        {
-          id: 'item2',
-          title: 'Item 2',
-          '@id': '/item2',
-          '@type': 'Folder',
-          href: '/item2-href',
-        },
-      ],
-      activeMenu: 1,
-      curent_location: '/item1-href',
-      data: { title: "Accordion's Title" },
-    };
-  });
-
-  it('renders the component with initial data', () => {
-    const { getByText } = render(
-      <Provider store={store}>
-        <MemoryRouter>
-          <Accordion {...data} />
-        </MemoryRouter>
-      </Provider>,
-    );
-
-    expect(getByText('Item 1')).toBeInTheDocument();
-    expect(getByText('Item 2')).toBeInTheDocument();
-  });
-
-  it('navigates to correct path on item click', () => {
-    const { getByText, history } = render(
-      <Provider store={store}>
-        <MemoryRouter>
-          <Accordion {...data} />
-        </MemoryRouter>
-      </Provider>,
-    );
-
-    fireEvent.click(getByText('Item 1'));
-    waitFor(() => expect(history.location.pathname).toBe('/item1'));
-  });
-
-  it('clicks on accordion items', () => {
-    const { container } = render(
-      <Provider store={store}>
-        <MemoryRouter>
-          <Accordion {...data} />
-        </MemoryRouter>
-      </Provider>,
-    );
-
-    screen.debug();
-
-    // check that item1 is expanded by default
-    expect(container.querySelector('#item2 .active.title')).toBeInTheDocument();
-
-    const item1 = container.querySelector('#item1');
-    fireEvent.click(item1);
-  });
-
-  it('responds to keyboard events', () => {
-    const { getByText } = render(
-      <Provider store={store}>
-        <MemoryRouter>
-          <Accordion {...data} />
-        </MemoryRouter>
-      </Provider>,
-    );
-
-    fireEvent.keyDown(getByText('Item 1'), { keyCode: 13 }); // Enter key
-    waitFor(() => expect(getByText('Content of Item 1')).toBeVisible());
-  });
-});

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

@@ -1,66 +0,0 @@
-import React from 'react';
-import { List } from 'semantic-ui-react';
-import { Link } from 'react-router-dom';
-import { compose } from 'redux';
-import { flattenToAppURL, getBaseUrl } from '@plone/volto/helpers';
-import { useChildren } from './View';
-
-const AccordionContent = (props) => {
-  const {
-    main,
-    curent_location,
-    data: { types = [] },
-    setShowChildren,
-  } = props;
-  const location = main.url;
-
-  // React.useEffect(() => {
-  //   const action = getContent(location, null, location);
-  //   dispatch(action);
-  // }, [location, dispatch]);
-
-  // items = useSelector(
-  //   (state) => state.content?.subrequests?.[location]?.data?.items || [],
-  // );
-  const items = useChildren(location);
-
-  React.useEffect(() => {
-    const filteredItems = items.filter((item) =>
-      types.length ? types.includes(item['@type']) : item,
-    );
-    if (filteredItems.length) setShowChildren(true);
-  }, [items, setShowChildren, types]);
-
-  return (
-    <div className="dataset-content">
-      <div>
-        {items.length
-          ? items
-              .filter((item) =>
-                types.length ? types.includes(item['@type']) : item,
-              )
-              .map((item) => (
-                <List.Item
-                  key={item.id}
-                  className={`${
-                    item['@id'].endsWith(curent_location.pathname)
-                      ? 'active'
-                      : ''
-                  }`}
-                >
-                  <List.Content>
-                    <div className="dataset-item">
-                      <Link to={flattenToAppURL(getBaseUrl(item['@id']))}>
-                        {item.title}
-                      </Link>
-                    </div>
-                  </List.Content>
-                </List.Item>
-              ))
-          : null}
-      </div>
-    </div>
-  );
-};
-
-export default compose()(AccordionContent);

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

@@ -1,41 +0,0 @@
-import React from 'react';
-import { compose } from 'redux';
-
-import Accordion from './Accordion';
-import { useLocation } from 'react-router-dom';
-
-/**
- * A navigation slot implementation, similar to the classic Plone navigation
- * portlet. It uses the same API, so the options are similar to
- * INavigationPortlet
- */
-export function ContextNavigationComponent(props) {
-  const { items, data } = props;
-  let activeMenu = null;
-
-  const curent_location = useLocation();
-  for (let i = 0; i < items.length; i++) {
-    let itemUrl = '/' + items[i]['@id'].split('/').slice(3).join('/');
-    items[i].is_active = false;
-    if (curent_location.pathname.includes(itemUrl)) {
-      activeMenu = i;
-      items[i].is_active = true;
-    }
-  }
-
-  return (
-    <>
-      {items.length ? (
-        <Accordion
-          items={items}
-          curent_location={curent_location}
-          activeMenu={activeMenu}
-          data={data}
-        />
-      ) : null}
-    </>
-  );
-}
-
-// withContentNavigation
-export default compose()(ContextNavigationComponent);

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

@@ -1,41 +0,0 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import { SidebarPortal } from '@plone/volto/components';
-import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
-
-import View from './View';
-import schema from './schema';
-
-export default function Edit(props) {
-  const {
-    block,
-    data = {},
-    onChangeBlock,
-    selected,
-    id,
-    formData = {},
-  } = props;
-  const contentTypes = useSelector((state) => state?.types.types);
-  const blockSchema = schema({ formData, data, contentTypes });
-
-  return (
-    <div>
-      <View data={data} id={id} mode="edit" />
-      <SidebarPortal selected={selected}>
-        <BlockDataForm
-          block={block}
-          title={blockSchema.title}
-          schema={blockSchema}
-          onChangeField={(id, value) => {
-            onChangeBlock(block, {
-              ...data,
-              [id]: value,
-            });
-          }}
-          onChangeBlock={onChangeBlock}
-          formData={data}
-        />
-      </SidebarPortal>
-    </div>
-  );
-}

package/src/components/Blocks/ContextNavigation/Edit.test.jsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Provider } from 'react-intl-redux';
-import configureStore from 'redux-mock-store';
-import ContextNavigationEdit from './Edit';
-import { Router } from 'react-router-dom';
-import { createMemoryHistory } from 'history';
-import '@testing-library/jest-dom/extend-expect';
-
-const mockStore = configureStore();
-
-jest.mock('@plone/volto/components', () => ({
-  SidebarPortal: ({ children }) => (
-    <div>
-      <div>SidebarPortal</div>
-      {children}
-    </div>
-  ),
-}));
-
-jest.mock('@plone/volto/components/manage/Form/BlockDataForm', () => {
-  return {
-    __esModule: true,
-    default: ({ params }) => {
-      return <div>BlockDataForm {params}</div>;
-    },
-  };
-});
-
-const store = mockStore({
-  userSession: { token: '1234' },
-  intl: {
-    locale: 'en',
-    messages: {},
-  },
-  content: {
-    subrequests: {},
-  },
-  types: {
-    types: [],
-  },
-});
-
-describe('ContextNavigationEdit', () => {
-  it('renders corectly', () => {
-    const history = createMemoryHistory();
-    const { getByText } = render(
-      <Provider store={store}>
-        <Router history={history}>
-          <ContextNavigationEdit />
-        </Router>
-      </Provider>,
-    );
-
-    expect(getByText('SidebarPortal')).toBeInTheDocument();
-  });
-
-  it('renders corectly', () => {
-    const history = createMemoryHistory();
-    const { getByText } = render(
-      <Provider store={store}>
-        <Router history={history}>
-          <ContextNavigationEdit selected={true} onChangeBlock={() => {}} />
-        </Router>
-      </Provider>,
-    );
-
-    // expect(getByText('InlineForm')).toBeInTheDocument();
-    expect(getByText('SidebarPortal')).toBeInTheDocument();
-  });
-});

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

@@ -1,42 +0,0 @@
-import React from 'react';
-import './styles.less';
-import ContextNavigation from './ContextNavigation';
-import { useDispatch, useSelector } from 'react-redux';
-import { getContent } from '@plone/volto/actions';
-
-export function useChildren(location) {
-  const dispatch = useDispatch();
-  React.useEffect(() => {
-    const action = getContent(location, null, location);
-    dispatch(action);
-  }, [location, dispatch]);
-
-  const items = useSelector(
-    (state) => state.content.subrequests?.[location]?.data?.items || [],
-  );
-  return items;
-}
-
-export default function View(props) {
-  const { data } = props;
-  let root_path = data?.root_path;
-  if (typeof root_path === 'undefined') {
-    root_path = '/';
-  }
-  let items = useChildren(root_path);
-  if (root_path === '/') {
-    items = [];
-  }
-
-  return (
-    <div className="block rast-block">
-      <ContextNavigation
-        items={items}
-        location={{
-          pathname: root_path,
-        }}
-        data={data}
-      />
-    </div>
-  );
-}