2018-11-16 15:16:25 +00:00
|
|
|
( function ( M ) {
|
2019-02-07 16:34:18 +00:00
|
|
|
var
|
|
|
|
mobile = M.require( 'mobile.startup' ),
|
2019-02-08 17:04:26 +00:00
|
|
|
mfExtend = mobile.mfExtend,
|
2019-02-07 16:34:18 +00:00
|
|
|
browser = mobile.Browser.getSingleton(),
|
|
|
|
View = mobile.View;
|
2017-07-12 15:12:40 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Representation of the main menu
|
|
|
|
*
|
|
|
|
* @class MainMenu
|
|
|
|
* @extends View
|
2018-07-10 22:47:31 +00:00
|
|
|
* @param {Object} options Configuration options
|
2017-07-12 15:12:40 +00:00
|
|
|
*/
|
|
|
|
function MainMenu( options ) {
|
|
|
|
this.activator = options.activator;
|
|
|
|
View.call( this, options );
|
|
|
|
}
|
|
|
|
|
2019-02-08 17:04:26 +00:00
|
|
|
mfExtend( MainMenu, View, {
|
2017-07-12 15:12:40 +00:00
|
|
|
isTemplateMode: true,
|
2019-02-07 16:09:20 +00:00
|
|
|
template: mw.template.get( 'skins.minerva.scripts', 'menu.hogan' ),
|
2017-07-12 15:12:40 +00:00
|
|
|
templatePartials: {
|
2019-02-07 16:09:20 +00:00
|
|
|
menuGroup: mw.template.get( 'skins.minerva.scripts', 'menuGroup.hogan' )
|
2017-07-12 15:12:40 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
2018-07-03 14:50:09 +00:00
|
|
|
* @cfg {object} defaults Default options hash.
|
2018-09-13 15:33:20 +00:00
|
|
|
* @cfg {string} defaults.activator selector for element that when clicked can open or
|
|
|
|
* close the menu
|
2017-07-12 15:12:40 +00:00
|
|
|
*/
|
|
|
|
defaults: {
|
|
|
|
activator: undefined
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Turn on event logging on the existing main menu by reading `event-name` data
|
|
|
|
* attributes on elements.
|
2018-08-20 23:40:40 +00:00
|
|
|
* @memberof MainMenu
|
|
|
|
* @instance
|
2017-07-12 15:12:40 +00:00
|
|
|
*/
|
|
|
|
enableLogging: function () {
|
2019-02-15 19:04:11 +00:00
|
|
|
this.$el.find( 'a' ).on( 'click', function () {
|
2017-07-12 15:12:40 +00:00
|
|
|
var $link = $( this ),
|
|
|
|
eventName = $link.data( 'event-name' );
|
|
|
|
if ( eventName ) {
|
2018-10-02 21:54:11 +00:00
|
|
|
mw.track( 'minerva.schemaMobileWebMainMenuClickTracking', {
|
2017-07-12 15:12:40 +00:00
|
|
|
name: eventName,
|
|
|
|
destination: $link.attr( 'href' )
|
|
|
|
} );
|
|
|
|
}
|
|
|
|
} );
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* Remove the nearby menu entry if the browser doesn't support geo location
|
2018-08-20 23:40:40 +00:00
|
|
|
* @memberof MainMenu
|
|
|
|
* @instance
|
2017-07-12 15:12:40 +00:00
|
|
|
*/
|
|
|
|
postRender: function () {
|
|
|
|
if ( !browser.supportsGeoLocation() ) {
|
|
|
|
this.$el.find( '.nearby' ).parent().remove();
|
|
|
|
}
|
|
|
|
|
|
|
|
this.registerClickEvents();
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Registers events for opening and closing the main menu
|
2018-08-20 23:40:40 +00:00
|
|
|
* @memberof MainMenu
|
|
|
|
* @instance
|
2017-07-12 15:12:40 +00:00
|
|
|
*/
|
|
|
|
registerClickEvents: function () {
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
// Listen to the main menu button clicks
|
|
|
|
$( this.activator )
|
|
|
|
.off( 'click' )
|
|
|
|
.on( 'click', function ( ev ) {
|
|
|
|
if ( self.isOpen() ) {
|
|
|
|
self.closeNavigationDrawers();
|
|
|
|
} else {
|
|
|
|
self.openNavigationDrawer();
|
|
|
|
}
|
|
|
|
ev.preventDefault();
|
2018-09-13 15:33:20 +00:00
|
|
|
// Stop propagation, otherwise the Skin will close the open menus on page center
|
|
|
|
// click
|
2017-07-12 15:12:40 +00:00
|
|
|
ev.stopPropagation();
|
|
|
|
} );
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Check whether the navigation drawer is open
|
2018-08-20 23:40:40 +00:00
|
|
|
* @memberof MainMenu
|
|
|
|
* @instance
|
2017-07-12 15:12:40 +00:00
|
|
|
* @return {boolean}
|
|
|
|
*/
|
|
|
|
isOpen: function () {
|
|
|
|
// FIXME: We should be moving away from applying classes to the body
|
2019-01-09 13:57:26 +00:00
|
|
|
return $( document.body ).hasClass( 'navigation-enabled' );
|
2017-07-12 15:12:40 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Close all open navigation drawers
|
2018-08-20 23:40:40 +00:00
|
|
|
* @memberof MainMenu
|
|
|
|
* @instance
|
2017-07-12 15:12:40 +00:00
|
|
|
*/
|
|
|
|
closeNavigationDrawers: function () {
|
|
|
|
// FIXME: We should be moving away from applying classes to the body
|
2019-01-09 13:57:26 +00:00
|
|
|
$( document.body ).removeClass( 'navigation-enabled' )
|
2017-07-12 15:12:40 +00:00
|
|
|
.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'.
|
2018-03-15 20:27:39 +00:00
|
|
|
* @fires MainMenu#open
|
2018-08-20 23:40:40 +00:00
|
|
|
* @memberof MainMenu
|
|
|
|
* @instance
|
2017-07-12 15:12:40 +00:00
|
|
|
*/
|
|
|
|
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
|
2019-01-09 13:57:26 +00:00
|
|
|
$( document.body ).toggleClass( 'navigation-enabled' )
|
2017-07-12 15:12:40 +00:00
|
|
|
.toggleClass( drawerType + '-navigation-enabled' );
|
2018-03-15 20:27:39 +00:00
|
|
|
|
2017-07-12 15:12:40 +00:00
|
|
|
this.emit( 'open' );
|
|
|
|
}
|
|
|
|
} );
|
|
|
|
|
2019-02-07 16:09:20 +00:00
|
|
|
M.define( 'skins.minerva.scripts/MainMenu', MainMenu );
|
2017-07-12 15:12:40 +00:00
|
|
|
|
2018-11-16 15:16:25 +00:00
|
|
|
}( mw.mobileFrontend ) );
|