@eeacms/volto-n2k 1.0.20 → 1.0.22

package/src/index.js

@@ -1,5 +1,4 @@
 /* eslint-disable no-extend-native */
-import React from 'react';
 import loadable from '@loadable/component';
 import { compose } from 'redux';
 import { connectToProviderData } from '@eeacms/volto-datablocks/hocs';
@@ -44,11 +43,9 @@ import installTilesImages from './components/manage/Blocks/TilesImages';
 
 import { LINK } from '@plone/volto-slate/constants';
 
-import { Header } from '@eeacms/volto-n2k/components';
-
 import { gridSizes, variants } from './grid';
 
-import './less/styles.less';
+// import './less/styles.less';
 
 Array.prototype.sortByProperty = function (property, order = 'ASC') {
   return this.sort((a, b) => {
@@ -72,50 +69,6 @@ const applyConfig = (config) => {
 
   config.settings.persistentReducers.push('localStorage');
 
-  config.settings = {
-    ...config.settings,
-    n2k: {
-      multilingualRoot: '/natura2000/:lang',
-      multilingualPath: '/natura2000/:lang/*',
-      defaultLanguage: 'en',
-      supportedLanguages: [
-        'bg',
-        'hr',
-        'cs',
-        'da',
-        'nl',
-        'en',
-        'et',
-        'fi',
-        'fr',
-        'de',
-        'el',
-        'hu',
-        'ga',
-        'it',
-        'lv',
-        'lt',
-        'mt',
-        'pl',
-        'pt',
-        'ro',
-        'sk',
-        'sl',
-        'es',
-        'sv',
-      ],
-    },
-  };
-
-  config.settings.themes = {
-    ...(config.settings.themes || {}),
-    natura2000: {
-      Header: Header,
-      // Footer: Footer,
-      Breadcrumbs: () => <></>,
-    },
-  };
-
   config.blocks.blocksConfig.columnsBlock = {
     ...(config.blocks.blocksConfig.columnsBlock || {}),
     gridSizes: {

package/src/less/styles.less

@@ -402,16 +402,6 @@ img.slick-image {
   pointer-events: none;
 }
 
-.styled.protected-habitats
-  > .tabs-block.default
-  > .styled
-  > .tabs.default
-  > .ui.menu {
-  border-bottom: 2px solid #dadada;
-  margin-bottom: 1rem;
-  border-radius: 0;
-}
-
 .sdf-image {
   height: 500px;
 
@@ -480,38 +470,6 @@ img.slick-image {
   }
 }
 
-.protected-habitats {
-  .default.tabs {
-    .ui.menu {
-      border-bottom: none !important;
-      background-color: #00a390;
-
-      .item {
-        padding: 1rem;
-        border-radius: 0;
-        color: #fff !important;
-
-        p {
-          font-size: 16px !important;
-        }
-
-        &.active:hover,
-        &:hover {
-          padding-bottom: calc(1rem - 3px);
-          border-bottom: 3px solid #fff;
-          color: #fff !important;
-        }
-
-        &.active {
-          padding-bottom: calc(1rem - 3px);
-          border-bottom: 3px solid #fff;
-          color: #fff !important;
-        }
-      }
-    }
-  }
-}
-
 .smart-table .search-description {
   margin-bottom: 2rem;
   color: #6b6b6b;

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

@@ -1,209 +0,0 @@
-/* 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

@@ -1,169 +0,0 @@
-/**
- * Header component.
- * @module components/theme/Header/Header
- */
-
-import React, { useEffect, useContext, useMemo } from 'react';
-import cx from 'classnames';
-import { matchPath, withRouter } from 'react-router';
-import { Link } from 'react-router-dom';
-import { compose } from 'redux';
-import { connect } from 'react-redux';
-import { Portal } from 'react-portal';
-import { Container, Segment, Sticky, Image } from 'semantic-ui-react';
-import config from '@plone/volto/registry';
-import { Anontools } from '@plone/volto/components';
-import { withLocalStorage } from '@eeacms/volto-n2k/hocs';
-import { StickyContext } from '@eeacms/volto-bise/components';
-import Navigation from '../Navigation/Navigation';
-import LanguageSelector from '../LanguageSelector/LanguageSelector';
-
-import BISELogo from '@eeacms/volto-bise/customizations/volto/components/theme/Logo/Logo.svg';
-
-function removeTrailingSlash(str) {
-  return str.replace(/\/+$/, '');
-}
-
-function matchPaths(paths, pathname) {
-  if (
-    matchPath(pathname, {
-      path: paths,
-      exact: true,
-      strict: false,
-    })
-  ) {
-    return true;
-  }
-  return false;
-}
-
-const Navbar = (props) => {
-  const currentLang = props.localStorage.get('N2K_LANGUAGE');
-
-  return (
-    <div>
-      <Segment basic role="banner" className={cx('header-wrapper')}>
-        <Container>
-          <div className="header">
-            <div className="logo-nav-wrapper">
-              <div className="logo">
-                <Link title="Natura 2000" to="/">
-                  <Image
-                    src={BISELogo}
-                    alt="Biodiversity logo"
-                    title="Biodiversity logo"
-                    height={64}
-                    width={192}
-                  />
-                </Link>
-              </div>
-              <div className="tools-search-wrapper">
-                {currentLang ? (
-                  <Navigation
-                    pathname={props.pathname}
-                    isSticky={props.isSticky}
-                    isRoot={props.isRoot}
-                    isExplorer={props.isExplorer}
-                  />
-                ) : (
-                  ''
-                )}
-              </div>
-              {!props.isSdf && !props.isExplorer && (
-                <div className="mobile hidden tablet hidden computer hidden language-selector-wrapper">
-                  <LanguageSelector navigation={props.navigation} />
-                </div>
-              )}
-            </div>
-          </div>
-          {!props.token && (
-            <Portal
-              node={__CLIENT__ && document.querySelector('#footer_links')}
-            >
-              <Anontools />
-            </Portal>
-          )}
-        </Container>
-      </Segment>
-    </div>
-  );
-};
-
-const Header = (props) => {
-  const [isSticky, setIsSticky] = React.useState(false);
-  const { stickyRef } = useContext(StickyContext);
-  const isRoot = useMemo(
-    () =>
-      removeTrailingSlash(props.pathname) !== '/natura2000/natura2000' &&
-      matchPath(props.pathname, {
-        path: config.settings.n2k.multilingualRoot,
-        exact: true,
-        strict: false,
-      }),
-    [props.pathname],
-  );
-
-  const isSdf = useMemo(() => matchPaths(config.settings.sdf, props.pathname), [
-    props.pathname,
-  ]);
-
-  const isExplorer = useMemo(
-    () => matchPaths(config.settings.explorer, props.pathname),
-    [props.pathname],
-  );
-
-  useEffect(() => {
-    if (!props.localStorage.get('N2K_LANGUAGE')) {
-      props.localStorage.set(
-        'N2K_LANGUAGE',
-        config.settings.n2k.defaultLanguage,
-      );
-    }
-    /* eslint-disable-next-line */
-  }, []);
-
-  return isRoot ? (
-    <div className="ui basic segment sticky-header-wrapper">
-      <div className="ui sticky">
-        <Navbar
-          {...props}
-          isSticky={false}
-          isRoot={isRoot}
-          isSdf={isSdf}
-          isExplorer={isExplorer}
-        />
-      </div>
-    </div>
-  ) : (
-    <Sticky
-      context={stickyRef}
-      className="ui basic segment sticky-header-wrapper"
-      role="banner"
-      onStick={() => {
-        setIsSticky(true);
-      }}
-      onUnstick={() => {
-        setIsSticky(false);
-      }}
-    >
-      <Navbar
-        {...props}
-        isSticky={isSticky}
-        isRoot={isRoot}
-        isSdf={isSdf}
-        isExplorer={isExplorer}
-      />
-    </Sticky>
-  );
-};
-
-export default compose(
-  withRouter,
-  withLocalStorage,
-  connect((state) => {
-    return {
-      token: state.userSession.token,
-      navigation: state.navigation,
-    };
-  }),
-)(Header);

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

@@ -1,98 +0,0 @@
-/**
- * Language selector component.
- * @module components/LanguageSelector/LanguageSelector
- */
-
-import React from 'react';
-import { withRouter, matchPath, generatePath } from 'react-router';
-import { useSelector } from 'react-redux';
-import cx from 'classnames';
-import { langmap } from '@plone/volto/helpers';
-import { flattenToAppURL } from '@plone/volto/helpers';
-import { Dropdown, Image } 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';
-
-import globeIcon from '@eeacms/volto-n2k/static/global-line.svg';
-
-const LanguageSelector = (props) => {
-  const { settings } = config;
-  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 matchRoot = matchPath(pathname, {
-    path: settings.n2k.multilingualRoot,
-    exact: true,
-    strict: false,
-  });
-  const matchChild = matchPath(pathname, {
-    path: settings.n2k.multilingualPath,
-    exact: true,
-    strict: false,
-  });
-  const match = matchRoot || matchChild;
-  const hasMultilingualSupport =
-    match && settings.n2k.supportedLanguages.includes(match.params.lang);
-  const translations = hasMultilingualSupport
-    ? settings.n2k.supportedLanguages.map((lang) => {
-        return {
-          path: matchRoot
-            ? `/natura2000/${lang}`
-            : generatePath(settings.n2k.multilingualPath, {
-                ...match.params,
-                lang,
-              }),
-          lang,
-        };
-      })
-    : [];
-  const supportedLanguagesOptions = settings.n2k.supportedLanguages.map(
-    (lang) => ({
-      key: lang,
-      value: lang,
-      text: langmap[lang].nativeName,
-    }),
-  );
-
-  return (
-    <div className={cx('language-selector', props.className)}>
-      <Dropdown
-        aria-label="Language selector"
-        disabled={content.get.loading}
-        placeholder="Select a language"
-        text={currentLang}
-        scrolling
-        icon={
-          <Image src={globeIcon} alt="language dropdown globe icon"></Image>
-        }
-        options={supportedLanguagesOptions}
-        value={currentLang}
-        onChange={(_, 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.n2k.supportedLanguages.includes(lang)) {
-            localStorage.set('N2K_LANGUAGE', lang);
-          }
-        }}
-      />
-    </div>
-  );
-};
-
-export default withRouter(withLocalStorage(LanguageSelector));

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

@@ -1,62 +0,0 @@
-.computer.hidden.language-selector-wrapper {
-  .language-selector > .ui.dropdown {
-    display: flex;
-    flex-flow: row-reverse;
-    align-items: center;
-  }
-}
-
-.language-selector {
-  margin-right: 0;
-
-  .ui.dropdown {
-    .divider.text {
-      display: inline-block;
-      color: #005248 !important;
-      font-family: OpenSans, 'Raleway', sans-serif;
-      font-weight: 700;
-      text-transform: uppercase;
-    }
-
-    .ui.image {
-      display: inline-block;
-      margin-right: 0.25rem;
-    }
-
-    &:hover {
-      .divider.text {
-        color: #00a390 !important;
-      }
-    }
-
-    > .menu {
-      position: absolute;
-      top: 30px !important;
-
-      .item {
-        background: #fff !important;
-
-        .text {
-          color: #005248;
-          font-family: OpenSans, 'Raleway', sans-serif;
-          font-size: 1rem;
-          font-weight: 700;
-          text-transform: uppercase;
-        }
-
-        &:hover {
-          .text {
-            color: #00a390;
-          }
-        }
-      }
-    }
-  }
-
-  &.landingpage-variation {
-    .divider.text {
-      color: #fff !important;
-      font-size: 20px;
-    }
-  }
-}