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