WordPress.org
Get WordPress

Make WordPress Core

Changeset 27995


Ignore:
Timestamp:
04/07/2014 07:59:49 PM (11 years ago)
Author:
ocean90
Message:

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

see #27690.

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r27988 r27995  
    530530                e.preventDefault();
    531531                var sidebarWidgetsControl = self.getSidebarWidgetsControl();
    532                 if ( sidebarWidgetsControl.is_reordering ) {
     532                if ( sidebarWidgetsControl.isReordering ) {
    533533                    return;
    534534                }
    … …  
    607607                    var li = $( this ),
    608608                        sidebarId,
    609                         sidebar_model;
     609                        sidebar;
    610610
    611611                    sidebarId = li.data( 'id' );
    612                     sidebar_model = api.Widgets.registeredSidebars.get( sidebarId );
    613 
    614                     li.toggle( sidebar_model.get( 'is_rendered' ) );
    615 
    616                     if ( li.hasClass( 'selected' ) && ! sidebar_model.get( 'is_rendered' ) ) {
     612                    sidebar = api.Widgets.registeredSidebars.get( sidebarId );
     613
     614                    li.toggle( sidebar.get( 'is_rendered' ) );
     615
     616                    if ( li.hasClass( 'selected' ) && ! sidebar.get( 'is_rendered' ) ) {
    617617                        selectSidebarItem( selfSidebarItem );
    618618                    }
    … …  
    726726            $saveBtn.on( 'click', function( e ) {
    727727                e.preventDefault();
    728                 self.updateWidget( { disable_form: true } );
     728                self.updateWidget( { disable_form: true } ); // @todo disable_form is unused?
    729729            } );
    730730
    … …  
    737737                if ( 13 === e.which ) { // Enter
    738738                    e.preventDefault();
    739                     self.updateWidget( { ignore_active_element: true } );
     739                    self.updateWidget( { ignoreActiveElement: true } );
    740740                }
    741741            } );
    … …  
    764764
    765765            // Update widget control to indicate whether it is currently rendered
    766             api.Widgets.Previewer.bind( 'rendered-widgets', function( rendered_widgets ) {
    767                 var is_rendered = !! rendered_widgets[self.params.widget_id];
    768                 self.container.toggleClass( 'widget-rendered', is_rendered );
     766            api.Widgets.Previewer.bind( 'rendered-widgets', function( renderedWidgets ) {
     767                var isRendered = !! renderedWidgets[self.params.widget_id];
     768
     769                self.container.toggleClass( 'widget-rendered', isRendered );
    769770            } );
    770771
    … …  
    801802
    802803                self.container.slideUp( function() {
    803                     var sidebars_widgets_control = api.Widgets.getSidebarWidgetControlContainingWidget( self.params.widget_id ),
    804                         sidebar_widget_ids,
    805                         i;
    806 
    807                     if ( ! sidebars_widgets_control ) {
     804                    var sidebarsWidgetsControl = api.Widgets.getSidebarWidgetControlContainingWidget( self.params.widget_id ),
     805                        sidebarWidgetIds, i;
     806
     807                    if ( ! sidebarsWidgetsControl ) {
    808808                        return;
    809809                    }
    810                     sidebar_widget_ids = sidebars_widgets_control.setting().slice();
    811                     i = _.indexOf( sidebar_widget_ids, self.params.widget_id );
     810
     811                    sidebarWidgetIds = sidebarsWidgetsControl.setting().slice();
     812                    i = _.indexOf( sidebarWidgetIds, self.params.widget_id );
    812813                    if ( -1 === i ) {
    813814                        return;
    814815                    }
    815                     sidebar_widget_ids.splice( i, 1 );
    816                     sidebars_widgets_control.setting( sidebar_widget_ids );
     816
     817                    sidebarWidgetIds.splice( i, 1 );
     818                    sidebarsWidgetsControl.setting( sidebarWidgetIds );
     819
    817820                    $adjacentFocusTarget.focus(); // keyboard accessibility
    818821                } );
    … …  
    914917         * @param {Object|null} [args.instance=null]  When the model changes, the instance is sent here; otherwise, the inputs from the form are used
    915918         * @param {Function|null} [args.complete=null]  Function which is called when the request finishes. Context is bound to the control. First argument is any error. Following arguments are for success.
    916          * @param {Boolean} [args.ignore_active_element=false] Whether or not updating a field will be deferred if focus is still on the element.
     919         * @param {Boolean} [args.ignoreActiveElement=false] Whether or not updating a field will be deferred if focus is still on the element.
    917920         */
    918921        updateWidget: function( args ) {
    … …  
    923926                instance: null,
    924927                complete: null,
    925                 ignore_active_element: false
     928                ignoreActiveElement: false
    926929            }, args );
    927930
    … …  
    10171020                            $input.data( 'sanitized', sanitizedState );
    10181021
    1019                             canUpdateState = ( submittedState !== sanitizedState && ( args.ignore_active_element || ! $input.is( document.activeElement ) ) );
     1022                            canUpdateState = ( submittedState !== sanitizedState && ( args.ignoreActiveElement || ! $input.is( document.activeElement ) )   );
    10201023                            if ( canUpdateState ) {
    10211024                                $input.prop( property, sanitizedState );
    … …  
    10561059
    10571060                    if ( completeCallback ) {
    1058                         completeCallback.call( self, null, { no_change: ! isChanged, ajax_finished: true } );
     1061                        completeCallback.call( self, null, { noChange: ! isChanged, ajaxFinished: true } );
    10591062                    }
    10601063                } else {
    … …  
    13021305         */
    13031306        ready: function() {
    1304             var control = this;
    1305             control.control_section = control.container.closest( '.control-section' );
    1306             control.section_content = control.container.closest( '.accordion-section-content' );
    1307             control._setupModel();
    1308             control._setupSortable();
    1309             control._setupAddition();
    1310             control._applyCardinalOrderClassNames();
     1307            this.$controlSection = this.container.closest( '.control-section' );
     1308            this.$sectionContent = this.container.closest( '.accordion-section-content' );
     1309
     1310            this._setupModel();
     1311            this._setupSortable();
     1312            this._setupAddition();
     1313            this._applyCardinalOrderClassNames();
    13111314        },
    13121315
    … …  
    13151318         */
    13161319        _setupModel: function() {
    1317             var control = this,
    1318                 registered_sidebar = api.Widgets.registeredSidebars.get( control.params.sidebar_id );
    1319 
    1320             control.setting.bind( function( new_widget_ids, old_widget_ids ) {
    1321                 var widget_form_controls,
    1322                     sidebar_widgets_add_control,
    1323                     final_control_containers,
    1324                     removed_widget_ids = _( old_widget_ids ).difference( new_widget_ids );
    1325 
    1326                 // Filter out any persistent widget_ids for widgets which have been deactivated
    1327                 new_widget_ids = _( new_widget_ids ).filter( function( new_widget_id ) {
    1328                     var parsed_widget_id = parse_widget_id( new_widget_id );
    1329                     return !! api.Widgets.availableWidgets.findWhere( { id_base: parsed_widget_id.id_base } );
     1320            var self = this,
     1321                registeredSidebar = api.Widgets.registeredSidebars.get( this.params.sidebar_id );
     1322
     1323            this.setting.bind( function( newWidgetIds, oldWidgetIds ) {
     1324                var widgetFormControls, $sidebarWidgetsAddControl, finalControlContainers, removedWidgetIds;
     1325
     1326                removedWidgetIds = _( oldWidgetIds ).difference( newWidgetIds );
     1327
     1328                // Filter out any persistent widget IDs for widgets which have been deactivated
     1329                newWidgetIds = _( newWidgetIds ).filter( function( newWidgetId ) {
     1330                    var parsedWidgetId = parseWidgetId( newWidgetId );
     1331
     1332                    return !! api.Widgets.availableWidgets.findWhere( { id_base: parsedWidgetId.id_base } );
    13301333                } );
    13311334
    1332                 widget_form_controls = _( new_widget_ids ).map( function( widget_id ) {
    1333                     var widget_form_control = api.Widgets.getWidgetFormControlForWidget( widget_id );
    1334                     if ( ! widget_form_control ) {
    1335                         widget_form_control = control.addWidget( widget_id );
    1336                     }
    1337                     return widget_form_control;
     1335                widgetFormControls = _( newWidgetIds ).map( function( widgetId ) {
     1336                    var widgetFormControl = api.Widgets.getWidgetFormControlForWidget( widgetId );
     1337
     1338                    if ( ! widgetFormControl ) {
     1339                        widgetFormControl = self.addWidget( widgetId );
     1340                    }
     1341
     1342                    return widgetFormControl;
    13381343                } );
    13391344
    13401345                // Sort widget controls to their new positions
    1341                 widget_form_controls.sort( function( a, b ) {
    1342                     var a_index = _.indexOf( new_widget_ids, a.params.widget_id ),
    1343                         b_index = _.indexOf( new_widget_ids, b.params.widget_id );
    1344                     if ( a_index === b_index ) {
     1346                widgetFormControls.sort( function( a, b ) {
     1347                    var aIndex = _.indexOf( newWidgetIds, a.params.widget_id ),
     1348                        bIndex = _.indexOf( newWidgetIds, b.params.widget_id );
     1349
     1350                    if ( aIndex === bIndex ) {
    13451351                        return 0;
    13461352                    }
    1347                     return a_index < b_index ? -1 : 1;
     1353
     1354                    return aIndex < bIndex ? -1 : 1;
    13481355                } );
    13491356
    1350                 sidebar_widgets_add_control = control.section_content.find( '.customize-control-sidebar_widgets' );
    1351 
    13521357                // Append the controls to put them in the right order
    1353                 final_control_containers = _( widget_form_controls ).map( function( widget_form_controls ) {
    1354                     return widget_form_controls.container[0];
     1358                finalControlContainers = _( widgetFormControls ).map( function( widgetFormControls ) {
     1359                    return widgetFormControls.container[0];
    13551360                } );
    13561361
     1362                $sidebarWidgetsAddControl = self.$sectionContent.find( '.customize-control-sidebar_widgets' );
     1363                $sidebarWidgetsAddControl.before( finalControlContainers );
     1364
    13571365                // Re-sort widget form controls (including widgets form other sidebars newly moved here)
    1358                 sidebar_widgets_add_control.before( final_control_containers );
    1359                 control._applyCardinalOrderClassNames();
     1366                self._applyCardinalOrderClassNames();
    13601367
    13611368                // If the widget was dragged into the sidebar, make sure the sidebar_id param is updated
    1362                 _( widget_form_controls ).each( function( widget_form_control ) {
    1363                     widget_form_control.params.sidebar_id = control.params.sidebar_id;
     1369                _( widgetFormControls ).each( function( widgetFormControl ) {
     1370                    widgetFormControl.params.sidebar_id = self.params.sidebar_id;
    13641371                } );
    13651372
    13661373                // Cleanup after widget removal
    1367                 _( removed_widget_ids ).each( function( removed_widget_id ) {
     1374                _( removedWidgetIds ).each( function( removedWidgetId ) {
    13681375
    13691376                    // Using setTimeout so that when moving a widget to another sidebar, the other sidebars_widgets settings get a chance to update
    13701377                    setTimeout( function() {
    1371                         var is_present_in_another_sidebar = false,
    1372                             removed_control,
    1373                             was_dragged_to_another_sidebar,
    1374                             inactive_widgets,
    1375                             removed_id_base,
    1376                             widget;
     1378                        var removedControl, wasDraggedToAnotherSidebar, inactiveWidgets, removedIdBase,
     1379                            widget, isPresentInAnotherSidebar = false;
    13771380
    13781381                        // Check if the widget is in another sidebar
    1379                         api.each( function( other_setting ) {
    1380                             if ( other_setting.id === control.setting.id || 0 !== other_setting.id.indexOf( 'sidebars_widgets[' ) || other_setting.id === 'sidebars_widgets[wp_inactive_widgets]' ) {
     1382                        api.each( function( otherSetting ) {
     1383                            if ( otherSetting.id === self.setting.id || 0 !== otherSetting.id.indexOf( 'sidebars_widgets[' ) || otherSetting.id === 'sidebars_widgets[wp_inactiveWidgets]' ) {
    13811384                                return;
    13821385                            }
    1383                             var other_sidebar_widgets = other_setting(), i;
    1384 
    1385                             i = _.indexOf( other_sidebar_widgets, removed_widget_id );
     1386
     1387                            var otherSidebarWidgets = otherSetting(), i;
     1388
     1389                            i = _.indexOf( otherSidebarWidgets, removedWidgetId );
    13861390                            if ( -1 !== i ) {
    1387                                 is_present_in_another_sidebar = true;
     1391                                isPresentInAnotherSidebar = true;
    13881392                            }
    13891393                        } );
    13901394
    13911395                        // If the widget is present in another sidebar, abort!
    1392                         if ( is_present_in_another_sidebar ) {
     1396                        if ( isPresentInAnotherSidebar ) {
    13931397                            return;
    13941398                        }
    13951399
    1396                         removed_control = api.Widgets.getWidgetFormControlForWidget( removed_widget_id );
     1400                        removedControl = api.Widgets.getWidgetFormControlForWidget( removedWidgetId );
    13971401
    13981402                        // Detect if widget control was dragged to another sidebar
    1399                         was_dragged_to_another_sidebar = (
    1400                             removed_control &&
    1401                             $.contains( document, removed_control.container[0] ) &&
    1402                             ! $.contains( control.section_content[0], removed_control.container[0] )
    1403                         );
     1403                        wasDraggedToAnotherSidebar = removedControl && $.contains( document, removedControl.container[0] ) && ! $.contains( self.$sectionContent[0], removedControl.container[0] );
    14041404
    14051405                        // Delete any widget form controls for removed widgets
    1406                         if ( removed_control && ! was_dragged_to_another_sidebar ) {
    1407                             api.control.remove( removed_control.id );
    1408                             removed_control.container.remove();
     1406                        if ( removedControl && ! wasDraggedToAnotherSidebar ) {
     1407                            api.control.remove( removedControl.id );
     1408                            removedControl.container.remove();
    14091409                        }
    14101410
    14111411                        // Move widget to inactive widgets sidebar (move it to trash) if has been previously saved
    14121412                        // This prevents the inactive widgets sidebar from overflowing with throwaway widgets
    1413                         if ( api.Widgets.savedWidgetIds[removed_widget_id] ) {
    1414                             inactive_widgets = api.value( 'sidebars_widgets[wp_inactive_widgets]' )().slice();
    1415                             inactive_widgets.push( removed_widget_id );
    1416                             api.value( 'sidebars_widgets[wp_inactive_widgets]' )( _( inactive_widgets ).unique() );
     1413                        if ( api.Widgets.savedWidgetIds[removedWidgetId] ) {
     1414                            inactiveWidgets = api.value( 'sidebars_widgets[wp_inactiveWidgets]' )().slice();
     1415                            inactiveWidgets.push( removedWidgetId );
     1416                            api.value( 'sidebars_widgets[wp_inactiveWidgets]' )( _( inactiveWidgets ).unique() );
    14171417                        }
    14181418
    14191419                        // Make old single widget available for adding again
    1420                         removed_id_base = parse_widget_id( removed_widget_id ).id_base;
    1421                         widget = api.Widgets.availableWidgets.findWhere( { id_base: removed_id_base } );
     1420                        removedIdBase = parseWidgetId( removedWidgetId ).id_base;
     1421                        widget = api.Widgets.availableWidgets.findWhere( { id_base: removedIdBase } );
    14221422                        if ( widget && ! widget.get( 'is_multi' ) ) {
    14231423                            widget.set( 'is_disabled', false );
    … …  
    14291429
    14301430            // Update the model with whether or not the sidebar is rendered
    1431             api.Widgets.Previewer.bind( 'rendered-sidebars', function( rendered_sidebars ) {
    1432                 var is_rendered = !! rendered_sidebars[control.params.sidebar_id];
    1433                 registered_sidebar.set( 'is_rendered', is_rendered );
     1431            api.Widgets.Previewer.bind( 'rendered-sidebars', function( renderedSidebars ) {
     1432                var isRendered = !! renderedSidebars[self.params.sidebar_id];
     1433
     1434                registeredSidebar.set( 'is_rendered', isRendered );
    14341435            } );
    14351436
    14361437            // Show the sidebar section when it becomes visible
    1437             registered_sidebar.on( 'change:is_rendered', function( ) {
    1438                 var section_selector = '#accordion-section-sidebar-widgets-' + this.get( 'id' ), section;
    1439                 section = $( section_selector );
     1438            registeredSidebar.on( 'change:is_rendered', function( ) {
     1439                var sectionSelector = '#accordion-section-sidebar-widgets-' + this.get( 'id' ), $section;
     1440
     1441                $section = $( sectionSelector );
    14401442                if ( this.get( 'is_rendered' ) ) {
    1441                     section.stop().slideDown( function() {
     1443                    $section.stop().slideDown( function() {
    14421444                        $( this ).css( 'height', 'auto' ); // so that the .accordion-section-content won't overflow
    14431445                    } );
     1446
    14441447                } else {
    14451448                    // Make sure that hidden sections get closed first
    1446                     if ( section.hasClass( 'open' ) ) {
     1449                    if ( $section.hasClass( 'open' ) ) {
    14471450                        // it would be nice if accordionSwitch() in accordion.js was public
    1448                         section.find( '.accordion-section-title' ).trigger( 'click' );
    1449                     }
    1450                     section.stop().slideUp();
     1451                        $section.find( '.accordion-section-title' ).trigger( 'click' );
     1452                    }
     1453
     1454                    $section.stop().slideUp();
    14511455                }
    14521456            } );
    … …  
    14571461         */
    14581462        _setupSortable: function() {
    1459             var control = this;
    1460             control.is_reordering = false;
     1463            var self = this;
     1464
     1465            this.isReordering = false;
    14611466
    14621467            /**
    14631468             * Update widget order setting when controls are re-ordered
    14641469             */
    1465             control.section_content.sortable( {
     1470            this.$sectionContent.sortable( {
    14661471                items: '> .customize-control-widget_form',
    14671472                handle: '.widget-top',
    … …  
    14691474                connectWith: '.accordion-section-content:has(.customize-control-sidebar_widgets)',
    14701475                update: function() {
    1471                     var widget_container_ids = control.section_content.sortable( 'toArray' ), widget_ids;
    1472                     widget_ids = $.map( widget_container_ids, function( widget_container_id ) {
    1473                         return $( '#' + widget_container_id ).find( ':input[name=widget-id]' ).val();
     1476                    var widgetContainerIds = self.$sectionContent.sortable( 'toArray' ), widgetIds;
     1477
     1478                    widgetIds = $.map( widgetContainerIds, function( widgetContainerId ) {
     1479                        return $( '#' + widgetContainerId ).find( ':input[name=widget-id]' ).val();
    14741480                    } );
    1475                     control.setting( widget_ids );
     1481
     1482                    self.setting( widgetIds );
    14761483                }
    14771484            } );
    … …  
    14811488             * allowing the control to be dropped into another section
    14821489             */
    1483             control.control_section.find( '.accordion-section-title' ).droppable( {
     1490            this.$controlSection.find( '.accordion-section-title' ).droppable({
    14841491                accept: '.customize-control-widget_form',
    14851492                over: function() {
    1486                     if ( ! control.control_section.hasClass( 'open' ) ) {
    1487                         control.control_section.addClass( 'open' );
    1488                         control.section_content.toggle( false ).slideToggle( 150, function() {
    1489                             control.section_content.sortable( 'refreshPositions' );
     1493                    if ( ! self.$controlSection.hasClass( 'open' ) ) {
     1494                        self.$controlSection.addClass( 'open' );
     1495                        self.$sectionContent.toggle( false ).slideToggle( 150, function() {
     1496                            self.$sectionContent.sortable( 'refreshPositions' );
    14901497                        } );
    14911498                    }
    14921499                }
    1493             } );
     1500            });
    14941501
    14951502            /**
    14961503             * Keyboard-accessible reordering
    14971504             */
    1498             control.container.find( '.reorder-toggle' ).on( 'click keydown', function( event ) {
     1505            this.container.find( '.reorder-toggle' ).on( 'click keydown', function( event ) {
    14991506                if ( event.type === 'keydown' && ! ( event.which === 13 || event.which === 32 ) ) { // Enter or Spacebar
    15001507                    return;
    15011508                }
    15021509
    1503                 control.toggleReordering( ! control.is_reordering );
     1510                self.toggleReordering( ! self.isReordering );
    15041511            } );
    15051512        },
    … …  
    15091516         */
    15101517        _setupAddition: function() {
    1511             var control = this;
    1512 
    1513             control.container.find( '.add-new-widget' ).on( 'click keydown', function( event ) {
     1518            var self = this;
     1519
     1520            this.container.find( '.add-new-widget' ).on( 'click keydown', function( event ) {
    15141521                if ( event.type === 'keydown' && ! ( event.which === 13 || event.which === 32 ) ) { // Enter or Spacebar
    15151522                    return;
    15161523                }
    15171524
    1518                 if ( control.section_content.hasClass( 'reordering' ) ) {
     1525                if ( self.$sectionContent.hasClass( 'reordering' ) ) {
    15191526                    return;
    15201527                }
    15211528
    1522                 // @todo Use an control.is_adding state
    15231529                if ( ! $( 'body' ).hasClass( 'adding-widget' ) ) {
    1524                     api.Widgets.availableWidgetsPanel.open( control );
     1530                    api.Widgets.availableWidgetsPanel.open( self );
    15251531                } else {
    15261532                    api.Widgets.availableWidgetsPanel.close();
    … …  
    15331539         */
    15341540        _applyCardinalOrderClassNames: function() {
    1535             var control = this;
    1536             control.section_content.find( '.customize-control-widget_form' )
     1541            this.$sectionContent.find( '.customize-control-widget_form' )
    15371542                .removeClass( 'first-widget' )
    15381543                .removeClass( 'last-widget' )
    15391544                .find( '.move-widget-down, .move-widget-up' ).prop( 'tabIndex', 0 );
    15401545
    1541             control.section_content.find( '.customize-control-widget_form:first' )
     1546            this.$sectionContent.find( '.customize-control-widget_form:first' )
    15421547                .addClass( 'first-widget' )
    15431548                .find( '.move-widget-up' ).prop( 'tabIndex', -1 );
    1544             control.section_content.find( '.customize-control-widget_form:last' )
     1549
     1550            this.$sectionContent.find( '.customize-control-widget_form:last' )
    15451551                .addClass( 'last-widget' )
    15461552                .find( '.move-widget-down' ).prop( 'tabIndex', -1 );
    … …  
    15551561         * Enable/disable the reordering UI
    15561562         *
    1557          * @param {Boolean} toggle to enable/disable reordering
    1558          */
    1559         toggleReordering: function( toggle ) {
    1560             var control = this;
    1561             toggle = Boolean( toggle );
    1562             if ( toggle === control.section_content.hasClass( 'reordering' ) ) {
     1563         * @param {Boolean} showOrHide to enable/disable reordering
     1564         */
     1565        toggleReordering: function( showOrHide ) {
     1566            showOrHide = Boolean( showOrHide );
     1567
     1568            if ( showOrHide === this.$sectionContent.hasClass( 'reordering' ) ) {
    15631569                return;
    15641570            }
    15651571
    1566             control.is_reordering = toggle;
    1567             control.section_content.toggleClass( 'reordering', toggle );
    1568 
    1569             if ( toggle ) {
    1570                 _( control.getWidgetFormControls() ).each( function( form_control ) {
    1571                     form_control.collapseForm();
     1572            this.isReordering = showOrHide;
     1573            this.$sectionContent.toggleClass( 'reordering', showOrHide );
     1574
     1575            if ( showOrHide ) {
     1576                _( this.getWidgetFormControls() ).each( function( formControl ) {
     1577                    formControl.collapseForm();
    15721578                } );
    15731579            }
    … …  
    15781584         */
    15791585        getWidgetFormControls: function() {
    1580             var control = this, form_controls;
    1581 
    1582             form_controls = _( control.setting() ).map( function( widget_id ) {
    1583                 var setting_id = widgetIdToSettingId( widget_id ),
    1584                     form_control = api.control( setting_id );
    1585 
    1586                 if ( ! form_control ) {
    1587                     throw new Error( 'Unable to find widget_form control for ' + widget_id );
    1588                 }
    1589                 return form_control;
    1590             } );
    1591             return form_controls;
    1592         },
    1593 
    1594         /**
    1595          * @param {string} widget_id or an id_base for adding a previously non-existing widget
     1586            var formControls;
     1587
     1588            formControls = _( this.setting() ).map( function( widgetId ) {
     1589                var settingId = widgetIdToSettingId( widgetId ),
     1590                    formControl = api.control( settingId );
     1591
     1592                if ( ! formControl ) {
     1593                    return;
     1594                }
     1595
     1596                return formControl;
     1597            } );
     1598
     1599            return formControls;
     1600        },
     1601
     1602        /**
     1603         * @param {string} widgetId or an id_base for adding a previously non-existing widget
    15961604         * @returns {object} widget_form control instance
    15971605         */
    1598         addWidget: function( widget_id ) {
    1599             var control = this,
    1600                 control_html,
    1601                 widget_el,
    1602                 customize_control_type = 'widget_form',
    1603                 customize_control,
    1604                 parsed_widget_id = parse_widget_id( widget_id ),
    1605                 widget_number = parsed_widget_id.number,
    1606                 widget_id_base = parsed_widget_id.id_base,
    1607                 widget = api.Widgets.availableWidgets.findWhere( {id_base: widget_id_base} ),
    1608                 setting_id,
    1609                 is_existing_widget,
    1610                 Constructor,
    1611                 widget_form_control,
    1612                 sidebar_widgets,
    1613                 setting_args;
     1606        addWidget: function( widgetId ) {
     1607            var self = this, controlHtml, $widget, controlType = 'widget_form', $control, controlConstructor,
     1608                parsedWidgetId = parseWidgetId( widgetId ),
     1609                widgetNumber = parsedWidgetId.number,
     1610                widgetIdBase = parsedWidgetId.id_base,
     1611                widget = api.Widgets.availableWidgets.findWhere( {id_base: widgetIdBase} ),
     1612                settingId, isExistingWidget, widgetFormControl, sidebarWidgets, settingArgs;
    16141613
    16151614            if ( ! widget ) {
    1616                 throw new Error( 'Widget unexpectedly not found.' );
    1617             }
    1618             if ( widget_number && ! widget.get( 'is_multi' ) ) {
    1619                 throw new Error( 'Did not expect a widget number to be supplied for a non-multi widget' );
     1615                return;
     1616            }
     1617
     1618            if ( widgetNumber && ! widget.get( 'is_multi' ) ) {
     1619                return;
    16201620            }
    16211621
    16221622            // Set up new multi widget
    1623             if ( widget.get( 'is_multi' ) && ! widget_number ) {
     1623            if ( widget.get( 'is_multi' ) && ! widgetNumber ) {
    16241624                widget.set( 'multi_number', widget.get( 'multi_number' ) + 1 );
    1625                 widget_number = widget.get( 'multi_number' );
    1626             }
    1627 
    1628             control_html = $( '#widget-tpl-' + widget.get( 'id' ) ).html();
     1625                widgetNumber = widget.get( 'multi_number' );
     1626            }
     1627
     1628            controlHtml = $( '#widget-tpl-' + widget.get( 'id' ) ).html();
    16291629            if ( widget.get( 'is_multi' ) ) {
    1630                 control_html = control_html.replace( /<[^<>]+>/g, function( m ) {
    1631                     return m.replace( /__i__|%i%/g, widget_number );
     1630                controlHtml = controlHtml.replace( /<[^<>]+>/g, function( m ) {
     1631                    return m.replace( /__i__|%i%/g, widgetNumber );
    16321632                } );
    16331633            } else {
    16341634                widget.set( 'is_disabled', true ); // Prevent single widget from being added again now
    16351635            }
    1636             widget_el = $( control_html );
    1637 
    1638             customize_control = $( '<li></li>' );
    1639             customize_control.addClass( 'customize-control' );
    1640             customize_control.addClass( 'customize-control-' + customize_control_type );
    1641             customize_control.append( widget_el );
    1642             customize_control.find( '> .widget-icon' ).remove();
     1636
     1637            $widget = $( controlHtml );
     1638
     1639            $control = $( '<li/>' )
     1640                .addClass( 'customize-control' )
     1641                .addClass( 'customize-control-' + controlType )
     1642                .append( $widget );
     1643
     1644            // Remove icon which is visible inside the panel
     1645            $control.find( '> .widget-icon' ).remove();
     1646
    16431647            if ( widget.get( 'is_multi' ) ) {
    1644                 customize_control.find( 'input[name="widget_number"]' ).val( widget_number );
    1645                 customize_control.find( 'input[name="multi_number"]' ).val( widget_number );
    1646             }
    1647             widget_id = customize_control.find( '[name="widget-id"]' ).val();
    1648             customize_control.hide(); // to be slid-down below
    1649 
    1650             setting_id = 'widget_' + widget.get( 'id_base' );
     1648                $control.find( 'input[name="widget_number"]' ).val( widgetNumber );
     1649                $control.find( 'input[name="multi_number"]' ).val( widgetNumber );
     1650            }
     1651
     1652            widgetId = $control.find( '[name="widget-id"]' ).val();
     1653
     1654            $control.hide(); // to be slid-down below
     1655
     1656            settingId = 'widget_' + widget.get( 'id_base' );
    16511657            if ( widget.get( 'is_multi' ) ) {
    1652                 setting_id += '[' + widget_number + ']';
    1653             }
    1654             customize_control.attr( 'id', 'customize-control-' + setting_id.replace( /\]/g, '' ).replace( /\[/g, '-' ) );
    1655 
    1656             control.container.after( customize_control );
     1658                settingId += '[' + widgetNumber + ']';
     1659            }
     1660            $control.attr( 'id', 'customize-control-' + settingId.replace( /\]/g, '' ).replace( /\[/g, '-' ) );
     1661
     1662            this.container.after( $control );
    16571663
    16581664            // Only create setting if it doesn't already exist (if we're adding a pre-existing inactive widget)
    1659             is_existing_widget = api.has( setting_id );
    1660             if ( ! is_existing_widget ) {
    1661                 setting_args = {
     1665            isExistingWidget = api.has( settingId );
     1666            if ( ! isExistingWidget ) {
     1667                settingArgs = {
    16621668                    transport: 'refresh',
    1663                     previewer: control.setting.previewer
     1669                    previewer: this.setting.previewer
    16641670                };
    1665                 api.create( setting_id, setting_id, {}, setting_args );
    1666             }
    1667 
    1668             Constructor = api.controlConstructor[customize_control_type];
    1669             widget_form_control = new Constructor( setting_id, {
     1671                api.create( settingId, settingId, {}, settingArgs );
     1672            }
     1673
     1674            controlConstructor = api.controlConstructor[controlType];
     1675            widgetFormControl = new controlConstructor( settingId, {
    16701676                params: {
    16711677                    settings: {
    1672                         'default': setting_id
     1678                        'default': settingId
    16731679                    },
    1674                     sidebar_id: control.params.sidebar_id,
    1675                     widget_id: widget_id,
     1680                    sidebar_id: self.params.sidebar_id,
     1681                    widget_id: widgetId,
    16761682                    widget_id_base: widget.get( 'id_base' ),
    1677                     type: customize_control_type,
    1678                     is_new: ! is_existing_widget,
     1683                    type: controlType,
     1684                    is_new: ! isExistingWidget,
    16791685                    width: widget.get( 'width' ),
    16801686                    height: widget.get( 'height' ),
    16811687                    is_wide: widget.get( 'is_wide' )
    16821688                },
    1683                 previewer: control.setting.previewer
    1684             } );
    1685             api.control.add( setting_id, widget_form_control );
     1689                previewer: self.setting.previewer
     1690            } );
     1691            api.control.add( settingId, widgetFormControl );
    16861692
    16871693            // Make sure widget is removed from the other sidebars
    1688             api.each( function( other_setting ) {
    1689                 if ( other_setting.id === control.setting.id ) {
     1694            api.each( function( otherSetting ) {
     1695                if ( otherSetting.id === self.setting.id ) {
    16901696                    return;
    16911697                }
    1692                 if ( 0 !== other_setting.id.indexOf( 'sidebars_widgets[' ) ) {
     1698
     1699                if ( 0 !== otherSetting.id.indexOf( 'sidebars_widgets[' ) ) {
    16931700                    return;
    16941701                }
    1695                 var other_sidebar_widgets = other_setting().slice(), i;
    1696                 i = _.indexOf( other_sidebar_widgets, widget_id );
     1702
     1703                var otherSidebarWidgets = otherSetting().slice(),
     1704                    i = _.indexOf( otherSidebarWidgets, widgetId );
     1705
    16971706                if ( -1 !== i ) {
    1698                     other_sidebar_widgets.splice( i );
    1699                     other_setting( other_sidebar_widgets );
     1707                    otherSidebarWidgets.splice( i );
     1708                    otherSetting( otherSidebarWidgets );
    17001709                }
    17011710            } );
    17021711
    17031712            // Add widget to this sidebar
    1704             sidebar_widgets = control.setting().slice();
    1705             if ( -1 === _.indexOf( sidebar_widgets, widget_id ) ) {
    1706                 sidebar_widgets.push( widget_id );
    1707                 control.setting( sidebar_widgets );
    1708             }
    1709 
    1710             customize_control.slideDown( function() {
    1711                 if ( is_existing_widget ) {
    1712                     widget_form_control.expandForm();
    1713                     widget_form_control.updateWidget( {
    1714                         instance: widget_form_control.setting(),
     1713            sidebarWidgets = this.setting().slice();
     1714            if ( -1 === _.indexOf( sidebarWidgets, widgetId ) ) {
     1715                sidebarWidgets.push( widgetId );
     1716                this.setting( sidebarWidgets );
     1717            }
     1718
     1719            $control.slideDown( function() {
     1720                if ( isExistingWidget ) {
     1721                    widgetFormControl.expandForm();
     1722                    widgetFormControl.updateWidget( {
     1723                        instance: widgetFormControl.setting(),
    17151724                        complete: function( error ) {
    17161725                            if ( error ) {
    17171726                                throw error;
    17181727                            }
    1719                             widget_form_control.focus();
     1728                            widgetFormControl.focus();
    17201729                        }
    17211730                    } );
    17221731                } else {
    1723                     widget_form_control.focus();
    1724                 }
    1725             } );
    1726 
    1727             $( document ).trigger( 'widget-added', [ widget_el ] );
    1728 
    1729             return widget_form_control;
     1732                    widgetFormControl.focus();
     1733                }
     1734            } );
     1735
     1736            $( document ).trigger( 'widget-added', [ $widget ] );
     1737
     1738            return widgetFormControl;
    17301739        }
    1731 
    17321740    } );
    17331741
     1742    /**
     1743     * Extends wp.customizer.controlConstructor with control constructor for
     1744     * widget_form and sidebar_widgets.
     1745     */
    17341746    $.extend( api.controlConstructor, {
    17351747        widget_form: api.Widgets.WidgetControl,
    17361748        sidebar_widgets: api.Widgets.SidebarControl
    17371749    });
    1738 
    1739     api.bind( 'ready', function() {
    1740         // Set up the widgets panel
    1741         api.Widgets.availableWidgetsPanel = new api.Widgets.AvailableWidgetsPanelView({
    1742             collection: api.Widgets.availableWidgets
    1743         });
    1744 
    1745         // Highlight widget control
    1746         api.Widgets.Previewer.bind( 'highlight-widget-control', api.Widgets.highlightWidgetFormControl );
    1747 
    1748         // Open and focus widget control
    1749         api.Widgets.Previewer.bind( 'focus-widget-control', api.Widgets.focusWidgetFormControl );
    1750     } );
    17511750
    17521751    /**
    … …  
    17631762
    17641763    /**
     1764     * Init Customizer for widgets.
     1765     */
     1766    api.bind( 'ready', function() {
     1767        // Set up the widgets panel
     1768        api.Widgets.availableWidgetsPanel = new api.Widgets.AvailableWidgetsPanelView({
     1769            collection: api.Widgets.availableWidgets
     1770        });
     1771
     1772        // Highlight widget control
     1773        api.Widgets.Previewer.bind( 'highlight-widget-control', api.Widgets.highlightWidgetFormControl );
     1774
     1775        // Open and focus widget control
     1776        api.Widgets.Previewer.bind( 'focus-widget-control', api.Widgets.focusWidgetFormControl );
     1777    } );
     1778
     1779    /**
    17651780     * Highlight a widget control.
    17661781     *
    … …  
    17901805    /**
    17911806     * Given a widget control, find the sidebar widgets control that contains it.
    1792      * @param {string} widget_id
     1807     * @param {string} widgetId
    17931808     * @return {object|null}
    17941809     */
    1795     api.Widgets.getSidebarWidgetControlContainingWidget = function( widget_id ) {
    1796         var found_control = null;
     1810    api.Widgets.getSidebarWidgetControlContainingWidget = function( widgetId ) {
     1811        var foundControl = null;
     1812
    17971813        // @todo this can use widgetIdToSettingId(), then pass into wp.customize.control( x ).getSidebarWidgetsControl()
    17981814        api.control.each( function( control ) {
    1799             if ( control.params.type === 'sidebar_widgets' && -1 !== _.indexOf( control.setting(), widget_id ) ) {
    1800                 found_control = control;
     1815            if ( control.params.type === 'sidebar_widgets' && -1 !== _.indexOf( control.setting(), widgetId ) ) {
     1816                foundControl = control;
    18011817            }
    18021818        } );
    18031819
    1804         return found_control;
     1820        return foundControl;
    18051821    };
    18061822
    18071823    /**
    1808      * Given a widget_id for a widget appearing in the preview, get the widget form control associated with it
    1809      * @param {string} widget_id
     1824     * Given a widget ID for a widget appearing in the preview, get the widget form control associated with it.
     1825     *
     1826     * @param {string} widgetId
    18101827     * @return {object|null}
    18111828     */
    1812     api.Widgets.getWidgetFormControlForWidget = function( widget_id ) {
    1813         var found_control = null;
     1829    api.Widgets.getWidgetFormControlForWidget = function( widgetId ) {
     1830        var foundControl = null;
     1831
    18141832        // @todo We can just use widgetIdToSettingId() here
    18151833        api.control.each( function( control ) {
    1816             if ( control.params.type === 'widget_form' && control.params.widget_id === widget_id ) {
    1817                 found_control = control;
     1834            if ( control.params.type === 'widget_form' && control.params.widget_id === widgetId ) {
     1835                foundControl = control;
    18181836            }
    18191837        } );
    18201838
    1821         return found_control;
     1839        return foundControl;
    18221840    };
    18231841
    18241842    /**
    1825      * @param {String} widget_id
     1843     * @param {String} widgetId
    18261844     * @returns {Object}
    18271845     */
    1828     function parse_widget_id( widget_id ) {
     1846    function parseWidgetId( widgetId ) {
    18291847        var matches, parsed = {
    18301848            number: null,
    18311849            id_base: null
    18321850        };
    1833         matches = widget_id.match( /^(.+)-(\d+)$/ );
     1851
     1852        matches = widgetId.match( /^(.+)-(\d+)$/ );
    18341853        if ( matches ) {
    18351854            parsed.id_base = matches[1];
    … …  
    18371856        } else {
    18381857            // likely an old single widget
    1839             parsed.id_base = widget_id;
     1858            parsed.id_base = widgetId;
    18401859        }
     1860
    18411861        return parsed;
    18421862    }
    18431863
    18441864    /**
    1845      * @param {String} widget_id
     1865     * @param {String} widgetId
    18461866     * @returns {String} settingId
    18471867     */
    1848     function widgetIdToSettingId( widget_id ) {
    1849         var parsed = parse_widget_id( widget_id ), settingId;
     1868    function widgetIdToSettingId( widgetId ) {
     1869        var parsed = parseWidgetId( widgetId ), settingId;
    18501870
    18511871        settingId = 'widget_' + parsed.id_base;
    … …  
    18531873            settingId += '[' + parsed.number + ']';
    18541874        }
     1875
    18551876        return settingId;
    18561877    }
Note: See TracChangeset for help on using the changeset viewer.