mediawiki-skins-MinervaNeue/resources/skins.minerva.scripts/menu.js
jdlrobson ab61dbb173 Echo is removed from Minerva
Managing the transition from old implementation to new:
* A version number is exported from skins.minerva.scripts to
tell dormant code added to Echo in I09c27a084100b223662f84de6cbe01bebe1fe774
to begin running.
* A skinStyle is added for the new `ext.echo.mobile` module.
`mobile.notifications.overlay` will soon cease to exist but is kept registered for
backwards compatibility reasons
- Drop ev.preventDefault call from onSkinClick - it is no longer necessary and will ensure
notifications overlay closes when shield is clicked while it is open.

Integration:
* A server side hook SkinMinervaReplaceNotificationsBadge allows Echo to replace
the current Minerva notification badge
* A to-be-created client side hook is subscribed to to deal with the navigations drawer
like functionality using the mainMenu code
* id and class names are added to the container for the NotificationBadge for compatibility with
ext.echo.init in Minerva's desktop mode (it will work like Vector)

See I09c27a084100b223662f84de6cbe01bebe1fe774 for understanding the bigger
picture.

Depends-On:  I09c27a084100b223662f84de6cbe01bebe1fe774
Bug: T221007
Change-Id: I4c11f1b241d629e1b294ebaec17472fbf944f8c7
2019-10-08 23:21:12 +00:00

65 lines
1.8 KiB
JavaScript

var MainMenu = require( './menu/MainMenu.js' ),
mainMenu = createMainMenu();
/**
* Creates an instance of the `MainMenu`, using the `wgMinervaMenuData` for configuration.
*
* N.B. that the activator - the UI element that the user must click in order to open the main
* menu - is always `.header .main-menu-button`.
*
* @return {MainMenu}
*
* @ignore
*/
function createMainMenu() {
var options = mw.config.get( 'wgMinervaMenuData', {} );
options.activator = '.header .main-menu-button';
return new MainMenu( options );
}
/**
* Wire up the main menu
*/
function init() {
mainMenu.registerClickEvents();
/**
* Close navigation if skin is tapped
* @param {JQuery.Event} ev
* @private
*/
function onSkinClick() {
mainMenu.closeNavigationDrawers();
}
// FIXME: This is for cached HTML and can be removed shortly.
// Ref: I3892afb5ed3df628e2845043cf3bbc22a9928921.
// eslint-disable-next-line no-jquery/no-global-selector
if ( !$( '#mw-mf-page-left' ).find( '.menu' ).length ) {
mainMenu.appendTo( '#mw-mf-page-left' );
}
// eslint-disable-next-line no-jquery/no-global-selector
if ( $( '.mw-mf-page-center__mask' ).length === 0 ) {
$( '<a>' ).addClass( 'mw-mf-page-center__mask transparent-shield' ).prependTo( '#mw-mf-page-center' );
}
// eslint-disable-next-line no-jquery/no-global-selector
$( '.mw-mf-page-center__mask' ).on( 'click', onSkinClick );
// See I09c27a084100b223662f84de6cbe01bebe1fe774
// will trigger every time the Echo notification is opened or closed.
// This controls the drawer like behaviour of notifications
// on tablet in mobile mode.
mw.hook( 'echo.mobile' ).add( function ( isOpen ) {
if ( isOpen ) {
mainMenu.openNavigationDrawer( 'secondary' );
} else {
mainMenu.closeNavigationDrawers();
}
} );
}
module.exports = {
mainMenu: mainMenu,
init: init
};