Fixes geosolutions-it#567: added copy to clipboard to mouseposition e…

…xample (geosolutions-it#568)
offtherailz · May 18, 2016 · 4745e02 · 4745e02
1 parent c762f42
commit 4745e02
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 6 deletions.
diff --git a/web/client/examples/mouseposition/app.jsx b/web/client/examples/mouseposition/app.jsx
@@ -11,10 +11,7 @@ var { createStore, combineReducers } = require('redux');
 var { changeBrowserProperties} = require('../../actions/browser');
 var ConfigUtils = require('../../utils/ConfigUtils');
 var browser = require('../../reducers/browser');
-var BootstrapReact = require('react-bootstrap');
-var Grid = BootstrapReact.Grid;
-var Row = BootstrapReact.Row;
-var Col = BootstrapReact.Col;
+var {Modal, Grid, Row, Col, Button} = require('react-bootstrap');
 var LMap = require('../../components/map/leaflet/Map');
 var LLayer = require('../../components/map/leaflet/Layer');
 var mouseposition = require('../../reducers/mousePosition');
@@ -46,11 +43,30 @@ function startApp() {
                 browser: {touch: false}
             };
         },
+        getInitialState() {
+            return {
+                showAlert: false
+            };
+        },
+        onCopy() {
+            this.setState({showAlert: true});
+        },
         render() {
             if (this.props.browser.touch) {
                 return <div className="error">This example does not work on mobile</div>;
             }
             return (<div id="viewer" >
+            <Modal show={this.state.showAlert} onHide={this.closeAlert}>
+              <Modal.Header closeButton>
+                <Modal.Title>Clipboard</Modal.Title>
+              </Modal.Header>
+              <Modal.Body>
+                Succesfully copied to clipboard!
+              </Modal.Body>
+              <Modal.Footer>
+                <Button onClick={this.closeAlert}>Close</Button>
+              </Modal.Footer>
+            </Modal>
                     <Grid fluid={false} className="mousepositionsbar">
                     <Row>
                         <Col lg={4} md={6} xs={12}>
@@ -59,15 +75,21 @@ function startApp() {
                                 degreesTemplate={SearchGeoS}/>
                         </Col>
                         <Col lg={4} md={6} xs={12}>
-                            <MousePosition id="wgs84" key="wgs84" mousePosition={this.props.mousePosition} crs="EPSG:4326"/>
+                            <MousePosition
+                                copyToClipboardEnabled
+                                onCopy={this.onCopy}
+                                id="wgs84" key="wgs84" mousePosition={this.props.mousePosition} crs="EPSG:4326"/>
                         </Col>
                         <Col lg={4} md={4} xs={6}>
                             <MousePosition id="degreedecimal" key="degreedecimal" enabled
                         mousePosition={this.props.mousePosition} crs="EPSG:4326"
                         degreesTemplate={LabelDD}/>
                         </Col>
                     </Row></Grid>
-                    <MousePosition id="google" key="google_prj" mousePosition={this.props.mousePosition} crs="EPSG:900913"/>
+                    <MousePosition id="google"
+                        copyToClipboardEnabled
+                        onCopy={this.onCopy}
+                        key="google_prj" mousePosition={this.props.mousePosition} crs="EPSG:900913"/>
 
                     <MousePosition id="degreeminute" key="degreeminute"
                         mousePosition={this.props.mousePosition} crs="EPSG:4326"
@@ -90,6 +112,9 @@ function startApp() {
                     </LMap>
               </div>
                );
+        },
+        closeAlert() {
+            this.setState({showAlert: false});
         }
     });
 

diff --git a/web/client/examples/mouseposition/components/mouseposition.css b/web/client/examples/mouseposition/components/mouseposition.css
@@ -46,6 +46,11 @@
             background-color:rgba(0,0,0,.8);
         }
 
+        #wgs84 h5 {
+            display: inline-block;
+            margin-right: 10px;
+        }
+
         #degreedecimal {
             font-family: 'PT Sans' !important;
             font-style:  italic;
@@ -143,3 +148,7 @@
             color:rgba(10,10,10,1);
             background-color:rgba(180,180,180,.6);
         }
+        #google h5 {
+            display: inline-block;
+            margin-right: 10px;
+        }