Update screen height; Use SidebarPopup frol @plone/volto

eea · Mar 30, 2021 · 474e66c · 474e66c
1 parent 8eaa662
commit 474e66c
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 28 deletions.
diff --git a/src/SidebarPopup/SidebarPopup.jsx b/src/SidebarPopup/SidebarPopup.jsx
diff --git a/src/StyleWrapper/StyleWrapperEdit.jsx b/src/StyleWrapper/StyleWrapperEdit.jsx
@@ -34,7 +34,7 @@ const StyleWrapperEdit = (props) => {
     };
   }, [closeSidebar]);
 
-  return (
+  return selected && isVisible ? (
     <SidebarPopup open={selected && isVisible}>
       <InlineForm
         schema={schema}
@@ -57,6 +57,8 @@ const StyleWrapperEdit = (props) => {
         formData={data}
       />
     </SidebarPopup>
+  ) : (
+    ''
   );
 };
 

diff --git a/src/StyleWrapper/schema.js b/src/StyleWrapper/schema.js
@@ -59,7 +59,7 @@ export const StyleSchema = () => ({
     },
     isScreenHeight: {
       title: 'Screen height',
-      description: 'Block height follows viewport height',
+      description: 'Maximize block to viewport height',
       type: 'boolean',
     },
     backgroundImage: {

diff --git a/src/hocs/withScreenHeight.jsx b/src/hocs/withScreenHeight.jsx
@@ -13,33 +13,51 @@ export default function withScreenHeight(WrappedComponent) {
 
     const updateHeight = () => {
       if (__CLIENT__) {
-        const headerWrapper = document.querySelector('.header-wrapper');
-        const contentArea = document.querySelector('.ui.segment.content-area');
-        const view = document.querySelector(
-          '.ui.segment.content-area #view #page-document',
+        const headerWrapper = document.querySelector(
+          '.header-wrapper:not(.mobile)',
         );
-        let childNth = 0;
+        const contentArea = document.querySelector('.ui.segment.content-area');
+        const toolbar = document.querySelector('#toolbar .toolbar.expanded');
+        const firstHeading = document.querySelector('.documentFirstHeading');
+        // const view = document.querySelector(
+        //   '.ui.segment.content-area #view #page-document',
+        // );
+        // let childNth = 0;
 
-        if (view) {
-          view.childNodes.forEach((child, index) => {
-            if (child === styleWrapper.current) {
-              childNth = index;
-            }
-          });
-        }
+        // if (view) {
+        //   view.childNodes.forEach((child, index) => {
+        //     if (child === styleWrapper.current) {
+        //       childNth = index;
+        //     }
+        //   });
+        // }
+
+        const screenHeight =
+          window.innerHeight ||
+          document.documentElement.clientHeight ||
+          document.body.clientHeight ||
+          0;
+
+        const headerWrapperStyle = headerWrapper
+          ? window.getComputedStyle(headerWrapper)
+          : {};
         const contentAreaStyle =
-          contentArea && childNth < 2
+          contentArea && !firstHeading
             ? window.getComputedStyle(contentArea)
             : { marginTop: '0px', paddingTop: '0px' };
+
         const offsetHeight =
-          childNth < 2
-            ? (headerWrapper?.offsetHeight || 0) +
-              (pixelToNumber(contentAreaStyle.marginTop) +
-                pixelToNumber(contentAreaStyle.paddingTop) || 0)
-            : 0;
+          (headerWrapperStyle.display !== 'none'
+            ? headerWrapper?.offsetHeight || 0
+            : 0) +
+          (pixelToNumber(contentAreaStyle.marginTop) +
+            pixelToNumber(contentAreaStyle.paddingTop) || 0) +
+          ((toolbar?.offsetHeight || 0) < screenHeight
+            ? toolbar?.offsetHeight || 0
+            : 0);
 
-        setOffsetHeight(offsetHeight || 0);
-        setScreenHeight(window.innerHeight);
+        setOffsetHeight(offsetHeight);
+        setScreenHeight(screenHeight);
       }
     };