Skip to content

Commit

Permalink
Add a button to open in full mapstore (see #1632) (#1696)
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.

* Externalized component and add tests

* made also search epic test more rubust
  • Loading branch information
offtherailz authored Apr 6, 2017
1 parent ab81b0e commit f7437a4
Show file tree
Hide file tree
Showing 16 changed files with 187 additions and 10 deletions.
2 changes: 2 additions & 0 deletions docma-config.json
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@
"framework" : [
"web/client/components/index.jsdoc",
"web/client/components/buttons/FullScreenButton.jsx",
"web/client/components/buttons/GoFullButton.jsx",
"web/client/components/mapcontrols/search/SearchBar.jsx",
"web/client/components/buttons/ToggleButton.jsx",

Expand All @@ -131,6 +132,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
76 changes: 76 additions & 0 deletions web/client/components/buttons/GoFullButton.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
/*
* 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 {Button, Glyphicon, Tooltip} = require('react-bootstrap');
const OverlayTrigger = require('../misc/OverlayTrigger');
const Message = require('../I18N/Message');

const ConfigUtils = require('../../utils/ConfigUtils');
/**
* Button for Go to Full MapStore2.
* @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 components.buttons
* @class
*/
const GoFullButton = React.createClass({
propTypes: {
glyph: React.PropTypes.string,
tooltip: React.PropTypes.string,
urlRegex: React.PropTypes.string,
urlReplaceString: 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 null;
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, this.props.urlReplaceString);
}
}
});

module.exports = GoFullButton;
46 changes: 46 additions & 0 deletions web/client/components/buttons/__tests__/GoFullButton-test.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/**
* 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.
*/
var expect = require('expect');

var React = require('react');
var ReactDOM = require('react-dom');
var GoFullButton = require('../GoFullButton');

describe("test the GoFullButton", () => {
beforeEach((done) => {
document.body.innerHTML = '<div id="container"></div>';
setTimeout(done);
});

afterEach((done) => {
ReactDOM.unmountComponentAtNode(document.getElementById("container"));
document.body.innerHTML = '';
setTimeout(done);
});

it('test not showing', () => {
const tb = ReactDOM.render(<GoFullButton/>, document.getElementById("container"));
expect(tb).toExist();
const tbNode = ReactDOM.findDOMNode(tb);
expect(tbNode).toNotExist();
});
it('test showing on originalUrl property set', () => {
const tb = ReactDOM.render(<GoFullButton originalUrl={"TEST"}/>, document.getElementById("container"));
expect(tb).toExist();
const tbNode = ReactDOM.findDOMNode(tb);
expect(tbNode).toExist();
});
it('test showing on regex match', () => {
const href = location.href;
const tb = ReactDOM.render(<GoFullButton urlRegex={"(.*)"} urlReplaceString={"$1"}/>, document.getElementById("container"));
expect(tb).toExist();
expect(tb.generateUrl()).toBe(href);
const tbNode = ReactDOM.findDOMNode(tb);
expect(tbNode).toExist();
});
});
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
2 changes: 1 addition & 1 deletion web/client/epics/__tests__/search-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,6 @@ describe('search Epics', () => {

done();
// setting 0 as delay arises script error
}, 100);
}, 300);
});
});
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
37 changes: 37 additions & 0 deletions web/client/plugins/GoFull.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/*
* 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 {connect} = require('react-redux');

/**
* GoFull plugin. 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 GoFull
*/
const GoFullPlugin = connect(() => ({}))(require('../components/buttons/GoFullButton'));

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 f7437a4

Please sign in to comment.