Minerva owns BacktoTopOverlay

Not used in MobileFrontend so it is moved here from that repo.
t r
Change-Id: I97e6010026daf4c6610bcfbedf140fb2a45b1130

minerva.less/minerva.variables.less

@@ -107,3 +107,6 @@
 // Print specific
 @printBorderColor: #9aa0a7;
 @printBorderColorLight: @colorGray12;
+
+// z-index:
+@z-indexOverlay: 1;

resources/skins.minerva.backtotop/BackToTopOverlay.hogan

@@ -0,0 +1 @@
+<div class="arrow-up"></div>

resources/skins.minerva.backtotop/BackToTopOverlay.js

@@ -0,0 +1,46 @@
+( function ( M, $ ) {
+
+	var View = M.require( 'mobile.startup/View' );
+
+	/**
+	 * Displays a little arrow at the bottom right of the viewport.
+	 * @class BackToTopOverlay
+	 * @extends View
+	 */
+	function BackToTopOverlay() {
+		View.apply( this, arguments );
+	}
+
+	OO.mfExtend( BackToTopOverlay, View, {
+		className: 'backtotop',
+		template: mw.template.get( 'skins.minerva.backtotop', 'BackToTopOverlay.hogan' ),
+		events: $.extend( {}, View.prototype.events, {
+			click: 'onBackToTopClick'
+		} ),
+
+		/**
+		 * Show the back to top element, if it's not visible already.
+		 */
+		show: function () {
+			this.$el.css( 'visibility', 'visible' ).addClass( 'visible' );
+		},
+
+		/**
+		 * Hide the back to top element, if it's visible.
+		 */
+		hide: function () {
+			this.$el.removeClass( 'visible' );
+		},
+
+		/**
+		 * Handles the click on the "Back to top" element and scrolls back
+		 * to the top smoothly.
+		 */
+		onBackToTopClick: function () {
+			$( 'html, body' ).animate( { scrollTop: 0 }, 400 );
+		}
+	} );
+
+	M.define( 'skins.minerva.backtotop/BackToTopOverlay', BackToTopOverlay );
+
+}( mw.mobileFrontend, jQuery ) );

resources/skins.minerva.backtotop/backtotop.less

@@ -0,0 +1,47 @@
+@import 'minerva.variables';
+@import 'mediawiki.mixins.less';
+
+.backtotop {
+	/* initially hide the element */
+	visibility: hidden;
+	opacity: 0;
+
+	/* basic styling */
+	position: fixed;
+	width: 2.5em;
+	height: 2.5em;
+	border-radius: 100%;
+	box-shadow: 0.1em 0.2em 0.3em @colorGray12;
+	bottom: 20px;
+	right: 0;
+	cursor: pointer;
+	z-index: @z-indexOverlay;
+	background-color: @colorProgressive;
+
+	/* define what happens, if the visible class is added/removed, add a nice fade out/in */
+	.transition( opacity 0.5s 0s );
+
+	&.visible {
+		&:hover {
+			opacity: 1;
+		}
+		opacity: 0.8;
+	}
+
+	> .arrow-up {
+		width: 0;
+		height: 0;
+		border-left: 7px solid transparent;
+		border-right: 7px solid transparent;
+		border-bottom: 7px solid #fff;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate( -50%, -50% );
+	}
+
+	/* center arrow in RTL wikis */
+	.rtl > & .arrow-up {
+		transform: translate( 50%, -50% );
+	}
+}

resources/skins.minerva.backtotop/init.js

@@ -1,5 +1,5 @@
 ( function ( M, $ ) {
-	var BackToTopOverlay = M.require( 'mobile.backtotop/BackToTopOverlay' ),
+	var BackToTopOverlay = M.require( 'skins.minerva.backtotop/BackToTopOverlay' ),
 		backtotop = new BackToTopOverlay(),
 		browser = M.require( 'mobile.startup/Browser' ).getSingleton();
 

skin.json

@@ -385,16 +385,24 @@
 				"resources/skins.minerva.editor/init.js"
 			]
 		},
+
 		"skins.minerva.backtotop": {
 			"targets": [
 				"mobile",
 				"desktop"
 			],
 			"dependencies": [
-				"mobile.backtotop",
+				"mobile.toggle",
 				"mobile.startup"
 			],
+			"templates": {
+				"BackToTopOverlay.hogan": "resources/skins.minerva.backtotop/BackToTopOverlay.hogan"
+			},
+			"styles": [
+				"resources/skins.minerva.backtotop/backtotop.less"
+			],
 			"scripts": [
+				"resources/skins.minerva.backtotop/BackToTopOverlay.js",
 				"resources/skins.minerva.backtotop/init.js"
 			]
 		},