@eeacms/volto-n2k 0.1.1

package/src/components/theme/Navigation/Navigation.jsx

@@ -0,0 +1,453 @@
+/**
+ * Navigation components.
+ * @module components/theme/Navigation/Navigation
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { matchPath, withRouter } from 'react-router';
+import { Link } from 'react-router-dom';
+import { defineMessages, injectIntl } from 'react-intl';
+import { Menu, Dropdown } from 'semantic-ui-react';
+import cx from 'classnames';
+import { getBaseUrl, flattenToAppURL } from '@plone/volto/helpers';
+import { UniversalLink, Icon } from '@plone/volto/components';
+import qs from 'querystring';
+import { getNavigation } from '@plone/volto/actions';
+import config from '@plone/volto/registry';
+import { withLocalStorage } from '@eeacms/volto-n2k/hocs';
+import LanguageSelector from '../LanguageSelector/LanguageSelector';
+import n2kLogo from '@eeacms/volto-n2k/icons/natura2000.svg';
+
+const messages = defineMessages({
+  closeMobileMenu: {
+    id: 'Close menu',
+    defaultMessage: 'Close menu',
+  },
+  openMobileMenu: {
+    id: 'Open menu',
+    defaultMessage: 'Open menu',
+  },
+});
+
+const Hamburger = (props) => (
+  <div className="hamburger-wrapper mobile only">
+    <button
+      className={cx('hamburger hamburger--collapse', {
+        'is-active': props.isMobileMenuOpen,
+      })}
+      aria-label={
+        props.isMobileMenuOpen
+          ? props.intl.formatMessage(messages.closeMobileMenu, {
+              type: props.type,
+            })
+          : props.intl.formatMessage(messages.openMobileMenu, {
+              type: props.type,
+            })
+      }
+      title={
+        props.isMobileMenuOpen
+          ? props.intl.formatMessage(messages.closeMobileMenu, {
+              type: props.type,
+            })
+          : props.intl.formatMessage(messages.openMobileMenu, {
+              type: props.type,
+            })
+      }
+      type="button"
+      onClick={props.toggleMobileMenu}
+    >
+      <span className="hamburger-box">
+        <span className="hamburger-inner" />
+      </span>
+    </button>
+  </div>
+);
+
+/**
+ * Navigation container class.
+ * @class Navigation
+ * @extends Component
+ */
+class Navigation extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    getNavigation: PropTypes.func.isRequired,
+    pathname: PropTypes.string.isRequired,
+    items: PropTypes.arrayOf(
+      PropTypes.shape({
+        title: PropTypes.string,
+        url: PropTypes.string,
+        items: PropTypes.array,
+      }),
+    ).isRequired,
+  };
+
+  /**
+   * Constructor
+   * @method constructor
+   * @param {Object} props Component properties
+   * @constructs Navigation
+   */
+  constructor(props) {
+    super(props);
+    this.toggleMobileMenu = this.toggleMobileMenu.bind(this);
+    this.closeMobileMenu = this.closeMobileMenu.bind(this);
+    this.state = {
+      isMobileMenuOpen: false,
+      isSdf: false,
+    };
+    this.container = React.createRef();
+  }
+
+  /**
+   * Component will mount
+   * @method componentWillMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    this.props.getNavigation(
+      getBaseUrl(this.props.pathname),
+      config.settings.navDepth,
+    );
+    this.setState({
+      isSdf: this.isSdf(),
+    });
+  }
+
+  handleClickOutsideNav = (event) => {
+    if (
+      this.container.current &&
+      !this.container.current.contains(event.target)
+    ) {
+      this.setState({
+        isMobileMenuOpen: false,
+      });
+    }
+  };
+
+  /**
+   * Component did update
+   * @method componentDidUpdate
+   * @param {Object} prevProps Prev properties
+   * @returns {undefined}
+   */
+  componentDidUpdate(prevProps) {
+    if (
+      prevProps.pathname !== this.props.pathname ||
+      prevProps.userToken !== this.props.userToken
+    ) {
+      this.props.getNavigation(
+        getBaseUrl(this.props.pathname),
+        config.settings.navDepth,
+      );
+      this.closeMobileMenu();
+    }
+
+    // Hide submenu on route change
+    if (document.querySelector('body')) {
+      document.querySelector('body').click();
+    }
+  }
+
+  /**
+   * Check if menu is active
+   * @method isActive
+   * @param {string} url Url of the navigation item.
+   * @returns {bool} Is menu active?
+   */
+  isActive(url) {
+    return (
+      (url === '' && this.props.pathname === '/') ||
+      // (url !== '' && isMatch(this.props.pathname.split('/'), url.split('/')))
+      (url !== '' && url === this.props.pathname)
+    );
+  }
+
+  /**
+   * Check if page si sdf
+   * @method isSdf
+   * @returns {bool} Is sdf?
+   */
+  isSdf() {
+    if (
+      matchPath(this.props.pathname, {
+        path: config.settings.sdf,
+        exact: true,
+        strict: false,
+      })
+    ) {
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Toggle mobile menu's open state
+   * @method toggleMobileMenu
+   * @returns {undefined}
+   */
+  toggleMobileMenu() {
+    this.setState({ isMobileMenuOpen: !this.state.isMobileMenuOpen }, () => {
+      if (this.state.isMobileMenuOpen) {
+        document.addEventListener('mousedown', this.handleClickOutsideNav);
+      }
+    });
+  }
+
+  /**
+   * Close mobile menu
+   * @method closeMobileMenu
+   * @returns {undefined}
+   */
+  closeMobileMenu() {
+    if (!this.state.isMobileMenuOpen) {
+      return;
+    }
+    this.setState({ isMobileMenuOpen: false }, () => {
+      document.removeEventListener('mousedown', this.handleClickOutsideNav);
+    });
+  }
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const params = {
+      ...this.props.match.params,
+      ...(this.props.route_parameters || {}),
+      ...qs.parse(this.props.location.search.replace('?', '')),
+    };
+    return (
+      <nav
+        className={cx('navigation', this.props.className || '')}
+        ref={this.container}
+      >
+        <div className="mobile only">
+          <Hamburger
+            {...this.props}
+            isMobileMenuOpen={this.state.isMobileMenuOpen}
+            toggleMobileMenu={this.toggleMobileMenu}
+          />
+        </div>
+        <Menu
+          stackable
+          pointing
+          secondary
+          className={cx({
+            open: this.state.isMobileMenuOpen,
+            'is-sdf': this.state.isSdf,
+            'is-sticky': this.state.isSdf || this.props.isSticky,
+            'mobile hidden': !this.state.isMobileMenuOpen,
+            'mobile only': this.state.isMobileMenuOpen,
+          })}
+          onClick={this.closeMobileMenu}
+          onBlur={() => this.closeMobileMenu}
+        >
+          <div className="mobile only">
+            <Hamburger
+              {...this.props}
+              isMobileMenuOpen={this.state.isMobileMenuOpen}
+              toggleMobileMenu={this.toggleMobileMenu}
+            />
+          </div>
+          <Menu.Item className="home-button logo">
+            <Link title="Natura 2000" to="/natura2000">
+              <Icon name={n2kLogo} size={44} />
+            </Link>
+          </Menu.Item>
+          {this.state.isSdf ? (
+            <>
+              <button
+                to={this.props.pathname}
+                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="Deep dive"
+                className="item firstLevel deep-dive"
+              >
+                DEEP DIVE
+              </UniversalLink>
+            </>
+          ) : (
+            ''
+          )}
+
+          {!this.state.isSdf
+            ? this.props.items.map((item) => {
+                const flatUrl = flattenToAppURL(item.url);
+                const itemID = item.title.split(' ').join('-').toLowerCase();
+                return item.items && item.items.length && false ? (
+                  <Dropdown
+                    id={itemID}
+                    className={cx({
+                      item: true,
+                      firstLevel: true,
+                      menuActive: this.isActive(flatUrl),
+                    })}
+                    key={flatUrl}
+                    trigger={
+                      <Link to={flatUrl === '' ? '/' : flatUrl} key={flatUrl}>
+                        {item.title}
+                      </Link>
+                    }
+                    item
+                    simple
+                  >
+                    <Dropdown.Menu>
+                      {item.items.map((subitem) => {
+                        const flatSubUrl = flattenToAppURL(subitem.url);
+                        const subItemID = subitem.title
+                          .split(' ')
+                          .join('-')
+                          .toLowerCase();
+                        return (
+                          <Dropdown.Item key={flatSubUrl}>
+                            <div className="secondLevel-wrapper">
+                              <Link
+                                id={subItemID}
+                                to={flatSubUrl === '' ? '/' : flatSubUrl}
+                                key={flatSubUrl}
+                                className={
+                                  this.isActive(flatSubUrl)
+                                    ? 'item secondLevel menuActive'
+                                    : 'item secondLevel'
+                                }
+                              >
+                                {subitem.title}
+                              </Link>
+                            </div>
+                            {subitem.items && (
+                              <div className="submenu-wrapper">
+                                <div className="submenu">
+                                  {subitem.items.map((subsubitem) => {
+                                    const flatSubSubUrl = flattenToAppURL(
+                                      subsubitem.url,
+                                    );
+                                    return (
+                                      <Link
+                                        to={
+                                          flatSubSubUrl === ''
+                                            ? '/'
+                                            : flatSubSubUrl
+                                        }
+                                        title={subsubitem.title}
+                                        key={flatSubSubUrl}
+                                        className={
+                                          this.isActive(flatSubSubUrl)
+                                            ? 'item thirdLevel menuActive'
+                                            : 'item thirdLevel'
+                                        }
+                                      >
+                                        {subsubitem.title}
+                                      </Link>
+                                    );
+                                  })}
+                                </div>
+                              </div>
+                            )}
+                          </Dropdown.Item>
+                        );
+                      })}
+                    </Dropdown.Menu>
+                  </Dropdown>
+                ) : (
+                  <Link
+                    to={flatUrl === '' ? '/' : flatUrl}
+                    key={flatUrl}
+                    className={
+                      this.isActive(flatUrl)
+                        ? 'item menuActive firstLevel'
+                        : 'item firstLevel'
+                    }
+                  >
+                    {item.title}
+                  </Link>
+                );
+              })
+            : ''}
+          {!this.state.isSdf ? (
+            <Menu.Item className="firstLevel language-selector-wrapper">
+              <LanguageSelector navigation={this.props.navigation} />
+            </Menu.Item>
+          ) : (
+            ''
+          )}
+        </Menu>
+      </nav>
+    );
+  }
+}
+
+const getN2kItems = (items, localStorage) => {
+  if (__SERVER__) return [];
+  const currentLang = localStorage.get('N2K_LANGUAGE');
+  let navItems = [];
+  const natura2000 =
+    items.filter((item) => item.url === '/natura2000')?.[0]?.items || [];
+  natura2000.forEach((item) => {
+    const languageFolder = matchPath(item.url, {
+      path: config.settings.multilingualRoot,
+      exact: true,
+      strict: false,
+    });
+    if (languageFolder && languageFolder.params.lang === currentLang) {
+      navItems = [...navItems, ...(item.items || [])];
+    }
+    if (
+      languageFolder &&
+      !config.settings.supportedLanguages.includes(
+        languageFolder.params.lang,
+      ) &&
+      item.url !== '/natura2000/sites' &&
+      item.url !== '/natura2000/habitats' &&
+      item.url !== '/natura2000/species' &&
+      item.url !== '/natura2000/copyright-notice'
+    ) {
+      navItems.push(item);
+    }
+  });
+
+  return navItems;
+};
+
+export default compose(
+  withRouter,
+  withLocalStorage,
+  injectIntl,
+  connect(
+    (state, props) => {
+      return {
+        route_parameters: state.route_parameters,
+        navigation: state.navigation,
+        items: getN2kItems(state.navigation.items, props.localStorage),
+        userToken: state?.userSession?.token,
+      };
+    },
+    { getNavigation },
+  ),
+)(Navigation);

