@eeacms/volto-n2k 0.1.1

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

@@ -0,0 +1,47 @@
+import { defineMessages } from 'react-intl';
+import { makeInlineElementPlugin } from 'volto-slate/components/ElementEditor';
+import { SlateSvgSchema } from './schema';
+import { withSlateSvg } from './extensions';
+import { SLATESVG } from './constants';
+import { SlateSvgElement } from './render';
+import triangleSVG from '@plone/volto/icons/triangle.svg';
+
+import './styles.less';
+
+const messages = defineMessages({
+  edit: {
+    id: 'Edit slate svg',
+    defaultMessage: 'Edit slate svg',
+  },
+  delete: {
+    id: 'Remove slate svg',
+    defaultMessage: 'Remove slate svg',
+  },
+});
+
+export default function install(config) {
+  const opts = {
+    pluginId: SLATESVG,
+    elementType: SLATESVG,
+    element: SlateSvgElement,
+    editSchema: SlateSvgSchema,
+    isInlineElement: true,
+    hasValue: () => true,
+    extensions: [withSlateSvg],
+    toolbarButtonIcon: triangleSVG,
+    title: 'Slate svg',
+    messages,
+  };
+  const [installSlateSvgEditor] = makeInlineElementPlugin(opts);
+  config = installSlateSvgEditor(config);
+
+  const { slate } = config.settings;
+
+  slate.toolbarButtons = [...(slate.toolbarButtons || []), 'slatesvg'];
+  slate.expandedToolbarButtons = [
+    ...(slate.expandedToolbarButtons || []),
+    'slatesvg',
+  ];
+
+  return config;
+}

package/src/components/manage/Blocks/SlateSVG/render.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+export const SlateSvgElement = ({
+  attributes,
+  children,
+  element,
+  mode,
+  ...rest
+}) => {
+  return mode === 'view' ? (
+    <>
+      <svg width="100%" height="100%" viewBox="0 0 280 280">
+        <foreignObject
+          width="100%"
+          height="100%"
+          position="absolute"
+          x="0"
+          y="0"
+        >
+          <div
+            {...attributes}
+            classname="slate-svg"
+            xmlns="http://www.w3.org/1999/xhtml"
+            style={{
+              position: 'absolute',
+              width: '100%',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+            }}
+          >
+            {children}
+          </div>
+        </foreignObject>
+      </svg>
+    </>
+  ) : (
+    <span {...attributes} className="slate-svg slate-svg-edit">
+      {children}
+    </span>
+  );
+};

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

@@ -0,0 +1,12 @@
+export const SlateSvgSchema = {
+  title: 'Slate svg',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: [],
+    },
+  ],
+  properties: {},
+  required: [],
+};

package/src/components/manage/Blocks/SlateSVG/styles.less

@@ -0,0 +1,6 @@
+// Editor styles
+.data-entity-edit-node {
+  padding: 0px 4px;
+  background-color: #d0e4d5;
+  border-radius: 4px;
+}

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

