@eeacms/volto-n2k 1.0.22 → 1.0.23

package/CHANGELOG.md

@@ -4,12 +4,21 @@ 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.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.23",
   "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/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'],
   };
 };
 

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

@@ -1,30 +1,81 @@
+@type: extra;
+@element: custom;
+
+@import (multiple, reference, optional) '../../theme.config';
+
+@import 'swiper/swiper.less';
+@import 'swiper/modules/navigation/navigation.less';
+@import 'swiper/modules/pagination/pagination.less';
+
+@{view} {
+  .habitat-banner-details {
+    &::before {
+      .full-width();
+      position: absolute;
+      z-index: -1;
+    }
+
+    .carousel {
+      .half-width(960px);
+
+      @media @mobile {
+        width: calc(@pageFullWidth - 2rem) !important;
+      }
+    }
+  }
+}
+
+@{edit} {
+  .habitat-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 .habitat-banner-details .ui.container > * {
   margin-bottom: 0;
 }
 
 .habitat-banner-details {
-  padding: 1.5em 0;
-  background-color: #00a390;
+  position: relative;
+  padding: 0;
   color: #fff !important;
   font-family: 'RajdhaniB', 'Helvetica Neue', Arial, Helvetica, sans-serif;
 
+  &::before {
+    display: block;
+    height: 100%;
+    background-color: #00a390;
+    content: '';
+  }
+
   .habitat-details {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     justify-content: space-between;
-    gap: 1rem;
-
-    @media only screen and (max-width: 765px) {
-      flex-flow: column;
-
-      .habitat-metadata {
-        margin-bottom: 1rem;
-      }
-    }
 
     .habitat-metadata {
+      display: flex;
+      width: 50%;
+      flex: 0 0 50%;
+      flex-direction: column;
+      justify-content: center;
+      margin: 4rem 0;
+      word-wrap: break-word;
+
       .name {
-        margin-top: 0.5em !important;
+        margin-top: 0 !important;
         margin-bottom: 0 !important;
         color: #fff !important;
         font-family: inherit;
@@ -39,6 +90,10 @@ div#view .habitat-banner-details .ui.container > * {
         }
       }
 
+      .info {
+        margin-bottom: 0;
+      }
+
       h3 {
         margin-top: 0 !important;
         margin-bottom: 0 !important;
@@ -68,10 +123,77 @@ div#view .habitat-banner-details .ui.container > * {
       }
     }
 
-    img {
-      max-height: 200px;
-      border-radius: 10px;
-      filter: drop-shadow(-2px 2px 3px rgba(0, 0, 0, 0.4));
+    .carousel {
+      p {
+        font-family: 'RajdhaniB', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+      }
+
+      img {
+        width: 100%;
+      }
+
+      .swiper {
+        img {
+          display: block;
+          // max-height: 300px;
+          width: 100%;
+          height: 300px;
+          object-fit: cover;
+        }
+      }
+
+      .arrows {
+        position: absolute;
+        z-index: 1;
+        bottom: 0;
+        left: 0;
+        display: flex;
+        width: 100%;
+        align-items: center;
+
+        .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;
+        }
+      }
+    }
+
+    .swiper {
+      z-index: 0;
+      width: 100%;
+
+      .swiper-slide:not(.swiper-slide-active) {
+        filter: grayscale(100%);
+      }
+
+      .swiper-slide {
+        transition: filter 0.5s;
+      }
+    }
+
+    @media @mobile {
+      flex-flow: column;
+
+      .habitat-metadata {
+        width: 100%;
+        margin-top: 2rem;
+      }
+
+      .carousel {
+        margin: 0 1rem 1rem 1rem;
+      }
     }
   }
 }

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

@@ -75,8 +75,9 @@ export const getStyle = (props) => {
   if (!props.screen.width || !props.screen.height) return {};
   const height =
     props.screen.height -
-    props.screen.browserToolbarHeight -
-    props.screen.content.offsetTop;
+    props.screen.content.offsetTop -
+    props.screen.browserToolbarHeight;
+
   return {
     minHeight: `${height}px`,
     maxHeight: `${height}px`,

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

@@ -11,12 +11,10 @@
   background-repeat: no-repeat;
   background-size: cover;
 
-  &:not(.edit) {
-    overflow-y: hidden;
+  overflow-y: hidden;
 
-    .ui.grid.landing-page {
-      overflow-y: auto;
-    }
+  .ui.grid.landing-page {
+    overflow-y: auto;
   }
 
   .ui.grid.landing-page {

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

@@ -69,7 +69,7 @@ const View = (props) => {
 
   return (
     <Sticky
-      active={sticky && screen.page?.width > 765}
+      active={sticky && screen.page?.width > 767}
       context={__CLIENT__ && document.querySelector('.content-area')}
       className={cx('sticky-navigation-anchors', {
         'full-width': sticky,

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

@@ -15,6 +15,8 @@ div#view .ui.container > .sticky-navigation-anchors {
 }
 
 .sticky-navigation-anchors {
+  z-index: 5 !important;
+
   &.is-sticky {
     .navigation-anchors {
       background-color: #fff !important;