|
/* This script is no longer being maintained. Feel free to fork an old revision if you want to maintain it going forward. */
mw.loader.load( '/w/index.php?title=User:Jdlrobson/scripts/backtotop.css&action=raw&ctype=text/css', 'text/css' ).then(function () {
var backtotop,
// eslint-disable-next-line no-restricted-properties
M = mw.mobileFrontend,
mobile = M.require( 'mobile.startup' ),
View = mobile.View,
features = mw.config.get( 'wgMinervaFeatures', {} ),
browser = mobile.Browser.getSingleton(),
eventBus = mobile.eventBusSingleton;
/**
* Displays a little arrow at the bottom right of the viewport.
* @class BackToTopOverlay
* @extends View
* @param {Object} props
*/
function BackToTopOverlay( props ) {
View.call( this,
$.extend( {}, props, {
className: 'backtotop',
events: { click: 'onBackToTopClick' }
} )
);
}
OO.inheritClass( BackToTopOverlay, View );
BackToTopOverlay.prototype.template = mw.template.get( 'skins.minerva.options', 'BackToTopOverlay.mustache' );
/**
* Show the back to top element, if it's not visible already.
* @memberof BackToTopOverlay
* @instance
*/
BackToTopOverlay.prototype.show = function () {
this.$el.css( 'visibility', 'visible' ).addClass( 'visible' );
};
/**
* Hide the back to top element, if it's visible.
* @memberof BackToTopOverlay
* @instance
*/
BackToTopOverlay.prototype.hide = function () {
this.$el.removeClass( 'visible' );
};
/**
* Handles the click on the "Back to top" element and scrolls back
* to the top smoothly.
* @memberof BackToTopOverlay
* @instance
*/
BackToTopOverlay.prototype.onBackToTopClick = function () {
// eslint-disable-next-line no-jquery/no-global-selector
$( 'html, body' ).animate( { scrollTop: 0 }, 400 );
};
// check if browser user agent is iOS (T141598)
if ( browser.isIos() || !features.backToTop ) {
return;
} else {
backtotop = new BackToTopOverlay();
// initialize the back to top element
backtotop.appendTo( 'body' );
eventBus.on( 'scroll', function () {
if ( $( window ).height() - $( window ).scrollTop() <= 0 ) {
backtotop.show();
} else {
backtotop.hide();
}
} );
}
});
| 