mediawiki-skins-MinervaNeue/resources/skins.minerva.options/BackToTopOverlay.js
jdlrobson ef5003f310 Curtail use of mw.mobileFrontend in Minerva
The MobileFrontend dependency in Minerva is problematic.
Code that Minerva needs should live in core.
MobileFrontend should load code on all skins when they operate on
a mobile domain.
This eslint check reminds developers of this in a hope it encourages
more upstreaming to core when possible.
Of course disabling is also an option, but this check will at least
make us aware of when we are moving further away from the goal.

Change-Id: I62183c9aefc81053e4ad81fb746decef2dd24b44
2019-10-01 14:54:59 +00:00

60 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.mustache' ),
/**
* 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 no-jquery/no-global-selector
$( 'html, body' ).animate( { scrollTop: 0 }, 400 );
}
} );
module.exports = BackToTopOverlay;
// eslint-disable-next-line no-restricted-properties
}( mw.mobileFrontend ) );