@eeacms/volto-n2k 0.1.15 → 1.0.0

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

@@ -3,7 +3,7 @@
  * @module components/theme/Header/Header
  */
 
-import React, { useEffect, useContext } from 'react';
+import React, { useEffect, useContext, useMemo } from 'react';
 import { matchPath, withRouter } from 'react-router';
 import { Container, Sticky } from 'semantic-ui-react';
 import { connect } from 'react-redux';
@@ -12,7 +12,7 @@ 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';
+import { StickyContext } from '@eeacms/volto-bise/components';
 
 const Navbar = (props) => {
   const currentLang = props.localStorage.get('N2K_LANGUAGE');
@@ -26,6 +26,8 @@ const Navbar = (props) => {
               {currentLang ? (
                 <Navigation
                   isSticky={props.isSticky}
+                  isRoot={props.isRoot}
+                  isExplorer={props.isExplorer}
                   pathname={props.pathname}
                 />
               ) : (
@@ -47,37 +49,66 @@ const Navbar = (props) => {
 const Header = (props) => {
   const [isSticky, setIsSticky] = React.useState(false);
   const { stickyRef } = useContext(StickyContext);
-  const isRoot = !!matchPath(props.pathname, {
-    path: config.settings.multilingualRoot,
-    exact: true,
-    strict: false,
-  });
+  const isRoot = useMemo(
+    () =>
+      matchPath(props.pathname, {
+        path: config.settings.n2k.multilingualRoot,
+        exact: true,
+        strict: false,
+      }),
+    [props.pathname],
+  );
+
+  const isExplorer = useMemo(
+    () =>
+      (isRoot &&
+        !config.settings.n2k.supportedLanguages.includes(isRoot.params.lang)) ||
+      matchPath(props.pathname, {
+        path: '/natura2000/explore-natura2000/*',
+        exact: true,
+        strict: false,
+      }),
+    [props.pathname, isRoot],
+  );
 
   useEffect(() => {
     if (!props.localStorage.get('N2K_LANGUAGE')) {
-      props.localStorage.set('N2K_LANGUAGE', config.settings.defaultLanguage);
+      props.localStorage.set(
+        'N2K_LANGUAGE',
+        config.settings.n2k.defaultLanguage,
+      );
     }
     /* eslint-disable-next-line */
   }, []);
 
-  return isRoot ? (
-    ''
+  return isRoot || isExplorer ? (
+    <div className="ui basic segment sticky-header-wrapper" role="banner">
+      <Navbar
+        {...props}
+        isSticky={false}
+        isRoot={isRoot}
+        isExplorer={isExplorer}
+      />
+    </div>
   ) : (
-    <>
-      <Sticky
-        context={stickyRef}
-        className="ui basic segment sticky-header-wrapper"
-        role="banner"
-        onStick={() => {
-          setIsSticky(true);
-        }}
-        onUnstick={() => {
-          setIsSticky(false);
-        }}
-      >
-        <Navbar {...props} isSticky={isSticky} />
-      </Sticky>
-    </>
+    <Sticky
+      context={stickyRef}
+      className="ui basic segment sticky-header-wrapper"
+      role="banner"
+      onStick={() => {
+        setIsSticky(true);
+      }}
+      onUnstick={() => {
+        setIsSticky(false);
+      }}
+    >
+      <Navbar
+        {...props}
+        isSticky={isSticky}
+        isRoot={isRoot}
+        isExplorer={isExplorer}
+      />
+    </Sticky>
   );
 };
 

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

@@ -9,12 +9,14 @@ import { useSelector } from 'react-redux';
 import cx from 'classnames';
 import { langmap } from '@plone/volto/helpers';
 import { flattenToAppURL } from '@plone/volto/helpers';
-import { Dropdown } from 'semantic-ui-react';
+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);
@@ -23,24 +25,24 @@ const LanguageSelector = (props) => {
   const pathname = props.location.pathname;
   const currentLang = localStorage.get('N2K_LANGUAGE');
   const matchRoot = matchPath(pathname, {
-    path: settings.multilingualRoot,
+    path: settings.n2k.multilingualRoot,
     exact: true,
     strict: false,
   });
   const matchChild = matchPath(pathname, {
-    path: settings.multilingualPath,
+    path: settings.n2k.multilingualPath,
     exact: true,
     strict: false,
   });
   const match = matchRoot || matchChild;
   const hasMultilingualSupport =
-    match && settings.supportedLanguages.includes(match.params.lang);
+    match && settings.n2k.supportedLanguages.includes(match.params.lang);
   const translations = hasMultilingualSupport
-    ? settings.supportedLanguages.map((lang) => {
+    ? settings.n2k.supportedLanguages.map((lang) => {
         return {
           path: matchRoot
             ? `/natura2000/${lang}`
-            : generatePath(settings.multilingualPath, {
+            : generatePath(settings.n2k.multilingualPath, {
                 ...match.params,
                 lang,
               }),
@@ -48,20 +50,66 @@ const LanguageSelector = (props) => {
         };
       })
     : [];
-  const supportedLanguagesOptions = settings.supportedLanguages.map((lang) => ({
-    key: lang,
-    value: lang,
-    text: langmap[lang].nativeName,
-  }));
+  const supportedLanguagesOptions = settings.n2k.supportedLanguages.map(
+    (lang) => ({
+      key: lang,
+      value: lang,
+      text: langmap[lang].nativeName,
+    }),
+  );
 
   return (
     <div className={cx('language-selector', props.className)}>
+      {/* <Header.TopDropdownMenu
+        id="language-switcher"
+        className="item"
+        text={`${language.toUpperCase()}`}
+        mobileText={`${language.toUpperCase()}`}
+        icon={
+          <Image src={globeIcon} alt="language dropdown globe icon"></Image>
+        }
+        viewportWidth={width}
+      >
+        <ul
+          className="wrapper language-list"
+          role="listbox"
+          aria-label="language switcher"
+        >
+          {eea.languages.map((item, index) => (
+            <Dropdown.Item
+              as="li"
+              key={index}
+              text={
+                <span>
+                  {item.name}
+                  <span className="country-code">
+                    {item.code.toUpperCase()}
+                  </span>
+                </span>
+              }
+              onClick={() => {
+                const translation = find(translations, {
+                  language: item.code,
+                });
+                const to = translation
+                  ? flattenToAppURL(translation['@id'])
+                  : `/${item.code}`;
+                setLanguage(item.code);
+                history.push(to);
+              }}
+            ></Dropdown.Item>
+          ))}
+        </ul>
+      </Header.TopDropdownMenu> */}
       <Dropdown
         aria-label="Language selector"
         disabled={content.get.loading}
         placeholder="Select a language"
-        value={currentLang}
+        text={currentLang}
         scrolling
+        icon={
+          <Image src={globeIcon} alt="language dropdown globe icon"></Image>
+        }
         options={supportedLanguagesOptions}
         onChange={(e, data) => {
           const lang = data.value;
@@ -78,7 +126,7 @@ const LanguageSelector = (props) => {
             }
           }
 
-          if (config.settings.supportedLanguages.includes(lang)) {
+          if (config.settings.n2k.supportedLanguages.includes(lang)) {
             localStorage.set('N2K_LANGUAGE', lang);
           }
         }}

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

@@ -12,7 +12,11 @@ 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 {
+  getBaseUrl,
+  flattenToAppURL,
+  hasApiExpander,
+} from '@plone/volto/helpers';
 import { UniversalLink, Icon } from '@plone/volto/components';
 import qs from 'querystring';
 import { getNavigation } from '@plone/volto/actions';
@@ -89,6 +93,10 @@ class Navigation extends Component {
     ).isRequired,
   };
 
+  static defaultProps = {
+    token: null,
+  };
+
   /**
    * Constructor
    * @method constructor
@@ -113,10 +121,13 @@ class Navigation extends Component {
    * @returns {undefined}
    */
   componentDidMount() {
-    this.props.getNavigation(
-      getBaseUrl(this.props.pathname),
-      config.settings.navDepth,
-    );
+    const { settings } = config;
+    if (!hasApiExpander('navigation', getBaseUrl(this.props.pathname))) {
+      this.props.getNavigation(
+        getBaseUrl(this.props.pathname),
+        settings.navDepth,
+      );
+    }
     this.setState({
       isSdf: this.isSdf(),
     });
@@ -134,20 +145,23 @@ class Navigation extends Component {
   };
 
   /**
-   * Component did update
-   * @method componentDidUpdate
-   * @param {Object} prevProps Prev properties
+   * Component will receive props
+   * @method componentWillReceiveProps
+   * @param {Object} nextProps Next properties
    * @returns {undefined}
    */
-  componentDidUpdate(prevProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { settings } = config;
     if (
-      prevProps.pathname !== this.props.pathname ||
-      prevProps.userToken !== this.props.userToken
+      nextProps.pathname !== this.props.pathname ||
+      nextProps.token !== this.props.token
     ) {
-      this.props.getNavigation(
-        getBaseUrl(this.props.pathname),
-        config.settings.navDepth,
-      );
+      if (!hasApiExpander('navigation', getBaseUrl(this.props.pathname))) {
+        this.props.getNavigation(
+          getBaseUrl(nextProps.pathname),
+          settings.navDepth,
+        );
+      }
       this.closeMobileMenu();
     }
 
@@ -298,7 +312,7 @@ class Navigation extends Component {
             ''
           )}
 
-          {!this.state.isSdf
+          {!this.state.isSdf && !this.props.isRoot && !this.props.isExplorer
             ? this.props.items.map((item) => {
                 const flatUrl = flattenToAppURL(item.url);
                 const itemID = item.title.split(' ').join('-').toLowerCase();
@@ -391,7 +405,7 @@ class Navigation extends Component {
                 );
               })
             : ''}
-          {!this.state.isSdf ? (
+          {!this.state.isSdf && !this.props.isExplorer ? (
             <Menu.Item className="firstLevel language-selector-wrapper">
               <LanguageSelector navigation={this.props.navigation} />
             </Menu.Item>
@@ -412,7 +426,7 @@ const getN2kItems = (items, localStorage) => {
     items.filter((item) => item.url === '/natura2000')?.[0]?.items || [];
   natura2000.forEach((item) => {
     const languageFolder = matchPath(item.url, {
-      path: config.settings.multilingualRoot,
+      path: config.settings.n2k.multilingualRoot,
       exact: true,
       strict: false,
     });
@@ -421,7 +435,7 @@ const getN2kItems = (items, localStorage) => {
     }
     if (
       languageFolder &&
-      !config.settings.supportedLanguages.includes(
+      !config.settings.n2k.supportedLanguages.includes(
         languageFolder.params.lang,
       ) &&
       item.url !== '/natura2000/sites' &&
@@ -443,10 +457,10 @@ export default compose(
   connect(
     (state, props) => {
       return {
+        token: state.userSession.token,
         route_parameters: state.route_parameters,
         navigation: state.navigation,
         items: getN2kItems(state.navigation.items, props.localStorage),
-        userToken: state?.userSession?.token,
       };
     },
     { getNavigation },

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

@@ -91,7 +91,7 @@ const getN2kItems = (items, localStorage) => {
     items.filter((item) => item.url === '/natura2000')?.[0]?.items || [];
   natura2000.forEach((item) => {
     const languageFolder = matchPath(item.url, {
-      path: config.settings.multilingualRoot,
+      path: config.settings.n2k.multilingualRoot,
       exact: true,
       strict: false,
     });
@@ -100,7 +100,7 @@ const getN2kItems = (items, localStorage) => {
     }
     if (
       languageFolder &&
-      !config.settings.supportedLanguages.includes(
+      !config.settings.n2k.supportedLanguages.includes(
         languageFolder.params.lang,
       ) &&
       item.url !== '/natura2000/sites' &&

package/src/index.js

@@ -70,35 +70,37 @@ const applyConfig = (config) => {
 
   config.settings = {
     ...config.settings,
-    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',
-    ],
+    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 = {

package/src/less/styles.less

@@ -347,24 +347,22 @@ body.grey-bg {
                   position: absolute;
                   top: 0;
                   right: 0;
-                  margin: 4px 0;
+                  margin: 0;
+                  margin-bottom: 0;
                   transform: translateX(100%) translateY(0);
 
                   &:hover {
                     background-color: transparent !important;
                   }
 
-                  &::before {
-                    position: absolute;
-                    top: 4px;
-                    left: 50%;
-                    display: block !important;
-                    width: 6px;
-                    height: 6px;
-                    background-color: #3b7f02;
-                    border-radius: 100%;
-                    content: '';
-                    transform: translateX(-50%);
+                  .language-selector .ui.dropdown {
+                    display: flex;
+                    flex-direction: row-reverse;
+                    align-items: center;
+
+                    img {
+                      margin-right: 0.25rem;
+                    }
                   }
                 }
               }

package/src/static/global-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-2.29-2.333A17.9 17.9 0 0 1 8.027 13H4.062a8.008 8.008 0 0 0 5.648 6.667zM10.03 13c.151 2.439.848 4.73 1.97 6.752A15.905 15.905 0 0 0 13.97 13h-3.94zm9.908 0h-3.965a17.9 17.9 0 0 1-1.683 6.667A8.008 8.008 0 0 0 19.938 13zM4.062 11h3.965A17.9 17.9 0 0 1 9.71 4.333 8.008 8.008 0 0 0 4.062 11zm5.969 0h3.938A15.905 15.905 0 0 0 12 4.248 15.905 15.905 0 0 0 10.03 11zm4.259-6.667A17.9 17.9 0 0 1 15.973 11h3.965a8.008 8.008 0 0 0-5.648-6.667z" fill="rgba(46,62,76,1)"/></svg>