@eeacms/volto-n2k 1.0.28 → 1.0.30

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

@@ -69,9 +69,9 @@ const View = (props) => {
             center: proj.fromLonLat([20, 50]),
             showFullExtent: true,
             zoom: 5,
+            ...(options.extent ? { extent: options.extent } : {}),
           }}
           pixelRatio={1}
-          {...options}
         >
           <Layers>
             <Layer.Tile source={tileWMSSources[0]} zIndex={0} />

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

@@ -69,9 +69,9 @@ const View = (props) => {
             center: proj.fromLonLat([20, 50]),
             showFullExtent: true,
             zoom: 5,
+            ...(options.extent ? { extent: options.extent } : {}),
           }}
           pixelRatio={1}
-          {...options}
         >
           <Layers>
             <Layer.Tile source={tileWMSSources[0]} zIndex={0} />

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

@@ -10,21 +10,24 @@ const View = (props) => {
   return (
     <div className="connected-labeled-list">
       {props.mode === 'edit' ? <p>Connected labeled list</p> : ''}
-      <ul className={data.theme || 'default'}>
-        {Array(Math.max(0, columns))
-          .fill()
-          .map((_, column) => {
-            return (
-              <li key={`connected-list-${column}`}>
-                <span>
-                  {(data.values || [])
-                    .map((value) => provider_data[value.field]?.[column])
-                    .join(data.separator || '')}
-                </span>
-              </li>
-            );
-          })}
-      </ul>
+      {!!columns && (
+        <ul className={data.theme || 'default'}>
+          {Array(Math.max(0, columns))
+            .fill()
+            .map((_, column) => {
+              return (
+                <li key={`connected-list-${column}`}>
+                  <span>
+                    {(data.values || [])
+                      .map((value) => provider_data[value.field]?.[column])
+                      .join(data.separator || '')}
+                  </span>
+                </li>
+              );
+            })}
+        </ul>
+      )}
+      {!columns && <p className="no-results">-</p>}
     </div>
   );
 };

package/src/components/manage/Blocks/LabeledList/style.less

