c1ca90ce4b
MonoBook supports two modes - one that is responsive and one that is not. To do this it adds 3 modules. These can be reduced to 1 module by loading all the code and adding client side checks to determine whether to use it. The skin--responsive class is added by core for responsive skins so can be used to make that check. This does lead to additional download for all users (particularly the addition of oojs-ui.styles.icons-alerts) but given the default behaviour is to load these, and non-responsive skin requires an opt in I don't see this as a problem. Thanks to gzip the increase in render blocking styles is minimal: Before: skins.monobook.styles: 15.21KB skins.monobook.responsive: 16.14KB After: skins.monobook.styles: 16.63KB See bug for QA plan. Bug: T285492 Change-Id: I76bb644145539c8ec0220704c8fe9a78a4819c03
101 lines
3.2 KiB
JavaScript
101 lines
3.2 KiB
JavaScript
/* eslint-disable no-jquery/no-global-selector */
|
|
$( function () {
|
|
var mobileMediaQuery = window.matchMedia( 'screen and (max-width: 550px)' ),
|
|
isResponsive = document.body.classList.contains( 'skin--responsive' ),
|
|
echo = require( './mobile-echo.js' ),
|
|
uls = require( './mobile-uls.js' ),
|
|
// Track if DOM has been set up for mobile fanciness yet
|
|
monobookMobileElements = false,
|
|
// Toggles and targets for popouts
|
|
toggles = {
|
|
'#sidebar-toggle': '#sidebar-mobilejs',
|
|
'#p-personal-toggle': '#p-personal',
|
|
'#ca-more a': '#p-cactions',
|
|
'#ca-languages a': '#p-lang',
|
|
'#ca-tools a': '#p-tb'
|
|
};
|
|
|
|
// Close menus
|
|
function closeMenus() {
|
|
$( '.mobile-menu-active' ).removeClass( 'mobile-menu-active' );
|
|
$( '.menus-cover' ).removeClass( 'visible' );
|
|
}
|
|
|
|
// Set up DOM for mobile fanciness
|
|
// We don't automatically do this because MonoBook; most users will be on desktop
|
|
function setupMonoBookMobile() {
|
|
if ( !monobookMobileElements && mobileMediaQuery.matches ) {
|
|
// Duplicate nav
|
|
$( '#column-one' ).append(
|
|
$( '#sidebar' ).clone().find( '*' ).addBack().each( function () {
|
|
if ( this.id ) {
|
|
this.id = this.id + '-mobilejs';
|
|
}
|
|
} ).end().end()
|
|
);
|
|
// Thing to fade out the content while menus are active
|
|
$( '#column-one' ).append( $( '<div>' ).attr( 'id', 'menus-cover-background' ).addClass( 'menus-cover' ) );
|
|
$( '#column-one' ).append( $( '<div>' ).attr( 'id', 'menus-cover' ).addClass( 'menus-cover' ) );
|
|
|
|
// Add extra cactions tabs - edit, editsource, contributions
|
|
// Wrap in function to keep jenkins from whining
|
|
$( function () {
|
|
var newTabs = [
|
|
'ca-edit',
|
|
// 'ca-ve-edit', // TODO when VE is more usable to begin with here
|
|
// 'ca-watch', 'ca-unwatch', // Maybe?
|
|
't-contributions'
|
|
];
|
|
newTabs.forEach( function ( item ) {
|
|
var $a = $( '#' + item + ' a' );
|
|
// TODO check if we're on the page and add class=selected
|
|
|
|
if ( $a.length ) {
|
|
mw.util.addPortletLink(
|
|
'p-cactions-mobile',
|
|
$a.attr( 'href' ),
|
|
$a.text(),
|
|
$a.parent().attr( 'id' ) + '-mobile',
|
|
$a.attr( 'tooltip' ),
|
|
$a.attr( 'accesskey' ),
|
|
'#ca-more'
|
|
);
|
|
}
|
|
} );
|
|
} );
|
|
|
|
// eslint-disable-next-line no-jquery/no-each-util
|
|
$.each( toggles, function ( toggle, target ) {
|
|
// Add close buttons
|
|
$( target ).append( $( '<div>' ).addClass( 'mobile-close-button' ) );
|
|
|
|
// Open menus
|
|
$( toggle ).on( 'click', function () {
|
|
if ( mobileMediaQuery.matches ) {
|
|
$( target ).addClass( 'mobile-menu-active' );
|
|
$( '.menus-cover' ).addClass( 'visible' );
|
|
}
|
|
// Don't still link to # targets
|
|
return false;
|
|
} );
|
|
} );
|
|
|
|
$( '.mobile-close-button, .menus-cover' ).on( 'click', closeMenus );
|
|
// TODO: tap events on same (if not already included in 'click') - also close
|
|
// TODO: appropriate swipe event(s) - also close
|
|
|
|
monobookMobileElements = true;
|
|
}
|
|
}
|
|
|
|
if ( isResponsive ) {
|
|
$( window ).on( 'resize', setupMonoBookMobile );
|
|
setupMonoBookMobile();
|
|
if ( mw.loader.getState( 'ext.uls.interface' ) !== null ) {
|
|
uls();
|
|
}
|
|
if ( mw.loader.getState( 'ext.echo.init' ) !== null && !mw.user.isAnon() ) {
|
|
echo();
|
|
}
|
|
}
|
|
} );
|