feat: add new plugin to theme mapstore with css file.

georchestra · Apr 17, 2024 · 3c1e3e6 · 3c1e3e6
1 parent 6ac702f
commit 3c1e3e6
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 20 deletions.
diff --git a/configs/localConfig.json b/configs/localConfig.json
@@ -18,6 +18,7 @@
       "enabled": true,
       "contextOnly": true
     },
+    "stylesheetUri": "",
     "header": {
       "height": 90,
       "url": "/header/",
@@ -265,7 +266,7 @@
       "homePath": "/home"
     },
     "plugins": {
-        "mobile": ["Header", {
+        "mobile": ["Header", "Easytheming", {
                 "name": "Map",
                 "cfg": {
                     "mapOptions": {
@@ -378,11 +379,11 @@
               "name": "MetadataExplorer",
               "cfg": {
                   "serviceTypes": [
-                    { "name": "csw", "label": "CSW" }, 
-                    { "name": "wms", "label": "WMS" }, 
-                    { "name": "wmts", "label": "WMTS" }, 
-                    { "name": "tms", "label": "TMS", "allowedProviders": ["OpenStreetMap", "OpenSeaMap", "Stamen"] }, 
-                    { "name": "wfs", "label": "WFS" }, 
+                    { "name": "csw", "label": "CSW" },
+                    { "name": "wms", "label": "WMS" },
+                    { "name": "wmts", "label": "WMTS" },
+                    { "name": "tms", "label": "TMS", "allowedProviders": ["OpenStreetMap", "OpenSeaMap", "Stamen"] },
+                    { "name": "wfs", "label": "WFS" },
                     { "name": "3dtiles", "label": "3D Tiles" },
                     { "name": "cog", "label": "COG" }
                   ]
@@ -393,7 +394,7 @@
             "GlobeViewSwitcher"
         ],
         "desktop": [
-          "Header",
+          "Header", "Easytheming",
           "Details",
           {
             "name": "Map",
@@ -564,11 +565,11 @@
                     "zoomToLayer": false,
                     "wrap": true,
                     "serviceTypes": [
-                      { "name": "csw", "label": "CSW" }, 
-                      { "name": "wms", "label": "WMS" }, 
-                      { "name": "wmts", "label": "WMTS" }, 
-                      { "name": "tms", "label": "TMS", "allowedProviders": ["OpenStreetMap", "OpenSeaMap", "Stamen"] }, 
-                      { "name": "wfs", "label": "WFS" }, 
+                      { "name": "csw", "label": "CSW" },
+                      { "name": "wms", "label": "WMS" },
+                      { "name": "wmts", "label": "WMTS" },
+                      { "name": "tms", "label": "TMS", "allowedProviders": ["OpenStreetMap", "OpenSeaMap", "Stamen"] },
+                      { "name": "wfs", "label": "WFS" },
                       { "name": "3dtiles", "label": "3D Tiles" },
                       { "name": "cog", "label": "COG" }
                     ]
@@ -1072,7 +1073,7 @@
           "ContextExport"
         ],
         "context": [
-          "Header"
+          "Header", "Easytheming"
         ]
     }
 }
diff --git a/js/plugins.js b/js/plugins.js
@@ -10,6 +10,7 @@ import productPlugins from '@mapstore/product/plugins';
 
 import NotAllowedPlugin from "@js/plugins/NotAllowed";
 import HeaderPlugin from "@js/plugins/Header";
+import EasyTheming from "@js/plugins/EasyTheming";
 import UserSessionPlugin from "@js/plugins/UserSession";
 import VersionPlugin from "@js/plugins/Version";
 import BackgroundSelectorPlugin from '@mapstore/plugins/BackgroundSelector';
@@ -30,6 +31,7 @@ export default {
         // georchestra plugins2
         NotAllowedPlugin,
         HeaderPlugin,
+        EasyTheming,
         UserSessionPlugin,
         VersionPlugin,
         BackgroundSelectorPlugin // This is not lazy loaded because of this issue. https://github.com/georchestra/mapstore2-georchestra/issues/573

diff --git a/js/plugins/EasyTheming.jsx b/js/plugins/EasyTheming.jsx
@@ -0,0 +1,28 @@
+/*
+ * Copyright 2019, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import {useEffect} from "react";
+import {createPlugin, connect} from "@mapstore/utils/PluginsUtils";
+
+export const Easytheming = ({stylesheet = ""}) => {
+    useEffect(() => {
+        if (stylesheet) {
+            const link = document.createElement("link");
+            link.setAttribute("rel", "stylesheet");
+            link.setAttribute("type", "text/css");
+            link.setAttribute("href", stylesheet);
+            document.head.appendChild(link);
+        }
+    }, []);
+    return null;
+};
+
+export default createPlugin('Easytheming', {
+    component: connect((state) => ({
+        stylesheet: state.localConfig && state.localConfig.stylesheetUri
+    }))(Easytheming)
+});
diff --git a/js/plugins/Header.jsx b/js/plugins/Header.jsx
@@ -31,13 +31,6 @@ export const Header = ({url = "/header/", page = "mapstore", height = 90, ignore
                 header.setAttribute("logo-url", logoUrl);
                 header.setAttribute("stylesheet", stylesheet);
                 headerScript.src = script;
-                if (stylesheet) {
-                    const link = document.createElement("link");
-                    link.setAttribute("rel", "stylesheet");
-                    link.setAttribute("type", "text/css");
-                    link.setAttribute("href", stylesheet);
-                    document.head.appendChild(link);
-                }
 
                 if (container) {
                     container.style.top = height + "px";