feat: implement new header

georchestra/georchestra#4065
georchestra · Nov 10, 2023 · a233d0b · a233d0b
1 parent 59e7d1d
commit a233d0b
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 10 deletions.
diff --git a/.gitignore b/.gitignore
@@ -15,3 +15,4 @@ coverage/
 backend/.classpath
 backend/.project
 package-lock.json
+.idea/
diff --git a/configs/localConfig.json b/configs/localConfig.json
@@ -20,7 +20,9 @@
     },
     "header": {
       "height": 90,
-      "url": "/header/"
+      "url": "/header/",
+      "script": "https://cdn.jsdelivr.net/gh/georchestra/header@dist/header.js",
+      "legacy": false
     },
     "defaultMapOptions": {
       "cesium": {

diff --git a/index.html b/index.html
@@ -103,7 +103,7 @@
             width: 100%;
             height: 90px;
             border: none;
-            overflow: hidden;
+            overflow: visible;
             position: absolute;
         }
         #container {
@@ -124,7 +124,7 @@
 
     </head>
     <body>
-        <iframe id="georchestra-header" src="header.html" scrolling="no" frameBorder="0"></iframe>
+        <div id="georchestra-header"></div>
         <div id="container">
             <div class="_ms2_init_spinner _ms2_init_center"><div></div></div>
             <div class="_ms2_init_text _ms2_init_center">Loading</div>

diff --git a/indexTemplate.html b/indexTemplate.html
@@ -103,7 +103,7 @@
           width: 100%;
           height: 90px;
           border: none;
-          overflow: hidden;
+          overflow: visible;
           position: absolute;
       }
       #container {
@@ -137,7 +137,7 @@
       </script>
   </head>
   <body>
-      <iframe id="georchestra-header" src="header.html" scrolling="no" frameBorder="0"></iframe>
+      <div id="georchestra-header"></div>
       <div id="container">
           <div class="_ms2_init_spinner _ms2_init_center"><div></div></div>
           <div class="_ms2_init_text _ms2_init_center">Loading</div>

diff --git a/js/plugins/Header.jsx b/js/plugins/Header.jsx
@@ -8,21 +8,39 @@
 import {useEffect} from "react";
 import { createPlugin, connect } from "@mapstore/utils/PluginsUtils";
 
-export const Header = ({url = "/header/", page = "mapstore", height = 90, ignoreIFrame = false}) => {
+export const Header = ({url = "/header/", page = "mapstore", height = 90, ignoreIFrame = false, script = "https://cdn.jsdelivr.net/gh/georchestra/header@dist/header.js", legacy = false}) => {
     useEffect(() => {
         const header = document.getElementById("georchestra-header");
         const container = document.getElementById("container");
         if (header) {
+            // Prevent creation of multiple headers
+            const existingGeorHeader = document.getElementsByTagName("geor-header");
+            if (existingGeorHeader?.length > 0) {
+                existingGeorHeader[0].remove();
+            }
+            const existingScript = document.querySelectorAll("script[src='" + script + "']");
+            if (existingScript?.length > 0) {
+                existingScript[0].remove();
+            }
             if (!ignoreIFrame && window.location !== window.parent.location) {
                 header.style.display = 'none';
                 if (container) {
                     container.style.top = '0';
                 }
             } else {
-                header.style.display = 'block';
-                header.src = url + "?active=" + page;
+                const georHeader = document.createElement("geor-header");
+                const georHeaderScript = document.createElement("script");
+
+                georHeader.setAttribute("active-app", page);
+                georHeader.setAttribute("legacy-header", false);
+                georHeader.setAttribute("legacy-url", url);
+                georHeader.setAttribute("legacy-header", legacy);
+                georHeaderScript.src = script;
                 header.style.height = height + "px";
 
+
+                header.appendChild(georHeader);
+                header.appendChild(georHeaderScript);
                 if (container) {
                     container.style.top = height + "px";
                 }
@@ -36,6 +54,8 @@ export const Header = ({url = "/header/", page = "mapstore", height = 90, ignore
 export default createPlugin('Header', {
     component: connect((state) => ({
         url: state.localConfig && state.localConfig.header && state.localConfig.header.url,
-        height: state.localConfig && state.localConfig.header && state.localConfig.header.height
+        height: state.localConfig && state.localConfig.header && state.localConfig.header.height,
+        script: state.localConfig && state.localConfig.header && state.localConfig.header.script,
+        legacy: state.localConfig && state.localConfig.header && state.localConfig.header.legacy
     }))(Header)
 });
diff --git a/web/src/main/resources/mapstore.properties b/web/src/main/resources/mapstore.properties
@@ -18,4 +18,4 @@
 
 datadir.location=${georchestra.extensions:},${georchestra.datadir}/mapstore
 overrides.config=../default.properties
-overrides.mappings=header.url=headerUrl,header.height=headerHeight
+overrides.mappings=header.url=headerUrl,header.height=headerHeight,header.script=headerScript,header.legacy=useLegacyHeader