From bba462e198b935c966a3cd3de01b5d7d066018ea Mon Sep 17 00:00:00 2001 From: Mauro Bartolomeoli Date: Wed, 22 Mar 2017 12:51:01 +0100 Subject: [PATCH] Fixes #1624: configuration from url for the api example --- web/client/components/app/StandardRouter.jsx | 6 +++++- web/client/examples/api/init.js | 8 +++++++- web/client/jsapi/MapStore2.js | 21 ++++++++++++++++---- web/client/plugins/QueryPanel.jsx | 2 +- web/client/plugins/TOC.jsx | 2 +- 5 files changed, 31 insertions(+), 8 deletions(-) diff --git a/web/client/components/app/StandardRouter.jsx b/web/client/components/app/StandardRouter.jsx index 96be2b8d48..63d0be7ecf 100644 --- a/web/client/components/app/StandardRouter.jsx +++ b/web/client/components/app/StandardRouter.jsx @@ -14,9 +14,13 @@ const {Router, Route, hashHistory} = require('react-router'); const Localized = require('../I18N/Localized'); +const assign = require('object-assign'); + const Theme = connect((state) => ({ theme: state.theme && state.theme.selectedTheme && state.theme.selectedTheme.id -}))(require('../theme/Theme')); +}), {}, (stateProps, dispatchProps, ownProps) => { + return assign({}, stateProps, dispatchProps, ownProps); +})(require('../theme/Theme')); const StandardRouter = React.createClass({ propTypes: { diff --git a/web/client/examples/api/init.js b/web/client/examples/api/init.js index fccc46e190..35d9b66631 100644 --- a/web/client/examples/api/init.js +++ b/web/client/examples/api/init.js @@ -2,11 +2,15 @@ function init() { /*eslint-enable */ var cfg; + var cfgUrl; + var theme; var embeddedPlugins; var pluginsCfg; /*eslint-disable */ - cfg = MapStore2.loadConfigFromStorage('mapstore.example.plugins.' + MapStore2.getMapNameFromRequest()); + cfg = MapStore2.loadConfigFromStorage('mapstore.example.plugins.' + MapStore2.getParamFromRequest('map')); + cfgUrl = MapStore2.getParamFromRequest('config'); + theme = MapStore2.getParamFromRequest('theme'); /*eslint-enable */ embeddedPlugins = { "desktop": [ @@ -29,11 +33,13 @@ function init() { pluginsCfg = cfg && MapStore2.buildPluginsCfg(cfg.pluginsCfg.standard, cfg.userCfg) || embeddedPlugins; MapStore2.create('container', { plugins: pluginsCfg, + configUrl: cfgUrl, initialState: cfg && cfg.state && { defaultState: cfg.state } || null, style: cfg && cfg.customStyle, theme: { + theme, path: '../../dist/themes' } }); diff --git a/web/client/jsapi/MapStore2.js b/web/client/jsapi/MapStore2.js index febacbfaa7..ebf164e160 100644 --- a/web/client/jsapi/MapStore2.js +++ b/web/client/jsapi/MapStore2.js @@ -12,7 +12,7 @@ const StandardApp = require('../components/app/StandardApp'); const LocaleUtils = require('../utils/LocaleUtils'); const {connect} = require('react-redux'); -const {configureMap} = require('../actions/config'); +const {configureMap, loadMapConfig} = require('../actions/config'); const url = require('url'); @@ -169,7 +169,7 @@ function loadConfigFromStorage(name = 'mapstore.embedded') { return null; } -function getMapNameFromRequest(paramName = 'map') { +function getParamFromRequest(paramName) { const urlQuery = url.parse(window.location.href, true).query; return urlQuery[paramName] || null; } @@ -200,6 +200,17 @@ const actionListeners = {}; let stateChangeListeners = []; let app; +const getInitialActions = (options) => { + if (!options.initialState) { + if (options.configUrl) { + return [loadMapConfig.bind(null, options.configUrl || defaultConfig)]; + } + return [configureMap.bind(null, options.config || defaultConfig)]; + } + return []; +}; + + /** * MapStore2 JavaScript API. Allows embedding MapStore2 functionalities into * a standard HTML page. @@ -217,6 +228,7 @@ const MapStore2 = { * * **plugins**: list of plugins (and the related configuration) to be included in the app * look at [Plugins documentation](./plugins-documentation) for further details * * **config**: map configuration object for the application (look at [Map Configuration](./maps-configuration) for details) + * * **configUrl**: map configuration url for the application (look at [Map Configuration](./maps-configuration) for details) * * **initialState**: allows setting the initial application state (look at [State Configuration](./app-state-configuration) for details) * * Styling can be configured either using a **theme**, or a complete custom **less stylesheet**, using the @@ -234,6 +246,7 @@ const MapStore2 = { * ... * } * }, + * configUrl: '...', * initialState: { * defaultState: { * ... @@ -272,7 +285,7 @@ const MapStore2 = { }))(require('../components/app/StandardRouter')); const appStore = require('../stores/StandardStore').bind(null, initialState || {}, {}); - const initialActions = options.initialState ? [] : [configureMap.bind(null, options.config || defaultConfig)]; + const initialActions = getInitialActions(options); const appConfig = { storeOpts: assign({}, storeOpts, {notify: true}), appStore, @@ -309,7 +322,7 @@ const MapStore2 = { }); }, buildPluginsCfg, - getMapNameFromRequest, + getParamFromRequest, loadConfigFromStorage, /** * Adds a listener that will be notified of all the MapStore2 events (**actions**), or only some of them. diff --git a/web/client/plugins/QueryPanel.jsx b/web/client/plugins/QueryPanel.jsx index 36958b4f3f..492665f7b6 100644 --- a/web/client/plugins/QueryPanel.jsx +++ b/web/client/plugins/QueryPanel.jsx @@ -115,7 +115,7 @@ const tocSelector = createSelector( [ (state) => state.controls && state.controls.toolbar && state.controls.toolbar.active === 'toc', groupsSelector, - (state) => state.layers.settings || {expanded: false, options: {opacity: 1}}, + (state) => state.layers && state.layers.settings || {expanded: false, options: {opacity: 1}}, (state) => state.controls && state.controls.queryPanel && state.controls.queryPanel.enabled || false ], (enabled, groups, settings, querypanelEnabled) => ({ enabled, diff --git a/web/client/plugins/TOC.jsx b/web/client/plugins/TOC.jsx index d342f76453..1efad67275 100644 --- a/web/client/plugins/TOC.jsx +++ b/web/client/plugins/TOC.jsx @@ -126,7 +126,7 @@ const tocSelector = createSelector( [ (state) => state.controls && state.controls.toolbar && state.controls.toolbar.active === 'toc', groupsSelector, - (state) => state.layers.settings || {expanded: false, options: {opacity: 1}}, + (state) => state.layers && state.layers.settings || {expanded: false, options: {opacity: 1}}, (state) => state.controls && state.controls.queryPanel && state.controls.queryPanel.enabled || false ], (enabled, groups, settings, querypanelEnabled) => ({ enabled,