[Summary view] [Print] [Text view]

   1  /**
   2   * @output wp-admin/js/customize-nav-menus.js
   3   */
   4  
   5  /* global menus, _wpCustomizeNavMenusSettings, wpNavMenu, console */
   6  ( function( api, wp, $ ) {
   7      'use strict';
   8  
   9      /**
  10       * Set up wpNavMenu for drag and drop.
  11       */
  12      wpNavMenu.originalInit = wpNavMenu.init;
  13      wpNavMenu.options.menuItemDepthPerLevel = 20;
  14      wpNavMenu.options.sortableItems         = '> .customize-control-nav_menu_item';
  15      wpNavMenu.options.targetTolerance       = 10;
  16      wpNavMenu.init = function() {
  17          this.jQueryExtensions();
  18      };
  19  
  20      /**
  21       * @namespace wp.customize.Menus
  22       */
  23      api.Menus = api.Menus || {};
  24  
  25      // Link settings.
  26      api.Menus.data = {
  27          itemTypes: [],
  28          l10n: {},
  29          settingTransport: 'refresh',
  30          phpIntMax: 0,
  31          defaultSettingValues: {
  32              nav_menu: {},
  33              nav_menu_item: {}
  34          },
  35          locationSlugMappedToName: {}
  36      };
  37      if ( 'undefined' !== typeof _wpCustomizeNavMenusSettings ) {
  38          $.extend( api.Menus.data, _wpCustomizeNavMenusSettings );
  39      }
  40  
  41      /**
  42       * Newly-created Nav Menus and Nav Menu Items have negative integer IDs which
  43       * serve as placeholders until Save & Publish happens.
  44       *
  45       * @alias wp.customize.Menus.generatePlaceholderAutoIncrementId
  46       *
  47       * @return {number}
  48       */
  49      api.Menus.generatePlaceholderAutoIncrementId = function() {
  50          return -Math.ceil( api.Menus.data.phpIntMax * Math.random() );
  51      };
  52  
  53      /**
  54       * wp.customize.Menus.AvailableItemModel
  55       *
  56       * A single available menu item model. See PHP's WP_Customize_Nav_Menu_Item_Setting class.
  57       *
  58       * @class    wp.customize.Menus.AvailableItemModel
  59       * @augments Backbone.Model
  60       */
  61      api.Menus.AvailableItemModel = Backbone.Model.extend( $.extend(
  62          {
  63              id: null // This is only used by Backbone.
  64          },
  65          api.Menus.data.defaultSettingValues.nav_menu_item
  66      ) );
  67  
  68      /**
  69       * wp.customize.Menus.AvailableItemCollection
  70       *
  71       * Collection for available menu item models.
  72       *
  73       * @class    wp.customize.Menus.AvailableItemCollection
  74       * @augments Backbone.Collection
  75       */
  76      api.Menus.AvailableItemCollection = Backbone.Collection.extend(/** @lends wp.customize.Menus.AvailableItemCollection.prototype */{
  77          model: api.Menus.AvailableItemModel,
  78  
  79          sort_key: 'order',
  80  
  81          comparator: function( item ) {
  82              return -item.get( this.sort_key );
  83          },
  84  
  85          sortByField: function( fieldName ) {
  86              this.sort_key = fieldName;
  87              this.sort();
  88          }
  89      });
  90      api.Menus.availableMenuItems = new api.Menus.AvailableItemCollection( api.Menus.data.availableMenuItems );
  91  
  92      /**
  93       * Insert a new `auto-draft` post.
  94       *
  95       * @since 4.7.0
  96       * @alias wp.customize.Menus.insertAutoDraftPost
  97       *
  98       * @param {Object} params - Parameters for the draft post to create.
  99       * @param {string} params.post_type - Post type to add.
 100       * @param {string} params.post_title - Post title to use.
 101       * @return {jQuery.promise} Promise resolved with the added post.
 102       */
 103      api.Menus.insertAutoDraftPost = function insertAutoDraftPost( params ) {
 104          var request, deferred = $.Deferred();
 105  
 106          request = wp.ajax.post( 'customize-nav-menus-insert-auto-draft', {
 107              'customize-menus-nonce': api.settings.nonce['customize-menus'],
 108              'wp_customize': 'on',
 109              'customize_changeset_uuid': api.settings.changeset.uuid,
 110              'params': params
 111          } );
 112  
 113          request.done( function( response ) {
 114              if ( response.post_id ) {
 115                  api( 'nav_menus_created_posts' ).set(
 116                      api( 'nav_menus_created_posts' ).get().concat( [ response.post_id ] )
 117                  );
 118  
 119                  if ( 'page' === params.post_type ) {
 120  
 121                      // Activate static front page controls as this could be the first page created.
 122                      if ( api.section.has( 'static_front_page' ) ) {
 123                          api.section( 'static_front_page' ).activate();
 124                      }
 125  
 126                      // Add new page to dropdown-pages controls.
 127                      api.control.each( function( control ) {
 128                          var select;
 129                          if ( 'dropdown-pages' === control.params.type ) {
 130                              select = control.container.find( 'select[name^="_customize-dropdown-pages-"]' );
 131                              select.append( new Option( params.post_title, response.post_id ) );
 132                          }
 133                      } );
 134                  }
 135                  deferred.resolve( response );
 136              }
 137          } );
 138  
 139          request.fail( function( response ) {
 140              var error = response || '';
 141  
 142              if ( 'undefined' !== typeof response.message ) {
 143                  error = response.message;
 144              }
 145  
 146              console.error( error );
 147              deferred.rejectWith( error );
 148          } );
 149  
 150          return deferred.promise();
 151      };
 152  
 153      api.Menus.AvailableMenuItemsPanelView = wp.Backbone.View.extend(/** @lends wp.customize.Menus.AvailableMenuItemsPanelView.prototype */{
 154  
 155          el: '#available-menu-items',
 156  
 157          events: {
 158              'input #menu-items-search': 'debounceSearch',
 159              'focus .menu-item-tpl': 'focus',
 160              'click .menu-item-tpl': '_submit',
 161              'click #custom-menu-item-submit': '_submitLink',
 162              'keypress #custom-menu-item-name': '_submitLink',
 163              'click .new-content-item .add-content': '_submitNew',
 164              'keypress .create-item-input': '_submitNew',
 165              'keydown': 'keyboardAccessible'
 166          },
 167  
 168          // Cache current selected menu item.
 169          selected: null,
 170  
 171          // Cache menu control that opened the panel.
 172          currentMenuControl: null,
 173          debounceSearch: null,
 174          $search: null,
 175          $clearResults: null,
 176          searchTerm: '',
 177          rendered: false,
 178          pages: {},
 179          sectionContent: '',
 180          loading: false,
 181          addingNew: false,
 182  
 183          /**
 184           * wp.customize.Menus.AvailableMenuItemsPanelView
 185           *
 186           * View class for the available menu items panel.
 187           *
 188           * @constructs wp.customize.Menus.AvailableMenuItemsPanelView
 189           * @augments   wp.Backbone.View
 190           */
 191          initialize: function() {
 192              var self = this;
 193  
 194              if ( ! api.panel.has( 'nav_menus' ) ) {
 195                  return;
 196              }
 197  
 198              this.$search = $( '#menu-items-search' );
 199              this.$clearResults = this.$el.find( '.clear-results' );
 200              this.sectionContent = this.$el.find( '.available-menu-items-list' );
 201  
 202              this.debounceSearch = _.debounce( self.search, 500 );
 203  
 204              _.bindAll( this, 'close' );
 205  
 206              /*
 207               * If the available menu items panel is open and the customize controls
 208               * are interacted with (other than an item being deleted), then close
 209               * the available menu items panel. Also close on back button click.
 210               */
 211              $( '#customize-controls, .customize-section-back' ).on( 'click keydown', function( e ) {
 212                  var isDeleteBtn = $( e.target ).is( '.item-delete, .item-delete *' ),
 213                      isAddNewBtn = $( e.target ).is( '.add-new-menu-item, .add-new-menu-item *' );
 214                  if ( $( 'body' ).hasClass( 'adding-menu-items' ) && ! isDeleteBtn && ! isAddNewBtn ) {
 215                      self.close();
 216                  }
 217              } );
 218  
 219              // Clear the search results and trigger an `input` event to fire a new search.
 220              this.$clearResults.on( 'click', function() {
 221                  self.$search.val( '' ).trigger( 'focus' ).trigger( 'input' );
 222              } );
 223  
 224              this.$el.on( 'input', '#custom-menu-item-name.invalid, #custom-menu-item-url.invalid', function() {
 225                  $( this ).removeClass( 'invalid' );
 226                  var errorMessageId = $( this ).attr( 'aria-describedby' );
 227                  $( '#' + errorMessageId ).hide();
 228                  $( this ).removeAttr( 'aria-invalid' ).removeAttr( 'aria-describedby' );
 229              });
 230  
 231              // Load available items if it looks like we'll need them.
 232              api.panel( 'nav_menus' ).container.on( 'expanded', function() {
 233                  if ( ! self.rendered ) {
 234                      self.initList();
 235                      self.rendered = true;
 236                  }
 237              });
 238  
 239              // Load more items.
 240              this.sectionContent.on( 'scroll', function() {
 241                  var totalHeight = self.$el.find( '.accordion-section.open .available-menu-items-list' ).prop( 'scrollHeight' ),
 242                      visibleHeight = self.$el.find( '.accordion-section.open' ).height();
 243  
 244                  if ( ! self.loading && $( this ).scrollTop() > 3 / 4 * totalHeight - visibleHeight ) {
 245                      var type = $( this ).data( 'type' ),
 246                          object = $( this ).data( 'object' );
 247  
 248                      if ( 'search' === type ) {
 249                          if ( self.searchTerm ) {
 250                              self.doSearch( self.pages.search );
 251                          }
 252                      } else {
 253                          self.loadItems( [
 254                              { type: type, object: object }
 255                          ] );
 256                      }
 257                  }
 258              });
 259  
 260              // Close the panel if the URL in the preview changes.
 261              api.previewer.bind( 'url', this.close );
 262  
 263              self.delegateEvents();
 264          },
 265  
 266          // Search input change handler.
 267          search: function( event ) {
 268              var $searchSection = $( '#available-menu-items-search' ),
 269                  $otherSections = $( '#available-menu-items .accordion-section' ).not( $searchSection );
 270  
 271              if ( ! event ) {
 272                  return;
 273              }
 274  
 275              if ( this.searchTerm === event.target.value ) {
 276                  return;
 277              }
 278  
 279              if ( '' !== event.target.value && ! $searchSection.hasClass( 'open' ) ) {
 280                  $otherSections.fadeOut( 100 );
 281                  $searchSection.find( '.accordion-section-content' ).slideDown( 'fast' );
 282                  $searchSection.addClass( 'open' );
 283                  this.$clearResults.addClass( 'is-visible' );
 284              } else if ( '' === event.target.value ) {
 285                  $searchSection.removeClass( 'open' );
 286                  $otherSections.show();
 287                  this.$clearResults.removeClass( 'is-visible' );
 288              }
 289  
 290              this.searchTerm = event.target.value;
 291              this.pages.search = 1;
 292              this.doSearch( 1 );
 293          },
 294  
 295          // Get search results.
 296          doSearch: function( page ) {
 297              var self = this, params,
 298                  $section = $( '#available-menu-items-search' ),
 299                  $content = $section.find( '.accordion-section-content' ),
 300                  itemTemplate = wp.template( 'available-menu-item' );
 301  
 302              if ( self.currentRequest ) {
 303                  self.currentRequest.abort();
 304              }
 305  
 306              if ( page < 0 ) {
 307                  return;
 308              } else if ( page > 1 ) {
 309                  $section.addClass( 'loading-more' );
 310                  $content.attr( 'aria-busy', 'true' );
 311                  wp.a11y.speak( api.Menus.data.l10n.itemsLoadingMore );
 312              } else if ( '' === self.searchTerm ) {
 313                  $content.html( '' );
 314                  wp.a11y.speak( '' );
 315                  return;
 316              }
 317  
 318              $section.addClass( 'loading' );
 319              self.loading = true;
 320  
 321              params = api.previewer.query( { excludeCustomizedSaved: true } );
 322              _.extend( params, {
 323                  'customize-menus-nonce': api.settings.nonce['customize-menus'],
 324                  'wp_customize': 'on',
 325                  'search': self.searchTerm,
 326                  'page': page
 327              } );
 328  
 329              self.currentRequest = wp.ajax.post( 'search-available-menu-items-customizer', params );
 330  
 331              self.currentRequest.done(function( data ) {
 332                  var items;
 333                  if ( 1 === page ) {
 334                      // Clear previous results as it's a new search.
 335                      $content.empty();
 336                  }
 337                  $section.removeClass( 'loading loading-more' );
 338                  $content.attr( 'aria-busy', 'false' );
 339                  $section.addClass( 'open' );
 340                  self.loading = false;
 341                  items = new api.Menus.AvailableItemCollection( data.items );
 342                  self.collection.add( items.models );
 343                  items.each( function( menuItem ) {
 344                      $content.append( itemTemplate( menuItem.attributes ) );
 345                  } );
 346                  if ( 20 > items.length ) {
 347                      self.pages.search = -1; // Up to 20 posts and 20 terms in results, if <20, no more results for either.
 348                  } else {
 349                      self.pages.search = self.pages.search + 1;
 350                  }
 351                  if ( items && page > 1 ) {
 352                      wp.a11y.speak( api.Menus.data.l10n.itemsFoundMore.replace( '%d', items.length ) );
 353                  } else if ( items && page === 1 ) {
 354                      wp.a11y.speak( api.Menus.data.l10n.itemsFound.replace( '%d', items.length ) );
 355                  }
 356              });
 357  
 358              self.currentRequest.fail(function( data ) {
 359                  // data.message may be undefined, for example when typing slow and the request is aborted.
 360                  if ( data.message ) {
 361                      $content.empty().append( $( '<li class="nothing-found"></li>' ).text( data.message ) );
 362                      wp.a11y.speak( data.message );
 363                  }
 364                  self.pages.search = -1;
 365              });
 366  
 367              self.currentRequest.always(function() {
 368                  $section.removeClass( 'loading loading-more' );
 369                  $content.attr( 'aria-busy', 'false' );
 370                  self.loading = false;
 371                  self.currentRequest = null;
 372              });
 373          },
 374  
 375          // Render the individual items.
 376          initList: function() {
 377              var self = this;
 378  
 379              // Render the template for each item by type.
 380              _.each( api.Menus.data.itemTypes, function( itemType ) {
 381                  self.pages[ itemType.type + ':' + itemType.object ] = 0;
 382              } );
 383              self.loadItems( api.Menus.data.itemTypes );
 384          },
 385  
 386          /**
 387           * Load available nav menu items.
 388           *
 389           * @since 4.3.0
 390           * @since 4.7.0 Changed function signature to take list of item types instead of single type/object.
 391           * @access private
 392           *
 393           * @param {Array.<Object>} itemTypes List of objects containing type and key.
 394           * @param {string} deprecated Formerly the object parameter.
 395           * @return {void}
 396           */
 397          loadItems: function( itemTypes, deprecated ) {
 398              var self = this, _itemTypes, requestItemTypes = [], params, request, itemTemplate, availableMenuItemContainers = {};
 399              itemTemplate = wp.template( 'available-menu-item' );
 400  
 401              if ( _.isString( itemTypes ) && _.isString( deprecated ) ) {
 402                  _itemTypes = [ { type: itemTypes, object: deprecated } ];
 403              } else {
 404                  _itemTypes = itemTypes;
 405              }
 406  
 407              _.each( _itemTypes, function( itemType ) {
 408                  var container, name = itemType.type + ':' + itemType.object;
 409                  if ( -1 === self.pages[ name ] ) {
 410                      return; // Skip types for which there are no more results.
 411                  }
 412                  container = $( '#available-menu-items-' + itemType.type + '-' + itemType.object );
 413                  container.find( '.accordion-section-title' ).addClass( 'loading' );
 414                  availableMenuItemContainers[ name ] = container;
 415  
 416                  requestItemTypes.push( {
 417                      object: itemType.object,
 418                      type: itemType.type,
 419                      page: self.pages[ name ]
 420                  } );
 421              } );
 422  
 423              if ( 0 === requestItemTypes.length ) {
 424                  return;
 425              }
 426  
 427              self.loading = true;
 428  
 429              params = api.previewer.query( { excludeCustomizedSaved: true } );
 430              _.extend( params, {
 431                  'customize-menus-nonce': api.settings.nonce['customize-menus'],
 432                  'wp_customize': 'on',
 433                  'item_types': requestItemTypes
 434              } );
 435  
 436              request = wp.ajax.post( 'load-available-menu-items-customizer', params );
 437  
 438              request.done(function( data ) {
 439                  var typeInner;
 440                  _.each( data.items, function( typeItems, name ) {
 441                      if ( 0 === typeItems.length ) {
 442                          if ( 0 === self.pages[ name ] ) {
 443                              availableMenuItemContainers[ name ].find( '.accordion-section-title' )
 444                                  .addClass( 'cannot-expand' )
 445                                  .removeClass( 'loading' )
 446                                  .find( '.accordion-section-title > button' )
 447                                  .prop( 'tabIndex', -1 );
 448                          }
 449                          self.pages[ name ] = -1;
 450                          return;
 451                      } else if ( ( 'post_type:page' === name ) && ( ! availableMenuItemContainers[ name ].hasClass( 'open' ) ) ) {
 452                          availableMenuItemContainers[ name ].find( '.accordion-section-title > button' ).trigger( 'click' );
 453                      }
 454                      typeItems = new api.Menus.AvailableItemCollection( typeItems ); // @todo Why is this collection created and then thrown away?
 455                      self.collection.add( typeItems.models );
 456                      typeInner = availableMenuItemContainers[ name ].find( '.available-menu-items-list' );
 457                      typeItems.each( function( menuItem ) {
 458                          typeInner.append( itemTemplate( menuItem.attributes ) );
 459                      } );
 460                      self.pages[ name ] += 1;
 461                  });
 462              });
 463              request.fail(function( data ) {
 464                  if ( typeof console !== 'undefined' && console.error ) {
 465                      console.error( data );
 466                  }
 467              });
 468              request.always(function() {
 469                  _.each( availableMenuItemContainers, function( container ) {
 470                      container.find( '.accordion-section-title' ).removeClass( 'loading' );
 471                  } );
 472                  self.loading = false;
 473              });
 474          },
 475  
 476          // Adjust the height of each section of items to fit the screen.
 477          itemSectionHeight: function() {
 478              var sections, lists, totalHeight, accordionHeight, diff;
 479              totalHeight = window.innerHeight;
 480              sections = this.$el.find( '.accordion-section:not( #available-menu-items-search ) .accordion-section-content' );
 481              lists = this.$el.find( '.accordion-section:not( #available-menu-items-search ) .available-menu-items-list:not(":only-child")' );
 482              accordionHeight =  46 * ( 1 + sections.length ) + 14; // Magic numbers.
 483              diff = totalHeight - accordionHeight;
 484              if ( 120 < diff && 290 > diff ) {
 485                  sections.css( 'max-height', diff );
 486                  lists.css( 'max-height', ( diff - 60 ) );
 487              }
 488          },
 489  
 490          // Highlights a menu item.
 491          select: function( menuitemTpl ) {
 492              this.selected = $( menuitemTpl );
 493              this.selected.siblings( '.menu-item-tpl' ).removeClass( 'selected' );
 494              this.selected.addClass( 'selected' );
 495          },
 496  
 497          // Highlights a menu item on focus.
 498          focus: function( event ) {
 499              this.select( $( event.currentTarget ) );
 500          },
 501  
 502          // Submit handler for keypress and click on menu item.
 503          _submit: function( event ) {
 504              // Only proceed with keypress if it is Enter or Spacebar.
 505              if ( 'keypress' === event.type && ( 13 !== event.which && 32 !== event.which ) ) {
 506                  return;
 507              }
 508  
 509              this.submit( $( event.currentTarget ) );
 510          },
 511  
 512          // Adds a selected menu item to the menu.
 513          submit: function( menuitemTpl ) {
 514              var menuitemId, menu_item;
 515  
 516              if ( ! menuitemTpl ) {
 517                  menuitemTpl = this.selected;
 518              }
 519  
 520              if ( ! menuitemTpl || ! this.currentMenuControl ) {
 521                  return;
 522              }
 523  
 524              this.select( menuitemTpl );
 525  
 526              menuitemId = $( this.selected ).data( 'menu-item-id' );
 527              menu_item = this.collection.findWhere( { id: menuitemId } );
 528              if ( ! menu_item ) {
 529                  return;
 530              }
 531  
 532              // Leave the title as empty to reuse the original title as a placeholder if set.
 533              var nav_menu_item = Object.assign( {}, menu_item.attributes );
 534              if ( nav_menu_item.title === nav_menu_item.original_title ) {
 535                  nav_menu_item.title = '';
 536              }
 537  
 538              this.currentMenuControl.addItemToMenu( nav_menu_item );
 539  
 540              $( menuitemTpl ).find( '.menu-item-handle' ).addClass( 'item-added' );
 541          },
 542  
 543          // Submit handler for keypress and click on custom menu item.
 544          _submitLink: function( event ) {
 545              // Only proceed with keypress if it is Enter.
 546              if ( 'keypress' === event.type && 13 !== event.which ) {
 547                  return;
 548              }
 549  
 550              this.submitLink();
 551          },
 552  
 553          // Adds the custom menu item to the menu.
 554          submitLink: function() {
 555              var menuItem,
 556                  itemName = $( '#custom-menu-item-name' ),
 557                  itemUrl = $( '#custom-menu-item-url' ),
 558                  urlErrorMessage = $( '#custom-url-error' ),
 559                  nameErrorMessage = $( '#custom-name-error' ),
 560                  url = itemUrl.val().trim(),
 561                  urlRegex,
 562                  errorText;
 563  
 564              if ( ! this.currentMenuControl ) {
 565                  return;
 566              }
 567  
 568              /*
 569               * Allow URLs including:
 570               * - http://example.com/
 571               * - //example.com
 572               * - /directory/
 573               * - ?query-param
 574               * - #target
 575               * - mailto:foo@example.com
 576               *
 577               * Any further validation will be handled on the server when the setting is attempted to be saved,
 578               * so this pattern does not need to be complete.
 579               */
 580              urlRegex = /^((\w+:)?\/\/\w.*|\w+:(?!\/\/$)|\/|\?|#)/;
 581              if ( ! urlRegex.test( url ) || '' === itemName.val() ) {
 582                  if ( ! urlRegex.test( url ) ) {
 583                      itemUrl.addClass( 'invalid' )
 584                          .attr( 'aria-invalid', 'true' )
 585                          .attr( 'aria-describedby', 'custom-url-error' );
 586                      urlErrorMessage.show();
 587                      errorText = urlErrorMessage.text();
 588                      // Announce error message via screen reader
 589                      wp.a11y.speak( errorText, 'assertive' );
 590                  }
 591                  if ( '' === itemName.val() ) {
 592                      itemName.addClass( 'invalid' )
 593                          .attr( 'aria-invalid', 'true' )
 594                          .attr( 'aria-describedby', 'custom-name-error' );
 595                      nameErrorMessage.show();
 596                      errorText = ( '' === errorText ) ? nameErrorMessage.text() : errorText + nameErrorMessage.text();
 597                      // Announce error message via screen reader
 598                      wp.a11y.speak( errorText, 'assertive' );
 599                  }
 600                  return;
 601              }
 602  
 603              urlErrorMessage.hide();
 604              nameErrorMessage.hide();
 605              itemName.removeClass( 'invalid' )
 606                  .removeAttr( 'aria-invalid', 'true' )
 607                  .removeAttr( 'aria-describedby', 'custom-name-error' );
 608              itemUrl.removeClass( 'invalid' )
 609                  .removeAttr( 'aria-invalid', 'true' )
 610                  .removeAttr( 'aria-describedby', 'custom-name-error' );
 611  
 612              menuItem = {
 613                  'title': itemName.val(),
 614                  'url': url,
 615                  'type': 'custom',
 616                  'type_label': api.Menus.data.l10n.custom_label,
 617                  'object': 'custom'
 618              };
 619  
 620              this.currentMenuControl.addItemToMenu( menuItem );
 621  
 622              // Reset the custom link form.
 623              itemUrl.val( '' ).attr( 'placeholder', 'https://' );
 624              itemName.val( '' );
 625          },
 626  
 627          /**
 628           * Submit handler for keypress (enter) on field and click on button.
 629           *
 630           * @since 4.7.0
 631           * @private
 632           *
 633           * @param {jQuery.Event} event Event.
 634           * @return {void}
 635           */
 636          _submitNew: function( event ) {
 637              var container;
 638  
 639              // Only proceed with keypress if it is Enter.
 640              if ( 'keypress' === event.type && 13 !== event.which ) {
 641                  return;
 642              }
 643  
 644              if ( this.addingNew ) {
 645                  return;
 646              }
 647  
 648              container = $( event.target ).closest( '.accordion-section' );
 649  
 650              this.submitNew( container );
 651          },
 652  
 653          /**
 654           * Creates a new object and adds an associated menu item to the menu.
 655           *
 656           * @since 4.7.0
 657           * @private
 658           *
 659           * @param {jQuery} container
 660           * @return {void}
 661           */
 662          submitNew: function( container ) {
 663              var panel = this,
 664                  itemName = container.find( '.create-item-input' ),
 665                  title = itemName.val(),
 666                  dataContainer = container.find( '.available-menu-items-list' ),
 667                  itemType = dataContainer.data( 'type' ),
 668                  itemObject = dataContainer.data( 'object' ),
 669                  itemTypeLabel = dataContainer.data( 'type_label' ),
 670                  inputError = container.find('.create-item-error'),
 671                  promise;
 672  
 673              if ( ! this.currentMenuControl ) {
 674                  return;
 675              }
 676  
 677              // Only posts are supported currently.
 678              if ( 'post_type' !== itemType ) {
 679                  return;
 680              }
 681              if ( '' === itemName.val().trim() ) {
 682                  container.addClass( 'form-invalid' );
 683                  itemName.attr('aria-invalid', 'true');
 684                  itemName.attr('aria-describedby', inputError.attr('id'));
 685                  inputError.slideDown( 'fast' );
 686                  wp.a11y.speak( inputError.text() );
 687                  return;
 688              } else {
 689                  container.removeClass( 'form-invalid' );
 690                  itemName.attr('aria-invalid', 'false');
 691                  itemName.removeAttr('aria-describedby');
 692                  inputError.hide();
 693                  container.find( '.accordion-section-title' ).addClass( 'loading' );
 694              }
 695  
 696              panel.addingNew = true;
 697              itemName.attr( 'disabled', 'disabled' );
 698              promise = api.Menus.insertAutoDraftPost( {
 699                  post_title: title,
 700                  post_type: itemObject
 701              } );
 702              promise.done( function( data ) {
 703                  var availableItem, $content, itemElement;
 704                  availableItem = new api.Menus.AvailableItemModel( {
 705                      'id': 'post-' + data.post_id, // Used for available menu item Backbone models.
 706                      'title': itemName.val(),
 707                      'type': itemType,
 708                      'type_label': itemTypeLabel,
 709                      'object': itemObject,
 710                      'object_id': data.post_id,
 711                      'url': data.url
 712                  } );
 713  
 714                  // Add new item to menu.
 715                  panel.currentMenuControl.addItemToMenu( availableItem.attributes );
 716  
 717                  // Add the new item to the list of available items.
 718                  api.Menus.availableMenuItemsPanel.collection.add( availableItem );
 719                  $content = container.find( '.available-menu-items-list' );
 720                  itemElement = $( wp.template( 'available-menu-item' )( availableItem.attributes ) );
 721                  itemElement.find( '.menu-item-handle:first' ).addClass( 'item-added' );
 722                  $content.prepend( itemElement );
 723                  $content.scrollTop();
 724  
 725                  // Reset the create content form.
 726                  itemName.val( '' ).removeAttr( 'disabled' );
 727                  panel.addingNew = false;
 728                  container.find( '.accordion-section-title' ).removeClass( 'loading' );
 729              } );
 730          },
 731  
 732          // Opens the panel.
 733          open: function( menuControl ) {
 734              var panel = this, close;
 735  
 736              this.currentMenuControl = menuControl;
 737  
 738              this.itemSectionHeight();
 739  
 740              if ( api.section.has( 'publish_settings' ) ) {
 741                  api.section( 'publish_settings' ).collapse();
 742              }
 743  
 744              $( 'body' ).addClass( 'adding-menu-items' );
 745  
 746              close = function() {
 747                  panel.close();
 748                  $( this ).off( 'click', close );
 749              };
 750              $( '#customize-preview' ).on( 'click', close );
 751  
 752              // Collapse all controls.
 753              _( this.currentMenuControl.getMenuItemControls() ).each( function( control ) {
 754                  control.collapseForm();
 755              } );
 756  
 757              this.$el.find( '.selected' ).removeClass( 'selected' );
 758  
 759              this.$search.trigger( 'focus' );
 760          },
 761  
 762          // Closes the panel.
 763          close: function( options ) {
 764              options = options || {};
 765  
 766              if ( options.returnFocus && this.currentMenuControl ) {
 767                  this.currentMenuControl.container.find( '.add-new-menu-item' ).focus();
 768              }
 769  
 770              this.currentMenuControl = null;
 771              this.selected = null;
 772  
 773              $( 'body' ).removeClass( 'adding-menu-items' );
 774              $( '#available-menu-items .menu-item-handle.item-added' ).removeClass( 'item-added' );
 775  
 776              this.$search.val( '' ).trigger( 'input' );
 777          },
 778  
 779          // Add a few keyboard enhancements to the panel.
 780          keyboardAccessible: function( event ) {
 781              var isEnter = ( 13 === event.which ),
 782                  isEsc = ( 27 === event.which ),
 783                  isBackTab = ( 9 === event.which && event.shiftKey ),
 784                  isSearchFocused = $( event.target ).is( this.$search );
 785  
 786              // If enter pressed but nothing entered, don't do anything.
 787              if ( isEnter && ! this.$search.val() ) {
 788                  return;
 789              }
 790  
 791              if ( isSearchFocused && isBackTab ) {
 792                  this.currentMenuControl.container.find( '.add-new-menu-item' ).focus();
 793                  event.preventDefault(); // Avoid additional back-tab.
 794              } else if ( isEsc ) {
 795                  this.close( { returnFocus: true } );
 796              }
 797          }
 798      });
 799  
 800      /**
 801       * wp.customize.Menus.MenusPanel
 802       *
 803       * Customizer panel for menus. This is used only for screen options management.
 804       * Note that 'menus' must match the WP_Customize_Menu_Panel::$type.
 805       *
 806       * @class    wp.customize.Menus.MenusPanel
 807       * @augments wp.customize.Panel
 808       */
 809      api.Menus.MenusPanel = api.Panel.extend(/** @lends wp.customize.Menus.MenusPanel.prototype */{
 810  
 811          attachEvents: function() {
 812              api.Panel.prototype.attachEvents.call( this );
 813  
 814              var panel = this,
 815                  panelMeta = panel.container.find( '.panel-meta' ),
 816                  help = panelMeta.find( '.customize-help-toggle' ),
 817                  content = panelMeta.find( '.customize-panel-description' ),
 818                  options = $( '#screen-options-wrap' ),
 819                  button = panelMeta.find( '.customize-screen-options-toggle' );
 820              button.on( 'click keydown', function( event ) {
 821                  if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
 822                      return;
 823                  }
 824                  event.preventDefault();
 825  
 826                  // Hide description.
 827                  if ( content.not( ':hidden' ) ) {
 828                      content.slideUp( 'fast' );
 829                      help.attr( 'aria-expanded', 'false' );
 830                  }
 831  
 832                  if ( 'true' === button.attr( 'aria-expanded' ) ) {
 833                      button.attr( 'aria-expanded', 'false' );
 834                      panelMeta.removeClass( 'open' );
 835                      panelMeta.removeClass( 'active-menu-screen-options' );
 836                      options.slideUp( 'fast' );
 837                  } else {
 838                      button.attr( 'aria-expanded', 'true' );
 839                      panelMeta.addClass( 'open' );
 840                      panelMeta.addClass( 'active-menu-screen-options' );
 841                      options.slideDown( 'fast' );
 842                  }
 843  
 844                  return false;
 845              } );
 846  
 847              // Help toggle.
 848              help.on( 'click keydown', function( event ) {
 849                  if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
 850                      return;
 851                  }
 852                  event.preventDefault();
 853  
 854                  if ( 'true' === button.attr( 'aria-expanded' ) ) {
 855                      button.attr( 'aria-expanded', 'false' );
 856                      help.attr( 'aria-expanded', 'true' );
 857                      panelMeta.addClass( 'open' );
 858                      panelMeta.removeClass( 'active-menu-screen-options' );
 859                      options.slideUp( 'fast' );
 860                      content.slideDown( 'fast' );
 861                  }
 862              } );
 863          },
 864  
 865          /**
 866           * Update field visibility when clicking on the field toggles.
 867           */
 868          ready: function() {
 869              var panel = this;
 870              panel.container.find( '.hide-column-tog' ).on( 'click', function() {
 871                  panel.saveManageColumnsState();
 872              });
 873  
 874              // Inject additional heading into the menu locations section's head container.
 875              api.section( 'menu_locations', function( section ) {
 876                  section.headContainer.prepend(
 877                      wp.template( 'nav-menu-locations-header' )( api.Menus.data )
 878                  );
 879              } );
 880          },
 881  
 882          /**
 883           * Save hidden column states.
 884           *
 885           * @since 4.3.0
 886           * @private
 887           *
 888           * @return {void}
 889           */
 890          saveManageColumnsState: _.debounce( function() {
 891              var panel = this;
 892              if ( panel._updateHiddenColumnsRequest ) {
 893                  panel._updateHiddenColumnsRequest.abort();
 894              }
 895  
 896              panel._updateHiddenColumnsRequest = wp.ajax.post( 'hidden-columns', {
 897                  hidden: panel.hidden(),
 898                  screenoptionnonce: $( '#screenoptionnonce' ).val(),
 899                  page: 'nav-menus'
 900              } );
 901              panel._updateHiddenColumnsRequest.always( function() {
 902                  panel._updateHiddenColumnsRequest = null;
 903              } );
 904          }, 2000 ),
 905  
 906          /**
 907           * @deprecated Since 4.7.0 now that the nav_menu sections are responsible for toggling the classes on their own containers.
 908           */
 909          checked: function() {},
 910  
 911          /**
 912           * @deprecated Since 4.7.0 now that the nav_menu sections are responsible for toggling the classes on their own containers.
 913           */
 914          unchecked: function() {},
 915  
 916          /**
 917           * Get hidden fields.
 918           *
 919           * @since 4.3.0
 920           * @private
 921           *
 922           * @return {Array} Fields (columns) that are hidden.
 923           */
 924          hidden: function() {
 925              return $( '.hide-column-tog' ).not( ':checked' ).map( function() {
 926                  var id = this.id;
 927                  return id.substring( 0, id.length - 5 );
 928              }).get().join( ',' );
 929          }
 930      } );
 931  
 932      /**
 933       * wp.customize.Menus.MenuSection
 934       *
 935       * Customizer section for menus. This is used only for lazy-loading child controls.
 936       * Note that 'nav_menu' must match the WP_Customize_Menu_Section::$type.
 937       *
 938       * @class    wp.customize.Menus.MenuSection
 939       * @augments wp.customize.Section
 940       */
 941      api.Menus.MenuSection = api.Section.extend(/** @lends wp.customize.Menus.MenuSection.prototype */{
 942  
 943          /**
 944           * Initialize.
 945           *
 946           * @since 4.3.0
 947           *
 948           * @param {string} id
 949           * @param {Object} options
 950           */
 951          initialize: function( id, options ) {
 952              var section = this;
 953              api.Section.prototype.initialize.call( section, id, options );
 954              section.deferred.initSortables = $.Deferred();
 955          },
 956  
 957          /**
 958           * Ready.
 959           */
 960          ready: function() {
 961              var section = this, fieldActiveToggles, handleFieldActiveToggle;
 962  
 963              if ( 'undefined' === typeof section.params.menu_id ) {
 964                  throw new Error( 'params.menu_id was not defined' );
 965              }
 966  
 967              /*
 968               * Since newly created sections won't be registered in PHP, we need to prevent the
 969               * preview's sending of the activeSections to result in this control
 970               * being deactivated when the preview refreshes. So we can hook onto
 971               * the setting that has the same ID and its presence can dictate
 972               * whether the section is active.
 973               */
 974              section.active.validate = function() {
 975                  if ( ! api.has( section.id ) ) {
 976                      return false;
 977                  }
 978                  return !! api( section.id ).get();
 979              };
 980  
 981              section.populateControls();
 982  
 983              section.navMenuLocationSettings = {};
 984              section.assignedLocations = new api.Value( [] );
 985  
 986              api.each(function( setting, id ) {
 987                  var matches = id.match( /^nav_menu_locations\[(.+?)]/ );
 988                  if ( matches ) {
 989                      section.navMenuLocationSettings[ matches[1] ] = setting;
 990                      setting.bind( function() {
 991                          section.refreshAssignedLocations();
 992                      });
 993                  }
 994              });
 995  
 996              section.assignedLocations.bind(function( to ) {
 997                  section.updateAssignedLocationsInSectionTitle( to );
 998              });
 999  
1000              section.refreshAssignedLocations();
1001  
1002              api.bind( 'pane-contents-reflowed', function() {
1003                  // Skip menus that have been removed.
1004                  if ( ! section.contentContainer.parent().length ) {
1005                      return;
1006                  }
1007                  section.container.find( '.menu-item .menu-item-reorder-nav button' ).attr({ 'tabindex': '0', 'aria-hidden': 'false' });
1008                  section.container.find( '.menu-item.move-up-disabled .menus-move-up' ).attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
1009                  section.container.find( '.menu-item.move-down-disabled .menus-move-down' ).attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
1010                  section.container.find( '.menu-item.move-left-disabled .menus-move-left' ).attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
1011                  section.container.find( '.menu-item.move-right-disabled .menus-move-right' ).attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
1012              } );
1013  
1014              /**
1015               * Update the active field class for the content container for a given checkbox toggle.
1016               *
1017               * @this {jQuery}
1018               * @return {void}
1019               */
1020              handleFieldActiveToggle = function() {
1021                  var className = 'field-' + $( this ).val() + '-active';
1022                  section.contentContainer.toggleClass( className, $( this ).prop( 'checked' ) );
1023              };
1024              fieldActiveToggles = api.panel( 'nav_menus' ).contentContainer.find( '.metabox-prefs:first' ).find( '.hide-column-tog' );
1025              fieldActiveToggles.each( handleFieldActiveToggle );
1026              fieldActiveToggles.on( 'click', handleFieldActiveToggle );
1027          },
1028  
1029          populateControls: function() {
1030              var section = this,
1031                  menuNameControlId,
1032                  menuLocationsControlId,
1033                  menuAutoAddControlId,
1034                  menuDeleteControlId,
1035                  menuControl,
1036                  menuNameControl,
1037                  menuLocationsControl,
1038                  menuAutoAddControl,
1039                  menuDeleteControl;
1040  
1041              // Add the control for managing the menu name.
1042              menuNameControlId = section.id + '[name]';
1043              menuNameControl = api.control( menuNameControlId );
1044              if ( ! menuNameControl ) {
1045                  menuNameControl = new api.controlConstructor.nav_menu_name( menuNameControlId, {
1046                      type: 'nav_menu_name',
1047                      label: api.Menus.data.l10n.menuNameLabel,
1048                      section: section.id,
1049                      priority: 0,
1050                      settings: {
1051                          'default': section.id
1052                      }
1053                  } );
1054                  api.control.add( menuNameControl );
1055                  menuNameControl.active.set( true );
1056              }
1057  
1058              // Add the menu control.
1059              menuControl = api.control( section.id );
1060              if ( ! menuControl ) {
1061                  menuControl = new api.controlConstructor.nav_menu( section.id, {
1062                      type: 'nav_menu',
1063                      section: section.id,
1064                      priority: 998,
1065                      settings: {
1066                          'default': section.id
1067                      },
1068                      menu_id: section.params.menu_id
1069                  } );
1070                  api.control.add( menuControl );
1071                  menuControl.active.set( true );
1072              }
1073  
1074              // Add the menu locations control.
1075              menuLocationsControlId = section.id + '[locations]';
1076              menuLocationsControl = api.control( menuLocationsControlId );
1077              if ( ! menuLocationsControl ) {
1078                  menuLocationsControl = new api.controlConstructor.nav_menu_locations( menuLocationsControlId, {
1079                      section: section.id,
1080                      priority: 999,
1081                      settings: {
1082                          'default': section.id
1083                      },
1084                      menu_id: section.params.menu_id
1085                  } );
1086                  api.control.add( menuLocationsControl.id, menuLocationsControl );
1087                  menuControl.active.set( true );
1088              }
1089  
1090              // Add the control for managing the menu auto_add.
1091              menuAutoAddControlId = section.id + '[auto_add]';
1092              menuAutoAddControl = api.control( menuAutoAddControlId );
1093              if ( ! menuAutoAddControl ) {
1094                  menuAutoAddControl = new api.controlConstructor.nav_menu_auto_add( menuAutoAddControlId, {
1095                      type: 'nav_menu_auto_add',
1096                      label: '',
1097                      section: section.id,
1098                      priority: 1000,
1099                      settings: {
1100                          'default': section.id
1101                      }
1102                  } );
1103                  api.control.add( menuAutoAddControl );
1104                  menuAutoAddControl.active.set( true );
1105              }
1106  
1107              // Add the control for deleting the menu.
1108              menuDeleteControlId = section.id + '[delete]';
1109              menuDeleteControl = api.control( menuDeleteControlId );
1110              if ( ! menuDeleteControl ) {
1111                  menuDeleteControl = new api.Control( menuDeleteControlId, {
1112                      section: section.id,
1113                      priority: 1001,
1114                      templateId: 'nav-menu-delete-button'
1115                  } );
1116                  api.control.add( menuDeleteControl.id, menuDeleteControl );
1117                  menuDeleteControl.active.set( true );
1118                  menuDeleteControl.deferred.embedded.done( function () {
1119                      menuDeleteControl.container.find( 'button' ).on( 'click', function() {
1120                          var menuId = section.params.menu_id;
1121                          var menuControl = api.Menus.getMenuControl( menuId );
1122                          menuControl.setting.set( false );
1123                      });
1124                  } );
1125              }
1126          },
1127  
1128          /**
1129           *
1130           */
1131          refreshAssignedLocations: function() {
1132              var section = this,
1133                  menuTermId = section.params.menu_id,
1134                  currentAssignedLocations = [];
1135              _.each( section.navMenuLocationSettings, function( setting, themeLocation ) {
1136                  if ( setting() === menuTermId ) {
1137                      currentAssignedLocations.push( themeLocation );
1138                  }
1139              });
1140              section.assignedLocations.set( currentAssignedLocations );
1141          },
1142  
1143          /**
1144           * @param {Array} themeLocationSlugs Theme location slugs.
1145           */
1146          updateAssignedLocationsInSectionTitle: function( themeLocationSlugs ) {
1147              var section = this,
1148                  $title;
1149  
1150              $title = section.container.find( '.accordion-section-title button:first' );
1151              $title.find( '.menu-in-location' ).remove();
1152              _.each( themeLocationSlugs, function( themeLocationSlug ) {
1153                  var $label, locationName;
1154                  $label = $( '<span class="menu-in-location"></span>' );
1155                  locationName = api.Menus.data.locationSlugMappedToName[ themeLocationSlug ];
1156                  $label.text( api.Menus.data.l10n.menuLocation.replace( '%s', locationName ) );
1157                  $title.append( $label );
1158              });
1159  
1160              section.container.toggleClass( 'assigned-to-menu-location', 0 !== themeLocationSlugs.length );
1161  
1162          },
1163  
1164          onChangeExpanded: function( expanded, args ) {
1165              var section = this, completeCallback;
1166  
1167              if ( expanded ) {
1168                  wpNavMenu.menuList = section.contentContainer;
1169                  wpNavMenu.targetList = wpNavMenu.menuList;
1170  
1171                  // Add attributes needed by wpNavMenu.
1172                  $( '#menu-to-edit' ).removeAttr( 'id' );
1173                  wpNavMenu.menuList.attr( 'id', 'menu-to-edit' ).addClass( 'menu' );
1174  
1175                  api.Menus.MenuItemControl.prototype.initAccessibility();
1176  
1177                  _.each( api.section( section.id ).controls(), function( control ) {
1178                      if ( 'nav_menu_item' === control.params.type ) {
1179                          control.actuallyEmbed();
1180                      }
1181                  } );
1182  
1183                  // Make sure Sortables is initialized after the section has been expanded to prevent `offset` issues.
1184                  if ( args.completeCallback ) {
1185                      completeCallback = args.completeCallback;
1186                  }
1187                  args.completeCallback = function() {
1188                      if ( 'resolved' !== section.deferred.initSortables.state() ) {
1189                          wpNavMenu.initSortables(); // Depends on menu-to-edit ID being set above.
1190                          section.deferred.initSortables.resolve( wpNavMenu.menuList ); // Now MenuControl can extend the sortable.
1191  
1192                          // @todo Note that wp.customize.reflowPaneContents() is debounced,
1193                          // so this immediate change will show a slight flicker while priorities get updated.
1194                          api.control( 'nav_menu[' + String( section.params.menu_id ) + ']' ).reflowMenuItems();
1195                      }
1196                      if ( _.isFunction( completeCallback ) ) {
1197                          completeCallback();
1198                      }
1199                  };
1200              }
1201              api.Section.prototype.onChangeExpanded.call( section, expanded, args );
1202          },
1203  
1204          /**
1205           * Highlight how a user may create new menu items.
1206           *
1207           * This method reminds the user to create new menu items and how.
1208           * It's exposed this way because this class knows best which UI needs
1209           * highlighted but those expanding this section know more about why and
1210           * when the affordance should be highlighted.
1211           *
1212           * @since 4.9.0
1213           *
1214           * @return {void}
1215           */
1216          highlightNewItemButton: function() {
1217              api.utils.highlightButton( this.contentContainer.find( '.add-new-menu-item' ), { delay: 2000 } );
1218          }
1219      });
1220  
1221      /**
1222       * Create a nav menu setting and section.
1223       *
1224       * @since 4.9.0
1225       *
1226       * @param {string} [name=''] Nav menu name.
1227       * @return {wp.customize.Menus.MenuSection} Added nav menu.
1228       */
1229      api.Menus.createNavMenu = function createNavMenu( name ) {
1230          var customizeId, placeholderId, setting;
1231          placeholderId = api.Menus.generatePlaceholderAutoIncrementId();
1232  
1233          customizeId = 'nav_menu[' + String( placeholderId ) + ']';
1234  
1235          // Register the menu control setting.
1236          setting = api.create( customizeId, customizeId, {}, {
1237              type: 'nav_menu',
1238              transport: api.Menus.data.settingTransport,
1239              previewer: api.previewer
1240          } );
1241          setting.set( $.extend(
1242              {},
1243              api.Menus.data.defaultSettingValues.nav_menu,
1244              {
1245                  name: name || ''
1246              }
1247          ) );
1248  
1249          /*
1250           * Add the menu section (and its controls).
1251           * Note that this will automatically create the required controls
1252           * inside via the Section's ready method.
1253           */
1254          return api.section.add( new api.Menus.MenuSection( customizeId, {
1255              panel: 'nav_menus',
1256              title: displayNavMenuName( name ),
1257              customizeAction: api.Menus.data.l10n.customizingMenus,
1258              priority: 10,
1259              menu_id: placeholderId
1260          } ) );
1261      };
1262  
1263      /**
1264       * wp.customize.Menus.NewMenuSection
1265       *
1266       * Customizer section for new menus.
1267       *
1268       * @class    wp.customize.Menus.NewMenuSection
1269       * @augments wp.customize.Section
1270       */
1271      api.Menus.NewMenuSection = api.Section.extend(/** @lends wp.customize.Menus.NewMenuSection.prototype */{
1272  
1273          /**
1274           * Add behaviors for the accordion section.
1275           *
1276           * @since 4.3.0
1277           */
1278          attachEvents: function() {
1279              var section = this,
1280                  container = section.container,
1281                  contentContainer = section.contentContainer,
1282                  navMenuSettingPattern = /^nav_menu\[/;
1283  
1284              section.headContainer.find( '.accordion-section-title' ).replaceWith(
1285                  wp.template( 'nav-menu-create-menu-section-title' )
1286              );
1287  
1288              /*
1289               * We have to manually handle section expanded because we do not
1290               * apply the `accordion-section-title` class to this button-driven section.
1291               */
1292              container.on( 'click', '.customize-add-menu-button', function() {
1293                  section.expand();
1294              });
1295  
1296              contentContainer.on( 'keydown', '.menu-name-field', function( event ) {
1297                  if ( 13 === event.which ) { // Enter.
1298                      section.submit();
1299                  }
1300              } );
1301              contentContainer.on( 'click', '#customize-new-menu-submit', function( event ) {
1302                  section.submit();
1303                  event.stopPropagation();
1304                  event.preventDefault();
1305              } );
1306  
1307              /**
1308               * Get number of non-deleted nav menus.
1309               *
1310               * @since 4.9.0
1311               * @return {number} Count.
1312               */
1313  			function getNavMenuCount() {
1314                  var count = 0;
1315                  api.each( function( setting ) {
1316                      if ( navMenuSettingPattern.test( setting.id ) && false !== setting.get() ) {
1317                          count += 1;
1318                      }
1319                  } );
1320                  return count;
1321              }
1322  
1323              /**
1324               * Update visibility of notice to prompt users to create menus.
1325               *
1326               * @since 4.9.0
1327               * @return {void}
1328               */
1329  			function updateNoticeVisibility() {
1330                  container.find( '.add-new-menu-notice' ).prop( 'hidden', getNavMenuCount() > 0 );
1331              }
1332  
1333              /**
1334               * Handle setting addition.
1335               *
1336               * @since 4.9.0
1337               * @param {wp.customize.Setting} setting - Added setting.
1338               * @return {void}
1339               */
1340  			function addChangeEventListener( setting ) {
1341                  if ( navMenuSettingPattern.test( setting.id ) ) {
1342                      setting.bind( updateNoticeVisibility );
1343                      updateNoticeVisibility();
1344                  }
1345              }
1346  
1347              /**
1348               * Handle setting removal.
1349               *
1350               * @since 4.9.0
1351               * @param {wp.customize.Setting} setting - Removed setting.
1352               * @return {void}
1353               */
1354  			function removeChangeEventListener( setting ) {
1355                  if ( navMenuSettingPattern.test( setting.id ) ) {
1356                      setting.unbind( updateNoticeVisibility );
1357                      updateNoticeVisibility();
1358                  }
1359              }
1360  
1361              api.each( addChangeEventListener );
1362              api.bind( 'add', addChangeEventListener );
1363              api.bind( 'removed', removeChangeEventListener );
1364              updateNoticeVisibility();
1365  
1366              api.Section.prototype.attachEvents.apply( section, arguments );
1367          },
1368  
1369          /**
1370           * Set up the control.
1371           *
1372           * @since 4.9.0
1373           */
1374          ready: function() {
1375              this.populateControls();
1376          },
1377  
1378          /**
1379           * Create the controls for this section.
1380           *
1381           * @since 4.9.0
1382           */
1383          populateControls: function() {
1384              var section = this,
1385                  menuNameControlId,
1386                  menuLocationsControlId,
1387                  newMenuSubmitControlId,
1388                  menuNameControl,
1389                  menuLocationsControl,
1390                  newMenuSubmitControl;
1391  
1392              menuNameControlId = section.id + '[name]';
1393              menuNameControl = api.control( menuNameControlId );
1394              if ( ! menuNameControl ) {
1395                  menuNameControl = new api.controlConstructor.nav_menu_name( menuNameControlId, {
1396                      label: api.Menus.data.l10n.menuNameLabel,
1397                      description: api.Menus.data.l10n.newMenuNameDescription,
1398                      section: section.id,
1399                      priority: 0
1400                  } );
1401                  api.control.add( menuNameControl.id, menuNameControl );
1402                  menuNameControl.active.set( true );
1403              }
1404  
1405              menuLocationsControlId = section.id + '[locations]';
1406              menuLocationsControl = api.control( menuLocationsControlId );
1407              if ( ! menuLocationsControl ) {
1408                  menuLocationsControl = new api.controlConstructor.nav_menu_locations( menuLocationsControlId, {
1409                      section: section.id,
1410                      priority: 1,
1411                      menu_id: '',
1412                      isCreating: true
1413                  } );
1414                  api.control.add( menuLocationsControlId, menuLocationsControl );
1415                  menuLocationsControl.active.set( true );
1416              }
1417  
1418              newMenuSubmitControlId = section.id + '[submit]';
1419              newMenuSubmitControl = api.control( newMenuSubmitControlId );
1420              if ( !newMenuSubmitControl ) {
1421                  newMenuSubmitControl = new api.Control( newMenuSubmitControlId, {
1422                      section: section.id,
1423                      priority: 1,
1424                      templateId: 'nav-menu-submit-new-button'
1425                  } );
1426                  api.control.add( newMenuSubmitControlId, newMenuSubmitControl );
1427                  newMenuSubmitControl.active.set( true );
1428              }
1429          },
1430  
1431          /**
1432           * Create the new menu with name and location supplied by the user.
1433           *
1434           * @since 4.9.0
1435           */
1436          submit: function() {
1437              var section = this,
1438                  contentContainer = section.contentContainer,
1439                  nameInput = contentContainer.find( '.menu-name-field' ).first(),
1440                  name = nameInput.val(),
1441                  menuSection;
1442  
1443              if ( ! name ) {
1444                  nameInput.addClass( 'invalid' );
1445                  nameInput.focus();
1446                  return;
1447              }
1448  
1449              menuSection = api.Menus.createNavMenu( name );
1450  
1451              // Clear name field.
1452              nameInput.val( '' );
1453              nameInput.removeClass( 'invalid' );
1454  
1455              contentContainer.find( '.assigned-menu-location input[type=checkbox]' ).each( function() {
1456                  var checkbox = $( this ),
1457                  navMenuLocationSetting;
1458  
1459                  if ( checkbox.prop( 'checked' ) ) {
1460                      navMenuLocationSetting = api( 'nav_menu_locations[' + checkbox.data( 'location-id' ) + ']' );
1461                      navMenuLocationSetting.set( menuSection.params.menu_id );
1462  
1463                      // Reset state for next new menu.
1464                      checkbox.prop( 'checked', false );
1465                  }
1466              } );
1467  
1468              wp.a11y.speak( api.Menus.data.l10n.menuAdded );
1469  
1470              // Focus on the new menu section.
1471              menuSection.focus( {
1472                  completeCallback: function() {
1473                      menuSection.highlightNewItemButton();
1474                  }
1475              } );
1476          },
1477  
1478          /**
1479           * Select a default location.
1480           *
1481           * This method selects a single location by default so we can support
1482           * creating a menu for a specific menu location.
1483           *
1484           * @since 4.9.0
1485           *
1486           * @param {string|null} locationId - The ID of the location to select. `null` clears all selections.
1487           * @return {void}
1488           */
1489          selectDefaultLocation: function( locationId ) {
1490              var locationControl = api.control( this.id + '[locations]' ),
1491                  locationSelections = {};
1492  
1493              if ( locationId !== null ) {
1494                  locationSelections[ locationId ] = true;
1495              }
1496  
1497              locationControl.setSelections( locationSelections );
1498          }
1499      });
1500  
1501      /**
1502       * wp.customize.Menus.MenuLocationControl
1503       *
1504       * Customizer control for menu locations (rendered as a <select>).
1505       * Note that 'nav_menu_location' must match the WP_Customize_Nav_Menu_Location_Control::$type.
1506       *
1507       * @class    wp.customize.Menus.MenuLocationControl
1508       * @augments wp.customize.Control
1509       */
1510      api.Menus.MenuLocationControl = api.Control.extend(/** @lends wp.customize.Menus.MenuLocationControl.prototype */{
1511          initialize: function( id, options ) {
1512              var control = this,
1513                  matches = id.match( /^nav_menu_locations\[(.+?)]/ );
1514              control.themeLocation = matches[1];
1515              api.Control.prototype.initialize.call( control, id, options );
1516          },
1517  
1518          ready: function() {
1519              var control = this, navMenuIdRegex = /^nav_menu\[(-?\d+)]/;
1520  
1521              // @todo It would be better if this was added directly on the setting itself, as opposed to the control.
1522              control.setting.validate = function( value ) {
1523                  if ( '' === value ) {
1524                      return 0;
1525                  } else {
1526                      return parseInt( value, 10 );
1527                  }
1528              };
1529  
1530              // Create and Edit menu buttons.
1531              control.container.find( '.create-menu' ).on( 'click', function() {
1532                  var addMenuSection = api.section( 'add_menu' );
1533                  addMenuSection.selectDefaultLocation( this.dataset.locationId );
1534                  addMenuSection.focus();
1535              } );
1536              control.container.find( '.edit-menu' ).on( 'click', function() {
1537                  var menuId = control.setting();
1538                  api.section( 'nav_menu[' + menuId + ']' ).focus();
1539              });
1540              control.setting.bind( 'change', function() {
1541                  var menuIsSelected = 0 !== control.setting();
1542                  control.container.find( '.create-menu' ).toggleClass( 'hidden', menuIsSelected );
1543                  control.container.find( '.edit-menu' ).toggleClass( 'hidden', ! menuIsSelected );
1544              });
1545  
1546              // Add/remove menus from the available options when they are added and removed.
1547              api.bind( 'add', function( setting ) {
1548                  var option, menuId, matches = setting.id.match( navMenuIdRegex );
1549                  if ( ! matches || false === setting() ) {
1550                      return;
1551                  }
1552                  menuId = matches[1];
1553                  option = new Option( displayNavMenuName( setting().name ), menuId );
1554                  control.container.find( 'select' ).append( option );
1555              });
1556              api.bind( 'remove', function( setting ) {
1557                  var menuId, matches = setting.id.match( navMenuIdRegex );
1558                  if ( ! matches ) {
1559                      return;
1560                  }
1561                  menuId = parseInt( matches[1], 10 );
1562                  if ( control.setting() === menuId ) {
1563                      control.setting.set( '' );
1564                  }
1565                  control.container.find( 'option[value=' + menuId + ']' ).remove();
1566              });
1567              api.bind( 'change', function( setting ) {
1568                  var menuId, matches = setting.id.match( navMenuIdRegex );
1569                  if ( ! matches ) {
1570                      return;
1571                  }
1572                  menuId = parseInt( matches[1], 10 );
1573                  if ( false === setting() ) {
1574                      if ( control.setting() === menuId ) {
1575                          control.setting.set( '' );
1576                      }
1577                      control.container.find( 'option[value=' + menuId + ']' ).remove();
1578                  } else {
1579                      control.container.find( 'option[value=' + menuId + ']' ).text( displayNavMenuName( setting().name ) );
1580                  }
1581              });
1582          }
1583      });
1584  
1585      api.Menus.MenuItemControl = api.Control.extend(/** @lends wp.customize.Menus.MenuItemControl.prototype */{
1586  
1587          /**
1588           * wp.customize.Menus.MenuItemControl
1589           *
1590           * Customizer control for menu items.
1591           * Note that 'menu_item' must match the WP_Customize_Menu_Item_Control::$type.
1592           *
1593           * @constructs wp.customize.Menus.MenuItemControl
1594           * @augments   wp.customize.Control
1595           *
1596           * @inheritDoc
1597           */
1598          initialize: function( id, options ) {
1599              var control = this;
1600              control.expanded = new api.Value( false );
1601              control.expandedArgumentsQueue = [];
1602              control.expanded.bind( function( expanded ) {
1603                  var args = control.expandedArgumentsQueue.shift();
1604                  args = $.extend( {}, control.defaultExpandedArguments, args );
1605                  control.onChangeExpanded( expanded, args );
1606              });
1607              api.Control.prototype.initialize.call( control, id, options );
1608              control.active.validate = function() {
1609                  var value, section = api.section( control.section() );
1610                  if ( section ) {
1611                      value = section.active();
1612                  } else {
1613                      value = false;
1614                  }
1615                  return value;
1616              };
1617          },
1618  
1619          /**
1620           * Set up the initial state of the screen reader accessibility information for menu items.
1621           *
1622           * @since 6.6.0
1623           */
1624          initAccessibility: function() {
1625              var control = this,
1626                  menu = $( '#menu-to-edit' );
1627  
1628              // Refresh the accessibility when the user comes close to the item in any way.
1629              menu.on( 'mouseenter.refreshAccessibility focus.refreshAccessibility touchstart.refreshAccessibility', '.menu-item', function(){
1630                  control.refreshAdvancedAccessibilityOfItem( $( this ).find( 'button.item-edit' ) );
1631              } );
1632  
1633              // We have to update on click as well because we might hover first, change the item, and then click.
1634              menu.on( 'click', 'button.item-edit', function() {
1635                  control.refreshAdvancedAccessibilityOfItem( $( this ) );
1636              } );
1637          },
1638  
1639          /**
1640           * refreshAdvancedAccessibilityOfItem( [itemToRefresh] )
1641           *
1642           * Refreshes advanced accessibility buttons for one menu item.
1643           * Shows or hides buttons based on the location of the menu item.
1644           *
1645           * @param {Object} itemToRefresh The menu item that might need its advanced accessibility buttons refreshed
1646           * 
1647           * @since 6.6.0
1648           */
1649          refreshAdvancedAccessibilityOfItem: function( itemToRefresh ) {
1650              // Only refresh accessibility when necessary.
1651              if ( true !== $( itemToRefresh ).data( 'needs_accessibility_refresh' ) ) {
1652                  return;
1653              }
1654  
1655              var primaryItems, itemPosition, title,
1656                  parentItem, parentItemId, parentItemName, subItems, totalSubItems,
1657                  $this = $( itemToRefresh ),
1658                  menuItem = $this.closest( 'li.menu-item' ).first(),
1659                  depth = menuItem.menuItemDepth(),
1660                  isPrimaryMenuItem = ( 0 === depth ),
1661                  itemName = $this.closest( '.menu-item-handle' ).find( '.menu-item-title' ).text(),
1662                  menuItemType = $this.closest( '.menu-item-handle' ).find( '.item-type' ).text(),
1663                  totalMenuItems = $( '#menu-to-edit li' ).length;
1664  
1665              if ( isPrimaryMenuItem ) {
1666                  primaryItems = $( '.menu-item-depth-0' ),
1667                  itemPosition = primaryItems.index( menuItem ) + 1,
1668                  totalMenuItems = primaryItems.length,
1669                  // String together help text for primary menu items.
1670                  title = menus.menuFocus.replace( '%1$s', itemName ).replace( '%2$s', menuItemType ).replace( '%3$d', itemPosition ).replace( '%4$d', totalMenuItems );
1671              } else {
1672                  parentItem = menuItem.prevAll( '.menu-item-depth-' + parseInt( depth - 1, 10 ) ).first(),
1673                  parentItemId = parentItem.find( '.menu-item-data-db-id' ).val(),
1674                  parentItemName = parentItem.find( '.menu-item-title' ).text(),
1675                  subItems = $( '.menu-item .menu-item-data-parent-id[value="' + parentItemId + '"]' ),
1676                  totalSubItems = subItems.length,
1677                  itemPosition = $( subItems.parents( '.menu-item' ).get().reverse() ).index( menuItem ) + 1;
1678  
1679                  // String together help text for sub menu items.
1680                  if ( depth < 2 ) {
1681                      title = menus.subMenuFocus.replace( '%1$s', itemName ).replace( '%2$s', menuItemType ).replace( '%3$d', itemPosition ).replace( '%4$d', totalSubItems ).replace( '%5$s', parentItemName );
1682                  } else {
1683                      title = menus.subMenuMoreDepthFocus.replace( '%1$s', itemName ).replace( '%2$s', menuItemType ).replace( '%3$d', itemPosition ).replace( '%4$d', totalSubItems ).replace( '%5$s', parentItemName ).replace( '%6$d', depth );
1684                  }
1685              }
1686  
1687              $this.find( '.screen-reader-text' ).text( title );
1688  
1689              // Mark this item's accessibility as refreshed.
1690              $this.data( 'needs_accessibility_refresh', false );
1691          },
1692  
1693          /**
1694           * Override the embed() method to do nothing,
1695           * so that the control isn't embedded on load,
1696           * unless the containing section is already expanded.
1697           *
1698           * @since 4.3.0
1699           */
1700          embed: function() {
1701              var control = this,
1702                  sectionId = control.section(),
1703                  section;
1704              if ( ! sectionId ) {
1705                  return;
1706              }
1707              section = api.section( sectionId );
1708              if ( ( section && section.expanded() ) || api.settings.autofocus.control === control.id ) {
1709                  control.actuallyEmbed();
1710              }
1711          },
1712  
1713          /**
1714           * This function is called in Section.onChangeExpanded() so the control
1715           * will only get embedded when the Section is first expanded.
1716           *
1717           * @since 4.3.0
1718           */
1719          actuallyEmbed: function() {
1720              var control = this;
1721              if ( 'resolved' === control.deferred.embedded.state() ) {
1722                  return;
1723              }
1724              control.renderContent();
1725              control.deferred.embedded.resolve(); // This triggers control.ready().
1726              
1727              // Mark all menu items as unprocessed.
1728              $( 'button.item-edit' ).data( 'needs_accessibility_refresh', true );
1729          },
1730  
1731          /**
1732           * Set up the control.
1733           */
1734          ready: function() {
1735              if ( 'undefined' === typeof this.params.menu_item_id ) {
1736                  throw new Error( 'params.menu_item_id was not defined' );
1737              }
1738  
1739              this._setupControlToggle();
1740              this._setupReorderUI();
1741              this._setupUpdateUI();
1742              this._setupRemoveUI();
1743              this._setupLinksUI();
1744              this._setupTitleUI();
1745          },
1746  
1747          /**
1748           * Show/hide the settings when clicking on the menu item handle.
1749           */
1750          _setupControlToggle: function() {
1751              var control = this;
1752  
1753              this.container.find( '.menu-item-handle' ).on( 'click', function( e ) {
1754                  e.preventDefault();
1755                  e.stopPropagation();
1756                  var menuControl = control.getMenuControl(),
1757                      isDeleteBtn = $( e.target ).is( '.item-delete, .item-delete *' ),
1758                      isAddNewBtn = $( e.target ).is( '.add-new-menu-item, .add-new-menu-item *' );
1759  
1760                  if ( $( 'body' ).hasClass( 'adding-menu-items' ) && ! isDeleteBtn && ! isAddNewBtn ) {
1761                      api.Menus.availableMenuItemsPanel.close();
1762                  }
1763  
1764                  if ( menuControl.isReordering || menuControl.isSorting ) {
1765                      return;
1766                  }
1767                  control.toggleForm();
1768              } );
1769          },
1770  
1771          /**
1772           * Set up the menu-item-reorder-nav
1773           */
1774          _setupReorderUI: function() {
1775              var control = this, template, $reorderNav;
1776  
1777              template = wp.template( 'menu-item-reorder-nav' );
1778  
1779              // Add the menu item reordering elements to the menu item control.
1780              control.container.find( '.item-controls' ).after( template );
1781  
1782              // Handle clicks for up/down/left-right on the reorder nav.
1783              $reorderNav = control.container.find( '.menu-item-reorder-nav' );
1784              $reorderNav.find( '.menus-move-up, .menus-move-down, .menus-move-left, .menus-move-right' ).on( 'click', function() {
1785                  var moveBtn = $( this );
1786                  control.params.depth = control.getDepth();
1787  
1788                  moveBtn.focus();
1789  
1790                  var isMoveUp = moveBtn.is( '.menus-move-up' ),
1791                      isMoveDown = moveBtn.is( '.menus-move-down' ),
1792                      isMoveLeft = moveBtn.is( '.menus-move-left' ),
1793                      isMoveRight = moveBtn.is( '.menus-move-right' );
1794  
1795                  if ( isMoveUp ) {
1796                      control.moveUp();
1797                  } else if ( isMoveDown ) {
1798                      control.moveDown();
1799                  } else if ( isMoveLeft ) {
1800                      control.moveLeft();
1801                  } else if ( isMoveRight ) {
1802                      control.moveRight();
1803                      control.params.depth += 1;
1804                  }
1805                  
1806                  moveBtn.focus(); // Re-focus after the container was moved.
1807  
1808                  // Mark all menu items as unprocessed.
1809                  $( 'button.item-edit' ).data( 'needs_accessibility_refresh', true );
1810              } );
1811          },
1812  
1813          /**
1814           * Set up event handlers for menu item updating.
1815           */
1816          _setupUpdateUI: function() {
1817              var control = this,
1818                  settingValue = control.setting(),
1819                  updateNotifications;
1820  
1821              control.elements = {};
1822              control.elements.url = new api.Element( control.container.find( '.edit-menu-item-url' ) );
1823              control.elements.title = new api.Element( control.container.find( '.edit-menu-item-title' ) );
1824              control.elements.attr_title = new api.Element( control.container.find( '.edit-menu-item-attr-title' ) );
1825              control.elements.target = new api.Element( control.container.find( '.edit-menu-item-target' ) );
1826              control.elements.classes = new api.Element( control.container.find( '.edit-menu-item-classes' ) );
1827              control.elements.xfn = new api.Element( control.container.find( '.edit-menu-item-xfn' ) );
1828              control.elements.description = new api.Element( control.container.find( '.edit-menu-item-description' ) );
1829              // @todo Allow other elements, added by plugins, to be automatically picked up here;
1830              // allow additional values to be added to setting array.
1831  
1832              _.each( control.elements, function( element, property ) {
1833                  element.bind(function( value ) {
1834                      if ( element.element.is( 'input[type=checkbox]' ) ) {
1835                          value = ( value ) ? element.element.val() : '';
1836                      }
1837  
1838                      var settingValue = control.setting();
1839                      if ( settingValue && settingValue[ property ] !== value ) {
1840                          settingValue = _.clone( settingValue );
1841                          settingValue[ property ] = value;
1842                          control.setting.set( settingValue );
1843                      }
1844                  });
1845                  if ( settingValue ) {
1846                      if ( ( property === 'classes' || property === 'xfn' ) && _.isArray( settingValue[ property ] ) ) {
1847                          element.set( settingValue[ property ].join( ' ' ) );
1848                      } else {
1849                          element.set( settingValue[ property ] );
1850                      }
1851                  }
1852              });
1853  
1854              control.setting.bind(function( to, from ) {
1855                  var itemId = control.params.menu_item_id,
1856                      followingSiblingItemControls = [],
1857                      childrenItemControls = [],
1858                      menuControl;
1859  
1860                  if ( false === to ) {
1861                      menuControl = api.control( 'nav_menu[' + String( from.nav_menu_term_id ) + ']' );
1862                      control.container.remove();
1863  
1864                      _.each( menuControl.getMenuItemControls(), function( otherControl ) {
1865                          if ( from.menu_item_parent === otherControl.setting().menu_item_parent && otherControl.setting().position > from.position ) {
1866                              followingSiblingItemControls.push( otherControl );
1867                          } else if ( otherControl.setting().menu_item_parent === itemId ) {
1868                              childrenItemControls.push( otherControl );
1869                          }
1870                      });
1871  
1872                      // Shift all following siblings by the number of children this item has.
1873                      _.each( followingSiblingItemControls, function( followingSiblingItemControl ) {
1874                          var value = _.clone( followingSiblingItemControl.setting() );
1875                          value.position += childrenItemControls.length;
1876                          followingSiblingItemControl.setting.set( value );
1877                      });
1878  
1879                      // Now move the children up to be the new subsequent siblings.
1880                      _.each( childrenItemControls, function( childrenItemControl, i ) {
1881                          var value = _.clone( childrenItemControl.setting() );
1882                          value.position = from.position + i;
1883                          value.menu_item_parent = from.menu_item_parent;
1884                          childrenItemControl.setting.set( value );
1885                      });
1886  
1887                      menuControl.debouncedReflowMenuItems();
1888                  } else {
1889                      // Update the elements' values to match the new setting properties.
1890                      _.each( to, function( value, key ) {
1891                          if ( control.elements[ key] ) {
1892                              control.elements[ key ].set( to[ key ] );
1893                          }
1894                      } );
1895                      control.container.find( '.menu-item-data-parent-id' ).val( to.menu_item_parent );
1896  
1897                      // Handle UI updates when the position or depth (parent) change.
1898                      if ( to.position !== from.position || to.menu_item_parent !== from.menu_item_parent ) {
1899                          control.getMenuControl().debouncedReflowMenuItems();
1900                      }
1901                  }
1902              });
1903  
1904              // Style the URL field as invalid when there is an invalid_url notification.
1905              updateNotifications = function() {
1906                  control.elements.url.element.toggleClass( 'invalid', control.setting.notifications.has( 'invalid_url' ) );
1907              };
1908              control.setting.notifications.bind( 'add', updateNotifications );
1909              control.setting.notifications.bind( 'removed', updateNotifications );
1910          },
1911  
1912          /**
1913           * Set up event handlers for menu item deletion.
1914           */
1915          _setupRemoveUI: function() {
1916              var control = this, $removeBtn;
1917  
1918              // Configure delete button.
1919              $removeBtn = control.container.find( '.item-delete' );
1920  
1921              $removeBtn.on( 'click', function() {
1922                  // Find an adjacent element to add focus to when this menu item goes away.
1923                  var addingItems = true, $adjacentFocusTarget, $next, $prev,
1924                      instanceCounter = 0, // Instance count of the menu item deleted.
1925                      deleteItemOriginalItemId = control.params.original_item_id,
1926                      addedItems = control.getMenuControl().$sectionContent.find( '.menu-item' ),
1927                      availableMenuItem;
1928  
1929                  if ( ! $( 'body' ).hasClass( 'adding-menu-items' ) ) {
1930                      addingItems = false;
1931                  }
1932  
1933                  $next = control.container.nextAll( '.customize-control-nav_menu_item:visible' ).first();
1934                  $prev = control.container.prevAll( '.customize-control-nav_menu_item:visible' ).first();
1935  
1936                  if ( $next.length ) {
1937                      $adjacentFocusTarget = $next.find( false === addingItems ? '.item-edit' : '.item-delete' ).first();
1938                  } else if ( $prev.length ) {
1939                      $adjacentFocusTarget = $prev.find( false === addingItems ? '.item-edit' : '.item-delete' ).first();
1940                  } else {
1941                      $adjacentFocusTarget = control.container.nextAll( '.customize-control-nav_menu' ).find( '.add-new-menu-item' ).first();
1942                  }
1943  
1944                  /*
1945                   * If the menu item deleted is the only of its instance left,
1946                   * remove the check icon of this menu item in the right panel.
1947                   */
1948                  _.each( addedItems, function( addedItem ) {
1949                      var menuItemId, menuItemControl, matches;
1950  
1951                      // This is because menu item that's deleted is just hidden.
1952                      if ( ! $( addedItem ).is( ':visible' ) ) {
1953                          return;
1954                      }
1955  
1956                      matches = addedItem.getAttribute( 'id' ).match( /^customize-control-nav_menu_item-(-?\d+)$/, '' );
1957                      if ( ! matches ) {
1958                          return;
1959                      }
1960  
1961                      menuItemId      = parseInt( matches[1], 10 );
1962                      menuItemControl = api.control( 'nav_menu_item[' + String( menuItemId ) + ']' );
1963  
1964                      // Check for duplicate menu items.
1965                      if ( menuItemControl && deleteItemOriginalItemId == menuItemControl.params.original_item_id ) {
1966                          instanceCounter++;
1967                      }
1968                  } );
1969  
1970                  if ( instanceCounter <= 1 ) {
1971                      // Revert the check icon to add icon.
1972                      availableMenuItem = $( '#menu-item-tpl-' + control.params.original_item_id );
1973                      availableMenuItem.removeClass( 'selected' );
1974                      availableMenuItem.find( '.menu-item-handle' ).removeClass( 'item-added' );
1975                  }
1976  
1977                  control.container.slideUp( function() {
1978                      control.setting.set( false );
1979                      wp.a11y.speak( api.Menus.data.l10n.itemDeleted );
1980                      $adjacentFocusTarget.focus(); // Keyboard accessibility.
1981                  } );
1982  
1983                  control.setting.set( false );
1984              } );
1985          },
1986  
1987          _setupLinksUI: function() {
1988              var $origBtn;
1989  
1990              // Configure original link.
1991              $origBtn = this.container.find( 'a.original-link' );
1992  
1993              $origBtn.on( 'click', function( e ) {
1994                  e.preventDefault();
1995                  api.previewer.previewUrl( e.target.toString() );
1996              } );
1997          },
1998  
1999          /**
2000           * Update item handle title when changed.
2001           */
2002          _setupTitleUI: function() {
2003              var control = this, titleEl;
2004  
2005              // Ensure that whitespace is trimmed on blur so placeholder can be shown.
2006              control.container.find( '.edit-menu-item-title' ).on( 'blur', function() {
2007                  $( this ).val( $( this ).val().trim() );
2008              } );
2009  
2010              titleEl = control.container.find( '.menu-item-title' );
2011              control.setting.bind( function( item ) {
2012                  var trimmedTitle, titleText;
2013                  if ( ! item ) {
2014                      return;
2015                  }
2016                  item.title = item.title || '';
2017                  trimmedTitle = item.title.trim();
2018  
2019                  titleText = trimmedTitle || item.original_title || api.Menus.data.l10n.untitled;
2020  
2021                  if ( item._invalid ) {
2022                      titleText = api.Menus.data.l10n.invalidTitleTpl.replace( '%s', titleText );
2023                  }
2024  
2025                  // Don't update to an empty title.
2026                  if ( trimmedTitle || item.original_title ) {
2027                      titleEl
2028                          .text( titleText )
2029                          .removeClass( 'no-title' );
2030                  } else {
2031                      titleEl
2032                          .text( titleText )
2033                          .addClass( 'no-title' );
2034                  }
2035              } );
2036          },
2037  
2038          /**
2039           *
2040           * @return {number}
2041           */
2042          getDepth: function() {
2043              var control = this, setting = control.setting(), depth = 0;
2044              if ( ! setting ) {
2045                  return 0;
2046              }
2047              while ( setting && setting.menu_item_parent ) {
2048                  depth += 1;
2049                  control = api.control( 'nav_menu_item[' + setting.menu_item_parent + ']' );
2050                  if ( ! control ) {
2051                      break;
2052                  }
2053                  setting = control.setting();
2054              }
2055              return depth;
2056          },
2057  
2058          /**
2059           * Amend the control's params with the data necessary for the JS template just in time.
2060           */
2061          renderContent: function() {
2062              var control = this,
2063                  settingValue = control.setting(),
2064                  containerClasses;
2065  
2066              control.params.title = settingValue.title || '';
2067              control.params.depth = control.getDepth();
2068              control.container.data( 'item-depth', control.params.depth );
2069              containerClasses = [
2070                  'menu-item',
2071                  'menu-item-depth-' + String( control.params.depth ),
2072                  'menu-item-' + settingValue.object,
2073                  'menu-item-edit-inactive'
2074              ];
2075  
2076              if ( settingValue._invalid ) {
2077                  containerClasses.push( 'menu-item-invalid' );
2078                  control.params.title = api.Menus.data.l10n.invalidTitleTpl.replace( '%s', control.params.title );
2079              } else if ( 'draft' === settingValue.status ) {
2080                  containerClasses.push( 'pending' );
2081                  control.params.title = api.Menus.data.pendingTitleTpl.replace( '%s', control.params.title );
2082              }
2083  
2084              control.params.el_classes = containerClasses.join( ' ' );
2085              control.params.item_type_label = settingValue.type_label;
2086              control.params.item_type = settingValue.type;
2087              control.params.url = settingValue.url;
2088              control.params.target = settingValue.target;
2089              control.params.attr_title = settingValue.attr_title;
2090              control.params.classes = _.isArray( settingValue.classes ) ? settingValue.classes.join( ' ' ) : settingValue.classes;
2091              control.params.xfn = settingValue.xfn;
2092              control.params.description = settingValue.description;
2093              control.params.parent = settingValue.menu_item_parent;
2094              control.params.original_title = settingValue.original_title || '';
2095  
2096              control.container.addClass( control.params.el_classes );
2097  
2098              api.Control.prototype.renderContent.call( control );
2099          },
2100  
2101          /***********************************************************************
2102           * Begin public API methods
2103           **********************************************************************/
2104  
2105          /**
2106           * @return {wp.customize.controlConstructor.nav_menu|null}
2107           */
2108          getMenuControl: function() {
2109              var control = this, settingValue = control.setting();
2110              if ( settingValue && settingValue.nav_menu_term_id ) {
2111                  return api.control( 'nav_menu[' + settingValue.nav_menu_term_id + ']' );
2112              } else {
2113                  return null;
2114              }
2115          },
2116  
2117          /**
2118           * Expand the accordion section containing a control
2119           */
2120          expandControlSection: function() {
2121              var $section = this.container.closest( '.accordion-section' );
2122              if ( ! $section.hasClass( 'open' ) ) {
2123                  $section.find( '.accordion-section-title:first' ).trigger( 'click' );
2124              }
2125          },
2126  
2127          /**
2128           * @since 4.6.0
2129           *
2130           * @param {Boolean} expanded
2131           * @param {Object} [params]
2132           * @return {Boolean} False if state already applied.
2133           */
2134          _toggleExpanded: api.Section.prototype._toggleExpanded,
2135  
2136          /**
2137           * @since 4.6.0
2138           *
2139           * @param {Object} [params]
2140           * @return {Boolean} False if already expanded.
2141           */
2142          expand: api.Section.prototype.expand,
2143  
2144          /**
2145           * Expand the menu item form control.
2146           *
2147           * @since 4.5.0 Added params.completeCallback.
2148           *
2149           * @param {Object}   [params] - Optional params.
2150           * @param {Function} [params.completeCallback] - Function to call when the form toggle has finished animating.
2151           */
2152          expandForm: function( params ) {
2153              this.expand( params );
2154          },
2155  
2156          /**
2157           * @since 4.6.0
2158           *
2159           * @param {Object} [params]
2160           * @return {Boolean} False if already collapsed.
2161           */
2162          collapse: api.Section.prototype.collapse,
2163  
2164          /**
2165           * Collapse the menu item form control.
2166           *
2167           * @since 4.5.0 Added params.completeCallback.
2168           *
2169           * @param {Object}   [params] - Optional params.
2170           * @param {Function} [params.completeCallback] - Function to call when the form toggle has finished animating.
2171           */
2172          collapseForm: function( params ) {
2173              this.collapse( params );
2174          },
2175  
2176          /**
2177           * Expand or collapse the menu item control.
2178           *
2179           * @deprecated this is poor naming, and it is better to directly set control.expanded( showOrHide )
2180           * @since 4.5.0 Added params.completeCallback.
2181           *
2182           * @param {boolean}  [showOrHide] - If not supplied, will be inverse of current visibility
2183           * @param {Object}   [params] - Optional params.
2184           * @param {Function} [params.completeCallback] - Function to call when the form toggle has finished animating.
2185           */
2186          toggleForm: function( showOrHide, params ) {
2187              if ( typeof showOrHide === 'undefined' ) {
2188                  showOrHide = ! this.expanded();
2189              }
2190              if ( showOrHide ) {
2191                  this.expand( params );
2192              } else {
2193                  this.collapse( params );
2194              }
2195          },
2196  
2197          /**
2198           * Expand or collapse the menu item control.
2199           *
2200           * @since 4.6.0
2201           * @param {boolean}  [showOrHide] - If not supplied, will be inverse of current visibility
2202           * @param {Object}   [params] - Optional params.
2203           * @param {Function} [params.completeCallback] - Function to call when the form toggle has finished animating.
2204           */
2205          onChangeExpanded: function( showOrHide, params ) {
2206              var self = this, $menuitem, $inside, complete;
2207  
2208              $menuitem = this.container;
2209              $inside = $menuitem.find( '.menu-item-settings:first' );
2210              if ( 'undefined' === typeof showOrHide ) {
2211                  showOrHide = ! $inside.is( ':visible' );
2212              }
2213  
2214              // Already expanded or collapsed.
2215              if ( $inside.is( ':visible' ) === showOrHide ) {
2216                  if ( params && params.completeCallback ) {
2217                      params.completeCallback();
2218                  }
2219                  return;
2220              }
2221  
2222              if ( showOrHide ) {
2223                  // Close all other menu item controls before expanding this one.
2224                  api.control.each( function( otherControl ) {
2225                      if ( self.params.type === otherControl.params.type && self !== otherControl ) {
2226                          otherControl.collapseForm();
2227                      }
2228                  } );
2229  
2230                  complete = function() {
2231                      $menuitem
2232                          .removeClass( 'menu-item-edit-inactive' )
2233                          .addClass( 'menu-item-edit-active' );
2234                      self.container.trigger( 'expanded' );
2235  
2236                      if ( params && params.completeCallback ) {
2237                          params.completeCallback();
2238                      }
2239                  };
2240  
2241                  $menuitem.find( '.item-edit' ).attr( 'aria-expanded', 'true' );
2242                  $inside.slideDown( 'fast', complete );
2243  
2244                  self.container.trigger( 'expand' );
2245              } else {
2246                  complete = function() {
2247                      $menuitem
2248                          .addClass( 'menu-item-edit-inactive' )
2249                          .removeClass( 'menu-item-edit-active' );
2250                      self.container.trigger( 'collapsed' );
2251  
2252                      if ( params && params.completeCallback ) {
2253                          params.completeCallback();
2254                      }
2255                  };
2256  
2257                  self.container.trigger( 'collapse' );
2258  
2259                  $menuitem.find( '.item-edit' ).attr( 'aria-expanded', 'false' );
2260                  $inside.slideUp( 'fast', complete );
2261              }
2262          },
2263  
2264          /**
2265           * Expand the containing menu section, expand the form, and focus on
2266           * the first input in the control.
2267           *
2268           * @since 4.5.0 Added params.completeCallback.
2269           *
2270           * @param {Object}   [params] - Params object.
2271           * @param {Function} [params.completeCallback] - Optional callback function when focus has completed.
2272           */
2273          focus: function( params ) {
2274              params = params || {};
2275              var control = this, originalCompleteCallback = params.completeCallback, focusControl;
2276  
2277              focusControl = function() {
2278                  control.expandControlSection();
2279  
2280                  params.completeCallback = function() {
2281                      var focusable;
2282  
2283                      // Note that we can't use :focusable due to a jQuery UI issue. See: https://github.com/jquery/jquery-ui/pull/1583
2284                      focusable = control.container.find( '.menu-item-settings' ).find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' );
2285                      focusable.first().focus();
2286  
2287                      if ( originalCompleteCallback ) {
2288                          originalCompleteCallback();
2289                      }
2290                  };
2291  
2292                  control.expandForm( params );
2293              };
2294  
2295              if ( api.section.has( control.section() ) ) {
2296                  api.section( control.section() ).expand( {
2297                      completeCallback: focusControl
2298                  } );
2299              } else {
2300                  focusControl();
2301              }
2302          },
2303  
2304          /**
2305           * Move menu item up one in the menu.
2306           */
2307          moveUp: function() {
2308              this._changePosition( -1 );
2309              wp.a11y.speak( api.Menus.data.l10n.movedUp );
2310          },
2311  
2312          /**
2313           * Move menu item up one in the menu.
2314           */
2315          moveDown: function() {
2316              this._changePosition( 1 );
2317              wp.a11y.speak( api.Menus.data.l10n.movedDown );
2318          },
2319          /**
2320           * Move menu item and all children up one level of depth.
2321           */
2322          moveLeft: function() {
2323              this._changeDepth( -1 );
2324              wp.a11y.speak( api.Menus.data.l10n.movedLeft );
2325          },
2326  
2327          /**
2328           * Move menu item and children one level deeper, as a submenu of the previous item.
2329           */
2330          moveRight: function() {
2331              this._changeDepth( 1 );
2332              wp.a11y.speak( api.Menus.data.l10n.movedRight );
2333          },
2334  
2335          /**
2336           * Note that this will trigger a UI update, causing child items to
2337           * move as well and cardinal order class names to be updated.
2338           *
2339           * @private
2340           *
2341           * @param {number} offset 1|-1
2342           */
2343          _changePosition: function( offset ) {
2344              var control = this,
2345                  adjacentSetting,
2346                  settingValue = _.clone( control.setting() ),
2347                  siblingSettings = [],
2348                  realPosition;
2349  
2350              if ( 1 !== offset && -1 !== offset ) {
2351                  throw new Error( 'Offset changes by 1 are only supported.' );
2352              }
2353  
2354              // Skip moving deleted items.
2355              if ( ! control.setting() ) {
2356                  return;
2357              }
2358  
2359              // Locate the other items under the same parent (siblings).
2360              _( control.getMenuControl().getMenuItemControls() ).each(function( otherControl ) {
2361                  if ( otherControl.setting().menu_item_parent === settingValue.menu_item_parent ) {
2362                      siblingSettings.push( otherControl.setting );
2363                  }
2364              });
2365              siblingSettings.sort(function( a, b ) {
2366                  return a().position - b().position;
2367              });
2368  
2369              realPosition = _.indexOf( siblingSettings, control.setting );
2370              if ( -1 === realPosition ) {
2371                  throw new Error( 'Expected setting to be among siblings.' );
2372              }
2373  
2374              // Skip doing anything if the item is already at the edge in the desired direction.
2375              if ( ( realPosition === 0 && offset < 0 ) || ( realPosition === siblingSettings.length - 1 && offset > 0 ) ) {
2376                  // @todo Should we allow a menu item to be moved up to break it out of a parent? Adopt with previous or following parent?
2377                  return;
2378              }
2379  
2380              // Update any adjacent menu item setting to take on this item's position.
2381              adjacentSetting = siblingSettings[ realPosition + offset ];
2382              if ( adjacentSetting ) {
2383                  adjacentSetting.set( $.extend(
2384                      _.clone( adjacentSetting() ),
2385                      {
2386                          position: settingValue.position
2387                      }
2388                  ) );
2389              }
2390  
2391              settingValue.position += offset;
2392              control.setting.set( settingValue );
2393          },
2394  
2395          /**
2396           * Note that this will trigger a UI update, causing child items to
2397           * move as well and cardinal order class names to be updated.
2398           *
2399           * @private
2400           *
2401           * @param {number} offset 1|-1
2402           */
2403          _changeDepth: function( offset ) {
2404              if ( 1 !== offset && -1 !== offset ) {
2405                  throw new Error( 'Offset changes by 1 are only supported.' );
2406              }
2407              var control = this,
2408                  settingValue = _.clone( control.setting() ),
2409                  siblingControls = [],
2410                  realPosition,
2411                  siblingControl,
2412                  parentControl;
2413  
2414              // Locate the other items under the same parent (siblings).
2415              _( control.getMenuControl().getMenuItemControls() ).each(function( otherControl ) {
2416                  if ( otherControl.setting().menu_item_parent === settingValue.menu_item_parent ) {
2417                      siblingControls.push( otherControl );
2418                  }
2419              });
2420              siblingControls.sort(function( a, b ) {
2421                  return a.setting().position - b.setting().position;
2422              });
2423  
2424              realPosition = _.indexOf( siblingControls, control );
2425              if ( -1 === realPosition ) {
2426                  throw new Error( 'Expected control to be among siblings.' );
2427              }
2428  
2429              if ( -1 === offset ) {
2430                  // Skip moving left an item that is already at the top level.
2431                  if ( ! settingValue.menu_item_parent ) {
2432                      return;
2433                  }
2434  
2435                  parentControl = api.control( 'nav_menu_item[' + settingValue.menu_item_parent + ']' );
2436  
2437                  // Make this control the parent of all the following siblings.
2438                  _( siblingControls ).chain().slice( realPosition ).each(function( siblingControl, i ) {
2439                      siblingControl.setting.set(
2440                          $.extend(
2441                              {},
2442                              siblingControl.setting(),
2443                              {
2444                                  menu_item_parent: control.params.menu_item_id,
2445                                  position: i
2446                              }
2447                          )
2448                      );
2449                  });
2450  
2451                  // Increase the positions of the parent item's subsequent children to make room for this one.
2452                  _( control.getMenuControl().getMenuItemControls() ).each(function( otherControl ) {
2453                      var otherControlSettingValue, isControlToBeShifted;
2454                      isControlToBeShifted = (
2455                          otherControl.setting().menu_item_parent === parentControl.setting().menu_item_parent &&
2456                          otherControl.setting().position > parentControl.setting().position
2457                      );
2458                      if ( isControlToBeShifted ) {
2459                          otherControlSettingValue = _.clone( otherControl.setting() );
2460                          otherControl.setting.set(
2461                              $.extend(
2462                                  otherControlSettingValue,
2463                                  { position: otherControlSettingValue.position + 1 }
2464                              )
2465                          );
2466                      }
2467                  });
2468  
2469                  // Make this control the following sibling of its parent item.
2470                  settingValue.position = parentControl.setting().position + 1;
2471                  settingValue.menu_item_parent = parentControl.setting().menu_item_parent;
2472                  control.setting.set( settingValue );
2473  
2474              } else if ( 1 === offset ) {
2475                  // Skip moving right an item that doesn't have a previous sibling.
2476                  if ( realPosition === 0 ) {
2477                      return;
2478                  }
2479  
2480                  // Make the control the last child of the previous sibling.
2481                  siblingControl = siblingControls[ realPosition - 1 ];
2482                  settingValue.menu_item_parent = siblingControl.params.menu_item_id;
2483                  settingValue.position = 0;
2484                  _( control.getMenuControl().getMenuItemControls() ).each(function( otherControl ) {
2485                      if ( otherControl.setting().menu_item_parent === settingValue.menu_item_parent ) {
2486                          settingValue.position = Math.max( settingValue.position, otherControl.setting().position );
2487                      }
2488                  });
2489                  settingValue.position += 1;
2490                  control.setting.set( settingValue );
2491              }
2492          }
2493      } );
2494  
2495      /**
2496       * wp.customize.Menus.MenuNameControl
2497       *
2498       * Customizer control for a nav menu's name.
2499       *
2500       * @class    wp.customize.Menus.MenuNameControl
2501       * @augments wp.customize.Control
2502       */
2503      api.Menus.MenuNameControl = api.Control.extend(/** @lends wp.customize.Menus.MenuNameControl.prototype */{
2504  
2505          ready: function() {
2506              var control = this;
2507  
2508              if ( control.setting ) {
2509                  var settingValue = control.setting();
2510  
2511                  control.nameElement = new api.Element( control.container.find( '.menu-name-field' ) );
2512  
2513                  control.nameElement.bind(function( value ) {
2514                      var settingValue = control.setting();
2515                      if ( settingValue && settingValue.name !== value ) {
2516                          settingValue = _.clone( settingValue );
2517                          settingValue.name = value;
2518                          control.setting.set( settingValue );
2519                      }
2520                  });
2521                  if ( settingValue ) {
2522                      control.nameElement.set( settingValue.name );
2523                  }
2524  
2525                  control.setting.bind(function( object ) {
2526                      if ( object ) {
2527                          control.nameElement.set( object.name );
2528                      }
2529                  });
2530              }
2531          }
2532      });
2533  
2534      /**
2535       * wp.customize.Menus.MenuLocationsControl
2536       *
2537       * Customizer control for a nav menu's locations.
2538       *
2539       * @since 4.9.0
2540       * @class    wp.customize.Menus.MenuLocationsControl
2541       * @augments wp.customize.Control
2542       */
2543      api.Menus.MenuLocationsControl = api.Control.extend(/** @lends wp.customize.Menus.MenuLocationsControl.prototype */{
2544  
2545          /**
2546           * Set up the control.
2547           *
2548           * @since 4.9.0
2549           */
2550          ready: function () {
2551              var control = this;
2552  
2553              control.container.find( '.assigned-menu-location' ).each(function() {
2554                  var container = $( this ),
2555                      checkbox = container.find( 'input[type=checkbox]' ),
2556                      element = new api.Element( checkbox ),
2557                      navMenuLocationSetting = api( 'nav_menu_locations[' + checkbox.data( 'location-id' ) + ']' ),
2558                      isNewMenu = control.params.menu_id === '',
2559                      updateCheckbox = isNewMenu ? _.noop : function( checked ) {
2560                          element.set( checked );
2561                      },
2562                      updateSetting = isNewMenu ? _.noop : function( checked ) {
2563                          navMenuLocationSetting.set( checked ? control.params.menu_id : 0 );
2564                      },
2565                      updateSelectedMenuLabel = function( selectedMenuId ) {
2566                          var menuSetting = api( 'nav_menu[' + String( selectedMenuId ) + ']' );
2567                          if ( ! selectedMenuId || ! menuSetting || ! menuSetting() ) {
2568                              container.find( '.theme-location-set' ).hide();
2569                          } else {
2570                              container.find( '.theme-location-set' ).show().find( 'span' ).text( displayNavMenuName( menuSetting().name ) );
2571                          }
2572                      };
2573  
2574                  updateCheckbox( navMenuLocationSetting.get() === control.params.menu_id );
2575  
2576                  checkbox.on( 'change', function() {
2577                      // Note: We can't use element.bind( function( checked ){ ... } ) here because it will trigger a change as well.
2578                      updateSetting( this.checked );
2579                  } );
2580  
2581                  navMenuLocationSetting.bind( function( selectedMenuId ) {
2582                      updateCheckbox( selectedMenuId === control.params.menu_id );
2583                      updateSelectedMenuLabel( selectedMenuId );
2584                  } );
2585                  updateSelectedMenuLabel( navMenuLocationSetting.get() );
2586              });
2587          },
2588  
2589          /**
2590           * Set the selected locations.
2591           *
2592           * This method sets the selected locations and allows us to do things like
2593           * set the default location for a new menu.
2594           *
2595           * @since 4.9.0
2596           *
2597           * @param {Object.<string,boolean>} selections - A map of location selections.
2598           * @return {void}
2599           */
2600          setSelections: function( selections ) {
2601              this.container.find( '.menu-location' ).each( function( i, checkboxNode ) {
2602                  var locationId = checkboxNode.dataset.locationId;
2603                  checkboxNode.checked = locationId in selections ? selections[ locationId ] : false;
2604              } );
2605          }
2606      });
2607  
2608      /**
2609       * wp.customize.Menus.MenuAutoAddControl
2610       *
2611       * Customizer control for a nav menu's auto add.
2612       *
2613       * @class    wp.customize.Menus.MenuAutoAddControl
2614       * @augments wp.customize.Control
2615       */
2616      api.Menus.MenuAutoAddControl = api.Control.extend(/** @lends wp.customize.Menus.MenuAutoAddControl.prototype */{
2617  
2618          ready: function() {
2619              var control = this,
2620                  settingValue = control.setting();
2621  
2622              /*
2623               * Since the control is not registered in PHP, we need to prevent the
2624               * preview's sending of the activeControls to result in this control
2625               * being deactivated.
2626               */
2627              control.active.validate = function() {
2628                  var value, section = api.section( control.section() );
2629                  if ( section ) {
2630                      value = section.active();
2631                  } else {
2632                      value = false;
2633                  }
2634                  return value;
2635              };
2636  
2637              control.autoAddElement = new api.Element( control.container.find( 'input[type=checkbox].auto_add' ) );
2638  
2639              control.autoAddElement.bind(function( value ) {
2640                  var settingValue = control.setting();
2641                  if ( settingValue && settingValue.name !== value ) {
2642                      settingValue = _.clone( settingValue );
2643                      settingValue.auto_add = value;
2644                      control.setting.set( settingValue );
2645                  }
2646              });
2647              if ( settingValue ) {
2648                  control.autoAddElement.set( settingValue.auto_add );
2649              }
2650  
2651              control.setting.bind(function( object ) {
2652                  if ( object ) {
2653                      control.autoAddElement.set( object.auto_add );
2654                  }
2655              });
2656          }
2657  
2658      });
2659  
2660      /**
2661       * wp.customize.Menus.MenuControl
2662       *
2663       * Customizer control for menus.
2664       * Note that 'nav_menu' must match the WP_Menu_Customize_Control::$type
2665       *
2666       * @class    wp.customize.Menus.MenuControl
2667       * @augments wp.customize.Control
2668       */
2669      api.Menus.MenuControl = api.Control.extend(/** @lends wp.customize.Menus.MenuControl.prototype */{
2670          /**
2671           * Set up the control.
2672           */
2673          ready: function() {
2674              var control = this,
2675                  section = api.section( control.section() ),
2676                  menuId = control.params.menu_id,
2677                  menu = control.setting(),
2678                  name,
2679                  widgetTemplate,
2680                  select;
2681  
2682              if ( 'undefined' === typeof this.params.menu_id ) {
2683                  throw new Error( 'params.menu_id was not defined' );
2684              }
2685  
2686              /*
2687               * Since the control is not registered in PHP, we need to prevent the
2688               * preview's sending of the activeControls to result in this control
2689               * being deactivated.
2690               */
2691              control.active.validate = function() {
2692                  var value;
2693                  if ( section ) {
2694                      value = section.active();
2695                  } else {
2696                      value = false;
2697                  }
2698                  return value;
2699              };
2700  
2701              control.$controlSection = section.headContainer;
2702              control.$sectionContent = control.container.closest( '.accordion-section-content' );
2703  
2704              this._setupModel();
2705  
2706              api.section( control.section(), function( section ) {
2707                  section.deferred.initSortables.done(function( menuList ) {
2708                      control._setupSortable( menuList );
2709                  });
2710              } );
2711  
2712              this._setupAddition();
2713              this._setupTitle();
2714  
2715              // Add menu to Navigation Menu widgets.
2716              if ( menu ) {
2717                  name = displayNavMenuName( menu.name );
2718  
2719                  // Add the menu to the existing controls.
2720                  api.control.each( function( widgetControl ) {
2721                      if ( ! widgetControl.extended( api.controlConstructor.widget_form ) || 'nav_menu' !== widgetControl.params.widget_id_base ) {
2722                          return;
2723                      }
2724                      widgetControl.container.find( '.nav-menu-widget-form-controls:first' ).show();
2725                      widgetControl.container.find( '.nav-menu-widget-no-menus-message:first' ).hide();
2726  
2727                      select = widgetControl.container.find( 'select' );
2728                      if ( 0 === select.find( 'option[value=' + String( menuId ) + ']' ).length ) {
2729                          select.append( new Option( name, menuId ) );
2730                      }
2731                  } );
2732  
2733                  // Add the menu to the widget template.
2734                  widgetTemplate = $( '#available-widgets-list .widget-tpl:has( input.id_base[ value=nav_menu ] )' );
2735                  widgetTemplate.find( '.nav-menu-widget-form-controls:first' ).show();
2736                  widgetTemplate.find( '.nav-menu-widget-no-menus-message:first' ).hide();
2737                  select = widgetTemplate.find( '.widget-inside select:first' );
2738                  if ( 0 === select.find( 'option[value=' + String( menuId ) + ']' ).length ) {
2739                      select.append( new Option( name, menuId ) );
2740                  }
2741              }
2742  
2743              /*
2744               * Wait for menu items to be added.
2745               * Ideally, we'd bind to an event indicating construction is complete,
2746               * but deferring appears to be the best option today.
2747               */
2748              _.defer( function () {
2749                  control.updateInvitationVisibility();
2750              } );
2751          },
2752  
2753          /**
2754           * Update ordering of menu item controls when the setting is updated.
2755           */
2756          _setupModel: function() {
2757              var control = this,
2758                  menuId = control.params.menu_id;
2759  
2760              control.setting.bind( function( to ) {
2761                  var name;
2762                  if ( false === to ) {
2763                      control._handleDeletion();
2764                  } else {
2765                      // Update names in the Navigation Menu widgets.
2766                      name = displayNavMenuName( to.name );
2767                      api.control.each( function( widgetControl ) {
2768                          if ( ! widgetControl.extended( api.controlConstructor.widget_form ) || 'nav_menu' !== widgetControl.params.widget_id_base ) {
2769                              return;
2770                          }
2771                          var select = widgetControl.container.find( 'select' );
2772                          select.find( 'option[value=' + String( menuId ) + ']' ).text( name );
2773                      });
2774                  }
2775              } );
2776          },
2777  
2778          /**
2779           * Allow items in each menu to be re-ordered, and for the order to be previewed.
2780           *
2781           * Notice that the UI aspects here are handled by wpNavMenu.initSortables()
2782           * which is called in MenuSection.onChangeExpanded()
2783           *
2784           * @param {Object} menuList - The element that has sortable().
2785           */
2786          _setupSortable: function( menuList ) {
2787              var control = this;
2788  
2789              if ( ! menuList.is( control.$sectionContent ) ) {
2790                  throw new Error( 'Unexpected menuList.' );
2791              }
2792  
2793              menuList.on( 'sortstart', function() {
2794                  control.isSorting = true;
2795              });
2796  
2797              menuList.on( 'sortstop', function() {
2798                  setTimeout( function() { // Next tick.
2799                      var menuItemContainerIds = control.$sectionContent.sortable( 'toArray' ),
2800                          menuItemControls = [],
2801                          position = 0,
2802                          priority = 10;
2803  
2804                      control.isSorting = false;
2805  
2806                      // Reset horizontal scroll position when done dragging.
2807                      control.$sectionContent.scrollLeft( 0 );
2808  
2809                      _.each( menuItemContainerIds, function( menuItemContainerId ) {
2810                          var menuItemId, menuItemControl, matches;
2811                          matches = menuItemContainerId.match( /^customize-control-nav_menu_item-(-?\d+)$/, '' );
2812                          if ( ! matches ) {
2813                              return;
2814                          }
2815                          menuItemId = parseInt( matches[1], 10 );
2816                          menuItemControl = api.control( 'nav_menu_item[' + String( menuItemId ) + ']' );
2817                          if ( menuItemControl ) {
2818                              menuItemControls.push( menuItemControl );
2819                          }
2820                      } );
2821  
2822                      _.each( menuItemControls, function( menuItemControl ) {
2823                          if ( false === menuItemControl.setting() ) {
2824                              // Skip deleted items.
2825                              return;
2826                          }
2827                          var setting = _.clone( menuItemControl.setting() );
2828                          position += 1;
2829                          priority += 1;
2830                          setting.position = position;
2831                          menuItemControl.priority( priority );
2832  
2833                          // Note that wpNavMenu will be setting this .menu-item-data-parent-id input's value.
2834                          setting.menu_item_parent = parseInt( menuItemControl.container.find( '.menu-item-data-parent-id' ).val(), 10 );
2835                          if ( ! setting.menu_item_parent ) {
2836                              setting.menu_item_parent = 0;
2837                          }
2838  
2839                          menuItemControl.setting.set( setting );
2840                      });
2841  
2842                      // Mark all menu items as unprocessed.
2843                      $( 'button.item-edit' ).data( 'needs_accessibility_refresh', true );
2844                  });
2845  
2846              });
2847              control.isReordering = false;
2848  
2849              /**
2850               * Keyboard-accessible reordering.
2851               */
2852              this.container.find( '.reorder-toggle' ).on( 'click', function() {
2853                  control.toggleReordering( ! control.isReordering );
2854              } );
2855          },
2856  
2857          /**
2858           * Set up UI for adding a new menu item.
2859           */
2860          _setupAddition: function() {
2861              var self = this;
2862  
2863              this.container.find( '.add-new-menu-item' ).on( 'click', function( event ) {
2864                  if ( self.$sectionContent.hasClass( 'reordering' ) ) {
2865                      return;
2866                  }
2867  
2868                  if ( ! $( 'body' ).hasClass( 'adding-menu-items' ) ) {
2869                      $( this ).attr( 'aria-expanded', 'true' );
2870                      api.Menus.availableMenuItemsPanel.open( self );
2871                  } else {
2872                      $( this ).attr( 'aria-expanded', 'false' );
2873                      api.Menus.availableMenuItemsPanel.close();
2874                      event.stopPropagation();
2875                  }
2876              } );
2877          },
2878  
2879          _handleDeletion: function() {
2880              var control = this,
2881                  section,
2882                  menuId = control.params.menu_id,
2883                  removeSection,
2884                  widgetTemplate,
2885                  navMenuCount = 0;
2886              section = api.section( control.section() );
2887              removeSection = function() {
2888                  section.container.remove();
2889                  api.section.remove( section.id );
2890              };
2891  
2892              if ( section && section.expanded() ) {
2893                  section.collapse({
2894                      completeCallback: function() {
2895                          removeSection();
2896                          wp.a11y.speak( api.Menus.data.l10n.menuDeleted );
2897                          api.panel( 'nav_menus' ).focus();
2898                      }
2899                  });
2900              } else {
2901                  removeSection();
2902              }
2903  
2904              api.each(function( setting ) {
2905                  if ( /^nav_menu\[/.test( setting.id ) && false !== setting() ) {
2906                      navMenuCount += 1;
2907                  }
2908              });
2909  
2910              // Remove the menu from any Navigation Menu widgets.
2911              api.control.each(function( widgetControl ) {
2912                  if ( ! widgetControl.extended( api.controlConstructor.widget_form ) || 'nav_menu' !== widgetControl.params.widget_id_base ) {
2913                      return;
2914                  }
2915                  var select = widgetControl.container.find( 'select' );
2916                  if ( select.val() === String( menuId ) ) {
2917                      select.prop( 'selectedIndex', 0 ).trigger( 'change' );
2918                  }
2919  
2920                  widgetControl.container.find( '.nav-menu-widget-form-controls:first' ).toggle( 0 !== navMenuCount );
2921                  widgetControl.container.find( '.nav-menu-widget-no-menus-message:first' ).toggle( 0 === navMenuCount );
2922                  widgetControl.container.find( 'option[value=' + String( menuId ) + ']' ).remove();
2923              });
2924  
2925              // Remove the menu to the nav menu widget template.
2926              widgetTemplate = $( '#available-widgets-list .widget-tpl:has( input.id_base[ value=nav_menu ] )' );
2927              widgetTemplate.find( '.nav-menu-widget-form-controls:first' ).toggle( 0 !== navMenuCount );
2928              widgetTemplate.find( '.nav-menu-widget-no-menus-message:first' ).toggle( 0 === navMenuCount );
2929              widgetTemplate.find( 'option[value=' + String( menuId ) + ']' ).remove();
2930          },
2931  
2932          /**
2933           * Update Section Title as menu name is changed.
2934           */
2935          _setupTitle: function() {
2936              var control = this;
2937  
2938              control.setting.bind( function( menu ) {
2939                  if ( ! menu ) {
2940                      return;
2941                  }
2942  
2943                  var section = api.section( control.section() ),
2944                      menuId = control.params.menu_id,
2945                      controlTitle = section.headContainer.find( '.accordion-section-title' ),
2946                      sectionTitle = section.contentContainer.find( '.customize-section-title h3' ),
2947                      location = section.headContainer.find( '.menu-in-location' ),
2948                      action = sectionTitle.find( '.customize-action' ),
2949                      name = displayNavMenuName( menu.name );
2950  
2951                  // Update the control title.
2952                  controlTitle.text( name );
2953                  if ( location.length ) {
2954                      location.appendTo( controlTitle );
2955                  }
2956  
2957                  // Update the section title.
2958                  sectionTitle.text( name );
2959                  if ( action.length ) {
2960                      action.prependTo( sectionTitle );
2961                  }
2962  
2963                  // Update the nav menu name in location selects.
2964                  api.control.each( function( control ) {
2965                      if ( /^nav_menu_locations\[/.test( control.id ) ) {
2966                          control.container.find( 'option[value=' + menuId + ']' ).text( name );
2967                      }
2968                  } );
2969  
2970                  // Update the nav menu name in all location checkboxes.
2971                  section.contentContainer.find( '.customize-control-checkbox input' ).each( function() {
2972                      if ( $( this ).prop( 'checked' ) ) {
2973                          $( '.current-menu-location-name-' + $( this ).data( 'location-id' ) ).text( name );
2974                      }
2975                  } );
2976              } );
2977          },
2978  
2979          /***********************************************************************
2980           * Begin public API methods
2981           **********************************************************************/
2982  
2983          /**
2984           * Enable/disable the reordering UI
2985           *
2986           * @param {boolean} showOrHide to enable/disable reordering
2987           */
2988          toggleReordering: function( showOrHide ) {
2989              var addNewItemBtn = this.container.find( '.add-new-menu-item' ),
2990                  reorderBtn = this.container.find( '.reorder-toggle' ),
2991                  itemsTitle = this.$sectionContent.find( '.item-title' );
2992  
2993              showOrHide = Boolean( showOrHide );
2994  
2995              if ( showOrHide === this.$sectionContent.hasClass( 'reordering' ) ) {
2996                  return;
2997              }
2998  
2999              this.isReordering = showOrHide;
3000              this.$sectionContent.toggleClass( 'reordering', showOrHide );
3001              this.$sectionContent.sortable( this.isReordering ? 'disable' : 'enable' );
3002              if ( this.isReordering ) {
3003                  addNewItemBtn.attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
3004                  reorderBtn.attr( 'aria-label', api.Menus.data.l10n.reorderLabelOff );
3005                  wp.a11y.speak( api.Menus.data.l10n.reorderModeOn );
3006                  itemsTitle.attr( 'aria-hidden', 'false' );
3007              } else {
3008                  addNewItemBtn.removeAttr( 'tabindex aria-hidden' );
3009                  reorderBtn.attr( 'aria-label', api.Menus.data.l10n.reorderLabelOn );
3010                  wp.a11y.speak( api.Menus.data.l10n.reorderModeOff );
3011                  itemsTitle.attr( 'aria-hidden', 'true' );
3012              }
3013  
3014              if ( showOrHide ) {
3015                  _( this.getMenuItemControls() ).each( function( formControl ) {
3016                      formControl.collapseForm();
3017                  } );
3018              }
3019          },
3020  
3021          /**
3022           * @return {wp.customize.controlConstructor.nav_menu_item[]}
3023           */
3024          getMenuItemControls: function() {
3025              var menuControl = this,
3026                  menuItemControls = [],
3027                  menuTermId = menuControl.params.menu_id;
3028  
3029              api.control.each(function( control ) {
3030                  if ( 'nav_menu_item' === control.params.type && control.setting() && menuTermId === control.setting().nav_menu_term_id ) {
3031                      menuItemControls.push( control );
3032                  }
3033              });
3034  
3035              return menuItemControls;
3036          },
3037  
3038          /**
3039           * Make sure that each menu item control has the proper depth.
3040           */
3041          reflowMenuItems: function() {
3042              var menuControl = this,
3043                  menuItemControls = menuControl.getMenuItemControls(),
3044                  reflowRecursively;
3045  
3046              reflowRecursively = function( context ) {
3047                  var currentMenuItemControls = [],
3048                      thisParent = context.currentParent;
3049                  _.each( context.menuItemControls, function( menuItemControl ) {
3050                      if ( thisParent === menuItemControl.setting().menu_item_parent ) {
3051                          currentMenuItemControls.push( menuItemControl );
3052                          // @todo We could remove this item from menuItemControls now, for efficiency.
3053                      }
3054                  });
3055                  currentMenuItemControls.sort( function( a, b ) {
3056                      return a.setting().position - b.setting().position;
3057                  });
3058  
3059                  _.each( currentMenuItemControls, function( menuItemControl ) {
3060                      // Update position.
3061                      context.currentAbsolutePosition += 1;
3062                      menuItemControl.priority.set( context.currentAbsolutePosition ); // This will change the sort order.
3063  
3064                      // Update depth.
3065                      if ( ! menuItemControl.container.hasClass( 'menu-item-depth-' + String( context.currentDepth ) ) ) {
3066                          _.each( menuItemControl.container.prop( 'className' ).match( /menu-item-depth-\d+/g ), function( className ) {
3067                              menuItemControl.container.removeClass( className );
3068                          });
3069                          menuItemControl.container.addClass( 'menu-item-depth-' + String( context.currentDepth ) );
3070                      }
3071                      menuItemControl.container.data( 'item-depth', context.currentDepth );
3072  
3073                      // Process any children items.
3074                      context.currentDepth += 1;
3075                      context.currentParent = menuItemControl.params.menu_item_id;
3076                      reflowRecursively( context );
3077                      context.currentDepth -= 1;
3078                      context.currentParent = thisParent;
3079                  });
3080  
3081                  // Update class names for reordering controls.
3082                  if ( currentMenuItemControls.length ) {
3083                      _( currentMenuItemControls ).each(function( menuItemControl ) {
3084                          menuItemControl.container.removeClass( 'move-up-disabled move-down-disabled move-left-disabled move-right-disabled' );
3085                          if ( 0 === context.currentDepth ) {
3086                              menuItemControl.container.addClass( 'move-left-disabled' );
3087                          } else if ( 10 === context.currentDepth ) {
3088                              menuItemControl.container.addClass( 'move-right-disabled' );
3089                          }
3090                      });
3091  
3092                      currentMenuItemControls[0].container
3093                          .addClass( 'move-up-disabled' )
3094                          .addClass( 'move-right-disabled' )
3095                          .toggleClass( 'move-down-disabled', 1 === currentMenuItemControls.length );
3096                      currentMenuItemControls[ currentMenuItemControls.length - 1 ].container
3097                          .addClass( 'move-down-disabled' )
3098                          .toggleClass( 'move-up-disabled', 1 === currentMenuItemControls.length );
3099                  }
3100              };
3101  
3102              reflowRecursively( {
3103                  menuItemControls: menuItemControls,
3104                  currentParent: 0,
3105                  currentDepth: 0,
3106                  currentAbsolutePosition: 0
3107              } );
3108  
3109              menuControl.updateInvitationVisibility( menuItemControls );
3110              menuControl.container.find( '.reorder-toggle' ).toggle( menuItemControls.length > 1 );
3111          },
3112  
3113          /**
3114           * Note that this function gets debounced so that when a lot of setting
3115           * changes are made at once, for instance when moving a menu item that
3116           * has child items, this function will only be called once all of the
3117           * settings have been updated.
3118           */
3119          debouncedReflowMenuItems: _.debounce( function() {
3120              this.reflowMenuItems.apply( this, arguments );
3121          }, 0 ),
3122  
3123          /**
3124           * Add a new item to this menu.
3125           *
3126           * @param {Object} item - Value for the nav_menu_item setting to be created.
3127           * @return {wp.customize.Menus.controlConstructor.nav_menu_item} The newly-created nav_menu_item control instance.
3128           */
3129          addItemToMenu: function( item ) {
3130              var menuControl = this, customizeId, settingArgs, setting, menuItemControl, placeholderId, position = 0, priority = 10,
3131                  originalItemId = item.id || '';
3132  
3133              _.each( menuControl.getMenuItemControls(), function( control ) {
3134                  if ( false === control.setting() ) {
3135                      return;
3136                  }
3137                  priority = Math.max( priority, control.priority() );
3138                  if ( 0 === control.setting().menu_item_parent ) {
3139                      position = Math.max( position, control.setting().position );
3140                  }
3141              });
3142              position += 1;
3143              priority += 1;
3144  
3145              item = $.extend(
3146                  {},
3147                  api.Menus.data.defaultSettingValues.nav_menu_item,
3148                  item,
3149                  {
3150                      nav_menu_term_id: menuControl.params.menu_id,
3151                      position: position
3152                  }
3153              );
3154              delete item.id; // Only used by Backbone.
3155  
3156              placeholderId = api.Menus.generatePlaceholderAutoIncrementId();
3157              customizeId = 'nav_menu_item[' + String( placeholderId ) + ']';
3158              settingArgs = {
3159                  type: 'nav_menu_item',
3160                  transport: api.Menus.data.settingTransport,
3161                  previewer: api.previewer
3162              };
3163              setting = api.create( customizeId, customizeId, {}, settingArgs );
3164              setting.set( item ); // Change from initial empty object to actual item to mark as dirty.
3165  
3166              // Add the menu item control.
3167              menuItemControl = new api.controlConstructor.nav_menu_item( customizeId, {
3168                  type: 'nav_menu_item',
3169                  section: menuControl.id,
3170                  priority: priority,
3171                  settings: {
3172                      'default': customizeId
3173                  },
3174                  menu_item_id: placeholderId,
3175                  original_item_id: originalItemId
3176              } );
3177  
3178              api.control.add( menuItemControl );
3179              setting.preview();
3180              menuControl.debouncedReflowMenuItems();
3181  
3182              wp.a11y.speak( api.Menus.data.l10n.itemAdded );
3183  
3184              return menuItemControl;
3185          },
3186  
3187          /**
3188           * Show an invitation to add new menu items when there are no menu items.
3189           *
3190           * @since 4.9.0
3191           *
3192           * @param {wp.customize.controlConstructor.nav_menu_item[]} optionalMenuItemControls
3193           */
3194          updateInvitationVisibility: function ( optionalMenuItemControls ) {
3195              var menuItemControls = optionalMenuItemControls || this.getMenuItemControls();
3196  
3197              this.container.find( '.new-menu-item-invitation' ).toggle( menuItemControls.length === 0 );
3198          }
3199      } );
3200  
3201      /**
3202       * Extends wp.customize.controlConstructor with control constructor for
3203       * menu_location, menu_item, nav_menu, and new_menu.
3204       */
3205      $.extend( api.controlConstructor, {
3206          nav_menu_location: api.Menus.MenuLocationControl,
3207          nav_menu_item: api.Menus.MenuItemControl,
3208          nav_menu: api.Menus.MenuControl,
3209          nav_menu_name: api.Menus.MenuNameControl,
3210          nav_menu_locations: api.Menus.MenuLocationsControl,
3211          nav_menu_auto_add: api.Menus.MenuAutoAddControl
3212      });
3213  
3214      /**
3215       * Extends wp.customize.panelConstructor with section constructor for menus.
3216       */
3217      $.extend( api.panelConstructor, {
3218          nav_menus: api.Menus.MenusPanel
3219      });
3220  
3221      /**
3222       * Extends wp.customize.sectionConstructor with section constructor for menu.
3223       */
3224      $.extend( api.sectionConstructor, {
3225          nav_menu: api.Menus.MenuSection,
3226          new_menu: api.Menus.NewMenuSection
3227      });
3228  
3229      /**
3230       * Init Customizer for menus.
3231       */
3232      api.bind( 'ready', function() {
3233  
3234          // Set up the menu items panel.
3235          api.Menus.availableMenuItemsPanel = new api.Menus.AvailableMenuItemsPanelView({
3236              collection: api.Menus.availableMenuItems
3237          });
3238  
3239          api.bind( 'saved', function( data ) {
3240              if ( data.nav_menu_updates || data.nav_menu_item_updates ) {
3241                  api.Menus.applySavedData( data );
3242              }
3243          } );
3244  
3245          /*
3246           * Reset the list of posts created in the customizer once published.
3247           * The setting is updated quietly (bypassing events being triggered)
3248           * so that the customized state doesn't become immediately dirty.
3249           */
3250          api.state( 'changesetStatus' ).bind( function( status ) {
3251              if ( 'publish' === status ) {
3252                  api( 'nav_menus_created_posts' )._value = [];
3253              }
3254          } );
3255  
3256          // Open and focus menu control.
3257          api.previewer.bind( 'focus-nav-menu-item-control', api.Menus.focusMenuItemControl );
3258      } );
3259  
3260      /**
3261       * When customize_save comes back with a success, make sure any inserted
3262       * nav menus and items are properly re-added with their newly-assigned IDs.
3263       *
3264       * @alias wp.customize.Menus.applySavedData
3265       *
3266       * @param {Object} data
3267       * @param {Array} data.nav_menu_updates
3268       * @param {Array} data.nav_menu_item_updates
3269       */
3270      api.Menus.applySavedData = function( data ) {
3271  
3272          var insertedMenuIdMapping = {}, insertedMenuItemIdMapping = {};
3273  
3274          _( data.nav_menu_updates ).each(function( update ) {
3275              var oldCustomizeId, newCustomizeId, customizeId, oldSetting, newSetting, setting, settingValue, oldSection, newSection, wasSaved, widgetTemplate, navMenuCount, shouldExpandNewSection;
3276              if ( 'inserted' === update.status ) {
3277                  if ( ! update.previous_term_id ) {
3278                      throw new Error( 'Expected previous_term_id' );
3279                  }
3280                  if ( ! update.term_id ) {
3281                      throw new Error( 'Expected term_id' );
3282                  }
3283                  oldCustomizeId = 'nav_menu[' + String( update.previous_term_id ) + ']';
3284                  if ( ! api.has( oldCustomizeId ) ) {
3285                      throw new Error( 'Expected setting to exist: ' + oldCustomizeId );
3286                  }
3287                  oldSetting = api( oldCustomizeId );
3288                  if ( ! api.section.has( oldCustomizeId ) ) {
3289                      throw new Error( 'Expected control to exist: ' + oldCustomizeId );
3290                  }
3291                  oldSection = api.section( oldCustomizeId );
3292  
3293                  settingValue = oldSetting.get();
3294                  if ( ! settingValue ) {
3295                      throw new Error( 'Did not expect setting to be empty (deleted).' );
3296                  }
3297                  settingValue = $.extend( _.clone( settingValue ), update.saved_value );
3298  
3299                  insertedMenuIdMapping[ update.previous_term_id ] = update.term_id;
3300                  newCustomizeId = 'nav_menu[' + String( update.term_id ) + ']';
3301                  newSetting = api.create( newCustomizeId, newCustomizeId, settingValue, {
3302                      type: 'nav_menu',
3303                      transport: api.Menus.data.settingTransport,
3304                      previewer: api.previewer
3305                  } );
3306  
3307                  shouldExpandNewSection = oldSection.expanded();
3308                  if ( shouldExpandNewSection ) {
3309                      oldSection.collapse();
3310                  }
3311  
3312                  // Add the menu section.
3313                  newSection = new api.Menus.MenuSection( newCustomizeId, {
3314                      panel: 'nav_menus',
3315                      title: settingValue.name,
3316                      customizeAction: api.Menus.data.l10n.customizingMenus,
3317                      type: 'nav_menu',
3318                      priority: oldSection.priority.get(),
3319                      menu_id: update.term_id
3320                  } );
3321  
3322                  // Add new control for the new menu.
3323                  api.section.add( newSection );
3324  
3325                  // Update the values for nav menus in Navigation Menu controls.
3326                  api.control.each( function( setting ) {
3327                      if ( ! setting.extended( api.controlConstructor.widget_form ) || 'nav_menu' !== setting.params.widget_id_base ) {
3328                          return;
3329                      }
3330                      var select, oldMenuOption, newMenuOption;
3331                      select = setting.container.find( 'select' );
3332                      oldMenuOption = select.find( 'option[value=' + String( update.previous_term_id ) + ']' );
3333                      newMenuOption = select.find( 'option[value=' + String( update.term_id ) + ']' );
3334                      newMenuOption.prop( 'selected', oldMenuOption.prop( 'selected' ) );
3335                      oldMenuOption.remove();
3336                  } );
3337  
3338                  // Delete the old placeholder nav_menu.
3339                  oldSetting.callbacks.disable(); // Prevent setting triggering Customizer dirty state when set.
3340                  oldSetting.set( false );
3341                  oldSetting.preview();
3342                  newSetting.preview();
3343                  oldSetting._dirty = false;
3344  
3345                  // Remove nav_menu section.
3346                  oldSection.container.remove();
3347                  api.section.remove( oldCustomizeId );
3348  
3349                  // Update the nav_menu widget to reflect removed placeholder menu.
3350                  navMenuCount = 0;
3351                  api.each(function( setting ) {
3352                      if ( /^nav_menu\[/.test( setting.id ) && false !== setting() ) {
3353                          navMenuCount += 1;
3354                      }
3355                  });
3356                  widgetTemplate = $( '#available-widgets-list .widget-tpl:has( input.id_base[ value=nav_menu ] )' );
3357                  widgetTemplate.find( '.nav-menu-widget-form-controls:first' ).toggle( 0 !== navMenuCount );
3358                  widgetTemplate.find( '.nav-menu-widget-no-menus-message:first' ).toggle( 0 === navMenuCount );
3359                  widgetTemplate.find( 'option[value=' + String( update.previous_term_id ) + ']' ).remove();
3360  
3361                  // Update the nav_menu_locations[...] controls to remove the placeholder menus from the dropdown options.
3362                  wp.customize.control.each(function( control ){
3363                      if ( /^nav_menu_locations\[/.test( control.id ) ) {
3364                          control.container.find( 'option[value=' + String( update.previous_term_id ) + ']' ).remove();
3365                      }
3366                  });
3367  
3368                  // Update nav_menu_locations to reference the new ID.
3369                  api.each( function( setting ) {
3370                      var wasSaved = api.state( 'saved' ).get();
3371                      if ( /^nav_menu_locations\[/.test( setting.id ) && setting.get() === update.previous_term_id ) {
3372                          setting.set( update.term_id );
3373                          setting._dirty = false; // Not dirty because this is has also just been done on server in WP_Customize_Nav_Menu_Setting::update().
3374                          api.state( 'saved' ).set( wasSaved );
3375                          setting.preview();
3376                      }
3377                  } );
3378  
3379                  if ( shouldExpandNewSection ) {
3380                      newSection.expand();
3381                  }
3382              } else if ( 'updated' === update.status ) {
3383                  customizeId = 'nav_menu[' + String( update.term_id ) + ']';
3384                  if ( ! api.has( customizeId ) ) {
3385                      throw new Error( 'Expected setting to exist: ' + customizeId );
3386                  }
3387  
3388                  // Make sure the setting gets updated with its sanitized server value (specifically the conflict-resolved name).
3389                  setting = api( customizeId );
3390                  if ( ! _.isEqual( update.saved_value, setting.get() ) ) {
3391                      wasSaved = api.state( 'saved' ).get();
3392                      setting.set( update.saved_value );
3393                      setting._dirty = false;
3394                      api.state( 'saved' ).set( wasSaved );
3395                  }
3396              }
3397          } );
3398  
3399          // Build up mapping of nav_menu_item placeholder IDs to inserted IDs.
3400          _( data.nav_menu_item_updates ).each(function( update ) {
3401              if ( update.previous_post_id ) {
3402                  insertedMenuItemIdMapping[ update.previous_post_id ] = update.post_id;
3403              }
3404          });
3405  
3406          _( data.nav_menu_item_updates ).each(function( update ) {
3407              var oldCustomizeId, newCustomizeId, oldSetting, newSetting, settingValue, oldControl, newControl;
3408              if ( 'inserted' === update.status ) {
3409                  if ( ! update.previous_post_id ) {
3410                      throw new Error( 'Expected previous_post_id' );
3411                  }
3412                  if ( ! update.post_id ) {
3413                      throw new Error( 'Expected post_id' );
3414                  }
3415                  oldCustomizeId = 'nav_menu_item[' + String( update.previous_post_id ) + ']';
3416                  if ( ! api.has( oldCustomizeId ) ) {
3417                      throw new Error( 'Expected setting to exist: ' + oldCustomizeId );
3418                  }
3419                  oldSetting = api( oldCustomizeId );
3420                  if ( ! api.control.has( oldCustomizeId ) ) {
3421                      throw new Error( 'Expected control to exist: ' + oldCustomizeId );
3422                  }
3423                  oldControl = api.control( oldCustomizeId );
3424  
3425                  settingValue = oldSetting.get();
3426                  if ( ! settingValue ) {
3427                      throw new Error( 'Did not expect setting to be empty (deleted).' );
3428                  }
3429                  settingValue = _.clone( settingValue );
3430  
3431                  // If the parent menu item was also inserted, update the menu_item_parent to the new ID.
3432                  if ( settingValue.menu_item_parent < 0 ) {
3433                      if ( ! insertedMenuItemIdMapping[ settingValue.menu_item_parent ] ) {
3434                          throw new Error( 'inserted ID for menu_item_parent not available' );
3435                      }
3436                      settingValue.menu_item_parent = insertedMenuItemIdMapping[ settingValue.menu_item_parent ];
3437                  }
3438  
3439                  // If the menu was also inserted, then make sure it uses the new menu ID for nav_menu_term_id.
3440                  if ( insertedMenuIdMapping[ settingValue.nav_menu_term_id ] ) {
3441                      settingValue.nav_menu_term_id = insertedMenuIdMapping[ settingValue.nav_menu_term_id ];
3442                  }
3443  
3444                  newCustomizeId = 'nav_menu_item[' + String( update.post_id ) + ']';
3445                  newSetting = api.create( newCustomizeId, newCustomizeId, settingValue, {
3446                      type: 'nav_menu_item',
3447                      transport: api.Menus.data.settingTransport,
3448                      previewer: api.previewer
3449                  } );
3450  
3451                  // Add the menu control.
3452                  newControl = new api.controlConstructor.nav_menu_item( newCustomizeId, {
3453                      type: 'nav_menu_item',
3454                      menu_id: update.post_id,
3455                      section: 'nav_menu[' + String( settingValue.nav_menu_term_id ) + ']',
3456                      priority: oldControl.priority.get(),
3457                      settings: {
3458                          'default': newCustomizeId
3459                      },
3460                      menu_item_id: update.post_id
3461                  } );
3462  
3463                  // Remove old control.
3464                  oldControl.container.remove();
3465                  api.control.remove( oldCustomizeId );
3466  
3467                  // Add new control to take its place.
3468                  api.control.add( newControl );
3469  
3470                  // Delete the placeholder and preview the new setting.
3471                  oldSetting.callbacks.disable(); // Prevent setting triggering Customizer dirty state when set.
3472                  oldSetting.set( false );
3473                  oldSetting.preview();
3474                  newSetting.preview();
3475                  oldSetting._dirty = false;
3476  
3477                  newControl.container.toggleClass( 'menu-item-edit-inactive', oldControl.container.hasClass( 'menu-item-edit-inactive' ) );
3478              }
3479          });
3480  
3481          /*
3482           * Update the settings for any nav_menu widgets that had selected a placeholder ID.
3483           */
3484          _.each( data.widget_nav_menu_updates, function( widgetSettingValue, widgetSettingId ) {
3485              var setting = api( widgetSettingId );
3486              if ( setting ) {
3487                  setting._value = widgetSettingValue;
3488                  setting.preview(); // Send to the preview now so that menu refresh will use the inserted menu.
3489              }
3490          });
3491      };
3492  
3493      /**
3494       * Focus a menu item control.
3495       *
3496       * @alias wp.customize.Menus.focusMenuItemControl
3497       *
3498       * @param {string} menuItemId
3499       */
3500      api.Menus.focusMenuItemControl = function( menuItemId ) {
3501          var control = api.Menus.getMenuItemControl( menuItemId );
3502          if ( control ) {
3503              control.focus();
3504          }
3505      };
3506  
3507      /**
3508       * Get the control for a given menu.
3509       *
3510       * @alias wp.customize.Menus.getMenuControl
3511       *
3512       * @param menuId
3513       * @return {wp.customize.controlConstructor.menus[]}
3514       */
3515      api.Menus.getMenuControl = function( menuId ) {
3516          return api.control( 'nav_menu[' + menuId + ']' );
3517      };
3518  
3519      /**
3520       * Given a menu item ID, get the control associated with it.
3521       *
3522       * @alias wp.customize.Menus.getMenuItemControl
3523       *
3524       * @param {string} menuItemId
3525       * @return {Object|null}
3526       */
3527      api.Menus.getMenuItemControl = function( menuItemId ) {
3528          return api.control( menuItemIdToSettingId( menuItemId ) );
3529      };
3530  
3531      /**
3532       * @alias wp.customize.Menus~menuItemIdToSettingId
3533       *
3534       * @param {string} menuItemId
3535       */
3536  	function menuItemIdToSettingId( menuItemId ) {
3537          return 'nav_menu_item[' + menuItemId + ']';
3538      }
3539  
3540      /**
3541       * Apply sanitize_text_field()-like logic to the supplied name, returning a
3542       * "unnammed" fallback string if the name is then empty.
3543       *
3544       * @alias wp.customize.Menus~displayNavMenuName
3545       *
3546       * @param {string} name
3547       * @return {string}
3548       */
3549  	function displayNavMenuName( name ) {
3550          name = name || '';
3551          name = wp.sanitize.stripTagsAndEncodeText( name ); // Remove any potential tags from name.
3552          name = name.toString().trim();
3553          return name || api.Menus.data.l10n.unnamed;
3554      }
3555  
3556  })( wp.customize, wp, jQuery );