1 /* global _wpCustomizeWidgetsSettings */

     2 (function( wp, $ ){

     3 

     4 	if ( ! wp || ! wp.customize ) { return; }

     5 

     6 	// Set up our namespace...

     7 	var api = wp.customize,

     8 		l10n;

     9 

    10 	api.Widgets = api.Widgets || {};

    11 

    12 	// Link settings

    13 	api.Widgets.data = _wpCustomizeWidgetsSettings || {};

    14 	l10n = api.Widgets.data.l10n;

    15 	delete api.Widgets.data.l10n;

    16 

    17 	/**

    18 	 * wp.customize.Widgets.WidgetModel

    19 	 *

    20 	 * A single widget model.

    21 	 *

    22 	 * @constructor

    23 	 * @augments Backbone.Model

    24 	 */

    25 	api.Widgets.WidgetModel = Backbone.Model.extend({

    26 		id: null,

    27 		temp_id: null,

    28 		classname: null,

    29 		control_tpl: null,

    30 		description: null,

    31 		is_disabled: null,

    32 		is_multi: null,

    33 		multi_number: null,

    34 		name: null,

    35 		id_base: null,

    36 		transport: 'refresh',

    37 		params: [],

    38 		width: null,

    39 		height: null,

    40 		search_matched: true

    41 	});

    42 

    43 	/**

    44 	 * wp.customize.Widgets.WidgetCollection

    45 	 *

    46 	 * Collection for widget models.

    47 	 *

    48 	 * @constructor

    49 	 * @augments Backbone.Model

    50 	 */

    51 	api.Widgets.WidgetCollection = Backbone.Collection.extend({

    52 		model: api.Widgets.WidgetModel,

    53 

    54 		// Controls searching on the current widget collection

    55 		// and triggers an update event

    56 		doSearch: function( value ) {

    57 

    58 			// Don't do anything if we've already done this search

    59 			// Useful because the search handler fires multiple times per keystroke

    60 			if ( this.terms === value ) {

    61 				return;

    62 			}

    63 

    64 			// Updates terms with the value passed

    65 			this.terms = value;

    66 

    67 			// If we have terms, run a search...

    68 			if ( this.terms.length > 0 ) {

    69 				this.search( this.terms );

    70 			}

    71 

    72 			// If search is blank, show all themes

    73 			// Useful for resetting the views when you clean the input

    74 			if ( this.terms === '' ) {

    75 				this.each( function ( widget ) {

    76 					widget.set( 'search_matched', true );

    77 				} );

    78 			}

    79 		},

    80 

    81 		// Performs a search within the collection

    82 		// @uses RegExp

    83 		search: function( term ) {

    84 			var match, haystack;

    85 

    86 			// Escape the term string for RegExp meta characters

    87 			term = term.replace( /[-\/\\^$*+?.()|[\]{}]/g, '\\$&' );

    88 

    89 			// Consider spaces as word delimiters and match the whole string

    90 			// so matching terms can be combined

    91 			term = term.replace( / /g, ')(?=.*' );

    92 			match = new RegExp( '^(?=.*' + term + ').+', 'i' );

    93 

    94 			this.each( function ( data ) {

    95 				haystack = [ data.get( 'name' ), data.get( 'id' ), data.get( 'description' ) ].join( ' ' );

    96 				data.set( 'search_matched', match.test( haystack ) );

    97 			} );

    98 		}

    99 	});

   100 	api.Widgets.availableWidgets = new api.Widgets.WidgetCollection( api.Widgets.data.availableWidgets );

   101 

   102 	/**

   103 	 * wp.customize.Widgets.SidebarModel

   104 	 *

   105 	 * A single sidebar model.

   106 	 *

   107 	 * @constructor

   108 	 * @augments Backbone.Model

   109 	 */

   110 	api.Widgets.SidebarModel = Backbone.Model.extend({

   111 		after_title: null,

   112 		after_widget: null,

   113 		before_title: null,

   114 		before_widget: null,

   115 		'class': null,

   116 		description: null,

   117 		id: null,

   118 		name: null,

   119 		is_rendered: false

   120 	});

   121 

   122 	/**

   123 	 * wp.customize.Widgets.SidebarCollection

   124 	 *

   125 	 * Collection for sidebar models.

   126 	 *

   127 	 * @constructor

   128 	 * @augments Backbone.Collection

   129 	 */

   130 	api.Widgets.SidebarCollection = Backbone.Collection.extend({

   131 		model: api.Widgets.SidebarModel

   132 	});

   133 	api.Widgets.registeredSidebars = new api.Widgets.SidebarCollection( api.Widgets.data.registeredSidebars );

   134 

   135 	/**

   136 	 * wp.customize.Widgets.AvailableWidgetsPanelView

   137 	 *

   138 	 * View class for the available widgets panel.

   139 	 *

   140 	 * @constructor

   141 	 * @augments wp.Backbone.View

   142 	 * @augments Backbone.View

   143 	 */

   144 	api.Widgets.AvailableWidgetsPanelView = wp.Backbone.View.extend({

   145 

   146 		el: '#available-widgets',

   147 

   148 		events: {

   149 			'input #widgets-search': 'search',

   150 			'keyup #widgets-search': 'search',

   151 			'change #widgets-search': 'search',

   152 			'search #widgets-search': 'search',

   153 			'focus .widget-tpl' : 'focus',

   154 			'click .widget-tpl' : '_submit',

   155 			'keypress .widget-tpl' : '_submit',

   156 			'keydown' : 'keyboardAccessible'

   157 		},

   158 

   159 		// Cache current selected widget

   160 		selected: null,

   161 

   162 		// Cache sidebar control which has opened panel

   163 		currentSidebarControl: null,

   164 		$search: null,

   165 

   166 		initialize: function() {

   167 			var self = this;

   168 

   169 			this.$search = $( '#widgets-search' );

   170 

   171 			_.bindAll( this, 'close' );

   172 

   173 			this.listenTo( this.collection, 'change', this.updateList );

   174 

   175 			this.updateList();

   176 

   177 			// If the available widgets panel is open and the customize controls are

   178 			// interacted with (i.e. available widgets panel is blurred) then close the

   179 			// available widgets panel.

   180 			$( '#customize-controls, .customize-overlay-close' ).on( 'click keydown', function( e ) {

   181 				var isAddNewBtn = $( e.target ).is( '.add-new-widget, .add-new-widget *' );

   182 				if ( $( 'body' ).hasClass( 'adding-widget' ) && ! isAddNewBtn ) {

   183 					self.close();

   184 				}

   185 			} );

   186 

   187 			// Close the panel if the URL in the preview changes

   188 			api.previewer.bind( 'url', this.close );

   189 		},

   190 

   191 		// Performs a search and handles selected widget

   192 		search: function( event ) {

   193 			var firstVisible;

   194 

   195 			this.collection.doSearch( event.target.value );

   196 

   197 			// Remove a widget from being selected if it is no longer visible

   198 			if ( this.selected && ! this.selected.is( ':visible' ) ) {

   199 				this.selected.removeClass( 'selected' );

   200 				this.selected = null;

   201 			}

   202 

   203 			// If a widget was selected but the filter value has been cleared out, clear selection

   204 			if ( this.selected && ! event.target.value ) {

   205 				this.selected.removeClass( 'selected' );

   206 				this.selected = null;

   207 			}

   208 

   209 			// If a filter has been entered and a widget hasn't been selected, select the first one shown

   210 			if ( ! this.selected && event.target.value ) {

   211 				firstVisible = this.$el.find( '> .widget-tpl:visible:first' );

   212 				if ( firstVisible.length ) {

   213 					this.select( firstVisible );

   214 				}

   215 			}

   216 		},

   217 

   218 		// Changes visibility of available widgets

   219 		updateList: function() {

   220 			this.collection.each( function( widget ) {

   221 				var widgetTpl = $( '#widget-tpl-' + widget.id );

   222 				widgetTpl.toggle( widget.get( 'search_matched' ) && ! widget.get( 'is_disabled' ) );

   223 				if ( widget.get( 'is_disabled' ) && widgetTpl.is( this.selected ) ) {

   224 					this.selected = null;

   225 				}

   226 			} );

   227 		},

   228 

   229 		// Highlights a widget

   230 		select: function( widgetTpl ) {

   231 			this.selected = $( widgetTpl );

   232 			this.selected.siblings( '.widget-tpl' ).removeClass( 'selected' );

   233 			this.selected.addClass( 'selected' );

   234 		},

   235 

   236 		// Highlights a widget on focus

   237 		focus: function( event ) {

   238 			this.select( $( event.currentTarget ) );

   239 		},

   240 

   241 		// Submit handler for keypress and click on widget

   242 		_submit: function( event ) {

   243 			// Only proceed with keypress if it is Enter or Spacebar

   244 			if ( event.type === 'keypress' && ( event.which !== 13 && event.which !== 32 ) ) {

   245 				return;

   246 			}

   247 

   248 			this.submit( $( event.currentTarget ) );

   249 		},

   250 

   251 		// Adds a selected widget to the sidebar

   252 		submit: function( widgetTpl ) {

   253 			var widgetId, widget, widgetFormControl;

   254 

   255 			if ( ! widgetTpl ) {

   256 				widgetTpl = this.selected;

   257 			}

   258 

   259 			if ( ! widgetTpl || ! this.currentSidebarControl ) {

   260 				return;

   261 			}

   262 

   263 			this.select( widgetTpl );

   264 

   265 			widgetId = $( this.selected ).data( 'widget-id' );

   266 			widget = this.collection.findWhere( { id: widgetId } );

   267 			if ( ! widget ) {

   268 				return;

   269 			}

   270 

   271 			widgetFormControl = this.currentSidebarControl.addWidget( widget.get( 'id_base' ) );

   272 			if ( widgetFormControl ) {

   273 				widgetFormControl.focus();

   274 			}

   275 

   276 			this.close();

   277 		},

   278 

   279 		// Opens the panel

   280 		open: function( sidebarControl ) {

   281 			this.currentSidebarControl = sidebarControl;

   282 

   283 			// Wide widget controls appear over the preview, and so they need to be collapsed when the panel opens

   284 			_( this.currentSidebarControl.getWidgetFormControls() ).each( function( control ) {

   285 				if ( control.params.is_wide ) {

   286 					control.collapseForm();

   287 				}

   288 			} );

   289 

   290 			$( 'body' ).addClass( 'adding-widget' );

   291 

   292 			this.$el.find( '.selected' ).removeClass( 'selected' );

   293 

   294 			// Reset search

   295 			this.collection.doSearch( '' );

   296 

   297 			if ( ! api.settings.browser.mobile ) {

   298 				this.$search.focus();

   299 			}

   300 		},

   301 

   302 		// Closes the panel

   303 		close: function( options ) {

   304 			options = options || {};

   305 

   306 			if ( options.returnFocus && this.currentSidebarControl ) {

   307 				this.currentSidebarControl.container.find( '.add-new-widget' ).focus();

   308 			}

   309 

   310 			this.currentSidebarControl = null;

   311 			this.selected = null;

   312 

   313 			$( 'body' ).removeClass( 'adding-widget' );

   314 

   315 			this.$search.val( '' );

   316 		},

   317 

   318 		// Add keyboard accessiblity to the panel

   319 		keyboardAccessible: function( event ) {

   320 			var isEnter = ( event.which === 13 ),

   321 				isEsc = ( event.which === 27 ),

   322 				isDown = ( event.which === 40 ),

   323 				isUp = ( event.which === 38 ),

   324 				isTab = ( event.which === 9 ),

   325 				isShift = ( event.shiftKey ),

   326 				selected = null,

   327 				firstVisible = this.$el.find( '> .widget-tpl:visible:first' ),

   328 				lastVisible = this.$el.find( '> .widget-tpl:visible:last' ),

   329 				isSearchFocused = $( event.target ).is( this.$search ),

   330 				isLastWidgetFocused = $( event.target ).is( '.widget-tpl:visible:last' );

   331 

   332 			if ( isDown || isUp ) {

   333 				if ( isDown ) {

   334 					if ( isSearchFocused ) {

   335 						selected = firstVisible;

   336 					} else if ( this.selected && this.selected.nextAll( '.widget-tpl:visible' ).length !== 0 ) {

   337 						selected = this.selected.nextAll( '.widget-tpl:visible:first' );

   338 					}

   339 				} else if ( isUp ) {

   340 					if ( isSearchFocused ) {

   341 						selected = lastVisible;

   342 					} else if ( this.selected && this.selected.prevAll( '.widget-tpl:visible' ).length !== 0 ) {

   343 						selected = this.selected.prevAll( '.widget-tpl:visible:first' );

   344 					}

   345 				}

   346 

   347 				this.select( selected );

   348 

   349 				if ( selected ) {

   350 					selected.focus();

   351 				} else {

   352 					this.$search.focus();

   353 				}

   354 

   355 				return;

   356 			}

   357 

   358 			// If enter pressed but nothing entered, don't do anything

   359 			if ( isEnter && ! this.$search.val() ) {

   360 				return;

   361 			}

   362 

   363 			if ( isEnter ) {

   364 				this.submit();

   365 			} else if ( isEsc ) {

   366 				this.close( { returnFocus: true } );

   367 			}

   368 

   369 			if ( isTab && ( isShift && isSearchFocused || ! isShift && isLastWidgetFocused ) ) {

   370 				this.currentSidebarControl.container.find( '.add-new-widget' ).focus();

   371 				event.preventDefault();

   372 			}

   373 		}

   374 	});

   375 

   376 	/**

   377 	 * Handlers for the widget-synced event, organized by widget ID base.

   378 	 * Other widgets may provide their own update handlers by adding

   379 	 * listeners for the widget-synced event.

   380 	 */

   381 	api.Widgets.formSyncHandlers = {

   382 

   383 		/**

   384 		 * @param {jQuery.Event} e

   385 		 * @param {jQuery} widget

   386 		 * @param {String} newForm

   387 		 */

   388 		rss: function( e, widget, newForm ) {

   389 			var oldWidgetError = widget.find( '.widget-error:first' ),

   390 				newWidgetError = $( '<div>' + newForm + '</div>' ).find( '.widget-error:first' );

   391 

   392 			if ( oldWidgetError.length && newWidgetError.length ) {

   393 				oldWidgetError.replaceWith( newWidgetError );

   394 			} else if ( oldWidgetError.length ) {

   395 				oldWidgetError.remove();

   396 			} else if ( newWidgetError.length ) {

   397 				widget.find( '.widget-content:first' ).prepend( newWidgetError );

   398 			}

   399 		}

   400 	};

   401 

   402 	/**

   403 	 * wp.customize.Widgets.WidgetControl

   404 	 *

   405 	 * Customizer control for widgets.

   406 	 * Note that 'widget_form' must match the WP_Widget_Form_Customize_Control::$type

   407 	 *

   408 	 * @constructor

   409 	 * @augments wp.customize.Control

   410 	 */

   411 	api.Widgets.WidgetControl = api.Control.extend({

   412 		defaultExpandedArguments: {

   413 			duration: 'fast',

   414 			completeCallback: $.noop

   415 		},

   416 

   417 		/**

   418 		 * @since 4.1.0

   419 		 */

   420 		initialize: function ( id, options ) {

   421 			var control = this;

   422 			api.Control.prototype.initialize.call( control, id, options );

   423 			control.expanded = new api.Value();

   424 			control.expandedArgumentsQueue = [];

   425 			control.expanded.bind( function ( expanded ) {

   426 				var args = control.expandedArgumentsQueue.shift();

   427 				args = $.extend( {}, control.defaultExpandedArguments, args );

   428 				control.onChangeExpanded( expanded, args );

   429 			});

   430 			control.expanded.set( false );

   431 		},

   432 

   433 		/**

   434 		 * Set up the control

   435 		 */

   436 		ready: function() {

   437 			this._setupModel();

   438 			this._setupWideWidget();

   439 			this._setupControlToggle();

   440 			this._setupWidgetTitle();

   441 			this._setupReorderUI();

   442 			this._setupHighlightEffects();

   443 			this._setupUpdateUI();

   444 			this._setupRemoveUI();

   445 

   446 			/*

   447 			 * Trigger widget-added event so that plugins can attach any event

   448 			 * listeners and dynamic UI elements.

   449 			 */

   450 			$( document ).trigger( 'widget-added', [ this.container.find( '.widget:first' ) ] );

   451 		},

   452 

   453 		/**

   454 		 * Handle changes to the setting

   455 		 */

   456 		_setupModel: function() {

   457 			var self = this, rememberSavedWidgetId;

   458 

   459 			api.Widgets.savedWidgetIds = api.Widgets.savedWidgetIds || [];

   460 

   461 			// Remember saved widgets so we know which to trash (move to inactive widgets sidebar)

   462 			rememberSavedWidgetId = function() {

   463 				api.Widgets.savedWidgetIds[self.params.widget_id] = true;

   464 			};

   465 			api.bind( 'ready', rememberSavedWidgetId );

   466 			api.bind( 'saved', rememberSavedWidgetId );

   467 

   468 			this._updateCount = 0;

   469 			this.isWidgetUpdating = false;

   470 			this.liveUpdateMode = true;

   471 

   472 			// Update widget whenever model changes

   473 			this.setting.bind( function( to, from ) {

   474 				if ( ! _( from ).isEqual( to ) && ! self.isWidgetUpdating ) {

   475 					self.updateWidget( { instance: to } );

   476 				}

   477 			} );

   478 		},

   479 

   480 		/**

   481 		 * Add special behaviors for wide widget controls

   482 		 */

   483 		_setupWideWidget: function() {

   484 			var self = this, $widgetInside, $widgetForm, $customizeSidebar,

   485 				$themeControlsContainer, positionWidget;

   486 

   487 			if ( ! this.params.is_wide ) {

   488 				return;

   489 			}

   490 

   491 			$widgetInside = this.container.find( '.widget-inside' );

   492 			$widgetForm = $widgetInside.find( '> .form' );

   493 			$customizeSidebar = $( '.wp-full-overlay-sidebar-content:first' );

   494 			this.container.addClass( 'wide-widget-control' );

   495 

   496 			this.container.find( '.widget-content:first' ).css( {

   497 				'max-width': this.params.width,

   498 				'min-height': this.params.height

   499 			} );

   500 

   501 			/**

   502 			 * Keep the widget-inside positioned so the top of fixed-positioned

   503 			 * element is at the same top position as the widget-top. When the

   504 			 * widget-top is scrolled out of view, keep the widget-top in view;

   505 			 * likewise, don't allow the widget to drop off the bottom of the window.

   506 			 * If a widget is too tall to fit in the window, don't let the height

   507 			 * exceed the window height so that the contents of the widget control

   508 			 * will become scrollable (overflow:auto).

   509 			 */

   510 			positionWidget = function() {

   511 				var offsetTop = self.container.offset().top,

   512 					windowHeight = $( window ).height(),

   513 					formHeight = $widgetForm.outerHeight(),

   514 					top;

   515 				$widgetInside.css( 'max-height', windowHeight );

   516 				top = Math.max(

   517 					0, // prevent top from going off screen

   518 					Math.min(

   519 						Math.max( offsetTop, 0 ), // distance widget in panel is from top of screen

   520 						windowHeight - formHeight // flush up against bottom of screen

   521 					)

   522 				);

   523 				$widgetInside.css( 'top', top );

   524 			};

   525 

   526 			$themeControlsContainer = $( '#customize-theme-controls' );

   527 			this.container.on( 'expand', function() {

   528 				positionWidget();

   529 				$customizeSidebar.on( 'scroll', positionWidget );

   530 				$( window ).on( 'resize', positionWidget );

   531 				$themeControlsContainer.on( 'expanded collapsed', positionWidget );

   532 			} );

   533 			this.container.on( 'collapsed', function() {

   534 				$customizeSidebar.off( 'scroll', positionWidget );

   535 				$( window ).off( 'resize', positionWidget );

   536 				$themeControlsContainer.off( 'expanded collapsed', positionWidget );

   537 			} );

   538 

   539 			// Reposition whenever a sidebar's widgets are changed

   540 			api.each( function( setting ) {

   541 				if ( 0 === setting.id.indexOf( 'sidebars_widgets[' ) ) {

   542 					setting.bind( function() {

   543 						if ( self.container.hasClass( 'expanded' ) ) {

   544 							positionWidget();

   545 						}

   546 					} );

   547 				}

   548 			} );

   549 		},

   550 

   551 		/**

   552 		 * Show/hide the control when clicking on the form title, when clicking

   553 		 * the close button

   554 		 */

   555 		_setupControlToggle: function() {

   556 			var self = this, $closeBtn;

   557 

   558 			this.container.find( '.widget-top' ).on( 'click', function( e ) {

   559 				e.preventDefault();

   560 				var sidebarWidgetsControl = self.getSidebarWidgetsControl();

   561 				if ( sidebarWidgetsControl.isReordering ) {

   562 					return;

   563 				}

   564 				self.expanded( ! self.expanded() );

   565 			} );

   566 

   567 			$closeBtn = this.container.find( '.widget-control-close' );

   568 			$closeBtn.on( 'click', function( e ) {

   569 				e.preventDefault();

   570 				self.collapse();

   571 				self.container.find( '.widget-top .widget-action:first' ).focus(); // keyboard accessibility

   572 			} );

   573 		},

   574 

   575 		/**

   576 		 * Update the title of the form if a title field is entered

   577 		 */

   578 		_setupWidgetTitle: function() {

   579 			var self = this, updateTitle;

   580 

   581 			updateTitle = function() {

   582 				var title = self.setting().title,

   583 					inWidgetTitle = self.container.find( '.in-widget-title' );

   584 

   585 				if ( title ) {

   586 					inWidgetTitle.text( ': ' + title );

   587 				} else {

   588 					inWidgetTitle.text( '' );

   589 				}

   590 			};

   591 			this.setting.bind( updateTitle );

   592 			updateTitle();

   593 		},

   594 

   595 		/**

   596 		 * Set up the widget-reorder-nav

   597 		 */

   598 		_setupReorderUI: function() {

   599 			var self = this, selectSidebarItem, $moveWidgetArea,

   600 				$reorderNav, updateAvailableSidebars;

   601 

   602 			/**

   603 			 * select the provided sidebar list item in the move widget area

   604 			 *

   605 			 * @param {jQuery} li

   606 			 */

   607 			selectSidebarItem = function( li ) {

   608 				li.siblings( '.selected' ).removeClass( 'selected' );

   609 				li.addClass( 'selected' );

   610 				var isSelfSidebar = ( li.data( 'id' ) === self.params.sidebar_id );

   611 				self.container.find( '.move-widget-btn' ).prop( 'disabled', isSelfSidebar );

   612 			};

   613 

   614 			/**

   615 			 * Add the widget reordering elements to the widget control

   616 			 */

   617 			this.container.find( '.widget-title-action' ).after( $( api.Widgets.data.tpl.widgetReorderNav ) );

   618 			$moveWidgetArea = $(

   619 				_.template( api.Widgets.data.tpl.moveWidgetArea, {

   620 					sidebars: _( api.Widgets.registeredSidebars.toArray() ).pluck( 'attributes' )

   621 				} )

   622 			);

   623 			this.container.find( '.widget-top' ).after( $moveWidgetArea );

   624 

   625 			/**

   626 			 * Update available sidebars when their rendered state changes

   627 			 */

   628 			updateAvailableSidebars = function() {

   629 				var $sidebarItems = $moveWidgetArea.find( 'li' ), selfSidebarItem,

   630 					renderedSidebarCount = 0;

   631 

   632 				selfSidebarItem = $sidebarItems.filter( function(){

   633 					return $( this ).data( 'id' ) === self.params.sidebar_id;

   634 				} );

   635 

   636 				$sidebarItems.each( function() {

   637 					var li = $( this ),

   638 						sidebarId, sidebar, sidebarIsRendered;

   639 

   640 					sidebarId = li.data( 'id' );

   641 					sidebar = api.Widgets.registeredSidebars.get( sidebarId );

   642 					sidebarIsRendered = sidebar.get( 'is_rendered' );

   643 

   644 					li.toggle( sidebarIsRendered );

   645 

   646 					if ( sidebarIsRendered ) {

   647 						renderedSidebarCount += 1;

   648 					}

   649 

   650 					if ( li.hasClass( 'selected' ) && ! sidebarIsRendered ) {

   651 						selectSidebarItem( selfSidebarItem );

   652 					}

   653 				} );

   654 

   655 				if ( renderedSidebarCount > 1 ) {

   656 					self.container.find( '.move-widget' ).show();

   657 				} else {

   658 					self.container.find( '.move-widget' ).hide();

   659 				}

   660 			};

   661 

   662 			updateAvailableSidebars();

   663 			api.Widgets.registeredSidebars.on( 'change:is_rendered', updateAvailableSidebars );

   664 

   665 			/**

   666 			 * Handle clicks for up/down/move on the reorder nav

   667 			 */

   668 			$reorderNav = this.container.find( '.widget-reorder-nav' );

   669 			$reorderNav.find( '.move-widget, .move-widget-down, .move-widget-up' ).each( function() {

   670 				$( this ).prepend( self.container.find( '.widget-title' ).text() + ': ' );

   671 			} ).on( 'click keypress', function( event ) {

   672 				if ( event.type === 'keypress' && ( event.which !== 13 && event.which !== 32 ) ) {

   673 					return;

   674 				}

   675 				$( this ).focus();

   676 

   677 				if ( $( this ).is( '.move-widget' ) ) {

   678 					self.toggleWidgetMoveArea();

   679 				} else {

   680 					var isMoveDown = $( this ).is( '.move-widget-down' ),

   681 						isMoveUp = $( this ).is( '.move-widget-up' ),

   682 						i = self.getWidgetSidebarPosition();

   683 

   684 					if ( ( isMoveUp && i === 0 ) || ( isMoveDown && i === self.getSidebarWidgetsControl().setting().length - 1 ) ) {

   685 						return;

   686 					}

   687 

   688 					if ( isMoveUp ) {

   689 						self.moveUp();

   690 						wp.a11y.speak( l10n.widgetMovedUp );

   691 					} else {

   692 						self.moveDown();

   693 						wp.a11y.speak( l10n.widgetMovedDown );

   694 					}

   695 

   696 					$( this ).focus(); // re-focus after the container was moved

   697 				}

   698 			} );

   699 

   700 			/**

   701 			 * Handle selecting a sidebar to move to

   702 			 */

   703 			this.container.find( '.widget-area-select' ).on( 'click keypress', 'li', function( event ) {

   704 				if ( event.type === 'keypress' && ( event.which !== 13 && event.which !== 32 ) ) {

   705 					return;

   706 				}

   707 				event.preventDefault();

   708 				selectSidebarItem( $( this ) );

   709 			} );

   710 

   711 			/**

   712 			 * Move widget to another sidebar

   713 			 */

   714 			this.container.find( '.move-widget-btn' ).click( function() {

   715 				self.getSidebarWidgetsControl().toggleReordering( false );

   716 

   717 				var oldSidebarId = self.params.sidebar_id,

   718 					newSidebarId = self.container.find( '.widget-area-select li.selected' ).data( 'id' ),

   719 					oldSidebarWidgetsSetting, newSidebarWidgetsSetting,

   720 					oldSidebarWidgetIds, newSidebarWidgetIds, i;

   721 

   722 				oldSidebarWidgetsSetting = api( 'sidebars_widgets[' + oldSidebarId + ']' );

   723 				newSidebarWidgetsSetting = api( 'sidebars_widgets[' + newSidebarId + ']' );

   724 				oldSidebarWidgetIds = Array.prototype.slice.call( oldSidebarWidgetsSetting() );

   725 				newSidebarWidgetIds = Array.prototype.slice.call( newSidebarWidgetsSetting() );

   726 

   727 				i = self.getWidgetSidebarPosition();

   728 				oldSidebarWidgetIds.splice( i, 1 );

   729 				newSidebarWidgetIds.push( self.params.widget_id );

   730 

   731 				oldSidebarWidgetsSetting( oldSidebarWidgetIds );

   732 				newSidebarWidgetsSetting( newSidebarWidgetIds );

   733 

   734 				self.focus();

   735 			} );

   736 		},

   737 

   738 		/**

   739 		 * Highlight widgets in preview when interacted with in the Customizer

   740 		 */

   741 		_setupHighlightEffects: function() {

   742 			var self = this;

   743 

   744 			// Highlight whenever hovering or clicking over the form

   745 			this.container.on( 'mouseenter click', function() {

   746 				self.setting.previewer.send( 'highlight-widget', self.params.widget_id );

   747 			} );

   748 

   749 			// Highlight when the setting is updated

   750 			this.setting.bind( function() {

   751 				self.setting.previewer.send( 'highlight-widget', self.params.widget_id );

   752 			} );

   753 		},

   754 

   755 		/**

   756 		 * Set up event handlers for widget updating

   757 		 */

   758 		_setupUpdateUI: function() {

   759 			var self = this, $widgetRoot, $widgetContent,

   760 				$saveBtn, updateWidgetDebounced, formSyncHandler;

   761 

   762 			$widgetRoot = this.container.find( '.widget:first' );

   763 			$widgetContent = $widgetRoot.find( '.widget-content:first' );

   764 

   765 			// Configure update button

   766 			$saveBtn = this.container.find( '.widget-control-save' );

   767 			$saveBtn.val( l10n.saveBtnLabel );

   768 			$saveBtn.attr( 'title', l10n.saveBtnTooltip );

   769 			$saveBtn.removeClass( 'button-primary' ).addClass( 'button-secondary' );

   770 			$saveBtn.on( 'click', function( e ) {

   771 				e.preventDefault();

   772 				self.updateWidget( { disable_form: true } ); // @todo disable_form is unused?

   773 			} );

   774 

   775 			updateWidgetDebounced = _.debounce( function() {

   776 				self.updateWidget();

   777 			}, 250 );

   778 

   779 			// Trigger widget form update when hitting Enter within an input

   780 			$widgetContent.on( 'keydown', 'input', function( e ) {

   781 				if ( 13 === e.which ) { // Enter

   782 					e.preventDefault();

   783 					self.updateWidget( { ignoreActiveElement: true } );

   784 				}

   785 			} );

   786 

   787 			// Handle widgets that support live previews

   788 			$widgetContent.on( 'change input propertychange', ':input', function( e ) {

   789 				if ( self.liveUpdateMode ) {

   790 					if ( e.type === 'change' ) {

   791 						self.updateWidget();

   792 					} else if ( this.checkValidity && this.checkValidity() ) {

   793 						updateWidgetDebounced();

   794 					}

   795 				}

   796 			} );

   797 

   798 			// Remove loading indicators when the setting is saved and the preview updates

   799 			this.setting.previewer.channel.bind( 'synced', function() {

   800 				self.container.removeClass( 'previewer-loading' );

   801 			} );

   802 

   803 			api.previewer.bind( 'widget-updated', function( updatedWidgetId ) {

   804 				if ( updatedWidgetId === self.params.widget_id ) {

   805 					self.container.removeClass( 'previewer-loading' );

   806 				}

   807 			} );

   808 

   809 			formSyncHandler = api.Widgets.formSyncHandlers[ this.params.widget_id_base ];

   810 			if ( formSyncHandler ) {

   811 				$( document ).on( 'widget-synced', function( e, widget ) {

   812 					if ( $widgetRoot.is( widget ) ) {

   813 						formSyncHandler.apply( document, arguments );

   814 					}

   815 				} );

   816 			}

   817 		},

   818 

   819 		/**

   820 		 * Update widget control to indicate whether it is currently rendered.

   821 		 *

   822 		 * Overrides api.Control.toggle()

   823 		 *

   824 		 * @since 4.1.0

   825 		 *

   826 		 * @param {Boolean}   active

   827 		 * @param {Object}    args

   828 		 * @param {Callback}  args.completeCallback

   829 		 */

   830 		onChangeActive: function ( active, args ) {

   831 			// Note: there is a second 'args' parameter being passed, merged on top of this.defaultActiveArguments

   832 			this.container.toggleClass( 'widget-rendered', active );

   833 			if ( args.completeCallback ) {

   834 				args.completeCallback();

   835 			}

   836 		},

   837 

   838 		/**

   839 		 * Set up event handlers for widget removal

   840 		 */

   841 		_setupRemoveUI: function() {

   842 			var self = this, $removeBtn, replaceDeleteWithRemove;

   843 

   844 			// Configure remove button

   845 			$removeBtn = this.container.find( 'a.widget-control-remove' );

   846 			$removeBtn.on( 'click', function( e ) {

   847 				e.preventDefault();

   848 

   849 				// Find an adjacent element to add focus to when this widget goes away

   850 				var $adjacentFocusTarget;

   851 				if ( self.container.next().is( '.customize-control-widget_form' ) ) {

   852 					$adjacentFocusTarget = self.container.next().find( '.widget-action:first' );

   853 				} else if ( self.container.prev().is( '.customize-control-widget_form' ) ) {

   854 					$adjacentFocusTarget = self.container.prev().find( '.widget-action:first' );

   855 				} else {

   856 					$adjacentFocusTarget = self.container.next( '.customize-control-sidebar_widgets' ).find( '.add-new-widget:first' );

   857 				}

   858 

   859 				self.container.slideUp( function() {

   860 					var sidebarsWidgetsControl = api.Widgets.getSidebarWidgetControlContainingWidget( self.params.widget_id ),

   861 						sidebarWidgetIds, i;

   862 

   863 					if ( ! sidebarsWidgetsControl ) {

   864 						return;

   865 					}

   866 

   867 					sidebarWidgetIds = sidebarsWidgetsControl.setting().slice();

   868 					i = _.indexOf( sidebarWidgetIds, self.params.widget_id );

   869 					if ( -1 === i ) {

   870 						return;

   871 					}

   872 

   873 					sidebarWidgetIds.splice( i, 1 );

   874 					sidebarsWidgetsControl.setting( sidebarWidgetIds );

   875 

   876 					$adjacentFocusTarget.focus(); // keyboard accessibility

   877 				} );

   878 			} );

   879 

   880 			replaceDeleteWithRemove = function() {

   881 				$removeBtn.text( l10n.removeBtnLabel ); // wp_widget_control() outputs the link as "Delete"

   882 				$removeBtn.attr( 'title', l10n.removeBtnTooltip );

   883 			};

   884 

   885 			if ( this.params.is_new ) {

   886 				api.bind( 'saved', replaceDeleteWithRemove );

   887 			} else {

   888 				replaceDeleteWithRemove();

   889 			}

   890 		},

   891 

   892 		/**

   893 		 * Find all inputs in a widget container that should be considered when

   894 		 * comparing the loaded form with the sanitized form, whose fields will

   895 		 * be aligned to copy the sanitized over. The elements returned by this

   896 		 * are passed into this._getInputsSignature(), and they are iterated

   897 		 * over when copying sanitized values over to the the form loaded.

   898 		 *

   899 		 * @param {jQuery} container element in which to look for inputs

   900 		 * @returns {jQuery} inputs

   901 		 * @private

   902 		 */

   903 		_getInputs: function( container ) {

   904 			return $( container ).find( ':input[name]' );

   905 		},

   906 

   907 		/**

   908 		 * Iterate over supplied inputs and create a signature string for all of them together.

   909 		 * This string can be used to compare whether or not the form has all of the same fields.

   910 		 *

   911 		 * @param {jQuery} inputs

   912 		 * @returns {string}

   913 		 * @private

   914 		 */

   915 		_getInputsSignature: function( inputs ) {

   916 			var inputsSignatures = _( inputs ).map( function( input ) {

   917 				var $input = $( input ), signatureParts;

   918 

   919 				if ( $input.is( ':checkbox, :radio' ) ) {

   920 					signatureParts = [ $input.attr( 'id' ), $input.attr( 'name' ), $input.prop( 'value' ) ];

   921 				} else {

   922 					signatureParts = [ $input.attr( 'id' ), $input.attr( 'name' ) ];

   923 				}

   924 

   925 				return signatureParts.join( ',' );

   926 			} );

   927 

   928 			return inputsSignatures.join( ';' );

   929 		},

   930 

   931 		/**

   932 		 * Get the state for an input depending on its type.

   933 		 *

   934 		 * @param {jQuery|Element} input

   935 		 * @returns {string|boolean|array|*}

   936 		 * @private

   937 		 */

   938 		_getInputState: function( input ) {

   939 			input = $( input );

   940 			if ( input.is( ':radio, :checkbox' ) ) {

   941 				return input.prop( 'checked' );

   942 			} else if ( input.is( 'select[multiple]' ) ) {

   943 				return input.find( 'option:selected' ).map( function () {

   944 					return $( this ).val();

   945 				} ).get();

   946 			} else {

   947 				return input.val();

   948 			}

   949 		},

   950 

   951 		/**

   952 		 * Update an input's state based on its type.

   953 		 *

   954 		 * @param {jQuery|Element} input

   955 		 * @param {string|boolean|array|*} state

   956 		 * @private

   957 		 */

   958 		_setInputState: function ( input, state ) {

   959 			input = $( input );

   960 			if ( input.is( ':radio, :checkbox' ) ) {

   961 				input.prop( 'checked', state );

   962 			} else if ( input.is( 'select[multiple]' ) ) {

   963 				if ( ! $.isArray( state ) ) {

   964 					state = [];

   965 				} else {

   966 					// Make sure all state items are strings since the DOM value is a string

   967 					state = _.map( state, function ( value ) {

   968 						return String( value );

   969 					} );

   970 				}

   971 				input.find( 'option' ).each( function () {

   972 					$( this ).prop( 'selected', -1 !== _.indexOf( state, String( this.value ) ) );

   973 				} );

   974 			} else {

   975 				input.val( state );

   976 			}

   977 		},

   978 

   979 		/***********************************************************************

   980 		 * Begin public API methods

   981 		 **********************************************************************/

   982 

   983 		/**

   984 		 * @return {wp.customize.controlConstructor.sidebar_widgets[]}

   985 		 */

   986 		getSidebarWidgetsControl: function() {

   987 			var settingId, sidebarWidgetsControl;

   988 

   989 			settingId = 'sidebars_widgets[' + this.params.sidebar_id + ']';

   990 			sidebarWidgetsControl = api.control( settingId );

   991 

   992 			if ( ! sidebarWidgetsControl ) {

   993 				return;

   994 			}

   995 

   996 			return sidebarWidgetsControl;

   997 		},

   998 

   999 		/**

  1000 		 * Submit the widget form via Ajax and get back the updated instance,

  1001 		 * along with the new widget control form to render.

  1002 		 *

  1003 		 * @param {object} [args]

  1004 		 * @param {Object|null} [args.instance=null]  When the model changes, the instance is sent here; otherwise, the inputs from the form are used

  1005 		 * @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.

  1006 		 * @param {Boolean} [args.ignoreActiveElement=false] Whether or not updating a field will be deferred if focus is still on the element.

  1007 		 */

  1008 		updateWidget: function( args ) {

  1009 			var self = this, instanceOverride, completeCallback, $widgetRoot, $widgetContent,

  1010 				updateNumber, params, data, $inputs, processing, jqxhr, isChanged;

  1011 

  1012 			args = $.extend( {

  1013 				instance: null,

  1014 				complete: null,

  1015 				ignoreActiveElement: false

  1016 			}, args );

  1017 

  1018 			instanceOverride = args.instance;

  1019 			completeCallback = args.complete;

  1020 

  1021 			this._updateCount += 1;

  1022 			updateNumber = this._updateCount;

  1023 

  1024 			$widgetRoot = this.container.find( '.widget:first' );

  1025 			$widgetContent = $widgetRoot.find( '.widget-content:first' );

  1026 

  1027 			// Remove a previous error message

  1028 			$widgetContent.find( '.widget-error' ).remove();

  1029 

  1030 			this.container.addClass( 'widget-form-loading' );

  1031 			this.container.addClass( 'previewer-loading' );

  1032 			processing = api.state( 'processing' );

  1033 			processing( processing() + 1 );

  1034 

  1035 			if ( ! this.liveUpdateMode ) {

  1036 				this.container.addClass( 'widget-form-disabled' );

  1037 			}

  1038 

  1039 			params = {};

  1040 			params.action = 'update-widget';

  1041 			params.wp_customize = 'on';

  1042 			params.nonce = api.Widgets.data.nonce;

  1043 			params.theme = api.settings.theme.stylesheet;

  1044 

  1045 			data = $.param( params );

  1046 			$inputs = this._getInputs( $widgetContent );

  1047 

  1048 			// Store the value we're submitting in data so that when the response comes back,

  1049 			// we know if it got sanitized; if there is no difference in the sanitized value,

  1050 			// then we do not need to touch the UI and mess up the user's ongoing editing.

  1051 			$inputs.each( function() {

  1052 				$( this ).data( 'state' + updateNumber, self._getInputState( this ) );

  1053 			} );

  1054 

  1055 			if ( instanceOverride ) {

  1056 				data += '&' + $.param( { 'sanitized_widget_setting': JSON.stringify( instanceOverride ) } );

  1057 			} else {

  1058 				data += '&' + $inputs.serialize();

  1059 			}

  1060 			data += '&' + $widgetContent.find( '~ :input' ).serialize();

  1061 

  1062 			if ( this._previousUpdateRequest ) {

  1063 				this._previousUpdateRequest.abort();

  1064 			}

  1065 			jqxhr = $.post( wp.ajax.settings.url, data );

  1066 			this._previousUpdateRequest = jqxhr;

  1067 

  1068 			jqxhr.done( function( r ) {

  1069 				var message, sanitizedForm,	$sanitizedInputs, hasSameInputsInResponse,

  1070 					isLiveUpdateAborted = false;

  1071 

  1072 				// Check if the user is logged out.

  1073 				if ( '0' === r ) {

  1074 					api.previewer.preview.iframe.hide();

  1075 					api.previewer.login().done( function() {

  1076 						self.updateWidget( args );

  1077 						api.previewer.preview.iframe.show();

  1078 					} );

  1079 					return;

  1080 				}

  1081 

  1082 				// Check for cheaters.

  1083 				if ( '-1' === r ) {

  1084 					api.previewer.cheatin();

  1085 					return;

  1086 				}

  1087 

  1088 				if ( r.success ) {

  1089 					sanitizedForm = $( '<div>' + r.data.form + '</div>' );

  1090 					$sanitizedInputs = self._getInputs( sanitizedForm );

  1091 					hasSameInputsInResponse = self._getInputsSignature( $inputs ) === self._getInputsSignature( $sanitizedInputs );

  1092 

  1093 					// Restore live update mode if sanitized fields are now aligned with the existing fields

  1094 					if ( hasSameInputsInResponse && ! self.liveUpdateMode ) {

  1095 						self.liveUpdateMode = true;

  1096 						self.container.removeClass( 'widget-form-disabled' );

  1097 						self.container.find( 'input[name="savewidget"]' ).hide();

  1098 					}

  1099 

  1100 					// Sync sanitized field states to existing fields if they are aligned

  1101 					if ( hasSameInputsInResponse && self.liveUpdateMode ) {

  1102 						$inputs.each( function( i ) {

  1103 							var $input = $( this ),

  1104 								$sanitizedInput = $( $sanitizedInputs[i] ),

  1105 								submittedState, sanitizedState,	canUpdateState;

  1106 

  1107 							submittedState = $input.data( 'state' + updateNumber );

  1108 							sanitizedState = self._getInputState( $sanitizedInput );

  1109 							$input.data( 'sanitized', sanitizedState );

  1110 

  1111 							canUpdateState = ( ! _.isEqual( submittedState, sanitizedState ) && ( args.ignoreActiveElement || ! $input.is( document.activeElement ) ) );

  1112 							if ( canUpdateState ) {

  1113 								self._setInputState( $input, sanitizedState );

  1114 							}

  1115 						} );

  1116 

  1117 						$( document ).trigger( 'widget-synced', [ $widgetRoot, r.data.form ] );

  1118 

  1119 					// Otherwise, if sanitized fields are not aligned with existing fields, disable live update mode if enabled

  1120 					} else if ( self.liveUpdateMode ) {

  1121 						self.liveUpdateMode = false;

  1122 						self.container.find( 'input[name="savewidget"]' ).show();

  1123 						isLiveUpdateAborted = true;

  1124 

  1125 					// Otherwise, replace existing form with the sanitized form

  1126 					} else {

  1127 						$widgetContent.html( r.data.form );

  1128 

  1129 						self.container.removeClass( 'widget-form-disabled' );

  1130 

  1131 						$( document ).trigger( 'widget-updated', [ $widgetRoot ] );

  1132 					}

  1133 

  1134 					/**

  1135 					 * If the old instance is identical to the new one, there is nothing new