mediawiki-skins-MinervaNeue/resources/skins.minerva.options/BackToTopOverlay.js
Stephen Niedzielski 66c44402d7 Hygiene: replace OO.mfExtend with mobile.mfExtend
Use the mobile.startup module mfExtend export directly instead of
OO. This will allow MobileFrontend to reduce its exposed API.

Bug: T208915
Depends-On: Idededf132f724176c38c5e0a7c9327f00489a09d
Change-Id: Id582325c830c229240b88cf4e151afea48fea750
2019-02-08 21:42:03 +00:00

59 lines
1.4 KiB
JavaScript

( function ( M ) {
var
mobile = M.require( 'mobile.startup' ),
mfExtend = mobile.mfExtend,
View = mobile.View,
util = mobile.util;
/**
* Displays a little arrow at the bottom right of the viewport.
* @class BackToTopOverlay
* @extends View
* @param {Object} props
*/
function BackToTopOverlay( props ) {
View.call( this,
util.extend( {}, props, {
className: 'backtotop',
events: { click: 'onBackToTopClick' }
} )
);
}
mfExtend( BackToTopOverlay, View, {
template: mw.template.get( 'skins.minerva.options', 'BackToTopOverlay.hogan' ),
/**
* Show the back to top element, if it's not visible already.
* @memberof BackToTopOverlay
* @instance
*/
show: function () {
this.$el.css( 'visibility', 'visible' ).addClass( 'visible' );
},
/**
* Hide the back to top element, if it's visible.
* @memberof BackToTopOverlay
* @instance
*/
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
*/
onBackToTopClick: function () {
// eslint-disable-next-line jquery/no-global-selector, jquery/no-animate
$( 'html, body' ).animate( { scrollTop: 0 }, 400 );
}
} );
M.define( 'skins.minerva.options/BackToTopOverlay', BackToTopOverlay );
}( mw.mobileFrontend ) );