@eeacms/volto-n2k 1.0.21 → 1.0.23

package/CHANGELOG.md

@@ -4,11 +4,23 @@ 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.21](https://github.com/eea/volto-n2k/compare/1.0.20...1.0.21) - 22 March 2023
+### [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
 
-- use latest stable version of volto [Claudia Ifrim - [`99ea551`](https://github.com/eea/volto-n2k/commit/99ea551a8f35729791982a59f015a5c894ea2db3)]
+- 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
 
 ### [1.0.19](https://github.com/eea/volto-n2k/compare/1.0.18...1.0.19) - 7 March 2023

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-n2k",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "description": "volto-n2k: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -16,15 +16,13 @@
     "@eeacms/volto-datablocks",
     "@eeacms/volto-openlayers-map",
     "@eeacms/volto-resize-helper",
-    "@eeacms/volto-tabs-block",
-    "@eeacms/volto-bise"
+    "@eeacms/volto-tabs-block"
   ],
   "repository": {
     "type": "git",
     "url": "git@github.com:eea/volto-n2k.git"
   },
   "dependencies": {
-    "@eeacms/volto-bise": "*",
     "@eeacms/volto-datablocks": "*",
     "@eeacms/volto-openlayers-map": "*",
     "@eeacms/volto-resize-helper": "*",
@@ -35,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/index.js

@@ -1,3 +1,3 @@
-export { default as Header } from '@eeacms/volto-n2k/components/theme/Header/Header';
-export { default as Footer } from '@eeacms/volto-n2k/components/theme/Footer/Footer';
+// export { default as Header } from '@eeacms/volto-n2k/components/theme/Header/Header';
+// export { default as Footer } from '@eeacms/volto-n2k/components/theme/Footer/Footer';
 export { default as Sitemap } from '@eeacms/volto-n2k/components/theme/Sitemap/Sitemap';

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/CarouselHorizontal/HorizontalView.jsx

@@ -11,6 +11,7 @@ import cx from 'classnames';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import '@eeacms/volto-tabs-block/less/carousel.less';
+import './styles.less';
 
 const Slider = loadable(() => import('react-slick'));
 
@@ -27,8 +28,11 @@ const Dots = (props) => {
           >
             <button
               aria-label={`Select slide ${index + 1}`}
+              tabIndex={0}
               onClick={() => {
-                slider.current.slickGoTo(index);
+                if (slider.current) {
+                  slider.current.slickGoTo(index);
+                }
               }}
             />
           </li>
@@ -56,7 +60,12 @@ const ArrowsGroup = (props) => {
         <button
           aria-label="Previous slide"
           className="slick-arrow slick-prev"
-          onClick={slider.current.slickPrev}
+          onClick={() => {
+            if (slider.current) {
+              slider.current.slickPrev();
+            }
+          }}
+          tabIndex={0}
         >
           <Icon name={leftArrowSVG} size="50px" />
         </button>
@@ -67,7 +76,12 @@ const ArrowsGroup = (props) => {
         <button
           aria-label="Next slide"
           className="slick-arrow slick-next"
-          onClick={slider.current.slickNext}
+          onClick={() => {
+            if (slider.current) {
+              slider.current.slickNext();
+            }
+          }}
+          tabIndex={0}
         >
           {currentSlide === 0 && props.learnMore ? (
             <p className="learn-more">{props.learnMore}</p>
@@ -88,8 +102,9 @@ const ArrowsGroup = (props) => {
 const View = (props) => {
   const slider = React.useRef(null);
   const img = React.useRef(null);
-  const [imgHeight, setImgHeight] = React.useState(0);
+  // const [imgHeight, setImgHeight] = React.useState(0);
   const [hashlinkOnMount, setHashlinkOnMount] = React.useState(false);
+  const blockId = props.id;
   const {
     activeTab = null,
     data = {},
@@ -100,7 +115,6 @@ const View = (props) => {
     setActiveTab = () => {},
   } = props;
   const activeTabIndex = tabsList.indexOf(activeTab);
-  // const tabData = tabs[activeTab] || {};
   const uiContainer = data.align === 'full' ? 'ui container' : false;
   const image = data.image || null;
 
@@ -120,28 +134,28 @@ const View = (props) => {
     },
   };
 
-  const panes = tabsList.map((tab, index) => {
-    return {
-      id: tab,
-      renderItem: (
-        <React.Fragment key={`slide-${tab}`}>
-          <RenderBlocks {...props} metadata={metadata} content={tabs[tab]} />
-          {index === 0 ? (
-            <div
-              className="divider"
-              style={{ height: `${imgHeight - 80}px` }}
-            />
-          ) : (
-            ''
-          )}
-        </React.Fragment>
-      ),
-    };
-  });
+  // const panes = tabsList.map((tab, index) => {
+  //   return {
+  //     id: tab,
+  //     renderItem: (
+  //       <React.Fragment key={`slide-${tab}`}>
+  //         <RenderBlocks {...props} metadata={metadata} content={tabs[tab]} />
+  //         {index === 0 ? (
+  //           <div
+  //             className="divider"
+  //             style={{ height: `${imgHeight - 80}px` }}
+  //           />
+  //         ) : (
+  //           ''
+  //         )}
+  //       </React.Fragment>
+  //     ),
+  //   };
+  // });
 
-  const updateImageHeight = () => {
-    setImgHeight(img.current?.height || 0);
-  };
+  // const updateImageHeight = () => {
+  //   setImgHeight(img.current?.height || 0);
+  // };
 
   React.useEffect(() => {
     const urlHash = props.location.hash.substring(1) || '';
@@ -177,21 +191,54 @@ const View = (props) => {
     /* eslint-disable-next-line */
   }, [hashlink.counter]);
 
-  React.useEffect(() => {
-    updateImageHeight();
-    img.current.onload = () => {
-      updateImageHeight();
-    };
-    window.addEventListener('resize', updateImageHeight);
-    return () => {
-      window.removeEventListener('resize', updateImageHeight);
+  const panes = tabsList.map((tab, index) => {
+    return {
+      id: tab,
+      renderItem: (
+        <RenderBlocks
+          key={`slide-${tab}`}
+          {...props}
+          metadata={metadata}
+          content={tabs[tab]}
+        />
+      ),
     };
-    /* eslint-disable-next-line */
-  }, []);
+  });
+
+  // React.useEffect(() => {
+  //   updateImageHeight();
+  //   img.current.onload = () => {
+  //     updateImageHeight();
+  //   };
+  //   window.addEventListener('resize', updateImageHeight);
+  //   return () => {
+  //     window.removeEventListener('resize', updateImageHeight);
+  //   };
+  //   /* eslint-disable-next-line */
+  // }, []);
+
+  // console.log('HERE RERENDER');
 
   return (
     <>
-      <Slider {...settings} ref={slider} className={cx(uiContainer)}>
+      <Slider
+        {...settings}
+        ref={slider}
+        className={cx(uiContainer, 'tabs-accessibility')}
+        accessibility={true}
+        afterChange={() => {
+          if (
+            document
+              .getElementById(blockId)
+              ?.getElementsByClassName('slick-slider')?.length > 0
+          ) {
+            document
+              .getElementById(blockId)
+              .getElementsByClassName('slick-current')[0]
+              .focus();
+          }
+        }}
+      >
         {panes.length ? panes.map((pane) => pane.renderItem) : ''}
       </Slider>
       <img

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

@@ -0,0 +1,32 @@
+@import (multiple, reference, optional) '../../theme.config';
+@type: extra;
+@element: custom;
+
+.slick-image {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 600px;
+  pointer-events: none;
+}
+
+@media only screen and (min-width: @mobileBreakpoint) {
+  .slick-image {
+    width: 450px !important;
+    transform: translateX(-40%) translateY(5%) !important;
+  }
+}
+
+@media only screen and (min-width: @tabletBreakpoint) {
+  .slick-image {
+    width: 500px !important;
+    transform: translateX(-25%) translateY(5%) !important;
+  }
+}
+
+@media only screen and (min-width: @computerBreakpoint) {
+  .slick-image {
+    width: 600px !important;
+    transform: translateX(-20%) translateY(5%) !important;
+  }
+}

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,49 @@
-import React from 'react';
-import { Container } from 'semantic-ui-react';
+import React, { useState } from 'react';
+import loadable from '@loadable/component';
+import { compose } from 'redux';
+import { VisibilitySensor } from '@eeacms/volto-datablocks/components';
+import { connectToMultipleProviders } from '@eeacms/volto-datablocks/hocs';
+import arrowLeft from './chevron-left-square-fill-svgrepo-com.svg';
+import arrowRight from './chevron-right-square-fill-svgrepo-com.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 [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 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 (!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 +51,86 @@ const View = (props) => {
                 </h4>
               </>
             )} */}
-          </div>
         </div>
-      </Container>
+        {pictures?.length > 0 && (
+          <div className="carousel">
+            <div className="arrows">
+              <div className="swiper-button image-swiper-button-prev">
+                <img
+                  className="icon  icon-left"
+                  src={arrowLeft}
+                  alt="left arrow"
+                />
+                {/* <Icon className="icon-left" name={arrowSVG} size="24px" /> */}
+              </div>
+              <div className="swiper-button image-swiper-button-next">
+                <img
+                  className="icon icon-right"
+                  src={arrowRight}
+                  alt="right arrow"
+                />
+                {/* <Icon className="icon-right" name={arrowSVG} size="24px" /> */}
+              </div>
+              <p>{copyright[activeSlide]}</p>
+            </div>
+            <SwiperLoader>
+              {({ Navigation, Pagination }) => {
+                return (
+                  <SwiperReactLoader>
+                    {({ Swiper, SwiperSlide }) => {
+                      return (
+                        <Swiper
+                          modules={[Navigation, Pagination]}
+                          navigation={{
+                            prevEl: '.image-swiper-button-prev',
+                            nextEl: '.image-swiper-button-next',
+                          }}
+                          slidesPerView={3}
+                          spaceBetween={0}
+                          loop={true}
+                          breakpoints={{
+                            320: {
+                              slidesPerView: 1,
+                              spaceBetween: 0,
+                            },
+                            1200: {
+                              slidesPerView: 3,
+                              spaceBetween: 0,
+                            },
+                          }}
+                          onSlideChange={(swiper) => {
+                            setActiveSlide(swiper.activeIndex);
+                          }}
+                        >
+                          {pictures.map((source, index) => (
+                            <SwiperSlide>
+                              <img src={source} alt={picture_names[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/chevron-left-square-fill-svgrepo-com.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;}
+</style>
+<path class="st0" d="M32,0H0v32h32V0z M12,16l10.1,10.1l-2.5,2.5L7,16L19.6,3.4l2.5,2.5L12,16z"/>
+</svg>

package/src/components/manage/Blocks/HabitatsBanner/chevron-right-square-fill-svgrepo-com.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;}
+</style>
+<path class="st0" d="M0,32h32V0L0,0L0,32z M9.9,5.9l2.5-2.5L25,16L12.4,28.6l-2.5-2.5L20,16L9.9,5.9z"/>
+</svg>

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'],
   };
 };