<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[27988] trunk/src/wp-admin: Widget Customizer: Cleanup `wp.customize.Widgets.WidgetControl`.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/27988">27988</a></dd>
<dt>Author</dt> <dd>ocean90</dd>
<dt>Date</dt> <dd>2014-04-07 16:31:52 +0000 (Mon, 07 Apr 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Widget Customizer: Cleanup `wp.customize.Widgets.WidgetControl`.
see <a href="http://core.trac.wordpress.org/ticket/27690">#27690</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadmincsscustomizewidgetscss">trunk/src/wp-admin/css/customize-widgets.css</a></li>
<li><a href="#trunksrcwpadminjscustomizewidgetsjs">trunk/src/wp-admin/js/customize-widgets.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadmincsscustomizewidgetscss"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/css/customize-widgets.css (27987 => 27988)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/css/customize-widgets.css 2014-04-07 15:11:04 UTC (rev 27987)
+++ trunk/src/wp-admin/css/customize-widgets.css 2014-04-07 16:31:52 UTC (rev 27988)
</span><span class="lines">@@ -95,8 +95,8 @@
</span><span class="cx"> cursor: move;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.control-section.accordion-section.widget-customizer-highlighted > .accordion-section-title,
-.customize-control-widget_form.widget-customizer-highlighted {
</del><ins>+.control-section.accordion-section.highlighted > .accordion-section-title,
+.customize-control-widget_form.highlighted {
</ins><span class="cx"> outline: none;
</span><span class="cx"> -webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8);
</span><span class="cx"> box-shadow: 0 0 2px rgba(30,140,190,0.8);
</span></span></pre></div>
<a id="trunksrcwpadminjscustomizewidgetsjs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/js/customize-widgets.js (27987 => 27988)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/js/customize-widgets.js 2014-04-07 15:11:04 UTC (rev 27987)
+++ trunk/src/wp-admin/js/customize-widgets.js 2014-04-07 16:31:52 UTC (rev 27988)
</span><span class="lines">@@ -177,6 +177,7 @@
</span><span class="cx"> _.bindAll( this, 'close' );
</span><span class="cx">
</span><span class="cx"> this.listenTo( this.collection, 'update', this.updateList );
</span><ins>+ this.listenTo( this.collection, 'change', this.updateList );
</ins><span class="cx">
</span><span class="cx"> this.updateList();
</span><span class="cx">
</span><span class="lines">@@ -410,40 +411,39 @@
</span><span class="cx"> * Set up the control
</span><span class="cx"> */
</span><span class="cx"> ready: function() {
</span><del>- var control = this;
- control._setupModel();
- control._setupWideWidget();
- control._setupControlToggle();
- control._setupWidgetTitle();
- control._setupReorderUI();
- control._setupHighlightEffects();
- control._setupUpdateUI();
- control._setupRemoveUI();
</del><ins>+ this._setupModel();
+ this._setupWideWidget();
+ this._setupControlToggle();
+ this._setupWidgetTitle();
+ this._setupReorderUI();
+ this._setupHighlightEffects();
+ this._setupUpdateUI();
+ this._setupRemoveUI();
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> /**
</span><span class="cx"> * Handle changes to the setting
</span><span class="cx"> */
</span><span class="cx"> _setupModel: function() {
</span><del>- var control = this, remember_saved_widget_id;
</del><ins>+ var self = this, rememberSavedWidgetId;
</ins><span class="cx">
</span><span class="cx"> api.Widgets.savedWidgetIds = api.Widgets.savedWidgetIds || [];
</span><span class="cx">
</span><span class="cx"> // Remember saved widgets so we know which to trash (move to inactive widgets sidebar)
</span><del>- remember_saved_widget_id = function() {
- api.Widgets.savedWidgetIds[control.params.widget_id] = true;
</del><ins>+ rememberSavedWidgetId = function() {
+ api.Widgets.savedWidgetIds[self.params.widget_id] = true;
</ins><span class="cx"> };
</span><del>- api.bind( 'ready', remember_saved_widget_id );
- api.bind( 'saved', remember_saved_widget_id );
</del><ins>+ api.bind( 'ready', rememberSavedWidgetId );
+ api.bind( 'saved', rememberSavedWidgetId );
</ins><span class="cx">
</span><del>- control._update_count = 0;
- control.is_widget_updating = false;
- control.live_update_mode = true;
</del><ins>+ this._updateCount = 0;
+ this.isWidgetUpdating = false;
+ this.liveUpdateMode = true;
</ins><span class="cx">
</span><span class="cx"> // Update widget whenever model changes
</span><del>- control.setting.bind( function( to, from ) {
- if ( ! _( from ).isEqual( to ) && ! control.is_widget_updating ) {
- control.updateWidget( { instance: to } );
</del><ins>+ this.setting.bind( function( to, from ) {
+ if ( ! _( from ).isEqual( to ) && ! self.isWidgetUpdating ) {
+ self.updateWidget( { instance: to } );
</ins><span class="cx"> }
</span><span class="cx"> } );
</span><span class="cx"> },
</span><span class="lines">@@ -452,25 +452,21 @@
</span><span class="cx"> * Add special behaviors for wide widget controls
</span><span class="cx"> */
</span><span class="cx"> _setupWideWidget: function() {
</span><del>- var control = this,
- widget_inside,
- widget_form,
- customize_sidebar,
- position_widget,
- theme_controls_container;
</del><ins>+ var self = this, $widgetInside, $widgetForm, $customizeSidebar,
+ $themeControlsContainer, positionWidget;
</ins><span class="cx">
</span><del>- if ( ! control.params.is_wide ) {
</del><ins>+ if ( ! this.params.is_wide ) {
</ins><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- widget_inside = control.container.find( '.widget-inside' );
- widget_form = widget_inside.find( '> .form' );
- customize_sidebar = $( '.wp-full-overlay-sidebar-content:first' );
- control.container.addClass( 'wide-widget-control' );
</del><ins>+ $widgetInside = this.container.find( '.widget-inside' );
+ $widgetForm = $widgetInside.find( '> .form' );
+ $customizeSidebar = $( '.wp-full-overlay-sidebar-content:first' );
+ this.container.addClass( 'wide-widget-control' );
</ins><span class="cx">
</span><del>- control.container.find( '.widget-content:first' ).css( {
- 'max-width': control.params.width,
- 'min-height': control.params.height
</del><ins>+ this.container.find( '.widget-content:first' ).css( {
+ 'max-width': this.params.width,
+ 'min-height': this.params.height
</ins><span class="cx"> } );
</span><span class="cx">
</span><span class="cx"> /**
</span><span class="lines">@@ -482,41 +478,41 @@
</span><span class="cx"> * exceed the window height so that the contents of the widget control
</span><span class="cx"> * will become scrollable (overflow:auto).
</span><span class="cx"> */
</span><del>- position_widget = function() {
- var offset_top = control.container.offset().top,
- window_height = $( window ).height(),
- form_height = widget_form.outerHeight(),
</del><ins>+ positionWidget = function() {
+ var offsetTop = self.container.offset().top,
+ windowHeight = $( window ).height(),
+ formHeight = $widgetForm.outerHeight(),
</ins><span class="cx"> top;
</span><del>- widget_inside.css( 'max-height', window_height );
</del><ins>+ $widgetInside.css( 'max-height', windowHeight );
</ins><span class="cx"> top = Math.max(
</span><span class="cx"> 0, // prevent top from going off screen
</span><span class="cx"> Math.min(
</span><del>- Math.max( offset_top, 0 ), // distance widget in panel is from top of screen
- window_height - form_height // flush up against bottom of screen
</del><ins>+ Math.max( offsetTop, 0 ), // distance widget in panel is from top of screen
+ windowHeight - formHeight // flush up against bottom of screen
</ins><span class="cx"> )
</span><span class="cx"> );
</span><del>- widget_inside.css( 'top', top );
</del><ins>+ $widgetInside.css( 'top', top );
</ins><span class="cx"> };
</span><span class="cx">
</span><del>- theme_controls_container = $( '#customize-theme-controls' );
- control.container.on( 'expand', function() {
- position_widget();
- customize_sidebar.on( 'scroll', position_widget );
- $( window ).on( 'resize', position_widget );
- theme_controls_container.on( 'expanded collapsed', position_widget );
</del><ins>+ $themeControlsContainer = $( '#customize-theme-controls' );
+ this.container.on( 'expand', function() {
+ positionWidget();
+ $customizeSidebar.on( 'scroll', positionWidget );
+ $( window ).on( 'resize', positionWidget );
+ $themeControlsContainer.on( 'expanded collapsed', positionWidget );
</ins><span class="cx"> } );
</span><del>- control.container.on( 'collapsed', function() {
- customize_sidebar.off( 'scroll', position_widget );
- $( window ).off( 'resize', position_widget );
- theme_controls_container.off( 'expanded collapsed', position_widget );
</del><ins>+ this.container.on( 'collapsed', function() {
+ $customizeSidebar.off( 'scroll', positionWidget );
+ $( window ).off( 'resize', positionWidget );
+ $themeControlsContainer.off( 'expanded collapsed', positionWidget );
</ins><span class="cx"> } );
</span><span class="cx">
</span><span class="cx"> // Reposition whenever a sidebar's widgets are changed
</span><span class="cx"> api.each( function( setting ) {
</span><span class="cx"> if ( 0 === setting.id.indexOf( 'sidebars_widgets[' ) ) {
</span><span class="cx"> setting.bind( function() {
</span><del>- if ( control.container.hasClass( 'expanded' ) ) {
- position_widget();
</del><ins>+ if ( self.container.hasClass( 'expanded' ) ) {
+ positionWidget();
</ins><span class="cx"> }
</span><span class="cx"> } );
</span><span class="cx"> }
</span><span class="lines">@@ -528,23 +524,22 @@
</span><span class="cx"> * the close button
</span><span class="cx"> */
</span><span class="cx"> _setupControlToggle: function() {
</span><del>- var control = this, close_btn;
</del><ins>+ var self = this, $closeBtn;
</ins><span class="cx">
</span><del>- control.container.find( '.widget-top' ).on( 'click', function( e ) {
</del><ins>+ this.container.find( '.widget-top' ).on( 'click', function( e ) {
</ins><span class="cx"> e.preventDefault();
</span><del>- var sidebar_widgets_control = control.getSidebarWidgetsControl();
- if ( sidebar_widgets_control.is_reordering ) {
</del><ins>+ var sidebarWidgetsControl = self.getSidebarWidgetsControl();
+ if ( sidebarWidgetsControl.is_reordering ) {
</ins><span class="cx"> return;
</span><span class="cx"> }
</span><del>- control.toggleForm();
</del><ins>+ self.toggleForm();
</ins><span class="cx"> } );
</span><span class="cx">
</span><del>- close_btn = control.container.find( '.widget-control-close' );
- // @todo Hitting Enter on this link does nothing; will be resolved in core with <http://core.trac.wordpress.org/ticket/26633>
- close_btn.on( 'click', function( e ) {
</del><ins>+ $closeBtn = this.container.find( '.widget-control-close' );
+ $closeBtn.on( 'click', function( e ) {
</ins><span class="cx"> e.preventDefault();
</span><del>- control.collapseForm();
- control.container.find( '.widget-top .widget-action:first' ).focus(); // keyboard accessibility
</del><ins>+ self.collapseForm();
+ self.container.find( '.widget-top .widget-action:first' ).focus(); // keyboard accessibility
</ins><span class="cx"> } );
</span><span class="cx"> },
</span><span class="cx">
</span><span class="lines">@@ -552,104 +547,106 @@
</span><span class="cx"> * Update the title of the form if a title field is entered
</span><span class="cx"> */
</span><span class="cx"> _setupWidgetTitle: function() {
</span><del>- var control = this, update_title;
</del><ins>+ var self = this, updateTitle;
</ins><span class="cx">
</span><del>- update_title = function() {
- var title = control.setting().title,
- in_widget_title = control.container.find( '.in-widget-title' );
</del><ins>+ updateTitle = function() {
+ var title = self.setting().title,
+ inWidgetTitle = self.container.find( '.in-widget-title' );
</ins><span class="cx">
</span><span class="cx"> if ( title ) {
</span><del>- in_widget_title.text( ': ' + title );
</del><ins>+ inWidgetTitle.text( ': ' + title );
</ins><span class="cx"> } else {
</span><del>- in_widget_title.text( '' );
</del><ins>+ inWidgetTitle.text( '' );
</ins><span class="cx"> }
</span><span class="cx"> };
</span><del>- control.setting.bind( update_title );
- update_title();
</del><ins>+ this.setting.bind( updateTitle );
+ updateTitle();
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> /**
</span><span class="cx"> * Set up the widget-reorder-nav
</span><span class="cx"> */
</span><span class="cx"> _setupReorderUI: function() {
</span><del>- var control = this,
- select_sidebar_item,
- move_widget_area,
- reorder_nav,
- update_available_sidebars;
</del><ins>+ var self = this, selectSidebarItem, $moveWidgetArea,
+ $reorderNav, updateAvailableSidebars;
</ins><span class="cx">
</span><span class="cx"> /**
</span><span class="cx"> * select the provided sidebar list item in the move widget area
</span><span class="cx"> *
</span><span class="cx"> * @param {jQuery} li
</span><span class="cx"> */
</span><del>- select_sidebar_item = function( li ) {
</del><ins>+ selectSidebarItem = function( li ) {
</ins><span class="cx"> li.siblings( '.selected' ).removeClass( 'selected' );
</span><span class="cx"> li.addClass( 'selected' );
</span><del>- var is_self_sidebar = ( li.data( 'id' ) === control.params.sidebar_id );
- control.container.find( '.move-widget-btn' ).prop( 'disabled', is_self_sidebar );
</del><ins>+ var isSelfSidebar = ( li.data( 'id' ) === self.params.sidebar_id );
+ self.container.find( '.move-widget-btn' ).prop( 'disabled', isSelfSidebar );
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> /**
</span><span class="cx"> * Add the widget reordering elements to the widget control
</span><span class="cx"> */
</span><del>- control.container.find( '.widget-title-action' ).after( $( api.Widgets.data.tpl.widgetReorderNav ) );
- move_widget_area = $(
</del><ins>+ this.container.find( '.widget-title-action' ).after( $( api.Widgets.data.tpl.widgetReorderNav ) );
+ $moveWidgetArea = $(
</ins><span class="cx"> _.template( api.Widgets.data.tpl.moveWidgetArea, {
</span><span class="cx"> sidebars: _( api.Widgets.registeredSidebars.toArray() ).pluck( 'attributes' )
</span><span class="cx"> } )
</span><span class="cx"> );
</span><del>- control.container.find( '.widget-top' ).after( move_widget_area );
</del><ins>+ this.container.find( '.widget-top' ).after( $moveWidgetArea );
</ins><span class="cx">
</span><span class="cx"> /**
</span><span class="cx"> * Update available sidebars when their rendered state changes
</span><span class="cx"> */
</span><del>- update_available_sidebars = function() {
- var sidebar_items = move_widget_area.find( 'li' ), self_sidebar_item;
- self_sidebar_item = sidebar_items.filter( function(){
- return $( this ).data( 'id' ) === control.params.sidebar_id;
</del><ins>+ updateAvailableSidebars = function() {
+ var $sidebarItems = $moveWidgetArea.find( 'li' ), selfSidebarItem;
+
+ selfSidebarItem = $sidebarItems.filter( function(){
+ return $( this ).data( 'id' ) === self.params.sidebar_id;
</ins><span class="cx"> } );
</span><del>- sidebar_items.each( function() {
</del><ins>+
+ $sidebarItems.each( function() {
</ins><span class="cx"> var li = $( this ),
</span><del>- sidebar_id,
</del><ins>+ sidebarId,
</ins><span class="cx"> sidebar_model;
</span><span class="cx">
</span><del>- sidebar_id = li.data( 'id' );
- sidebar_model = api.Widgets.registeredSidebars.get( sidebar_id );
</del><ins>+ sidebarId = li.data( 'id' );
+ sidebar_model = api.Widgets.registeredSidebars.get( sidebarId );
+
</ins><span class="cx"> li.toggle( sidebar_model.get( 'is_rendered' ) );
</span><ins>+
</ins><span class="cx"> if ( li.hasClass( 'selected' ) && ! sidebar_model.get( 'is_rendered' ) ) {
</span><del>- select_sidebar_item( self_sidebar_item );
</del><ins>+ selectSidebarItem( selfSidebarItem );
</ins><span class="cx"> }
</span><span class="cx"> } );
</span><span class="cx"> };
</span><del>- update_available_sidebars();
- api.Widgets.registeredSidebars.on( 'change:is_rendered', update_available_sidebars );
</del><span class="cx">
</span><ins>+ updateAvailableSidebars();
+ api.Widgets.registeredSidebars.on( 'change:is_rendered', updateAvailableSidebars );
+
</ins><span class="cx"> /**
</span><span class="cx"> * Handle clicks for up/down/move on the reorder nav
</span><span class="cx"> */
</span><del>- reorder_nav = control.container.find( '.widget-reorder-nav' );
- reorder_nav.find( '.move-widget, .move-widget-down, .move-widget-up' ).on( 'click keypress', function( event ) {
</del><ins>+ $reorderNav = this.container.find( '.widget-reorder-nav' );
+ $reorderNav.find( '.move-widget, .move-widget-down, .move-widget-up' ).on( 'click keypress', function( event ) {
</ins><span class="cx"> if ( event.type === 'keypress' && ( event.which !== 13 && event.which !== 32 ) ) {
</span><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx"> $( this ).focus();
</span><span class="cx">
</span><span class="cx"> if ( $( this ).is( '.move-widget' ) ) {
</span><del>- control.toggleWidgetMoveArea();
</del><ins>+ self.toggleWidgetMoveArea();
</ins><span class="cx"> } else {
</span><del>- var is_move_down = $( this ).is( '.move-widget-down' ),
- is_move_up = $( this ).is( '.move-widget-up' ),
- i = control.getWidgetSidebarPosition();
</del><ins>+ var isMoveDown = $( this ).is( '.move-widget-down' ),
+ isMoveUp = $( this ).is( '.move-widget-up' ),
+ i = self.getWidgetSidebarPosition();
</ins><span class="cx">
</span><del>- if ( ( is_move_up && i === 0 ) || ( is_move_down && i === control.getSidebarWidgetsControl().setting().length - 1 ) ) {
</del><ins>+ if ( ( isMoveUp && i === 0 ) || ( isMoveDown && i === self.getSidebarWidgetsControl().setting().length - 1 ) ) {
</ins><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- if ( is_move_up ) {
- control.moveUp();
</del><ins>+ if ( isMoveUp ) {
+ self.moveUp();
</ins><span class="cx"> } else {
</span><del>- control.moveDown();
</del><ins>+ self.moveDown();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> $( this ).focus(); // re-focus after the container was moved
</span><span class="lines">@@ -659,41 +656,38 @@
</span><span class="cx"> /**
</span><span class="cx"> * Handle selecting a sidebar to move to
</span><span class="cx"> */
</span><del>- control.container.find( '.widget-area-select' ).on( 'click keypress', 'li', function( e ) {
</del><ins>+ this.container.find( '.widget-area-select' ).on( 'click keypress', 'li', function( e ) {
</ins><span class="cx"> if ( event.type === 'keypress' && ( event.which !== 13 && event.which !== 32 ) ) {
</span><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx"> e.preventDefault();
</span><del>- select_sidebar_item( $( this ) );
</del><ins>+ selectSidebarItem( $( this ) );
</ins><span class="cx"> } );
</span><span class="cx">
</span><span class="cx"> /**
</span><span class="cx"> * Move widget to another sidebar
</span><span class="cx"> */
</span><del>- control.container.find( '.move-widget-btn' ).click( function() {
- control.getSidebarWidgetsControl().toggleReordering( false );
</del><ins>+ this.container.find( '.move-widget-btn' ).click( function() {
+ self.getSidebarWidgetsControl().toggleReordering( false );
</ins><span class="cx">
</span><del>- var old_sidebar_id = control.params.sidebar_id,
- new_sidebar_id = control.container.find( '.widget-area-select li.selected' ).data( 'id' ),
- old_sidebar_widgets_setting,
- new_sidebar_widgets_setting,
- old_sidebar_widget_ids,
- new_sidebar_widget_ids,
- i;
</del><ins>+ var oldSidebarId = self.params.sidebar_id,
+ newSidebarId = self.container.find( '.widget-area-select li.selected' ).data( 'id' ),
+ oldSidebarWidgetsSetting, newSidebarWidgetsSetting,
+ oldSidebarWidgetIds, newSidebarWidgetIds, i;
</ins><span class="cx">
</span><del>- old_sidebar_widgets_setting = api( 'sidebars_widgets[' + old_sidebar_id + ']' );
- new_sidebar_widgets_setting = api( 'sidebars_widgets[' + new_sidebar_id + ']' );
- old_sidebar_widget_ids = Array.prototype.slice.call( old_sidebar_widgets_setting() );
- new_sidebar_widget_ids = Array.prototype.slice.call( new_sidebar_widgets_setting() );
</del><ins>+ oldSidebarWidgetsSetting = api( 'sidebars_widgets[' + oldSidebarId + ']' );
+ newSidebarWidgetsSetting = api( 'sidebars_widgets[' + newSidebarId + ']' );
+ oldSidebarWidgetIds = Array.prototype.slice.call( oldSidebarWidgetsSetting() );
+ newSidebarWidgetIds = Array.prototype.slice.call( newSidebarWidgetsSetting() );
</ins><span class="cx">
</span><del>- i = control.getWidgetSidebarPosition();
- old_sidebar_widget_ids.splice( i, 1 );
- new_sidebar_widget_ids.push( control.params.widget_id );
</del><ins>+ i = self.getWidgetSidebarPosition();
+ oldSidebarWidgetIds.splice( i, 1 );
+ newSidebarWidgetIds.push( self.params.widget_id );
</ins><span class="cx">
</span><del>- old_sidebar_widgets_setting( old_sidebar_widget_ids );
- new_sidebar_widgets_setting( new_sidebar_widget_ids );
</del><ins>+ oldSidebarWidgetsSetting( oldSidebarWidgetIds );
+ newSidebarWidgetsSetting( newSidebarWidgetIds );
</ins><span class="cx">
</span><del>- control.focus();
</del><ins>+ self.focus();
</ins><span class="cx"> } );
</span><span class="cx"> },
</span><span class="cx">
</span><span class="lines">@@ -701,93 +695,84 @@
</span><span class="cx"> * Highlight widgets in preview when interacted with in the customizer
</span><span class="cx"> */
</span><span class="cx"> _setupHighlightEffects: function() {
</span><del>- var control = this;
</del><ins>+ var self = this;
</ins><span class="cx">
</span><span class="cx"> // Highlight whenever hovering or clicking over the form
</span><del>- control.container.on( 'mouseenter click', function() {
- control.setting.previewer.send( 'highlight-widget', control.params.widget_id );
</del><ins>+ this.container.on( 'mouseenter click', function() {
+ self.setting.previewer.send( 'highlight-widget', self.params.widget_id );
</ins><span class="cx"> } );
</span><span class="cx">
</span><span class="cx"> // Highlight when the setting is updated
</span><del>- control.setting.bind( function() {
- control.setting.previewer.send( 'highlight-widget', control.params.widget_id );
</del><ins>+ this.setting.bind( function() {
+ self.setting.previewer.send( 'highlight-widget', self.params.widget_id );
</ins><span class="cx"> } );
</span><del>-
- // Highlight when the widget form is expanded
- control.container.on( 'expand', function() {
- control.scrollPreviewWidgetIntoView();
- } );
</del><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> /**
</span><span class="cx"> * Set up event handlers for widget updating
</span><span class="cx"> */
</span><span class="cx"> _setupUpdateUI: function() {
</span><del>- var control = this,
- widget_root,
- widget_content,
- save_btn,
- update_widget_debounced,
- form_update_event_handler;
</del><ins>+ var self = this, $widgetRoot, $widgetContent,
+ $saveBtn, updateWidgetDebounced, formSyncHandler;
</ins><span class="cx">
</span><del>- widget_root = control.container.find( '.widget:first' );
- widget_content = widget_root.find( '.widget-content:first' );
</del><ins>+ $widgetRoot = this.container.find( '.widget:first' );
+ $widgetContent = $widgetRoot.find( '.widget-content:first' );
</ins><span class="cx">
</span><span class="cx"> // Configure update button
</span><del>- save_btn = control.container.find( '.widget-control-save' );
- save_btn.val( l10n.saveBtnLabel );
- save_btn.attr( 'title', l10n.saveBtnTooltip );
- save_btn.removeClass( 'button-primary' ).addClass( 'button-secondary' );
- save_btn.on( 'click', function( e ) {
</del><ins>+ $saveBtn = this.container.find( '.widget-control-save' );
+ $saveBtn.val( l10n.saveBtnLabel );
+ $saveBtn.attr( 'title', l10n.saveBtnTooltip );
+ $saveBtn.removeClass( 'button-primary' ).addClass( 'button-secondary' );
+ $saveBtn.on( 'click', function( e ) {
</ins><span class="cx"> e.preventDefault();
</span><del>- control.updateWidget( { disable_form: true } );
</del><ins>+ self.updateWidget( { disable_form: true } );
</ins><span class="cx"> } );
</span><span class="cx">
</span><del>- update_widget_debounced = _.debounce( function() {
- // @todo For compatibility with other plugins, should we trigger a click event? What about form submit event?
- control.updateWidget();
</del><ins>+ updateWidgetDebounced = _.debounce( function() {
+ self.updateWidget();
</ins><span class="cx"> }, 250 );
</span><span class="cx">
</span><span class="cx"> // Trigger widget form update when hitting Enter within an input
</span><del>- control.container.find( '.widget-content' ).on( 'keydown', 'input', function( e ) {
</del><ins>+ this.container.find( '.widget-content' ).on( 'keydown', 'input', function( e ) {
</ins><span class="cx"> if ( 13 === e.which ) { // Enter
</span><span class="cx"> e.preventDefault();
</span><del>- control.updateWidget( { ignore_active_element: true } );
</del><ins>+ self.updateWidget( { ignore_active_element: true } );
</ins><span class="cx"> }
</span><span class="cx"> } );
</span><span class="cx">
</span><span class="cx"> // Handle widgets that support live previews
</span><del>- widget_content.on( 'change input propertychange', ':input', function( e ) {
- if ( control.live_update_mode ) {
</del><ins>+ $widgetContent.on( 'change input propertychange', ':input', function( e ) {
+ if ( self.liveUpdateMode ) {
</ins><span class="cx"> if ( e.type === 'change' ) {
</span><del>- control.updateWidget();
</del><ins>+ self.updateWidget();
</ins><span class="cx"> } else if ( this.checkValidity && this.checkValidity() ) {
</span><del>- update_widget_debounced();
</del><ins>+ updateWidgetDebounced();
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx"> } );
</span><span class="cx">
</span><span class="cx"> // Remove loading indicators when the setting is saved and the preview updates
</span><del>- control.setting.previewer.channel.bind( 'synced', function() {
- control.container.removeClass( 'previewer-loading' );
</del><ins>+ this.setting.previewer.channel.bind( 'synced', function() {
+ self.container.removeClass( 'previewer-loading' );
</ins><span class="cx"> } );
</span><del>- api.Widgets.Previewer.bind( 'widget-updated', function( updated_widget_id ) {
- if ( updated_widget_id === control.params.widget_id ) {
- control.container.removeClass( 'previewer-loading' );
</del><ins>+
+ api.Widgets.Previewer.bind( 'widget-updated', function( updatedWidgetId ) {
+ if ( updatedWidgetId === self.params.widget_id ) {
+ self.container.removeClass( 'previewer-loading' );
</ins><span class="cx"> }
</span><span class="cx"> } );
</span><span class="cx">
</span><del>- // Update widget control to indicate whether it is currently rendered (cf. Widget Visibility)
</del><ins>+ // Update widget control to indicate whether it is currently rendered
</ins><span class="cx"> api.Widgets.Previewer.bind( 'rendered-widgets', function( rendered_widgets ) {
</span><del>- var is_rendered = !! rendered_widgets[control.params.widget_id];
- control.container.toggleClass( 'widget-rendered', is_rendered );
</del><ins>+ var is_rendered = !! rendered_widgets[self.params.widget_id];
+ self.container.toggleClass( 'widget-rendered', is_rendered );
</ins><span class="cx"> } );
</span><span class="cx">
</span><del>- form_update_event_handler = api.Widgets.formSyncHandlers[ control.params.widget_id_base ];
- if ( form_update_event_handler ) {
- $( document ).on( 'widget-synced', function( e, widget_el ) {
- if ( widget_root.is( widget_el ) ) {
- form_update_event_handler.apply( document, arguments );
</del><ins>+ formSyncHandler = api.Widgets.formSyncHandlers[ this.params.widget_id_base ];
+ if ( formSyncHandler ) {
+ $( document ).on( 'widget-synced', function( e, widget ) {
+ if ( $widgetRoot.is( widget ) ) {
+ formSyncHandler.apply( document, arguments );
</ins><span class="cx"> }
</span><span class="cx"> } );
</span><span class="cx"> }
</span><span class="lines">@@ -797,53 +782,51 @@
</span><span class="cx"> * Set up event handlers for widget removal
</span><span class="cx"> */
</span><span class="cx"> _setupRemoveUI: function() {
</span><del>- var control = this,
- remove_btn,
- replace_delete_with_remove;
</del><ins>+ var self = this, $removeBtn, replaceDeleteWithRemove;
</ins><span class="cx">
</span><span class="cx"> // Configure remove button
</span><del>- remove_btn = control.container.find( 'a.widget-control-remove' );
- // @todo Hitting Enter on this link does nothing; will be resolved in core with <http://core.trac.wordpress.org/ticket/26633>
- remove_btn.on( 'click', function( e ) {
</del><ins>+ $removeBtn = this.container.find( 'a.widget-control-remove' );
+ $removeBtn.on( 'click', function( e ) {
</ins><span class="cx"> e.preventDefault();
</span><span class="cx">
</span><span class="cx"> // Find an adjacent element to add focus to when this widget goes away
</span><del>- var adjacent_focus_target;
- if ( control.container.next().is( '.customize-control-widget_form' ) ) {
- adjacent_focus_target = control.container.next().find( '.widget-action:first' );
- } else if ( control.container.prev().is( '.customize-control-widget_form' ) ) {
- adjacent_focus_target = control.container.prev().find( '.widget-action:first' );
</del><ins>+ var $adjacentFocusTarget;
+ if ( self.container.next().is( '.customize-control-widget_form' ) ) {
+ $adjacentFocusTarget = self.container.next().find( '.widget-action:first' );
+ } else if ( self.container.prev().is( '.customize-control-widget_form' ) ) {
+ $adjacentFocusTarget = self.container.prev().find( '.widget-action:first' );
</ins><span class="cx"> } else {
</span><del>- adjacent_focus_target = control.container.next( '.customize-control-sidebar_widgets' ).find( '.add-new-widget:first' );
</del><ins>+ $adjacentFocusTarget = self.container.next( '.customize-control-sidebar_widgets' ).find( '.add-new-widget:first' );
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- control.container.slideUp( function() {
- var sidebars_widgets_control = api.Widgets.getSidebarWidgetControlContainingWidget( control.params.widget_id ),
</del><ins>+ self.container.slideUp( function() {
+ var sidebars_widgets_control = api.Widgets.getSidebarWidgetControlContainingWidget( self.params.widget_id ),
</ins><span class="cx"> sidebar_widget_ids,
</span><span class="cx"> i;
</span><span class="cx">
</span><span class="cx"> if ( ! sidebars_widgets_control ) {
</span><del>- throw new Error( 'Unable to find sidebars_widgets_control' );
</del><ins>+ return;
</ins><span class="cx"> }
</span><span class="cx"> sidebar_widget_ids = sidebars_widgets_control.setting().slice();
</span><del>- i = _.indexOf( sidebar_widget_ids, control.params.widget_id );
</del><ins>+ i = _.indexOf( sidebar_widget_ids, self.params.widget_id );
</ins><span class="cx"> if ( -1 === i ) {
</span><del>- throw new Error( 'Widget is not in sidebar' );
</del><ins>+ return;
</ins><span class="cx"> }
</span><span class="cx"> sidebar_widget_ids.splice( i, 1 );
</span><span class="cx"> sidebars_widgets_control.setting( sidebar_widget_ids );
</span><del>- adjacent_focus_target.focus(); // keyboard accessibility
</del><ins>+ $adjacentFocusTarget.focus(); // keyboard accessibility
</ins><span class="cx"> } );
</span><span class="cx"> } );
</span><span class="cx">
</span><del>- replace_delete_with_remove = function() {
- remove_btn.text( l10n.removeBtnLabel ); // wp_widget_control() outputs the link as "Delete"
- remove_btn.attr( 'title', l10n.removeBtnTooltip );
</del><ins>+ replaceDeleteWithRemove = function() {
+ $removeBtn.text( l10n.removeBtnLabel ); // wp_widget_control() outputs the link as "Delete"
+ $removeBtn.attr( 'title', l10n.removeBtnTooltip );
</ins><span class="cx"> };
</span><del>- if ( control.params.is_new ) {
- api.bind( 'saved', replace_delete_with_remove );
</del><ins>+
+ if ( this.params.is_new ) {
+ api.bind( 'saved', replaceDeleteWithRemove );
</ins><span class="cx"> } else {
</span><del>- replace_delete_with_remove();
</del><ins>+ replaceDeleteWithRemove();
</ins><span class="cx"> }
</span><span class="cx"> },
</span><span class="cx">
</span><span class="lines">@@ -871,17 +854,19 @@
</span><span class="cx"> * @private
</span><span class="cx"> */
</span><span class="cx"> _getInputsSignature: function( inputs ) {
</span><del>- var inputs_signatures = _( inputs ).map( function( input ) {
- input = $( input );
- var signature_parts;
- if ( input.is( ':checkbox, :radio' ) ) {
- signature_parts = [ input.attr( 'id' ), input.attr( 'name' ), input.prop( 'value' ) ];
</del><ins>+ var inputsSignatures = _( inputs ).map( function( input ) {
+ var $input = $( input ), signatureParts;
+
+ if ( $input.is( ':checkbox, :radio' ) ) {
+ signatureParts = [ $input.attr( 'id' ), $input.attr( 'name' ), $input.prop( 'value' ) ];
</ins><span class="cx"> } else {
</span><del>- signature_parts = [ input.attr( 'id' ), input.attr( 'name' ) ];
</del><ins>+ signatureParts = [ $input.attr( 'id' ), $input.attr( 'name' ) ];
</ins><span class="cx"> }
</span><del>- return signature_parts.join( ',' );
</del><ins>+
+ return signatureParts.join( ',' );
</ins><span class="cx"> } );
</span><del>- return inputs_signatures.join( ';' );
</del><ins>+
+ return inputsSignatures.join( ';' );
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> /**
</span><span class="lines">@@ -892,8 +877,9 @@
</span><span class="cx"> * @private
</span><span class="cx"> */
</span><span class="cx"> _getInputStatePropertyName: function( input ) {
</span><del>- input = $( input );
- if ( input.is( ':radio, :checkbox' ) ) {
</del><ins>+ var $input = $( input );
+
+ if ( $input.is( ':radio, :checkbox' ) ) {
</ins><span class="cx"> return 'checked';
</span><span class="cx"> } else {
</span><span class="cx"> return 'value';
</span><span class="lines">@@ -908,14 +894,16 @@
</span><span class="cx"> * @return {wp.customize.controlConstructor.sidebar_widgets[]}
</span><span class="cx"> */
</span><span class="cx"> getSidebarWidgetsControl: function() {
</span><del>- var control = this, setting_id, sidebar_widgets_control;
</del><ins>+ var settingId, sidebarWidgetsControl;
</ins><span class="cx">
</span><del>- setting_id = 'sidebars_widgets[' + control.params.sidebar_id + ']';
- sidebar_widgets_control = api.control( setting_id );
- if ( ! sidebar_widgets_control ) {
- throw new Error( 'Unable to locate sidebar_widgets control for ' + control.params.sidebar_id );
</del><ins>+ settingId = 'sidebars_widgets[' + this.params.sidebar_id + ']';
+ sidebarWidgetsControl = api.control( settingId );
+
+ if ( ! sidebarWidgetsControl ) {
+ return;
</ins><span class="cx"> }
</span><del>- return sidebar_widgets_control;
</del><ins>+
+ return sidebarWidgetsControl;
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> /**
</span><span class="lines">@@ -928,18 +916,8 @@
</span><span class="cx"> * @param {Boolean} [args.ignore_active_element=false] Whether or not updating a field will be deferred if focus is still on the element.
</span><span class="cx"> */
</span><span class="cx"> updateWidget: function( args ) {
</span><del>- var control = this,
- instance_override,
- complete_callback,
- widget_root,
- update_number,
- widget_content,
- params,
- data,
- inputs,
- processing,
- jqxhr,
- is_changed;
</del><ins>+ var self = this, instanceOverride, completeCallback, $widgetRoot, $widgetContent,
+ updateNumber, params, data, $inputs, processing, jqxhr, isChanged;
</ins><span class="cx">
</span><span class="cx"> args = $.extend( {
</span><span class="cx"> instance: null,
</span><span class="lines">@@ -947,25 +925,25 @@
</span><span class="cx"> ignore_active_element: false
</span><span class="cx"> }, args );
</span><span class="cx">
</span><del>- instance_override = args.instance;
- complete_callback = args.complete;
</del><ins>+ instanceOverride = args.instance;
+ completeCallback = args.complete;
</ins><span class="cx">
</span><del>- control._update_count += 1;
- update_number = control._update_count;
</del><ins>+ this._updateCount += 1;
+ updateNumber = this._updateCount;
</ins><span class="cx">
</span><del>- widget_root = control.container.find( '.widget:first' );
- widget_content = widget_root.find( '.widget-content:first' );
</del><ins>+ $widgetRoot = this.container.find( '.widget:first' );
+ $widgetContent = $widgetRoot.find( '.widget-content:first' );
</ins><span class="cx">
</span><span class="cx"> // Remove a previous error message
</span><del>- widget_content.find( '.widget-error' ).remove();
</del><ins>+ $widgetContent.find( '.widget-error' ).remove();
</ins><span class="cx">
</span><del>- control.container.addClass( 'widget-form-loading' );
- control.container.addClass( 'previewer-loading' );
</del><ins>+ this.container.addClass( 'widget-form-loading' );
+ this.container.addClass( 'previewer-loading' );
</ins><span class="cx"> processing = api.state( 'processing' );
</span><span class="cx"> processing( processing() + 1 );
</span><span class="cx">
</span><del>- if ( ! control.live_update_mode ) {
- control.container.addClass( 'widget-form-disabled' );
</del><ins>+ if ( ! this.liveUpdateMode ) {
+ this.container.addClass( 'widget-form-disabled' );
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> params = {};
</span><span class="lines">@@ -974,36 +952,35 @@
</span><span class="cx"> params.nonce = api.Widgets.data.nonce;
</span><span class="cx">
</span><span class="cx"> data = $.param( params );
</span><del>- inputs = control._getInputs( widget_content );
</del><ins>+ $inputs = this._getInputs( $widgetContent );
</ins><span class="cx">
</span><span class="cx"> // Store the value we're submitting in data so that when the response comes back,
</span><span class="cx"> // we know if it got sanitized; if there is no difference in the sanitized value,
</span><span class="cx"> // then we do not need to touch the UI and mess up the user's ongoing editing.
</span><del>- inputs.each( function() {
</del><ins>+ $inputs.each( function() {
</ins><span class="cx"> var input = $( this ),
</span><del>- property = control._getInputStatePropertyName( this );
- input.data( 'state' + update_number, input.prop( property ) );
</del><ins>+ property = self._getInputStatePropertyName( this );
+ input.data( 'state' + updateNumber, input.prop( property ) );
</ins><span class="cx"> } );
</span><span class="cx">
</span><del>- if ( instance_override ) {
- data += '&' + $.param( { 'sanitized_widget_setting': JSON.stringify( instance_override ) } );
</del><ins>+ if ( instanceOverride ) {
+ data += '&' + $.param( { 'sanitized_widget_setting': JSON.stringify( instanceOverride ) } );
</ins><span class="cx"> } else {
</span><del>- data += '&' + inputs.serialize();
</del><ins>+ data += '&' + $inputs.serialize();
</ins><span class="cx"> }
</span><del>- data += '&' + widget_content.find( '~ :input' ).serialize();
</del><ins>+ data += '&' + $widgetContent.find( '~ :input' ).serialize();
</ins><span class="cx">
</span><del>- jqxhr = $.post( wp.ajax.settings.url, data, function( r ) {
- var message,
- sanitized_form,
- sanitized_inputs,
- has_same_inputs_in_response,
- is_live_update_aborted = false;
</del><ins>+ jqxhr = $.post( wp.ajax.settings.url, data );
</ins><span class="cx">
</span><ins>+ jqxhr.done( function( r ) {
+ var message, sanitizedForm, $sanitizedInputs, hasSameInputsInResponse,
+ isLiveUpdateAborted = false;
+
</ins><span class="cx"> // Check if the user is logged out.
</span><span class="cx"> if ( '0' === r ) {
</span><span class="cx"> api.Widgets.Previewer.preview.iframe.hide();
</span><span class="cx"> api.Widgets.Previewer.login().done( function() {
</span><del>- control.updateWidget( args );
</del><ins>+ self.updateWidget( args );
</ins><span class="cx"> api.Widgets.Previewer.preview.iframe.show();
</span><span class="cx"> } );
</span><span class="cx"> return;
</span><span class="lines">@@ -1016,51 +993,50 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if ( r.success ) {
</span><del>- sanitized_form = $( '<div>' + r.data.form + '</div>' );
- sanitized_inputs = control._getInputs( sanitized_form );
- has_same_inputs_in_response = control._getInputsSignature( inputs ) === control._getInputsSignature( sanitized_inputs );
</del><ins>+ sanitizedForm = $( '<div>' + r.data.form + '</div>' );
+ $sanitizedInputs = self._getInputs( sanitizedForm );
+ hasSameInputsInResponse = self._getInputsSignature( $inputs ) === self._getInputsSignature( $sanitizedInputs );
</ins><span class="cx">
</span><span class="cx"> // Restore live update mode if sanitized fields are now aligned with the existing fields
</span><del>- if ( has_same_inputs_in_response && ! control.live_update_mode ) {
- control.live_update_mode = true;
- control.container.removeClass( 'widget-form-disabled' );
- control.container.find( 'input[name="savewidget"]' ).hide();
</del><ins>+ if ( hasSameInputsInResponse && ! self.liveUpdateMode ) {
+ self.liveUpdateMode = true;
+ self.container.removeClass( 'widget-form-disabled' );
+ self.container.find( 'input[name="savewidget"]' ).hide();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Sync sanitized field states to existing fields if they are aligned
</span><del>- if ( has_same_inputs_in_response && control.live_update_mode ) {
- inputs.each( function( i ) {
- var input = $( this ),
- sanitized_input = $( sanitized_inputs[i] ),
- property = control._getInputStatePropertyName( this ),
- submitted_state,
- sanitized_state,
- can_update_state;
</del><ins>+ if ( hasSameInputsInResponse && self.liveUpdateMode ) {
+ $inputs.each( function( i ) {
+ var $input = $( this ),
+ $sanitizedInput = $( $sanitizedInputs[i] ),
+ property = self._getInputStatePropertyName( this ),
+ submittedState, sanitizedState, canUpdateState;
</ins><span class="cx">
</span><del>- submitted_state = input.data( 'state' + update_number );
- sanitized_state = sanitized_input.prop( property );
- input.data( 'sanitized', sanitized_state );
</del><ins>+ submittedState = $input.data( 'state' + updateNumber );
+ sanitizedState = $sanitizedInput.prop( property );
+ $input.data( 'sanitized', sanitizedState );
</ins><span class="cx">
</span><del>- can_update_state = (
- submitted_state !== sanitized_state &&
- ( args.ignore_active_element || ! input.is( document.activeElement ) )
- );
- if ( can_update_state ) {
- input.prop( property, sanitized_state );
</del><ins>+ canUpdateState = ( submittedState !== sanitizedState && ( args.ignore_active_element || ! $input.is( document.activeElement ) ) );
+ if ( canUpdateState ) {
+ $input.prop( property, sanitizedState );
</ins><span class="cx"> }
</span><span class="cx"> } );
</span><del>- $( document ).trigger( 'widget-synced', [ widget_root, r.data.form ] );
</del><span class="cx">
</span><ins>+ $( document ).trigger( 'widget-synced', [ $widgetRoot, r.data.form ] );
+
</ins><span class="cx"> // Otherwise, if sanitized fields are not aligned with existing fields, disable live update mode if enabled
</span><del>- } else if ( control.live_update_mode ) {
- control.live_update_mode = false;
- control.container.find( 'input[name="savewidget"]' ).show();
- is_live_update_aborted = true;
</del><ins>+ } else if ( self.liveUpdateMode ) {
+ self.liveUpdateMode = false;
+ self.container.find( 'input[name="savewidget"]' ).show();
+ isLiveUpdateAborted = true;
+
</ins><span class="cx"> // Otherwise, replace existing form with the sanitized form
</span><span class="cx"> } else {
</span><del>- widget_content.html( r.data.form );
- control.container.removeClass( 'widget-form-disabled' );
- $( document ).trigger( 'widget-updated', [ widget_root ] );
</del><ins>+ $widgetContent.html( r.data.form );
+
+ self.container.removeClass( 'widget-form-disabled' );
+
+ $( document ).trigger( 'widget-updated', [ $widgetRoot ] );
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> /**
</span><span class="lines">@@ -1068,40 +1044,46 @@
</span><span class="cx"> * needing to be rendered, and so we can preempt the event for the
</span><span class="cx"> * preview finishing loading.
</span><span class="cx"> */
</span><del>- is_changed = ! is_live_update_aborted && ! _( control.setting() ).isEqual( r.data.instance );
- if ( is_changed ) {
- control.is_widget_updating = true; // suppress triggering another updateWidget
- control.setting( r.data.instance );
- control.is_widget_updating = false;
</del><ins>+ isChanged = ! isLiveUpdateAborted && ! _( self.setting() ).isEqual( r.data.instance );
+ if ( isChanged ) {
+ self.isWidgetUpdating = true; // suppress triggering another updateWidget
+ self.setting( r.data.instance );
+ self.isWidgetUpdating = false;
</ins><span class="cx"> } else {
</span><span class="cx"> // no change was made, so stop the spinner now instead of when the preview would updates
</span><del>- control.container.removeClass( 'previewer-loading' );
</del><ins>+ self.container.removeClass( 'previewer-loading' );
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- if ( complete_callback ) {
- complete_callback.call( control, null, { no_change: ! is_changed, ajax_finished: true } );
</del><ins>+ if ( completeCallback ) {
+ completeCallback.call( self, null, { no_change: ! isChanged, ajax_finished: true } );
</ins><span class="cx"> }
</span><span class="cx"> } else {
</span><ins>+ // General error message
</ins><span class="cx"> message = l10n.error;
</span><ins>+
</ins><span class="cx"> if ( r.data && r.data.message ) {
</span><span class="cx"> message = r.data.message;
</span><span class="cx"> }
</span><del>- if ( complete_callback ) {
- complete_callback.call( control, message );
</del><ins>+
+ if ( completeCallback ) {
+ completeCallback.call( self, message );
</ins><span class="cx"> } else {
</span><del>- widget_content.prepend( '<p class="widget-error"><strong>' + message + '</strong></p>' );
</del><ins>+ $widgetContent.prepend( '<p class="widget-error"><strong>' + message + '</strong></p>' );
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx"> } );
</span><ins>+
</ins><span class="cx"> jqxhr.fail( function( jqXHR, textStatus ) {
</span><del>- if ( complete_callback ) {
- complete_callback.call( control, textStatus );
</del><ins>+ if ( completeCallback ) {
+ completeCallback.call( self, textStatus );
</ins><span class="cx"> }
</span><span class="cx"> } );
</span><ins>+
</ins><span class="cx"> jqxhr.always( function() {
</span><del>- control.container.removeClass( 'widget-form-loading' );
- inputs.each( function() {
- $( this ).removeData( 'state' + update_number );
</del><ins>+ self.container.removeClass( 'widget-form-loading' );
+
+ $inputs.each( function() {
+ $( this ).removeData( 'state' + updateNumber );
</ins><span class="cx"> } );
</span><span class="cx">
</span><span class="cx"> processing( processing() - 1 );
</span><span class="lines">@@ -1110,12 +1092,12 @@
</span><span class="cx">
</span><span class="cx"> /**
</span><span class="cx"> * Expand the accordion section containing a control
</span><del>- * @todo it would be nice if accordion had a proper API instead of having to trigger UI events on its elements
</del><span class="cx"> */
</span><span class="cx"> expandControlSection: function() {
</span><del>- var section = this.container.closest( '.accordion-section' );
- if ( ! section.hasClass( 'open' ) ) {
- section.find( '.accordion-section-title:first' ).trigger( 'click' );
</del><ins>+ var $section = this.container.closest( '.accordion-section' );
+
+ if ( ! $section.hasClass( 'open' ) ) {
+ $section.find( '.accordion-section-title:first' ).trigger( 'click' );
</ins><span class="cx"> }
</span><span class="cx"> },
</span><span class="cx">
</span><span class="lines">@@ -1136,55 +1118,59 @@
</span><span class="cx"> /**
</span><span class="cx"> * Expand or collapse the widget control
</span><span class="cx"> *
</span><del>- * @param {boolean|undefined} [do_expand] If not supplied, will be inverse of current visibility
</del><ins>+ * @param {boolean|undefined} [showOrHide] If not supplied, will be inverse of current visibility
</ins><span class="cx"> */
</span><del>- toggleForm: function( do_expand ) {
- var control = this, widget, inside, complete;
</del><ins>+ toggleForm: function( showOrHide ) {
+ var self = this, $widget, $inside, complete;
</ins><span class="cx">
</span><del>- widget = control.container.find( 'div.widget:first' );
- inside = widget.find( '.widget-inside:first' );
- if ( typeof do_expand === 'undefined' ) {
- do_expand = ! inside.is( ':visible' );
</del><ins>+ $widget = this.container.find( 'div.widget:first' );
+ $inside = $widget.find( '.widget-inside:first' );
+ if ( typeof showOrHide === 'undefined' ) {
+ showOrHide = ! $inside.is( ':visible' );
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Already expanded or collapsed, so noop
</span><del>- if ( inside.is( ':visible' ) === do_expand ) {
</del><ins>+ if ( $inside.is( ':visible' ) === showOrHide ) {
</ins><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- if ( do_expand ) {
</del><ins>+ if ( showOrHide ) {
</ins><span class="cx"> // Close all other widget controls before expanding this one
</span><del>- api.control.each( function( other_control ) {
- if ( control.params.type === other_control.params.type && control !== other_control ) {
- other_control.collapseForm();
</del><ins>+ api.control.each( function( otherControl ) {
+ if ( self.params.type === otherControl.params.type && self !== otherControl ) {
+ otherControl.collapseForm();
</ins><span class="cx"> }
</span><span class="cx"> } );
</span><span class="cx">
</span><span class="cx"> complete = function() {
</span><del>- control.container.removeClass( 'expanding' );
- control.container.addClass( 'expanded' );
- control.container.trigger( 'expanded' );
</del><ins>+ self.container.removeClass( 'expanding' );
+ self.container.addClass( 'expanded' );
+ self.container.trigger( 'expanded' );
</ins><span class="cx"> };
</span><del>- if ( control.params.is_wide ) {
- inside.fadeIn( 'fast', complete );
</del><ins>+
+ if ( self.params.is_wide ) {
+ $inside.fadeIn( 'fast', complete );
</ins><span class="cx"> } else {
</span><del>- inside.slideDown( 'fast', complete );
</del><ins>+ $inside.slideDown( 'fast', complete );
</ins><span class="cx"> }
</span><del>- control.container.trigger( 'expand' );
- control.container.addClass( 'expanding' );
</del><ins>+
+ self.container.trigger( 'expand' );
+ self.container.addClass( 'expanding' );
</ins><span class="cx"> } else {
</span><del>- control.container.trigger( 'collapse' );
- control.container.addClass( 'collapsing' );
</del><span class="cx"> complete = function() {
</span><del>- control.container.removeClass( 'collapsing' );
- control.container.removeClass( 'expanded' );
- control.container.trigger( 'collapsed' );
</del><ins>+ self.container.removeClass( 'collapsing' );
+ self.container.removeClass( 'expanded' );
+ self.container.trigger( 'collapsed' );
</ins><span class="cx"> };
</span><del>- if ( control.params.is_wide ) {
- inside.fadeOut( 'fast', complete );
</del><ins>+
+ self.container.trigger( 'collapse' );
+ self.container.addClass( 'collapsing' );
+
+ if ( self.params.is_wide ) {
+ $inside.fadeOut( 'fast', complete );
</ins><span class="cx"> } else {
</span><del>- inside.slideUp( 'fast', function() {
- widget.css( { width:'', margin:'' } );
</del><ins>+ $inside.slideUp( 'fast', function() {
+ $widget.css( { width:'', margin:'' } );
</ins><span class="cx"> complete();
</span><span class="cx"> } );
</span><span class="cx"> }
</span><span class="lines">@@ -1196,28 +1182,26 @@
</span><span class="cx"> * the first input in the control
</span><span class="cx"> */
</span><span class="cx"> focus: function() {
</span><del>- var control = this;
- control.expandControlSection();
- control.expandForm();
- control.container.find( '.widget-content :focusable:first' ).focus();
</del><ins>+ this.expandControlSection();
+ this.expandForm();
+ this.container.find( '.widget-content :focusable:first' ).focus();
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> /**
</span><span class="cx"> * Get the position (index) of the widget in the containing sidebar
</span><span class="cx"> *
</span><del>- * @throws Error
</del><span class="cx"> * @returns {Number}
</span><span class="cx"> */
</span><span class="cx"> getWidgetSidebarPosition: function() {
</span><del>- var control = this,
- sidebar_widget_ids,
- position;
</del><ins>+ var sidebarWidgetIds, position;
</ins><span class="cx">
</span><del>- sidebar_widget_ids = control.getSidebarWidgetsControl().setting();
- position = _.indexOf( sidebar_widget_ids, control.params.widget_id );
</del><ins>+ sidebarWidgetIds = this.getSidebarWidgetsControl().setting();
+ position = _.indexOf( sidebarWidgetIds, this.params.widget_id );
+
</ins><span class="cx"> if ( position === -1 ) {
</span><del>- throw new Error( 'Widget was unexpectedly not present in the sidebar.' );
</del><ins>+ return;
</ins><span class="cx"> }
</span><ins>+
</ins><span class="cx"> return position;
</span><span class="cx"> },
</span><span class="cx">
</span><span class="lines">@@ -1241,71 +1225,66 @@
</span><span class="cx"> * @param {Number} offset 1|-1
</span><span class="cx"> */
</span><span class="cx"> _moveWidgetByOne: function( offset ) {
</span><del>- var control = this,
- i,
- sidebar_widgets_setting,
- sidebar_widget_ids,
- adjacent_widget_id;
</del><ins>+ var i, sidebarWidgetsSetting, sidebarWidgetIds, adjacentWidgetId;
</ins><span class="cx">
</span><del>- i = control.getWidgetSidebarPosition();
</del><ins>+ i = this.getWidgetSidebarPosition();
</ins><span class="cx">
</span><del>- sidebar_widgets_setting = control.getSidebarWidgetsControl().setting;
- sidebar_widget_ids = Array.prototype.slice.call( sidebar_widgets_setting() ); // clone
- adjacent_widget_id = sidebar_widget_ids[i + offset];
- sidebar_widget_ids[i + offset] = control.params.widget_id;
- sidebar_widget_ids[i] = adjacent_widget_id;
</del><ins>+ sidebarWidgetsSetting = this.getSidebarWidgetsControl().setting;
+ sidebarWidgetIds = Array.prototype.slice.call( sidebarWidgetsSetting() ); // clone
+ adjacentWidgetId = sidebarWidgetIds[i + offset];
+ sidebarWidgetIds[i + offset] = this.params.widget_id;
+ sidebarWidgetIds[i] = adjacentWidgetId;
</ins><span class="cx">
</span><del>- sidebar_widgets_setting( sidebar_widget_ids );
</del><ins>+ sidebarWidgetsSetting( sidebarWidgetIds );
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> /**
</span><span class="cx"> * Toggle visibility of the widget move area
</span><span class="cx"> *
</span><del>- * @param {Boolean} [toggle]
</del><ins>+ * @param {Boolean} [showOrHide]
</ins><span class="cx"> */
</span><del>- toggleWidgetMoveArea: function( toggle ) {
- var control = this, move_widget_area;
- move_widget_area = control.container.find( '.move-widget-area' );
- if ( typeof toggle === 'undefined' ) {
- toggle = ! move_widget_area.hasClass( 'active' );
</del><ins>+ toggleWidgetMoveArea: function( showOrHide ) {
+ var self = this, $moveWidgetArea;
+
+ $moveWidgetArea = this.container.find( '.move-widget-area' );
+
+ if ( typeof showOrHide === 'undefined' ) {
+ showOrHide = ! $moveWidgetArea.hasClass( 'active' );
</ins><span class="cx"> }
</span><del>- if ( toggle ) {
</del><ins>+
+ if ( showOrHide ) {
</ins><span class="cx"> // reset the selected sidebar
</span><del>- move_widget_area.find( '.selected' ).removeClass( 'selected' );
- move_widget_area.find( 'li' ).filter( function() {
- return $( this ).data( 'id' ) === control.params.sidebar_id;
</del><ins>+ $moveWidgetArea.find( '.selected' ).removeClass( 'selected' );
+
+ $moveWidgetArea.find( 'li' ).filter( function() {
+ return $( this ).data( 'id' ) === self.params.sidebar_id;
</ins><span class="cx"> } ).addClass( 'selected' );
</span><del>- control.container.find( '.move-widget-btn' ).prop( 'disabled', true );
</del><ins>+
+ this.container.find( '.move-widget-btn' ).prop( 'disabled', true );
</ins><span class="cx"> }
</span><del>- move_widget_area.toggleClass( 'active', toggle );
- },
</del><span class="cx">
</span><del>- /**
- * Inside of the customizer preview, scroll the widget into view
- */
- scrollPreviewWidgetIntoView: function() {
- // @todo scrollIntoView() provides a robust but very poor experience. Animation is needed. See https://github.com/x-team/wp-widget-customizer/issues/16
</del><ins>+ $moveWidgetArea.toggleClass( 'active', showOrHide );
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> /**
</span><span class="cx"> * Highlight the widget control and section
</span><span class="cx"> */
</span><span class="cx"> highlightSectionAndControl: function() {
</span><del>- var control = this, target_element;
</del><ins>+ var $target;
</ins><span class="cx">
</span><del>- if ( control.container.is( ':hidden' ) ) {
- target_element = control.container.closest( '.control-section' );
</del><ins>+ if ( this.container.is( ':hidden' ) ) {
+ $target = this.container.closest( '.control-section' );
</ins><span class="cx"> } else {
</span><del>- target_element = control.container;
</del><ins>+ $target = this.container;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- $( '.widget-customizer-highlighted' ).removeClass( 'widget-customizer-highlighted' );
- target_element.addClass( 'widget-customizer-highlighted' );
</del><ins>+ $( '.highlighted' ).removeClass( 'highlighted' );
+ $target.addClass( 'highlighted' );
+
</ins><span class="cx"> setTimeout( function() {
</span><del>- target_element.removeClass( 'widget-customizer-highlighted' );
</del><ins>+ $target.removeClass( 'highlighted' );
</ins><span class="cx"> }, 500 );
</span><span class="cx"> }
</span><del>-
</del><span class="cx"> } );
</span><span class="cx">
</span><span class="cx"> /**
</span><span class="lines">@@ -1601,7 +1580,7 @@
</span><span class="cx"> var control = this, form_controls;
</span><span class="cx">
</span><span class="cx"> form_controls = _( control.setting() ).map( function( widget_id ) {
</span><del>- var setting_id = widget_id_to_setting_id( widget_id ),
</del><ins>+ var setting_id = widgetIdToSettingId( widget_id ),
</ins><span class="cx"> form_control = api.control( setting_id );
</span><span class="cx">
</span><span class="cx"> if ( ! form_control ) {
</span><span class="lines">@@ -1815,7 +1794,7 @@
</span><span class="cx"> */
</span><span class="cx"> api.Widgets.getSidebarWidgetControlContainingWidget = function( widget_id ) {
</span><span class="cx"> var found_control = null;
</span><del>- // @todo this can use widget_id_to_setting_id(), then pass into wp.customize.control( x ).getSidebarWidgetsControl()
</del><ins>+ // @todo this can use widgetIdToSettingId(), then pass into wp.customize.control( x ).getSidebarWidgetsControl()
</ins><span class="cx"> api.control.each( function( control ) {
</span><span class="cx"> if ( control.params.type === 'sidebar_widgets' && -1 !== _.indexOf( control.setting(), widget_id ) ) {
</span><span class="cx"> found_control = control;
</span><span class="lines">@@ -1832,7 +1811,7 @@
</span><span class="cx"> */
</span><span class="cx"> api.Widgets.getWidgetFormControlForWidget = function( widget_id ) {
</span><span class="cx"> var found_control = null;
</span><del>- // @todo We can just use widget_id_to_setting_id() here
</del><ins>+ // @todo We can just use widgetIdToSettingId() here
</ins><span class="cx"> api.control.each( function( control ) {
</span><span class="cx"> if ( control.params.type === 'widget_form' && control.params.widget_id === widget_id ) {
</span><span class="cx"> found_control = control;
</span><span class="lines">@@ -1864,16 +1843,16 @@
</span><span class="cx">
</span><span class="cx"> /**
</span><span class="cx"> * @param {String} widget_id
</span><del>- * @returns {String} setting_id
</del><ins>+ * @returns {String} settingId
</ins><span class="cx"> */
</span><del>- function widget_id_to_setting_id( widget_id ) {
- var parsed = parse_widget_id( widget_id ), setting_id;
</del><ins>+ function widgetIdToSettingId( widget_id ) {
+ var parsed = parse_widget_id( widget_id ), settingId;
</ins><span class="cx">
</span><del>- setting_id = 'widget_' + parsed.id_base;
</del><ins>+ settingId = 'widget_' + parsed.id_base;
</ins><span class="cx"> if ( parsed.number ) {
</span><del>- setting_id += '[' + parsed.number + ']';
</del><ins>+ settingId += '[' + parsed.number + ']';
</ins><span class="cx"> }
</span><del>- return setting_id;
</del><ins>+ return settingId;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> })( window.wp, jQuery );
</span></span></pre>
</div>
</div>
</body>
</html>