@eeacms/volto-n2k 1.0.22 → 1.0.24

package/CHANGELOG.md

@@ -4,12 +4,31 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-### [1.0.22](https://github.com/eea/volto-n2k/compare/1.0.21...1.0.22) - 29 March 2023
+### [1.0.24](https://github.com/eea/volto-n2k/compare/1.0.23...1.0.24) - 26 April 2023
+
+#### :house: Internal changes
+
+- style: fix margin-bottom position in habitat-banner-details and species-banner-details [Miu Razvan - [`4e78d69`](https://github.com/eea/volto-n2k/commit/4e78d6927829f18a91f6b409ee670b01d538dba6)]
+
+#### :hammer_and_wrench: Others
+
+- update [Miu Razvan - [`4347ffc`](https://github.com/eea/volto-n2k/commit/4347ffc93743dbc9d5514fe1f7d6e39b73abd0c8)]
+- update [Miu Razvan - [`4e8317f`](https://github.com/eea/volto-n2k/commit/4e8317ffbe459d5bc15092fa9f43255707a77e37)]
+### [1.0.23](https://github.com/eea/volto-n2k/compare/1.0.22...1.0.23) - 12 April 2023
+
+#### :house: Internal changes
+
+- style(HabitatsBanner): reorganize CSS properties and remove unused CSS properties [Miu Razvan - [`682ccc6`](https://github.com/eea/volto-n2k/commit/682ccc630e7f83d8084ec25cd5782315330af4ee)]
 
 #### :hammer_and_wrench: Others
 
-- update [Miu Razvan - [`e9a407f`](https://github.com/eea/volto-n2k/commit/e9a407fe51e6f0664f4d2d8aafd32042c9650302)]
-- update [Miu Razvan - [`930c7d3`](https://github.com/eea/volto-n2k/commit/930c7d3af8c8541dd83616b4131f0c1639495d70)]
+- update [Miu Razvan - [`3b1f4bb`](https://github.com/eea/volto-n2k/commit/3b1f4bb0ab47baae9bf316c86f4ccaa8494a1a4d)]
+- fix navigation icons svg [tedw87 - [`233255d`](https://github.com/eea/volto-n2k/commit/233255d5dcb655ef12e0ffbfdc64619f186884a5)]
+- update [Miu Razvan - [`9009bc2`](https://github.com/eea/volto-n2k/commit/9009bc2bb08ddaf160bcacd57f9eefec4a487319)]
+- update [Miu Razvan - [`baac43c`](https://github.com/eea/volto-n2k/commit/baac43cabbd61c44ae6513af774bffb0030a0450)]
+- add habitats carousel [tedw87 - [`41861d1`](https://github.com/eea/volto-n2k/commit/41861d172884f04ef0b53ea4035c1051224dcf4e)]
+### [1.0.22](https://github.com/eea/volto-n2k/compare/1.0.21...1.0.22) - 29 March 2023
+
 ### [1.0.21](https://github.com/eea/volto-n2k/compare/1.0.20...1.0.21) - 22 March 2023
 
 ### [1.0.20](https://github.com/eea/volto-n2k/compare/1.0.19...1.0.20) - 22 March 2023

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-n2k",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "description": "volto-n2k: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -33,7 +33,8 @@
     "react-stickynode": "^4.0.0",
     "react-use-localstorage": "^3.5.3",
     "resize-observer-polyfill": "1.5.1",
-    "slick-carousel": "1.8.1"
+    "slick-carousel": "1.8.1",
+    "swiper": "9.1.1"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.10.0",

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

@@ -18,7 +18,7 @@ export default (config) => {
       addPermission: [],
       view: [],
     },
-    blockHasOwnFocusManagement: true,
+    blockHasOwnFocusManagement: false,
   };
   return config;
 };

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

@@ -107,8 +107,8 @@ const View = (props) => {
           />
         </Map>
       </div>
-      <Container className="map-info-notice">
-        <Message>
+      <Container>
+        <Message className="map-info-notice shadow-none">
           <p>
             The designations employed and the presentation of material on this
             map do not imply the expression of any opinion whatsoever on the

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

@@ -2,7 +2,7 @@
   margin-left: 1rem;
 
   &.no-data:not(.edit) {
-    margin-top: -1.5rem;
+    margin-top: -1em;
     margin-left: 0;
   }
 

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

@@ -165,8 +165,8 @@ const View = (props) => {
           />
         </Map>
       </div>
-      <Container className="map-info-notice">
-        <Message style={{ color: '#005248' }}>
+      <Container>
+        <Message className="map-info-notice" style={{ color: '#005248' }}>
           <p>
             The designations employed and the presentation of material on this
             map do not imply the expression of any opinion whatsoever on the

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

@@ -160,8 +160,8 @@ const View = (props) => {
           />
         </Map>
       </div>
-      <Container className="map-info-notice">
-        <Message style={{ color: '#005248' }}>
+      <Container>
+        <Message className="map-info-notice" style={{ color: '#005248' }}>
           <p>
             The designations employed and the presentation of material on this
             map do not imply the expression of any opinion whatsoever on the

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

@@ -163,8 +163,8 @@ const View = (props) => {
           />
         </Map>
       </div>
-      <Container className="map-info-notice">
-        <Message style={{ color: '#005248' }}>
+      <Container>
+        <Message className="map-info-notice" style={{ color: '#005248' }}>
           <p>
             The designations employed and the presentation of material on this
             map do not imply the expression of any opinion whatsoever on the

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

@@ -95,8 +95,8 @@ const View = (props) => {
           <Interactions pointer={false} select={false} />
         </Map>
       </div>
-      <Container className="map-info-notice">
-        <Message>
+      <Container>
+        <Message className="map-info-notice">
           <p>
             The designations employed and the presentation of material on this
             map do not imply the expression of any opinion whatsoever on the

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

@@ -95,8 +95,8 @@ const View = (props) => {
           <Interactions pointer={false} select={false} />
         </Map>
       </div>
-      <Container className="map-info-notice">
-        <Message>
+      <Container>
+        <Message className="map-info-notice">
           <p>
             The designations employed and the presentation of material on this
             map do not imply the expression of any opinion whatsoever on the

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

@@ -0,0 +1,49 @@
+import React, { useMemo } from 'react';
+import { compose } from 'redux';
+import { SidebarPortal } from '@plone/volto/components';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+import { VisibilitySensor } from '@eeacms/volto-datablocks/components';
+import { connectToProviderData } from '@eeacms/volto-datablocks/hocs';
+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>
+    </>
+  );
+};
+
+const EditWrapper = compose(
+  connectToProviderData((props) => ({
+    provider_url: props.data?.provider_url,
+  })),
+)(Edit);
+
+export default (props) => {
+  return (
+    <VisibilitySensor>
+      <EditWrapper {...props} />
+    </VisibilitySensor>
+  );
+};

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

@@ -1,30 +1,56 @@
-import React from 'react';
-import { Container } from 'semantic-ui-react';
+import React, { useRef, useState } from 'react';
+import { compose } from 'redux';
+import cx from 'classnames';
+import loadable from '@loadable/component';
+import { Icon } from '@plone/volto/components';
+import { VisibilitySensor } from '@eeacms/volto-datablocks/components';
+import { connectToMultipleProviders } from '@eeacms/volto-datablocks/hocs';
+import arrowLeft from '@eeacms/volto-n2k/icons/arrow-left.svg';
+import arrowRight from '@eeacms/volto-n2k/icons/arrow-right.svg';
 import './style.less';
 
-const View = (props) => {
-  const provider_data = props.provider_data || {};
+const SwiperLoader = loadable.lib(() => import('swiper'));
+const SwiperReactLoader = loadable.lib(() => import('swiper/react'));
+
+const _View = (props) => {
+  const swiperEl = useRef();
+  const previewEl = useRef();
+  const [activeSlide, setActiveSlide] = useState(0);
+  const { providers = [] } = props.data;
+  const habitat = props.providers_data?.[providers[0]?.provider_url] || {};
+  const habitat_pictures =
+    props.providers_data?.[providers[1]?.provider_url] || {};
+
   const {
-    code_2000 = [],
+    code_2000,
     // habitat_description = [],
     // habitat_type = [],
     // number_countries = [],
     // number_sites = [],
-    scientific_name = [],
-  } = provider_data;
+    scientific_name,
+  } = habitat;
+
+  const pictures = habitat_pictures?.['WebURL'] || [];
+  const pictures_length = pictures?.length;
+  // const picture_names = habitat_pictures?.['filename'] || [];
+  // const copyright = habitat_pictures?.['attribution_copyright'] || [];
+
+  if (!code_2000 && props.mode === 'edit') {
+    return 'Habitat banner block (code_2000 undefined)';
+  }
+  if (!code_2000) return null;
+  if (activeSlide) {
+  }
 
-  if (!code_2000[0]) return '';
   return (
-    <div className="habitat-banner-details full-width">
-      <Container>
-        <div className="habitat-details">
-          <div className="habitat-metadata">
-            <h2 className="name">{scientific_name[0]}</h2>
-            <p className="info">
-              Habitats Directive Annex I code&nbsp;&nbsp;&nbsp;{code_2000[0]}
-            </p>
-            <br />
-            {/* {number_sites[0] && (
+    <div className="habitat-banner-details">
+      <div className="habitat-details">
+        <div className="habitat-metadata">
+          <h2 className="name">{scientific_name[0]}</h2>
+          <p className="info">
+            Habitats Directive Annex I code&nbsp;&nbsp;&nbsp;{code_2000[0]}
+          </p>
+          {/* {number_sites[0] && (
               <>
                 <h3 style={{ marginBottom: '0.15rem' }}>{number_sites[0]}</h3>
                 <h4 className="radjhan-normal">
@@ -32,11 +58,148 @@ const View = (props) => {
                 </h4>
               </>
             )} */}
-          </div>
         </div>
-      </Container>
+        {pictures_length > 0 && (
+          <div
+            className={cx('carousel', {
+              'one-slide': pictures_length === 1,
+              'two-slides': pictures_length === 2,
+              'three-slides': pictures_length > 2,
+            })}
+          >
+            <div className="arrows">
+              <button
+                className="swiper-button image-swiper-button-prev"
+                onClick={() => {
+                  swiperEl.current.slidePrev();
+                  if (previewEl.current?.[0]) {
+                    previewEl.current[0].slidePrev();
+                  }
+                  if (previewEl.current?.[1]) {
+                    previewEl.current[1].slidePrev();
+                  }
+                  setActiveSlide(swiperEl.current.realIndex);
+                }}
+              >
+                <Icon
+                  className="icon-left"
+                  color="#000"
+                  name={arrowLeft}
+                  size="32px"
+                />
+              </button>
+              <button
+                className="swiper-button image-swiper-button-next"
+                onClick={() => {
+                  swiperEl.current.slideNext();
+                  if (previewEl.current?.[0]) {
+                    previewEl.current[0].slideNext();
+                  }
+                  if (previewEl.current?.[1]) {
+                    previewEl.current[1].slideNext();
+                  }
+                  setActiveSlide(swiperEl.current.realIndex);
+                }}
+              >
+                <Icon
+                  className="icon-right"
+                  color="#000"
+                  name={arrowRight}
+                  size="32px"
+                />
+              </button>
+              {/* <p title={`${source[activeSlide]} - ${license[activeSlide]}`}>
+                {source[activeSlide]} - {license[activeSlide]}
+              </p> */}
+            </div>
+            <SwiperLoader>
+              {() => {
+                return (
+                  <SwiperReactLoader>
+                    {({ Swiper, SwiperSlide }) => {
+                      return (
+                        <>
+                          <Swiper
+                            loop={true}
+                            initialSlide={0}
+                            slidesPerView={1}
+                            spaceBetween={0}
+                            onBeforeInit={(swiper) => {
+                              swiperEl.current = swiper;
+                            }}
+                          >
+                            {pictures.map((source, index) => (
+                              <SwiperSlide>
+                                <img src={source} alt={pictures[index]} />
+                              </SwiperSlide>
+                            ))}
+                          </Swiper>
+                          {pictures_length > 1 && (
+                            <Swiper
+                              className="preview preview-one"
+                              loop={true}
+                              initialSlide={1}
+                              slidesPerView={1}
+                              spaceBetween={0}
+                              onBeforeInit={(swiper) => {
+                                if (!previewEl.current) {
+                                  previewEl.current = [];
+                                }
+                                previewEl.current[0] = swiper;
+                              }}
+                            >
+                              {pictures.map((source, index) => (
+                                <SwiperSlide>
+                                  <img src={source} alt={pictures[index]} />
+                                </SwiperSlide>
+                              ))}
+                            </Swiper>
+                          )}
+                          {pictures_length > 2 && (
+                            <Swiper
+                              className="preview preview-two"
+                              loop={true}
+                              initialSlide={2}
+                              slidesPerView={1}
+                              spaceBetween={0}
+                              onBeforeInit={(swiper) => {
+                                if (!previewEl.current) {
+                                  previewEl.current = [];
+                                }
+                                previewEl.current[1] = swiper;
+                              }}
+                            >
+                              {pictures.map((source, index) => (
+                                <SwiperSlide>
+                                  <img src={source} alt={pictures[index]} />
+                                </SwiperSlide>
+                              ))}
+                            </Swiper>
+                          )}
+                        </>
+                      );
+                    }}
+                  </SwiperReactLoader>
+                );
+              }}
+            </SwiperLoader>
+          </div>
+        )}
+      </div>
     </div>
   );
 };
 
-export default View;
+const View = compose(
+  connectToMultipleProviders((props) => ({
+    providers: props.data?.providers,
+  })),
+)(_View);
+
+export default (props) => {
+  return (
+    <VisibilitySensor Placeholder={() => <div>loading....&nbsp;</div>}>
+      <View {...props} />
+    </VisibilitySensor>
+  );
+};

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

@@ -1,17 +1,24 @@
-import HabitatsBannerView from './View';
-import getSchema from './schema';
+import worldSVG from '@plone/volto/icons/world.svg';
+import Edit from './Edit';
+import View from './View';
 
 export default (config) => {
-  config.blocks.blocksConfig.custom_connected_block = {
-    ...config.blocks.blocksConfig.custom_connected_block,
-    blocks: {
-      ...config.blocks.blocksConfig.custom_connected_block.blocks,
-      habitats_banner: {
-        view: HabitatsBannerView,
-        getSchema: getSchema,
-        title: 'Habitat banner',
-      },
+  config.blocks.blocksConfig.habitats_banner = {
+    id: 'habitats_banner',
+    title: 'Habitats banner',
+    icon: worldSVG,
+    group: 'natura_2000',
+    edit: Edit,
+    view: View,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    blocks: {},
+    security: {
+      addPermission: [],
+      view: [],
     },
+    blockHasOwnFocusManagement: false,
   };
   return config;
 };

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

@@ -1,18 +1,77 @@
+const SourceSchema = {
+  title: 'Source',
+
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['source', 'source_link'],
+    },
+  ],
+
+  properties: {
+    source: {
+      type: 'string',
+      title: 'Source',
+    },
+    source_link: {
+      type: 'string',
+      title: 'Link',
+    },
+  },
+
+  required: ['source'],
+};
+
+const DataProvidersSchema = {
+  title: 'Data provider',
+  fieldsets: [{ id: 'default', title: 'Default', fields: ['provider_url'] }],
+  properties: {
+    provider_url: {
+      title: 'Provider url',
+      widget: 'object_by_path',
+    },
+  },
+};
+
 const getSchema = (props) => {
   return {
-    title: 'Habitats banner',
-
+    title: 'Habitats Banner',
     fieldsets: [
       {
         id: 'default',
         title: 'Default',
-        fields: [],
+        fields: ['providers', 'allowedParams'],
+      },
+      {
+        id: 'sources',
+        title: 'Sources',
+        fields: ['sources'],
       },
     ],
 
-    properties: {},
+    properties: {
+      providers: {
+        title: 'Data provider',
+        schema: DataProvidersSchema,
+        widget: 'object_list',
+      },
+      allowedParams: {
+        title: 'Allowed params',
+        type: 'array',
+        creatable: true,
+        items: {
+          choices: [],
+        },
+      },
+      sources: {
+        title: 'Sources',
+        schema: SourceSchema,
+        widget: 'object_list',
+      },
+    },
 
-    required: [],
+    required: ['url'],
   };
 };