User:Jdlrobson/scripts/backtotop.js: Difference between revisions

Content deleted Content added
Created page with 'mw.loader.load( '/w/index.php?title=User:Jdlrobson/scripts/backtotop.css&action=raw&ctype=text/css', 'text/css' ).then(function () { var backtotop, // eslint-...'
Tags: Mobile edit Mobile web edit
 
No edit summary
Tags: Mobile edit Mobile web edit
Line 1:
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;
 
var backtotop,
/**
// eslint-disable-next-line no-restricted-properties
* Displays a little arrow at the bottom right of the viewport.
M = mw.mobileFrontend,
* @class BackToTopOverlay
mobile = M.require( 'mobile.startup' ),
* @extends View
View = mobile.View,
* @param {Object} props
browser = mobile.Browser.getSingleton(),
*/
eventBus = mobile.eventBusSingleton;
function BackToTopOverlay( props ) {
View.call( this,
$.extend( {}, props, {
className: 'backtotop',
events: { click: 'onBackToTopClick' }
} )
);
}
 
/**
OO.inheritClass( BackToTopOverlay, View );
* 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' );
 
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' );
};
 
/**
* HideShow the back to top element, if it's not visible already.
* @memberof BackToTopOverlay
* @instance
*/
BackToTopOverlay.prototype.hideshow = function () {
this.$el.removeClasscss( 'visibility', 'visible' ).addClass( 'visible' );
};
 
/**
* Handles the click* onHide the "Backback to top" element, andif scrollsit's backvisible.
* @memberof BackToTopOverlay
* to the top smoothly.
* @instance
* @memberof BackToTopOverlay
*/
* @instance
BackToTopOverlay.prototype.hide = function () {
*/
this.$el.removeClass( 'visible' );
BackToTopOverlay.prototype.onBackToTopClick = function () {
};
// eslint-disable-next-line no-jquery/no-global-selector
$( 'html, body' ).animate( { scrollTop: 0 }, 400 );
};
 
/**
* 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 () {
backtotop = new BackToTopOverlay();
if ( $( window ).height() - $( window ).scrollTop() <= 0 ) {
// initialize the back to top element
backtotop.show();
backtotop.appendTo( 'body' );
} else {
 
backtotop.hide();
eventBus.on( 'scroll', function () {
}
if ( $( window ).height() - $( window ).scrollTop() <= 0 ) {
} );
backtotop.show();
}
} else {
});
backtotop.hide();
}
} );