#9473 fix longituindal profile issues - marker and dropup style issue (…

…#9485) (#9499) * fix longituindal profile issues * fix lint * fix crash if node cannot be found * Update web/client/utils/__tests__/DOMUtil-test.js * Update web/client/utils/__tests__/DOMUtil-test.js --------- Co-authored-by: Lorenzo Natali <[email protected]> # Conflicts: # web/client/epics/longitudinalProfile.js
geosolutions-it · Sep 27, 2023 · 58d838c · 58d838c
1 parent bc92aab
commit 58d838c
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 5 deletions.
diff --git a/web/client/plugins/longitudinalProfile/Menu.jsx b/web/client/plugins/longitudinalProfile/Menu.jsx
@@ -5,7 +5,7 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
 */
-import React, { useState, useCallback } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import {DropdownButton, Glyphicon, MenuItem, NavDropdown} from 'react-bootstrap';
 import {connect} from "react-redux";
@@ -23,6 +23,8 @@ import {
     isParametersOpenSelector
 } from "../../selectors/longitudinalProfile";
 import { isCesium } from '../../selectors/maptype';
+import { getOffsetTop, getOffsetBottom } from '../../utils/DOMUtil';
+
 
 const TNavDropdown = tooltip(NavDropdown);
 const TDropdownButton = tooltip(DropdownButton);
@@ -45,13 +47,19 @@ const UserMenu = ({
     onToggleSourceMode
 }) => {
     let DropDown = nav ? TNavDropdown : TDropdownButton;
-
+    const [dropUp, setDropUp ] = useState(false);
     const onToggleTool = useCallback((toolName) => () => {
         onActivateTool();
         onToggleSourceMode(toolName);
     }, []);
+    useEffect(() => {
+        const ButtonElement = document.getElementById("longitudinal-tool");
+        const offsetTop = getOffsetTop(ButtonElement);
+        const offsetBottom = getOffsetBottom(ButtonElement);
+        const dropUpVal = offsetTop > 2000 && offsetBottom < 130;
+        setDropUp(dropUpVal);
+    }, []);
     const [open, setMenuOpen ] = useState(false);
-
     const body = (<>
         {showDrawOption ? <MenuItem active={dataSourceMode === 'draw'} key="draw" onClick={onToggleTool('draw')}>
             <Glyphicon glyph="pencil"/><Message msgId="longitudinalProfile.draw"/>
@@ -68,7 +76,7 @@ const UserMenu = ({
         </MenuItem>
     </>);
     const DropDownMenu = (<DropDown
-        dropup
+        dropup={dropUp}
         open={open}
         onToggle={(val) => setMenuOpen(val)}
         id="longitudinal-tool"

diff --git a/web/client/utils/DOMUtil.js b/web/client/utils/DOMUtil.js
@@ -22,3 +22,26 @@ export const scrollIntoViewId = (viewId) => {
     }
 };
 
+
+/**
+ * @param {node} elem the node element you want to inspect top offset
+ * @returns {number} the total offset from the top
+ */
+export function getOffsetTop( elem ) {
+    var offsetTop = 0;
+    do {
+        if ( !isNaN( elem?.offsetTop ) ) {
+            offsetTop += elem.offsetTop;
+        }
+    // eslint-disable-next-line no-param-reassign, no-cond-assign
+    } while ( elem = elem?.offsetParent );
+    return offsetTop;
+}
+/**
+ * @param {node} elem the node element you want to inspect bottom offset
+ * @returns {number} the total offset from the bottom
+ */
+export const getOffsetBottom = ( element, containerClass = "container") =>{
+    const container = document.getElementById(containerClass);
+    return container.clientHeight - getOffsetTop(element);
+};
diff --git a/web/client/utils/__tests__/DOMUtil-test.js b/web/client/utils/__tests__/DOMUtil-test.js
@@ -9,7 +9,7 @@
 
 import expect from 'expect';
 
-import { scrollIntoViewId } from '../DOMUtil';
+import { getOffsetBottom, getOffsetTop, scrollIntoViewId } from '../DOMUtil';
 
 describe('Test the DOMUtils', () => {
 
@@ -23,5 +23,25 @@ describe('Test the DOMUtils', () => {
         scrollIntoViewId('container');
         expect(spy.calls.length).toEqual(1);
     });
+    it('test getOffsetTop', function() {
+        document.body.innerHTML = `
+        <div id="container">
+            <div id="content">
+            test
+            </div>
+        </div>`;
+        const offset = getOffsetTop(document.querySelector("#content"));
+        expect(offset).toEqual(8);
+    });
+    it('test getOffsetBottom', function() {
+        document.body.innerHTML = `
+        <div id="container">
+            <div id="content">
+            test
+            </div>
+        </div>`;
+        const offset = getOffsetBottom(document.querySelector("#content"));
+        expect(offset).toEqual(10);
+    });
 
 });