// Link settings.
api.Menus.data = {
- nonce: '',
itemTypes: [],
l10n: {},
- menuItemTransport: 'postMessage',
+ settingTransport: 'refresh',
phpIntMax: 0,
defaultSettingValues: {
nav_menu: {},
nav_menu_item: {}
- }
+ },
+ locationSlugMappedToName: {}
};
if ( 'undefined' !== typeof _wpCustomizeNavMenusSettings ) {
$.extend( api.Menus.data, _wpCustomizeNavMenusSettings );
// Close the panel if the URL in the preview changes
api.previewer.bind( 'url', this.close );
+
+ self.delegateEvents();
},
// Search input change handler.
.prop( 'tabIndex', -1 )
.removeClass( 'is-visible' );
}
-
+
this.searchTerm = event.target.value;
this.pages.search = 1;
this.doSearch( 1 );
$section.addClass( 'loading' );
self.loading = true;
params = {
- 'customize-menus-nonce': api.Menus.data.nonce,
+ 'customize-menus-nonce': api.settings.nonce['customize-menus'],
'wp_customize': 'on',
'search': self.searchTerm,
'page': page
availableMenuItemContainer.find( '.accordion-section-title' ).addClass( 'loading' );
self.loading = true;
params = {
- 'customize-menus-nonce': api.Menus.data.nonce,
+ 'customize-menus-nonce': api.settings.nonce['customize-menus'],
'wp_customize': 'on',
'type': type,
'object': object,
});
},
- saveManageColumnsState: function() {
- var hidden = this.hidden();
- $.post( wp.ajax.settings.url, {
- action: 'hidden-columns',
- hidden: hidden,
+ saveManageColumnsState: _.debounce( function() {
+ var panel = this;
+ if ( panel._updateHiddenColumnsRequest ) {
+ panel._updateHiddenColumnsRequest.abort();
+ }
+
+ panel._updateHiddenColumnsRequest = wp.ajax.post( 'hidden-columns', {
+ hidden: panel.hidden(),
screenoptionnonce: $( '#screenoptionnonce' ).val(),
page: 'nav-menus'
- });
- },
+ } );
+ panel._updateHiddenColumnsRequest.always( function() {
+ panel._updateHiddenColumnsRequest = null;
+ } );
+ }, 2000 ),
checked: function( column ) {
this.container.addClass( 'field-' + column + '-active' );
},
hidden: function() {
- this.hidden = function() {
- return $( '.hide-column-tog' ).not( ':checked' ).map( function() {
- var id = this.id;
- return id.substring( id, id.length - 5 );
- }).get().join( ',' );
- };
+ return $( '.hide-column-tog' ).not( ':checked' ).map( function() {
+ var id = this.id;
+ return id.substring( 0, id.length - 5 );
+ }).get().join( ',' );
}
} );
/**
* @param {array} themeLocations
*/
- updateAssignedLocationsInSectionTitle: function( themeLocations ) {
+ updateAssignedLocationsInSectionTitle: function( themeLocationSlugs ) {
var section = this,
$title;
$title = section.container.find( '.accordion-section-title:first' );
$title.find( '.menu-in-location' ).remove();
- _.each( themeLocations, function( themeLocation ) {
- var $label = $( '<span class="menu-in-location"></span>' );
- $label.text( api.Menus.data.l10n.menuLocation.replace( '%s', themeLocation ) );
+ _.each( themeLocationSlugs, function( themeLocationSlug ) {
+ var $label, locationName;
+ $label = $( '<span class="menu-in-location"></span>' );
+ locationName = api.Menus.data.locationSlugMappedToName[ themeLocationSlug ];
+ $label.text( api.Menus.data.l10n.menuLocation.replace( '%s', locationName ) );
$title.append( $label );
});
- section.container.toggleClass( 'assigned-to-menu-location', 0 !== themeLocations.length );
+ section.container.toggleClass( 'assigned-to-menu-location', 0 !== themeLocationSlugs.length );
},
/**
* Expand the menu item form control.
+ *
+ * @since 4.5.0 Added params.completeCallback.
+ *
+ * @param {Object} [params] - Optional params.
+ * @param {Function} [params.completeCallback] - Function to call when the form toggle has finished animating.
*/
- expandForm: function() {
- this.toggleForm( true );
+ expandForm: function( params ) {
+ this.toggleForm( true, params );
},
/**
* Collapse the menu item form control.
+ *
+ * @since 4.5.0 Added params.completeCallback.
+ *
+ * @param {Object} [params] - Optional params.
+ * @param {Function} [params.completeCallback] - Function to call when the form toggle has finished animating.
*/
- collapseForm: function() {
- this.toggleForm( false );
+ collapseForm: function( params ) {
+ this.toggleForm( false, params );
},
/**
* Expand or collapse the menu item control.
*
- * @param {boolean|undefined} [showOrHide] If not supplied, will be inverse of current visibility
+ * @since 4.5.0 Added params.completeCallback.
+ *
+ * @param {boolean} [showOrHide] - If not supplied, will be inverse of current visibility
+ * @param {Object} [params] - Optional params.
+ * @param {Function} [params.completeCallback] - Function to call when the form toggle has finished animating.
*/
- toggleForm: function( showOrHide ) {
+ toggleForm: function( showOrHide, params ) {
var self = this, $menuitem, $inside, complete;
$menuitem = this.container;
// Already expanded or collapsed.
if ( $inside.is( ':visible' ) === showOrHide ) {
+ if ( params && params.completeCallback ) {
+ params.completeCallback();
+ }
return;
}
.removeClass( 'menu-item-edit-inactive' )
.addClass( 'menu-item-edit-active' );
self.container.trigger( 'expanded' );
+
+ if ( params && params.completeCallback ) {
+ params.completeCallback();
+ }
};
$menuitem.find( '.item-edit' ).attr( 'aria-expanded', 'true' );
.addClass( 'menu-item-edit-inactive' )
.removeClass( 'menu-item-edit-active' );
self.container.trigger( 'collapsed' );
+
+ if ( params && params.completeCallback ) {
+ params.completeCallback();
+ }
};
self.container.trigger( 'collapse' );
/**
* Expand the containing menu section, expand the form, and focus on
* the first input in the control.
+ *
+ * @since 4.5.0 Added params.completeCallback.
+ *
+ * @param {Object} [params] - Params object.
+ * @param {Function} [params.completeCallback] - Optional callback function when focus has completed.
*/
- focus: function() {
- var control = this, focusable;
+ focus: function( params ) {
+ params = params || {};
+ var control = this, originalCompleteCallback = params.completeCallback;
+
control.expandControlSection();
- control.expandForm();
- // Note that we can't use :focusable due to a jQuery UI issue. See: https://github.com/jquery/jquery-ui/pull/1583
- focusable = control.container.find( '.menu-item-settings' ).find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' );
- focusable.first().focus();
+
+ params.completeCallback = function() {
+ var focusable;
+
+ // Note that we can't use :focusable due to a jQuery UI issue. See: https://github.com/jquery/jquery-ui/pull/1583
+ focusable = control.container.find( '.menu-item-settings' ).find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' );
+ focusable.first().focus();
+
+ if ( originalCompleteCallback ) {
+ originalCompleteCallback();
+ }
+ };
+
+ control.expandForm( params );
},
/**
customizeId = 'nav_menu_item[' + String( placeholderId ) + ']';
settingArgs = {
type: 'nav_menu_item',
- transport: 'postMessage',
+ transport: api.Menus.data.settingTransport,
previewer: api.previewer
};
setting = api.create( customizeId, customizeId, {}, settingArgs );
// Register the menu control setting.
api.create( customizeId, customizeId, {}, {
type: 'nav_menu',
- transport: 'postMessage',
+ transport: api.Menus.data.settingTransport,
previewer: api.previewer
} );
api( customizeId ).set( $.extend(
}
} );
- api.previewer.bind( 'refresh', function() {
- api.previewer.refresh();
- });
+ // Open and focus menu control.
+ api.previewer.bind( 'focus-nav-menu-item-control', api.Menus.focusMenuItemControl );
} );
/**
newCustomizeId = 'nav_menu[' + String( update.term_id ) + ']';
newSetting = api.create( newCustomizeId, newCustomizeId, settingValue, {
type: 'nav_menu',
- transport: 'postMessage',
+ transport: api.Menus.data.settingTransport,
previewer: api.previewer
} );
newCustomizeId = 'nav_menu_item[' + String( update.post_id ) + ']';
newSetting = api.create( newCustomizeId, newCustomizeId, settingValue, {
type: 'nav_menu_item',
- transport: 'postMessage',
+ transport: api.Menus.data.settingTransport,
previewer: api.previewer
} );