@@ -0,0 +1,109 @@
+import React from 'react';
+import { Container } from 'semantic-ui-react';
+import loadable from '@loadable/component';
+import { photoPlaceholders } from '@eeacms/volto-n2k/helpers';
+import cx from 'classnames';
+import './style.less';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+
+const Slider = loadable(() => import('react-slick'));
+
+const View = (props) => {
+  const slider = React.useRef(null);
+  const provider_data = props.provider_data || {};
+  const {
+    author = [],
+    common_name = [],
+    common_name_list = [],
+    id_eunis = [],
+    license = [],
+    picture_url = [],
+    scientific_name = [],
+    source = [],
+    source_url = [],
+    species_group_name = [],
+  } = provider_data;
+
+  const sliderSettings = {
+    adaptiveHeight: true,
+    autoplay: true,
+    autoplaySpeed: 5000,
+    arrows: true,
+    cssEase: 'ease',
+    dots: false,
+    speed: 500,
+    initialSlide: 0,
+    lazyLoad: 'ondemand',
+    swipe: true,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    touchMove: true,
+  };
+
+  if (!id_eunis[0]) return '';
+  return (
+    <div className="species-banner-details full-width">
+      <Container>
+        <div className="species-details">
+          <div className="species-metadata">
+            <h2 className="name">{scientific_name[0]}</h2>
+            <p className="info">
+              {common_name[0] ? common_name[0] + ' - ' : ''} {author[0]}
+            </p>
+            {common_name_list[0] ? (
+              <p className="info">Common names: {common_name_list[0]}</p>
+            ) : (
+              ''
+            )}
+          </div>
+          <div
+            className={cx('species-pictures', {
+              'with-slider': picture_url.length > 0 && picture_url[0],
+            })}
+          >
+            {picture_url.length > 0 && picture_url[0] ? (
+              <Slider {...sliderSettings} ref={slider}>
+                {picture_url.map((picture, index) => (
+                  <div key={`${picture}_${index}`} className="picture-wrapper">
+                    <img src={picture} alt={common_name[0]} />
+                    <div className="source">
+                      <a
+                        href={source_url[index]}
+                        title={'Picture source'}
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        {source[index]}
+                        {license[index] ? (
+                          <>
+                            ,<br />
+                            {license[index]}
+                          </>
+                        ) : (
+                          ''
+                        )}
+                      </a>
+                    </div>
+                  </div>
+                ))}
+              </Slider>
+            ) : (
+              <div className="picture-wrapper">
+                <img
+                  src={
+                    photoPlaceholders[species_group_name[0]] ||
+                    photoPlaceholders.default
+                  }
+                  alt={species_group_name[0]}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default View;

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

@@ -0,0 +1,17 @@
+import SpeciesBannerView from './View';
+import getSchema from './schema';
+
+export default (config) => {
+  config.blocks.blocksConfig.custom_connected_block = {
+    ...config.blocks.blocksConfig.custom_connected_block,
+    blocks: {
+      ...config.blocks.blocksConfig.custom_connected_block.blocks,
+      species_banner: {
+        view: SpeciesBannerView,
+        getSchema: getSchema,
+        title: 'Species banner',
+      },
+    },
+  };
+  return config;
+};

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

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

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

@@ -0,0 +1,115 @@
+div#view .species-banner-details .ui.container > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.species-banner-details {
+  padding: 1.5em 0;
+  background-color: #04a77d;
+  color: #fff;
+  font-family: 'RajdhaniB';
+
+  .species-details {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    justify-content: space-between;
+
+    @media only screen and (max-width: 800px) {
+      flex-flow: column;
+    }
+
+    .species-metadata {
+      .name {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        color: #fff;
+        font-family: inherit;
+        font-size: 54px;
+        line-height: 54px;
+        text-transform: uppercase;
+      }
+
+      .info {
+        margin-bottom: 1rem;
+        font-family: 'RajdhaniR';
+        font-size: 18px;
+        font-weight: 600;
+        line-height: 18px;
+      }
+    }
+
+    .slick-slider {
+      .slick-arrow {
+        display: block !important;
+      }
+    }
+
+    .species-pictures {
+      width: 400px;
+      height: 400px;
+      margin-bottom: 1rem;
+
+      .picture-wrapper {
+        position: relative;
+        display: flex !important;
+        overflow: hidden;
+        width: 400px;
+        height: 400px;
+        flex-flow: column;
+        align-items: center;
+        justify-content: center;
+        background-color: #000;
+        border-radius: 10px;
+
+        img {
+          width: auto;
+          max-width: 400px;
+          height: auto;
+          max-height: 400px;
+          filter: drop-shadow(-2px 2px 3px rgba(0, 0, 0, 0.4));
+        }
+
+        .source {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          padding: 0.5rem 1rem;
+          background-color: rgba(0, 0, 0, 0.7);
+          border-bottom-left-radius: 3px;
+          border-bottom-right-radius: 3px;
+
+          a {
+            margin-top: 1rem;
+            color: #fff;
+
+            &:hover {
+              color: #fff;
+              text-decoration: underline;
+            }
+          }
+        }
+      }
+
+      &:not(.with-slider) {
+        display: flex;
+        align-items: center;
+
+        .picture-wrapper {
+          height: fit-content;
+        }
+      }
+    }
+  }
+
+  .slick-slide:not(.slick-active) {
+    opacity: 0;
+    transition: opacity 0.6s;
+  }
+
+  .slick-slide {
+    opacity: 1;
+    transition: opacity 0.4s;
+  }
+}

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

@@ -0,0 +1,19 @@
+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> : ''}
+      {/* {Array(Math.max(0, rows))
+        .fill()
+        .map((_, row) => (
+         
+        ))} */}
+    </div>
+  );
+};
+
+export default View;

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

