@eeacms/volto-n2k 1.0.29 → 1.0.30

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/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';

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

@@ -1,9 +1,7 @@
 import React from 'react';
-// import { UniversalLink } from '@plone/volto/components';
 import './style.less';
 
 const View = (props) => {
-  // const provider_data = props.provider_data || {};
   return (
     <div className="species-classification">
       {props.mode === 'edit' ? <p>Species classification</p> : ''}

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

@@ -74,9 +74,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/SpeciesProtectedSites/View.jsx

@@ -70,9 +70,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/StackedBarChart/Chart.jsx

@@ -26,18 +26,12 @@ function Chart(props) {
   } = props;
 
   useEffect(() => {
-    // dispose();
     if (xDomain.length && yDomain.length) {
       makeAxis();
     }
     /* eslint-disable-next-line */
   }, [JSON.stringify(xDomain), JSON.stringify(yDomain)]);
 
-  // const dispose = () => {
-  //   const svg = select(svgRef.current);
-  //   svg.selectAll('*').remove();
-  // };
-
   const makeAxis = () => {
     const svg = select(svgRef.current);
     //  Scales

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

@@ -8,10 +8,9 @@ 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 { asyncConnect, Helmet } 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';

package/src/helpers.js

@@ -53,12 +53,12 @@ export function sortBy(obj, property, order = 'ASC') {
 }
 
 export const componentToHex = (c) => {
-  var hex = parseInt(c).toString(16);
+  const hex = parseInt(c).toString(16);
   return hex.length === 1 ? '0' + hex : hex;
 };
 
 function hexToRgb(hex) {
-  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
   return result
     ? [
         parseInt(result[1], 16),
@@ -86,7 +86,7 @@ export const getContrastColor = (rgb) => {
 };
 
 export const adjustBrightness = (col, amt) => {
-  var usePound = false;
+  let usePound = false;
 
   if (col.includes('rgb(')) {
     const rgb = col

package/src/index.js

@@ -42,13 +42,13 @@ import installSpeciesDistribution from './components/manage/Blocks/SpeciesDistri
 import installSpeciesProtectedSites from './components/manage/Blocks/SpeciesProtectedSites';
 import installStackedBarChart from './components/manage/Blocks/StackedBarChart';
 import installTilesImages from './components/manage/Blocks/TilesImages';
+import installN2KCountryProfileMap from './components/manage/Blocks/N2KCountryProfileMap';
+import installCDDACountryProfileMap from './components/manage/Blocks/CDDACountryProfileMap';
 
 import { LINK } from '@plone/volto-slate/constants';
 
 import { gridSizes, variants } from './grid';
 
-// import './less/styles.less';
-
 Array.prototype.sortByProperty = function (property, order = 'ASC') {
   return this.sort((a, b) => {
     if (a[property] < b[property]) return order === 'ASC' ? -1 : 1;
@@ -158,6 +158,8 @@ const applyConfig = (config) => {
     installSpeciesProtectedSites,
     installStackedBarChart,
     installTilesImages,
+    installN2KCountryProfileMap,
+    installCDDACountryProfileMap,
   ].reduce((acc, apply) => apply(acc), config);
 };