@eeacms/volto-n2k 0.1.1

package/src/components/theme/AppExtras/CopyPaste/CopyPaste.jsx

@@ -0,0 +1,176 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { Portal } from 'react-portal';
+import { toast } from 'react-toastify';
+import { Button } from 'semantic-ui-react';
+import { getBaseUrl } from '@plone/volto/helpers';
+import { updateContent } from '@plone/volto/actions';
+import { Icon, Toast } from '@plone/volto/components';
+import copySVG from '@plone/volto/icons/copy.svg';
+import pasteSVG from '@plone/volto/icons/paste.svg';
+
+import './style.less';
+
+const TIMEOUT = 2000;
+
+const CopyPaste = (props) => {
+  const [readyToRender, setReadyToRender] = React.useState(false);
+  const clock = React.useRef(null);
+  const time = React.useRef(0);
+  const toolbar = React.useRef(null);
+  const { content } = props;
+
+  const copyData = () => {
+    navigator.clipboard.writeText(
+      JSON.stringify({
+        blocks: content.blocks,
+        blocks_layout: content.blocks_layout,
+      }),
+    );
+    toast.success(
+      <Toast success title={'Success'} content={`Copied blocks`} />,
+    );
+  };
+
+  const pasteData = () => {
+    const message = [
+      '============= BRAKING CHANGE =============',
+      '\nAre you sure you want to paste from clipboard?',
+      '\nThis action will replace all the blocks with those from clipboard and will trigger SUBMIT !!!',
+    ];
+    navigator.clipboard.readText().then((text) => {
+      if (
+        // eslint-disable-next-line no-alert
+        window.confirm(message.join(''))
+      ) {
+        try {
+          const data = JSON.parse(text) || {};
+          const { blocks = {}, blocks_layout = {} } = data;
+          const blocksIds = Object.keys(blocks);
+          let valid = true;
+          if (
+            blocks_layout &&
+            blocks_layout.items &&
+            blocks_layout.items.length === blocksIds.length
+          ) {
+            blocks_layout.items.forEach((block) => {
+              if (valid && !blocksIds.includes(block)) {
+                valid = false;
+              }
+            });
+          }
+          if (valid) {
+            props.updateContent(getBaseUrl(props.pathname), data);
+            toast.success(
+              <Toast
+                success
+                title={'Success'}
+                content={'Blocks replaced successfully'}
+              />,
+            );
+          } else {
+            toast.error(
+              <Toast
+                error
+                title={'Error'}
+                content={'Your clipboard contains incompatible data'}
+              />,
+            );
+          }
+        } catch {
+          toast.error(
+            <Toast
+              error
+              title={'Error'}
+              content={'Your clipboard contains incompatible data'}
+            />,
+          );
+        }
+      }
+    });
+  };
+
+  React.useEffect(() => {
+    clock.current = setInterval(() => {
+      const element = document.querySelector('#toolbar .toolbar-actions');
+      if (element) {
+        setReadyToRender(true);
+        clearInterval(clock.current);
+        time.current = 0;
+        return;
+      }
+      if (time.current >= TIMEOUT) {
+        clearInterval(clock.current);
+        time.current = 0;
+        return;
+      }
+      time.current += 100;
+    }, 100);
+    return () => {
+      clearInterval(clock.current);
+      time.current = 0;
+    };
+  }, []);
+
+  if (!__CLIENT__ || !readyToRender) return '';
+
+  return (
+    <Portal node={document.querySelector('#toolbar .toolbar-actions')}>
+      <div
+        ref={toolbar}
+        id="__developer_tools"
+        onMouseEnter={(e) => {
+          if (
+            e.altKey &&
+            e.ctrlKey &&
+            toolbar.current &&
+            !toolbar.current.classList.contains('__dev_on')
+          ) {
+            toolbar.current.classList.add('__dev_on');
+          }
+        }}
+        onMouseLeave={(e) => {
+          if (
+            toolbar.current &&
+            toolbar.current.classList.contains('__dev_on')
+          ) {
+            toolbar.current.classList.remove('__dev_on');
+          }
+        }}
+        onFocus={() => {}}
+      >
+        <Button
+          className="copy"
+          aria-label="Copy blocks data"
+          title="Copy blocks data"
+          onClick={copyData}
+        >
+          <Icon name={copySVG} className="circled" size="30px" />
+        </Button>
+        <Button
+          className="paste"
+          aria-label="Paste blocks data"
+          title="Paste blocks data"
+          onClick={pasteData}
+          disabled={props.updateRequest.loading}
+        >
+          <Icon name={pasteSVG} className="circled" size="30px" />
+        </Button>
+      </div>
+    </Portal>
+  );
+};
+
+export default compose(
+  connect(
+    (state, props) => ({
+      content: state.content.data,
+      updateRequest: state.content.update,
+      pathname: props.location.pathname,
+    }),
+    {
+      updateContent,
+    },
+  ),
+)(CopyPaste);

