6c53b601f8
If the page was long enough to have a vertical scrollbar, the check for `$( window ).width()` would be incorrect because of the width of the scrollbar itself. The correct value is `$( window ).outerWidth()`. But rather than deal with that, we can instead use the API specifically for matching media queries [1], then copy-paste the media query from CSS and not have to think about it at all! [1] https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia Bug: T227916 Change-Id: I79478040620391f5391b10aee52134fde0b88adf
63 lines
1.9 KiB
JavaScript
63 lines
1.9 KiB
JavaScript
/* eslint-disable no-jquery/no-global-selector */
|
|
$( 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();
|
|
} );
|