diff --git a/configs/localConfig.json b/configs/localConfig.json index bf544a5db..3b274e499 100644 --- 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 index 5f95d455c..41239b774 100644 --- 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 new file mode 100644 index 000000000..fcf3f8a49 --- /dev/null +++ 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 index d9b8cfd92..5300568a5 100644 --- 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";