@eeacms/volto-n2k 0.1.5 → 0.1.8

package/CHANGELOG.md

@@ -4,10 +4,32 @@ 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).
 
+#### [0.1.8](https://github.com/eea/volto-n2k/compare/0.1.7...0.1.8)
+
+- update [`8ed8e64`](https://github.com/eea/volto-n2k/commit/8ed8e641a64fa24675aac34a3b774f6c8d7da67c)
+- Set toolkit link [`a8e42f5`](https://github.com/eea/volto-n2k/commit/a8e42f56717d022c1b978c89a8276d98fb525b74)
+- Change style for arrows and dots in carousel [`09baad7`](https://github.com/eea/volto-n2k/commit/09baad72af985d7895cfd250fec40db8f3748dc5)
+
+#### [0.1.7](https://github.com/eea/volto-n2k/compare/0.1.6...0.1.7)
+
+> 3 August 2022
+
+- Update links [`#8`](https://github.com/eea/volto-n2k/pull/8)
+- Update toolkit link [`d791e63`](https://github.com/eea/volto-n2k/commit/d791e63603d750afbead921f1cebbf90902dc8e2)
+- Change link for natura2000 [`98fb51c`](https://github.com/eea/volto-n2k/commit/98fb51c76320ac47e6bbeb0e4012cc49932c17d2)
+
+#### [0.1.6](https://github.com/eea/volto-n2k/compare/0.1.5...0.1.6)
+
+> 3 August 2022
+
+- Add toolkit in landing page [`#7`](https://github.com/eea/volto-n2k/pull/7)
+
 #### [0.1.5](https://github.com/eea/volto-n2k/compare/0.1.4...0.1.5)
 
+> 28 July 2022
+
+- Show language native name [`#6`](https://github.com/eea/volto-n2k/pull/6)
 - Use volto 16 for cypress tests [`dfb57d1`](https://github.com/eea/volto-n2k/commit/dfb57d12d37dbeb1aa8c0d87cf8cc950cdf27d13)
-- Show language native name [`20692d7`](https://github.com/eea/volto-n2k/commit/20692d74fb65ff686d23e73bd87d676b871b266f)
 
 #### [0.1.4](https://github.com/eea/volto-n2k/compare/0.1.3...0.1.4)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-n2k",
-  "version": "0.1.5",
+  "version": "0.1.8",
   "description": "volto-n2k: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/manage/Blocks/CarouselHorizontal/DefaultHorizontalView.jsx

@@ -0,0 +1,202 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { withRouter } from 'react-router';
+import loadable from '@loadable/component';
+import cx from 'classnames';
+import { Icon, RenderBlocks } from '@plone/volto/components';
+import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
+
+import rightArrowSVG from '@eeacms/volto-n2k/icons/right-key.svg';
+import leftArrowSVG from '@eeacms/volto-n2k/icons/left-key.svg';
+
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+import '@eeacms/volto-tabs-block/less/carousel.less';
+
+const Slider = loadable(() => import('react-slick'));
+
+const Dots = (props) => {
+  const { activeTab = null, tabsList = [], slider = {} } = props;
+  return tabsList.length > 1 ? (
+    <div className="slick-dots-wrapper">
+      <div className="slick-line" />
+      <ul className={cx('slick-dots ui container', props.uiContainer)}>
+        {tabsList.map((tab, index) => (
+          <li
+            key={`dot-${tab}`}
+            className={cx({ 'slick-active': activeTab === tab })}
+          >
+            <button
+              aria-label={`Select slide ${index + 1}`}
+              onClick={() => {
+                if (slider.current) {
+                  slider.current.slickGoTo(index);
+                }
+              }}
+            />
+          </li>
+        ))}
+      </ul>
+    </div>
+  ) : (
+    ''
+  );
+};
+
+const ArrowsGroup = (props) => {
+  const { activeTab = null, tabsList = [], slider = {} } = props;
+  const currentSlide = tabsList.indexOf(activeTab);
+  const slideCount = tabsList.length;
+
+  return (
+    <div
+      className={cx({
+        'slick-arrows': true,
+        'one-arrow': currentSlide === 0 || currentSlide === slideCount - 1,
+      })}
+    >
+      {currentSlide > 0 ? (
+        <button
+          aria-label="Previous slide"
+          className="slick-arrow slick-prev"
+          onClick={() => {
+            if (slider.current) {
+              slider.current.slickPrev();
+            }
+          }}
+        >
+          <Icon name={leftArrowSVG} size="50px" />
+        </button>
+      ) : (
+        ''
+      )}
+      {currentSlide < slideCount - 1 ? (
+        <button
+          aria-label="Next slide"
+          className="slick-arrow slick-next"
+          onClick={() => {
+            if (slider.current) {
+              slider.current.slickNext();
+            }
+          }}
+        >
+          <Icon name={rightArrowSVG} size="50px" />
+        </button>
+      ) : (
+        ''
+      )}
+    </div>
+  );
+};
+
+const View = (props) => {
+  const slider = React.useRef(null);
+  const [hashlinkOnMount, setHashlinkOnMount] = React.useState(false);
+  const {
+    activeTab = null,
+    data = {},
+    hashlink = {},
+    metadata = {},
+    tabsList = [],
+    tabs = {},
+    setActiveTab = () => {},
+  } = props;
+  const activeTabIndex = tabsList.indexOf(activeTab);
+  const uiContainer = data.align === 'full' ? 'ui container' : false;
+
+  const settings = {
+    autoplay: false,
+    arrows: false,
+    dots: false,
+    speed: 500,
+    initialSlide: 0,
+    lazyLoad: 'ondemand',
+    swipe: true,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    touchMove: true,
+    beforeChange: (oldIndex, index) => {
+      setActiveTab(tabsList[index]);
+    },
+  };
+
+  React.useEffect(() => {
+    if (!slider.current?.innerSlider?.list) return;
+    const unfocuseElements = ['a', 'button', 'input'];
+    unfocuseElements.forEach((tag) => {
+      for (let element of slider.current.innerSlider.list.querySelectorAll(
+        ".slick-slide[aria-hidden='true'] a",
+      )) {
+        element.setAttribute('aria-hiden', 'true');
+      }
+    });
+  }, [activeTab]);
+
+  React.useEffect(() => {
+    const urlHash = props.location.hash.substring(1) || '';
+    if (
+      hashlink.counter > 0 ||
+      (hashlink.counter === 0 && urlHash && !hashlinkOnMount)
+    ) {
+      const id = hashlink.hash || urlHash || '';
+      const index = tabsList.indexOf(id);
+      const parentId = data.id || props.id;
+      const parent = document.getElementById(parentId);
+      // TODO: Find the best way to add offset relative to header
+      //       The header can be static on mobile and relative on > mobile
+      const headerWrapper = document.querySelector('.header-wrapper');
+      const offsetHeight = headerWrapper?.offsetHeight || 0;
+      if (
+        id !== parentId &&
+        parentId === hashlink.data.parentId &&
+        index > -1 &&
+        parent
+      ) {
+        if (activeTabIndex !== index) {
+          slider.current.slickGoTo(index);
+        }
+        props.scrollToTarget(parent, offsetHeight);
+      } else if (id === parentId && parent) {
+        props.scrollToTarget(parent, offsetHeight);
+      }
+    }
+    if (!hashlinkOnMount) {
+      setHashlinkOnMount(true);
+    }
+    /* eslint-disable-next-line */
+  }, [hashlink.counter]);
+
+  const panes = tabsList.map((tab, index) => {
+    return {
+      id: tab,
+      renderItem: (
+        <RenderBlocks
+          key={`slide-${tab}`}
+          {...props}
+          metadata={metadata}
+          content={tabs[tab]}
+        />
+      ),
+    };
+  });
+
+  return (
+    <>
+      <Slider {...settings} ref={slider} className={cx(uiContainer)}>
+        {panes.length ? panes.map((pane) => pane.renderItem) : ''}
+      </Slider>
+      <ArrowsGroup activeTab={activeTab} tabsList={tabsList} slider={slider} />
+      <Dots activeTab={activeTab} tabsList={tabsList} slider={slider} />
+    </>
+  );
+};
+
+export default compose(
+  connect((state) => {
+    return {
+      hashlink: state.hashlink,
+    };
+  }),
+  withScrollToTarget,
+)(withRouter(View));

package/src/components/manage/Blocks/CarouselHorizontal/HorizontalView.jsx

@@ -5,8 +5,8 @@ import { withRouter } from 'react-router';
 import loadable from '@loadable/component';
 import { Icon, RenderBlocks } from '@plone/volto/components';
 import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
-import rightArrowSVG from '@eeacms/volto-tabs-block/icons/right-arrow.svg';
-import leftArrowSVG from '@eeacms/volto-tabs-block/icons/left-arrow.svg';
+import rightArrowSVG from '@eeacms/volto-n2k/icons/right-key.svg';
+import leftArrowSVG from '@eeacms/volto-n2k/icons/left-key.svg';
 import cx from 'classnames';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';

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

@@ -1,3 +1,4 @@
+import DefaultHorizontalView from './DefaultHorizontalView';
 import HorizontalCarouselView from './HorizontalView';
 import carouselSchema from './schema';
 
@@ -8,6 +9,10 @@ export default (config) => {
     ...(config.blocks.blocksConfig.tabs_block || {}),
     templates: {
       ...(config.blocks.blocksConfig.tabs_block?.templates || {}),
+      carousel: {
+        ...(config.blocks.blocksConfig.tabs_block?.templates?.carousel || {}),
+        view: DefaultHorizontalView,
+      },
       carousel_n2k: {
         title: 'Carousel Natura 2000',
         view: HorizontalCarouselView,

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

@@ -6,7 +6,7 @@ import forests from './images/forests.webp';
 import mountains from './images/mountains.webp';
 import grasslands from './images/grasslands.webp';
 import rivers from './images/rivers.webp';
-import islands from './images/islands.webp';
+import toolkit from './images/toolkit_icon.webp';
 import peatlands from './images/peatlands.webp';
 import natura2000 from './images/natura2000.webp';
 
@@ -54,10 +54,11 @@ export const tiles = [
     link: '/natura2000/:lang/rivers-and-lakes',
   },
   {
-    image: islands,
-    title: 'Islands',
-    description: 'ISLANDS',
-    link: '/natura2000/:lang/islands',
+    image: toolkit,
+    title: 'Toolkit',
+    description: 'TOOLKIT',
+    link:
+      'https://op.europa.eu/fr/publication-detail/:lang/publication/e33a1119-8fa2-11ec-8c40-01aa75ed71a1',
   },
 ];
 

package/src/components/theme/AppExtras/CopyPaste/CopyPaste.jsx

@@ -123,7 +123,7 @@ const CopyPaste = (props) => {
         onMouseEnter={(e) => {
           if (
             e.altKey &&
-            e.ctrlKey &&
+            e.shiftKey &&
             toolbar.current &&
             !toolbar.current.classList.contains('__dev_on')
           ) {

package/src/icons/left-key.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch Beta 3.3.2 (12041) - http://www.bohemiancoding.com/sketch -->
+    <title>arrow-left-circle</title>
+    <desc>Created with Sketch Beta.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Icon-Set-Filled" sketch:type="MSLayerGroup" transform="translate(-258.000000, -1089.000000)"
+            fill="#ffffff">
+            <path
+                d="M281,1106 L270.414,1106 L274.536,1110.12 C274.926,1110.51 274.926,1111.15 274.536,1111.54 C274.145,1111.93 273.512,1111.93 273.121,1111.54 L267.464,1105.88 C267.225,1105.64 267.15,1105.31 267.205,1105 C267.15,1104.69 267.225,1104.36 267.464,1104.12 L273.121,1098.46 C273.512,1098.07 274.145,1098.07 274.536,1098.46 C274.926,1098.86 274.926,1099.49 274.536,1099.88 L270.414,1104 L281,1104 C281.552,1104 282,1104.45 282,1105 C282,1105.55 281.552,1106 281,1106 L281,1106 Z M274,1089 C265.164,1089 258,1096.16 258,1105 C258,1113.84 265.164,1121 274,1121 C282.836,1121 290,1113.84 290,1105 C290,1096.16 282.836,1089 274,1089 L274,1089 Z"
+                id="arrow-left-circle" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>

package/src/icons/right-key.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch Beta 3.3.2 (12041) - http://www.bohemiancoding.com/sketch -->
+    <title>arrow-right-circle</title>
+    <desc>Created with Sketch Beta.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Icon-Set-Filled" sketch:type="MSLayerGroup" transform="translate(-310.000000, -1089.000000)"
+            fill="#ffffff">
+            <path
+                d="M332.535,1105.88 L326.879,1111.54 C326.488,1111.93 325.855,1111.93 325.465,1111.54 C325.074,1111.15 325.074,1110.51 325.465,1110.12 L329.586,1106 L319,1106 C318.447,1106 318,1105.55 318,1105 C318,1104.45 318.447,1104 319,1104 L329.586,1104 L325.465,1099.88 C325.074,1099.49 325.074,1098.86 325.465,1098.46 C325.855,1098.07 326.488,1098.07 326.879,1098.46 L332.535,1104.12 C332.775,1104.36 332.85,1104.69 332.795,1105 C332.85,1105.31 332.775,1105.64 332.535,1105.88 L332.535,1105.88 Z M326,1089 C317.163,1089 310,1096.16 310,1105 C310,1113.84 317.163,1121 326,1121 C334.837,1121 342,1113.84 342,1105 C342,1096.16 334.837,1089 326,1089 L326,1089 Z"
+                id="arrow-right-circle" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>

package/src/less/styles.less

@@ -590,27 +590,6 @@ img.slick-image {
   padding: 0.5rem;
 }
 
-@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
-  img.slick-image {
-    left: -200px;
-    width: 550px;
-  }
-}
-
-@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
-  img.slick-image {
-    left: -200px;
-    width: 650px;
-  }
-}
-
-@media only screen and (min-width: @largeMonitorBreakpoint) {
-  img.slick-image {
-    left: -150px;
-    width: 650px;
-  }
-}
-
 .n2k-green-border {
   .block.maps {
     > div {
@@ -689,3 +668,138 @@ img.slick-image {
 .dark-green-background {
   background-color: #04a87d;
 }
+
+.tabs-block .slick-slider {
+  order: 1;
+}
+
+.tabs-block .slick-arrow {
+  order: 2;
+}
+
+.tabs-block .slick-dots-wrapper {
+  order: 3;
+}
+
+.tabs-block .slick-dots-wrapper .slick-dots li {
+  width: 20px;
+  height: 20px;
+}
+
+.tabs-block .slick-dots-wrapper .slick-dots li button {
+  width: 20px;
+  height: 20px;
+  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
+}
+
+.tabs-block .slick-dots-wrapper .slick-dots li.slick-active::before {
+  // display: none;
+  top: -9px;
+  left: -9px;
+  width: calc(20px + 2 * 9px);
+  height: calc(20px + 2 * 9px);
+}
+
+.tabs-block .slick-dots-wrapper .slick-dots li.slick-active button {
+  border-color: #3b7f02;
+  background-color: #3b7f02 !important;
+}
+
+.tabs-block.light .slick-dots-wrapper .slick-dots li.slick-active::before {
+  border: 3px solid #fff;
+}
+
+.tabs-block.grey .slick-dots-wrapper .slick-dots li.slick-active::before {
+  border: 3px solid #b3b3b3;
+}
+
+.tabs-block.dark .slick-dots-wrapper .slick-dots li.slick-active::before {
+  border: 3px solid #000;
+}
+
+.tabs-block.light .slick-dots-wrapper .slick-dots li button {
+  border: 2px solid #fff;
+}
+
+.tabs-block .slick-arrows button.slick-arrow {
+  display: flex !important;
+  align-items: center;
+}
+
+.tabs-block.light .slick-arrows button.slick-arrow svg {
+  fill: #fff;
+
+  path {
+    fill: #fff;
+  }
+}
+
+.tabs-block.grey .slick-arrows button.slick-arrow svg {
+  fill: #b3b3b3;
+
+  path {
+    fill: #b3b3b3;
+  }
+}
+
+.tabs-block.dark .slick-arrows button.slick-arrow svg {
+  fill: #000;
+
+  path {
+    fill: #000;
+  }
+}
+
+.tabs-block.carousel_n2k .slick-arrows .learn-more {
+  margin-bottom: 0 !important;
+}
+
+@media only screen and (max-width: @largestTabletScreen) {
+  .tabs-block .slick-slider {
+    order: 2;
+
+    .slick-slide {
+      padding-top: 0 !important;
+    }
+  }
+
+  .tabs-block .slick-arrows {
+    justify-content: end;
+    order: 1;
+    padding: 1rem;
+  }
+
+  .tabs-block .slick-dots-wrapper {
+    order: 3;
+  }
+
+  .tabs-block .slick-arrow.slick-prev {
+    left: unset !important;
+  }
+
+  .tabs-block .slick-arrow.slick-next {
+    right: unset !important;
+    margin-left: 2rem;
+  }
+}
+
+@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+  img.slick-image {
+    left: -200px;
+    width: 550px;
+  }
+}
+
+@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
+  img.slick-image {
+    left: -200px;
+    width: 650px;
+  }
+}
+
+@media only screen and (min-width: @largeMonitorBreakpoint) {
+  img.slick-image {
+    left: -150px;
+    width: 650px;
+  }
+}