mediawiki-skins-MinervaNeue/resources/skins.minerva.scripts/menu/MainMenu.js
jdlrobson 111757970e MainMenu is a controller not a View and server rendered
As Stephen pointed out somewhere, this is a bit of a micro-optimisation
Let's simplify this code by always rendering it in the HTML. MainMenu.js
as a result becomes a controller that just decides when to show it.

The geolocation check for Nearby is removed given the fact that all
grade A browsers for mediawiki have Geolocation support

Additional changes
* Browser support suggests "animations" class is redundant now
* `open` event no longer filed - not being used anywhere
* Transparent shield is now managed by the MainMenu controller not
the skin (which was confusing)
* Test geolocation using a simple feature tests
rather than abstracting it away inside Browser
* The main menu button is always hidden under either a translucent shield
and/or the main menu itself when it has been opened
so so it's not possible to ever click it while the menu is open
 - the click handler is thus simplified
removing a check for the class of the button

Depends-On: I7fd243366cceae780bd46e1aef2c08dae073f647
Change-Id: I3892afb5ed3df628e2845043cf3bbc22a9928921
2019-10-03 13:13:09 -07:00

86 lines
2.5 KiB
JavaScript

( function () {
/**
* Representation of the main menu
*
* @class MainMenu
* @extends View
* @param {Object} options Configuration options
* @param {string} options.activator selector for element that when clicked can open or
* close the menu
*/
function MainMenu( options ) {
// Remove `mw-mf-viewport__nav-placeholder` to signal the menu has been loaded
// eslint-disable-next-line no-jquery/no-global-selector
$( '#mw-mf-page-left' ).removeClass( 'mw-mf-viewport__nav-placeholder' );
this.activator = options.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;
}() );