From 671797c98d6ea07ef6b465c9d12fba893f257c3a Mon Sep 17 00:00:00 2001 From: Mauro Bartolomeoli Date: Mon, 3 Apr 2017 15:46:48 +0200 Subject: [PATCH] Fixes #1630: optimized iframe embedded version --- web/client/components/share/SharePanel.jsx | 18 ++------- web/client/containers/MapViewer.jsx | 2 +- web/client/embedded.html | 22 ++++++++++ web/client/localConfig.json | 25 +++++------- web/client/plugins/Share.jsx | 12 +++++- web/client/product/appConfigEmbedded.js | 46 +++++++++++++++++++++ web/client/product/embedded.jsx | 47 ++++++++++++++++++++++ web/client/product/pages/MapViewer.jsx | 2 +- web/client/product/pluginsEmbedded.js | 27 +++++++++++++ webpack.config.js | 3 +- 10 files changed, 170 insertions(+), 34 deletions(-) create mode 100644 web/client/embedded.html create mode 100644 web/client/product/appConfigEmbedded.js create mode 100644 web/client/product/embedded.jsx create mode 100644 web/client/product/pluginsEmbedded.js diff --git a/web/client/components/share/SharePanel.jsx b/web/client/components/share/SharePanel.jsx index dee067d788..5cc252b173 100644 --- a/web/client/components/share/SharePanel.jsx +++ b/web/client/components/share/SharePanel.jsx @@ -22,7 +22,6 @@ const ShareEmbed = require('./ShareEmbed'); const ShareQRCode = require('./ShareQRCode'); const {Glyphicon} = require('react-bootstrap'); const Message = require('../../components/I18N/Message'); -const Url = require('url'); let SharePanel = React.createClass({ @@ -30,6 +29,7 @@ let SharePanel = React.createClass({ isVisible: React.PropTypes.bool, title: React.PropTypes.node, shareUrl: React.PropTypes.string, + shareEmbeddedUrl: React.PropTypes.string, onClose: React.PropTypes.func, getCount: React.PropTypes.func, closeGlyph: React.PropTypes.string @@ -44,19 +44,9 @@ let SharePanel = React.createClass({ render() { // ************************ CHANGE URL PARAMATER FOR EMBED CODE **************************** /* if the property shareUrl is not defined it takes the url from location.href */ - let shareUrl = this.props.shareUrl || location.href; - /* the sharing url is parsed in order to check the query parameters from the complete url */ - let urlParsedObj = Url.parse(shareUrl, true); - /* if not null, the search attribute will prevale over the query attribute hiding the query - one, so is necessary to nullify it */ - urlParsedObj.search = null; - if (urlParsedObj && urlParsedObj.query) { - urlParsedObj.query.mode = "embedded"; - } - /* in order to obtain the complete url is necessary to format the obj into a string */ - let urlformatted = Url.format(urlParsedObj); - /* shareEmbeddedUrl is the url used for embedded part */ - let shareEmbeddedUrl = urlformatted; + const shareUrl = this.props.shareUrl || location.href; + const shareEmbeddedUrl = this.props.shareEmbeddedUrl || this.props.shareUrl || location.href; + let sharePanel = ( diff --git a/web/client/containers/MapViewer.jsx b/web/client/containers/MapViewer.jsx index 079c3933be..a4fa40e636 100644 --- a/web/client/containers/MapViewer.jsx +++ b/web/client/containers/MapViewer.jsx @@ -17,7 +17,7 @@ const PluginsUtils = require('../utils/PluginsUtils'); const PluginsContainer = connect((state) => ({ pluginsConfig: state.plugins || ConfigUtils.getConfigProp('plugins') || null, - mode: (urlQuery.mode || (state.browser && state.browser.mobile ? 'mobile' : 'desktop')), + mode: (urlQuery.mode || state.mode || (state.browser && state.browser.mobile ? 'mobile' : 'desktop')), pluginsState: state && state.controls || {}, monitoredState: PluginsUtils.filterState(state, ConfigUtils.getConfigProp('monitorState') || []) }))(require('../components/plugins/PluginsContainer')); diff --git a/web/client/embedded.html b/web/client/embedded.html new file mode 100644 index 0000000000..ac5e045316 --- /dev/null +++ b/web/client/embedded.html @@ -0,0 +1,22 @@ + + + + + + + MapStore 2 HomePage + + + + + + + + + + + +
+ + + diff --git a/web/client/localConfig.json b/web/client/localConfig.json index d73a00f044..8a075410a9 100644 --- a/web/client/localConfig.json +++ b/web/client/localConfig.json @@ -193,9 +193,8 @@ "cfg": { "tools": ["locate"] } - }, "Help", "DrawerMenu", { + }, "DrawerMenu", { "name": "Identify", - "showIn": ["Settings"], "cfg": { "style": { "position": "absolute", @@ -214,6 +213,13 @@ }, "bodyClass": "mobile-feature-info" } + }, { + "name": "ZoomAll", + "override": { + "Toolbar": { + "alwaysVisible": true + } + } }, { "name": "Locate", "override": { @@ -226,11 +232,6 @@ "cfg": { "wrap": true } - }, "About", { - "name": "MousePosition", - "cfg": { - "id": "mapstore-mouseposition-mobile" - } }, { "name": "Search", "cfg": { @@ -242,14 +243,6 @@ "cfg": { "id": "navigationBar" } - }, { - "name": "Toolbar", - "id": "IdentifyBar", - "stateSelector": "identify", - "cfg": { - "id": "identifyBar" - }, - "isDefault": false }, { "name": "MapLoading", "override": { @@ -258,7 +251,7 @@ } } }, - "OmniBar", "BurgerMenu" + "OmniBar" ], "common": [{ "name": "OmniBar", diff --git a/web/client/plugins/Share.jsx b/web/client/plugins/Share.jsx index 00ad657fae..8f1737f691 100644 --- a/web/client/plugins/Share.jsx +++ b/web/client/plugins/Share.jsx @@ -21,10 +21,20 @@ const assign = require('object-assign'); const {Glyphicon} = require('react-bootstrap'); const Message = require('../components/I18N/Message'); const {toggleControl} = require('../actions/controls'); +const Url = require('url'); + + +const getEmbeddedUrl = (url) => { + let urlParsedObj = Url.parse(url, true); + + return urlParsedObj.protocol + '//' + urlParsedObj.host + urlParsedObj.path + "embedded.html#/" + + urlParsedObj.hash.substring(urlParsedObj.hash.lastIndexOf('/') + 1, urlParsedObj.hash.lastIndexOf('?')); +}; const Share = connect((state) => ({ isVisible: state.controls && state.controls.share && state.controls.share.enabled, - shareUrl: location.href + shareUrl: location.href, + shareEmbeddedUrl: getEmbeddedUrl(location.href) }), { onClose: toggleControl.bind(null, 'share', null) })(require('../components/share/SharePanel')); diff --git a/web/client/product/appConfigEmbedded.js b/web/client/product/appConfigEmbedded.js new file mode 100644 index 0000000000..f8e45d8881 --- /dev/null +++ b/web/client/product/appConfigEmbedded.js @@ -0,0 +1,46 @@ +/** + * Copyright 2016, 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. + */ + +module.exports = { + pages: [{ + name: "mapviewer", + path: "/:mapId", + component: require('./pages/MapViewer') + }], + pluginsDef: require('./pluginsEmbedded.js'), + initialState: { + defaultState: { + mode: "embedded", + mousePosition: {enabled: false}, + controls: { + help: { + enabled: false + }, + print: { + enabled: false + }, + toolbar: { + active: null, + expanded: false + }, + drawer: { + enabled: false, + menu: "1" + } + }, + mapInfo: {enabled: true, infoFormat: 'text/html' } + }, + mobile: { + } + }, + storeOpts: { + persist: { + whitelist: ['security'] + } + } +}; diff --git a/web/client/product/embedded.jsx b/web/client/product/embedded.jsx new file mode 100644 index 0000000000..a7cb844598 --- /dev/null +++ b/web/client/product/embedded.jsx @@ -0,0 +1,47 @@ +/** + * Copyright 2017, 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. + */ +const React = require('react'); +const ReactDOM = require('react-dom'); +const {connect} = require('react-redux'); +const LocaleUtils = require('../utils/LocaleUtils'); + +const startApp = () => { + const StandardApp = require('../components/app/StandardApp'); + + const {pages, pluginsDef, initialState, storeOpts} = require('./appConfigEmbedded'); + + const StandardRouter = connect((state) => ({ + locale: state.locale || {}, + pages + }))(require('../components/app/StandardRouter')); + + const appStore = require('../stores/StandardStore').bind(null, initialState, { + mode: (state = 'embedded') => state + }, {}); + + const appConfig = { + storeOpts, + appStore, + pluginsDef, + initialActions: [], + appComponent: StandardRouter, + printingEnabled: true + }; + + ReactDOM.render( + , + document.getElementById('container') + ); +}; + +if (!global.Intl ) { + // Ensure Intl is loaded, then call the given callback + LocaleUtils.ensureIntl(startApp); +}else { + startApp(); +} diff --git a/web/client/product/pages/MapViewer.jsx b/web/client/product/pages/MapViewer.jsx index fe4c3ab1d0..2d14d7f44c 100644 --- a/web/client/product/pages/MapViewer.jsx +++ b/web/client/product/pages/MapViewer.jsx @@ -37,7 +37,7 @@ const MapViewerPage = React.createClass({ }; }, componentWillMount() { - if (this.props.params.mapType && this.props.params.mapId && oldLocation !== this.props.location) { + if (this.props.params.mapId && oldLocation !== this.props.location) { oldLocation = this.props.location; if (!ConfigUtils.getDefaults().ignoreMobileCss) { if (this.props.mode === 'mobile') { diff --git a/web/client/product/pluginsEmbedded.js b/web/client/product/pluginsEmbedded.js new file mode 100644 index 0000000000..37f5170b82 --- /dev/null +++ b/web/client/product/pluginsEmbedded.js @@ -0,0 +1,27 @@ +/** + * Copyright 2016, 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. + */ + +module.exports = { + plugins: { + IdentifyPlugin: require('../plugins/Identify'), + TOCPlugin: require('../plugins/TOC'), + BackgroundSwitcherPlugin: require('../plugins/BackgroundSwitcher'), + MapPlugin: require('../plugins/Map'), + ToolbarPlugin: require('../plugins/Toolbar'), + DrawerMenuPlugin: require('../plugins/DrawerMenu'), + SearchPlugin: require('../plugins/Search'), + LocatePlugin: require('../plugins/Locate'), + ZoomAllPlugin: require('../plugins/ZoomAll'), + MapLoadingPlugin: require('../plugins/MapLoading'), + OmniBarPlugin: require('../plugins/OmniBar') + }, + requires: { + ReactSwipe: require('react-swipeable-views').default, + SwipeHeader: require('../components/data/identify/SwipeHeader') + } +}; diff --git a/webpack.config.js b/webpack.config.js index 905e5ad857..656b441c7a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -12,7 +12,8 @@ module.exports = { entry: assign({ 'webpack-dev-server': 'webpack-dev-server/client?http://0.0.0.0:8081', // WebpackDevServer host and port 'webpack': 'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors - "mapstore2": path.join(__dirname, "web", "client", "product", "app") + "mapstore2": path.join(__dirname, "web", "client", "product", "app"), + "embedded": path.join(__dirname, "web", "client", "product", "embedded") }, themeEntries), output: { path: path.join(__dirname, "web", "client", "dist"),