Merge pull request #19 from eea/develop

Release

CHANGELOG.md

@@ -4,11 +4,38 @@ 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.1.15](https://github.com/eea/volto-cca-policy/compare/0.1.14...0.1.15) - 27 March 2023
+### [0.1.16](https://github.com/eea/volto-cca-policy/compare/0.1.15...0.1.16) - 29 March 2023
 
 #### :hammer_and_wrench: Others
 
-- Retry build [Ghiță Bizău - [`d878ed0`](https://github.com/eea/volto-cca-policy/commit/d878ed0c91c7441f0f65a1caf6336de5272c9907)]
+- Add whitelist for volto-nextcloud-video-block. [GhitaB - [`bb4e972`](https://github.com/eea/volto-cca-policy/commit/bb4e972fa4cdabc28f85bd902defce3906234a51)]
+- Add whitelist for volto-nextcloud-video-block. [GhitaB - [`577f659`](https://github.com/eea/volto-cca-policy/commit/577f65936809f6fcb9fa6a6bacc14f7b335f9707)]
+- Use UniversalLink for footer links [kreafox - [`efd34a4`](https://github.com/eea/volto-cca-policy/commit/efd34a4451b205ff5f3da022c781f425bd2f9572)]
+- Make it footer contact link to work with mailto [kreafox - [`e8938dc`](https://github.com/eea/volto-cca-policy/commit/e8938dc94aa5d47998ecf505084c3ae170ed59c3)]
+- Remove context navigation for RAST [kreafox - [`f85c972`](https://github.com/eea/volto-cca-policy/commit/f85c97259af58ff10b49b882eaec089cb8464f65)]
+- Make footer description bold [kreafox - [`2e4184e`](https://github.com/eea/volto-cca-policy/commit/2e4184e3f8d811cdc6cd7d7732d6f8115463183f)]
+- Add header override for search [kreafox - [`280489e`](https://github.com/eea/volto-cca-policy/commit/280489e6075ea31a2db4a595f681c68c0fa82b7d)]
+- Set number of columns for grid block [kreafox - [`b0ef1d0`](https://github.com/eea/volto-cca-policy/commit/b0ef1d0f19e293f0a9805f913b4040c8fddb1a9c)]
+- Refs #160116 - C3SIndicatorView: add disclaimer info. [GhitaB - [`765ed01`](https://github.com/eea/volto-cca-policy/commit/765ed013d38b56091c5e384ea1facaf31e3aa531)]
+- Undo initialBlocks [kreafox - [`2c17118`](https://github.com/eea/volto-cca-policy/commit/2c17118e07e784bb57ce2564f1108d8183ec5b78)]
+- CSS fix [kreafox - [`f77f74e`](https://github.com/eea/volto-cca-policy/commit/f77f74e01ba2458311411537e1477636bffc140f)]
+- Add headerSearchBox to Header [kreafox - [`b873129`](https://github.com/eea/volto-cca-policy/commit/b873129483f32ff9ab8d1ae0f2406be75e3f7afd)]
+- Add organisationName and websiteTitle to config [kreafox - [`ff41a58`](https://github.com/eea/volto-cca-policy/commit/ff41a588b4a8b0a8ff0d1f67310becbd7cbb6c1c)]
+- Set initialBlocks [kreafox - [`d1741f6`](https://github.com/eea/volto-cca-policy/commit/d1741f6a0c3e68c6172a19c51c53c221b351bb5d)]
+- Refs #160116 - C3SIndicatorView: iframe no border. [GhitaB - [`055d287`](https://github.com/eea/volto-cca-policy/commit/055d2872b0e33def79a6d5446d229b9febad813e)]
+- Refs #160116 - C3SIndicatorView: right buttons (.btn-right). [GhitaB - [`dcf7359`](https://github.com/eea/volto-cca-policy/commit/dcf73596a53e5e0621bd2a3809598afd6233718f)]
+- Refs #160116 - C3SIndicatorView: custom align for titles vs buttons. [GhitaB - [`02bdbca`](https://github.com/eea/volto-cca-policy/commit/02bdbcab131c3fa5b359d4de3749c70e26dd8285)]
+- Refs #160116 - C3SIndicatorView: update url params when showDetails changes. [GhitaB - [`c7ad9d1`](https://github.com/eea/volto-cca-policy/commit/c7ad9d140f265aff75c5963d126ef4eff92b57f7)]
+- Refs #160116 - C3SIndicatorView: add title for details/overview. [GhitaB - [`53fd12d`](https://github.com/eea/volto-cca-policy/commit/53fd12d42a77c9792bd677fb2d53dcd74d9c87a6)]
+- Refs #160116 - C3SIndicatorView: set Details mode if #details in url. [GhitaB - [`017b9cd`](https://github.com/eea/volto-cca-policy/commit/017b9cd433aedbf0166c259126be8d4ae59b835a)]
+- Refs #160116 - C3SIndicatorView: toggle Details vs Overview mode. [GhitaB - [`1c3f7af`](https://github.com/eea/volto-cca-policy/commit/1c3f7afd7f45e61c849e053337af69448b51363a)]
+- Refs #160116 - C3SIndicatorView: add overview iframe. [GhitaB - [`4ed4ed6`](https://github.com/eea/volto-cca-policy/commit/4ed4ed66bc8bf71a019c89070361f257fa81afc2)]
+- Refs #160116 - C3SIndicatorView: details iframe - use real data. [GhitaB - [`8fa2a7d`](https://github.com/eea/volto-cca-policy/commit/8fa2a7d3b6fa991959136e457299c16ad7d64a14)]
+- Refs #160116 - C3SIndicatorView: clean code. [GhitaB - [`a5b165e`](https://github.com/eea/volto-cca-policy/commit/a5b165e8386f519dbba23c18a555d8a7bcc6cd5d)]
+- WIP [Tiberiu Ichim - [`892c285`](https://github.com/eea/volto-cca-policy/commit/892c285a618b1daf92a7c0e8878a09671377ef65)]
+- Refs #160116 - C3SIndicatorView: WIP iframe. [GhitaB - [`97a42aa`](https://github.com/eea/volto-cca-policy/commit/97a42aa9eaa565a4b8c08427b4d0a62f28bf5a87)]
+### [0.1.15](https://github.com/eea/volto-cca-policy/compare/0.1.14...0.1.15) - 27 March 2023
+
 ### [0.1.14](https://github.com/eea/volto-cca-policy/compare/0.1.13...0.1.14) - 24 March 2023
 
 #### :hammer_and_wrench: Others
@@ -319,7 +346,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Refs #158294 - Update supported languages list. [GhitaB - [`0a4f91f`](https://github.com/eea/volto-cca-policy/commit/0a4f91f39b7edc367bd4c127d6a8f273c7788361)]
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`8f1f9ce`](https://github.com/eea/volto-cca-policy/commit/8f1f9ce6c22805670cc0800d3c779b6d619d0f31)]
 ### [0.1.1](https://github.com/eea/volto-cca-policy/compare/0.1.0...0.1.1) - 13 December 2022
 
 #### :hammer_and_wrench: Others

package.json

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

src/components/theme/Views/C3SIndicatorView.jsx

@@ -1,30 +1,125 @@
-import React from 'react';
-import {
-  HTMLField,
-  // ContentMetadata,
-  // LinksList,
-  // PublishedModifiedInfo,
-  // ShareInfo,
-} from '@eeacms/volto-cca-policy/helpers';
+import React, { useState, useEffect } from 'react';
+import spinner from '@eeacms/volto-cca-policy/../theme//assets/images/spinner.svg';
+import { HTMLField } from '@eeacms/volto-cca-policy/helpers';
 import { Grid } from 'semantic-ui-react';
-// import { Fragment } from 'react';
 
-const Details = (props) => {
-  const showDetails = () => {
-    // console.log("WIP details");
+if (!__SERVER__) {
+  window.cds_toolbox = {
+    cds_public_path: 'https://cds.climate.copernicus.eu/toolbox/',
   };
+}
+
+const createIframe = (div_id, details_url, details_params, spinner_url) => {
+  return `
+  <iframe width="100%" height="800px" srcdoc="<html><head>
+    <title>CDS integration test</title>
+    <meta charset='utf-8' />
+    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
+    <script>
+        window.cds_toolbox = { cds_public_path: 'https://cds.climate.copernicus.eu/toolbox/' };
+    </script>
+    <script type='text/javascript' src='https://cds.climate.copernicus.eu/toolbox/toolbox-latest.js'></script>
+    </head>
+    <body>
+      <div class='t-ct'>
+        <div id='${div_id}'>
+          <div class='pre-app-loading'>
+            <img src='${spinner_url}' alt='Loading'>
+            <div>
+              ...loading configuration...
+            </div>
+          </div>
+        </div>
+      </div>
+      <script type='text/javascript'>
+      document.addEventListener('DOMContentLoaded',
+        function () {
+          window.cds_toolbox.runApp(
+            '${div_id}',
+            '${details_url}',
+            ${details_params}
+          );
+        }, false);
+      </script>
+    </body></html>"
+  />`;
+};
+
+const Details = (props) => {
+  const { content } = props;
+  const c3s_details_url = content.details_app_toolbox_url;
+  const c3s_details_params = JSON.stringify(
+    content.details_app_parameters,
+  ).replace(/"/g, "'"); // we avoid double quotes in iframe text
+  const [spinnerUrl, setSpinnerUrl] = useState(null);
+
+  React.useEffect(() => {
+    setSpinnerUrl(spinner);
+  }, []);
 
   return (
-    <a href="#details">
-      <button className="ui button primary" onClick={showDetails}>
-        Explore in detail
-      </button>
-    </a>
+    <div
+      className="iframe-container"
+      dangerouslySetInnerHTML={{
+        __html: createIframe(
+          'toolbox-app-details',
+          c3s_details_url,
+          c3s_details_params,
+          spinnerUrl,
+        ),
+      }}
+    />
+  );
+};
+
+const Overview = (props) => {
+  const { content } = props;
+  const c3s_overview_url = content.overview_app_toolbox_url;
+  const c3s_overview_params = JSON.stringify(
+    content.overview_app_parameters,
+  ).replace(/"/g, "'"); // we avoid double quotes in iframe text
+  const [spinnerUrl, setSpinnerUrl] = useState(null);
+
+  React.useEffect(() => {
+    setSpinnerUrl(spinner);
+  }, []);
+
+  return (
+    <div
+      className="iframe-container"
+      dangerouslySetInnerHTML={{
+        __html: createIframe(
+          'toolbox-app-overview',
+          c3s_overview_url,
+          c3s_overview_params,
+          spinnerUrl,
+        ),
+      }}
+    />
   );
 };
 
 function C3SIndicatorView(props) {
   const { content } = props;
+  const [showDetails, setShowDetails] = useState(false);
+
+  const toggleIframe = () => {
+    setShowDetails(!showDetails);
+  };
+
+  useEffect(() => {
+    if (window.location.hash === '#details') {
+      setShowDetails(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (showDetails) {
+      window.history.pushState({}, '', '#details');
+    } else {
+      window.history.pushState({}, '', window.location.pathname);
+    }
+  }, [showDetails]);
 
   return (
     <div className="c3sindicator-view">
@@ -37,15 +132,39 @@ function C3SIndicatorView(props) {
               computer={12}
               className="col-full"
             >
-              <h1>{content.title}</h1>
-              <a href="/knowledge/european-climate-data-explorer/">
+              <a
+                href="/knowledge/european-climate-data-explorer/"
+                className="btn-right"
+              >
                 <button className="ui button primary">ECDE homepage</button>
               </a>
+              <h1>{content.title}</h1>
               <HTMLField
                 value={content.long_description}
                 className="long_description"
               />
-              <Details {...props} />
+              <a href="#details" className="btn-right">
+                <button className="ui button primary" onClick={toggleIframe}>
+                  {showDetails ? 'Go back' : 'Explore in detail'}
+                </button>
+              </a>
+              <h2>
+                {content.indicator_title} {showDetails && ' - Explore index'}
+              </h2>
+              {!__SERVER__ && !showDetails && <Overview {...props} />}
+              {!__SERVER__ && showDetails && <Details {...props} />}
+
+              <p>
+                Content in the European Climate Data Explorer pages is delivered
+                by the{' '}
+                <a href="https://climate.copernicus.eu/">
+                  Copernicus Climate Change Service (C3S)
+                </a>{' '}
+                implemented by ECMWF.{' '}
+                <a href="/knowledge/european-climate-data-explorer/disclaimer">
+                  Disclaimer
+                </a>
+              </p>
             </Grid.Column>
           </div>
         </Grid>

src/customizations/@eeacms/volto-eea-design-system/ui/Footer/Contact.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { UniversalLink } from '@plone/volto/components';
+
+const Contact = ({ children, contacts }) =>
+  children?.length ? (
+    children
+  ) : (
+    <div className="contact-block">
+      {contacts?.map((contact, index) => {
+        return (
+          <div className="contact" key={index}>
+            <UniversalLink href={contact.link} className="bold">
+              {contact.text}
+            </UniversalLink>
+            {contact.children && (
+              <div className="subcontact">
+                {contact.children.map((child, index) => (
+                  <UniversalLink href={child.link} key={index}>
+                    {child.text}
+                  </UniversalLink>
+                ))}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+
+Contact.propTypes = {
+  contacts: PropTypes.array,
+  header: PropTypes.string,
+};
+
+export default Contact;

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

@@ -4,9 +4,8 @@
  */
 
 import React from 'react';
-import { Dropdown, Image } from 'semantic-ui-react';
+import { Dropdown, Image } from 'semantic-ui-react'; // Container, Menu, Grid
 import { connect, useDispatch, useSelector } from 'react-redux';
-
 import { withRouter } from 'react-router-dom';
 import { UniversalLink } from '@plone/volto/components';
 import {
@@ -24,9 +23,10 @@ import eeaFlag from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/
 import config from '@plone/volto/registry';
 import { compose } from 'recompose';
 import { BodyClass } from '@plone/volto/helpers';
-
 import cx from 'classnames';
 
+import HeaderMain from './HeaderMain';
+
 function removeTrailingSlash(path) {
   return path.replace(/\/+$/, '');
 }
@@ -59,6 +59,7 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
 
   const { eea } = config.settings;
   const headerOpts = eea.headerOpts || {};
+  // const headerSearchBox = eea.headerSearchBox || [];
   const { logo, logoWhite } = headerOpts || {};
   const width = useSelector((state) => state.screen?.width);
   const dispatch = useDispatch();
@@ -198,8 +199,9 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
           </Header.TopDropdownMenu>
         )}
       </Header.TopHeader>
-      <Header.Main
+      {/* <Header.Main
         pathname={pathname}
+        headerSearchBox={headerSearchBox}
         inverted={isHomePageInverse ? true : false}
         transparency={isHomePageInverse ? true : false}
         logo={
@@ -262,7 +264,73 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
             {props?.iconPosition === 'right' && props?.children}
           </UniversalLink>
         )}
-      ></Header.Main>
+      ></Header.Main> */}
+
+      <HeaderMain
+        inverted={isHomePageInverse ? true : false}
+        transparency={isHomePageInverse ? true : false}
+        pathname={pathname}
+        logo={
+          <div {...(isSubsite ? { className: 'logo-wrapper' } : {})}>
+            {!!subsite && subsite.title ? (
+              <>
+                {subsite.subsite_logo ? (
+                  <Logo
+                    src={subsite.subsite_logo?.scales.preview.download}
+                    title={subsite.title}
+                    alt={subsite.title}
+                    url={flattenToAppURL(subsite['@id'])}
+                  />
+                ) : (
+                  subsite.title
+                )}
+                <div className="subsite-logo">
+                  <Logo
+                    src={isHomePageInverse ? logoWhite : logo}
+                    title={eea.websiteTitle}
+                    alt={eea.organisationName}
+                    url={eea.logoTargetUrl}
+                  />
+                </div>
+              </>
+            ) : (
+              <Logo
+                src={isHomePageInverse ? logoWhite : logo}
+                title={eea.websiteTitle}
+                alt={eea.organisationName}
+                url={eea.logoTargetUrl}
+              />
+            )}
+          </div>
+        }
+        menuItems={items}
+        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.title}
+            {...(options || {})}
+            className={cx(options?.className, {
+              active: item.url === router_pathname,
+            })}
+          >
+            {props?.iconPosition !== 'right' && props?.children}
+            <span>{item.title}</span>
+            {props?.iconPosition === 'right' && props?.children}
+          </UniversalLink>
+        )}
+      />
     </Header>
   );
 };