package/src/components/theme/AppExtras/CopyPaste/index.js

@@ -0,0 +1,3 @@
+import CopyPaste from './CopyPaste';
+
+export default CopyPaste;

package/src/components/theme/AppExtras/CopyPaste/style.less

@@ -0,0 +1,18 @@
+#__developer_tools {
+  .ui.button {
+    color: #007eb1;
+    opacity: 0;
+    pointer-events: none;
+
+    &.disabled {
+      opacity: 0 !important;
+    }
+  }
+
+  &.__dev_on {
+    .ui.button {
+      opacity: 1;
+      pointer-events: all;
+    }
+  }
+}

package/src/components/theme/AppExtras/MultilingualRedirector/MultilingualRedirector.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Redirect } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import cookie from 'react-cookie';
+import config from '@plone/volto/registry';
+import { changeLanguage } from '@plone/volto/actions';
+
+const MultilingualRedirector = (props) => {
+  const { settings } = config;
+  const { pathname, children } = props;
+  const currentLanguage =
+    cookie.load('N2K_LANGUAGE') || settings.defaultLanguage;
+  const redirectToLanguage = settings.supportedLanguages.includes(
+    currentLanguage,
+  )
+    ? currentLanguage
+    : settings.defaultLanguage;
+  const dispatch = useDispatch();
+
+  React.useEffect(() => {
+    if (settings.isMultilingual && pathname === '/') {
+      import('~/../locales/' + redirectToLanguage + '.json').then((locale) => {
+        dispatch(changeLanguage(redirectToLanguage, locale.default));
+      });
+    }
+  }, [pathname, dispatch, redirectToLanguage, settings.isMultilingual]);
+
+  return pathname === '/' && settings.isMultilingual ? (
+    <Redirect to={`/${redirectToLanguage}`} />
+  ) : (
+    <>{children}</>
+  );
+};
+
+export default MultilingualRedirector;

package/src/components/theme/AppExtras/index.js

@@ -0,0 +1,13 @@
+import CopyPaste from './CopyPaste';
+
+export default (config) => {
+  config.settings.appExtras = [
+    ...(config.settings.appExtras || []),
+    {
+      match: '/**/edit',
+      component: CopyPaste,
+    },
+  ];
+
+  return config;
+};

package/src/components/theme/Footer/Footer.jsx

