@eeacms/volto-n2k 0.1.15 → 1.0.1

package/src/components/manage/Blocks/HabitatDistribution/View.jsx

@@ -11,6 +11,7 @@ import './style.less';
 const View = (props) => {
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
+  const [tileWMSSources, setTileWMSSources] = useState([]);
   const { extent, format, proj, style, source } = openlayers;
   const provider_data = props.provider_data || {};
   const { code_2000 = [] } = provider_data;
@@ -18,6 +19,17 @@ const View = (props) => {
   useEffect(() => {
     if (__SERVER__) return;
     setVectorSource(new source.Vector());
+    setTileWMSSources([
+      new source.TileWMS({
+        url: 'https://gisco-services.ec.europa.eu/maps/service',
+        params: {
+          LAYERS: 'OSMPositronComposite',
+          TILED: true,
+        },
+        serverType: 'geoserver',
+        transition: 0,
+      }),
+    ]);
     /* eslint-disable-next-line */
   }, []);
 
@@ -55,10 +67,11 @@ const View = (props) => {
             showFullExtent: true,
             zoom: 5,
           }}
+          pixelRatio={1}
           {...options}
         >
           <Layers>
-            <Layer.Tile zIndex={0} />
+            <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
             <Layer.Vector
               source={vectorSource}
               style={

package/src/components/manage/Blocks/HabitatProtectedSites/View.jsx

@@ -11,6 +11,7 @@ import './style.less';
 const View = (props) => {
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
+  const [tileWMSSources, setTileWMSSources] = useState([]);
   const { extent, format, proj, style, source } = openlayers;
   const provider_data = props.provider_data || {};
   const { code_2000 = [] } = provider_data;
@@ -18,6 +19,17 @@ const View = (props) => {
   useEffect(() => {
     if (__SERVER__) return;
     setVectorSource(new source.Vector());
+    setTileWMSSources([
+      new source.TileWMS({
+        url: 'https://gisco-services.ec.europa.eu/maps/service',
+        params: {
+          LAYERS: 'OSMPositronComposite',
+          TILED: true,
+        },
+        serverType: 'geoserver',
+        transition: 0,
+      }),
+    ]);
     /* eslint-disable-next-line */
   }, []);
 
@@ -55,10 +67,11 @@ const View = (props) => {
             showFullExtent: true,
             zoom: 5,
           }}
+          pixelRatio={1}
           {...options}
         >
           <Layers>
-            <Layer.Tile zIndex={0} />
+            <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
             <Layer.VectorImage
               source={vectorSource}
               style={

package/src/components/manage/Blocks/Landing/DefalutView.jsx

@@ -4,7 +4,6 @@ import { generatePath } from 'react-router';
 import { Grid } from 'semantic-ui-react';
 import { UniversalLink } from '@plone/volto/components';
 import { withLocalStorage } from '@eeacms/volto-n2k/hocs';
-import LanguageSelector from '@eeacms/volto-n2k/components/theme/LanguageSelector/LanguageSelector';
 import hiker from './images/hiker.webp';
 import { tiles, tileProps, getStyle } from './index';
 
@@ -19,21 +18,6 @@ const DefaultView = (props) => {
       >
         <Grid className="landing-page" container columns="12">
           <Grid.Row>
-            <Grid.Column
-              {...{
-                mobile: 12,
-                tablet: 12,
-                computer: 12,
-                largeScreen: 12,
-                widescreen: 12,
-              }}
-              style={{ zIndex: 1, marginBottom: '1rem' }}
-            >
-              <LanguageSelector
-                navigation={props.navigation}
-                className="landingpage-variation"
-              />
-            </Grid.Column>
             <Grid.Column
               className="landing-page-description"
               widescreen="6"

package/src/components/manage/Blocks/Landing/Edit.jsx

@@ -9,7 +9,6 @@ import { SidebarPortal, UniversalLink } from '@plone/volto/components';
 import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
 import config from '@plone/volto/registry';
 import settingsSVG from '@plone/volto/icons/settings.svg';
-import LanguageSelector from '@eeacms/volto-n2k/components/theme/LanguageSelector/LanguageSelector';
 import DefaultView from './DefalutView';
 import getSchema from './schema';
 import hiker from './images/hiker.webp';
@@ -100,21 +99,6 @@ const Edit = (props) => {
         >
           <Grid className="landing-page" container columns="12">
             <Grid.Row>
-              <Grid.Column
-                {...{
-                  mobile: 12,
-                  tablet: 12,
-                  computer: 12,
-                  largeScreen: 12,
-                  widescreen: 12,
-                }}
-                style={{ zIndex: 1, marginBottom: '1rem' }}
-              >
-                <LanguageSelector
-                  navigation={props.navigation}
-                  className="landingpage-variation"
-                />
-              </Grid.Column>
               <Grid.Column
                 className="landing-page-description"
                 widescreen="6"

package/src/components/manage/Blocks/Landing/View.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { Grid } from 'semantic-ui-react';
 import { RenderBlocks, UniversalLink } from '@plone/volto/components';
-import LanguageSelector from '@eeacms/volto-n2k/components/theme/LanguageSelector/LanguageSelector';
 import DefaultView from './DefalutView';
 import hiker from './images/hiker.webp';
 import { tileProps, getStyle } from './index';
@@ -23,21 +22,6 @@ const View = (props) => {
     >
       <Grid className="landing-page" container columns="12">
         <Grid.Row>
-          <Grid.Column
-            {...{
-              mobile: 12,
-              tablet: 12,
-              computer: 12,
-              largeScreen: 12,
-              widescreen: 12,
-            }}
-            style={{ zIndex: 1, marginBottom: '1rem' }}
-          >
-            <LanguageSelector
-              navigation={props.navigation}
-              className="landingpage-variation"
-            />
-          </Grid.Column>
           <Grid.Column
             className="landing-page-description"
             widescreen="6"

package/src/components/manage/Blocks/NavigationAnchors/View.jsx

@@ -6,7 +6,7 @@ import qs from 'querystring';
 import cx from 'classnames';
 import { UniversalLink } from '@plone/volto/components';
 import { withHashLink } from 'volto-slate/hooks';
-import { StickyContext } from '~/components';
+import { StickyContext } from '@eeacms/volto-bise/components';
 import './styles.less';
 
 const formatLink = (str, obj) => {

package/src/components/manage/Blocks/SiteShape/View.jsx

@@ -11,6 +11,7 @@ import './style.less';
 const View = (props) => {
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
+  const [tileWMSSources, setTileWMSSources] = useState([]);
   const { extent, format, proj, style, source } = openlayers;
   const provider_data = props.provider_data || {};
   const { site_code = [] } = provider_data;
@@ -18,6 +19,17 @@ const View = (props) => {
   useEffect(() => {
     if (__SERVER__) return;
     setVectorSource(new source.Vector());
+    setTileWMSSources([
+      new source.TileWMS({
+        url: 'https://gisco-services.ec.europa.eu/maps/service',
+        params: {
+          LAYERS: 'OSMPositronComposite',
+          TILED: true,
+        },
+        serverType: 'geoserver',
+        transition: 0,
+      }),
+    ]);
     /* eslint-disable-next-line */
   }, []);
 
@@ -55,10 +67,11 @@ const View = (props) => {
             showFullExtent: true,
             zoom: 5,
           }}
+          pixelRatio={1}
           {...options}
         >
           <Layers>
-            <Layer.Tile zIndex={0} />
+            <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
             <Layer.Vector
               source={vectorSource}
               style={

package/src/components/manage/Blocks/SpeciesDistribution/View.jsx

@@ -11,6 +11,7 @@ import './style.less';
 const View = (props) => {
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
+  const [tileWMSSources, setTileWMSSources] = useState([]);
   const { extent, format, proj, style, source } = openlayers;
   const provider_data = props.provider_data || {};
   const { code_2000 = [] } = provider_data;
@@ -18,6 +19,17 @@ const View = (props) => {
   useEffect(() => {
     if (__SERVER__) return;
     setVectorSource(new source.Vector());
+    setTileWMSSources([
+      new source.TileWMS({
+        url: 'https://gisco-services.ec.europa.eu/maps/service',
+        params: {
+          LAYERS: 'OSMPositronComposite',
+          TILED: true,
+        },
+        serverType: 'geoserver',
+        transition: 0,
+      }),
+    ]);
     /* eslint-disable-next-line */
   }, []);
 
@@ -55,10 +67,11 @@ const View = (props) => {
             showFullExtent: true,
             zoom: 5,
           }}
+          pixelRatio={1}
           {...options}
         >
           <Layers>
-            <Layer.Tile zIndex={0} />
+            <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
             <Layer.Vector
               source={vectorSource}
               style={

package/src/components/manage/Blocks/SpeciesProtectedSites/View.jsx

@@ -11,6 +11,7 @@ import './style.less';
 const View = (props) => {
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
+  const [tileWMSSources, setTileWMSSources] = useState([]);
   const { extent, format, proj, style, source } = openlayers;
   const provider_data = props.provider_data || {};
   const { code_2000 = [] } = provider_data;
@@ -18,6 +19,17 @@ const View = (props) => {
   useEffect(() => {
     if (__SERVER__) return;
     setVectorSource(new source.Vector());
+    setTileWMSSources([
+      new source.TileWMS({
+        url: 'https://gisco-services.ec.europa.eu/maps/service',
+        params: {
+          LAYERS: 'OSMPositronComposite',
+          TILED: true,
+        },
+        serverType: 'geoserver',
+        transition: 0,
+      }),
+    ]);
     /* eslint-disable-next-line */
   }, []);
 
@@ -55,10 +67,11 @@ const View = (props) => {
             showFullExtent: true,
             zoom: 5,
           }}
+          pixelRatio={1}
           {...options}
         >
           <Layers>
-            <Layer.Tile zIndex={0} />
+            <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
             <Layer.VectorImage
               source={vectorSource}
               style={

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

@@ -9,12 +9,12 @@ const MultilingualRedirector = (props) => {
   const { settings } = config;
   const { pathname, children } = props;
   const currentLanguage =
-    cookie.load('N2K_LANGUAGE') || settings.defaultLanguage;
-  const redirectToLanguage = settings.supportedLanguages.includes(
+    cookie.load('N2K_LANGUAGE') || settings.n2k.defaultLanguage;
+  const redirectToLanguage = settings.n2k.supportedLanguages.includes(
     currentLanguage,
   )
     ? currentLanguage
-    : settings.defaultLanguage;
+    : settings.n2k.defaultLanguage;
   const dispatch = useDispatch();
 
   React.useEffect(() => {

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,68 @@ 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">
+      <div className="ui sticky">
+        <Navbar
+          {...props}
+          isSticky={false}
+          isRoot={isRoot}
+          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} />
-      </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,11 +50,13 @@ 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)}>
@@ -60,10 +64,14 @@ const LanguageSelector = (props) => {
         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) => {
+        value={currentLang}
+        onChange={(_, data) => {
           const lang = data.value;
           const translation = translations.filter(
             (item) => item.lang === lang,
@@ -78,7 +86,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
@@ -102,7 +110,6 @@ class Navigation extends Component {
     this.state = {
       isMobileMenuOpen: false,
       isSdf: false,
-      language: this.props.localStorage.get('N2K_LANGUAGE'),
     };
     this.container = React.createRef();
   }
@@ -113,10 +120,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 +144,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();
     }
 
@@ -227,6 +240,8 @@ class Navigation extends Component {
       ...(this.props.route_parameters || {}),
       ...qs.parse(this.props.location.search.replace('?', '')),
     };
+    const currentLang = this.props.localStorage.get('N2K_LANGUAGE');
+
     return (
       <nav
         className={cx('navigation', this.props.className || '')}
@@ -261,7 +276,7 @@ class Navigation extends Component {
             />
           </div>
           <Menu.Item className="home-button logo">
-            <Link title="Natura 2000" to={`/natura2000/${this.state.language}`}>
+            <Link title="Natura 2000" to={`/natura2000/${currentLang}`}>
               <Icon name={n2kLogo} size={44} />
             </Link>
           </Menu.Item>
@@ -298,7 +313,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 +406,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 +427,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 +436,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 +458,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 },