From 038103299a4df21ce834aa77a4a9a9da20299066 Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Mon, 23 Oct 2017 09:37:32 -0700
Subject: [PATCH] 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           |  3 ++
 .../BackToTopOverlay.hogan                    |  1 +
 .../BackToTopOverlay.js                       | 46 ++++++++++++++++++
 .../skins.minerva.backtotop/backtotop.less    | 47 +++++++++++++++++++
 resources/skins.minerva.backtotop/init.js     |  2 +-
 skin.json                                     | 10 +++-
 6 files changed, 107 insertions(+), 2 deletions(-)
 create mode 100644 resources/skins.minerva.backtotop/BackToTopOverlay.hogan
 create mode 100644 resources/skins.minerva.backtotop/BackToTopOverlay.js
 create mode 100644 resources/skins.minerva.backtotop/backtotop.less

diff --git a/minerva.less/minerva.variables.less b/minerva.less/minerva.variables.less
index f721b32..968e3eb 100644
--- a/minerva.less/minerva.variables.less
+++ b/minerva.less/minerva.variables.less
@@ -107,3 +107,6 @@
 // Print specific
 @printBorderColor: #9aa0a7;
 @printBorderColorLight: @colorGray12;
+
+// z-index:
+@z-indexOverlay: 1;
diff --git a/resources/skins.minerva.backtotop/BackToTopOverlay.hogan b/resources/skins.minerva.backtotop/BackToTopOverlay.hogan
new file mode 100644
index 0000000..1dd5be9
--- /dev/null
+++ b/resources/skins.minerva.backtotop/BackToTopOverlay.hogan
@@ -0,0 +1 @@
+<div class="arrow-up"></div>
diff --git a/resources/skins.minerva.backtotop/BackToTopOverlay.js b/resources/skins.minerva.backtotop/BackToTopOverlay.js
new file mode 100644
index 0000000..eecf7c0
--- /dev/null
+++ b/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 ) );
diff --git a/resources/skins.minerva.backtotop/backtotop.less b/resources/skins.minerva.backtotop/backtotop.less
new file mode 100644
index 0000000..c9f24d0
--- /dev/null
+++ b/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% );
+	}
+}
diff --git a/resources/skins.minerva.backtotop/init.js b/resources/skins.minerva.backtotop/init.js
index 39cc340..f6553a6 100644
--- a/resources/skins.minerva.backtotop/init.js
+++ b/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();
 
diff --git a/skin.json b/skin.json
index c692eb3..6db3580 100644
--- a/skin.json
+++ b/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"
 			]
 		},