@eeacms/volto-bise-policy 1.0.7 → 1.0.8

package/CHANGELOG.md

@@ -4,6 +4,19 @@ 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).
 
+### [1.0.8](https://github.com/eea/volto-bise-policy/compare/1.0.7...1.0.8) - 29 May 2023
+
+#### :hammer_and_wrench: Others
+
+- update [Miu Razvan - [`baf4a08`](https://github.com/eea/volto-bise-policy/commit/baf4a082ddb5841cf3380cc30ff94b77ed9e168f)]
+- update [Miu Razvan - [`c75abcb`](https://github.com/eea/volto-bise-policy/commit/c75abcb25b1f0984567ec6e9afc0d61820edb32d)]
+- clean up [Miu Razvan - [`0fcd494`](https://github.com/eea/volto-bise-policy/commit/0fcd494a87c2c3cdf519e16ffa6c43403dbe8315)]
+- fix z-index on navigation menu [Miu Razvan - [`5fbd3fd`](https://github.com/eea/volto-bise-policy/commit/5fbd3fdb2c0705ec15d7968651900f9f7bba9f6f)]
+- update for url widget [tedw87 - [`78df6cb`](https://github.com/eea/volto-bise-policy/commit/78df6cb7f944ce718c0bf89b97a462ccc1d1dcb7)]
+- fix import [tedw87 - [`7bb66ba`](https://github.com/eea/volto-bise-policy/commit/7bb66badc31b872532e3a528af2cd496b4455344)]
+- update [tedw87 - [`3d502b1`](https://github.com/eea/volto-bise-policy/commit/3d502b1054d03e1bf5114eaa08c7c064c52474d0)]
+- fix prettier [tedw87 - [`2632d29`](https://github.com/eea/volto-bise-policy/commit/2632d294b4859da014635c72ffcc231fc4b09287)]
+- update with getFieldUrl function [tedw87 - [`bea0cf1`](https://github.com/eea/volto-bise-policy/commit/bea0cf1572496ef159d5b12c59b1c20cb9948ee7)]
 ### [1.0.7](https://github.com/eea/volto-bise-policy/compare/1.0.6...1.0.7) - 23 May 2023
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/manage/Blocks/Navigation/View.jsx

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import { Menu } from 'semantic-ui-react';
 import { UniversalLink } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import { getFieldURL } from '@eeacms/volto-bise-policy/helpers';
 
 import './styles.less';
 
@@ -13,9 +14,9 @@ const View = ({ history, data, navigation, ...props }) => {
   const items = useMemo(() => {
     return [
       ...(navigation.filter(
-        (item) => flattenToAppURL(item.url) === flattenToAppURL(data.parent),
+        (item) => flattenToAppURL(item.url) === getFieldURL(data.parent),
       )[0]?.items || []),
-      ...pages,
+      ...pages.map((page) => ({ ...page, url: getFieldURL(page.url) })),
     ];
   }, [navigation, pages, data.parent]);
 

package/src/components/manage/Blocks/Redirect/Edit.jsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
 import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import { getFieldURL } from '@eeacms/volto-bise-policy/helpers';
 import schema from './schema';
 
 const Edit = (props) => {
   return (
     <>
-      {props.data.url && <p>Redirect to {props.data.url}</p>}
+      {props.data.url && <p>Redirect to {getFieldURL(props.data.url)}</p>}
       {!props.data.url && <p>Select redirect target</p>}
 
       <SidebarPortal selected={props.selected}>

package/src/components/manage/Blocks/Redirect/View.jsx

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import { getFieldURL } from '@eeacms/volto-bise-policy/helpers';
 
 const View = (props) => {
   useEffect(() => {
-    props.history.push(flattenToAppURL(props.data.url));
+    props.history.push(getFieldURL(props.data.url));
     /* eslint-disable-next-line */
   }, []);
 

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

@@ -4,7 +4,6 @@ import installFactsheetsListing from './FactsheetsListing';
 import installKeyFacts from './KeyFacts';
 import installMaesViewer from './MaesViewer';
 import installNavigation from './Navigation';
-import installNewsletter from './NewsletterSignup';
 
 export default (config) => {
   return [
@@ -14,6 +13,5 @@ export default (config) => {
     installKeyFacts,
     installMaesViewer,
     installNavigation,
-    installNewsletter,
   ].reduce((acc, apply) => apply(acc), config);
 };

package/src/customizations/volto/components/theme/Header/Header.jsx

@@ -4,11 +4,12 @@
  */
 
 import React, { useCallback, useMemo, useState } from 'react';
-import { Dropdown, Image, Sticky } from 'semantic-ui-react';
+import { Container, Dropdown, Grid, Image, Sticky } from 'semantic-ui-react';
 import { connect, useDispatch, useSelector } from 'react-redux';
 import Cookies from 'universal-cookie';
 
-import { withRouter } from 'react-router-dom';
+import { matchPath } from 'react-router';
+import { withRouter, useParams } from 'react-router-dom';
 import { UniversalLink } from '@plone/volto/components';
 import {
   getBaseUrl,
@@ -51,6 +52,7 @@ const EEAHeader = ({ token, history, subsite, content, ...props }) => {
   const dispatch = useDispatch();
   const [language, setLanguage] = useState(getLanguage());
   const previousToken = usePrevious(token);
+  const params = useParams();
   const { items } = props;
   const { eea } = config.settings;
   const { headerOpts, headerSearchBox } = eea || {};
@@ -58,10 +60,7 @@ const EEAHeader = ({ token, history, subsite, content, ...props }) => {
 
   const width = useSelector((state) => state.screen?.width);
 
-  const router_pathname = useSelector(
-    (state) => removeTrailingSlash(state.router?.location?.pathname) || '',
-  );
-  let pathname = router_pathname;
+  const pathname = removeTrailingSlash(props.pathname);
 
   const content_pathname = useMemo(
     () => flattenToAppURL(content.data?.['@id']),
@@ -70,9 +69,26 @@ const EEAHeader = ({ token, history, subsite, content, ...props }) => {
 
   const isSubsite = subsite?.['@type'] === 'Subsite';
 
-  if (content.get.loading && content_pathname !== router_pathname) {
-    pathname = content_pathname;
-  }
+  const isN2KSite = useMemo(() => {
+    return !!matchPath(pathname, {
+      path: ['/natura2000/sites/site', '/natura2000/sites/site_cdda'],
+      exact: false,
+    });
+  }, [pathname]);
+
+  const isN2KSpecies = useMemo(() => {
+    return !!matchPath(pathname, {
+      path: '/natura2000/species/species',
+      exact: false,
+    });
+  }, [pathname]);
+
+  const isN2KHabitat = useMemo(() => {
+    return !!matchPath(pathname, {
+      path: '/natura2000/habitats/habitat',
+      exact: false,
+    });
+  }, [pathname]);
 
   const isHomePageInverse =
     content_pathname === '' && ['', '/'].includes(pathname);
@@ -124,6 +140,10 @@ const EEAHeader = ({ token, history, subsite, content, ...props }) => {
   return (
     <Header menuItems={items}>
       {isHomePageInverse && <BodyClass className="homepage homepage-inverse" />}
+      {isSubsite && !subsite.isRoot && !isN2KSpecies && !isN2KHabitat && (
+        <BodyClass className="with-n2k-navigation" />
+      )}
+
       <Header.TopHeader>
         <Header.TopItem className="official-union">
           <Image src={eeaFlag} alt="eea flag"></Image>
@@ -194,7 +214,7 @@ const EEAHeader = ({ token, history, subsite, content, ...props }) => {
           </Header.TopItem>
         )}
 
-        {isMultilingual && (
+        {isMultilingual && !isN2KSite && !isN2KSpecies && !isN2KHabitat && (
           <Header.TopItem>
             <Header.TopDropdownMenu
               id="language-switcher"
@@ -235,7 +255,7 @@ const EEAHeader = ({ token, history, subsite, content, ...props }) => {
                             'g',
                           );
                           const matches = [
-                            ...router_pathname.matchAll(multilingualSubsiteRe),
+                            ...pathname.matchAll(multilingualSubsiteRe),
                           ][0];
                           if (matches && matches[2] !== `/${item.code}/`) {
                             changeLanguage(item.code);
@@ -260,52 +280,87 @@ const EEAHeader = ({ token, history, subsite, content, ...props }) => {
         active={isSubsite && subsite['@id'] === '/natura2000'}
         context={__CLIENT__ && document.querySelector('.content-area')}
       >
-        <Header.Main
-          pathname={router_pathname}
-          headerSearchBox={headerSearchBox}
-          inverted={isHomePageInverse ? true : false}
-          transparency={isHomePageInverse ? true : false}
-          hideSearch={isSubsite}
-          logo={
-            <Logo
-              src={isHomePageInverse ? logoWhite : logo}
-              title={eea.websiteTitle}
-              alt={eea.organisationName}
-              url={eea.logoTargetUrl}
-            />
-          }
-          menuItems={
-            isSubsite && !subsite.isRoot
-              ? getSubsiteItems()
-              : items.filter((item) => item.url !== '/natura2000')
-          }
-          renderGlobalMenuItem={(item, { onClick }) => (
-            <a
-              href={item.url || '/'}
-              title={item.title}
-              onClick={(e) => {
-                e.preventDefault();
-                onClick(e, item);
-              }}
-            >
-              {item.title}
-            </a>
-          )}
-          renderMenuItem={(item, options, props) => (
-            <UniversalLink
-              href={item.url || '/'}
-              title={item.nav_title || item.title}
-              {...(options || {})}
-              className={cx(options?.className, {
-                active: item.url === router_pathname,
-              })}
-            >
-              {props?.iconPosition !== 'right' && props?.children}
-              <span>{item.nav_title || item.title}</span>
-              {props?.iconPosition === 'right' && props?.children}
-            </UniversalLink>
-          )}
-        />
+        {!isN2KSite ? (
+          <Header.Main
+            pathname={pathname}
+            headerSearchBox={headerSearchBox}
+            inverted={isHomePageInverse ? true : false}
+            transparency={isHomePageInverse ? true : false}
+            hideSearch={isSubsite}
+            logo={
+              <Logo
+                src={isHomePageInverse ? logoWhite : logo}
+                title={eea.websiteTitle}
+                alt={eea.organisationName}
+                url={eea.logoTargetUrl}
+              />
+            }
+            menuItems={
+              isSubsite && !subsite.isRoot && !isN2KSpecies && !isN2KHabitat
+                ? getSubsiteItems()
+                : items.filter((item) => item.url !== '/natura2000')
+            }
+            renderGlobalMenuItem={(item, { onClick }) => (
+              <a
+                href={item.url || '/'}
+                title={item.title}
+                onClick={(e) => {
+                  e.preventDefault();
+                  onClick(e, item);
+                }}
+              >
+                {item.title}
+              </a>
+            )}
+            renderMenuItem={(item, options, props) => (
+              <UniversalLink
+                href={item.url || '/'}
+                title={item.nav_title || item.title}
+                {...(options || {})}
+                className={cx(options?.className, {
+                  active: item.url === pathname,
+                })}
+              >
+                {props?.iconPosition !== 'right' && props?.children}
+                <span>{item.nav_title || item.title}</span>
+                {props?.iconPosition === 'right' && props?.children}
+              </UniversalLink>
+            )}
+          />
+        ) : (
+          <div className="main bar transparency n2k-site">
+            <Container>
+              <Grid>
+                <Grid.Column>
+                  <button
+                    title="At a glance"
+                    className="item firstLevel at-glance"
+                    onClick={() => {
+                      window.scrollTo({
+                        top: document.body.scrollHeight,
+                        behavior: 'smooth',
+                      });
+                    }}
+                  >
+                    AT A GLANCE
+                  </button>
+                  <UniversalLink
+                    href={
+                      params.site_code
+                        ? `https://natura2000.eea.europa.eu/Natura2000/SDF.aspx?site=${params.site_code}`
+                        : '#'
+                    }
+                    openLinkInNewTab={true}
+                    title="Go to expert view"
+                    className="item firstLevel deep-dive"
+                  >
+                    GO TO EXPERT VIEW
+                  </UniversalLink>
+                </Grid.Column>
+              </Grid>
+            </Container>
+          </div>
+        )}
       </Sticky>
     </Header>
   );

package/src/helpers.js

@@ -0,0 +1,19 @@
+import isArray from 'lodash/isArray';
+import isObject from 'lodash/isObject';
+import isString from 'lodash/isString';
+import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
+
+export const getFieldURL = (data) => {
+  let url = data;
+  const _isObject = data && isObject(data) && !isArray(data);
+  if (_isObject && data['@type'] === 'URL') {
+    url = data['value'] ?? data['url'] ?? data['href'] ?? data;
+  } else if (_isObject) {
+    url = data['@id'] ?? data['url'] ?? data['href'] ?? data;
+  }
+  if (isArray(data)) {
+    url = data.map((item) => getFieldURL(item));
+  }
+  if (isString(url) && isInternalURL(url)) return flattenToAppURL(url);
+  return url;
+};

package/src/index.js

@@ -123,11 +123,19 @@ const applyConfig = (config) => {
   // Plotly bise color
   config.settings.plotlyCustomColors = [
     {
-      title: 'Biodiversity Default',
-      colorscale: ['#094238', '#12957D', '#19C4A5'],
+      title: 'A2',
+      colorscale: [
+        '#3D2201',
+        '#603808',
+        '#8B5E34',
+        '#BC8A5F',
+        '#E7BC91',
+        '#FFEDD8',
+        '#FFF6EC',
+      ],
     },
     {
-      title: '',
+      title: 'A1',
       colorscale: ['#12957D', '#F9EA8A', '#DD552B', '#AEB0B3'],
     },
   ];

package/theme/extras/header.overrides

@@ -26,10 +26,6 @@
   text-decoration: none;
 }
 
-.eea.header {
-  z-index: 4;
-}
-
 .eea.header .main.bar > .ui.container .ui.grid .column {
   display: flex;
   align-items: center;

package/theme/globals/natura2000.less

@@ -50,4 +50,95 @@
       }
     }
   }
+}
+
+.eea.header .main.bar.n2k-site {
+  .ui.grid {
+    height: 100%;
+
+    .column {
+      justify-content: center;
+
+      > * {
+        flex: unset !important;
+
+        &:not(:last-child) {
+          margin-right: 1rem;
+        }
+      }
+    }
+  }
+}
+
+.at-glance {
+  height: 100%;
+  padding: 0 2rem;
+  background: #00a390 0% 0% no-repeat padding-box;
+  border: none;
+  color: #fff !important;
+  cursor: pointer;
+
+  &:hover {
+    color: #fff !important;
+  }
+}
+
+.deep-dive {
+  font-weight: bold;
+}
+
+.with-n2k-navigation {
+  .eea.header {
+    .main.bar .ui.grid {
+      > :first-child {
+        width: 200px !important;
+
+        img {
+          object-fit: fill;
+        }
+      }
+
+      > :last-child {
+        width: calc(100% - 200px) !important;
+      }
+
+      @media @smallMonitorUp {
+        .main-menu {
+          justify-content: center;
+  
+          ul {
+            padding-inline-start: 0;
+            justify-content: center !important;
+          }
+        }
+      }
+
+    }
+  }
+}
+
+
+.tabs-block {
+  .columns-header {
+    display: none;
+  }
+}
+
+.tabs-block.carousel_n2k {
+  overflow: hidden;
+
+  .slick-arrows {
+    .learn-more {
+      position: absolute;
+      left: 0;
+      width: 130px;
+      color: #fff !important;
+      text-align: left;
+      transform: translate(-100%, 0);
+
+      @media only screen and (max-width: 1700px) {
+        display: none;
+      }
+    }
+  }
 }

package/theme/globals/site.overrides

@@ -255,9 +255,9 @@ p.has--clear--both:empty {
     }
   }
 
-  .ui.overlay.sidebar {
-    z-index: 800;
-  }
+  // .ui.overlay.sidebar {
+  //   z-index: 800;
+  // }
 }
 
 .subsite.subsite-natura2000:not(.subsite-root) {
@@ -266,9 +266,9 @@ p.has--clear--both:empty {
   }
 }
 
-#toolbar {
-  z-index: 6;
-}
+// #toolbar {
+//   z-index: 6;
+// }
 
 .simple-data-table {
   padding: 0;

package/theme/modules/sticky.overrides

@@ -0,0 +1,7 @@
+.eea.header .ui.sticky {
+  z-index: @zIndex;
+}
+
+.sticky-navigation-anchors.full-width {
+  z-index: @zIndex;
+}

package/src/components/manage/Blocks/NewsletterSignup/Edit.jsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { BlockDataForm, SidebarPortal } from '@plone/volto/components';
-import View from './View';
-
-import schema from './schema';
-
-const Edit = (props) => {
-  return (
-    <>
-      <View {...props} mode="edit" />
-      <SidebarPortal selected={props.selected}>
-        <BlockDataForm
-          schema={schema}
-          title={schema.title}
-          onChangeField={(id, value) => {
-            props.onChangeBlock(props.block, {
-              ...props.data,
-              [id]: value,
-            });
-          }}
-          onChangeBlock={props.onChangeBlock}
-          formData={props.data}
-          block={props.block}
-        />
-      </SidebarPortal>
-    </>
-  );
-};
-
-export default Edit;

package/src/components/manage/Blocks/NewsletterSignup/View.jsx

@@ -1,13 +0,0 @@
-import { withBlockExtensions } from '@plone/volto/helpers';
-
-const View = (props) => {
-  const Renderer = props.variation.render;
-
-  return (
-    <>
-      <Renderer {...props} />
-    </>
-  );
-};
-
-export default withBlockExtensions(View);

package/src/components/manage/Blocks/NewsletterSignup/index.js

@@ -1,49 +0,0 @@
-import imageSVG from '@plone/volto/icons/image.svg';
-import NavigationBlockView from './View';
-import NavigationBlockEdit from './Edit';
-
-export default (config) => {
-  config.blocks.blocksConfig.newsletterSignup = {
-    id: 'newsletterSignup',
-    title: 'Newsletter signup',
-    icon: imageSVG,
-    group: 'common',
-    view: NavigationBlockView,
-    edit: NavigationBlockEdit,
-    restricted: false,
-    mostUsed: false,
-    variations: [
-      {
-        id: 'default',
-        title: 'Default',
-        isDefault: true,
-        render: (props) => {
-          const { hasImage, imgSrc } = props.data;
-
-          return (
-            <>
-              View mode
-              {hasImage && imgSrc && (
-                <img src={`${props.data.imgSrc}/@@images/image`} alt="asda" />
-              )}
-            </>
-          );
-        },
-      },
-      {
-        id: 'enisa_newsletter',
-        title: 'Enisa newsletter',
-        render: () => 'is enisa newsletter',
-        schemaEnhancer: ({ schema, formData, intl }) => {
-          return schema;
-        },
-      },
-    ],
-    sidebarTab: 1,
-    security: {
-      addPermission: [],
-      view: [],
-    },
-  };
-  return config;
-};

package/src/components/manage/Blocks/NewsletterSignup/schema.js

@@ -1,25 +0,0 @@
-export default {
-  title: 'Newsletter signup',
-
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Default',
-      fields: ['hasImage', 'imgSrc'],
-    },
-  ],
-
-  properties: {
-    hasImage: {
-      title: 'Has image',
-      type: 'boolean',
-      default: true,
-    },
-    imgSrc: {
-      title: 'Image',
-      widget: 'attachedimage',
-    },
-  },
-
-  required: [],
-};