@@ -4,6 +4,8 @@
 @element: custom;
 
 .connected-labeled-list {
+  margin-bottom: 1rem;
+
   ul {
     padding-left: 0;
     margin-left: -0.5rem;

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

@@ -3,9 +3,13 @@ import { connect } from 'react-redux';
 import { Grid, Button } from 'semantic-ui-react';
 import { isEmpty } from 'lodash';
 import EditBlockWrapper from './EditBlockWrapper';
-import { BlocksForm, Icon } from '@plone/volto/components';
 import { emptyBlocksForm } from '@plone/volto/helpers';
-import { SidebarPortal, UniversalLink } from '@plone/volto/components';
+import {
+  SidebarPortal,
+  UniversalLink,
+  BlocksForm,
+  Icon,
+} 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';

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

@@ -20,33 +20,40 @@ const View = (props) => {
   return (
     <div className="connected-list">
       {props.mode === 'edit' ? <p>Connected list</p> : ''}
-      <ul className={data.theme || 'default'}>
-        {Array(Math.max(0, columns))
-          .fill()
-          .map((_, column) => {
-            return (
-              <React.Fragment key={`connected-list-${column}`}>
-                <li>
-                  {(data.labeled ?? true) && data.label ? (
-                    <p className="label">{provider_data[data.label][column]}</p>
-                  ) : (
-                    ''
-                  )}
-                  {data.value ? (
-                    <p className="value">{provider_data[data.value][column]}</p>
-                  ) : (
-                    ''
-                  )}
-                </li>
-                {column < columns - 1 && data.theme === 'theme_1' && (
+      {!!columns && (
+        <ul className={data.theme || 'default'}>
+          {Array(Math.max(0, columns))
+            .fill()
+            .map((_, column) => {
+              return (
+                <React.Fragment key={`connected-list-${column}`}>
                   <li>
-                    <Icon name={arrowSVG} size="64px" />
+                    {(data.labeled ?? true) && data.label ? (
+                      <p className="label">
+                        {provider_data[data.label][column]}
+                      </p>
+                    ) : (
+                      ''
+                    )}
+                    {data.value ? (
+                      <p className="value">
+                        {provider_data[data.value][column]}
+                      </p>
+                    ) : (
+                      ''
+                    )}
                   </li>
-                )}
-              </React.Fragment>
-            );
-          })}
-      </ul>
+                  {column < columns - 1 && data.theme === 'theme_1' && (
+                    <li>
+                      <Icon name={arrowSVG} size="64px" />
+                    </li>
+                  )}
+                </React.Fragment>
+              );
+            })}
+        </ul>
+      )}
+      {!columns && <p className="no-results">-</p>}
     </div>
   );
 };

package/src/components/manage/Blocks/List/style.less

@@ -4,6 +4,8 @@
 @element: custom;
 
 .connected-list {
+  margin-bottom: 1rem;
+
   ul {
     padding-left: 0;
     margin-left: -1rem;

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

@@ -0,0 +1,34 @@
+import React, { useMemo } from 'react';
+import { SidebarPortal } from '@plone/volto/components';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+import getSchema from './schema';
+import View from './View';
+import './style.less';
+
+const Edit = (props) => {
+  const schema = useMemo(() => getSchema(props), [props]);
+
+  return (
+    <>
+      <View {...props} mode="edit" />
+
+      <SidebarPortal selected={props.selected}>
+        <BlockDataForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            props.onChangeBlock(props.block, {
+              ...props.data,
+              [id]: value,
+            });
+          }}
+          onChangeBlock={props.onChangeBlock}
+          formData={props.data}
+          block={props.block}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default Edit;

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

@@ -0,0 +1,165 @@
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import isArray from 'lodash/isArray';
+import isString from 'lodash/isString';
+import Map from '@eeacms/volto-openlayers-map/Map';
+import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers';
+import { openlayers } from '@eeacms/volto-openlayers-map';
+
+let dynamicLayerDefinition = `
+[
+  {
+    "id":2,
+    "source":{
+      "type":"mapLayer",
+      "mapLayerId":2
+    },
+    "definitionExpression":"MS = '{country}'",
+    "drawingInfo":{
+      "renderer":{
+        "type":"uniqueValue",
+        "field1":"MS",
+        "uniqueValueInfos":[{
+          "value":"{country}",
+          "label":"{country}",
+          "symbol":{
+            "color":[40,149,136,100],
+            "outline":{
+              "color":[40,149,136,100],
+              "width":0.75,
+              "type":"esriSLS",
+              "style":"esriSLSSolid"
+            },
+            "type":"esriSFS",
+            "style":"esriSFSSolid"
+          }
+        }
+      ]
+    },
+    "showLabels":false
+  },
+  "minScale":0,
+  "maxScale":0
+}
+]`;
+
+const View = (props) => {
+  const mapRef = useRef();
+  const [sources, setSources] = useState([]);
+  const [tiles, setTiles] = useState([]);
+  const [extent, setExtent] = useState(null);
+  const { proj, source } = openlayers;
+
+  const country = useMemo(() => {
+    const query = (props.properties.data_query || []).filter(
+      (query) => query.i === 'iso2',
+    )[0];
+    if (!query) return null;
+    const value = query.v;
+    if (isArray(value)) {
+      return value[0];
+    }
+    if (isString(value)) {
+      return value;
+    }
+    return null;
+  }, [props.properties]);
+
+  useEffect(() => {
+    setTiles([
+      new source.XYZ({
+        url:
+          'https://server.arcgisonline.com/ArcGIS/rest/services/' +
+          'Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}',
+      }),
+      new source.XYZ({
+        url:
+          'https://server.arcgisonline.com/ArcGIS/rest/services/' +
+          'Elevation/World_Hillshade/MapServer/tile/{z}/{y}/{x}',
+      }),
+    ]);
+    /* eslint-disable-next-line */
+  }, []);
+
+  useEffect(() => {
+    setSources([
+      new source.ImageArcGISRest({
+        ratio: 1,
+        params: {
+          LAYERS: '2',
+          dynamicLayers: dynamicLayerDefinition
+            .replace(/(\r\n|\n|\r)/gm, '')
+            .replaceAll(' ', '')
+            .replaceAll('{country}', country),
+        },
+        url:
+          'https://bio.discomap.eea.europa.eu/arcgis/rest/services/ProtectedSites/Natura2000Sites/MapServer',
+      }),
+    ]);
+    fetch(
+      `https://geoenrich.arcgis.com/arcgis/rest/services/World/geoenrichmentserver/Geoenrichment/countries/${country}?f=pjson`,
+    )
+      .then(function (response) {
+        return response.json();
+      })
+      .then(async (data) => {
+        const { fromExtent } = await import('ol/geom/Polygon');
+        if (data && data.countries.length > 0) {
+          const countryInfo = data.countries[0];
+          const countryExtent = [
+            countryInfo.defaultExtent.xmin,
+            countryInfo.defaultExtent.ymin,
+            countryInfo.defaultExtent.xmax,
+            countryInfo.defaultExtent.ymax,
+          ];
+
+          const reprojectedExtent = proj.transformExtent(
+            countryExtent,
+            'EPSG:4326',
+            'EPSG:3857',
+          );
+
+          const polygon = fromExtent(reprojectedExtent);
+          polygon.scale(1.2);
+
+          setExtent(polygon.getExtent());
+        }
+      })
+      .catch(function () {
+        // handle the error
+        setExtent(null);
+      });
+    /* eslint-disable-next-line */
+  }, [country]);
+
+  return (
+    <div className="n2k-country-profile-map">
+      <Map
+        ref={(map) => {
+          if (map) {
+            mapRef.current = map;
+          }
+        }}
+        view={{
+          center: [0, 0],
+          extent: extent || [
+            -6319125.804807394,
+            3070702.923644739,
+            9584655.106275197,
+            12091128.659149397,
+          ],
+          zoom: 2,
+          showFullExtent: true,
+        }}
+        pixelRatio={1}
+      >
+        <Layers>
+          <Layer.Tile source={tiles[1]} zIndex={0} opacity={1} />
+          <Layer.Tile source={tiles[0]} zIndex={1} opacity={0.7} />
+          <Layer.Image source={sources[0]} zIndex={2} />
+        </Layers>
+      </Map>
+    </div>
+  );
+};
+
+export default View;

package/src/components/manage/Blocks/N2KCountryProfileMap/index.js

@@ -0,0 +1,24 @@
+import worldSVG from '@plone/volto/icons/world.svg';
+import Edit from './Edit';
+import View from './View';
+
+export default (config) => {
+  config.blocks.blocksConfig.n2k_country_profile_map = {
+    id: 'n2k_country_profile_map',
+    title: 'N2K country profile map',
+    icon: worldSVG,
+    group: 'custom_blocks',
+    edit: Edit,
+    view: View,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    blocks: {},
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    blockHasOwnFocusManagement: false,
+  };
+  return config;
+};

package/src/components/manage/Blocks/N2KCountryProfileMap/schema.js

@@ -0,0 +1,19 @@
+const getSchema = () => {
+  return {
+    title: 'N2K country profile map',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [],
+      },
+    ],
+
+    properties: {},
+
+    required: [],
+  };
+};
+
+export default getSchema;

package/src/components/manage/Blocks/N2KCountryProfileMap/style.less

@@ -0,0 +1,240 @@
+@type: extra;
+@element: custom;
+
+@import (multiple, reference, optional) '../../theme.config';
+
+@import 'swiper/swiper.less';
+
+@{view} {
+  .species-banner-details {
+    &::before {
+      .full-width();
+      position: absolute;
+      z-index: -1;
+    }
+
+    .carousel {
+      .half-width(960px);
+
+      @media @mobile {
+        width: calc(@pageFullWidth - 2rem) !important;
+      }
+    }
+  }
+}
+
+@{edit} {
+  .species-banner-details {
+    &::before {
+      .full-width-edit();
+      position: absolute;
+      z-index: -1;
+    }
+
+    .carousel {
+      .half-width-edit(960px);
+
+      @media @mobile {
+        width: calc(@pageFullWidthEdit - 2rem) !important;
+      }
+    }
+  }
+}
+
+div#view .species-banner-details .ui.container > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.species-banner-details {
+  position: relative;
+  padding: 0;
+  margin-bottom: 1rem;
+  color: #fff !important;
+  font-family: 'RajdhaniB', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+
+  &::before {
+    display: block;
+    height: 100%;
+    background-color: #00a390;
+    content: '';
+  }
+
+  .species-details {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .species-metadata {
+      display: flex;
+      width: 50%;
+      height: 320px !important;
+      flex: 0 0 50%;
+      flex-direction: column;
+      justify-content: center;
+      word-wrap: break-word;
+
+      .name {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        color: #fff !important;
+        font-family: inherit;
+
+        font-family: RajdhaniB, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+        font-size: 54px;
+        line-height: 54px;
+        text-transform: uppercase;
+
+        > * {
+          font-family: RajdhaniB, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+        }
+      }
+
+      h3 {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        color: #fff !important;
+        font-family: inherit;
+        font-size: 32px;
+        line-height: 32px;
+        text-transform: uppercase;
+      }
+
+      h4 {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        color: #fff !important;
+        font-family: inherit;
+        font-size: 32px;
+        line-height: 32px;
+        text-transform: uppercase;
+      }
+
+      .info,
+      .info > * {
+        font-family: 'RajdhaniR', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+        font-size: 18px;
+        font-weight: 600;
+        line-height: 18px;
+
+        a {
+          color: #fff;
+
+          &:hover {
+            color: #fff;
+          }
+        }
+      }
+    }
+
+    .carousel {
+      display: flex;
+      height: 320px;
+
+      p {
+        font-family: 'RajdhaniB', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+      }
+
+      img {
+        width: 100%;
+      }
+
+      &.one-slide .swiper {
+        width: 100%;
+      }
+
+      &.two-slides .swiper {
+        width: 50%;
+
+        @media @mobile {
+          width: 100%;
+
+          &.preview.preview-one {
+            display: none;
+          }
+        }
+      }
+
+      &.three-slides .swiper {
+        width: 33.33%;
+
+        @media @tablet {
+          width: 50%;
+
+          &.preview.preview-two {
+            display: none;
+          }
+        }
+
+        @media @mobile {
+          width: 100%;
+
+          &.preview.preview-two,
+          &.preview.preview-one {
+            display: none;
+          }
+        }
+      }
+
+      .swiper {
+        &.preview .swiper-slide {
+          filter: grayscale(100%);
+        }
+
+        img {
+          display: block;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+
+      .arrows {
+        position: absolute;
+        z-index: 2;
+        bottom: 0;
+        left: 0;
+        display: flex;
+        width: 100%;
+        align-items: center;
+
+        button {
+          padding: 0;
+          border: none;
+          margin: 0;
+          background-color: transparent;
+        }
+
+        .icon {
+          display: block;
+          width: 32px;
+          background-color: #fff;
+          cursor: pointer;
+        }
+
+        p {
+          overflow: hidden;
+          width: calc(100% - 64px);
+          padding: 0.25rem 0.25rem 0.25rem 1rem;
+          margin: 0;
+          backdrop-filter: brightness(0.5);
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+
+    @media @mobile {
+      flex-flow: column;
+
+      .species-metadata {
+        width: 100%;
+        margin-top: 2rem;
+      }
+
+      .carousel {
+        margin: 0 1rem 1rem 1rem;
+      }
+    }
+  }
+}

package/src/components/manage/Blocks/SiteProtectedSpecies/style.less

@@ -13,7 +13,7 @@ div#view .ui.container.species-wrapper > * {
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
-  font-family: 'RajdhaniB';
+  font-family: 'RajdhaniB', sans-serif;
 
   .species-container {
     position: absolute;

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

@@ -60,7 +60,6 @@ const View = (props) => {
     /* eslint-disable-next-line */
   }, [vectorSource, site_code?.[0]]);
 
-  if (__SERVER__ || !vectorSource) return '';
   return (
     <div className="site-shape-wrapper full-width">
       <div className="site-shape">
@@ -69,9 +68,9 @@ const View = (props) => {
             center: proj.fromLonLat([20, 50]),
             showFullExtent: true,
             zoom: 5,
+            ...(options.extent ? { extent: options.extent } : {}),
           }}
           pixelRatio={1}
-          {...options}
         >
           <Layers>
             <Layer.Tile source={tileWMSSources[0]} zIndex={0} />

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

@@ -1,9 +1,8 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { Container, Pagination, Grid } from 'semantic-ui-react';
-import { getObjectByIndex } from '@eeacms/volto-n2k/helpers';
+import { getObjectByIndex, photoPlaceholders } from '@eeacms/volto-n2k/helpers';
 import { Filters } from './Filters';
-import { photoPlaceholders } from '@eeacms/volto-n2k/helpers';
 import { getPopulationString, getLabelString } from './utils';
 
 import './style.less';