Add a button to open in full mapstore (see #1632)

docma-config.json

@@ -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",
 
@@ -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",

web/client/api.html

@@ -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>

web/client/components/buttons/GoFullButton.jsx

@@ -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;

web/client/components/buttons/__tests__/GoFullButton-test.jsx

@@ -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();
+    });
+});

web/client/components/share/ShareApi.jsx

@@ -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>);

web/client/components/share/api-template.raw

@@ -33,7 +33,8 @@
         <script type="text/javascript">
         function init() {
             MapStore2.create('container',{
-                configUrl: "__CONFIG__URL__"
+                configUrl: "__CONFIG__URL__",
+                originalUrl: "__ORIGINAL_URL__"
             });
         }
         </script>

web/client/epics/__tests__/search-test.js

@@ -192,6 +192,6 @@ describe('search Epics', () => {
 
             done();
             // setting 0 as delay arises script error
-        }, 100);
+        }, 300);
     });
 });

web/client/jsapi/MapStore2.js

@@ -138,7 +138,8 @@ const defaultPlugins = {
           "Expander",
           "Undo",
           "Redo",
-          "FullScreen"
+          "FullScreen",
+          "GoFull"
     ]
 };
 
@@ -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
@@ -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,

web/client/plugins/GoFull.jsx

@@ -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: {}
+};

web/client/product/apiPlugins.js

@@ -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: {

web/client/product/plugins.js

@@ -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,

web/client/product/pluginsEmbedded.js

@@ -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: {

web/client/translations/data.de-DE

@@ -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",

web/client/translations/data.en-US

@@ -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",

web/client/translations/data.fr-FR

@@ -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",

web/client/translations/data.it-IT

@@ -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",