MainMenu no longer manages classes on the body tag
The responsibilities of managing the classes on the body tag are pulled upwards from the Menu code. Due to the absence of global state/Redux like thing, the open and close navigation drawer methods remain for the time being. Bug: T206354 Change-Id: I77cd8ff75b0d4487ad19c1506a2911791542d70f
This commit is contained in:
parent
808f7bd56b
commit
354de09fa7
@ -1,6 +1,29 @@
|
||||
var MainMenu = require( './menu/MainMenu.js' ),
|
||||
util = mw.mobileFrontend.require( 'mobile.startup' ).util,
|
||||
mainMenu = createMainMenu();
|
||||
|
||||
/**
|
||||
* Update body tag with appropriate classes for a closed drawer.
|
||||
*/
|
||||
function onClose() {
|
||||
$( document.body ).removeClass(
|
||||
[ 'navigation-enabled', 'secondary-navigation-enabled',
|
||||
'primary-navigation-enabled' ].join( ' ' )
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update body tag with appropriate classes for an open drawer.
|
||||
* @param {string} drawerType A name that identifies the navigation drawer that
|
||||
* should be opened. Either primary or secondary.
|
||||
*/
|
||||
function onOpen( drawerType ) {
|
||||
// FIXME: We should be moving away from applying classes to the body
|
||||
$( document.body ).addClass(
|
||||
[ 'navigation-enabled', drawerType + '-navigation-enabled' ].join( ' ' )
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates an instance of the `MainMenu`, using the `wgMinervaMenuData` for configuration.
|
||||
*
|
||||
@ -16,7 +39,14 @@ function createMainMenu() {
|
||||
|
||||
options.activator = '.header .main-menu-button';
|
||||
|
||||
return new MainMenu( options );
|
||||
return new MainMenu(
|
||||
util.extend( options, {
|
||||
onClose: onClose,
|
||||
onOpen: function () {
|
||||
onOpen( 'primary' );
|
||||
}
|
||||
} )
|
||||
);
|
||||
}
|
||||
|
||||
$( function () {
|
||||
|
@ -3,6 +3,7 @@
|
||||
mobile = M.require( 'mobile.startup' ),
|
||||
mfExtend = mobile.mfExtend,
|
||||
browser = mobile.Browser.getSingleton(),
|
||||
util = mobile.util,
|
||||
View = mobile.View;
|
||||
|
||||
/**
|
||||
@ -11,10 +12,17 @@
|
||||
* @class MainMenu
|
||||
* @extends View
|
||||
* @param {Object} options Configuration options
|
||||
* @param {Function} options.onOpen executed when the menu opens
|
||||
* @param {Function} options.onClose executed when the menu closes
|
||||
*/
|
||||
function MainMenu( options ) {
|
||||
this.activator = options.activator;
|
||||
View.call( this, options );
|
||||
View.call( this,
|
||||
util.extend( {
|
||||
onOpen: function () {},
|
||||
onClose: function () {}
|
||||
}, options )
|
||||
);
|
||||
}
|
||||
|
||||
mfExtend( MainMenu, View, {
|
||||
@ -75,41 +83,34 @@
|
||||
* @memberof MainMenu
|
||||
* @instance
|
||||
* @return {boolean}
|
||||
* @private
|
||||
*/
|
||||
isOpen: function () {
|
||||
// FIXME: We should be moving away from applying classes to the body
|
||||
return $( document.body ).hasClass( 'navigation-enabled' );
|
||||
return this.$el.hasClass( 'menu--open' );
|
||||
},
|
||||
|
||||
/**
|
||||
* Close all open navigation drawers
|
||||
* @memberof MainMenu
|
||||
* @instance
|
||||
* @private
|
||||
*/
|
||||
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' );
|
||||
this.$el.removeClass( 'menu--open' );
|
||||
this.options.onClose();
|
||||
},
|
||||
|
||||
/**
|
||||
* 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
|
||||
* @private
|
||||
*/
|
||||
openNavigationDrawer: function ( drawerType ) {
|
||||
openNavigationDrawer: function () {
|
||||
// close any existing ones first.
|
||||
this.closeNavigationDrawers();
|
||||
drawerType = drawerType || 'primary';
|
||||
// FIXME: We should be moving away from applying classes to the body
|
||||
$( document.body ).toggleClass( 'navigation-enabled' )
|
||||
.toggleClass( drawerType + '-navigation-enabled' );
|
||||
|
||||
this.emit( 'open' );
|
||||
this.$el.addClass( 'menu--open' );
|
||||
this.options.onOpen();
|
||||
}
|
||||
} );
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user