mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-30 17:04:28 +00:00
Merge "Simplify menu code"
This commit is contained in:
commit
acb42e4fad
|
@ -1,32 +1,9 @@
|
||||||
var MainMenu = require( './menu/MainMenu.js' ),
|
var BODY_NOTIFICATIONS_REVEAL_CLASS = 'navigation-enabled secondary-navigation-enabled';
|
||||||
mainMenu = createMainMenu();
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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() {
|
|
||||||
return new MainMenu( '.header .main-menu-button' );
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Wire up the main menu
|
* Wire up the main menu
|
||||||
*/
|
*/
|
||||||
function init() {
|
function init() {
|
||||||
/**
|
|
||||||
* Close navigation if skin is tapped
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
function onSkinClick() {
|
|
||||||
mainMenu.closeNavigationDrawers();
|
|
||||||
}
|
|
||||||
|
|
||||||
// eslint-disable-next-line no-jquery/no-global-selector
|
|
||||||
$( '.mw-mf-page-center__mask' ).on( 'click', onSkinClick );
|
|
||||||
|
|
||||||
// See I09c27a084100b223662f84de6cbe01bebe1fe774
|
// See I09c27a084100b223662f84de6cbe01bebe1fe774
|
||||||
// will trigger every time the Echo notification is opened or closed.
|
// will trigger every time the Echo notification is opened or closed.
|
||||||
|
@ -34,14 +11,13 @@ function init() {
|
||||||
// on tablet in mobile mode.
|
// on tablet in mobile mode.
|
||||||
mw.hook( 'echo.mobile' ).add( function ( isOpen ) {
|
mw.hook( 'echo.mobile' ).add( function ( isOpen ) {
|
||||||
if ( isOpen ) {
|
if ( isOpen ) {
|
||||||
mainMenu.openNavigationDrawer( 'secondary' );
|
$( document.body ).addClass( BODY_NOTIFICATIONS_REVEAL_CLASS );
|
||||||
} else {
|
} else {
|
||||||
mainMenu.closeNavigationDrawers();
|
$( document.body ).removeClass( BODY_NOTIFICATIONS_REVEAL_CLASS );
|
||||||
}
|
}
|
||||||
} );
|
} );
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
mainMenu: mainMenu,
|
|
||||||
init: init
|
init: init
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,83 +0,0 @@
|
||||||
( function () {
|
|
||||||
/**
|
|
||||||
* Representation of the main menu
|
|
||||||
*
|
|
||||||
* @class MainMenu
|
|
||||||
* @extends View
|
|
||||||
* @param {string} activator selector for element that when clicked can open or
|
|
||||||
* close the menu
|
|
||||||
*/
|
|
||||||
function MainMenu( activator ) {
|
|
||||||
// eslint-disable-next-line no-jquery/no-global-selector
|
|
||||||
$( '#mw-mf-page-left' ).removeClass( 'navigation-drawer--loading' )
|
|
||||||
.addClass( 'navigation-drawer--enabled' );
|
|
||||||
this.activator = activator;
|
|
||||||
this.registerClickEvents();
|
|
||||||
}
|
|
||||||
|
|
||||||
MainMenu.prototype = {
|
|
||||||
/**
|
|
||||||
* Registers events for opening and closing the main menu
|
|
||||||
* @memberof MainMenu
|
|
||||||
* @instance
|
|
||||||
*/
|
|
||||||
registerClickEvents: function () {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
// Listen to the main menu button clicks
|
|
||||||
$( this.activator )
|
|
||||||
.off( 'click' )
|
|
||||||
.on( 'click', function ( ev ) {
|
|
||||||
self.openNavigationDrawer();
|
|
||||||
ev.preventDefault();
|
|
||||||
// DO NOT USE stopPropagation or you'll break click tracking in WikimediaEvents
|
|
||||||
} );
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Check whether the navigation drawer is open
|
|
||||||
* @memberof MainMenu
|
|
||||||
* @instance
|
|
||||||
* @return {boolean}
|
|
||||||
*/
|
|
||||||
isOpen: function () {
|
|
||||||
// FIXME: We should be moving away from applying classes to the body
|
|
||||||
// eslint-disable-next-line no-jquery/no-class-state
|
|
||||||
return $( document.body ).hasClass( 'navigation-enabled' );
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Close all open navigation drawers
|
|
||||||
* @memberof MainMenu
|
|
||||||
* @instance
|
|
||||||
*/
|
|
||||||
closeNavigationDrawers: function () {
|
|
||||||
// FIXME: We should be moving away from applying classes to the body
|
|
||||||
$( document.body ).removeClass( 'navigation-enabled' )
|
|
||||||
.removeClass( 'secondary-navigation-enabled' )
|
|
||||||
.removeClass( 'primary-navigation-enabled' );
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Toggle open navigation drawer
|
|
||||||
* @param {string} [drawerType] A name that identifies the navigation drawer that
|
|
||||||
* should be toggled open. Defaults to 'primary'.
|
|
||||||
* @fires MainMenu#open
|
|
||||||
* @memberof MainMenu
|
|
||||||
* @instance
|
|
||||||
*/
|
|
||||||
openNavigationDrawer: function ( drawerType ) {
|
|
||||||
// close any existing ones first.
|
|
||||||
this.closeNavigationDrawers();
|
|
||||||
drawerType = drawerType || 'primary';
|
|
||||||
// FIXME: We should be moving away from applying classes to the body
|
|
||||||
// eslint-disable-next-line no-jquery/no-class-state
|
|
||||||
$( document.body )
|
|
||||||
.toggleClass( 'navigation-enabled' )
|
|
||||||
.toggleClass( drawerType + '-navigation-enabled' );
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
module.exports = MainMenu;
|
|
||||||
|
|
||||||
}() );
|
|
|
@ -603,7 +603,6 @@
|
||||||
"resources/skins.minerva.scripts/init.js",
|
"resources/skins.minerva.scripts/init.js",
|
||||||
"resources/skins.minerva.scripts/drawers.js",
|
"resources/skins.minerva.scripts/drawers.js",
|
||||||
"resources/skins.minerva.scripts/ctaDrawers.js",
|
"resources/skins.minerva.scripts/ctaDrawers.js",
|
||||||
"resources/skins.minerva.scripts/menu/MainMenu.js",
|
|
||||||
"resources/skins.minerva.scripts/menu.js",
|
"resources/skins.minerva.scripts/menu.js",
|
||||||
"resources/skins.minerva.scripts/errorLogging.js",
|
"resources/skins.minerva.scripts/errorLogging.js",
|
||||||
"resources/skins.minerva.scripts/preInit.js",
|
"resources/skins.minerva.scripts/preInit.js",
|
||||||
|
|
Loading…
Reference in a new issue