WordPress.org

Make WordPress Core

Changeset 27995


Ignore:
Timestamp:
04/07/14 19:59:49 (15 months 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.