Merge pull request #37 from eea/develop

Release

Author: avoinea

CHANGELOG.md

@@ -4,6 +4,11 @@ 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).
 
+### [6.2.0](https://github.com/eea/volto-block-toc/compare/6.1.0...6.2.0) - 11 November 2024
+
+#### :hammer_and_wrench: Others
+
+- Update package.json [Ichim David - [`8e4fff7`](https://github.com/eea/volto-block-toc/commit/8e4fff78d7186752f9ceac6dfb220f626ecbad9f)]
 ### [6.1.0](https://github.com/eea/volto-block-toc/compare/6.0.1...6.1.0) - 11 October 2024
 
 #### :hammer_and_wrench: Others

Jenkinsfile

@@ -8,7 +8,7 @@ pipeline {
   environment {
     GIT_NAME = "volto-block-toc"
     NAMESPACE = "@eeacms"
-    SONARQUBE_TAGS = "volto.eea.europa.eu,biodiversity.europa.eu,water.europa.eu-freshwater,insitu.copernicus.eu,land.copernicus.eu,climate-adapt.eea.europa.eu,demo-www.eea.europa.eu,www.eea.europa.eu-en,water.europa.eu-marine,climate-advisory-board.europa.eu"
+    SONARQUBE_TAGS = "volto.eea.europa.eu,biodiversity.europa.eu,water.europa.eu-freshwater,insitu.copernicus.eu,land.copernicus.eu,climate-adapt.eea.europa.eu,demo-www.eea.europa.eu,www.eea.europa.eu-en,water.europa.eu-marine,climate-advisory-board.europa.eu,forest.eea.europa.eu"
     DEPENDENCIES = ""
     BACKEND_PROFILES = "eea.kitkat:testing"
     BACKEND_ADDONS = ""

package.json

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

src/Block/variations/less/side-menu.less

@@ -5,7 +5,7 @@
 
 .eea-side-menu {
   .icon {
-    font-size: 1.4rem !important;
+    font-size: 2rem !important;
   }
 
   .content {

src/hocs/less/side-nav.less

@@ -1,64 +1,5 @@
-@media screen and (min-width: 992px) {
-  #page-header:empty + .breadcrumbs + .content-area {
-    padding-top: 0 !important;
-    margin-top: 0 !important;
-  }
-
-  #page-document .eea-side-menu {
-    display: none;
-  }
-
-  #page-document:has(.banner > .image) .eea-side-menu + * {
-    margin-top: 300px;
-  }
-
-  #page-document:has(.eea-side-menu) .eea.banner {
-    position: absolute;
-    left: 0;
-  }
-
-  #page-document .eea-side-menu:not(:empty) + * {
-    margin-top: 200px;
-  }
-
-  .has-side-nav {
-    #view {
-      display: grid;
-      max-width: 1300px;
-      margin: 0 auto;
-      gap: 5rem;
-      grid-template-areas: 'content nav';
-      grid-template-columns: 4fr 1fr;
-      grid-template-rows: auto 1fr;
-
-      #page-document {
-        overflow: auto;
-        width: auto !important;
-        min-width: 100%;
-        max-width: 100% !important;
-        grid-area: content;
-      }
-
-      .ui.grid.column-grid {
-        max-width: 900px;
-      }
-
-      > .eea-side-menu {
-        position: sticky;
-        top: 0;
-        right: 1.5rem;
-        min-width: 315px;
-        height: fit-content;
-        margin-bottom: 30px;
-        grid-area: nav;
-      }
-    }
-  }
-}
-
 .eea-side-menu {
   grid-area: nav;
-  transition: top 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
 
   &:not(.mobile, .tablet) {
     max-width: 315px;
@@ -106,6 +47,12 @@
   }
 }
 
+// hide summary marker from eea-side-menu as we use  our own summary icon
+.eea-side-menu summary::-webkit-details-marker,
+.eea-side-menu summary::marker {
+  display: none;
+}
+
 @media screen and (min-width: 768px) and (max-width: 991px) {
   .has-side-nav #view {
     grid-template-areas:
@@ -119,8 +66,54 @@
   }
 }
 
-// hide summary marker from eea-side-menu as we use  our own summary icon
-.eea-side-menu summary::-webkit-details-marker,
-.eea-side-menu summary::marker {
-  display: none;
+@media screen and (min-width: 992px) {
+  #page-document .eea-side-menu {
+    display: none;
+  }
+
+  #page-document:has(.banner > .image) .eea-side-menu + * {
+    margin-top: 300px;
+  }
+
+  #page-document:has(.eea-side-menu) .eea.banner {
+    position: absolute;
+    left: 0;
+  }
+
+  #page-document .eea-side-menu:not(:empty) + * {
+    margin-top: 200px;
+  }
+
+  .has-side-nav {
+    #view {
+      display: grid;
+      max-width: 1300px;
+      margin: 0 auto;
+      gap: 5rem;
+      grid-template-areas: 'content nav';
+      grid-template-columns: 4fr 1fr;
+      grid-template-rows: auto 1fr;
+
+      #page-document {
+        width: auto !important;
+        min-width: 100%;
+        max-width: 100% !important;
+        grid-area: content;
+      }
+
+      .ui.grid {
+        max-width: 900px;
+      }
+
+      > .eea-side-menu {
+        position: sticky;
+        top: 0;
+        right: 1.5rem;
+        min-width: 315px;
+        height: fit-content;
+        margin-bottom: 30px;
+        grid-area: nav;
+      }
+    }
+  }
 }

