Florianschmidtwelzow has uploaded a new change for review.
https://gerrit.wikimedia.org/r/242185
Change subject: Add a "back to top" button to the bottom right of the page
......................................................................
Add a "back to top" button to the bottom right of the page
It's only visible, if the "first screen" isn't in the viewport anymore.
Bug: T98701
Change-Id: I11a8ccb1e701644dcb328bfec9fe346f75ae1b71
---
M includes/Resources.php
A resources/mobile.backtotop/BackToTopOverlay.hogan
A resources/mobile.backtotop/BackToTopOverlay.js
A resources/mobile.backtotop/backtotop.js
A resources/mobile.backtotop/backtotop.less
A resources/skins.minerva.beta.scripts/backtotop.js
6 files changed, 132 insertions(+), 0 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/85/242185/1
diff --git a/includes/Resources.php b/includes/Resources.php
index bea7c07..c509742 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -394,6 +394,23 @@
),
),
+ 'mobile.backtotop' => $wgMFResourceFileModuleBoilerplate + array(
+ 'dependencies' => array(
+ 'mobile.startup',
+ 'mobile.toggling',
+ ),
+ 'scripts' => array(
+ 'resources/mobile.backtotop/BackToTopOverlay.js',
+ 'resources/mobile.backtotop/backtotop.js',
+ ),
+ 'styles' => array(
+ 'resources/mobile.backtotop/backtotop.less',
+ ),
+ 'templates' => array(
+ 'BackToTopOverlay.hogan' =>
'resources/mobile.backtotop/BackToTopOverlay.hogan',
+ ),
+ ),
+
// FIXME: Split this module into different features.
'mobile.startup' => $wgMFResourceFileModuleBoilerplate + array(
'dependencies' => array(
@@ -1698,6 +1715,7 @@
// These modules should only setup routes/events or
// load code under certain conditions.
'mobile.search.beta',
+ 'mobile.backtotop',
),
'scripts' => array(
'resources/skins.minerva.beta.scripts/commonsCategory.js',
diff --git a/resources/mobile.backtotop/BackToTopOverlay.hogan
b/resources/mobile.backtotop/BackToTopOverlay.hogan
new file mode 100644
index 0000000..1dd5be9
--- /dev/null
+++ b/resources/mobile.backtotop/BackToTopOverlay.hogan
@@ -0,0 +1 @@
+<div class="arrow-up"></div>
diff --git a/resources/mobile.backtotop/BackToTopOverlay.js
b/resources/mobile.backtotop/BackToTopOverlay.js
new file mode 100644
index 0000000..5b76dc1
--- /dev/null
+++ b/resources/mobile.backtotop/BackToTopOverlay.js
@@ -0,0 +1,48 @@
+( function ( M, $ ) {
+
+ var BackToTopOverlay,
+ View = M.require( 'mobile.view/View' );
+
+ /**
+ * Displays a little arrow at the bottom right of the viewport.
+ * @class BackToTopOverlay
+ * @extends View
+ */
+ BackToTopOverlay = View.extend( {
+ /**
+ * @inheritdoc
+ */
+ className: 'backtotop',
+ /**
+ * @inheritdoc
+ */
+ template: mw.template.get( 'mobile.backtotop',
'BackToTopOverlay.hogan' ),
+ /**
+ * @inheritdoc
+ */
+ 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' );
+ },
+
+ onBackToTopClick: function () {
+ $( 'html, body' ).animate( { scrollTop: 0 }, 400 );
+ }
+ } );
+
+ M.define( 'mobile.backtotop/BackToTopOverlay', BackToTopOverlay );
+
+}( mw.mobileFrontend, jQuery ) );
diff --git a/resources/mobile.backtotop/backtotop.js
b/resources/mobile.backtotop/backtotop.js
new file mode 100644
index 0000000..1de923b
--- /dev/null
+++ b/resources/mobile.backtotop/backtotop.js
@@ -0,0 +1,23 @@
+( function ( M, $ ) {
+ var BackToTopOverlay = M.require( 'mobile.backtotop/BackToTopOverlay' ),
+ backtotop = new BackToTopOverlay();
+
+ function showBackToTop() {
+ backtotop.show();
+ }
+
+ function hideBackToTop() {
+ backtotop.hide();
+ }
+
+ // initialize the back to top element
+ backtotop.appendTo( '.content' );
+
+ $( window ).on( 'scroll', function ( ev ) {
+ if ( $( window ).height() - $( window ).scrollTop() <= 0 ) {
+ showBackToTop();
+ } else {
+ hideBackToTop();
+ }
+ } );
+}( mw.mobileFrontend, jQuery ) );
diff --git a/resources/mobile.backtotop/backtotop.less
b/resources/mobile.backtotop/backtotop.less
new file mode 100644
index 0000000..1586d24
--- /dev/null
+++ b/resources/mobile.backtotop/backtotop.less
@@ -0,0 +1,42 @@
+@import "minerva.variables";
+@import "minerva.mixins";
+
+.backtotop {
+ /* initially hide the element */
+ visibility: hidden;
+ opacity: 0;
+
+ /* basic styling */
+ position: fixed;
+ width: 2.5em;
+ height: 2.5em;
+ border-radius: 100%;
+ box-shadow: .1em .2em .3em lightgrey;
+ bottom: 20px;
+ right: @contentMargin;
+ cursor: pointer;
+ z-index: @z-indexOverlay;
+ background-color: @colorConstructive;
+
+ /* define what happens, if the visible class is added/removed, add a
nice fade out/in */
+ .transition( opacity .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 white;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+}
diff --git a/resources/skins.minerva.beta.scripts/backtotop.js
b/resources/skins.minerva.beta.scripts/backtotop.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/resources/skins.minerva.beta.scripts/backtotop.js
--
To view, visit https://gerrit.wikimedia.org/r/242185
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I11a8ccb1e701644dcb328bfec9fe346f75ae1b71
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Florianschmidtwelzow <florian.schmidt.stargatewis...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
