Fix #1633. Add scroll to top plugin (#1652)

* Fix #1633. Add scroll to top plugin * fixed docs * Fixed version and empty line
geosolutions-it · Mar 29, 2017 · 32f341d · 32f341d
1 parent b8a360c
commit 32f341d
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 3 deletions.
diff --git a/docma-config.json b/docma-config.json
@@ -131,7 +131,8 @@
                 "web/client/plugins/BackgroundSwitcher.jsx",
                 "web/client/plugins/Map.jsx",
                 "web/client/plugins/Identify.jsx",
-                "web/client/plugins/Login.jsx"
+                "web/client/plugins/Login.jsx",
+                "web/client/plugins/ScrollTop.jsx"
             ]
         },
         "./docs/**/*md",

diff --git a/package.json b/package.json
@@ -132,6 +132,7 @@
     "react-responsive": "1.1.3",
     "react-router": "2.5.2",
     "react-router-redux": "3.0.0",
+    "react-scroll-up": "1.2.1",
     "react-select": "1.0.0-rc.1",
     "react-selectize": "2.0.3",
     "react-share": "1.8.0",

diff --git a/web/client/localConfig.json b/web/client/localConfig.json
@@ -1,4 +1,5 @@
 {
+
     "proxyUrl": {
         "url": "/mapstore/proxy/?url=",
         "useCORS": ["https://demo.geo-solutions.it/geoserver"]
@@ -263,7 +264,7 @@
             "cfg": {
                 "className": "navbar shadow navbar-home"
             }
-        }, "ManagerMenu", "Login", "Language", "Attribution"],
+        }, "ManagerMenu", "Login", "Language", "Attribution", "ScrollTop"],
         "maps": ["Header", "Fork", "MapSearch", "HomeDescription", "MapType", "ThemeSwitcher", "CreateNewMap", "Maps", "Examples", "Footer"],
         "manager": ["Header", "Redirect", "Manager", "Home", "UserManager", "GroupManager", "Footer"]
     }

diff --git a/web/client/plugins/ScrollTop.jsx b/web/client/plugins/ScrollTop.jsx
@@ -0,0 +1,54 @@
+/*
+ * 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 ScrollUp = require('react-scroll-up');
+const Message = require('../components/I18N/Message');
+const {Glyphicon, Button, OverlayTrigger, Tooltip} = require('react-bootstrap');
+
+/**
+ * ScrollUp Plugin. Show a button that allows to scroll to the top of the page. Only for full pages.
+ * @prop style {object} the style of the scrollUp div
+ * @prop showUnder {number} pixels of scroll before to show the button
+ * @memberof plugins
+ * @class
+ * @static
+ */
+const ScrollTop = React.createClass({
+    propTypes: {
+        style: React.PropTypes.object,
+        showUnder: React.PropTypes.number
+    },
+    getDefaultProps() {
+        return {
+            showUnder: 200,
+            style: {
+              zIndex: 10,
+              position: 'fixed',
+              bottom: 50,
+              right: 30,
+              cursor: 'pointer',
+              transitionDuration: '0.2s',
+              transitionTimingFunction: 'linear',
+              transitionDelay: '0s'
+            }
+        };
+    },
+    render() {
+        return (
+            <ScrollUp style={this.props.style} showUnder={this.props.showUnder}>
+                <OverlayTrigger placement="left" overlay={<Tooltip><Message msgId="home.scrollTop"/></Tooltip>}>
+                    <Button bsStyle="primary"><Glyphicon glyph="arrow-up"/></Button>
+                </OverlayTrigger>
+            </ScrollUp>);
+    }
+});
+
+
+module.exports = {
+    ScrollTopPlugin: ScrollTop
+};
diff --git a/web/client/product/plugins.js b/web/client/product/plugins.js
@@ -62,7 +62,8 @@ module.exports = {
         QueryPanelPlugin: require('../plugins/QueryPanel'),
         FeatureGridPlugin: require('../plugins/FeatureGrid'),
         TutorialPlugin: require('../plugins/Tutorial'),
-        ThemeSwitchePluginr: require('../plugins/ThemeSwitcher')
+        ThemeSwitchePluginr: require('../plugins/ThemeSwitcher'),
+        ScrollTopPlugin: require('../plugins/ScrollTop')
     },
     requires: {
         ReactSwipe: require('react-swipeable-views').default,

diff --git a/web/client/translations/data.de-DE b/web/client/translations/data.de-DE
@@ -69,6 +69,7 @@
             "Applications": "Anwendungen",
             "Examples": "Beispiele",
             "LinkedinGroup": "Mapstore Linkedin Gruppe",
+            "scrollTop": "An den Anfang der Seite scrollen",
             "ml": {
                 "title": "Bleibe in Verbindung und auf dem Laufenden mit der Mailing Liste",
                 "subscribe_users": "Abonniere die Benutzer Mailing Liste",

diff --git a/web/client/translations/data.en-US b/web/client/translations/data.en-US
@@ -69,6 +69,7 @@
             "Applications": "Applications",
             "Examples": "Examples",
             "LinkedinGroup": "Mapstore Linkedin Group",
+            "scrollTop": "Scroll to the top of the page",
             "ml": {
                 "title": "Keep in touch and stay up-to-date with the mailing lists",
                 "subscribe_users": "Subscribe Users Mailing List",

diff --git a/web/client/translations/data.fr-FR b/web/client/translations/data.fr-FR
@@ -70,6 +70,7 @@
             "Applications": "Applications",
             "Examples": "Exemples",
             "LinkedinGroup": "Mapstore Linkedin groupe",
+            "scrollTop": "Retour en haut de la page",
             "ml": {
                 "title": "Restez au fait des derniers développements via les mailing lists",
                 "subscribe_users": "Souscrire à la Mailing List utilisateurs",

diff --git a/web/client/translations/data.it-IT b/web/client/translations/data.it-IT
@@ -69,6 +69,7 @@
             "Applications": "Applicazioni",
             "Examples": "Esempi",
             "LinkedinGroup": "Gruppo Linkedin Mapstore",
+            "scrollTop": "Torna all'inizio della pagina",
             "ml": {
                 "title": "Resta in contatto e tieniti aggiornato con le mailing list",
                 "subscribe_users": "Sottoscrivi la mailing list degli utenti",