Fixes #863: review embedded layout. Api release (#1688)

geosolutions-it · Apr 5, 2017 · a9046d3 · a9046d3
1 parent 2d60dc0
commit a9046d3
Show file tree

Hide file tree

Showing 17 changed files with 376 additions and 66 deletions.
diff --git a/web/client/api.html b/web/client/api.html
@@ -0,0 +1,39 @@
+<!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>Page with MapStore 2 API</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="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>
+        <style>
+        #container {
+            position: absolute;
+            top: 100px;
+            left: 100px;
+            right: 100px;
+            bottom: 100px;
+        }
+        #mapstore2-embedded, #map, .fill {
+            width: 100%;
+            height: 100%;
+        }
+        </style>
+    </head>
+    <body onload="init()">
+        <div id="container" class="ms2"></div>
+        <script id="ms2-api" src="dist/ms2-api.js"></script>
+        <script type="text/javascript">
+        function init() {
+            MapStore2.create('container');
+        }
+        </script>
+    </body>
+</html>
diff --git a/web/client/components/buttons/ToggleButton.jsx b/web/client/components/buttons/ToggleButton.jsx
@@ -37,7 +37,7 @@ var ToggleButton = React.createClass({
     propTypes: {
         id: React.PropTypes.string,
         btnConfig: React.PropTypes.object,
-        options: React.PropTypes.options,
+        options: React.PropTypes.object,
         text: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
         help: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
         glyphicon: React.PropTypes.string,

diff --git a/web/client/components/share/ShareApi.jsx b/web/client/components/share/ShareApi.jsx
@@ -0,0 +1,69 @@
+/**
+ * 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.
+ */
+
+/*  DESCRIPTION
+    This component contains the code and the button for copy the embedded code
+    to the clipboard
+*/
+
+// components required
+const React = require('react');
+const CopyToClipboard = require('react-copy-to-clipboard');
+const Message = require('../../components/I18N/Message');
+const {Glyphicon, Col, Grid, Row, Tooltip, Button} = require('react-bootstrap');
+const OverlayTrigger = require('../misc/OverlayTrigger');
+
+
+// css required
+require('./share.css');
+
+const codeApi = require('raw-loader!./api-template.raw');
+
+const ShareApi = React.createClass({
+    propTypes: {
+        shareUrl: React.PropTypes.string,
+        shareConfigUrl: React.PropTypes.string
+    },
+    getInitialState() {
+        return {copied: false};
+    },
+  render() {
+      const parsedCode = codeApi
+        .replace('__BASE__URL__', this.props.shareUrl)
+        .replace('__CONFIG__URL__', this.props.shareConfigUrl);
+      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>);
+      const copyTo = (<OverlayTrigger placement="bottom" overlay={tooltip}>
+                          <CopyToClipboard text={parsedCode} onCopy={ () => this.setState({copied: true}) } >
+                              <Button className="buttonCopyTextArea" bsStyle="info" bsSize="large">
+                                  <Glyphicon glyph="copy" onMouseLeave={() => {this.setState({copied: false}); }} />
+                              </Button>
+                          </CopyToClipboard>
+                      </OverlayTrigger>);
+      return (
+          <div className="input-link">
+              <Grid className="embed-box" fluid={true}>
+                  <Row key="title">
+                        <h4>
+                           <Message msgId="share.apiLinkTitle"/>
+                        </h4>
+                    </Row>
+                    <Row key="data" className="row-button">
+                        <Col key="textarea" xs={10} sm={10} md={10}><textarea name="description" rows="6" value={parsedCode} enabled="false" readOnly /></Col>
+                        <Col key="button" xs={2} sm={2} md={2}>
+                            {copyTo}
+                        </Col>
+                    </Row>
+                </Grid>
+          </div>
+      );
+  }
+});
+
+module.exports = ShareApi;
diff --git a/web/client/components/share/SharePanel.jsx b/web/client/components/share/SharePanel.jsx
@@ -19,8 +19,9 @@ const Dialog = require('../misc/Dialog');
 const ShareSocials = require('./ShareSocials');
 const ShareLink = require('./ShareLink');
 const ShareEmbed = require('./ShareEmbed');
+const ShareApi = require('./ShareApi');
 const ShareQRCode = require('./ShareQRCode');
-const {Glyphicon} = require('react-bootstrap');
+const {Glyphicon, Tabs, Tab} = require('react-bootstrap');
 const Message = require('../../components/I18N/Message');
 
 let SharePanel = React.createClass({
@@ -30,6 +31,8 @@ let SharePanel = React.createClass({
         title: React.PropTypes.node,
         shareUrl: React.PropTypes.string,
         shareEmbeddedUrl: React.PropTypes.string,
+        shareApiUrl: React.PropTypes.string,
+        shareConfigUrl: React.PropTypes.string,
         onClose: React.PropTypes.func,
         getCount: React.PropTypes.func,
         closeGlyph: React.PropTypes.string
@@ -46,6 +49,17 @@ let SharePanel = React.createClass({
         /* if the property shareUrl is not defined it takes the url from location.href */
         const shareUrl = this.props.shareUrl || location.href;
         const shareEmbeddedUrl = this.props.shareEmbeddedUrl || this.props.shareUrl || location.href;
+        const shareApiUrl = this.props.shareApiUrl || this.props.shareUrl || location.href;
+        const social = <ShareSocials shareUrl={shareUrl} getCount={this.props.getCount}/>;
+        const direct = (<div><ShareLink shareUrl={shareUrl}/><ShareQRCode shareUrl={shareUrl}/></div>);
+        const code = (<div><ShareEmbed shareUrl={shareEmbeddedUrl}/>
+        <ShareApi shareUrl={shareApiUrl} shareConfigUrl={this.props.shareConfigUrl}/></div>);
+
+        const tabs = (<Tabs defaultActiveKey={1} id="sharePanel-tabs">
+            <Tab eventKey={1} title={<Message msgId="share.direct" />}>{direct}</Tab>
+            <Tab eventKey={2} title={<Message msgId="share.social" />}>{social}</Tab>
+            <Tab eventKey={3} title={<Message msgId="share.code" />}>{code}</Tab>
+          </Tabs>);
 
         let sharePanel = (
             <Dialog id="share-panel-dialog" className="modal-dialog modal-content share-win">
@@ -58,10 +72,7 @@ let SharePanel = React.createClass({
                     </button>
                 </span>
                 <div role="body" className="share-panels">
-                    <ShareSocials shareUrl={shareUrl} getCount={this.props.getCount}/>
-                    <ShareLink shareUrl={shareUrl}/>
-                    <ShareEmbed shareUrl={shareEmbeddedUrl}/>
-                    <ShareQRCode shareUrl={shareUrl}/>
+                    {tabs}
                 </div>
             </Dialog>);
 

diff --git a/web/client/components/share/__tests__/ShareApi-test.jsx b/web/client/components/share/__tests__/ShareApi-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.
+ */
+
+const expect = require('expect');
+const React = require('react');
+const ReactDOM = require('react-dom');
+const ShareApi = require('../ShareApi');
+const ReactTestUtils = require('react-addons-test-utils');
+
+describe("The ShareEmbed component", () => {
+    beforeEach((done) => {
+        document.body.innerHTML = '<div id="container"></div>';
+        setTimeout(done);
+    });
+
+    afterEach((done) => {
+        ReactDOM.unmountComponentAtNode(document.getElementById("container"));
+        document.body.innerHTML = '';
+        setTimeout(done);
+    });
+
+    it('is created with defaults', () => {
+        const cmpSharePanel = ReactDOM.render(<ShareApi/>, document.getElementById("container"));
+        expect(cmpSharePanel).toExist();
+
+    });
+
+    it('should have the address url in the textarea field', () => {
+        const url = location.href;
+        const shareConfigUrl = 'configurl';
+
+        const cmpSharePanel = ReactDOM.render(<ShareApi shareUrl={url} shareConfigUrl={shareConfigUrl}/>, document.getElementById("container"));
+        expect(cmpSharePanel).toExist();
+
+        const textareaEmbed = ReactDOM.findDOMNode(ReactTestUtils.scryRenderedDOMComponentsWithTag(cmpSharePanel, "textarea")[0]);
+        expect(textareaEmbed).toExist();
+        expect(textareaEmbed.value.indexOf(url) !== -1).toBe(true);
+        expect(textareaEmbed.value.indexOf(shareConfigUrl) !== -1).toBe(true);
+    });
+
+});
diff --git a/web/client/components/share/api-template.raw b/web/client/components/share/api-template.raw
@@ -0,0 +1,41 @@
+<!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>Page with MapStore 2 API</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="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>
+        <style>
+        #container {
+            position: absolute;
+            top: 100px;
+            left: 100px;
+            right: 100px;
+            bottom: 100px;
+        }
+        #mapstore2-embedded, #map, .fill {
+            width: 100%;
+            height: 100%;
+        }
+        </style>
+    </head>
+    <body onload="init()">
+        <div id="container" class="ms2"></div>
+        <script id="ms2-api" src="__BASE__URL__dist/ms2-api.js"></script>
+        <script type="text/javascript">
+        function init() {
+            MapStore2.create('container',{
+                configUrl: "__CONFIG__URL__"
+            });
+        }
+        </script>
+    </body>
+</html>