Fix #1633. Add scroll to top plugin

docma-config.json

@@ -131,7 +131,9 @@
                 "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",

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

web/client/localConfig.json

@@ -263,7 +263,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"]
 	}

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
+};

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,

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

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

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

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