Merge pull request #709 from georchestra/theming-mapstore

Allow theming mapstore with another css file

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": {
@@ -393,7 +394,7 @@
             "GlobeViewSwitcher"
         ],
         "desktop": [
-          "Header",
+          "Header", "Easytheming",
           "Details",
           {
             "name": "Map",
@@ -1072,7 +1073,7 @@
           "ContextExport"
         ],
         "context": [
-          "Header"
+          "Header", "Easytheming"
         ]
     }
 }

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

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)
+});