package/src/components/theme/Sitemap/Sitemap.jsx

@@ -0,0 +1,152 @@
+/**
+ * Login container.
+ * @module components/theme/Sitemap/Sitemap
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { matchPath } from 'react-router';
+import { asyncConnect } from '@plone/volto/helpers';
+import { defineMessages, injectIntl } from 'react-intl';
+import { Container } from 'semantic-ui-react';
+import { Helmet } from '@plone/volto/helpers';
+import { Link } from 'react-router-dom';
+import config from '@plone/volto/registry';
+import { withLocalStorage } from '@eeacms/volto-n2k/hocs';
+
+import { getNavigation } from '@plone/volto/actions';
+
+const messages = defineMessages({
+  Sitemap: {
+    id: 'Sitemap',
+    defaultMessage: 'Sitemap',
+  },
+});
+/**
+ * Sitemap class.
+ * @class Sitemap
+ * @extends Component
+ */
+class Sitemap extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    getNavigation: PropTypes.func.isRequired,
+  };
+
+  componentDidMount() {
+    const { settings } = config;
+    if (settings.isMultilingual) {
+      this.props.getNavigation(`${this.props.lang}`, 4);
+    } else {
+      this.props.getNavigation('', 4);
+    }
+  }
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+
+  renderItems = (items) => {
+    return (
+      <ul>
+        {items.map((item) => (
+          <li
+            key={item.url}
+            className={item.items?.length > 0 ? 'with-children' : ''}
+          >
+            <Link to={item.url}>{item.title}</Link>
+            {item.items && this.renderItems(item.items)}
+          </li>
+        ))}
+      </ul>
+    );
+  };
+  render() {
+    const { items } = this.props;
+    return (
+      <div id="page-sitemap">
+        <Helmet title={this.props.intl.formatMessage(messages.Sitemap)} />
+        <Container className="view-wrapper">
+          <h1>{this.props.intl.formatMessage(messages.Sitemap)} </h1>
+          {items && this.renderItems(items)}
+        </Container>
+      </div>
+    );
+  }
+}
+
+const getN2kItems = (items, localStorage) => {
+  if (__SERVER__) return [];
+  const currentLang = localStorage.get('N2K_LANGUAGE');
+  let navItems = [];
+  const natura2000 =
+    items.filter((item) => item.url === '/natura2000')?.[0]?.items || [];
+  natura2000.forEach((item) => {
+    const languageFolder = matchPath(item.url, {
+      path: config.settings.multilingualRoot,
+      exact: true,
+      strict: false,
+    });
+    if (languageFolder && languageFolder.params.lang === currentLang) {
+      navItems = [...navItems, ...(item.items || [])];
+    }
+    if (
+      languageFolder &&
+      !config.settings.supportedLanguages.includes(
+        languageFolder.params.lang,
+      ) &&
+      item.url !== '/natura2000/sites' &&
+      item.url !== '/natura2000/habitats' &&
+      item.url !== '/natura2000/species'
+    ) {
+      navItems.push(item);
+    }
+  });
+
+  return navItems;
+};
+
+export const __test__ = compose(
+  injectIntl,
+  connect(
+    (state) => ({
+      items: state.navigation.items,
+      lang: state.intl.locale,
+    }),
+    { getNavigation },
+  ),
+)(Sitemap);
+
+export default compose(
+  injectIntl,
+  withLocalStorage,
+  connect(
+    (state, props) => ({
+      items: getN2kItems(state.navigation.items, props.localStorage),
+      lang: state.intl.locale,
+    }),
+    { getNavigation },
+  ),
+  asyncConnect([
+    {
+      key: 'navigation',
+      promise: ({ location, store: { dispatch, getState } }) => {
+        const { settings } = config;
+        const lang = getState().intl.locale;
+        if (settings.isMultilingual) {
+          return __SERVER__ && dispatch(getNavigation(`${lang}`, 4));
+        } else {
+          return __SERVER__ && dispatch(getNavigation('', 4));
+        }
+      },
+    },
+  ]),
+)(Sitemap);