@@ -0,0 +1,209 @@
+/* eslint-disable react/jsx-no-target-blank */
+/**
+ * Footer component.
+ * @module components/theme/Footer/Footer
+ */
+
+import React from 'react';
+import { Container, Segment, Grid } from 'semantic-ui-react';
+import { Link } from 'react-router-dom';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import LogoImage from '@plone/volto/components/theme/Logo/Logo.svg';
+
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+
+import ecLogo from '../../../static/ec.png';
+import eeaLogo from '../../../static/eea.png';
+import fiseLogo from '../../../static/forest.svg';
+import ccaLogo from '../../../static/cca.svg';
+import wiseLogo from '../../../static/wise.png';
+
+// const messages = defineMessages({
+//   copyright: {
+//     id: 'Copyright',
+//     defaultMessage: 'Copyright',
+//   },
+// });
+
+/**
+ * Component to display the footer.
+ * @function Footer
+ * @param {Object} intl Intl object
+ * @returns {string} Markup of the component
+ */
+const Footer = ({ intl }) => (
+  <Segment role="contentinfo" vertical padded className="footerWrapper">
+    <Container>
+      <div className="footer-top-wrapper">
+        <Grid stackable>
+          <Grid.Row>
+            <Grid.Column mobile={16} tablet={10} computer={10}>
+              <ul className="footer-nav" id="footer_links">
+                <li>
+                  <Link className="item" to="/natura2000">
+                    <FormattedMessage id="home" defaultMessage="Home" />
+                  </Link>
+                </li>
+                <li>
+                  <a className="item" href={`mailto:bise@eea.europa.eu`}>
+                    Contact
+                  </a>
+                </li>
+                <li>
+                  <Link className="item" to="/natura2000/sitemap">
+                    <FormattedMessage id="sitemap" defaultMessage="Sitemap" />
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    className="item"
+                    to="/natura2000/legal-and-privacy-notice"
+                  >
+                    <FormattedMessage
+                      id="legal_notice"
+                      defaultMessage="Privacy and legal notice"
+                    />
+                  </Link>
+                </li>
+                <li>
+                  <Link className="item" to="/natura2000/copyright-notice">
+                    <FormattedMessage
+                      id="copyright_notice"
+                      defaultMessage="Copyright notice"
+                    />
+                  </Link>
+                </li>
+              </ul>
+            </Grid.Column>
+            <Grid.Column mobile={16} tablet={2} computer={2}>
+              <Link to="/">
+                <img
+                  className="bise-footer"
+                  src={LogoImage}
+                  alt="BISE"
+                  height={50}
+                  width={150}
+                />
+              </Link>
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      </div>
+
+      <div className="site-info">
+        <Grid stackable>
+          <Grid.Row>
+            <Grid.Column
+              mobile={16}
+              tablet={16}
+              computer={5}
+              className="information"
+            >
+              <div>
+                <p>
+                  The Biodiversity information system for Europe is a
+                  partnership between the{' '}
+                  <a
+                    href="https://ec.europa.eu/"
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    European Commission
+                  </a>{' '}
+                  and the{' '}
+                  <a
+                    href="https://www.eea.europa.eu/"
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    European Environment Agency.
+                  </a>
+                </p>{' '}
+              </div>
+              <div className="site-info-logos">
+                <a href="https://ec.europa.eu/" aria-label="European Comission">
+                  <LazyLoadImage
+                    className="footerLogo"
+                    src={ecLogo}
+                    title="European Commission"
+                    alt="European Commission"
+                  />
+                </a>
+                <a
+                  href="https://www.eea.europa.eu/"
+                  aria-label="European Environment Agency"
+                >
+                  <LazyLoadImage
+                    className="footerLogo"
+                    src={eeaLogo}
+                    title="European Environment Agency"
+                    alt="European Environment Agency"
+                  />
+                </a>
+              </div>
+            </Grid.Column>
+
+            <Grid.Column
+              mobile={16}
+              tablet={16}
+              computer={7}
+              className="other-information"
+            >
+              <div>
+                <p>Other European Information Systems</p>
+              </div>
+              <div className="footerLogos">
+                <a
+                  href="https://water.europa.eu/"
+                  aria-label="Water Information System for Europe"
+                >
+                  <LazyLoadImage
+                    className="footerLogo"
+                    src={wiseLogo}
+                    title="Water Information System for Europe"
+                    alt="Water Information System for Europe"
+                  />
+                </a>
+                <a
+                  href="https://forest.eea.europa.eu/"
+                  aria-label="Forest Information System for Europe"
+                >
+                  <LazyLoadImage
+                    className="footerLogo"
+                    src={fiseLogo}
+                    title="Forest Information System for Europe"
+                    alt="Forest Information System for Europe"
+                  />
+                </a>
+                <a
+                  href="https://climate-adapt.eea.europa.eu/"
+                  aria-label="Climate-Adapt"
+                >
+                  <LazyLoadImage
+                    className="footerLogo"
+                    src={ccaLogo}
+                    title="Climate-Adapt"
+                    alt="Climate-Adapt"
+                  />
+                </a>
+              </div>
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      </div>
+    </Container>
+  </Segment>
+);
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+Footer.propTypes = {
+  /**
+   * i18n object
+   */
+};
+
+export default injectIntl(Footer);

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

