WordPress.org
Get WordPress

Make WordPress Core

Changeset 27988


Ignore:
Timestamp:
04/07/2014 04:31:52 PM (12 years ago)
Author:
ocean90
Message:

Widget Customizer: Cleanup wp.customize.Widgets.WidgetControl.

see #27690.

Location:
trunk/src/wp-admin
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/customize-widgets.css

    r27985 r27988  
    9696}
    9797
    98 .control-section.accordion-section.widget-customizer-highlighted > .accordion-section-title,
    99 .customize-control-widget_form.widget-customizer-highlighted {
     98.control-section.accordion-section.highlighted > .accordion-section-title,
     99.customize-control-widget_form.highlighted {
    100100        outline: none;
    101101        -webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8);

  • trunk/src/wp-admin/js/customize-widgets.js

    r27986 r27988  
    178178
    179179                        this.listenTo( this.collection, 'update', this.updateList );
     180                        this.listenTo( this.collection, 'change', this.updateList );
    180181
    181182                        this.updateList();
    … …  
    411412                 */
    412413                ready: function() {
    413                         var control = this;
    414                         control._setupModel();
    415                         control._setupWideWidget();
    416                         control._setupControlToggle();
    417                         control._setupWidgetTitle();
    418                         control._setupReorderUI();
    419                         control._setupHighlightEffects();
    420                         control._setupUpdateUI();
    421                         control._setupRemoveUI();
     414                        this._setupModel();
     415                        this._setupWideWidget();
     416                        this._setupControlToggle();
     417                        this._setupWidgetTitle();
     418                        this._setupReorderUI();
     419                        this._setupHighlightEffects();
     420                        this._setupUpdateUI();
     421                        this._setupRemoveUI();
    422422                },
    423423
    … …  
    426426                 */
    427427                _setupModel: function() {
    428                         var control = this, remember_saved_widget_id;
     428                        var self = this, rememberSavedWidgetId;
    429429
    430430                        api.Widgets.savedWidgetIds = api.Widgets.savedWidgetIds || [];
    431431
    432432                        // Remember saved widgets so we know which to trash (move to inactive widgets sidebar)
    433                         remember_saved_widget_id = function() {
    434                                 api.Widgets.savedWidgetIds[control.params.widget_id] = true;
     433                        rememberSavedWidgetId = function() {
     434                                api.Widgets.savedWidgetIds[self.params.widget_id] = true;
    435435                        };
    436                         api.bind( 'ready', remember_saved_widget_id );
    437                         api.bind( 'saved', remember_saved_widget_id );
    438 
    439                         control._update_count = 0;
    440                         control.is_widget_updating = false;
    441                         control.live_update_mode = true;
     436                        api.bind( 'ready', rememberSavedWidgetId );
     437                        api.bind( 'saved', rememberSavedWidgetId );
     438
     439                        this._updateCount = 0;
     440                        this.isWidgetUpdating = false;
     441                        this.liveUpdateMode = true;
    442442
    443443                        // Update widget whenever model changes
    444                         control.setting.bind( function( to, from ) {
    445                                 if ( ! _( from ).isEqual( to ) && ! control.is_widget_updating ) {
    446                                         control.updateWidget( { instance: to } );
     444                        this.setting.bind( function( to, from ) {
     445                                if ( ! _( from ).isEqual( to ) && ! self.isWidgetUpdating ) {
     446                                        self.updateWidget( { instance: to } );
    447447                                }
    448448                        } );
    … …  
    453453                 */
    454454                _setupWideWidget: function() {
    455                         var control = this,
    456                                 widget_inside,
    457                                 widget_form,
    458                                 customize_sidebar,
    459                                 position_widget,
    460                                 theme_controls_container;
    461 
    462                         if ( ! control.params.is_wide ) {
     455                        var self = this, $widgetInside, $widgetForm, $customizeSidebar,
     456                                $themeControlsContainer, positionWidget;
     457
     458                        if ( ! this.params.is_wide ) {
    463459                                return;
    464460                        }
    465461
    466                         widget_inside = control.container.find( '.widget-inside' );
    467                         widget_form = widget_inside.find( '> .form' );
    468                         customize_sidebar = $( '.wp-full-overlay-sidebar-content:first' );
    469                         control.container.addClass( 'wide-widget-control' );
    470 
    471                         control.container.find( '.widget-content:first' ).css( {
    472                                 'max-width': control.params.width,
    473                                 'min-height': control.params.height
     462                        $widgetInside = this.container.find( '.widget-inside' );
     463                        $widgetForm = $widgetInside.find( '> .form' );
     464                        $customizeSidebar = $( '.wp-full-overlay-sidebar-content:first' );
     465                        this.container.addClass( 'wide-widget-control' );
     466
     467                        this.container.find( '.widget-content:first' ).css( {
     468                                'max-width': this.params.width,
     469                                'min-height': this.params.height
    474470                        } );
    475471
    … …  
    483479                         * will become scrollable (overflow:auto).
    484480                         */
    485                         position_widget = function() {
    486                                 var offset_top = control.container.offset().top,
    487                                         window_height = $( window ).height(),
    488                                         form_height = widget_form.outerHeight(),
     481                        positionWidget = function() {
     482                                var offsetTop = self.container.offset().top,
     483                                        windowHeight = $( window ).height(),
     484                                        formHeight = $widgetForm.outerHeight(),
    489485                                        top;
    490                                 widget_inside.css( 'max-height', window_height );
     486                                $widgetInside.css( 'max-height', windowHeight );
    491487                                top = Math.max(
    492488                                        0, // prevent top from going off screen
    493489                                        Math.min(
    494                                                 Math.max( offset_top, 0 ), // distance widget in panel is from top of screen
    495                                                 window_height - form_height // flush up against bottom of screen
     490                                                Math.max( offsetTop, 0 ), // distance widget in panel is from top of screen
     491                                                windowHeight - formHeight // flush up against bottom of screen
    496492                                        )
    497493                                );
    498                                 widget_inside.css( 'top', top );
     494                                $widgetInside.css( 'top', top );
    499495                        };
    500496
    501                         theme_controls_container = $( '#customize-theme-controls' );
    502                         control.container.on( 'expand', function() {
    503                                 position_widget();
    504                                 customize_sidebar.on( 'scroll', position_widget );
    505                                 $( window ).on( 'resize', position_widget );
    506                                 theme_controls_container.on( 'expanded collapsed', position_widget );
    507                         } );
    508                         control.container.on( 'collapsed', function() {
    509                                 customize_sidebar.off( 'scroll', position_widget );
    510                                 $( window ).off( 'resize', position_widget );
    511                                 theme_controls_container.off( 'expanded collapsed', position_widget );
     497                        $themeControlsContainer = $( '#customize-theme-controls' );
     498                        this.container.on( 'expand', function() {
     499                                positionWidget();
     500                                $customizeSidebar.on( 'scroll', positionWidget );
     501                                $( window ).on( 'resize', positionWidget );
     502                                $themeControlsContainer.on( 'expanded collapsed', positionWidget );
     503                        } );
     504                        this.container.on( 'collapsed', function() {
     505                                $customizeSidebar.off( 'scroll', positionWidget );
     506                                $( window ).off( 'resize', positionWidget );
     507                                $themeControlsContainer.off( 'expanded collapsed', positionWidget );
    512508                        } );
    513509
    … …  
    516512                                if ( 0 === setting.id.indexOf( 'sidebars_widgets[' ) ) {
    517513                                        setting.bind( function() {
    518                                                 if ( control.container.hasClass( 'expanded' ) ) {
    519                                                         position_widget();
     514                                                if ( self.container.hasClass( 'expanded' ) ) {
     515                                                        positionWidget();
    520516                                                }
    521517                                        } );
    … …  
    529525                 */
    530526                _setupControlToggle: function() {
    531                         var control = this, close_btn;
    532 
    533                         control.container.find( '.widget-top' ).on( 'click', function( e ) {
     527                        var self = this, $closeBtn;
     528
     529                        this.container.find( '.widget-top' ).on( 'click', function( e ) {
    534530                                e.preventDefault();
    535                                 var sidebar_widgets_control = control.getSidebarWidgetsControl();
    536                                 if ( sidebar_widgets_control.is_reordering ) {
     531                                var sidebarWidgetsControl = self.getSidebarWidgetsControl();
     532                                if ( sidebarWidgetsControl.is_reordering ) {
    537533                                        return;
    538534                                }
    539                                 control.toggleForm();
    540                         } );
    541 
    542                         close_btn = control.container.find( '.widget-control-close' );
    543                         // @todo Hitting Enter on this link does nothing; will be resolved in core with <http://core.trac.wordpress.org/ticket/26633>
    544                         close_btn.on( 'click', function( e ) {
     535                                self.toggleForm();
     536                        } );
     537
     538                        $closeBtn = this.container.find( '.widget-control-close' );
     539                        $closeBtn.on( 'click', function( e ) {
    545540                                e.preventDefault();
    546                                 control.collapseForm();
    547                                 control.container.find( '.widget-top .widget-action:first' ).focus(); // keyboard accessibility
     541                                self.collapseForm();
     542                                self.container.find( '.widget-top .widget-action:first' ).focus(); // keyboard accessibility
    548543                        } );
    549544                },
    … …  
    553548                 */
    554549                _setupWidgetTitle: function() {
    555                         var control = this, update_title;
    556 
    557                         update_title = function() {
    558                                 var title = control.setting().title,
    559                                         in_widget_title = control.container.find( '.in-widget-title' );
     550                        var self = this, updateTitle;
     551
     552                        updateTitle = function() {
     553                                var title = self.setting().title,
     554                                        inWidgetTitle = self.container.find( '.in-widget-title' );
    560555
    561556                                if ( title ) {
    562                                         in_widget_title.text( ': ' + title );
     557                                        inWidgetTitle.text( ': ' + title );
    563558                                } else {
    564                                         in_widget_title.text( '' );
     559                                        inWidgetTitle.text( '' );
    565560                                }
    566561                        };
    567                         control.setting.bind( update_title );
    568                         update_title();
     562                        this.setting.bind( updateTitle );
     563                        updateTitle();
    569564                },
    570565
    … …  
    573568                 */
    574569                _setupReorderUI: function() {
    575                         var control = this,
    576                                 select_sidebar_item,
    577                                 move_widget_area,
    578                                 reorder_nav,
    579                                 update_available_sidebars;
     570                        var self = this, selectSidebarItem, $moveWidgetArea,
     571                                $reorderNav, updateAvailableSidebars;
    580572
    581573                        /**
    … …  
    584576                         * @param {jQuery} li
    585577                         */
    586                         select_sidebar_item = function( li ) {
     578                        selectSidebarItem = function( li ) {
    587579                                li.siblings( '.selected' ).removeClass( 'selected' );
    588580                                li.addClass( 'selected' );
    589                                 var is_self_sidebar = ( li.data( 'id' ) === control.params.sidebar_id );
    590                                 control.container.find( '.move-widget-btn' ).prop( 'disabled', is_self_sidebar );
     581                                var isSelfSidebar = ( li.data( 'id' ) === self.params.sidebar_id );
     582                                self.container.find( '.move-widget-btn' ).prop( 'disabled', isSelfSidebar );
    591583                        };
    592584
    … …  
    594586                         * Add the widget reordering elements to the widget control
    595587                         */
    596                         control.container.find( '.widget-title-action' ).after( $( api.Widgets.data.tpl.widgetReorderNav ) );
    597                         move_widget_area = $(
     588                        this.container.find( '.widget-title-action' ).after( $( api.Widgets.data.tpl.widgetReorderNav ) );
     589                        $moveWidgetArea = $(
    598590                                _.template( api.Widgets.data.tpl.moveWidgetArea, {
    599591                                        sidebars: _( api.Widgets.registeredSidebars.toArray() ).pluck( 'attributes' )
    600592                                } )
    601593                        );
    602                         control.container.find( '.widget-top' ).after( move_widget_area );
     594                        this.container.find( '.widget-top' ).after( $moveWidgetArea );
    603595
    604596                        /**
    605597                         * Update available sidebars when their rendered state changes
    606598                         */
    607                         update_available_sidebars = function() {
    608                                 var sidebar_items = move_widget_area.find( 'li' ), self_sidebar_item;
    609                                 self_sidebar_item = sidebar_items.filter( function(){
    610                                         return $( this ).data( 'id' ) === control.params.sidebar_id;
     599                        updateAvailableSidebars = function() {
     600                                var $sidebarItems = $moveWidgetArea.find( 'li' ), selfSidebarItem;
     601
     602                                selfSidebarItem = $sidebarItems.filter( function(){
     603                                        return $( this ).data( 'id' ) === self.params.sidebar_id;
    611604                                } );
    612                                 sidebar_items.each( function() {
     605
     606                                $sidebarItems.each( function() {
    613607                                        var li = $( this ),
    614                                                 sidebar_id,
     608                                                sidebarId,
    615609                                                sidebar_model;
    616610
    617                                         sidebar_id = li.data( 'id' );
    618                                         sidebar_model = api.Widgets.registeredSidebars.get( sidebar_id );
     611                                        sidebarId = li.data( 'id' );
     612                                        sidebar_model = api.Widgets.registeredSidebars.get( sidebarId );
     613
    619614                                        li.toggle( sidebar_model.get( 'is_rendered' ) );
     615
    620616                                        if ( li.hasClass( 'selected' ) && ! sidebar_model.get( 'is_rendered' ) ) {
    621                                                 select_sidebar_item( self_sidebar_item );
     617                                                selectSidebarItem( selfSidebarItem );
    622618                                        }
    623619                                } );
    624620                        };
    625                         update_available_sidebars();
    626                         api.Widgets.registeredSidebars.on( 'change:is_rendered', update_available_sidebars );
     621
     622                        updateAvailableSidebars();
     623                        api.Widgets.registeredSidebars.on( 'change:is_rendered', updateAvailableSidebars );
    627624
    628625                        /**
    629626                         * Handle clicks for up/down/move on the reorder nav
    630627                         */
    631                         reorder_nav = control.container.find( '.widget-reorder-nav' );
    632                         reorder_nav.find( '.move-widget, .move-widget-down, .move-widget-up' ).on( 'click keypress', function( event ) {
     628                        $reorderNav = this.container.find( '.widget-reorder-nav' );
     629                        $reorderNav.find( '.move-widget, .move-widget-down, .move-widget-up' ).on( 'click keypress', function( event ) {
    633630                                if ( event.type === 'keypress' && ( event.which !== 13 && event.which !== 32 ) ) {
    634631                                        return;
    … …  
    637634
    638635                                if ( $( this ).is( '.move-widget' ) ) {
    639                                         control.toggleWidgetMoveArea();
     636                                        self.toggleWidgetMoveArea();
    640637                                } else {
    641                                         var is_move_down = $( this ).is( '.move-widget-down' ),
    642                                                 is_move_up = $( this ).is( '.move-widget-up' ),
    643                                                 i = control.getWidgetSidebarPosition();
    644 
    645                                         if ( ( is_move_up && i === 0 ) || ( is_move_down && i === control.getSidebarWidgetsControl().setting().length - 1 ) ) {
     638                                        var isMoveDown = $( this ).is( '.move-widget-down' ),
     639                                                isMoveUp = $( this ).is( '.move-widget-up' ),
     640                                                i = self.getWidgetSidebarPosition();
     641
     642                                        if ( ( isMoveUp && i === 0 ) || ( isMoveDown && i === self.getSidebarWidgetsControl().setting().length - 1 ) ) {
    646643                                                return;
    647644                                        }
    648645
    649                                         if ( is_move_up ) {
    650                                                 control.moveUp();
     646                                        if ( isMoveUp ) {
     647                                                self.moveUp();
    651648                                        } else {
    652                                                 control.moveDown();
     649                                                self.moveDown();
    653650                                        }
    654651
    … …  
    660657                         * Handle selecting a sidebar to move to
    661658                         */
    662                         control.container.find( '.widget-area-select' ).on( 'click keypress', 'li', function( e ) {
     659                        this.container.find( '.widget-area-select' ).on( 'click keypress', 'li', function( e ) {
    663660                                if ( event.type === 'keypress' && ( event.which !== 13 && event.which !== 32 ) ) {
    664661                                        return;
    665662                                }
    666663                                e.preventDefault();
    667                                 select_sidebar_item( $( this ) );
     664                                selectSidebarItem( $( this ) );
    668665                        } );
    669666
    … …  
    671668                         * Move widget to another sidebar
    672669                         */
    673                         control.container.find( '.move-widget-btn' ).click( function() {
    674                                 control.getSidebarWidgetsControl().toggleReordering( false );
    675 
    676                                 var old_sidebar_id = control.params.sidebar_id,
    677                                         new_sidebar_id = control.container.find( '.widget-area-select li.selected' ).data( 'id' ),
    678                                         old_sidebar_widgets_setting,
    679                                         new_sidebar_widgets_setting,
    680                                         old_sidebar_widget_ids,
    681                                         new_sidebar_widget_ids,
    682                                         i;
    683 
    684                                 old_sidebar_widgets_setting = api( 'sidebars_widgets[' + old_sidebar_id + ']' );
    685                                 new_sidebar_widgets_setting = api( 'sidebars_widgets[' + new_sidebar_id + ']' );
    686                                 old_sidebar_widget_ids = Array.prototype.slice.call( old_sidebar_widgets_setting() );
    687                                 new_sidebar_widget_ids = Array.prototype.slice.call( new_sidebar_widgets_setting() );
    688 
    689                                 i = control.getWidgetSidebarPosition();
    690                                 old_sidebar_widget_ids.splice( i, 1 );
    691                                 new_sidebar_widget_ids.push( control.params.widget_id );
    692 
    693                                 old_sidebar_widgets_setting( old_sidebar_widget_ids );
    694                                 new_sidebar_widgets_setting( new_sidebar_widget_ids );
    695 
    696                                 control.focus();
     670                        this.container.find( '.move-widget-btn' ).click( function() {
     671                                self.getSidebarWidgetsControl().toggleReordering( false );
     672
     673                                var oldSidebarId = self.params.sidebar_id,
     674                                        newSidebarId = self.container.find( '.widget-area-select li.selected' ).data( 'id' ),
     675                                        oldSidebarWidgetsSetting, newSidebarWidgetsSetting,
     676                                        oldSidebarWidgetIds, newSidebarWidgetIds, i;
     677
     678                                oldSidebarWidgetsSetting = api( 'sidebars_widgets[' + oldSidebarId + ']' );
     679                                newSidebarWidgetsSetting = api( 'sidebars_widgets[' + newSidebarId + ']' );
     680                                oldSidebarWidgetIds = Array.prototype.slice.call( oldSidebarWidgetsSetting() );
     681                                newSidebarWidgetIds = Array.prototype.slice.call( newSidebarWidgetsSetting() );
     682
     683                                i = self.getWidgetSidebarPosition();
     684                                oldSidebarWidgetIds.splice( i, 1 );
     685                                newSidebarWidgetIds.push( self.params.widget_id );
     686
     687                                oldSidebarWidgetsSetting( oldSidebarWidgetIds );
     688                                newSidebarWidgetsSetting( newSidebarWidgetIds );
     689
     690                                self.focus();
    697691                        } );
    698692                },
    … …  
    702696                 */
    703697                _setupHighlightEffects: function() {
    704                         var control = this;
     698                        var self = this;
    705699
    706700                        // Highlight whenever hovering or clicking over the form
    707                         control.container.on( 'mouseenter click', function() {
    708                                 control.setting.previewer.send( 'highlight-widget', control.params.widget_id );
     701                        this.container.on( 'mouseenter click', function() {
     702                                self.setting.previewer.send( 'highlight-widget', self.params.widget_id );
    709703                        } );
    710704
    711705                        // Highlight when the setting is updated
    712                         control.setting.bind( function() {
    713                                 control.setting.previewer.send( 'highlight-widget', control.params.widget_id );
    714                         } );
    715 
    716                         // Highlight when the widget form is expanded
    717                         control.container.on( 'expand', function() {
    718                                 control.scrollPreviewWidgetIntoView();
     706                        this.setting.bind( function() {
     707                                self.setting.previewer.send( 'highlight-widget', self.params.widget_id );
    719708                        } );
    720709                },
    … …  
    724713                 */
    725714                _setupUpdateUI: function() {
    726                         var control = this,
    727                                 widget_root,
    728                                 widget_content,
    729                                 save_btn,
    730                                 update_widget_debounced,
    731                                 form_update_event_handler;
    732 
    733                         widget_root = control.container.find( '.widget:first' );
    734                         widget_content = widget_root.find( '.widget-content:first' );
     715                        var self = this, $widgetRoot, $widgetContent,
     716                                $saveBtn, updateWidgetDebounced, formSyncHandler;
     717
     718                        $widgetRoot = this.container.find( '.widget:first' );
     719                        $widgetContent = $widgetRoot.find( '.widget-content:first' );
    735720
    736721                        // Configure update button
    737                         save_btn = control.container.find( '.widget-control-save' );
    738                         save_btn.val( l10n.saveBtnLabel );
    739                         save_btn.attr( 'title', l10n.saveBtnTooltip );
    740                         save_btn.removeClass( 'button-primary' ).addClass( 'button-secondary' );
    741                         save_btn.on( 'click', function( e ) {
     722                        $saveBtn = this.container.find( '.widget-control-save' );
     723                        $saveBtn.val( l10n.saveBtnLabel );
     724                        $saveBtn.attr( 'title', l10n.saveBtnTooltip );
     725                        $saveBtn.removeClass( 'button-primary' ).addClass( 'button-secondary' );
     726                        $saveBtn.on( 'click', function( e ) {
    742727                                e.preventDefault();
    743                                 control.updateWidget( { disable_form: true } );
    744                         } );
    745 
    746                         update_widget_debounced = _.debounce( function() {
    747                                 // @todo For compatibility with other plugins, should we trigger a click event? What about form submit event?
    748                                 control.updateWidget();
     728                                self.updateWidget( { disable_form: true } );
     729                        } );
     730
     731                        updateWidgetDebounced = _.debounce( function() {
     732                                self.updateWidget();
    749733                        }, 250 );
    750734
    751735                        // Trigger widget form update when hitting Enter within an input
    752                         control.container.find( '.widget-content' ).on( 'keydown', 'input', function( e ) {
     736                        this.container.find( '.widget-content' ).on( 'keydown', 'input', function( e ) {
    753737                                if ( 13 === e.which ) { // Enter
    754738                                        e.preventDefault();
    755                                         control.updateWidget( { ignore_active_element: true } );
     739                                        self.updateWidget( { ignore_active_element: true } );
    756740                                }
    757741                        } );
    758742
    759743                        // Handle widgets that support live previews
    760                         widget_content.on( 'change input propertychange', ':input', function( e ) {
    761                                 if ( control.live_update_mode ) {
     744                        $widgetContent.on( 'change input propertychange', ':input', function( e ) {
     745                                if ( self.liveUpdateMode ) {
    762746                                        if ( e.type === 'change' ) {
    763                                                 control.updateWidget();
     747                                                self.updateWidget();
    764748                                        } else if ( this.checkValidity && this.checkValidity() ) {
    765                                                 update_widget_debounced();
     749                                                updateWidgetDebounced();
    766750                                        }
    767751                                }
    … …  
    769753
    770754                        // Remove loading indicators when the setting is saved and the preview updates
    771                         control.setting.previewer.channel.bind( 'synced', function() {
    772                                 control.container.removeClass( 'previewer-loading' );
    773                         } );
    774                         api.Widgets.Previewer.bind( 'widget-updated', function( updated_widget_id ) {
    775                                 if ( updated_widget_id === control.params.widget_id ) {
    776                                         control.container.removeClass( 'previewer-loading' );
    777                                 }
    778                         } );
    779 
    780                         // Update widget control to indicate whether it is currently rendered (cf. Widget Visibility)
     755                        this.setting.previewer.channel.bind( 'synced', function() {
     756                                self.container.removeClass( 'previewer-loading' );
     757                        } );
     758
     759                        api.Widgets.Previewer.bind( 'widget-updated', function( updatedWidgetId ) {
     760                                if ( updatedWidgetId === self.params.widget_id ) {
     761                                        self.container.removeClass( 'previewer-loading' );
     762                                }
     763                        } );
     764
     765                        // Update widget control to indicate whether it is currently rendered
    781766                        api.Widgets.Previewer.bind( 'rendered-widgets', function( rendered_widgets ) {
    782                                 var is_rendered = !! rendered_widgets[control.params.widget_id];
    783                                 control.container.toggleClass( 'widget-rendered', is_rendered );
    784                         } );
    785 
    786                         form_update_event_handler = api.Widgets.formSyncHandlers[ control.params.widget_id_base ];
    787                         if ( form_update_event_handler ) {
    788                                 $( document ).on( 'widget-synced', function( e, widget_el ) {
    789                                         if ( widget_root.is( widget_el ) ) {
    790                                                 form_update_event_handler.apply( document, arguments );
     767                                var is_rendered = !! rendered_widgets[self.params.widget_id];
     768                                self.container.toggleClass( 'widget-rendered', is_rendered );
     769                        } );
     770
     771                        formSyncHandler = api.Widgets.formSyncHandlers[ this.params.widget_id_base ];
     772                        if ( formSyncHandler ) {
     773                                $( document ).on( 'widget-synced', function( e, widget ) {
     774                                        if ( $widgetRoot.is( widget ) ) {
     775                                                formSyncHandler.apply( document, arguments );
    791776                                        }
    792777                                } );
    … …  
    798783                 */
    799784                _setupRemoveUI: function() {
    800                         var control = this,
    801                                 remove_btn,
    802                                 replace_delete_with_remove;
     785                        var self = this, $removeBtn, replaceDeleteWithRemove;
    803786
    804787                        // Configure remove button
    805                         remove_btn = control.container.find( 'a.widget-control-remove' );
    806                         // @todo Hitting Enter on this link does nothing; will be resolved in core with <http://core.trac.wordpress.org/ticket/26633>
    807                         remove_btn.on( 'click', function( e ) {
     788                        $removeBtn = this.container.find( 'a.widget-control-remove' );
     789                        $removeBtn.on( 'click', function( e ) {
    808790                                e.preventDefault();
    809791
    810792                                // Find an adjacent element to add focus to when this widget goes away
    811                                 var adjacent_focus_target;
    812                                 if ( control.container.next().is( '.customize-control-widget_form' ) ) {
    813                                         adjacent_focus_target = control.container.next().find( '.widget-action:first' );
    814                                 } else if ( control.container.prev().is( '.customize-control-widget_form' ) ) {
    815                                         adjacent_focus_target = control.container.prev().find( '.widget-action:first' );
     793                                var $adjacentFocusTarget;
     794                                if ( self.container.next().is( '.customize-control-widget_form' ) ) {
     795                                        $adjacentFocusTarget = self.container.next().find( '.widget-action:first' );
     796                                } else if ( self.container.prev().is( '.customize-control-widget_form' ) ) {
     797                                        $adjacentFocusTarget = self.container.prev().find( '.widget-action:first' );
    816798                                } else {
    817                                         adjacent_focus_target = control.container.next( '.customize-control-sidebar_widgets' ).find( '.add-new-widget:first' );
    818                                 }
    819 
    820                                 control.container.slideUp( function() {
    821                                         var sidebars_widgets_control = api.Widgets.getSidebarWidgetControlContainingWidget( control.params.widget_id ),
     799                                        $adjacentFocusTarget = self.container.next( '.customize-control-sidebar_widgets' ).find( '.add-new-widget:first' );
     800                                }
     801
     802                                self.container.slideUp( function() {
     803                                        var sidebars_widgets_control = api.Widgets.getSidebarWidgetControlContainingWidget( self.params.widget_id ),
    822804                                                sidebar_widget_ids,
    823805                                                i;
    824806
    825807                                        if ( ! sidebars_widgets_control ) {
    826                                                 throw new Error( 'Unable to find sidebars_widgets_control' );
     808                                                return;
    827809                                        }
    828810                                        sidebar_widget_ids = sidebars_widgets_control.setting().slice();
    829                                         i = _.indexOf( sidebar_widget_ids, control.params.widget_id );
     811                                        i = _.indexOf( sidebar_widget_ids, self.params.widget_id );
    830812                                        if ( -1 === i ) {
    831                                                 throw new Error( 'Widget is not in sidebar' );
     813                                                return;
    832814                                        }
    833815                                        sidebar_widget_ids.splice( i, 1 );
    834816                                        sidebars_widgets_control.setting( sidebar_widget_ids );
    835                                         adjacent_focus_target.focus(); // keyboard accessibility
     817                                        $adjacentFocusTarget.focus(); // keyboard accessibility
    836818                                } );
    837819                        } );
    838820
    839                         replace_delete_with_remove = function() {
    840                                 remove_btn.text( l10n.removeBtnLabel ); // wp_widget_control() outputs the link as "Delete"
    841                                 remove_btn.attr( 'title', l10n.removeBtnTooltip );
     821                        replaceDeleteWithRemove = function() {
     822                                $removeBtn.text( l10n.removeBtnLabel ); // wp_widget_control() outputs the link as "Delete"
     823                                $removeBtn.attr( 'title', l10n.removeBtnTooltip );
    842824                        };
    843                         if ( control.params.is_new ) {
    844                                 api.bind( 'saved', replace_delete_with_remove );
     825
     826                        if ( this.params.is_new ) {
     827                                api.bind( 'saved', replaceDeleteWithRemove );
    845828                        } else {
    846                                 replace_delete_with_remove();
     829                                replaceDeleteWithRemove();
    847830                        }
    848831                },
    … …  
    872855                 */
    873856                _getInputsSignature: function( inputs ) {
    874                         var inputs_signatures = _( inputs ).map( function( input ) {
    875                                 input = $( input );
    876                                 var signature_parts;
    877                                 if ( input.is( ':checkbox, :radio' ) ) {
    878                                         signature_parts = [ input.attr( 'id' ), input.attr( 'name' ), input.prop( 'value' ) ];
     857                        var inputsSignatures = _( inputs ).map( function( input ) {
     858                                var $input = $( input ), signatureParts;
     859
     860                                if ( $input.is( ':checkbox, :radio' ) ) {
     861                                        signatureParts = [ $input.attr( 'id' ), $input.attr( 'name' ), $input.prop( 'value' ) ];
    879862                                } else {
    880                                         signature_parts = [ input.attr( 'id' ), input.attr( 'name' ) ];
    881                                 }
    882                                 return signature_parts.join( ',' );
    883                         } );
    884                         return inputs_signatures.join( ';' );
     863                                        signatureParts = [ $input.attr( 'id' ), $input.attr( 'name' ) ];
     864                                }
     865
     866                                return signatureParts.join( ',' );
     867                        } );
     868
     869                        return inputsSignatures.join( ';' );
    885870                },
    886871
    … …  
    893878                 */
    894879                _getInputStatePropertyName: function( input ) {
    895                         input = $( input );
    896                         if ( input.is( ':radio, :checkbox' ) ) {
     880                        var $input = $( input );
     881
     882                        if ( $input.is( ':radio, :checkbox' ) ) {
    897883                                return 'checked';
    898884                        } else {
    … …  
    909895                 */
    910896                getSidebarWidgetsControl: function() {
    911                         var control = this, setting_id, sidebar_widgets_control;
    912 
    913                         setting_id = 'sidebars_widgets[' + control.params.sidebar_id + ']';
    914                         sidebar_widgets_control = api.control( setting_id );
    915                         if ( ! sidebar_widgets_control ) {
    916                                 throw new Error( 'Unable to locate sidebar_widgets control for ' + control.params.sidebar_id );
    917                         }
    918                         return sidebar_widgets_control;
     897                        var settingId, sidebarWidgetsControl;
     898
     899                        settingId = 'sidebars_widgets[' + this.params.sidebar_id + ']';
     900                        sidebarWidgetsControl = api.control( settingId );
     901
     902                        if ( ! sidebarWidgetsControl ) {
     903                                return;
     904                        }
     905
     906                        return sidebarWidgetsControl;
    919907                },
    920908
    … …  
    929917                 */
    930918                updateWidget: function( args ) {
    931                         var control = this,
    932                                 instance_override,
    933                                 complete_callback,
    934                                 widget_root,
    935                                 update_number,
    936                                 widget_content,
    937                                 params,
    938                                 data,
    939                                 inputs,
    940                                 processing,
    941                                 jqxhr,
    942                                 is_changed;
     919                        var self = this, instanceOverride, completeCallback, $widgetRoot, $widgetContent,
     920                                updateNumber, params, data, $inputs, processing, jqxhr, isChanged;
    943921
    944922                        args = $.extend( {
    … …  
    948926                        }, args );
    949927
    950                         instance_override = args.instance;
    951                         complete_callback = args.complete;
    952 
    953                         control._update_count += 1;
    954                         update_number = control._update_count;
    955 
    956                         widget_root = control.container.find( '.widget:first' );
    957                         widget_content = widget_root.find( '.widget-content:first' );
     928                        instanceOverride = args.instance;
     929                        completeCallback = args.complete;
     930
     931                        this._updateCount += 1;
     932                        updateNumber = this._updateCount;
     933
     934                        $widgetRoot = this.container.find( '.widget:first' );
     935                        $widgetContent = $widgetRoot.find( '.widget-content:first' );
    958936
    959937                        // Remove a previous error message
    960                         widget_content.find( '.widget-error' ).remove();
    961 
    962                         control.container.addClass( 'widget-form-loading' );
    963                         control.container.addClass( 'previewer-loading' );
     938                        $widgetContent.find( '.widget-error' ).remove();
     939
     940                        this.container.addClass( 'widget-form-loading' );
     941                        this.container.addClass( 'previewer-loading' );
    964942                        processing = api.state( 'processing' );
    965943                        processing( processing() + 1 );
    966944
    967                         if ( ! control.live_update_mode ) {
    968                                 control.container.addClass( 'widget-form-disabled' );
     945                        if ( ! this.liveUpdateMode ) {
     946                                this.container.addClass( 'widget-form-disabled' );
    969947                        }
    970948
    … …  
    975953
    976954                        data = $.param( params );
    977                         inputs = control._getInputs( widget_content );
     955                        $inputs = this._getInputs( $widgetContent );
    978956
    979957                        // Store the value we're submitting in data so that when the response comes back,
    980958                        // we know if it got sanitized; if there is no difference in the sanitized value,
    981959                        // then we do not need to touch the UI and mess up the user's ongoing editing.
    982                         inputs.each( function() {
     960                        $inputs.each( function() {
    983961                                var input = $( this ),
    984                                         property = control._getInputStatePropertyName( this );
    985                                 input.data( 'state' + update_number, input.prop( property ) );
    986                         } );
    987 
    988                         if ( instance_override ) {
    989                                 data += '&' + $.param( { 'sanitized_widget_setting': JSON.stringify( instance_override ) } );
     962                                        property = self._getInputStatePropertyName( this );
     963                                input.data( 'state' + updateNumber, input.prop( property ) );
     964                        } );
     965
     966                        if ( instanceOverride ) {
     967                                data += '&' + $.param( { 'sanitized_widget_setting': JSON.stringify( instanceOverride ) } );
    990968                        } else {
    991                                 data += '&' + inputs.serialize();
    992                         }
    993                         data += '&' + widget_content.find( '~ :input' ).serialize();
    994 
    995                         jqxhr = $.post( wp.ajax.settings.url, data, function( r ) {
    996                                 var message,
    997                                         sanitized_form,
    998                                         sanitized_inputs,
    999                                         has_same_inputs_in_response,
    1000                                         is_live_update_aborted = false;
     969                                data += '&' + $inputs.serialize();
     970                        }
     971                        data += '&' + $widgetContent.find( '~ :input' ).serialize();
     972
     973                        jqxhr = $.post( wp.ajax.settings.url, data );
     974
     975                        jqxhr.done( function( r ) {
     976                                var message, sanitizedForm,     $sanitizedInputs, hasSameInputsInResponse,
     977                                        isLiveUpdateAborted = false;
    1001978
    1002979                                // Check if the user is logged out.
    … …  
    1004981                                        api.Widgets.Previewer.preview.iframe.hide();
    1005982                                        api.Widgets.Previewer.login().done( function() {
    1006                                                 control.updateWidget( args );
     983                                                self.updateWidget( args );
    1007984                                                api.Widgets.Previewer.preview.iframe.show();
    1008985                                        } );
    … …  
    1017994
    1018995                                if ( r.success ) {
    1019                                         sanitized_form = $( '<div>' + r.data.form + '</div>' );
    1020                                         sanitized_inputs = control._getInputs( sanitized_form );
    1021                                         has_same_inputs_in_response = control._getInputsSignature( inputs ) === control._getInputsSignature( sanitized_inputs );
     996                                        sanitizedForm = $( '<div>' + r.data.form + '</div>' );
     997                                        $sanitizedInputs = self._getInputs( sanitizedForm );
     998                                        hasSameInputsInResponse = self._getInputsSignature( $inputs ) === self._getInputsSignature( $sanitizedInputs );
    1022999
    10231000                                        // Restore live update mode if sanitized fields are now aligned with the existing fields
    1024                                         if ( has_same_inputs_in_response && ! control.live_update_mode ) {
    1025                                                 control.live_update_mode = true;
    1026                                                 control.container.removeClass( 'widget-form-disabled' );
    1027                                                 control.container.find( 'input[name="savewidget"]' ).hide();
     1001                                        if ( hasSameInputsInResponse && ! self.liveUpdateMode ) {
     1002                                                self.liveUpdateMode = true;
     1003                                                self.container.removeClass( 'widget-form-disabled' );
     1004                                                self.container.find( 'input[name="savewidget"]' ).hide();
    10281005                                        }
    10291006
    10301007                                        // Sync sanitized field states to existing fields if they are aligned
    1031                                         if ( has_same_inputs_in_response && control.live_update_mode ) {
    1032                                                 inputs.each( function( i ) {
    1033                                                         var input = $( this ),
    1034                                                                 sanitized_input = $( sanitized_inputs[i] ),
    1035                                                                 property = control._getInputStatePropertyName( this ),
    1036                                                                 submitted_state,
    1037                                                                 sanitized_state,
    1038                                                                 can_update_state;
    1039 
    1040                                                         submitted_state = input.data( 'state' + update_number );
    1041                                                         sanitized_state = sanitized_input.prop( property );
    1042                                                         input.data( 'sanitized', sanitized_state );
    1043 
    1044                                                         can_update_state = (
    1045                                                                 submitted_state !== sanitized_state &&
    1046                                                                 ( args.ignore_active_element || ! input.is( document.activeElement ) )
    1047                                                         );
    1048                                                         if ( can_update_state ) {
    1049                                                                 input.prop( property, sanitized_state );
     1008                                        if ( hasSameInputsInResponse && self.liveUpdateMode ) {
     1009                                                $inputs.each( function( i ) {
     1010                                                        var $input = $( this ),
     1011                                                                $sanitizedInput = $( $sanitizedInputs[i] ),
     1012                                                                property = self._getInputStatePropertyName( this ),
     1013                                                                submittedState, sanitizedState, canUpdateState;
     1014
     1015                                                        submittedState = $input.data( 'state' + updateNumber );
     1016                                                        sanitizedState = $sanitizedInput.prop( property );
     1017                                                        $input.data( 'sanitized', sanitizedState );
     1018
     1019                                                        canUpdateState = ( submittedState !== sanitizedState && ( args.ignore_active_element || ! $input.is( document.activeElement ) ) );
     1020                                                        if ( canUpdateState ) {
     1021                                                                $input.prop( property, sanitizedState );
    10501022                                                        }
    10511023                                                } );
    1052                                                 $( document ).trigger( 'widget-synced', [ widget_root, r.data.form ] );
     1024
     1025                                                $( document ).trigger( 'widget-synced', [ $widgetRoot, r.data.form ] );
    10531026
    10541027                                        // Otherwise, if sanitized fields are not aligned with existing fields, disable live update mode if enabled
    1055                                         } else if ( control.live_update_mode ) {
    1056                                                 control.live_update_mode = false;
    1057                                                 control.container.find( 'input[name="savewidget"]' ).show();
    1058                                                 is_live_update_aborted = true;
     1028                                        } else if ( self.liveUpdateMode ) {
     1029                                                self.liveUpdateMode = false;
     1030                                                self.container.find( 'input[name="savewidget"]' ).show();
     1031                                                isLiveUpdateAborted = true;
     1032
    10591033                                        // Otherwise, replace existing form with the sanitized form
    10601034                                        } else {
    1061                                                 widget_content.html( r.data.form );
    1062                                                 control.container.removeClass( 'widget-form-disabled' );
    1063                                                 $( document ).trigger( 'widget-updated', [ widget_root ] );
     1035                                                $widgetContent.html( r.data.form );
     1036
     1037                                                self.container.removeClass( 'widget-form-disabled' );
     1038
     1039                                                $( document ).trigger( 'widget-updated', [ $widgetRoot ] );
    10641040                                        }
    10651041
    … …  
    10691045                                         * preview finishing loading.
    10701046                                         */
    1071                                         is_changed = ! is_live_update_aborted && ! _( control.setting() ).isEqual( r.data.instance );
    1072                                         if ( is_changed ) {
    1073                                                 control.is_widget_updating = true; // suppress triggering another updateWidget
    1074                                                 control.setting( r.data.instance );
    1075                                                 control.is_widget_updating = false;
     1047                                        isChanged = ! isLiveUpdateAborted && ! _( self.setting() ).isEqual( r.data.instance );
     1048                                        if ( isChanged ) {
     1049                                                self.isWidgetUpdating = true; // suppress triggering another updateWidget
     1050                                                self.setting( r.data.instance );
     1051                                                self.isWidgetUpdating = false;
    10761052                                        } else {
    10771053                                                // no change was made, so stop the spinner now instead of when the preview would updates
    1078                                                 control.container.removeClass( 'previewer-loading' );
    1079                                         }
    1080 
    1081                                         if ( complete_callback ) {
    1082                                                 complete_callback.call( control, null, { no_change: ! is_changed, ajax_finished: true } );
     1054                                                self.container.removeClass( 'previewer-loading' );
     1055                                        }
     1056
     1057                                        if ( completeCallback ) {
     1058                                                completeCallback.call( self, null, { no_change: ! isChanged, ajax_finished: true } );
    10831059                                        }
    10841060                                } else {
     1061                                        // General error message
    10851062                                        message = l10n.error;
     1063
    10861064                                        if ( r.data && r.data.message ) {
    10871065                                                message = r.data.message;
    10881066                                        }
    1089                                         if ( complete_callback ) {
    1090                                                 complete_callback.call( control, message );
     1067
     1068                                        if ( completeCallback ) {
     1069                                                completeCallback.call( self, message );
    10911070                                        } else {
    1092                                                 widget_content.prepend( '<p class="widget-error"><strong>' + message + '</strong></p>' );
    1093                                         }
    1094                                 }
    1095                         } );
     1071                                                $widgetContent.prepend( '<p class="widget-error"><strong>' + message + '</strong></p>' );
     1072                                        }
     1073                                }
     1074                        } );
     1075
    10961076                        jqxhr.fail( function( jqXHR, textStatus ) {
    1097                                 if ( complete_callback ) {
    1098                                         complete_callback.call( control, textStatus );
    1099                                 }
    1100                         } );
     1077                                if ( completeCallback ) {
     1078                                        completeCallback.call( self, textStatus );
     1079                                }
     1080                        } );
     1081
    11011082                        jqxhr.always( function() {
    1102                                 control.container.removeClass( 'widget-form-loading' );
    1103                                 inputs.each( function() {
    1104                                         $( this ).removeData( 'state' + update_number );
     1083                                self.container.removeClass( 'widget-form-loading' );
     1084
     1085                                $inputs.each( function() {
     1086                                        $( this ).removeData( 'state' + updateNumber );
    11051087                                } );
    11061088
    … …  
    11111093                /**
    11121094                 * Expand the accordion section containing a control
    1113                  * @todo it would be nice if accordion had a proper API instead of having to trigger UI events on its elements
    11141095                 */
    11151096                expandControlSection: function() {
    1116                         var section = this.container.closest( '.accordion-section' );
    1117                         if ( ! section.hasClass( 'open' ) ) {
    1118                                 section.find( '.accordion-section-title:first' ).trigger( 'click' );
     1097                        var $section = this.container.closest( '.accordion-section' );
     1098
     1099                        if ( ! $section.hasClass( 'open' ) ) {
     1100                                $section.find( '.accordion-section-title:first' ).trigger( 'click' );
    11191101                        }
    11201102                },
    … …  
    11371119                 * Expand or collapse the widget control
    11381120                 *
    1139                  * @param {boolean|undefined} [do_expand] If not supplied, will be inverse of current visibility
    1140                  */
    1141                 toggleForm: function( do_expand ) {
    1142                         var control = this, widget, inside, complete;
    1143 
    1144                         widget = control.container.find( 'div.widget:first' );
    1145                         inside = widget.find( '.widget-inside:first' );
    1146                         if ( typeof do_expand === 'undefined' ) {
    1147                                 do_expand = ! inside.is( ':visible' );
     1121                 * @param {boolean|undefined} [showOrHide] If not supplied, will be inverse of current visibility
     1122                 */
     1123                toggleForm: function( showOrHide ) {
     1124                        var self = this, $widget, $inside, complete;
     1125
     1126                        $widget = this.container.find( 'div.widget:first' );
     1127                        $inside = $widget.find( '.widget-inside:first' );
     1128                        if ( typeof showOrHide === 'undefined' ) {
     1129                                showOrHide = ! $inside.is( ':visible' );
    11481130                        }
    11491131
    11501132                        // Already expanded or collapsed, so noop
    1151                         if ( inside.is( ':visible' ) === do_expand ) {
     1133                        if ( $inside.is( ':visible' ) === showOrHide ) {
    11521134                                return;
    11531135                        }
    11541136
    1155                         if ( do_expand ) {
     1137                        if ( showOrHide ) {
    11561138                                // Close all other widget controls before expanding this one
    1157                                 api.control.each( function( other_control ) {
    1158                                         if ( control.params.type === other_control.params.type && control !== other_control ) {
    1159                                                 other_control.collapseForm();
     1139                                api.control.each( function( otherControl ) {
     1140                                        if ( self.params.type === otherControl.params.type && self !== otherControl ) {
     1141                                                otherControl.collapseForm();
    11601142                                        }
    11611143                                } );
    11621144
    11631145                                complete = function() {
    1164                                         control.container.removeClass( 'expanding' );
    1165                                         control.container.addClass( 'expanded' );
    1166                                         control.container.trigger( 'expanded' );
     1146                                        self.container.removeClass( 'expanding' );
     1147                                        self.container.addClass( 'expanded' );
     1148                                        self.container.trigger( 'expanded' );
    11671149                                };
    1168                                 if ( control.params.is_wide ) {
    1169                                         inside.fadeIn( 'fast', complete );
     1150
     1151                                if ( self.params.is_wide ) {
     1152                                        $inside.fadeIn( 'fast', complete );
    11701153                                } else {
    1171                                         inside.slideDown( 'fast', complete );
    1172                                 }
    1173                                 control.container.trigger( 'expand' );
    1174                                 control.container.addClass( 'expanding' );
     1154                                        $inside.slideDown( 'fast', complete );
     1155                                }
     1156
     1157                                self.container.trigger( 'expand' );
     1158                                self.container.addClass( 'expanding' );
    11751159                        } else {
    1176                                 control.container.trigger( 'collapse' );
    1177                                 control.container.addClass( 'collapsing' );
    11781160                                complete = function() {
    1179                                         control.container.removeClass( 'collapsing' );
    1180                                         control.container.removeClass( 'expanded' );
    1181                                         control.container.trigger( 'collapsed' );
     1161                                        self.container.removeClass( 'collapsing' );
     1162                                        self.container.removeClass( 'expanded' );
     1163                                        self.container.trigger( 'collapsed' );
    11821164                                };
    1183                                 if ( control.params.is_wide ) {
    1184                                         inside.fadeOut( 'fast', complete );
     1165
     1166                                self.container.trigger( 'collapse' );
     1167                                self.container.addClass( 'collapsing' );
     1168
     1169                                if ( self.params.is_wide ) {
     1170                                        $inside.fadeOut( 'fast', complete );
    11851171                                } else {
    1186                                         inside.slideUp( 'fast', function() {
    1187                                                 widget.css( { width:'', margin:'' } );
     1172                                        $inside.slideUp( 'fast', function() {
     1173                                                $widget.css( { width:'', margin:'' } );
    11881174                                                complete();
    11891175                                        } );
    … …  
    11971183                 */
    11981184                focus: function() {
    1199                         var control = this;
    1200                         control.expandControlSection();
    1201                         control.expandForm();
    1202                         control.container.find( '.widget-content :focusable:first' ).focus();
     1185                        this.expandControlSection();
     1186                        this.expandForm();
     1187                        this.container.find( '.widget-content :focusable:first' ).focus();
    12031188                },
    12041189
    … …  
    12061191                 * Get the position (index) of the widget in the containing sidebar
    12071192                 *
    1208                  * @throws Error
    12091193                 * @returns {Number}
    12101194                 */
    12111195                getWidgetSidebarPosition: function() {
    1212                         var control = this,
    1213                                 sidebar_widget_ids,
    1214                                 position;
    1215 
    1216                         sidebar_widget_ids = control.getSidebarWidgetsControl().setting();
    1217                         position = _.indexOf( sidebar_widget_ids, control.params.widget_id );
     1196                        var sidebarWidgetIds, position;
     1197
     1198                        sidebarWidgetIds = this.getSidebarWidgetsControl().setting();
     1199                        position = _.indexOf( sidebarWidgetIds, this.params.widget_id );
     1200
    12181201                        if ( position === -1 ) {
    1219                                 throw new Error( 'Widget was unexpectedly not present in the sidebar.' );
    1220                         }
     1202                                return;
     1203                        }
     1204
    12211205                        return position;
    12221206                },
    … …  
    12421226                 */
    12431227                _moveWidgetByOne: function( offset ) {
    1244                         var control = this,
    1245                                 i,
    1246                                 sidebar_widgets_setting,
    1247                                 sidebar_widget_ids,
    1248                                 adjacent_widget_id;
    1249 
    1250                         i = control.getWidgetSidebarPosition();
    1251 
    1252                         sidebar_widgets_setting = control.getSidebarWidgetsControl().setting;
    1253                         sidebar_widget_ids = Array.prototype.slice.call( sidebar_widgets_setting() ); // clone
    1254                         adjacent_widget_id = sidebar_widget_ids[i + offset];
    1255                         sidebar_widget_ids[i + offset] = control.params.widget_id;
    1256                         sidebar_widget_ids[i] = adjacent_widget_id;
    1257 
    1258                         sidebar_widgets_setting( sidebar_widget_ids );
     1228                        var i, sidebarWidgetsSetting, sidebarWidgetIds, adjacentWidgetId;
     1229
     1230                        i = this.getWidgetSidebarPosition();
     1231
     1232                        sidebarWidgetsSetting = this.getSidebarWidgetsControl().setting;
     1233                        sidebarWidgetIds = Array.prototype.slice.call( sidebarWidgetsSetting() ); // clone
     1234                        adjacentWidgetId = sidebarWidgetIds[i + offset];
     1235                        sidebarWidgetIds[i + offset] = this.params.widget_id;
     1236                        sidebarWidgetIds[i] = adjacentWidgetId;
     1237
     1238                        sidebarWidgetsSetting( sidebarWidgetIds );
    12591239                },
    12601240
    … …  
    12621242                 * Toggle visibility of the widget move area
    12631243                 *
    1264                  * @param {Boolean} [toggle]
    1265                  */
    1266                 toggleWidgetMoveArea: function( toggle ) {
    1267                         var control = this, move_widget_area;
    1268                         move_widget_area = control.container.find( '.move-widget-area' );
    1269                         if ( typeof toggle === 'undefined' ) {
    1270                                 toggle = ! move_widget_area.hasClass( 'active' );
    1271                         }
    1272                         if ( toggle ) {
     1244                 * @param {Boolean} [showOrHide]
     1245                 */
     1246                toggleWidgetMoveArea: function( showOrHide ) {
     1247                        var self = this, $moveWidgetArea;
     1248
     1249                        $moveWidgetArea = this.container.find( '.move-widget-area' );
     1250
     1251                        if ( typeof showOrHide === 'undefined' ) {
     1252                                showOrHide = ! $moveWidgetArea.hasClass( 'active' );
     1253                        }
     1254
     1255                        if ( showOrHide ) {
    12731256                                // reset the selected sidebar
    1274                                 move_widget_area.find( '.selected' ).removeClass( 'selected' );
    1275                                 move_widget_area.find( 'li' ).filter( function() {
    1276                                         return $( this ).data( 'id' ) === control.params.sidebar_id;
     1257                                $moveWidgetArea.find( '.selected' ).removeClass( 'selected' );
     1258
     1259                                $moveWidgetArea.find( 'li' ).filter( function() {
     1260                                        return $( this ).data( 'id' ) === self.params.sidebar_id;
    12771261                                } ).addClass( 'selected' );
    1278                                 control.container.find( '.move-widget-btn' ).prop( 'disabled', true );
    1279                         }
    1280                         move_widget_area.toggleClass( 'active', toggle );
    1281                 },
    1282 
    1283                 /**
    1284                  * Inside of the customizer preview, scroll the widget into view
    1285                  */
    1286                 scrollPreviewWidgetIntoView: function() {
    1287                         // @todo scrollIntoView() provides a robust but very poor experience. Animation is needed. See https://github.com/x-team/wp-widget-customizer/issues/16
     1262
     1263                                this.container.find( '.move-widget-btn' ).prop( 'disabled', true );
     1264                        }
     1265
     1266                        $moveWidgetArea.toggleClass( 'active', showOrHide );
    12881267                },
    12891268
    … …  
    12921271                 */
    12931272                highlightSectionAndControl: function() {
    1294                         var control = this, target_element;
    1295 
    1296                         if ( control.container.is( ':hidden' ) ) {
    1297                                 target_element = control.container.closest( '.control-section' );
     1273                        var $target;
     1274
     1275                        if ( this.container.is( ':hidden' ) ) {
     1276                                $target = this.container.closest( '.control-section' );
    12981277                        } else {
    1299                                 target_element = control.container;
    1300                         }
    1301 
    1302                         $( '.widget-customizer-highlighted' ).removeClass( 'widget-customizer-highlighted' );
    1303                         target_element.addClass( 'widget-customizer-highlighted' );
     1278                                $target = this.container;
     1279                        }
     1280
     1281                        $( '.highlighted' ).removeClass( 'highlighted' );
     1282                        $target.addClass( 'highlighted' );
     1283
    13041284                        setTimeout( function() {
    1305                                 target_element.removeClass( 'widget-customizer-highlighted' );
     1285                                $target.removeClass( 'highlighted' );
    13061286                        }, 500 );
    13071287                }
    1308 
    13091288        } );
    13101289
    … …  
    16021581
    16031582                        form_controls = _( control.setting() ).map( function( widget_id ) {
    1604                                 var setting_id = widget_id_to_setting_id( widget_id ),
     1583                                var setting_id = widgetIdToSettingId( widget_id ),
    16051584                                        form_control = api.control( setting_id );
    16061585
    … …  
    18161795        api.Widgets.getSidebarWidgetControlContainingWidget = function( widget_id ) {
    18171796                var found_control = null;
    1818                 // @todo this can use widget_id_to_setting_id(), then pass into wp.customize.control( x ).getSidebarWidgetsControl()
     1797                // @todo this can use widgetIdToSettingId(), then pass into wp.customize.control( x ).getSidebarWidgetsControl()
    18191798                api.control.each( function( control ) {
    18201799                        if ( control.params.type === 'sidebar_widgets' && -1 !== _.indexOf( control.setting(), widget_id ) ) {
    … …  
    18331812        api.Widgets.getWidgetFormControlForWidget = function( widget_id ) {
    18341813                var found_control = null;
    1835                 // @todo We can just use widget_id_to_setting_id() here
     1814                // @todo We can just use widgetIdToSettingId() here
    18361815                api.control.each( function( control ) {
    18371816                        if ( control.params.type === 'widget_form' && control.params.widget_id === widget_id ) {
    … …  
    18651844        /**
    18661845         * @param {String} widget_id
    1867          * @returns {String} setting_id
     1846         * @returns {String} settingId
    18681847         */
    1869         function widget_id_to_setting_id( widget_id ) {
    1870                 var parsed = parse_widget_id( widget_id ), setting_id;
    1871 
    1872                 setting_id = 'widget_' + parsed.id_base;
     1848        function widgetIdToSettingId( widget_id ) {
     1849                var parsed = parse_widget_id( widget_id ), settingId;
     1850
     1851                settingId = 'widget_' + parsed.id_base;
    18731852                if ( parsed.number ) {
    1874                         setting_id += '[' + parsed.number + ']';
     1853                        settingId += '[' + parsed.number + ']';
    18751854                }
    1876                 return setting_id;
     1855                return settingId;
    18771856        }
    18781857
Note: See TracChangeset for help on using the changeset viewer.