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
63 lines
1.9 KiB
JavaScript
63 lines
1.9 KiB
JavaScript
/* eslint-disable no-jquery/no-global-selector */
|
|
module.exports = function () {
|
|
var mobileMediaQuery = window.matchMedia( 'screen and (max-width: 550px)' ),
|
|
echoHacked = false,
|
|
echoHackActive = false,
|
|
notifications = $( '#pt-notifications-alert a' ).data( 'counter-num' ) + $( '#pt-notifications-notice a' ).data( 'counter-num' ),
|
|
notificationsString;
|
|
|
|
// When the icons are clicked for the first time, they are replaced with a JS interface,
|
|
// so don't cache this in a long-lived variable
|
|
function getNotificationIcons() {
|
|
return $( '#pt-notifications-alert, #pt-notifications-notice' );
|
|
}
|
|
|
|
// Move echo badges in/out of p-personal
|
|
function monoBookMobileMoveEchoIcons() {
|
|
var $notificationIcons = getNotificationIcons();
|
|
if ( $notificationIcons.length ) {
|
|
if ( !echoHackActive && mobileMediaQuery.matches ) {
|
|
$( '#echo-hack-badges' ).append( $notificationIcons );
|
|
|
|
echoHackActive = true;
|
|
} else if ( echoHackActive && !mobileMediaQuery.matches ) {
|
|
$( $notificationIcons ).insertBefore( '#pt-mytalk' );
|
|
|
|
echoHackActive = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
function monoBookMobileEchoHack() {
|
|
var $notificationIcons = getNotificationIcons();
|
|
if ( $notificationIcons.length ) {
|
|
if ( !echoHacked && mobileMediaQuery.matches ) {
|
|
if ( notifications ) {
|
|
notificationsString = mw.msg( 'monobook-notifications-link', notifications );
|
|
} else {
|
|
notificationsString = mw.msg( 'monobook-notifications-link-none' );
|
|
}
|
|
|
|
// add inline p-personal echo link
|
|
mw.util.addPortletLink(
|
|
'p-personal',
|
|
mw.util.getUrl( 'Special:Notifications' ),
|
|
notificationsString,
|
|
'pt-notifications',
|
|
$( '#pt-notifications-notice' ).attr( 'tooltip' ),
|
|
null,
|
|
'#pt-preferences'
|
|
);
|
|
|
|
$( '#p-personal-toggle' ).append( $( '<ul>' ).attr( 'id', 'echo-hack-badges' ) );
|
|
|
|
echoHacked = true;
|
|
}
|
|
|
|
monoBookMobileMoveEchoIcons();
|
|
}
|
|
}
|
|
|
|
$( window ).on( 'resize', monoBookMobileEchoHack );
|
|
monoBookMobileEchoHack();
|
|
};
|