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

resources/skins.minerva.scripts/menu.js

@@ -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 () {

resources/skins.minerva.scripts/menu/MainMenu.js

@@ -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();
 		}
 	} );