[Summary view] [Print] [Text view]

   1  /**
   2   * @output wp-admin/js/customize-widgets.js
   3   */
   4  
   5  /* global _wpCustomizeWidgetsSettings */
   6  (function( wp, $ ){
   7  
   8      if ( ! wp || ! wp.customize ) { return; }
   9  
  10      // Set up our namespace...
  11      var api = wp.customize,
  12          l10n;
  13  
  14      /**
  15       * @namespace wp.customize.Widgets
  16       */
  17      api.Widgets = api.Widgets || {};
  18      api.Widgets.savedWidgetIds = {};
  19  
  20      // Link settings.
  21      api.Widgets.data = _wpCustomizeWidgetsSettings || {};
  22      l10n = api.Widgets.data.l10n;
  23  
  24      /**
  25       * wp.customize.Widgets.WidgetModel
  26       *
  27       * A single widget model.
  28       *
  29       * @class    wp.customize.Widgets.WidgetModel
  30       * @augments Backbone.Model
  31       */
  32      api.Widgets.WidgetModel = Backbone.Model.extend(/** @lends wp.customize.Widgets.WidgetModel.prototype */{
  33          id: null,
  34          temp_id: null,
  35          classname: null,
  36          control_tpl: null,
  37          description: null,
  38          is_disabled: null,
  39          is_multi: null,
  40          multi_number: null,
  41          name: null,
  42          id_base: null,
  43          transport: null,
  44          params: [],
  45          width: null,
  46          height: null,
  47          search_matched: true
  48      });
  49  
  50      /**
  51       * wp.customize.Widgets.WidgetCollection
  52       *
  53       * Collection for widget models.
  54       *
  55       * @class    wp.customize.Widgets.WidgetCollection
  56       * @augments Backbone.Collection
  57       */
  58      api.Widgets.WidgetCollection = Backbone.Collection.extend(/** @lends wp.customize.Widgets.WidgetCollection.prototype */{
  59          model: api.Widgets.WidgetModel,
  60  
  61          // Controls searching on the current widget collection
  62          // and triggers an update event.
  63          doSearch: function( value ) {
  64  
  65              // Don't do anything if we've already done this search.
  66              // Useful because the search handler fires multiple times per keystroke.
  67              if ( this.terms === value ) {
  68                  return;
  69              }
  70  
  71              // Updates terms with the value passed.
  72              this.terms = value;
  73  
  74              // If we have terms, run a search...
  75              if ( this.terms.length > 0 ) {
  76                  this.search( this.terms );
  77              }
  78  
  79              // If search is blank, set all the widgets as they matched the search to reset the views.
  80              if ( this.terms === '' ) {
  81                  this.each( function ( widget ) {
  82                      widget.set( 'search_matched', true );
  83                  } );
  84              }
  85          },
  86  
  87          // Performs a search within the collection.
  88          // @uses RegExp
  89          search: function( term ) {
  90              var match, haystack;
  91  
  92              // Escape the term string for RegExp meta characters.
  93              term = term.replace( /[-\/\\^$*+?.()|[\]{}]/g, '\\$&' );
  94  
  95              // Consider spaces as word delimiters and match the whole string
  96              // so matching terms can be combined.
  97              term = term.replace( / /g, ')(?=.*' );
  98              match = new RegExp( '^(?=.*' + term + ').+', 'i' );
  99  
 100              this.each( function ( data ) {
 101                  haystack = [ data.get( 'name' ), data.get( 'description' ) ].join( ' ' );
 102                  data.set( 'search_matched', match.test( haystack ) );
 103              } );
 104          }
 105      });
 106      api.Widgets.availableWidgets = new api.Widgets.WidgetCollection( api.Widgets.data.availableWidgets );
 107  
 108      /**
 109       * wp.customize.Widgets.SidebarModel
 110       *
 111       * A single sidebar model.
 112       *
 113       * @class    wp.customize.Widgets.SidebarModel
 114       * @augments Backbone.Model
 115       */
 116      api.Widgets.SidebarModel = Backbone.Model.extend(/** @lends wp.customize.Widgets.SidebarModel.prototype */{
 117          after_title: null,
 118          after_widget: null,
 119          before_title: null,
 120          before_widget: null,
 121          'class': null,
 122          description: null,
 123          id: null,
 124          name: null,
 125          is_rendered: false
 126      });
 127  
 128      /**
 129       * wp.customize.Widgets.SidebarCollection
 130       *
 131       * Collection for sidebar models.
 132       *
 133       * @class    wp.customize.Widgets.SidebarCollection
 134       * @augments Backbone.Collection
 135       */
 136      api.Widgets.SidebarCollection = Backbone.Collection.extend(/** @lends wp.customize.Widgets.SidebarCollection.prototype */{
 137          model: api.Widgets.SidebarModel
 138      });
 139      api.Widgets.registeredSidebars = new api.Widgets.SidebarCollection( api.Widgets.data.registeredSidebars );
 140  
 141      api.Widgets.AvailableWidgetsPanelView = wp.Backbone.View.extend(/** @lends wp.customize.Widgets.AvailableWidgetsPanelView.prototype */{
 142  
 143          el: '#available-widgets',
 144  
 145          events: {
 146              'input #widgets-search': 'search',
 147              'focus .widget-tpl' : 'focus',
 148              'click .widget-tpl' : '_submit',
 149              'keypress .widget-tpl' : '_submit',
 150              'keydown' : 'keyboardAccessible'
 151          },
 152  
 153          // Cache current selected widget.
 154          selected: null,
 155  
 156          // Cache sidebar control which has opened panel.
 157          currentSidebarControl: null,
 158          $search: null,
 159          $clearResults: null,
 160          searchMatchesCount: null,
 161  
 162          /**
 163           * View class for the available widgets panel.
 164           *
 165           * @constructs wp.customize.Widgets.AvailableWidgetsPanelView
 166           * @augments   wp.Backbone.View
 167           */
 168          initialize: function() {
 169              var self = this;
 170  
 171              this.$search = $( '#widgets-search' );
 172  
 173              this.$clearResults = this.$el.find( '.clear-results' );
 174  
 175              _.bindAll( this, 'close' );
 176  
 177              this.listenTo( this.collection, 'change', this.updateList );
 178  
 179              this.updateList();
 180  
 181              // Set the initial search count to the number of available widgets.
 182              this.searchMatchesCount = this.collection.length;
 183  
 184              /*
 185               * If the available widgets panel is open and the customize controls
 186               * are interacted with (i.e. available widgets panel is blurred) then
 187               * close the available widgets panel. Also close on back button click.
 188               */
 189              $( '#customize-controls, #available-widgets .customize-section-title' ).on( 'click keydown', function( e ) {
 190                  var isAddNewBtn = $( e.target ).is( '.add-new-widget, .add-new-widget *' );
 191                  if ( $( 'body' ).hasClass( 'adding-widget' ) && ! isAddNewBtn ) {
 192                      self.close();
 193                  }
 194              } );
 195  
 196              // Clear the search results and trigger an `input` event to fire a new search.
 197              this.$clearResults.on( 'click', function() {
 198                  self.$search.val( '' ).trigger( 'focus' ).trigger( 'input' );
 199              } );
 200  
 201              // Close the panel if the URL in the preview changes.
 202              api.previewer.bind( 'url', this.close );
 203          },
 204  
 205          /**
 206           * Performs a search and handles selected widget.
 207           */
 208          search: _.debounce( function( event ) {
 209              var firstVisible;
 210  
 211              this.collection.doSearch( event.target.value );
 212              // Update the search matches count.
 213              this.updateSearchMatchesCount();
 214              // Announce how many search results.
 215              this.announceSearchMatches();
 216  
 217              // Remove a widget from being selected if it is no longer visible.
 218              if ( this.selected && ! this.selected.is( ':visible' ) ) {
 219                  this.selected.removeClass( 'selected' );
 220                  this.selected = null;
 221              }
 222  
 223              // If a widget was selected but the filter value has been cleared out, clear selection.
 224              if ( this.selected && ! event.target.value ) {
 225                  this.selected.removeClass( 'selected' );
 226                  this.selected = null;
 227              }
 228  
 229              // If a filter has been entered and a widget hasn't been selected, select the first one shown.
 230              if ( ! this.selected && event.target.value ) {
 231                  firstVisible = this.$el.find( '> .widget-tpl:visible:first' );
 232                  if ( firstVisible.length ) {
 233                      this.select( firstVisible );
 234                  }
 235              }
 236  
 237              // Toggle the clear search results button.
 238              if ( '' !== event.target.value ) {
 239                  this.$clearResults.addClass( 'is-visible' );
 240              } else if ( '' === event.target.value ) {
 241                  this.$clearResults.removeClass( 'is-visible' );
 242              }
 243  
 244              // Set a CSS class on the search container when there are no search results.
 245              if ( ! this.searchMatchesCount ) {
 246                  this.$el.addClass( 'no-widgets-found' );
 247              } else {
 248                  this.$el.removeClass( 'no-widgets-found' );
 249              }
 250          }, 500 ),
 251  
 252          /**
 253           * Updates the count of the available widgets that have the `search_matched` attribute.
 254            */
 255          updateSearchMatchesCount: function() {
 256              this.searchMatchesCount = this.collection.where({ search_matched: true }).length;
 257          },
 258  
 259          /**
 260           * Sends a message to the aria-live region to announce how many search results.
 261           */
 262          announceSearchMatches: function() {
 263              var message = l10n.widgetsFound.replace( '%d', this.searchMatchesCount ) ;
 264  
 265              if ( ! this.searchMatchesCount ) {
 266                  message = l10n.noWidgetsFound;
 267              }
 268  
 269              wp.a11y.speak( message );
 270          },
 271  
 272          /**
 273           * Changes visibility of available widgets.
 274            */
 275          updateList: function() {
 276              this.collection.each( function( widget ) {
 277                  var widgetTpl = $( '#widget-tpl-' + widget.id );
 278                  widgetTpl.toggle( widget.get( 'search_matched' ) && ! widget.get( 'is_disabled' ) );
 279                  if ( widget.get( 'is_disabled' ) && widgetTpl.is( this.selected ) ) {
 280                      this.selected = null;
 281                  }
 282              } );
 283          },
 284  
 285          /**
 286           * Highlights a widget.
 287            */
 288          select: function( widgetTpl ) {
 289              this.selected = $( widgetTpl );
 290              this.selected.siblings( '.widget-tpl' ).removeClass( 'selected' );
 291              this.selected.addClass( 'selected' );
 292          },
 293  
 294          /**
 295           * Highlights a widget on focus.
 296           */
 297          focus: function( event ) {
 298              this.select( $( event.currentTarget ) );
 299          },
 300  
 301          /**
 302           * Handles submit for keypress and click on widget.
 303           */
 304          _submit: function( event ) {
 305              // Only proceed with keypress if it is Enter or Spacebar.
 306              if ( event.type === 'keypress' && ( event.which !== 13 && event.which !== 32 ) ) {
 307                  return;
 308              }
 309  
 310              this.submit( $( event.currentTarget ) );
 311          },
 312  
 313          /**
 314           * Adds a selected widget to the sidebar.
 315            */
 316          submit: function( widgetTpl ) {
 317              var widgetId, widget, widgetFormControl;
 318  
 319              if ( ! widgetTpl ) {
 320                  widgetTpl = this.selected;
 321              }
 322  
 323              if ( ! widgetTpl || ! this.currentSidebarControl ) {
 324                  return;
 325              }
 326  
 327              this.select( widgetTpl );
 328  
 329              widgetId = $( this.selected ).data( 'widget-id' );
 330              widget = this.collection.findWhere( { id: widgetId } );
 331              if ( ! widget ) {
 332                  return;
 333              }
 334  
 335              widgetFormControl = this.currentSidebarControl.addWidget( widget.get( 'id_base' ) );
 336              if ( widgetFormControl ) {
 337                  widgetFormControl.focus();
 338              }
 339  
 340              this.close();
 341          },
 342  
 343          /**
 344           * Opens the panel.
 345           */
 346          open: function( sidebarControl ) {
 347              this.currentSidebarControl = sidebarControl;
 348  
 349              // Wide widget controls appear over the preview, and so they need to be collapsed when the panel opens.
 350              _( this.currentSidebarControl.getWidgetFormControls() ).each( function( control ) {
 351                  if ( control.params.is_wide ) {
 352                      control.collapseForm();
 353                  }
 354              } );
 355  
 356              if ( api.section.has( 'publish_settings' ) ) {
 357                  api.section( 'publish_settings' ).collapse();
 358              }
 359  
 360              $( 'body' ).addClass( 'adding-widget' );
 361  
 362              this.$el.find( '.selected' ).removeClass( 'selected' );
 363  
 364              // Reset search.
 365              this.collection.doSearch( '' );
 366  
 367              if ( ! api.settings.browser.mobile ) {
 368                  this.$search.trigger( 'focus' );
 369              }
 370          },
 371  
 372          /**
 373           * Closes the panel.
 374           */
 375          close: function( options ) {
 376              options = options || {};
 377  
 378              if ( options.returnFocus && this.currentSidebarControl ) {
 379                  this.currentSidebarControl.container.find( '.add-new-widget' ).focus();
 380              }
 381  
 382              this.currentSidebarControl = null;
 383              this.selected = null;
 384  
 385              $( 'body' ).removeClass( 'adding-widget' );
 386  
 387              this.$search.val( '' ).trigger( 'input' );
 388          },
 389  
 390          /**
 391           * Adds keyboard accessibility to the panel.
 392           */
 393          keyboardAccessible: function( event ) {
 394              var isEnter = ( event.which === 13 ),
 395                  isEsc = ( event.which === 27 ),
 396                  isDown = ( event.which === 40 ),
 397                  isUp = ( event.which === 38 ),
 398                  isTab = ( event.which === 9 ),
 399                  isShift = ( event.shiftKey ),
 400                  selected = null,
 401                  firstVisible = this.$el.find( '> .widget-tpl:visible:first' ),
 402                  lastVisible = this.$el.find( '> .widget-tpl:visible:last' ),
 403                  isSearchFocused = $( event.target ).is( this.$search ),
 404                  isLastWidgetFocused = $( event.target ).is( '.widget-tpl:visible:last' );
 405  
 406              if ( isDown || isUp ) {
 407                  if ( isDown ) {
 408                      if ( isSearchFocused ) {
 409                          selected = firstVisible;
 410                      } else if ( this.selected && this.selected.nextAll( '.widget-tpl:visible' ).length !== 0 ) {
 411                          selected = this.selected.nextAll( '.widget-tpl:visible:first' );
 412                      }
 413                  } else if ( isUp ) {
 414                      if ( isSearchFocused ) {
 415                          selected = lastVisible;
 416                      } else if ( this.selected && this.selected.prevAll( '.widget-tpl:visible' ).length !== 0 ) {
 417                          selected = this.selected.prevAll( '.widget-tpl:visible:first' );
 418                      }
 419                  }
 420  
 421                  this.select( selected );
 422  
 423                  if ( selected ) {
 424                      selected.trigger( 'focus' );
 425                  } else {
 426                      this.$search.trigger( 'focus' );
 427                  }
 428  
 429                  return;
 430              }
 431  
 432              // If enter pressed but nothing entered, don't do anything.
 433              if ( isEnter && ! this.$search.val() ) {
 434                  return;
 435              }
 436  
 437              if ( isEnter ) {
 438                  this.submit();
 439              } else if ( isEsc ) {
 440                  this.close( { returnFocus: true } );
 441              }
 442  
 443              if ( this.currentSidebarControl && isTab && ( isShift && isSearchFocused || ! isShift && isLastWidgetFocused ) ) {
 444                  this.currentSidebarControl.container.find( '.add-new-widget' ).focus();
 445                  event.preventDefault();
 446              }
 447          }
 448      });
 449  
 450      /**
 451       * Handlers for the widget-synced event, organized by widget ID base.
 452       * Other widgets may provide their own update handlers by adding
 453       * listeners for the widget-synced event.
 454       *
 455       * @alias    wp.customize.Widgets.formSyncHandlers
 456       */
 457      api.Widgets.formSyncHandlers = {
 458  
 459          /**
 460           * @param {jQuery.Event} e
 461           * @param {jQuery} widget
 462           * @param {string} newForm
 463           */
 464          rss: function( e, widget, newForm ) {
 465              var oldWidgetError = widget.find( '.widget-error:first' ),
 466                  newWidgetError = $( '<div>' + newForm + '</div>' ).find( '.widget-error:first' );
 467  
 468              if ( oldWidgetError.length && newWidgetError.length ) {
 469                  oldWidgetError.replaceWith( newWidgetError );
 470              } else if ( oldWidgetError.length ) {
 471                  oldWidgetError.remove();
 472              } else if ( newWidgetError.length ) {
 473                  widget.find( '.widget-content:first' ).prepend( newWidgetError );
 474              }
 475          }
 476      };
 477  
 478      api.Widgets.WidgetControl = api.Control.extend(/** @lends wp.customize.Widgets.WidgetControl.prototype */{
 479          defaultExpandedArguments: {
 480              duration: 'fast',
 481              completeCallback: $.noop
 482          },
 483  
 484          /**
 485           * wp.customize.Widgets.WidgetControl
 486           *
 487           * Customizer control for widgets.
 488           * Note that 'widget_form' must match the WP_Widget_Form_Customize_Control::$type
 489           *
 490           * @since 4.1.0
 491           *
 492           * @constructs wp.customize.Widgets.WidgetControl
 493           * @augments   wp.customize.Control
 494           */
 495          initialize: function( id, options ) {
 496              var control = this;
 497  
 498              control.widgetControlEmbedded = false;
 499              control.widgetContentEmbedded = false;
 500              control.expanded = new api.Value( false );
 501              control.expandedArgumentsQueue = [];
 502              control.expanded.bind( function( expanded ) {
 503                  var args = control.expandedArgumentsQueue.shift();
 504                  args = $.extend( {}, control.defaultExpandedArguments, args );
 505                  control.onChangeExpanded( expanded, args );
 506              });
 507              control.altNotice = true;
 508  
 509              api.Control.prototype.initialize.call( control, id, options );
 510          },
 511  
 512          /**
 513           * Set up the control.
 514           *
 515           * @since 3.9.0
 516           */
 517          ready: function() {
 518              var control = this;
 519  
 520              /*
 521               * Embed a placeholder once the section is expanded. The full widget
 522               * form content will be embedded once the control itself is expanded,
 523               * and at this point the widget-added event will be triggered.
 524               */
 525              if ( ! control.section() ) {
 526                  control.embedWidgetControl();
 527              } else {
 528                  api.section( control.section(), function( section ) {
 529                      var onExpanded = function( isExpanded ) {
 530                          if ( isExpanded ) {
 531                              control.embedWidgetControl();
 532                              section.expanded.unbind( onExpanded );
 533                          }
 534                      };
 535                      if ( section.expanded() ) {
 536                          onExpanded( true );
 537                      } else {
 538                          section.expanded.bind( onExpanded );
 539                      }
 540                  } );
 541              }
 542          },
 543  
 544          /**
 545           * Embed the .widget element inside the li container.
 546           *
 547           * @since 4.4.0
 548           */
 549          embedWidgetControl: function() {
 550              var control = this, widgetControl;
 551  
 552              if ( control.widgetControlEmbedded ) {
 553                  return;
 554              }
 555              control.widgetControlEmbedded = true;
 556  
 557              widgetControl = $( control.params.widget_control );
 558              control.container.append( widgetControl );
 559  
 560              control._setupModel();
 561              control._setupWideWidget();
 562              control._setupControlToggle();
 563  
 564              control._setupWidgetTitle();
 565              control._setupReorderUI();
 566              control._setupHighlightEffects();
 567              control._setupUpdateUI();
 568              control._setupRemoveUI();
 569          },
 570  
 571          /**
 572           * Embed the actual widget form inside of .widget-content and finally trigger the widget-added event.
 573           *
 574           * @since 4.4.0
 575           */
 576          embedWidgetContent: function() {
 577              var control = this, widgetContent;
 578  
 579              control.embedWidgetControl();
 580              if ( control.widgetContentEmbedded ) {
 581                  return;
 582              }
 583              control.widgetContentEmbedded = true;
 584  
 585              // Update the notification container element now that the widget content has been embedded.
 586              control.notifications.container = control.getNotificationsContainerElement();
 587              control.notifications.render();
 588  
 589              widgetContent = $( control.params.widget_content );
 590              control.container.find( '.widget-content:first' ).append( widgetContent );
 591  
 592              /*
 593               * Trigger widget-added event so that plugins can attach any event
 594               * listeners and dynamic UI elements.
 595               */
 596              $( document ).trigger( 'widget-added', [ control.container.find( '.widget:first' ) ] );
 597  
 598          },
 599  
 600          /**
 601           * Handle changes to the setting
 602           */
 603          _setupModel: function() {
 604              var self = this, rememberSavedWidgetId;
 605  
 606              // Remember saved widgets so we know which to trash (move to inactive widgets sidebar).
 607              rememberSavedWidgetId = function() {
 608                  api.Widgets.savedWidgetIds[self.params.widget_id] = true;
 609              };
 610              api.bind( 'ready', rememberSavedWidgetId );
 611              api.bind( 'saved', rememberSavedWidgetId );
 612  
 613              this._updateCount = 0;
 614              this.isWidgetUpdating = false;
 615              this.liveUpdateMode = true;
 616  
 617              // Update widget whenever model changes.
 618              this.setting.bind( function( to, from ) {
 619                  if ( ! _( from ).isEqual( to ) && ! self.isWidgetUpdating ) {
 620                      self.updateWidget( { instance: to } );
 621                  }
 622              } );
 623          },
 624  
 625          /**
 626           * Add special behaviors for wide widget controls
 627           */
 628          _setupWideWidget: function() {
 629              var self = this, $widgetInside, $widgetForm, $customizeSidebar,
 630                  $themeControlsContainer, positionWidget;
 631  
 632              if ( ! this.params.is_wide || $( window ).width() <= 640 /* max-width breakpoint in customize-controls.css */ ) {
 633                  return;
 634              }
 635  
 636              $widgetInside = this.container.find( '.widget-inside' );
 637              $widgetForm = $widgetInside.find( '> .form' );
 638              $customizeSidebar = $( '.wp-full-overlay-sidebar-content:first' );
 639              this.container.addClass( 'wide-widget-control' );
 640  
 641              this.container.find( '.form:first' ).css( {
 642                  'max-width': this.params.width,
 643                  'min-height': this.params.height
 644              } );
 645  
 646              /**
 647               * Keep the widget-inside positioned so the top of fixed-positioned
 648               * element is at the same top position as the widget-top. When the
 649               * widget-top is scrolled out of view, keep the widget-top in view;
 650               * likewise, don't allow the widget to drop off the bottom of the window.
 651               * If a widget is too tall to fit in the window, don't let the height
 652               * exceed the window height so that the contents of the widget control
 653               * will become scrollable (overflow:auto).
 654               */
 655              positionWidget = function() {
 656                  var offsetTop = self.container.offset().top,
 657                      windowHeight = $( window ).height(),
 658                      formHeight = $widgetForm.outerHeight(),
 659                      top;
 660                  $widgetInside.css( 'max-height', windowHeight );
 661                  top = Math.max(
 662                      0, // Prevent top from going off screen.
 663                      Math.min(
 664                          Math.max( offsetTop, 0 ), // Distance widget in panel is from top of screen.
 665                          windowHeight - formHeight // Flush up against bottom of screen.
 666                      )
 667                  );
 668                  $widgetInside.css( 'top', top );
 669              };
 670  
 671              $themeControlsContainer = $( '#customize-theme-controls' );
 672              this.container.on( 'expand', function() {
 673                  positionWidget();
 674                  $customizeSidebar.on( 'scroll', positionWidget );
 675                  $( window ).on( 'resize', positionWidget );
 676                  $themeControlsContainer.on( 'expanded collapsed', positionWidget );
 677              } );
 678              this.container.on( 'collapsed', function() {
 679                  $customizeSidebar.off( 'scroll', positionWidget );
 680                  $( window ).off( 'resize', positionWidget );
 681                  $themeControlsContainer.off( 'expanded collapsed', positionWidget );
 682              } );
 683  
 684              // Reposition whenever a sidebar's widgets are changed.
 685              api.each( function( setting ) {
 686                  if ( 0 === setting.id.indexOf( 'sidebars_widgets[' ) ) {
 687                      setting.bind( function() {
 688                          if ( self.container.hasClass( 'expanded' ) ) {
 689                              positionWidget();
 690                          }
 691                      } );
 692                  }
 693              } );
 694          },
 695  
 696          /**
 697           * Show/hide the control when clicking on the form title, when clicking
 698           * the close button
 699           */
 700          _setupControlToggle: function() {
 701              var self = this, $closeBtn;
 702  
 703              this.container.find( '.widget-top' ).on( 'click', function( e ) {
 704                  e.preventDefault();
 705                  var sidebarWidgetsControl = self.getSidebarWidgetsControl();
 706                  if ( sidebarWidgetsControl.isReordering ) {
 707                      return;
 708                  }
 709                  self.expanded( ! self.expanded() );
 710              } );
 711  
 712              $closeBtn = this.container.find( '.widget-control-close' );
 713              $closeBtn.on( 'click', function() {
 714                  self.collapse();
 715                  self.container.find( '.widget-top .widget-action:first' ).focus(); // Keyboard accessibility.
 716              } );
 717          },
 718  
 719          /**
 720           * Update the title of the form if a title field is entered
 721           */
 722          _setupWidgetTitle: function() {
 723              var self = this, updateTitle;
 724  
 725              updateTitle = function() {
 726                  var title = self.setting().title,
 727                      inWidgetTitle = self.container.find( '.in-widget-title' );
 728  
 729                  if ( title ) {
 730                      inWidgetTitle.text( ': ' + title );
 731                  } else {
 732                      inWidgetTitle.text( '' );
 733                  }
 734              };
 735              this.setting.bind( updateTitle );
 736              updateTitle();
 737          },
 738  
 739          /**
 740           * Set up the widget-reorder-nav
 741           */
 742          _setupReorderUI: function() {
 743              var self = this, selectSidebarItem, $moveWidgetArea,
 744                  $reorderNav, updateAvailableSidebars, template;
 745  
 746              /**
 747               * select the provided sidebar list item in the move widget area
 748               *
 749               * @param {jQuery} li
 750               */
 751              selectSidebarItem = function( li ) {
 752                  li.siblings( '.selected' ).removeClass( 'selected' );
 753                  li.addClass( 'selected' );
 754                  var isSelfSidebar = ( li.data( 'id' ) === self.params.sidebar_id );
 755                  self.container.find( '.move-widget-btn' ).prop( 'disabled', isSelfSidebar );
 756              };
 757  
 758              /**
 759               * Add the widget reordering elements to the widget control
 760               */
 761              this.container.find( '.widget-title-action' ).after( $( api.Widgets.data.tpl.widgetReorderNav ) );
 762  
 763  
 764              template = _.template( api.Widgets.data.tpl.moveWidgetArea );
 765              $moveWidgetArea = $( template( {
 766                      sidebars: _( api.Widgets.registeredSidebars.toArray() ).pluck( 'attributes' )
 767                  } )
 768              );
 769              this.container.find( '.widget-top' ).after( $moveWidgetArea );
 770  
 771              /**
 772               * Update available sidebars when their rendered state changes
 773               */
 774              updateAvailableSidebars = function() {
 775                  var $sidebarItems = $moveWidgetArea.find( 'li' ), selfSidebarItem,
 776                      renderedSidebarCount = 0;
 777  
 778                  selfSidebarItem = $sidebarItems.filter( function(){
 779                      return $( this ).data( 'id' ) === self.params.sidebar_id;
 780                  } );
 781  
 782                  $sidebarItems.each( function() {
 783                      var li = $( this ),
 784                          sidebarId, sidebar, sidebarIsRendered;
 785  
 786                      sidebarId = li.data( 'id' );
 787                      sidebar = api.Widgets.registeredSidebars.get( sidebarId );
 788                      sidebarIsRendered = sidebar.get( 'is_rendered' );
 789  
 790                      li.toggle( sidebarIsRendered );
 791  
 792                      if ( sidebarIsRendered ) {
 793                          renderedSidebarCount += 1;
 794                      }
 795  
 796                      if ( li.hasClass( 'selected' ) && ! sidebarIsRendered ) {
 797                          selectSidebarItem( selfSidebarItem );
 798                      }
 799                  } );
 800  
 801                  if ( renderedSidebarCount > 1 ) {
 802                      self.container.find( '.move-widget' ).show();
 803                  } else {
 804                      self.container.find( '.move-widget' ).hide();
 805                  }
 806              };
 807  
 808              updateAvailableSidebars();
 809              api.Widgets.registeredSidebars.on( 'change:is_rendered', updateAvailableSidebars );
 810  
 811              /**
 812               * Handle clicks for up/down/move on the reorder nav
 813               */
 814              $reorderNav = this.container.find( '.widget-reorder-nav' );
 815              $reorderNav.find( '.move-widget, .move-widget-down, .move-widget-up' ).each( function() {
 816                  $( this ).prepend( self.container.find( '.widget-title' ).text() + ': ' );
 817              } ).on( 'click keypress', function( event ) {
 818                  if ( event.type === 'keypress' && ( event.which !== 13 && event.which !== 32 ) ) {
 819                      return;
 820                  }
 821                  $( this ).trigger( 'focus' );
 822  
 823                  if ( $( this ).is( '.move-widget' ) ) {
 824                      self.toggleWidgetMoveArea();
 825                  } else {
 826                      var isMoveDown = $( this ).is( '.move-widget-down' ),
 827                          isMoveUp = $( this ).is( '.move-widget-up' ),
 828                          i = self.getWidgetSidebarPosition();
 829  
 830                      if ( ( isMoveUp && i === 0 ) || ( isMoveDown && i === self.getSidebarWidgetsControl().setting().length - 1 ) ) {
 831                          return;
 832                      }
 833  
 834                      if ( isMoveUp ) {
 835                          self.moveUp();
 836                          wp.a11y.speak( l10n.widgetMovedUp );
 837                      } else {
 838                          self.moveDown();
 839                          wp.a11y.speak( l10n.widgetMovedDown );
 840                      }
 841  
 842                      $( this ).trigger( 'focus' ); // Re-focus after the container was moved.
 843                  }
 844              } );
 845  
 846              /**
 847               * Handle selecting a sidebar to move to
 848               */
 849              this.container.find( '.widget-area-select' ).on( 'click keypress', 'li', function( event ) {
 850                  if ( event.type === 'keypress' && ( event.which !== 13 && event.which !== 32 ) ) {
 851                      return;
 852                  }
 853                  event.preventDefault();
 854                  selectSidebarItem( $( this ) );
 855              } );
 856  
 857              /**
 858               * Move widget to another sidebar
 859               */
 860              this.container.find( '.move-widget-btn' ).click( function() {
 861                  self.getSidebarWidgetsControl().toggleReordering( false );
 862  
 863                  var oldSidebarId = self.params.sidebar_id,
 864                      newSidebarId = self.container.find( '.widget-area-select li.selected' ).data( 'id' ),
 865                      oldSidebarWidgetsSetting, newSidebarWidgetsSetting,
 866                      oldSidebarWidgetIds, newSidebarWidgetIds, i;
 867  
 868                  oldSidebarWidgetsSetting = api( 'sidebars_widgets[' + oldSidebarId + ']' );
 869                  newSidebarWidgetsSetting = api( 'sidebars_widgets[' + newSidebarId + ']' );
 870                  oldSidebarWidgetIds = Array.prototype.slice.call( oldSidebarWidgetsSetting() );
 871                  newSidebarWidgetIds = Array.prototype.slice.call( newSidebarWidgetsSetting() );
 872  
 873                  i = self.getWidgetSidebarPosition();
 874                  oldSidebarWidgetIds.splice( i, 1 );
 875                  newSidebarWidgetIds.push( self.params.widget_id );
 876  
 877                  oldSidebarWidgetsSetting( oldSidebarWidgetIds );
 878                  newSidebarWidgetsSetting( newSidebarWidgetIds );
 879  
 880                  self.focus();
 881              } );
 882          },
 883  
 884          /**
 885           * Highlight widgets in preview when interacted with in the Customizer
 886           */
 887          _setupHighlightEffects: function() {
 888              var self = this;
 889  
 890              // Highlight whenever hovering or clicking over the form.
 891              this.container.on( 'mouseenter click', function() {
 892                  self.setting.previewer.send( 'highlight-widget', self.params.widget_id );
 893              } );
 894  
 895              // Highlight when the setting is updated.
 896              this.setting.bind( function() {
 897                  self.setting.previewer.send( 'highlight-widget', self.params.widget_id );
 898              } );
 899          },
 900  
 901          /**
 902           * Set up event handlers for widget updating
 903           */
 904          _setupUpdateUI: function() {
 905              var self = this, $widgetRoot, $widgetContent,
 906                  $saveBtn, updateWidgetDebounced, formSyncHandler;
 907  
 908              $widgetRoot = this.container.find( '.widget:first' );
 909              $widgetContent = $widgetRoot.find( '.widget-content:first' );
 910  
 911              // Configure update button.
 912              $saveBtn = this.container.find( '.widget-control-save' );
 913              $saveBtn.val( l10n.saveBtnLabel );
 914              $saveBtn.attr( 'title', l10n.saveBtnTooltip );
 915              $saveBtn.removeClass( 'button-primary' );
 916              $saveBtn.on( 'click', function( e ) {
 917                  e.preventDefault();
 918                  self.updateWidget( { disable_form: true } ); // @todo disable_form is unused?
 919              } );
 920  
 921              updateWidgetDebounced = _.debounce( function() {
 922                  self.updateWidget();
 923              }, 250 );
 924  
 925              // Trigger widget form update when hitting Enter within an input.
 926              $widgetContent.on( 'keydown', 'input', function( e ) {
 927                  if ( 13 === e.which ) { // Enter.
 928                      e.preventDefault();
 929                      self.updateWidget( { ignoreActiveElement: true } );
 930                  }
 931              } );
 932  
 933              // Handle widgets that support live previews.
 934              $widgetContent.on( 'change input propertychange', ':input', function( e ) {
 935                  if ( ! self.liveUpdateMode ) {
 936                      return;
 937                  }
 938                  if ( e.type === 'change' || ( this.checkValidity && this.checkValidity() ) ) {
 939                      updateWidgetDebounced();
 940                  }
 941              } );
 942  
 943              // Remove loading indicators when the setting is saved and the preview updates.
 944              this.setting.previewer.channel.bind( 'synced', function() {
 945                  self.container.removeClass( 'previewer-loading' );
 946              } );
 947  
 948              api.previewer.bind( 'widget-updated', function( updatedWidgetId ) {
 949                  if ( updatedWidgetId === self.params.widget_id ) {
 950                      self.container.removeClass( 'previewer-loading' );
 951                  }
 952              } );
 953  
 954              formSyncHandler = api.Widgets.formSyncHandlers[ this.params.widget_id_base ];
 955              if ( formSyncHandler ) {
 956                  $( document ).on( 'widget-synced', function( e, widget ) {
 957                      if ( $widgetRoot.is( widget ) ) {
 958                          formSyncHandler.apply( document, arguments );
 959                      }
 960                  } );
 961              }
 962          },
 963  
 964          /**
 965           * Update widget control to indicate whether it is currently rendered.
 966           *
 967           * Overrides api.Control.toggle()
 968           *
 969           * @since 4.1.0
 970           *
 971           * @param {boolean}   active
 972           * @param {Object}    args
 973           * @param {function}  args.completeCallback
 974           */
 975          onChangeActive: function ( active, args ) {
 976              // Note: there is a second 'args' parameter being passed, merged on top of this.defaultActiveArguments.
 977              this.container.toggleClass( 'widget-rendered', active );
 978              if ( args.completeCallback ) {
 979                  args.completeCallback();
 980              }
 981          },
 982  
 983          /**
 984           * Set up event handlers for widget removal
 985           */
 986          _setupRemoveUI: function() {
 987              var self = this, $removeBtn, replaceDeleteWithRemove;
 988  
 989              // Configure remove button.
 990              $removeBtn = this.container.find( '.widget-control-remove' );
 991              $removeBtn.on( 'click', function() {
 992                  // Find an adjacent element to add focus to when this widget goes away.
 993                  var $adjacentFocusTarget;
 994                  if ( self.container.next().is( '.customize-control-widget_form' ) ) {
 995                      $adjacentFocusTarget = self.container.next().find( '.widget-action:first' );
 996                  } else if ( self.container.prev().is( '.customize-control-widget_form' ) ) {
 997                      $adjacentFocusTarget = self.container.prev().find( '.widget-action:first' );
 998                  } else {
 999                      $adjacentFocusTarget = self.container.next( '.customize-control-sidebar_widgets' ).find( '.add-new-widget:first' );
1000                  }
1001  
1002                  self.container.slideUp( function() {
1003                      var sidebarsWidgetsControl = api.Widgets.getSidebarWidgetControlContainingWidget( self.params.widget_id ),
1004                          sidebarWidgetIds, i;
1005  
1006                      if ( ! sidebarsWidgetsControl ) {
1007                          return;
1008                      }
1009  
1010                      sidebarWidgetIds = sidebarsWidgetsControl.setting().slice();
1011                      i = _.indexOf( sidebarWidgetIds, self.params.widget_id );
1012                      if ( -1 === i ) {
1013                          return;
1014                      }
1015  
1016                      sidebarWidgetIds.splice( i, 1 );
1017                      sidebarsWidgetsControl.setting( sidebarWidgetIds );
1018  
1019                      $adjacentFocusTarget.focus(); // Keyboard accessibility.
1020                  } );
1021              } );
1022  
1023              replaceDeleteWithRemove = function() {
1024                  $removeBtn.text( l10n.removeBtnLabel ); // wp_widget_control() outputs the button as "Delete".
1025                  $removeBtn.attr( 'title', l10n.removeBtnTooltip );
1026              };
1027  
1028              if ( this.params.is_new ) {
1029                  api.bind( 'saved', replaceDeleteWithRemove );
1030              } else {
1031                  replaceDeleteWithRemove();
1032              }
1033          },
1034  
1035          /**
1036           * Find all inputs in a widget container that should be considered when
1037           * comparing the loaded form with the sanitized form, whose fields will
1038           * be aligned to copy the sanitized over. The elements returned by this
1039           * are passed into this._getInputsSignature(), and they are iterated
1040           * over when copying sanitized values over to the form loaded.
1041           *
1042           * @param {jQuery} container element in which to look for inputs
1043           * @return {jQuery} inputs
1044           * @private
1045           */
1046          _getInputs: function( container ) {
1047              return $( container ).find( ':input[name]' );
1048          },
1049  
1050          /**
1051           * Iterate over supplied inputs and create a signature string for all of them together.
1052           * This string can be used to compare whether or not the form has all of the same fields.
1053           *
1054           * @param {jQuery} inputs
1055           * @return {string}
1056           * @private
1057           */
1058          _getInputsSignature: function( inputs ) {
1059              var inputsSignatures = _( inputs ).map( function( input ) {
1060                  var $input = $( input ), signatureParts;
1061  
1062                  if ( $input.is( ':checkbox, :radio' ) ) {
1063                      signatureParts = [ $input.attr( 'id' ), $input.attr( 'name' ), $input.prop( 'value' ) ];
1064                  } else {
1065                      signatureParts = [ $input.attr( 'id' ), $input.attr( 'name' ) ];
1066                  }
1067  
1068                  return signatureParts.join( ',' );
1069              } );
1070  
1071              return inputsSignatures.join( ';' );
1072          },
1073  
1074          /**
1075           * Get the state for an input depending on its type.
1076           *
1077           * @param {jQuery|Element} input
1078           * @return {string|boolean|Array|*}
1079           * @private
1080           */
1081          _getInputState: function( input ) {
1082              input = $( input );
1083              if ( input.is( ':radio, :checkbox' ) ) {
1084                  return input.prop( 'checked' );
1085              } else if ( input.is( 'select[multiple]' ) ) {
1086                  return input.find( 'option:selected' ).map( function () {
1087                      return $( this ).val();
1088                  } ).get();
1089              } else {
1090                  return input.val();
1091              }
1092          },
1093  
1094          /**
1095           * Update an input's state based on its type.
1096           *
1097           * @param {jQuery|Element} input
1098           * @param {string|boolean|Array|*} state
1099           * @private
1100           */
1101          _setInputState: function ( input, state ) {
1102              input = $( input );
1103              if ( input.is( ':radio, :checkbox' ) ) {
1104                  input.prop( 'checked', state );
1105              } else if ( input.is( 'select[multiple]' ) ) {
1106                  if ( ! Array.isArray( state ) ) {
1107                      state = [];
1108                  } else {
1109                      // Make sure all state items are strings since the DOM value is a string.
1110                      state = _.map( state, function ( value ) {
1111                          return String( value );
1112                      } );
1113                  }
1114                  input.find( 'option' ).each( function () {
1115                      $( this ).prop( 'selected', -1 !== _.indexOf( state, String( this.value ) ) );
1116                  } );
1117              } else {
1118                  input.val( state );
1119              }
1120          },
1121  
1122          /***********************************************************************
1123           * Begin public API methods
1124           **********************************************************************/
1125  
1126          /**
1127           * @return {wp.customize.controlConstructor.sidebar_widgets[]}
1128           */
1129          getSidebarWidgetsControl: function() {
1130              var settingId, sidebarWidgetsControl;
1131  
1132              settingId = 'sidebars_widgets[' + this.params.sidebar_id + ']';
1133              sidebarWidgetsControl = api.control( settingId );
1134  
1135              if ( ! sidebarWidgetsControl ) {
1136                  return;
1137              }
1138  
1139              return sidebarWidgetsControl;
1140          },
1141  
1142          /**
1143           * Submit the widget form via Ajax and get back the updated instance,
1144           * along with the new widget control form to render.
1145           *
1146           * @param {Object} [args]
1147           * @param {Object|null} [args.instance=null]  When the model changes, the instance is sent here; otherwise, the inputs from the form are used
1148           * @param {Function|null} [args.complete=null]  Function which is called when the request finishes. Context is bound to the control. First argument is any error. Following arguments are for success.
1149           * @param {boolean} [args.ignoreActiveElement=false] Whether or not updating a field will be deferred if focus is still on the element.
1150           */
1151          updateWidget: function( args ) {
1152              var self = this, instanceOverride, completeCallback, $widgetRoot, $widgetContent,
1153                  updateNumber, params, data, $inputs, processing, jqxhr, isChanged;
1154  
1155              // The updateWidget logic requires that the form fields to be fully present.
1156              self.embedWidgetContent();
1157  
1158              args = $.extend( {
1159                  instance: null,
1160                  complete: null,
1161                  ignoreActiveElement: false
1162              }, args );
1163  
1164              instanceOverride = args.instance;
1165              completeCallback = args.complete;
1166  
1167              this._updateCount += 1;
1168              updateNumber = this._updateCount;
1169  
1170              $widgetRoot = this.container.find( '.widget:first' );
1171              $widgetContent = $widgetRoot.find( '.widget-content:first' );
1172  
1173              // Remove a previous error message.
1174              $widgetContent.find( '.widget-error' ).remove();
1175  
1176              this.container.addClass( 'widget-form-loading' );
1177              this.container.addClass( 'previewer-loading' );
1178              processing = api.state( 'processing' );
1179              processing( processing() + 1 );
1180  
1181              if ( ! this.liveUpdateMode ) {
1182                  this.container.addClass( 'widget-form-disabled' );
1183              }
1184  
1185              params = {};
1186              params.action = 'update-widget';
1187              params.wp_customize = 'on';
1188              params.nonce = api.settings.nonce['update-widget'];
1189              params.customize_theme = api.settings.theme.stylesheet;
1190              params.customized = wp.customize.previewer.query().customized;
1191  
1192              data = $.param( params );
1193              $inputs = this._getInputs( $widgetContent );
1194  
1195              /*
1196               * Store the value we're submitting in data so that when the response comes back,
1197               * we know if it got sanitized; if there is no difference in the sanitized value,
1198               * then we do not need to touch the UI and mess up the user's ongoing editing.
1199               */
1200              $inputs.each( function() {
1201                  $( this ).data( 'state' + updateNumber, self._getInputState( this ) );
1202              } );
1203  
1204              if ( instanceOverride ) {
1205                  data += '&' + $.param( { 'sanitized_widget_setting': JSON.stringify( instanceOverride ) } );
1206              } else {
1207                  data += '&' + $inputs.serialize();
1208              }
1209              data += '&' + $widgetContent.find( '~ :input' ).serialize();
1210  
1211              if ( this._previousUpdateRequest ) {
1212                  this._previousUpdateRequest.abort();
1213              }
1214              jqxhr = $.post( wp.ajax.settings.url, data );
1215              this._previousUpdateRequest = jqxhr;
1216  
1217              jqxhr.done( function( r ) {
1218                  var message, sanitizedForm,    $sanitizedInputs, hasSameInputsInResponse,
1219                      isLiveUpdateAborted = false;
1220  
1221                  // Check if the user is logged out.
1222                  if ( '0' === r ) {
1223                      api.previewer.preview.iframe.hide();
1224                      api.previewer.login().done( function() {
1225                          self.updateWidget( args );
1226                          api.previewer.preview.iframe.show();
1227                      } );
1228                      return;
1229                  }
1230  
1231                  // Check for cheaters.
1232                  if ( '-1' === r ) {
1233                      api.previewer.cheatin();
1234                      return;
1235                  }
1236  
1237                  if ( r.success ) {
1238                      sanitizedForm = $( '<div>' + r.data.form + '</div>' );
1239                      $sanitizedInputs = self._getInputs( sanitizedForm );
1240                      hasSameInputsInResponse = self._getInputsSignature( $inputs ) === self._getInputsSignature( $sanitizedInputs );
1241  
1242                      // Restore live update mode if sanitized fields are now aligned with the existing fields.
1243                      if ( hasSameInputsInResponse && ! self.liveUpdateMode ) {
1244                          self.liveUpdateMode = true;
1245                          self.container.removeClass( 'widget-form-disabled' );
1246                          self.container.find( 'input[name="savewidget"]' ).hide();
1247                      }
1248  
1249                      // Sync sanitized field states to existing fields if they are aligned.
1250                      if ( hasSameInputsInResponse && self.liveUpdateMode ) {
1251                          $inputs.each( function( i ) {
1252                              var $input = $( this ),
1253                                  $sanitizedInput = $( $sanitizedInputs[i] ),
1254                                  submittedState, sanitizedState,    canUpdateState;
1255  
1256                              submittedState = $input.data( 'state' + updateNumber );
1257                              sanitizedState = self._getInputState( $sanitizedInput );
1258                              $input.data( 'sanitized', sanitizedState );
1259  
1260                              canUpdateState = ( ! _.isEqual( submittedState, sanitizedState ) && ( args.ignoreActiveElement || ! $input.is( document.activeElement ) ) );
1261                              if ( canUpdateState ) {
1262                                  self._setInputState( $input, sanitizedState );
1263                              }
1264                          } );
1265  
1266                          $( document ).trigger( 'widget-synced', [ $widgetRoot, r.data.form ] );
1267  
1268                      // Otherwise, if sanitized fields are not aligned with existing fields, disable live update mode if enabled.
1269                      } else if ( self.liveUpdateMode ) {
1270                          self.liveUpdateMode = false;
1271                          self.container.find( 'input[name="savewidget"]' ).show();
1272                          isLiveUpdateAborted = true;
1273  
1274                      // Otherwise, replace existing form with the sanitized form.
1275                      } else {
1276                          $widgetContent.html( r.data.form );
1277  
1278                          self.container.removeClass( 'widget-form-disabled' );
1279  
1280                          $( document ).trigger( 'widget-updated', [ $widgetRoot ] );
1281                      }
1282  
1283                      /**
1284                       * If the old instance is identical to the new one, there is nothing new
1285                       * needing to be rendered, and so we can preempt the event for the
1286                       * preview finishing loading.
1287                       */
1288                      isChanged = ! isLiveUpdateAborted && ! _( self.setting() ).isEqual( r.data.instance );
1289                      if ( isChanged ) {
1290                          self.isWidgetUpdating = true; // Suppress triggering another updateWidget.
1291                          self.setting( r.data.instance );
1292                          self.isWidgetUpdating = false;
1293                      } else {
1294                          // No change was made, so stop the spinner now instead of when the preview would updates.
1295                          self.container.removeClass( 'previewer-loading' );
1296                      }
1297  
1298                      if ( completeCallback ) {
1299                          completeCallback.call( self, null, { noChange: ! isChanged, ajaxFinished: true } );
1300                      }
1301                  } else {
1302                      // General error message.
1303                      message = l10n.error;
1304  
1305                      if ( r.data && r.data.message ) {
1306                          message = r.data.message;
1307                      }
1308  
1309                      if ( completeCallback ) {
1310                          completeCallback.call( self, message );
1311                      } else {
1312                          $widgetContent.prepend( '<p class="widget-error"><strong>' + message + '</strong></p>' );
1313                      }
1314                  }
1315              } );
1316  
1317              jqxhr.fail( function( jqXHR, textStatus ) {
1318                  if ( completeCallback ) {
1319                      completeCallback.call( self, textStatus );
1320                  }
1321              } );
1322  
1323              jqxhr.always( function() {
1324                  self.container.removeClass( 'widget-form-loading' );
1325  
1326                  $inputs.each( function() {
1327                      $( this ).removeData( 'state' + updateNumber );
1328                  } );
1329  
1330                  processing( processing() - 1 );
1331              } );
1332          },
1333  
1334          /**
1335           * Expand the accordion section containing a control
1336           */
1337          expandControlSection: function() {
1338              api.Control.prototype.expand.call( this );
1339          },
1340  
1341          /**
1342           * @since 4.1.0
1343           *
1344           * @param {Boolean} expanded
1345           * @param {Object} [params]
1346           * @return {Boolean} False if state already applied.
1347           */
1348          _toggleExpanded: api.Section.prototype._toggleExpanded,
1349  
1350          /**
1351           * @since 4.1.0
1352           *
1353           * @param {Object} [params]
1354           * @return {Boolean} False if already expanded.
1355           */
1356          expand: api.Section.prototype.expand,
1357  
1358          /**
1359           * Expand the widget form control
1360           *
1361           * @deprecated 4.1.0 Use this.expand() instead.
1362           */
1363          expandForm: function() {
1364              this.expand();
1365          },
1366  
1367          /**
1368           * @since 4.1.0
1369           *
1370           * @param {Object} [params]
1371           * @return {Boolean} False if already collapsed.
1372           */
1373          collapse: api.Section.prototype.collapse,
1374  
1375          /**
1376           * Collapse the widget form control
1377           *
1378           * @deprecated 4.1.0 Use this.collapse() instead.
1379           */
1380          collapseForm: function() {
1381              this.collapse();
1382          },
1383  
1384          /**
1385           * Expand or collapse the widget control
1386           *
1387           * @deprecated this is poor naming, and it is better to directly set control.expanded( showOrHide )
1388           *
1389           * @param {boolean|undefined} [showOrHide] If not supplied, will be inverse of current visibility
1390           */
1391          toggleForm: function( showOrHide ) {
1392              if ( typeof showOrHide === 'undefined' ) {
1393                  showOrHide = ! this.expanded();
1394              }
1395              this.expanded( showOrHide );
1396          },
1397  
1398          /**
1399           * Respond to change in the expanded state.
1400           *
1401           * @param {boolean} expanded
1402           * @param {Object} args  merged on top of this.defaultActiveArguments
1403           */
1404          onChangeExpanded: function ( expanded, args ) {
1405              var self = this, $widget, $inside, complete, prevComplete, expandControl, $toggleBtn;
1406  
1407              self.embedWidgetControl(); // Make sure the outer form is embedded so that the expanded state can be set in the UI.
1408              if ( expanded ) {
1409                  self.embedWidgetContent();
1410              }
1411  
1412              // If the expanded state is unchanged only manipulate container expanded states.
1413              if ( args.unchanged ) {
1414                  if ( expanded ) {
1415                      api.Control.prototype.expand.call( self, {
1416                          completeCallback:  args.completeCallback
1417                      });
1418                  }
1419                  return;
1420              }
1421  
1422              $widget = this.container.find( 'div.widget:first' );
1423              $inside = $widget.find( '.widget-inside:first' );
1424              $toggleBtn = this.container.find( '.widget-top button.widget-action' );
1425  
1426              expandControl = function() {
1427  
1428                  // Close all other widget controls before expanding this one.
1429                  api.control.each( function( otherControl ) {
1430                      if ( self.params.type === otherControl.params.type && self !== otherControl ) {
1431                          otherControl.collapse();
1432                      }
1433                  } );
1434  
1435                  complete = function() {
1436                      self.container.removeClass( 'expanding' );
1437                      self.container.addClass( 'expanded' );
1438                      $widget.addClass( 'open' );
1439                      $toggleBtn.attr( 'aria-expanded', 'true' );
1440                      self.container.trigger( 'expanded' );
1441                  };
1442                  if ( args.completeCallback ) {
1443                      prevComplete = complete;
1444                      complete = function () {
1445                          prevComplete();
1446                          args.completeCallback();
1447                      };
1448                  }
1449  
1450                  if ( self.params.is_wide ) {
1451                      $inside.fadeIn( args.duration, complete );
1452                  } else {
1453                      $inside.slideDown( args.duration, complete );
1454                  }
1455  
1456                  self.container.trigger( 'expand' );
1457                  self.container.addClass( 'expanding' );
1458              };
1459  
1460              if ( $toggleBtn.attr( 'aria-expanded' ) === 'false' ) {
1461                  if ( api.section.has( self.section() ) ) {
1462                      api.section( self.section() ).expand( {
1463                          completeCallback: expandControl
1464                      } );
1465                  } else {
1466                      expandControl();
1467                  }
1468              } else {
1469                  complete = function() {
1470                      self.container.removeClass( 'collapsing' );
1471                      self.container.removeClass( 'expanded' );
1472                      $widget.removeClass( 'open' );
1473                      $toggleBtn.attr( 'aria-expanded', 'false' );
1474                      self.container.trigger( 'collapsed' );
1475                  };
1476                  if ( args.completeCallback ) {
1477                      prevComplete = complete;
1478                      complete = function () {
1479                          prevComplete();
1480                          args.completeCallback();
1481                      };
1482                  }
1483  
1484                  self.container.trigger( 'collapse' );
1485                  self.container.addClass( 'collapsing' );
1486  
1487                  if ( self.params.is_wide ) {
1488                      $inside.fadeOut( args.duration, complete );
1489                  } else {
1490                      $inside.slideUp( args.duration, function() {
1491                          $widget.css( { width:'', margin:'' } );
1492                          complete();
1493                      } );
1494                  }
1495              }
1496          },
1497  
1498          /**
1499           * Get the position (index) of the widget in the containing sidebar
1500           *
1501           * @return {number}
1502           */
1503          getWidgetSidebarPosition: function() {
1504              var sidebarWidgetIds, position;
1505  
1506              sidebarWidgetIds = this.getSidebarWidgetsControl().setting();
1507              position = _.indexOf( sidebarWidgetIds, this.params.widget_id );
1508  
1509              if ( position === -1 ) {
1510                  return;
1511              }
1512  
1513              return position;
1514          },
1515  
1516          /**
1517           * Move widget up one in the sidebar
1518           */
1519          moveUp: function() {
1520              this._moveWidgetByOne( -1 );
1521          },
1522  
1523          /**
1524           * Move widget up one in the sidebar
1525           */
1526          moveDown: function() {
1527              this._moveWidgetByOne( 1 );
1528          },
1529  
1530          /**
1531           * @private
1532           *
1533           * @param {number} offset 1|-1
1534           */
1535          _moveWidgetByOne: function( offset ) {
1536              var i, sidebarWidgetsSetting, sidebarWidgetIds,    adjacentWidgetId;
1537  
1538              i = this.getWidgetSidebarPosition();
1539  
1540              sidebarWidgetsSetting = this.getSidebarWidgetsControl().setting;
1541              sidebarWidgetIds = Array.prototype.slice.call( sidebarWidgetsSetting() ); // Clone.
1542              adjacentWidgetId = sidebarWidgetIds[i + offset];
1543              sidebarWidgetIds[i + offset] = this.params.widget_id;
1544              sidebarWidgetIds[i] = adjacentWidgetId;
1545  
1546              sidebarWidgetsSetting( sidebarWidgetIds );
1547          },
1548  
1549          /**
1550           * Toggle visibility of the widget move area
1551           *
1552           * @param {boolean} [showOrHide]
1553           */
1554          toggleWidgetMoveArea: function( showOrHide ) {
1555              var self = this, $moveWidgetArea;
1556  
1557              $moveWidgetArea = this.container.find( '.move-widget-area' );
1558  
1559              if ( typeof showOrHide === 'undefined' ) {
1560                  showOrHide = ! $moveWidgetArea.hasClass( 'active' );
1561              }
1562  
1563              if ( showOrHide ) {
1564                  // Reset the selected sidebar.
1565                  $moveWidgetArea.find( '.selected' ).removeClass( 'selected' );
1566  
1567                  $moveWidgetArea.find( 'li' ).filter( function() {
1568                      return $( this ).data( 'id' ) === self.params.sidebar_id;
1569                  } ).addClass( 'selected' );
1570  
1571                  this.container.find( '.move-widget-btn' ).prop( 'disabled', true );
1572              }
1573  
1574              $moveWidgetArea.toggleClass( 'active', showOrHide );
1575          },
1576  
1577          /**
1578           * Highlight the widget control and section
1579           */
1580          highlightSectionAndControl: function() {
1581              var $target;
1582  
1583              if ( this.container.is( ':hidden' ) ) {
1584                  $target = this.container.closest( '.control-section' );
1585              } else {
1586                  $target = this.container;
1587              }
1588  
1589              $( '.highlighted' ).removeClass( 'highlighted' );
1590              $target.addClass( 'highlighted' );
1591  
1592              setTimeout( function() {
1593                  $target.removeClass( 'highlighted' );
1594              }, 500 );
1595          }
1596      } );
1597  
1598      /**
1599       * wp.customize.Widgets.WidgetsPanel
1600       *
1601       * Customizer panel containing the widget area sections.
1602       *
1603       * @since 4.4.0
1604       *
1605       * @class    wp.customize.Widgets.WidgetsPanel
1606       * @augments wp.customize.Panel
1607       */
1608      api.Widgets.WidgetsPanel = api.Panel.extend(/** @lends wp.customize.Widgets.WigetsPanel.prototype */{
1609  
1610          /**
1611           * Add and manage the display of the no-rendered-areas notice.
1612           *
1613           * @since 4.4.0
1614           */
1615          ready: function () {
1616              var panel = this;
1617  
1618              api.Panel.prototype.ready.call( panel );
1619  
1620              panel.deferred.embedded.done(function() {
1621                  var panelMetaContainer, noticeContainer, updateNotice, getActiveSectionCount, shouldShowNotice;
1622                  panelMetaContainer = panel.container.find( '.panel-meta' );
1623  
1624                  // @todo This should use the Notifications API introduced to panels. See <https://core.trac.wordpress.org/ticket/38794>.
1625                  noticeContainer = $( '<div></div>', {
1626                      'class': 'no-widget-areas-rendered-notice',
1627                      'role': 'alert'
1628                  });
1629                  panelMetaContainer.append( noticeContainer );
1630  
1631                  /**
1632                   * Get the number of active sections in the panel.
1633                   *
1634                   * @return {number} Number of active sidebar sections.
1635                   */
1636                  getActiveSectionCount = function() {
1637                      return _.filter( panel.sections(), function( section ) {
1638                          return 'sidebar' === section.params.type && section.active();
1639                      } ).length;
1640                  };
1641  
1642                  /**
1643                   * Determine whether or not the notice should be displayed.
1644                   *
1645                   * @return {boolean}
1646                   */
1647                  shouldShowNotice = function() {
1648                      var activeSectionCount = getActiveSectionCount();
1649                      if ( 0 === activeSectionCount ) {
1650                          return true;
1651                      } else {
1652                          return activeSectionCount !== api.Widgets.data.registeredSidebars.length;
1653                      }
1654                  };
1655  
1656                  /**
1657                   * Update the notice.
1658                   *
1659                   * @return {void}
1660                   */
1661                  updateNotice = function() {
1662                      var activeSectionCount = getActiveSectionCount(), someRenderedMessage, nonRenderedAreaCount, registeredAreaCount;
1663                      noticeContainer.empty();
1664  
1665                      registeredAreaCount = api.Widgets.data.registeredSidebars.length;
1666                      if ( activeSectionCount !== registeredAreaCount ) {
1667  
1668                          if ( 0 !== activeSectionCount ) {
1669                              nonRenderedAreaCount = registeredAreaCount - activeSectionCount;
1670                              someRenderedMessage = l10n.someAreasShown[ nonRenderedAreaCount ];
1671                          } else {
1672                              someRenderedMessage = l10n.noAreasShown;
1673                          }
1674                          if ( someRenderedMessage ) {
1675                              noticeContainer.append( $( '<p></p>', {
1676                                  text: someRenderedMessage
1677                              } ) );
1678                          }
1679  
1680                          noticeContainer.append( $( '<p></p>', {
1681                              text: l10n.navigatePreview
1682                          } ) );
1683                      }
1684                  };
1685                  updateNotice();
1686  
1687                  /*
1688                   * Set the initial visibility state for rendered notice.
1689                   * Update the visibility of the notice whenever a reflow happens.
1690                   */
1691                  noticeContainer.toggle( shouldShowNotice() );
1692                  api.previewer.deferred.active.done( function () {
1693                      noticeContainer.toggle( shouldShowNotice() );
1694                  });
1695                  api.bind( 'pane-contents-reflowed', function() {
1696                      var duration = ( 'resolved' === api.previewer.deferred.active.state() ) ? 'fast' : 0;
1697                      updateNotice();
1698                      if ( shouldShowNotice() ) {
1699                          noticeContainer.slideDown( duration );
1700                      } else {
1701                          noticeContainer.slideUp( duration );
1702                      }
1703                  });
1704              });
1705          },
1706  
1707          /**
1708           * Allow an active widgets panel to be contextually active even when it has no active sections (widget areas).
1709           *
1710           * This ensures that the widgets panel appears even when there are no
1711           * sidebars displayed on the URL currently being previewed.
1712           *
1713           * @since 4.4.0
1714           *
1715           * @return {boolean}
1716           */
1717          isContextuallyActive: function() {
1718              var panel = this;
1719              return panel.active();
1720          }
1721      });
1722  
1723      /**
1724       * wp.customize.Widgets.SidebarSection
1725       *
1726       * Customizer section representing a widget area widget
1727       *
1728       * @since 4.1.0
1729       *
1730       * @class    wp.customize.Widgets.SidebarSection
1731       * @augments wp.customize.Section
1732       */
1733      api.Widgets.SidebarSection = api.Section.extend(/** @lends wp.customize.Widgets.SidebarSection.prototype */{
1734  
1735          /**
1736           * Sync the section's active state back to the Backbone model's is_rendered attribute
1737           *
1738           * @since 4.1.0
1739           */
1740          ready: function () {
1741              var section = this, registeredSidebar;
1742              api.Section.prototype.ready.call( this );
1743              registeredSidebar = api.Widgets.registeredSidebars.get( section.params.sidebarId );
1744              section.active.bind( function ( active ) {
1745                  registeredSidebar.set( 'is_rendered', active );
1746              });
1747              registeredSidebar.set( 'is_rendered', section.active() );
1748          }
1749      });
1750  
1751      /**
1752       * wp.customize.Widgets.SidebarControl
1753       *
1754       * Customizer control for widgets.
1755       * Note that 'sidebar_widgets' must match the WP_Widget_Area_Customize_Control::$type
1756       *
1757       * @since 3.9.0
1758       *
1759       * @class    wp.customize.Widgets.SidebarControl
1760       * @augments wp.customize.Control
1761       */
1762      api.Widgets.SidebarControl = api.Control.extend(/** @lends wp.customize.Widgets.SidebarControl.prototype */{
1763  
1764          /**
1765           * Set up the control
1766           */
1767          ready: function() {
1768              this.$controlSection = this.container.closest( '.control-section' );
1769              this.$sectionContent = this.container.closest( '.accordion-section-content' );
1770  
1771              this._setupModel();
1772              this._setupSortable();
1773              this._setupAddition();
1774              this._applyCardinalOrderClassNames();
1775          },
1776  
1777          /**
1778           * Update ordering of widget control forms when the setting is updated
1779           */
1780          _setupModel: function() {
1781              var self = this;
1782  
1783              this.setting.bind( function( newWidgetIds, oldWidgetIds ) {
1784                  var widgetFormControls, removedWidgetIds, priority;
1785  
1786                  removedWidgetIds = _( oldWidgetIds ).difference( newWidgetIds );
1787  
1788                  // Filter out any persistent widget IDs for widgets which have been deactivated.
1789                  newWidgetIds = _( newWidgetIds ).filter( function( newWidgetId ) {
1790                      var parsedWidgetId = parseWidgetId( newWidgetId );
1791  
1792                      return !! api.Widgets.availableWidgets.findWhere( { id_base: parsedWidgetId.id_base } );
1793                  } );
1794  
1795                  widgetFormControls = _( newWidgetIds ).map( function( widgetId ) {
1796                      var widgetFormControl = api.Widgets.getWidgetFormControlForWidget( widgetId );
1797  
1798                      if ( ! widgetFormControl ) {
1799                          widgetFormControl = self.addWidget( widgetId );
1800                      }
1801  
1802                      return widgetFormControl;
1803                  } );
1804  
1805                  // Sort widget controls to their new positions.
1806                  widgetFormControls.sort( function( a, b ) {
1807                      var aIndex = _.indexOf( newWidgetIds, a.params.widget_id ),
1808                          bIndex = _.indexOf( newWidgetIds, b.params.widget_id );
1809                      return aIndex - bIndex;
1810                  });
1811  
1812                  priority = 0;
1813                  _( widgetFormControls ).each( function ( control ) {
1814                      control.priority( priority );
1815                      control.section( self.section() );
1816                      priority += 1;
1817                  });
1818                  self.priority( priority ); // Make sure sidebar control remains at end.
1819  
1820                  // Re-sort widget form controls (including widgets form other sidebars newly moved here).
1821                  self._applyCardinalOrderClassNames();
1822  
1823                  // If the widget was dragged into the sidebar, make sure the sidebar_id param is updated.
1824                  _( widgetFormControls ).each( function( widgetFormControl ) {
1825                      widgetFormControl.params.sidebar_id = self.params.sidebar_id;
1826                  } );
1827  
1828                  // Cleanup after widget removal.
1829                  _( removedWidgetIds ).each( function( removedWidgetId ) {
1830  
1831                      // Using setTimeout so that when moving a widget to another sidebar,
1832                      // the other sidebars_widgets settings get a chance to update.
1833                      setTimeout( function() {
1834                          var removedControl, wasDraggedToAnotherSidebar, inactiveWidgets, removedIdBase,
1835                              widget, isPresentInAnotherSidebar = false;
1836  
1837                          // Check if the widget is in another sidebar.
1838                          api.each( function( otherSetting ) {
1839                              if ( otherSetting.id === self.setting.id || 0 !== otherSetting.id.indexOf( 'sidebars_widgets[' ) || otherSetting.id === 'sidebars_widgets[wp_inactive_widgets]' ) {
1840                                  return;
1841                              }
1842  
1843                              var otherSidebarWidgets = otherSetting(), i;
1844  
1845                              i = _.indexOf( otherSidebarWidgets, removedWidgetId );
1846                              if ( -1 !== i ) {
1847                                  isPresentInAnotherSidebar = true;
1848                              }
1849                          } );
1850  
1851                          // If the widget is present in another sidebar, abort!
1852                          if ( isPresentInAnotherSidebar ) {
1853                              return;
1854                          }
1855  
1856                          removedControl = api.Widgets.getWidgetFormControlForWidget( removedWidgetId );
1857  
1858                          // Detect if widget control was dragged to another sidebar.
1859                          wasDraggedToAnotherSidebar = removedControl && $.contains( document, removedControl.container[0] ) && ! $.contains( self.$sectionContent[0], removedControl.container[0] );
1860  
1861                          // Delete any widget form controls for removed widgets.
1862                          if ( removedControl && ! wasDraggedToAnotherSidebar ) {
1863                              api.control.remove( removedControl.id );
1864                              removedControl.container.remove();
1865                          }
1866  
1867                          // Move widget to inactive widgets sidebar (move it to Trash) if has been previously saved.
1868                          // This prevents the inactive widgets sidebar from overflowing with throwaway widgets.
1869                          if ( api.Widgets.savedWidgetIds[removedWidgetId] ) {
1870                              inactiveWidgets = api.value( 'sidebars_widgets[wp_inactive_widgets]' )().slice();
1871                              inactiveWidgets.push( removedWidgetId );
1872                              api.value( 'sidebars_widgets[wp_inactive_widgets]' )( _( inactiveWidgets ).unique() );
1873                          }
1874  
1875                          // Make old single widget available for adding again.
1876                          removedIdBase = parseWidgetId( removedWidgetId ).id_base;
1877                          widget = api.Widgets.availableWidgets.findWhere( { id_base: removedIdBase } );
1878                          if ( widget && ! widget.get( 'is_multi' ) ) {
1879                              widget.set( 'is_disabled', false );
1880                          }
1881                      } );
1882  
1883                  } );
1884              } );
1885          },
1886  
1887          /**
1888           * Allow widgets in sidebar to be re-ordered, and for the order to be previewed
1889           */
1890          _setupSortable: function() {
1891              var self = this;
1892  
1893              this.isReordering = false;
1894  
1895              /**
1896               * Update widget order setting when controls are re-ordered
1897               */
1898              this.$sectionContent.sortable( {
1899                  items: '> .customize-control-widget_form',
1900                  handle: '.widget-top',
1901                  axis: 'y',
1902                  tolerance: 'pointer',
1903                  connectWith: '.accordion-section-content:has(.customize-control-sidebar_widgets)',
1904                  update: function() {
1905                      var widgetContainerIds = self.$sectionContent.sortable( 'toArray' ), widgetIds;
1906  
1907                      widgetIds = $.map( widgetContainerIds, function( widgetContainerId ) {
1908                          return $( '#' + widgetContainerId ).find( ':input[name=widget-id]' ).val();
1909                      } );
1910  
1911                      self.setting( widgetIds );
1912                  }
1913              } );
1914  
1915              /**
1916               * Expand other Customizer sidebar section when dragging a control widget over it,
1917               * allowing the control to be dropped into another section
1918               */
1919              this.$controlSection.find( '.accordion-section-title' ).droppable({
1920                  accept: '.customize-control-widget_form',
1921                  over: function() {
1922                      var section = api.section( self.section.get() );
1923                      section.expand({
1924                          allowMultiple: true, // Prevent the section being dragged from to be collapsed.
1925                          completeCallback: function () {
1926                              // @todo It is not clear when refreshPositions should be called on which sections, or if it is even needed.
1927                              api.section.each( function ( otherSection ) {
1928                                  if ( otherSection.container.find( '.customize-control-sidebar_widgets' ).length ) {
1929                                      otherSection.container.find( '.accordion-section-content:first' ).sortable( 'refreshPositions' );
1930                                  }
1931                              } );
1932                          }
1933                      });
1934                  }
1935              });
1936  
1937              /**
1938               * Keyboard-accessible reordering
1939               */
1940              this.container.find( '.reorder-toggle' ).on( 'click', function() {
1941                  self.toggleReordering( ! self.isReordering );
1942              } );
1943          },
1944  
1945          /**
1946           * Set up UI for adding a new widget
1947           */
1948          _setupAddition: function() {
1949              var self = this;
1950  
1951              this.container.find( '.add-new-widget' ).on( 'click', function() {
1952                  var addNewWidgetBtn = $( this );
1953  
1954                  if ( self.$sectionContent.hasClass( 'reordering' ) ) {
1955                      return;
1956                  }
1957  
1958                  if ( ! $( 'body' ).hasClass( 'adding-widget' ) ) {
1959                      addNewWidgetBtn.attr( 'aria-expanded', 'true' );
1960                      api.Widgets.availableWidgetsPanel.open( self );
1961                  } else {
1962                      addNewWidgetBtn.attr( 'aria-expanded', 'false' );
1963                      api.Widgets.availableWidgetsPanel.close();
1964                  }
1965              } );
1966          },
1967  
1968          /**
1969           * Add classes to the widget_form controls to assist with styling
1970           */
1971          _applyCardinalOrderClassNames: function() {
1972              var widgetControls = [];
1973              _.each( this.setting(), function ( widgetId ) {
1974                  var widgetControl = api.Widgets.getWidgetFormControlForWidget( widgetId );
1975                  if ( widgetControl ) {
1976                      widgetControls.push( widgetControl );
1977                  }
1978              });
1979  
1980              if ( 0 === widgetControls.length || ( 1 === api.Widgets.registeredSidebars.length && widgetControls.length <= 1 ) ) {
1981                  this.container.find( '.reorder-toggle' ).hide();
1982                  return;
1983              } else {
1984                  this.container.find( '.reorder-toggle' ).show();
1985              }
1986  
1987              $( widgetControls ).each( function () {
1988                  $( this.container )
1989                      .removeClass( 'first-widget' )
1990                      .removeClass( 'last-widget' )
1991                      .find( '.move-widget-down, .move-widget-up' ).prop( 'tabIndex', 0 );
1992              });
1993  
1994              _.first( widgetControls ).container
1995                  .addClass( 'first-widget' )
1996                  .find( '.move-widget-up' ).prop( 'tabIndex', -1 );
1997  
1998              _.last( widgetControls ).container
1999                  .addClass( 'last-widget' )
2000                  .find( '.move-widget-down' ).prop( 'tabIndex', -1 );
2001          },
2002  
2003  
2004          /***********************************************************************
2005           * Begin public API methods
2006           **********************************************************************/
2007  
2008          /**
2009           * Enable/disable the reordering UI
2010           *
2011           * @param {boolean} showOrHide to enable/disable reordering
2012           *
2013           * @todo We should have a reordering state instead and rename this to onChangeReordering
2014           */
2015          toggleReordering: function( showOrHide ) {
2016              var addNewWidgetBtn = this.$sectionContent.find( '.add-new-widget' ),
2017                  reorderBtn = this.container.find( '.reorder-toggle' ),
2018                  widgetsTitle = this.$sectionContent.find( '.widget-title' );
2019  
2020              showOrHide = Boolean( showOrHide );
2021  
2022              if ( showOrHide === this.$sectionContent.hasClass( 'reordering' ) ) {
2023                  return;
2024              }
2025  
2026              this.isReordering = showOrHide;
2027              this.$sectionContent.toggleClass( 'reordering', showOrHide );
2028  
2029              if ( showOrHide ) {
2030                  _( this.getWidgetFormControls() ).each( function( formControl ) {
2031                      formControl.collapse();
2032                  } );
2033  
2034                  addNewWidgetBtn.attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
2035                  reorderBtn.attr( 'aria-label', l10n.reorderLabelOff );
2036                  wp.a11y.speak( l10n.reorderModeOn );
2037                  // Hide widget titles while reordering: title is already in the reorder controls.
2038                  widgetsTitle.attr( 'aria-hidden', 'true' );
2039              } else {
2040                  addNewWidgetBtn.removeAttr( 'tabindex aria-hidden' );
2041                  reorderBtn.attr( 'aria-label', l10n.reorderLabelOn );
2042                  wp.a11y.speak( l10n.reorderModeOff );
2043                  widgetsTitle.attr( 'aria-hidden', 'false' );
2044              }
2045          },
2046  
2047          /**
2048           * Get the widget_form Customize controls associated with the current sidebar.
2049           *
2050           * @since 3.9.0
2051           * @return {wp.customize.controlConstructor.widget_form[]}
2052           */
2053          getWidgetFormControls: function() {
2054              var formControls = [];
2055  
2056              _( this.setting() ).each( function( widgetId ) {
2057                  var settingId = widgetIdToSettingId( widgetId ),
2058                      formControl = api.control( settingId );
2059                  if ( formControl ) {
2060                      formControls.push( formControl );
2061                  }
2062              } );
2063  
2064              return formControls;
2065          },
2066  
2067          /**
2068           * @param {string} widgetId or an id_base for adding a previously non-existing widget.
2069           * @return {Object|false} widget_form control instance, or false on error.
2070           */
2071          addWidget: function( widgetId ) {
2072              var self = this, controlHtml, $widget, controlType = 'widget_form', controlContainer, controlConstructor,
2073                  parsedWidgetId = parseWidgetId( widgetId ),
2074                  widgetNumber = parsedWidgetId.number,
2075                  widgetIdBase = parsedWidgetId.id_base,
2076                  widget = api.Widgets.availableWidgets.findWhere( {id_base: widgetIdBase} ),
2077                  settingId, isExistingWidget, widgetFormControl, sidebarWidgets, settingArgs, setting;
2078  
2079              if ( ! widget ) {
2080                  return false;
2081              }
2082  
2083              if ( widgetNumber && ! widget.get( 'is_multi' ) ) {
2084                  return false;
2085              }
2086  
2087              // Set up new multi widget.
2088              if ( widget.get( 'is_multi' ) && ! widgetNumber ) {
2089                  widget.set( 'multi_number', widget.get( 'multi_number' ) + 1 );
2090                  widgetNumber = widget.get( 'multi_number' );
2091              }
2092  
2093              controlHtml = $( '#widget-tpl-' + widget.get( 'id' ) ).html().trim();
2094              if ( widget.get( 'is_multi' ) ) {
2095                  controlHtml = controlHtml.replace( /<[^<>]+>/g, function( m ) {
2096                      return m.replace( /__i__|%i%/g, widgetNumber );
2097                  } );
2098              } else {
2099                  widget.set( 'is_disabled', true ); // Prevent single widget from being added again now.
2100              }
2101  
2102              $widget = $( controlHtml );
2103  
2104              controlContainer = $( '<li/>' )
2105                  .addClass( 'customize-control' )
2106                  .addClass( 'customize-control-' + controlType )
2107                  .append( $widget );
2108  
2109              // Remove icon which is visible inside the panel.
2110              controlContainer.find( '> .widget-icon' ).remove();
2111  
2112              if ( widget.get( 'is_multi' ) ) {
2113                  controlContainer.find( 'input[name="widget_number"]' ).val( widgetNumber );
2114                  controlContainer.find( 'input[name="multi_number"]' ).val( widgetNumber );
2115              }
2116  
2117              widgetId = controlContainer.find( '[name="widget-id"]' ).val();
2118  
2119              controlContainer.hide(); // To be slid-down below.
2120  
2121              settingId = 'widget_' + widget.get( 'id_base' );
2122              if ( widget.get( 'is_multi' ) ) {
2123                  settingId += '[' + widgetNumber + ']';
2124              }
2125              controlContainer.attr( 'id', 'customize-control-' + settingId.replace( /\]/g, '' ).replace( /\[/g, '-' ) );
2126  
2127              // Only create setting if it doesn't already exist (if we're adding a pre-existing inactive widget).
2128              isExistingWidget = api.has( settingId );
2129              if ( ! isExistingWidget ) {
2130                  settingArgs = {
2131                      transport: api.Widgets.data.selectiveRefreshableWidgets[ widget.get( 'id_base' ) ] ? 'postMessage' : 'refresh',
2132                      previewer: this.setting.previewer
2133                  };
2134                  setting = api.create( settingId, settingId, '', settingArgs );
2135                  setting.set( {} ); // Mark dirty, changing from '' to {}.
2136              }
2137  
2138              controlConstructor = api.controlConstructor[controlType];
2139              widgetFormControl = new controlConstructor( settingId, {
2140                  settings: {
2141                      'default': settingId
2142                  },
2143                  content: controlContainer,
2144                  sidebar_id: self.params.sidebar_id,
2145                  widget_id: widgetId,
2146                  widget_id_base: widget.get( 'id_base' ),
2147                  type: controlType,
2148                  is_new: ! isExistingWidget,
2149                  width: widget.get( 'width' ),
2150                  height: widget.get( 'height' ),
2151                  is_wide: widget.get( 'is_wide' )
2152              } );
2153              api.control.add( widgetFormControl );
2154  
2155              // Make sure widget is removed from the other sidebars.
2156              api.each( function( otherSetting ) {
2157                  if ( otherSetting.id === self.setting.id ) {
2158                      return;
2159                  }
2160  
2161                  if ( 0 !== otherSetting.id.indexOf( 'sidebars_widgets[' ) ) {
2162                      return;
2163                  }
2164  
2165                  var otherSidebarWidgets = otherSetting().slice(),
2166                      i = _.indexOf( otherSidebarWidgets, widgetId );
2167  
2168                  if ( -1 !== i ) {
2169                      otherSidebarWidgets.splice( i );
2170                      otherSetting( otherSidebarWidgets );
2171                  }
2172              } );
2173  
2174              // Add widget to this sidebar.
2175              sidebarWidgets = this.setting().slice();
2176              if ( -1 === _.indexOf( sidebarWidgets, widgetId ) ) {
2177                  sidebarWidgets.push( widgetId );
2178                  this.setting( sidebarWidgets );
2179              }
2180  
2181              controlContainer.slideDown( function() {
2182                  if ( isExistingWidget ) {
2183                      widgetFormControl.updateWidget( {
2184                          instance: widgetFormControl.setting()
2185                      } );
2186                  }
2187              } );
2188  
2189              return widgetFormControl;
2190          }
2191      } );
2192  
2193      // Register models for custom panel, section, and control types.
2194      $.extend( api.panelConstructor, {
2195          widgets: api.Widgets.WidgetsPanel
2196      });
2197      $.extend( api.sectionConstructor, {
2198          sidebar: api.Widgets.SidebarSection
2199      });
2200      $.extend( api.controlConstructor, {
2201          widget_form: api.Widgets.WidgetControl,
2202          sidebar_widgets: api.Widgets.SidebarControl
2203      });
2204  
2205      /**
2206       * Init Customizer for widgets.
2207       */
2208      api.bind( 'ready', function() {
2209          // Set up the widgets panel.
2210          api.Widgets.availableWidgetsPanel = new api.Widgets.AvailableWidgetsPanelView({
2211              collection: api.Widgets.availableWidgets
2212          });
2213  
2214          // Highlight widget control.
2215          api.previewer.bind( 'highlight-widget-control', api.Widgets.highlightWidgetFormControl );
2216  
2217          // Open and focus widget control.
2218          api.previewer.bind( 'focus-widget-control', api.Widgets.focusWidgetFormControl );
2219      } );
2220  
2221      /**
2222       * Highlight a widget control.
2223       *
2224       * @param {string} widgetId
2225       */
2226      api.Widgets.highlightWidgetFormControl = function( widgetId ) {
2227          var control = api.Widgets.getWidgetFormControlForWidget( widgetId );
2228  
2229          if ( control ) {
2230              control.highlightSectionAndControl();
2231          }
2232      },
2233  
2234      /**
2235       * Focus a widget control.
2236       *
2237       * @param {string} widgetId
2238       */
2239      api.Widgets.focusWidgetFormControl = function( widgetId ) {
2240          var control = api.Widgets.getWidgetFormControlForWidget( widgetId );
2241  
2242          if ( control ) {
2243              control.focus();
2244          }
2245      },
2246  
2247      /**
2248       * Given a widget control, find the sidebar widgets control that contains it.
2249       * @param {string} widgetId
2250       * @return {Object|null}
2251       */
2252      api.Widgets.getSidebarWidgetControlContainingWidget = function( widgetId ) {
2253          var foundControl = null;
2254  
2255          // @todo This can use widgetIdToSettingId(), then pass into wp.customize.control( x ).getSidebarWidgetsControl().
2256          api.control.each( function( control ) {
2257              if ( control.params.type === 'sidebar_widgets' && -1 !== _.indexOf( control.setting(), widgetId ) ) {
2258                  foundControl = control;
2259              }
2260          } );
2261  
2262          return foundControl;
2263      };
2264  
2265      /**
2266       * Given a widget ID for a widget appearing in the preview, get the widget form control associated with it.
2267       *
2268       * @param {string} widgetId
2269       * @return {Object|null}
2270       */
2271      api.Widgets.getWidgetFormControlForWidget = function( widgetId ) {
2272          var foundControl = null;
2273  
2274          // @todo We can just use widgetIdToSettingId() here.
2275          api.control.each( function( control ) {
2276              if ( control.params.type === 'widget_form' && control.params.widget_id === widgetId ) {
2277                  foundControl = control;
2278              }
2279          } );
2280  
2281          return foundControl;
2282      };
2283  
2284      /**
2285       * Initialize Edit Menu button in Nav Menu widget.
2286       */
2287      $( document ).on( 'widget-added', function( event, widgetContainer ) {
2288          var parsedWidgetId, widgetControl, navMenuSelect, editMenuButton;
2289          parsedWidgetId = parseWidgetId( widgetContainer.find( '> .widget-inside > .form > .widget-id' ).val() );
2290          if ( 'nav_menu' !== parsedWidgetId.id_base ) {
2291              return;
2292          }
2293          widgetControl = api.control( 'widget_nav_menu[' + String( parsedWidgetId.number ) + ']' );
2294          if ( ! widgetControl ) {
2295              return;
2296          }
2297          navMenuSelect = widgetContainer.find( 'select[name*="nav_menu"]' );
2298          editMenuButton = widgetContainer.find( '.edit-selected-nav-menu > button' );
2299          if ( 0 === navMenuSelect.length || 0 === editMenuButton.length ) {
2300              return;
2301          }
2302          navMenuSelect.on( 'change', function() {
2303              if ( api.section.has( 'nav_menu[' + navMenuSelect.val() + ']' ) ) {
2304                  editMenuButton.parent().show();
2305              } else {
2306                  editMenuButton.parent().hide();
2307              }
2308          });
2309          editMenuButton.on( 'click', function() {
2310              var section = api.section( 'nav_menu[' + navMenuSelect.val() + ']' );
2311              if ( section ) {
2312                  focusConstructWithBreadcrumb( section, widgetControl );
2313              }
2314          } );
2315      } );
2316  
2317      /**
2318       * Focus (expand) one construct and then focus on another construct after the first is collapsed.
2319       *
2320       * This overrides the back button to serve the purpose of breadcrumb navigation.
2321       *
2322       * @param {wp.customize.Section|wp.customize.Panel|wp.customize.Control} focusConstruct - The object to initially focus.
2323       * @param {wp.customize.Section|wp.customize.Panel|wp.customize.Control} returnConstruct - The object to return focus.
2324       */
2325  	function focusConstructWithBreadcrumb( focusConstruct, returnConstruct ) {
2326          focusConstruct.focus();
2327  		function onceCollapsed( isExpanded ) {
2328              if ( ! isExpanded ) {
2329                  focusConstruct.expanded.unbind( onceCollapsed );
2330                  returnConstruct.focus();
2331              }
2332          }
2333          focusConstruct.expanded.bind( onceCollapsed );
2334      }
2335  
2336      /**
2337       * @param {string} widgetId
2338       * @return {Object}
2339       */
2340  	function parseWidgetId( widgetId ) {
2341          var matches, parsed = {
2342              number: null,
2343              id_base: null
2344          };
2345  
2346          matches = widgetId.match( /^(.+)-(\d+)$/ );
2347          if ( matches ) {
2348              parsed.id_base = matches[1];
2349              parsed.number = parseInt( matches[2], 10 );
2350          } else {
2351              // Likely an old single widget.
2352              parsed.id_base = widgetId;
2353          }
2354  
2355          return parsed;
2356      }
2357  
2358      /**
2359       * @param {string} widgetId
2360       * @return {string} settingId
2361       */
2362  	function widgetIdToSettingId( widgetId ) {
2363          var parsed = parseWidgetId( widgetId ), settingId;
2364  
2365          settingId = 'widget_' + parsed.id_base;
2366          if ( parsed.number ) {
2367              settingId += '[' + parsed.number + ']';
2368          }
2369  
2370          return settingId;
2371      }
2372  
2373  })( window.wp, jQuery );