Customizer: Nav Menus JS cleanup, second round

* Follow the same pattern of namespace instantiation that `WidgetCustomizerPreview` uses
* Remove use of `self` for global delegation
* Use `api` for `wp.customize` and import only top-level globals
* Bind `this` where appropriate and disambiguate scope

See #32911.


git-svn-id: https://develop.svn.wordpress.org/trunk@33347 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Scott Taylor 2015-07-21 17:39:24 +00:00
parent 5afdbfdb01
commit ca207b8c08

View File

@ -1,8 +1,12 @@
/* global JSON, _wpCustomizePreviewNavMenusExports */ /* global JSON, _wpCustomizePreviewNavMenusExports */
wp.customize.menusPreview = ( function( $, api ) { ( function( $, _, wp ) {
'use strict'; 'use strict';
var currentRefreshDebounced = {},
if ( ! wp || ! wp.customize ) { return; }
var api = wp.customize,
currentRefreshDebounced = {},
refreshDebounceDelay = 200, refreshDebounceDelay = 200,
settings = {}, settings = {},
defaultSettings = { defaultSettings = {
@ -16,19 +20,13 @@ wp.customize.menusPreview = ( function( $, api ) {
stylesheet: '' stylesheet: ''
}, },
navMenuInstanceArgs: {} navMenuInstanceArgs: {}
}, };
self = {};
api.bind( 'preview-ready', function() {
api.preview.bind( 'active', function() {
self.init();
} );
} );
api.MenusCustomizerPreview = {
/** /**
* Bootstrap functionality. * Bootstrap functionality.
*/ */
self.init = function() { init : function() {
var self = this, initializedSettings = {}; var self = this, initializedSettings = {};
settings = _.extend( {}, defaultSettings ); settings = _.extend( {}, defaultSettings );
@ -65,54 +63,54 @@ wp.customize.menusPreview = ( function( $, api ) {
} }
} }
} ); } );
}; },
/** /**
* *
* @param {wp.customize.Value} setting * @param {wp.customize.Value} setting
* @returns {boolean} Whether the setting was bound. * @returns {boolean} Whether the setting was bound.
*/ */
self.bindListener = function( setting ) { bindListener : function( setting ) {
var matches, themeLocation; var matches, themeLocation;
matches = setting.id.match( /^nav_menu\[(-?\d+)]$/ ); matches = setting.id.match( /^nav_menu\[(-?\d+)]$/ );
if ( matches ) { if ( matches ) {
setting.navMenuId = parseInt( matches[1], 10 ); setting.navMenuId = parseInt( matches[1], 10 );
setting.bind( self.onChangeNavMenuSetting ); setting.bind( this.onChangeNavMenuSetting );
return true; return true;
} }
matches = setting.id.match( /^nav_menu_item\[(-?\d+)]$/ ); matches = setting.id.match( /^nav_menu_item\[(-?\d+)]$/ );
if ( matches ) { if ( matches ) {
setting.navMenuItemId = parseInt( matches[1], 10 ); setting.navMenuItemId = parseInt( matches[1], 10 );
setting.bind( self.onChangeNavMenuItemSetting ); setting.bind( this.onChangeNavMenuItemSetting );
return true; return true;
} }
matches = setting.id.match( /^nav_menu_locations\[(.+?)]/ ); matches = setting.id.match( /^nav_menu_locations\[(.+?)]/ );
if ( matches ) { if ( matches ) {
themeLocation = matches[1]; themeLocation = matches[1];
setting.bind( function() { setting.bind( _.bind( function() {
self.refreshMenuLocation( themeLocation ); this.refreshMenuLocation( themeLocation );
} ); }, this ) );
return true; return true;
} }
return false; return false;
}; },
/** /**
* Handle changing of a nav_menu setting. * Handle changing of a nav_menu setting.
* *
* @this {wp.customize.Setting} * @this {wp.customize.Setting}
*/ */
self.onChangeNavMenuSetting = function() { onChangeNavMenuSetting : function() {
var setting = this; var setting = this;
if ( ! setting.navMenuId ) { if ( ! setting.navMenuId ) {
throw new Error( 'Expected navMenuId property to be set.' ); throw new Error( 'Expected navMenuId property to be set.' );
} }
self.refreshMenu( setting.navMenuId ); api.MenusCustomizerPreview.refreshMenu( setting.navMenuId );
}; },
/** /**
* Handle changing of a nav_menu_item setting. * Handle changing of a nav_menu_item setting.
@ -121,21 +119,21 @@ wp.customize.menusPreview = ( function( $, api ) {
* @param {object} to * @param {object} to
* @param {object} from * @param {object} from
*/ */
self.onChangeNavMenuItemSetting = function( to, from ) { onChangeNavMenuItemSetting : function( to, from ) {
if ( from && from.nav_menu_term_id && ( ! to || from.nav_menu_term_id !== to.nav_menu_term_id ) ) { if ( from && from.nav_menu_term_id && ( ! to || from.nav_menu_term_id !== to.nav_menu_term_id ) ) {
self.refreshMenu( from.nav_menu_term_id ); api.MenusCustomizerPreview.refreshMenu( from.nav_menu_term_id );
} }
if ( to && to.nav_menu_term_id ) { if ( to && to.nav_menu_term_id ) {
self.refreshMenu( to.nav_menu_term_id ); api.MenusCustomizerPreview.refreshMenu( to.nav_menu_term_id );
} }
}; },
/** /**
* Update a given menu rendered in the preview. * Update a given menu rendered in the preview.
* *
* @param {int} menuId * @param {int} menuId
*/ */
self.refreshMenu = function( menuId ) { refreshMenu : function( menuId ) {
var assignedLocations = []; var assignedLocations = [];
api.each(function( setting, id ) { api.each(function( setting, id ) {
@ -150,14 +148,14 @@ wp.customize.menusPreview = ( function( $, api ) {
this.refreshMenuInstanceDebounced( instanceNumber ); this.refreshMenuInstanceDebounced( instanceNumber );
} }
}, this ); }, this );
}; },
/** /**
* Refresh the menu(s) associated with a given nav menu location. * Refresh the menu(s) associated with a given nav menu location.
* *
* @param {string} location * @param {string} location
*/ */
self.refreshMenuLocation = function( location ) { refreshMenuLocation : function( location ) {
var foundInstance = false; var foundInstance = false;
_.each( settings.navMenuInstanceArgs, function( navMenuArgs, instanceNumber ) { _.each( settings.navMenuInstanceArgs, function( navMenuArgs, instanceNumber ) {
if ( location === navMenuArgs.theme_location ) { if ( location === navMenuArgs.theme_location ) {
@ -168,15 +166,15 @@ wp.customize.menusPreview = ( function( $, api ) {
if ( ! foundInstance ) { if ( ! foundInstance ) {
api.preview.send( 'refresh' ); api.preview.send( 'refresh' );
} }
}; },
/** /**
* Update a specific instance of a given menu on the page. * Update a specific instance of a given menu on the page.
* *
* @param {int} instanceNumber * @param {int} instanceNumber
*/ */
self.refreshMenuInstance = function( instanceNumber ) { refreshMenuInstance : function( instanceNumber ) {
var self = this, data, menuId, customized, container, request, wpNavArgs, instance, containerInstanceClassName; var data, menuId, customized, container, request, wpNavArgs, instance, containerInstanceClassName;
if ( ! settings.navMenuInstanceArgs[ instanceNumber ] ) { if ( ! settings.navMenuInstanceArgs[ instanceNumber ] ) {
throw new Error( 'unknown_instance_number' ); throw new Error( 'unknown_instance_number' );
@ -261,20 +259,25 @@ wp.customize.menusPreview = ( function( $, api ) {
container.removeClass( 'customize-partial-refreshing' ); container.removeClass( 'customize-partial-refreshing' );
$( document ).trigger( 'customize-preview-menu-refreshed', [ eventParam ] ); $( document ).trigger( 'customize-preview-menu-refreshed', [ eventParam ] );
} ); } );
}; },
self.refreshMenuInstanceDebounced = function( instanceNumber ) { refreshMenuInstanceDebounced : function( instanceNumber ) {
if ( currentRefreshDebounced[ instanceNumber ] ) { if ( currentRefreshDebounced[ instanceNumber ] ) {
clearTimeout( currentRefreshDebounced[ instanceNumber ] ); clearTimeout( currentRefreshDebounced[ instanceNumber ] );
} }
currentRefreshDebounced[ instanceNumber ] = setTimeout( currentRefreshDebounced[ instanceNumber ] = setTimeout(
function() { _.bind( function() {
self.refreshMenuInstance( instanceNumber ); this.refreshMenuInstance( instanceNumber );
}, }, this ),
refreshDebounceDelay refreshDebounceDelay
); );
}
}; };
return self; api.bind( 'preview-ready', function() {
api.preview.bind( 'active', function() {
api.MenusCustomizerPreview.init();
} );
} );
}( jQuery, wp.customize ) ); }( jQuery, _, wp ) );