Iframe height by viewport; Sidebar anchor update.

eea · Oct 11, 2020 · 8672665 · 8672665
1 parent a804b74
commit 8672665
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 33 deletions.
diff --git a/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx b/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx
@@ -1275,28 +1275,32 @@ const OpenlayersMapView = (props) => {
       <Dimmer id="map-loader" active={loader}>
         <Loader />
       </Dimmer>
-      <Portal node={document.getElementById('map-view-your-area-button')}>
-        <div id="view-your-area" className="ol-unselectable ol-control">
-          <button
-            className="toggle-button"
-            onClick={() => {
-              if (navigator.geolocation) {
-                navigator.geolocation.getCurrentPosition(
-                  (position) => {
-                    return centerPosition(state.map.element, position, 12);
-                  },
-                  (error) => {
-                    console.log(error);
-                  },
-                  { timeout: 10000 },
-                );
-              }
-            }}
-          >
-            <VoltoIcon name={navigationSVG} size="1em" fill="white" />
-          </button>
-        </div>
-      </Portal>
+      {document.getElementById('map-view-your-area-button') ? (
+        <Portal node={document.getElementById('map-view-your-area-button')}>
+          <div id="view-your-area" className="ol-unselectable ol-control">
+            <button
+              className="toggle-button"
+              onClick={() => {
+                if (navigator.geolocation) {
+                  navigator.geolocation.getCurrentPosition(
+                    (position) => {
+                      return centerPosition(state.map.element, position, 12);
+                    },
+                    (error) => {
+                      console.log(error);
+                    },
+                    { timeout: 10000 },
+                  );
+                }
+              }}
+            >
+              <VoltoIcon name={navigationSVG} size="1em" fill="white" />
+            </button>
+          </div>
+        </Portal>
+      ) : (
+        ''
+      )}
     </div>
   );
 };

diff --git a/src/components/manage/Blocks/Iframe/Edit.jsx b/src/components/manage/Blocks/Iframe/Edit.jsx
@@ -45,8 +45,16 @@ const getSchema = (props) => {
       title: 'Width',
       type: 'text',
     },
-    height: {
-      title: 'Height',
+    desktopHeight: {
+      title: 'Desktop height',
+      type: 'text',
+    },
+    tabletHeight: {
+      title: 'Tablet height',
+      type: 'text',
+    },
+    mobileHeight: {
+      title: 'Mobile height',
       type: 'text',
     },
     hideToolbar: {

diff --git a/src/components/manage/Blocks/Iframe/View.jsx b/src/components/manage/Blocks/Iframe/View.jsx
@@ -41,14 +41,21 @@ const View = ({ content, ...props }) => {
     description = '',
     descriptionClassName = '',
     width = '100%',
-    height = 'auto',
+    desktopHeight = '',
+    tabletHeight = '',
+    mobileHeight = '',
   } = data;
   const { hideToolbar = false, overflow = false, preset = null } = data;
   const url = {
     desktop: desktopUrl,
     tablet: tabletUrl || desktopUrl,
     mobile: mobileUrl || tabletUrl || desktopUrl,
   };
+  const height = {
+    desktop: desktopHeight || data.height,
+    tablet: tabletHeight || desktopHeight || data.height,
+    mobile: mobileHeight || tabletHeight || desktopHeight || data.height,
+  };
 
   useEffect(() => {
     if (props.data.queryParameters?.value) {
@@ -137,6 +144,16 @@ const View = ({ content, ...props }) => {
     ];
   };
 
+  const getHeightByWidth = () => {
+    return height[
+      Object.keys(breakPoints).filter(
+        (breakPoint) =>
+          breakPoints[breakPoint][0] >= windowWidth &&
+          breakPoints[breakPoint][1] <= windowWidth,
+      )[0]
+    ];
+  };
+
   const applyQueryParameters = (url, query) => {
     try {
       new URL(url);
@@ -192,7 +209,7 @@ const View = ({ content, ...props }) => {
               ...getPresetQueries(),
             })}
             width={width}
-            height={height}
+            height={getHeightByWidth()}
             className="embeded-iframe"
             display="initial"
             position="relative"

diff --git a/src/components/manage/Blocks/SidebarBlock/View.jsx b/src/components/manage/Blocks/SidebarBlock/View.jsx
@@ -114,18 +114,21 @@ const makeNewNavigation = (
               ...[
                 {
                   title: 'Pollutant Releases',
-                  url: `${item.items[0]?.url}#pollutant_releases_tableau`,
+                  url: item.items[0]?.url,
                   flag: 'has_release_data',
+                  id: 'pollutant_releases_tableau',
                 },
                 {
                   title: 'Pollutant Transfers',
-                  url: `${item.items[0]?.url}#pollutant_transfers_tableau`,
+                  url: item.items[0]?.url,
                   flag: 'has_transfer_data',
+                  id: 'pollutant_transfers_tableau',
                 },
                 {
                   title: 'Waste Transfers',
-                  url: `${item.items[0]?.url}#pollutant_waste_tableau`,
+                  url: item.items[0]?.url,
                   flag: 'has_waste_data',
+                  id: 'pollutant_waste_tableau',
                 },
               ]
                 .filter(
@@ -150,7 +153,7 @@ const makeNewNavigation = (
                     //   pathname.includes(child.url)
                     // );
                   },
-                  onClick: (pathname) => {
+                  onClick: (pathname, location) => {
                     if (
                       facility.facilityInspireId !== search.facilityInspireId
                     ) {
@@ -162,9 +165,13 @@ const makeNewNavigation = (
                         }),
                       );
                     }
-
                     if (pathname !== child.url) {
-                      history.push(child.url);
+                      history.push(`${child.url}#${child.id}`);
+                    } else {
+                      const hashElement = document.getElementById(child.id);
+                      if (hashElement) {
+                        hashElement.scrollIntoView();
+                      }
                     }
                   },
                 })),

diff --git a/src/components/theme/View/DefaultView.jsx b/src/components/theme/View/DefaultView.jsx
@@ -3,7 +3,7 @@
  * @module components/theme/View/DefaultView
  */
 
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 
@@ -37,6 +37,17 @@ const DefaultView = ({ content, intl, location }) => {
   const blocksLayoutFieldname = getBlocksLayoutFieldname(content);
   const contentTypeBlocks = content['@components']?.layout?.[blocksFieldname];
 
+  useEffect(() => {
+    if (content['@type' === 'site_template']) {
+      const hashElement = document.getElementById(
+        location.hash.replace('#', ''),
+      );
+      if (hashElement) {
+        hashElement.scrollIntoView();
+      }
+    }
+  }, [location.hash]);
+
   return hasBlocksData(content) ? (
     <div id="page-document" className="ui container">
       {map(content[blocksLayoutFieldname].items, (block) => {