@@ -0,0 +1,17 @@
+import SpeciesClassification from './View';
+import getSchema from './schema';
+
+export default (config) => {
+  config.blocks.blocksConfig.custom_connected_block = {
+    ...config.blocks.blocksConfig.custom_connected_block,
+    blocks: {
+      ...config.blocks.blocksConfig.custom_connected_block.blocks,
+      species_classification: {
+        view: SpeciesClassification,
+        getSchema: getSchema,
+        title: 'Species classification',
+      },
+    },
+  };
+  return config;
+};

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

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

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

@@ -0,0 +1,3 @@
+// .species-classification {
+
+// }

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

@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from 'react';
+import { Message, Container } from 'semantic-ui-react';
+import Map from '@eeacms/volto-openlayers-map/Map';
+import { Interactions } from '@eeacms/volto-openlayers-map/Interactions';
+import { Controls } from '@eeacms/volto-openlayers-map/Controls';
+import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers';
+import { openlayers } from '@eeacms/volto-openlayers-map';
+import { getSpeciesDistributionURL } from './index';
+import './style.less';
+
+const View = (props) => {
+  const [options, setOptions] = React.useState({});
+  const [vectorSource, setVectorSource] = useState(null);
+  const { extent, format, proj, style, source } = openlayers;
+  const provider_data = props.provider_data || {};
+  const { code_2000 = [] } = provider_data;
+
+  useEffect(() => {
+    if (__SERVER__) return;
+    setVectorSource(new source.Vector());
+    /* eslint-disable-next-line */
+  }, []);
+
+  useEffect(() => {
+    if (__SERVER__ || !vectorSource || !code_2000[0]) return;
+    const esrijsonFormat = new format.EsriJSON();
+    // Get species location on sites
+    fetch(getSpeciesDistributionURL(code_2000[0])).then(function (response) {
+      if (response.status !== 200) return;
+      response.json().then(function (data) {
+        if (data.features && data.features.length > 0) {
+          const features = esrijsonFormat.readFeatures(data);
+          if (features.length > 0) {
+            vectorSource.addFeatures(features);
+            const vectorExtent = vectorSource.getExtent();
+            let size = extent.getSize(vectorExtent);
+            setOptions({
+              ...options,
+              extent: new extent.buffer(vectorExtent, size[0] * 0.1),
+            });
+          }
+        }
+      });
+    });
+    /* eslint-disable-next-line */
+  }, [code_2000?.[0]]);
+
+  if (__SERVER__ || !vectorSource) return '';
+  return (
+    <div className="species-distribution-wrapper">
+      <div className="species-distribution">
+        <Map
+          view={{
+            center: proj.fromLonLat([20, 50]),
+            showFullExtent: true,
+            zoom: 5,
+          }}
+          {...options}
+        >
+          <Layers>
+            <Layer.Tile zIndex={0} />
+            <Layer.Vector
+              source={vectorSource}
+              style={
+                new style.Style({
+                  fill: new style.Fill({
+                    color: 'rgba(255,255,255,0.4)',
+                  }),
+                  stroke: new style.Stroke({
+                    color: '#04A77D',
+                    width: 3,
+                  }),
+                })
+              }
+              zIndex={1}
+            />
+          </Layers>
+          <Controls attribution={true} />
+          <Interactions pointer={false} select={false} />
+        </Map>
+      </div>
+      <Container className="map-info-notice">
+        <Message>
+          <p>
+            The designations employed and the presentation of material on this
+            map do not imply the expression of any opinion whatsoever on the
+            part of the European Union concerning the legal status of any
+            country, territory, city or area or of its authorities, or
+            concerning the delimitation of its frontiers or boundaries.
+          </p>
+        </Message>
+      </Container>
+    </div>
+  );
+};
+
+export default View;

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

