Skip to content

Commit

Permalink
Add a button to open in full mapstore (see #1632)
Browse files Browse the repository at this point in the history
GoFull plugins autoshows when originalUrl is present in config (JsAPI use case) or when the url match with a regex (embedded iframe use case).
In both cases it opens MapStore full in a new tab (using originalUrl or parsing the current href to create the url to open.
  • Loading branch information
offtherailz committed Apr 6, 2017
1 parent a9046d3 commit 0964d4d
Show file tree
Hide file tree
Showing 13 changed files with 126 additions and 9 deletions.
1 change: 1 addition & 0 deletions docma-config.json
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@
"plugins": [
"web/client/plugins/index.jsdoc",
"web/client/plugins/BackgroundSwitcher.jsx",
"web/client/plugins/GoFull.jsx",
"web/client/plugins/Map.jsx",
"web/client/plugins/FullScreen.jsx",
"web/client/plugins/Identify.jsx",
Expand Down
4 changes: 3 additions & 1 deletion web/client/api.html
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,9 @@
<script id="ms2-api" src="dist/ms2-api.js"></script>
<script type="text/javascript">
function init() {
MapStore2.create('container');
MapStore2.create('container', {
originalUrl: "./#viewer/leaflet/0"
});
}
</script>
</body>
Expand Down
3 changes: 2 additions & 1 deletion web/client/components/share/ShareApi.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@ const ShareApi = React.createClass({
render() {
const parsedCode = codeApi
.replace('__BASE__URL__', this.props.shareUrl)
.replace('__CONFIG__URL__', this.props.shareConfigUrl);
.replace('__CONFIG__URL__', this.props.shareConfigUrl)
.replace('__ORIGINAL_URL__', location.href);
const tooltip = (<Tooltip placement="bottom" className="in" id="tooltip-bottom" style={{zIndex: 2001}}>
{this.state.copied ? <Message msgId="share.msgCopiedUrl"/> : <Message msgId="share.msgToCopyUrl"/>}
</Tooltip>);
Expand Down
3 changes: 2 additions & 1 deletion web/client/components/share/api-template.raw
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@
<script type="text/javascript">
function init() {
MapStore2.create('container',{
configUrl: "__CONFIG__URL__"
configUrl: "__CONFIG__URL__",
originalUrl: "__ORIGINAL_URL__"
});
}
</script>
Expand Down
7 changes: 6 additions & 1 deletion web/client/jsapi/MapStore2.js
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,8 @@ const defaultPlugins = {
"Expander",
"Undo",
"Redo",
"FullScreen"
"FullScreen",
"GoFull"
]
};

Expand Down Expand Up @@ -228,6 +229,7 @@ const MapStore2 = {
* 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)
* * **originalUrl**: url of the original instance of MapStore. If present it will be linked inside the map using the "GoFull" plugin, present by default.
* * **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
Expand Down Expand Up @@ -328,6 +330,9 @@ const MapStore2 = {
if (options.translations) {
ConfigUtils.setConfigProp('translationsPath', options.translations);
}
if (options.originalUrl) {
ConfigUtils.setConfigProp('originalUrl', options.originalUrl);
}
ReactDOM.render(<StandardApp onStoreInit={onStoreInit} themeCfg={themeCfg} className="fill" {...appConfig}/>, document.getElementById(container));
},
buildPluginsCfg,
Expand Down
100 changes: 100 additions & 0 deletions web/client/plugins/GoFull.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
/*
* 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 {connect} = require('react-redux');

const {Button, Glyphicon, Tooltip} = require('react-bootstrap');
const OverlayTrigger = require('../components/misc/OverlayTrigger');
const Message = require('../components/I18N/Message');
const {mapSelector} = require('../selectors/map');
const {createSelector} = require('reselect');
const ConfigUtils = require('../utils/ConfigUtils');

const mapIdSelector = createSelector([(state) => {let map = mapSelector(state); return map && map.mapId; }], mapId => ({mapId}));
/**
* GoFull plugins. Shows a button that opens full MapStore2 in a new tab. Try to find the `originalUrl` in configuration or tries to guess the mapId and creates the proper URL.
* This plugins hides automatically if the originalUrl is not present in configuration and if the urlRegex do not match.
* @prop {string} cfg.glyph the glyph icon for the button
* @prop {string} cfg.tooltip messageId of the tooltip to use
* @prop {string} cfg.urlRegex. A regex to parse the current location.href. This regex must match if the originalUrl is not defined.
* @prop {string} cfg.urlReplaceString. The template to create the url link. Uses the `urlRegex` groups to create the final URL
* @memberof plugins
* @class
*/
const GoFull = React.createClass({
propTypes: {
glyph: React.PropTypes.string,
tooltip: React.PropTypes.string,
urlRegex: React.PropTypes.string,
urlReplaceString: React.PropTypes.string,
mapId: React.PropTypes.string,
originalUrl: React.PropTypes.string
},
getDefaultProps() {
return {
glyph: "share",
tooltip: "fullscreen.viewLargerMap",
urlRegex: "^(.*?)embedded.html.*?#\\/(\\d?)",
urlReplaceString: "\\$1#/viewer/leaflet/\\$2"
};
},

render() {
if (!this.display()) return <noscript></noscript>;
return (<OverlayTrigger placement="left" overlay={<Tooltip id="gofull-tooltip"><Message msgId={this.props.tooltip}/></Tooltip>}>
<Button className="square-button" bsStyle="primary" onClick={() => this.openFull(this.generateUrl())}>
<Glyphicon glyph={this.props.glyph}/>
</Button>
</OverlayTrigger>);
},
display() {
let regex = this.generateRegex();
return this.props.originalUrl || ConfigUtils.getConfigProp("originalUrl") || location.href.match(regex);
},
openFull(url) {
if (url) {
window.open(url, '_blank');
}
},
generateRegex() {
return new RegExp(this.props.urlRegex);
},

generateUrl() {
let orig = this.props.originalUrl || ConfigUtils.getConfigProp("originalUrl");
if (orig) {
return orig;
}
let regex = this.generateRegex();
if (location.href.match(regex)) {
let next = location.href;
return next.replace(regex, "$1#/viewer/leaflet/$2");
}
}
});

const GoFullPlugin = connect(mapIdSelector)(GoFull);


const assign = require('object-assign');


module.exports = {
GoFullPlugin: assign(GoFullPlugin, {
Toolbar: {
name: 'gofull',
position: 1,
toolStyle: "primary",
tooltip: "fullscreen.viewLargerMap",
tool: true,
priority: 1
}
}),
reducers: {}
};
1 change: 1 addition & 0 deletions web/client/product/apiPlugins.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ module.exports = {
LocatePlugin: require('../plugins/Locate'),
ZoomAllPlugin: require('../plugins/ZoomAll'),
MapLoadingPlugin: require('../plugins/MapLoading'),
GoFullPlugin: require('../plugins/GoFull'),
OmniBarPlugin: require('../plugins/OmniBar')
},
requires: {
Expand Down
3 changes: 2 additions & 1 deletion web/client/product/plugins.js
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,8 @@ module.exports = {
FeatureGridPlugin: require('../plugins/FeatureGrid'),
TutorialPlugin: require('../plugins/Tutorial'),
ThemeSwitcherPlugin: require('../plugins/ThemeSwitcher'),
ScrollTopPlugin: require('../plugins/ScrollTop')
ScrollTopPlugin: require('../plugins/ScrollTop'),
GoFull: require('../plugins/GoFull')
},
requires: {
ReactSwipe: require('react-swipeable-views').default,
Expand Down
1 change: 1 addition & 0 deletions web/client/product/pluginsEmbedded.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ module.exports = {
LocatePlugin: require('../plugins/Locate'),
ZoomAllPlugin: require('../plugins/ZoomAll'),
MapLoadingPlugin: require('../plugins/MapLoading'),
GoFullPlugin: require('../plugins/GoFull'),
OmniBarPlugin: require('../plugins/OmniBar')
},
requires: {
Expand Down
3 changes: 2 additions & 1 deletion web/client/translations/data.de-DE
Original file line number Diff line number Diff line change
Expand Up @@ -355,7 +355,8 @@
},
"fullscreen": {
"tooltipActivate": "Umschalten auf Vollbild",
"tooltipDeactivate": "Vollbild verlassen"
"tooltipDeactivate": "Vollbild verlassen",
"viewLargerMap": "Größere Karte ansehen"
},
"helptexts": {
"scaleBox": "Das ist die Hilfe für die ScaleBox",
Expand Down
3 changes: 2 additions & 1 deletion web/client/translations/data.en-US
Original file line number Diff line number Diff line change
Expand Up @@ -355,7 +355,8 @@
},
"fullscreen": {
"tooltipActivate": "Switch to Full Screen",
"tooltipDeactivate": "Exit full screen"
"tooltipDeactivate": "Exit full screen",
"viewLargerMap": "View Larger Map"
},
"helptexts": {
"scaleBox": "This is the helptext for the ScaleBox",
Expand Down
3 changes: 2 additions & 1 deletion web/client/translations/data.fr-FR
Original file line number Diff line number Diff line change
Expand Up @@ -357,7 +357,8 @@
},
"fullscreen": {
"tooltipActivate": "Basculer en plein écran",
"tooltipDeactivate": "Quitter plein écran"
"tooltipDeactivate": "Quitter plein écran",
"viewLargerMap": "Agrandir le plan"
},
"helptexts": {
"scaleBox": "This is the helptext for the ScaleBox",
Expand Down
3 changes: 2 additions & 1 deletion web/client/translations/data.it-IT
Original file line number Diff line number Diff line change
Expand Up @@ -355,7 +355,8 @@
},
"fullscreen": {
"tooltipActivate": "Passa a schermo intero",
"tooltipDeactivate": "Esci da schermo intero"
"tooltipDeactivate": "Esci da schermo intero",
"viewLargerMap": "Visualizza mappa più grande"
},
"helptexts": {
"scaleBox": "Questo è il testo di aiuto per ScaleBox",
Expand Down

0 comments on commit 0964d4d

Please sign in to comment.