src/hocs/withDeviceSize.jsx

@@ -6,11 +6,7 @@ export default function withDeviceSize(WrappedComponent) {
 
     const updateScreenSize = () => {
       if (__CLIENT__) {
-        const screenWidth =
-          document.documentElement.clientWidth ||
-          document.body.clientWidth ||
-          window.innerWidth ||
-          0;
+        const screenWidth = window.innerWidth || 0;
 
         setDevice(getDeviceConfig(screenWidth));
       }

src/hocs/withEEASideMenu.jsx

@@ -1,20 +1,47 @@
-import React, { useEffect } from 'react';
-import { Portal } from 'react-portal';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
+import ReactDOM from 'react-dom';
 
 import { useFirstVisited } from '@eeacms/volto-block-toc/hooks';
 import withDeviceSize from '@eeacms/volto-block-toc/hocs/withDeviceSize';
 import { BodyClass, useDetectClickOutside } from '@plone/volto/helpers';
 import './less/side-nav.less';
 
-function IsomorphicPortal({ children, target }) {
-  const [isClient, setIsClient] = React.useState();
-  useEffect(() => setIsClient(true), []);
+function IsomorphicPortal({ children, target, insertBeforeOnMobile }) {
+  const [isClient, setIsClient] = useState(false);
+  const containerRef = useRef(null);
 
-  return isClient ? (
-    <Portal node={document.querySelector(target)}>{children}</Portal>
-  ) : (
-    children
-  );
+  useEffect(() => {
+    setIsClient(true);
+
+    if (insertBeforeOnMobile) {
+      const targetNode = document.querySelector(target);
+      const beforeNode = targetNode?.querySelector(insertBeforeOnMobile);
+
+      if (targetNode && beforeNode && !containerRef.current) {
+        const div = document.createElement('div');
+        div.classList.add('eea-side-menu-mobile-wrapper');
+        targetNode.insertBefore(div, beforeNode);
+        containerRef.current = div;
+      }
+    }
+
+    return () => {
+      if (containerRef.current) {
+        containerRef.current.remove();
+        containerRef.current = null;
+      }
+    };
+  }, [target, insertBeforeOnMobile]);
+
+  if (!isClient) {
+    return children;
+  }
+
+  if (insertBeforeOnMobile && containerRef.current) {
+    return ReactDOM.createPortal(children, containerRef.current);
+  }
+
+  return ReactDOM.createPortal(children, document.querySelector(target));
 }
 
 const withEEASideMenu = (WrappedComponent) =>
@@ -23,17 +50,23 @@ const withEEASideMenu = (WrappedComponent) =>
       mode,
       device,
       targetParent = '.eea.header',
+      fixedVisibilitySwitchTarget = targetParent,
+      insertBeforeOnMobile = null,
       shouldRender = true,
       targetParentThreshold = '0px',
+      fixedVisibilitySwitchTargetThreshold = targetParentThreshold,
     } = props;
-    const visible = useFirstVisited(targetParent, targetParentThreshold);
+    const visible = useFirstVisited(
+      fixedVisibilitySwitchTarget,
+      fixedVisibilitySwitchTargetThreshold,
+    );
     const [isMenuOpen, setIsMenuOpen] = React.useState(true);
     const isSmallScreen = device === 'mobile' || device === 'tablet';
 
-    const ClickOutsideListener = () => {
+    const ClickOutsideListener = useCallback(() => {
       setIsMenuOpen(false);
       setTimeout(() => setIsMenuOpen(true), 0);
-    };
+    }, []);
 
     const ref = useDetectClickOutside({
       onTriggered: ClickOutsideListener,
@@ -57,7 +90,10 @@ const withEEASideMenu = (WrappedComponent) =>
           {mode === 'edit' ? (
             <WrappedComponent {...props} />
           ) : (
-            <IsomorphicPortal target={isSmallScreen ? targetParent : '#view'}>
+            <IsomorphicPortal
+              target={isSmallScreen ? targetParent : '#view'}
+              insertBeforeOnMobile={isSmallScreen ? insertBeforeOnMobile : null}
+            >
               <div
                 className={`eea-side-menu ${props.device}`}
                 ref={isSmallScreen ? ref : null}
@@ -74,10 +110,17 @@ const withEEASideMenu = (WrappedComponent) =>
     );
   });
 
-/* can be used to override the default targetParent 
+/* can be used to override the default targetParent
 export default compose(
-  (WrappedComponent) => (props) => 
-    withEEASideMenu(WrappedComponent)({ ...props, targetParent: '.your-custom-target', targetParentThreshold: '100px' })
+  (WrappedComponent) => (props) =>
+    withEEASideMenu(WrappedComponent)({ ...props,
+    targetParent: '.your-custom-target',
+    targetParentThreshold: '100px', // the threshold at which the menu will be visible when targetParent is not visible
+    insertBeforeOnMobile: '.banner', // add if you need the WrappedContent to be added before a certain
+    element inside the targetParent
+    fixedVisibilitySwitchTarget: '.main.bar', // add if you need the menu to be fixed on certain element
+    going out of view
+    fixedVisibilitySwitchTargetThreshold: '100px' // overrides targetParentThreshold })
 )(Component);
 */