@@ -0,0 +1,23 @@
+import SpeciesDistributionView from './View';
+import getSchema from './schema';
+
+export function getSpeciesDistributionURL(code_2000) {
+  return encodeURI(
+    `https://bio.discomap.eea.europa.eu/arcgis/rest/services/Article17/HabitatsDirective_ART_17_WMS_version_2020_08_public/MapServer/3/query?f=json&where=speciescode LIKE '%${code_2000.toUpperCase()}%'&returnGeometry=true&spatialRel=esriSpatialRelIntersects&outFields=speciescode&outSR=102100`,
+  );
+}
+
+export default (config) => {
+  config.blocks.blocksConfig.custom_connected_block = {
+    ...config.blocks.blocksConfig.custom_connected_block,
+    blocks: {
+      ...config.blocks.blocksConfig.custom_connected_block.blocks,
+      species_distribution: {
+        view: SpeciesDistributionView,
+        getSchema: getSchema,
+        title: 'Species distribution map',
+      },
+    },
+  };
+  return config;
+};

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

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

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

@@ -0,0 +1,5 @@
+.species-distribution {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0;
+}

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

@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from 'react';
+import { Message, Container } from 'semantic-ui-react';
+import Map from '@eeacms/volto-openlayers-map/Map';
+import { Interactions } from '@eeacms/volto-openlayers-map/Interactions';
+import { Controls } from '@eeacms/volto-openlayers-map/Controls';
+import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers';
+import { openlayers } from '@eeacms/volto-openlayers-map';
+import { getSpeciesProtectedSitesURL } from './index';
+import './style.less';
+
+const View = (props) => {
+  const [options, setOptions] = React.useState({});
+  const [vectorSource, setVectorSource] = useState(null);
+  const { extent, format, proj, style, source } = openlayers;
+  const provider_data = props.provider_data || {};
+  const { code_2000 = [] } = provider_data;
+
+  useEffect(() => {
+    if (__SERVER__) return;
+    setVectorSource(new source.Vector());
+    /* eslint-disable-next-line */
+  }, []);
+
+  useEffect(() => {
+    if (__SERVER__ || !vectorSource || !code_2000[0]) return;
+    const esrijsonFormat = new format.EsriJSON();
+    // Get species protected sites
+    fetch(getSpeciesProtectedSitesURL(code_2000[0])).then(function (response) {
+      if (response.status !== 200) return;
+      response.json().then(function (data) {
+        if (data.features && data.features.length > 0) {
+          const features = esrijsonFormat.readFeatures(data);
+          if (features.length > 0) {
+            vectorSource.addFeatures(features);
+            const vectorExtent = vectorSource.getExtent();
+            let size = extent.getSize(vectorExtent);
+            setOptions({
+              ...options,
+              extent: new extent.buffer(vectorExtent, size[0] * 0.1),
+            });
+          }
+        }
+      });
+    });
+    /* eslint-disable-next-line */
+  }, [code_2000?.[0]]);
+
+  if (__SERVER__ || !vectorSource) return '';
+  return (
+    <div className="species-protected-sites-wrapper">
+      <div className="species-protected-sites">
+        <Map
+          view={{
+            center: proj.fromLonLat([20, 50]),
+            showFullExtent: true,
+            zoom: 5,
+          }}
+          {...options}
+        >
+          <Layers>
+            <Layer.Tile zIndex={0} />
+            <Layer.VectorImage
+              source={vectorSource}
+              style={
+                new style.Style({
+                  fill: new style.Fill({
+                    color: 'rgba(255,255,255,0.4)',
+                  }),
+                  stroke: new style.Stroke({
+                    color: '#04A77D',
+                    width: 3,
+                  }),
+                })
+              }
+              zIndex={1}
+            />
+          </Layers>
+          <Controls attribution={true} />
+          <Interactions pointer={false} select={false} />
+        </Map>
+      </div>
+      <Container className="map-info-notice">
+        <Message>
+          <p>
+            The designations employed and the presentation of material on this
+            map do not imply the expression of any opinion whatsoever on the
+            part of the European Union concerning the legal status of any
+            country, territory, city or area or of its authorities, or
+            concerning the delimitation of its frontiers or boundaries.
+          </p>
+        </Message>
+      </Container>
+    </div>
+  );
+};
+
+export default View;