@@ -0,0 +1,81 @@
+/**
+ * Header component.
+ * @module components/theme/Header/Header
+ */
+
+import React, { useEffect, useContext } from 'react';
+import { withRouter } from 'react-router';
+import { Container, Sticky } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+import { Portal } from 'react-portal';
+import config from '@plone/volto/registry';
+import { Anontools } from '@plone/volto/components';
+import { withLocalStorage } from '@eeacms/volto-n2k/hocs';
+import Navigation from '../Navigation/Navigation';
+import { StickyContext } from '~/components';
+
+const Navbar = (props) => {
+  const currentLang = props.localStorage.get('N2K_LANGUAGE');
+
+  return (
+    <Container>
+      <div className="header-wrapper">
+        <div className="header">
+          <div className="logo-nav-wrapper">
+            <div className="tools-search-wrapper">
+              {currentLang ? (
+                <Navigation
+                  isSticky={props.isSticky}
+                  pathname={props.pathname}
+                />
+              ) : (
+                ''
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+      {!props.token && (
+        <Portal node={__CLIENT__ && document.querySelector('#footer_links')}>
+          <Anontools />
+        </Portal>
+      )}
+    </Container>
+  );
+};
+
+const Header = (props) => {
+  const [isSticky, setIsSticky] = React.useState(false);
+  const { stickyRef } = useContext(StickyContext);
+
+  useEffect(() => {
+    if (!props.localStorage.get('N2K_LANGUAGE')) {
+      props.localStorage.set('N2K_LANGUAGE', config.settings.defaultLanguage);
+    }
+    /* eslint-disable-next-line */
+  }, []);
+
+  return props.location.pathname === '/natura2000' ? (
+    ''
+  ) : (
+    <>
+      <Sticky
+        context={stickyRef}
+        className="ui basic segment sticky-header-wrapper"
+        role="banner"
+        onStick={() => {
+          setIsSticky(true);
+        }}
+        onUnstick={() => {
+          setIsSticky(false);
+        }}
+      >
+        <Navbar {...props} isSticky={isSticky} />
+      </Sticky>
+    </>
+  );
+};
+
+export default connect((state) => ({
+  token: state.userSession.token,
+}))(withRouter(withLocalStorage(Header)));

package/src/components/theme/LanguageSelector/LanguageSelector.jsx

@@ -0,0 +1,79 @@
+/**
+ * Language selector component.
+ * @module components/LanguageSelector/LanguageSelector
+ */
+
+import React from 'react';
+import { withRouter, matchPath, generatePath } from 'react-router';
+import { useSelector } from 'react-redux';
+// import langmap from 'langmap';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { Dropdown } from 'semantic-ui-react';
+import config from '@plone/volto/registry';
+import { withLocalStorage } from '@eeacms/volto-n2k/hocs';
+import { getN2kItems, pathExists } from '@eeacms/volto-n2k/helpers';
+import './styles.less';
+
+const LanguageSelector = (props) => {
+  const content = useSelector((state) => state.content);
+  const n2kItems = getN2kItems(props.navigation.items);
+  const localStorage = props.localStorage;
+  const pathname = props.location.pathname;
+  const currentLang = localStorage.get('N2K_LANGUAGE');
+  const match = matchPath(pathname, {
+    path: config.settings.multilingualPath,
+    exact: true,
+    strict: false,
+  });
+  const hasMultilingualSupport =
+    match && config.settings.supportedLanguages.includes(match.params.lang);
+  const translations = hasMultilingualSupport
+    ? config.settings.supportedLanguages.map((lang) => ({
+        path: generatePath(config.settings.multilingualPath, {
+          ...match.params,
+          lang,
+        }),
+        lang,
+      }))
+    : [];
+  const { settings } = config;
+  const supportedLanguagesOptions = settings.supportedLanguages.map((lang) => ({
+    key: lang,
+    value: lang,
+    text: lang,
+  }));
+
+  return (
+    <div className="language-selector">
+      <Dropdown
+        aria-label="Language selector"
+        disabled={content.get.loading}
+        placeholder="Select a language"
+        value={currentLang}
+        scrolling
+        options={supportedLanguagesOptions}
+        onChange={(e, data) => {
+          const lang = data.value;
+          const translation = translations.filter(
+            (item) => item.lang === lang,
+          )[0];
+
+          if (translation && translation.path) {
+            const exists = pathExists(translation.path, n2kItems);
+            if (exists) {
+              props.history.push(flattenToAppURL(translation.path));
+            } else {
+              props.history.push('/natura2000');
+            }
+          }
+
+          if (config.settings.supportedLanguages.includes(lang)) {
+            localStorage.set('N2K_LANGUAGE', lang);
+          }
+        }}
+      />
+    </div>
+  );
+};
+
+export default withRouter(withLocalStorage(LanguageSelector));

package/src/components/theme/LanguageSelector/styles.less

@@ -0,0 +1,44 @@
+.language-selector {
+  .ui.dropdown {
+    &:not(.button) .text,
+    &:not(.button) .default.text {
+      color: #3b7f02;
+      font-family: OpenSans, 'Raleway', sans-serif;
+      text-transform: uppercase;
+
+      &:hover {
+        color: #7ac943;
+      }
+    }
+
+    .menu {
+      margin-top: 0.5rem;
+      margin-left: -0.6rem;
+
+      .item {
+        background: #fff !important;
+
+        .text {
+          color: #3b7f02;
+          font-family: OpenSans, 'Raleway', sans-serif;
+          font-size: 1rem;
+          font-weight: bold;
+          text-transform: uppercase;
+        }
+
+        &.active.selected {
+          background: #fff !important;
+
+          .text {
+            color: #3b7f02;
+          }
+
+          &::before {
+            display: none !important;
+            opacity: 0;
+          }
+        }
+      }
+    }
+  }
+}