package/src/grid.js

@@ -0,0 +1,78 @@
+import codeSVG from '@plone/volto/icons/code.svg';
+
+export const gridSizes = {};
+
+export const variants = [
+  {
+    icon: codeSVG,
+    defaultData: {
+      gridSize: 12,
+      gridCols: ['twoFifths', 'threeFifths'],
+    },
+    title: '40 / 60',
+  },
+  {
+    icon: codeSVG,
+    defaultData: {
+      gridSize: 12,
+      gridCols: ['twoFifths'],
+    },
+    title: '40',
+  },
+  {
+    icon: codeSVG,
+    defaultData: {
+      gridSize: 12,
+      gridCols: ['halfWidthBig'],
+    },
+    title: '50',
+  },
+  {
+    icon: codeSVG,
+    defaultData: {
+      gridSize: 12,
+      gridCols: ['threeFifths'],
+    },
+    title: '60',
+  },
+  {
+    icon: codeSVG,
+    defaultData: {
+      gridSize: 12,
+      gridCols: ['twoThirds'],
+    },
+    title: '70',
+  },
+  {
+    icon: codeSVG,
+    defaultData: {
+      gridSize: 12,
+      gridCols: ['fourFifths'],
+    },
+    title: '80',
+  },
+  {
+    icon: codeSVG,
+    defaultData: {
+      gridSize: 12,
+      gridCols: ['full', 'halfWidth', 'halfWidth'],
+    },
+    title: '100 / 50 / 50',
+  },
+  {
+    icon: codeSVG,
+    defaultData: {
+      gridSize: 12,
+      gridCols: ['halfWidth', 'halfWidth', 'full'],
+    },
+    title: '50 / 50 / 100',
+  },
+  {
+    icon: codeSVG,
+    defaultData: {
+      gridSize: 12,
+      gridCols: ['full', 'halfWidth', 'halfWidth', 'full'],
+    },
+    title: '100 / 50 / 50 / 100',
+  },
+];