Skip to content

Commit

Permalink
Fixes #1630: optimized iframe embedded version
Browse files Browse the repository at this point in the history
  • Loading branch information
mbarto committed Apr 3, 2017
1 parent 109f5bc commit 671797c
Show file tree
Hide file tree
Showing 10 changed files with 170 additions and 34 deletions.
18 changes: 4 additions & 14 deletions web/client/components/share/SharePanel.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,14 @@ 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({

propTypes: {
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
Expand All @@ -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 = (
<Dialog id="share-panel-dialog" className="modal-dialog modal-content share-win">
<span role="header">
Expand Down
2 changes: 1 addition & 1 deletion web/client/containers/MapViewer.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'));
Expand Down
22 changes: 22 additions & 0 deletions web/client/embedded.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MapStore 2 HomePage</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway" type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
<link rel="stylesheet" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/0.2.4/leaflet.draw.css" />
<link rel="stylesheet" href="dist/themes/default.css" id="theme_stylesheet">
<link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
<script src="https://maps.google.com/maps/api/js?v=3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script src="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/0.2.4/leaflet.draw.js"></script>
</head>
<body>
<div id="container"></div>
<script src="dist/embedded.js"></script>
</body>
</html>
25 changes: 9 additions & 16 deletions web/client/localConfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -193,9 +193,8 @@
"cfg": {
"tools": ["locate"]
}
}, "Help", "DrawerMenu", {
}, "DrawerMenu", {
"name": "Identify",
"showIn": ["Settings"],
"cfg": {
"style": {
"position": "absolute",
Expand All @@ -214,6 +213,13 @@
},
"bodyClass": "mobile-feature-info"
}
}, {
"name": "ZoomAll",
"override": {
"Toolbar": {
"alwaysVisible": true
}
}
}, {
"name": "Locate",
"override": {
Expand All @@ -226,11 +232,6 @@
"cfg": {
"wrap": true
}
}, "About", {
"name": "MousePosition",
"cfg": {
"id": "mapstore-mouseposition-mobile"
}
}, {
"name": "Search",
"cfg": {
Expand All @@ -242,14 +243,6 @@
"cfg": {
"id": "navigationBar"
}
}, {
"name": "Toolbar",
"id": "IdentifyBar",
"stateSelector": "identify",
"cfg": {
"id": "identifyBar"
},
"isDefault": false
}, {
"name": "MapLoading",
"override": {
Expand All @@ -258,7 +251,7 @@
}
}
},
"OmniBar", "BurgerMenu"
"OmniBar"
],
"common": [{
"name": "OmniBar",
Expand Down
12 changes: 11 additions & 1 deletion web/client/plugins/Share.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'));
Expand Down
46 changes: 46 additions & 0 deletions web/client/product/appConfigEmbedded.js
Original file line number Diff line number Diff line change
@@ -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']
}
}
};
47 changes: 47 additions & 0 deletions web/client/product/embedded.jsx
Original file line number Diff line number Diff line change
@@ -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(
<StandardApp {...appConfig} mode="embedded"/>,
document.getElementById('container')
);
};

if (!global.Intl ) {
// Ensure Intl is loaded, then call the given callback
LocaleUtils.ensureIntl(startApp);
}else {
startApp();
}
2 changes: 1 addition & 1 deletion web/client/product/pages/MapViewer.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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') {
Expand Down
27 changes: 27 additions & 0 deletions web/client/product/pluginsEmbedded.js
Original file line number Diff line number Diff line change
@@ -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')
}
};
3 changes: 2 additions & 1 deletion webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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"),
Expand Down

0 comments on commit 671797c

Please sign in to comment.