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