Make WordPress Core

Changeset 27988


Ignore:
Timestamp:
04/07/2014 04:31:52 PM (11 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.