From a233d0bca953298647dcab37d3b9c686d41225d0 Mon Sep 17 00:00:00 2001 From: Florian Necas Date: Fri, 10 Nov 2023 16:13:14 +0100 Subject: [PATCH] feat: implement new header https://github.com/georchestra/georchestra/pull/4065 --- .gitignore | 1 + configs/localConfig.json | 4 +++- index.html | 4 ++-- indexTemplate.html | 4 ++-- js/plugins/Header.jsx | 28 ++++++++++++++++++---- web/src/main/resources/mapstore.properties | 2 +- 6 files changed, 33 insertions(+), 10 deletions(-) diff --git a/.gitignore b/.gitignore index a4c109c91..1e1ba5bd3 100644 --- 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 index 02a249028..25cd7c796 100644 --- 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 index 7448a5f89..41caca68f 100644 --- 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 @@ - +
Loading
diff --git a/indexTemplate.html b/indexTemplate.html index 150b7dd49..e8ad961d0 100644 --- 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 @@ - +
Loading
diff --git a/js/plugins/Header.jsx b/js/plugins/Header.jsx index 6e9139b5e..f5dea9432 100644 --- 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 index 3cfa20a58..9d834d6b3 100644 --- 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