WordPress.org
Get WordPress

Make WordPress Core

Changeset 27986


Ignore:
Timestamp:
04/07/2014 02:09:53 PM (12 years ago)
Author:
ocean90
Message:

Widget Customizer: Make the available widgets panel a Backbone view.

see #27690.

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r27985 r27986  
    1616
    1717        /**
    18          * Set up model
     18         * wp.customize.Widgets.WidgetModel
     19         *
     20         * A single widget model.
     21         *
     22         * @constructor
     23         * @augments Backbone.Model
    1924         */
    2025        api.Widgets.WidgetModel = Backbone.Model.extend({
    … …  
    3540        });
    3641
     42        /**
     43         * wp.customize.Widgets.WidgetCollection
     44         *
     45         * Collection for widget models.
     46         *
     47         * @constructor
     48         * @augments Backbone.Model
     49         */
    3750        api.Widgets.WidgetCollection = Backbone.Collection.extend({
    3851                model: api.Widgets.WidgetModel,
    … …  
    93106        api.Widgets.availableWidgets = new api.Widgets.WidgetCollection( api.Widgets.data.availableWidgets );
    94107
     108        /**
     109         * wp.customize.Widgets.SidebarModel
     110         *
     111         * A single sidebar model.
     112         *
     113         * @constructor
     114         * @augments Backbone.Model
     115         */
    95116        api.Widgets.SidebarModel = Backbone.Model.extend({
    96117                after_title: null,
    … …  
    105126        });
    106127
     128        /**
     129         * wp.customize.Widgets.SidebarCollection
     130         *
     131         * Collection for sidebar models.
     132         *
     133         * @constructor
     134         * @augments Backbone.Collection
     135         */
    107136        api.Widgets.SidebarCollection = Backbone.Collection.extend({
    108137                model: api.Widgets.SidebarModel
    109138        });
    110139        api.Widgets.registeredSidebars = new api.Widgets.SidebarCollection( api.Widgets.data.registeredSidebars );
     140
     141        /**
     142         * wp.customize.Widgets.AvailableWidgetsPanelView
     143         *
     144         * View class for the available widgets panel.
     145         *
     146         * @constructor
     147         * @augments wp.Backbone.View
     148         * @augments Backbone.View
     149         */
     150        api.Widgets.AvailableWidgetsPanelView = wp.Backbone.View.extend({
     151
     152                el: '#available-widgets',
     153
     154                events: {
     155                        'input #widgets-search': 'search',
     156                        'keyup #widgets-search': 'search',
     157                        'change #widgets-search': 'search',
     158                        'search #widgets-search': 'search',
     159                        'focus .widget-tpl' : 'focus',
     160                        'click .widget-tpl' : '_submit',
     161                        'keypress .widget-tpl' : '_submit',
     162                        'keydown' : 'keyboardAccessible'
     163                },
     164
     165                // Cache current selected widget
     166                selected: null,
     167
     168                // Cache sidebar control which has opened panel
     169                currentSidebarControl: null,
     170                $search: null,
     171
     172                initialize: function() {
     173                        var self = this;
     174
     175                        this.$search = $( '#widgets-search' );
     176
     177                        _.bindAll( this, 'close' );
     178
     179                        this.listenTo( this.collection, 'update', this.updateList );
     180
     181                        this.updateList();
     182
     183                        // If the available widgets panel is open and the customize controls are
     184                        // interacted with (i.e. available widgets panel is blurred) then close the
     185                        // available widgets panel.
     186                        $( '#customize-controls' ).on( 'click keydown', function( e ) {
     187                                var isAddNewBtn = $( e.target ).is( '.add-new-widget, .add-new-widget *' );
     188                                if ( $( 'body' ).hasClass( 'adding-widget' ) && ! isAddNewBtn ) {
     189                                        self.close();
     190                                }
     191                        } );
     192
     193                        // Close the panel if the URL in the preview changes
     194                        api.Widgets.Previewer.bind( 'url', this.close );
     195                },
     196
     197                // Performs a search and handles selected widget
     198                search: function( event ) {
     199                        var firstVisible;
     200
     201                        this.collection.doSearch( event.target.value );
     202
     203                        // Remove a widget from being selected if it is no longer visible
     204                        if ( this.selected && ! this.selected.is( ':visible' ) ) {
     205                                this.selected.removeClass( 'selected' );
     206                                this.selected = null;
     207                        }
     208
     209                        // If a widget was selected but the filter value has been cleared out, clear selection
     210                        if ( this.selected && ! event.target.value ) {
     211                                this.selected.removeClass( 'selected' );
     212                                this.selected = null;
     213                        }
     214
     215                        // If a filter has been entered and a widget hasn't been selected, select the first one shown
     216                        if ( ! this.selected && event.target.value ) {
     217                                firstVisible = this.$el.find( '> .widget-tpl:visible:first' );
     218                                if ( firstVisible.length ) {
     219                                        this.select( firstVisible );
     220                                }
     221                        }
     222                },
     223
     224                // Changes visibilty of available widgets
     225                updateList: function() {
     226                        // First hide all widgets...
     227                        this.$el.find( '.widget-tpl' ).hide();
     228
     229                        // ..and then show only available widgets which could be filtered
     230                        this.collection.each( function( widget ) {
     231                                var widgetTpl = $( '#widget-tpl-' + widget.id );
     232                                widgetTpl.toggle( ! widget.get( 'is_disabled' ) );
     233                                if ( widget.get( 'is_disabled' ) && widgetTpl.is( this.selected ) ) {
     234                                        this.selected = null;
     235                                }
     236                        } );
     237                },
     238
     239                // Hightlights a widget
     240                select: function( widgetTpl ) {
     241                        this.selected = $( widgetTpl );
     242                        this.selected.siblings( '.widget-tpl' ).removeClass( 'selected' );
     243                        this.selected.addClass( 'selected' );
     244                },
     245
     246                // Hightlights a widget on focus
     247                focus: function( event ) {
     248                        this.select( $( event.currentTarget ) );
     249                },
     250
     251                // Submit handler for keypress and click on widget
     252                _submit: function( event ) {
     253                        // Only proceed with keypress if it is Enter or Spacebar
     254                        if ( event.type === 'keypress' && ( event.which !== 13 && event.which !== 32 ) ) {
     255                                return;
     256                        }
     257
     258                        this.submit( $( event.currentTarget ) );
     259                },
     260
     261                // Adds a selected widget to the sidebar
     262                submit: function( widgetTpl ) {
     263                        var widgetId, widget;
     264
     265                        if ( ! widgetTpl ) {
     266                                widgetTpl = this.selected;
     267                        }
     268
     269                        if ( ! widgetTpl || ! this.currentSidebarControl ) {
     270                                return;
     271                        }
     272
     273                        this.select( widgetTpl );
     274
     275                        widgetId = $( this.selected ).data( 'widget-id' );
     276                        widget = this.collection.findWhere( { id: widgetId } );
     277                        if ( ! widget ) {
     278                                return;
     279                        }
     280
     281                        this.currentSidebarControl.addWidget( widget.get( 'id_base' ) );
     282
     283                        this.close();
     284                },
     285
     286                // Opens the panel
     287                open: function( sidebarControl ) {
     288                        this.currentSidebarControl = sidebarControl;
     289
     290                        // Wide widget controls appear over the preview, and so they need to be collapsed when the panel opens
     291                        _( this.currentSidebarControl.getWidgetFormControls() ).each( function( control ) {
     292                                if ( control.params.is_wide ) {
     293                                        control.collapseForm();
     294                                }
     295                        } );
     296
     297                        $( 'body' ).addClass( 'adding-widget' );
     298
     299                        this.$el.find( '.selected' ).removeClass( 'selected' );
     300
     301                        // Reset search
     302                        this.collection.doSearch( '' );
     303
     304                        this.$search.focus();
     305                },
     306
     307                // Closes the panel
     308                close: function( options ) {
     309                        options = options || {};
     310
     311                        if ( options.returnFocus && this.currentSidebarControl ) {
     312                                this.currentSidebarControl.container.find( '.add-new-widget' ).focus();
     313                        }
     314
     315                        this.currentSidebarControl = null;
     316                        this.selected = null;
     317
     318                        $( 'body' ).removeClass( 'adding-widget' );
     319
     320                        this.$search.val( '' );
     321                },
     322
     323                // Add keyboard accessiblity to the panel
     324                keyboardAccessible: function( event ) {
     325                        var isEnter = ( event.which === 13 ),
     326                                isEsc = ( event.which === 27 ),
     327                                isDown = ( event.which === 40 ),
     328                                isUp = ( event.which === 38 ),
     329                                selected = null,
     330                                firstVisible = this.$el.find( '> .widget-tpl:visible:first' ),
     331                                lastVisible = this.$el.find( '> .widget-tpl:visible:last' ),
     332                                isSearchFocused = $( event.target ).is( this.$search );
     333
     334                        if ( isDown || isUp ) {
     335                                if ( isDown ) {
     336                                        if ( isSearchFocused ) {
     337                                                selected = firstVisible;
     338                                        } else if ( this.selected && this.selected.nextAll( '.widget-tpl:visible' ).length !== 0 ) {
     339                                                selected = this.selected.nextAll( '.widget-tpl:visible:first' );
     340                                        }
     341                                } else if ( isUp ) {
     342                                        if ( isSearchFocused ) {
     343                                                selected = lastVisible;
     344                                        } else if ( this.selected && this.selected.prevAll( '.widget-tpl:visible' ).length !== 0 ) {
     345                                                selected = this.selected.prevAll( '.widget-tpl:visible:first' );
     346                                        }
     347                                }
     348
     349                                this.select( selected );
     350
     351                                if ( selected ) {
     352                                        selected.focus();
     353                                } else {
     354                                        this.$search.focus();
     355                                }
     356
     357                                return;
     358                        }
     359
     360                        // If enter pressed but nothing entered, don't do anything
     361                        if ( isEnter && ! this.$search.val() ) {
     362                                return;
     363                        }
     364
     365                        if ( isEnter ) {
     366                                this.submit();
     367                        } else if ( isEsc ) {
     368                                this.close( { returnFocus: true } );
     369                        }
     370                }
     371        });
    111372
    112373        /**
    … …  
    122383                 * @param {String} newForm
    123384                 */
    124                 rss: function ( e, widget, newForm ) {
     385                rss: function( e, widget, newForm ) {
    125386                        var oldWidgetError = widget.find( '.widget-error:first' ),
    126387                                newWidgetError = $( '<div>' + newForm + '</div>' ).find( '.widget-error:first' );
    … …  
    137398
    138399        /**
    139          * Widget Form control
     400         * wp.customize.Widgets.WidgetControl
     401         *
     402         * Customizer control for widgets.
    140403         * Note that 'widget_form' must match the WP_Widget_Form_Customize_Control::$type
     404         *
     405         * @constructor
     406         * @augments wp.customize.Control
    141407         */
    142408        api.Widgets.WidgetControl = api.Control.extend({
    … …  
    247513
    248514                        // Reposition whenever a sidebar's widgets are changed
    249                         api.each( function ( setting ) {
     515                        api.each( function( setting ) {
    250516                                if ( 0 === setting.id.indexOf( 'sidebars_widgets[' ) ) {
    251517                                        setting.bind( function() {
    … …  
    265531                        var control = this, close_btn;
    266532
    267                         control.container.find( '.widget-top' ).on( 'click', function ( e ) {
     533                        control.container.find( '.widget-top' ).on( 'click', function( e ) {
    268534                                e.preventDefault();
    269535                                var sidebar_widgets_control = control.getSidebarWidgetsControl();
    … …  
    276542                        close_btn = control.container.find( '.widget-control-close' );
    277543                        // @todo Hitting Enter on this link does nothing; will be resolved in core with <http://core.trac.wordpress.org/ticket/26633>
    278                         close_btn.on( 'click', function ( e ) {
     544                        close_btn.on( 'click', function( e ) {
    279545                                e.preventDefault();
    280546                                control.collapseForm();
    … …  
    318584                         * @param {jQuery} li
    319585                         */
    320                         select_sidebar_item = function ( li ) {
     586                        select_sidebar_item = function( li ) {
    321587                                li.siblings( '.selected' ).removeClass( 'selected' );
    322588                                li.addClass( 'selected' );
    … …  
    364630                         */
    365631                        reorder_nav = control.container.find( '.widget-reorder-nav' );
    366                         reorder_nav.find( '.move-widget, .move-widget-down, .move-widget-up' ).on( 'click keypress', function ( event ) {
     632                        reorder_nav.find( '.move-widget, .move-widget-down, .move-widget-up' ).on( 'click keypress', function( event ) {
    367633                                if ( event.type === 'keypress' && ( event.which !== 13 && event.which !== 32 ) ) {
    368634                                        return;
    … …  
    394660                         * Handle selecting a sidebar to move to
    395661                         */
    396                         control.container.find( '.widget-area-select' ).on( 'click keypress', 'li', function ( e ) {
     662                        control.container.find( '.widget-area-select' ).on( 'click keypress', 'li', function( e ) {
    397663                                if ( event.type === 'keypress' && ( event.which !== 13 && event.which !== 32 ) ) {
    398664                                        return;
    … …  
    473739                        save_btn.attr( 'title', l10n.saveBtnTooltip );
    474740                        save_btn.removeClass( 'button-primary' ).addClass( 'button-secondary' );
    475                         save_btn.on( 'click', function ( e ) {
     741                        save_btn.on( 'click', function( e ) {
    476742                                e.preventDefault();
    477743                                control.updateWidget( { disable_form: true } );
    … …  
    492758
    493759                        // Handle widgets that support live previews
    494                         widget_content.on( 'change input propertychange', ':input', function ( e ) {
     760                        widget_content.on( 'change input propertychange', ':input', function( e ) {
    495761                                if ( control.live_update_mode ) {
    496762                                        if ( e.type === 'change' ) {
    … …  
    506772                                control.container.removeClass( 'previewer-loading' );
    507773                        } );
    508                         api.Widgets.Previewer.bind( 'widget-updated', function ( updated_widget_id ) {
     774                        api.Widgets.Previewer.bind( 'widget-updated', function( updated_widget_id ) {
    509775                                if ( updated_widget_id === control.params.widget_id ) {
    510776                                        control.container.removeClass( 'previewer-loading' );
    … …  
    513779
    514780                        // Update widget control to indicate whether it is currently rendered (cf. Widget Visibility)
    515                         api.Widgets.Previewer.bind( 'rendered-widgets', function ( rendered_widgets ) {
     781                        api.Widgets.Previewer.bind( 'rendered-widgets', function( rendered_widgets ) {
    516782                                var is_rendered = !! rendered_widgets[control.params.widget_id];
    517783                                control.container.toggleClass( 'widget-rendered', is_rendered );
    … …  
    520786                        form_update_event_handler = api.Widgets.formSyncHandlers[ control.params.widget_id_base ];
    521787                        if ( form_update_event_handler ) {
    522                                 $( document ).on( 'widget-synced', function ( e, widget_el ) {
     788                                $( document ).on( 'widget-synced', function( e, widget_el ) {
    523789                                        if ( widget_root.is( widget_el ) ) {
    524790                                                form_update_event_handler.apply( document, arguments );
    … …  
    539805                        remove_btn = control.container.find( 'a.widget-control-remove' );
    540806                        // @todo Hitting Enter on this link does nothing; will be resolved in core with <http://core.trac.wordpress.org/ticket/26633>
    541                         remove_btn.on( 'click', function ( e ) {
     807                        remove_btn.on( 'click', function( e ) {
    542808                                e.preventDefault();
    543809
    … …  
    593859                 * @private
    594860                 */
    595                 _getInputs: function ( container ) {
     861                _getInputs: function( container ) {
    596862                        return $( container ).find( ':input[name]' );
    597863                },
    … …  
    605871                 * @private
    606872                 */
    607                 _getInputsSignature: function ( inputs ) {
    608                         var inputs_signatures = _( inputs ).map( function ( input ) {
     873                _getInputsSignature: function( inputs ) {
     874                        var inputs_signatures = _( inputs ).map( function( input ) {
    609875                                input = $( input );
    610876                                var signature_parts;
    … …  
    626892                 * @private
    627893                 */
    628                 _getInputStatePropertyName: function ( input ) {
     894                _getInputStatePropertyName: function( input ) {
    629895                        input = $( input );
    630896                        if ( input.is( ':radio, :checkbox' ) ) {
    … …  
    662928                 * @param {Boolean} [args.ignore_active_element=false] Whether or not updating a field will be deferred if focus is still on the element.
    663929                 */
    664                 updateWidget: function ( args ) {
     930                updateWidget: function( args ) {
    665931                        var control = this,
    666932                                instance_override,
    … …  
    727993                        data += '&' + widget_content.find( '~ :input' ).serialize();
    728994
    729                         jqxhr = $.post( wp.ajax.settings.url, data, function ( r ) {
     995                        jqxhr = $.post( wp.ajax.settings.url, data, function( r ) {
    730996                                var message,
    731997                                        sanitized_form,
    … …  
    7641030                                        // Sync sanitized field states to existing fields if they are aligned
    7651031                                        if ( has_same_inputs_in_response && control.live_update_mode ) {
    766                                                 inputs.each( function ( i ) {
     1032                                                inputs.each( function( i ) {
    7671033                                                        var input = $( this ),
    7681034                                                                sanitized_input = $( sanitized_inputs[i] ),
    … …  
    8281094                                }
    8291095                        } );
    830                         jqxhr.fail( function ( jqXHR, textStatus ) {
     1096                        jqxhr.fail( function( jqXHR, textStatus ) {
    8311097                                if ( complete_callback ) {
    8321098                                        complete_callback.call( control, textStatus );
    … …  
    8731139                 * @param {boolean|undefined} [do_expand] If not supplied, will be inverse of current visibility
    8741140                 */
    875                 toggleForm: function ( do_expand ) {
     1141                toggleForm: function( do_expand ) {
    8761142                        var control = this, widget, inside, complete;
    8771143
    … …  
    8891155                        if ( do_expand ) {
    8901156                                // Close all other widget controls before expanding this one
    891                                 api.control.each( function ( other_control ) {
     1157                                api.control.each( function( other_control ) {
    8921158                                        if ( control.params.type === other_control.params.type && control !== other_control ) {
    8931159                                                other_control.collapseForm();
    … …  
    9751241                 * @param {Number} offset 1|-1
    9761242                 */
    977                 _moveWidgetByOne: function ( offset ) {
     1243                _moveWidgetByOne: function( offset ) {
    9781244                        var control = this,
    9791245                                i,
    … …  
    9981264                 * @param {Boolean} [toggle]
    9991265                 */
    1000                 toggleWidgetMoveArea: function ( toggle ) {
     1266                toggleWidgetMoveArea: function( toggle ) {
    10011267                        var control = this, move_widget_area;
    10021268                        move_widget_area = control.container.find( '.move-widget-area' );
    … …  
    10441310
    10451311        /**
    1046          * Sidebar Widgets control
     1312         * wp.customize.Widgets.SidebarControl
     1313         *
     1314         * Customizer control for widgets.
    10471315         * Note that 'sidebar_widgets' must match the WP_Widget_Area_Customize_Control::$type
     1316         *
     1317         * @constructor
     1318         * @augments wp.customize.Control
    10481319         */
    10491320        api.Widgets.SidebarControl = api.Control.extend({
    … …  
    10751346
    10761347                                // Filter out any persistent widget_ids for widgets which have been deactivated
    1077                                 new_widget_ids = _( new_widget_ids ).filter( function ( new_widget_id ) {
     1348                                new_widget_ids = _( new_widget_ids ).filter( function( new_widget_id ) {
    10781349                                        var parsed_widget_id = parse_widget_id( new_widget_id );
    10791350                                        return !! api.Widgets.availableWidgets.findWhere( { id_base: parsed_widget_id.id_base } );
    10801351                                } );
    10811352
    1082                                 widget_form_controls = _( new_widget_ids ).map( function ( widget_id ) {
     1353                                widget_form_controls = _( new_widget_ids ).map( function( widget_id ) {
    10831354                                        var widget_form_control = api.Widgets.getWidgetFormControlForWidget( widget_id );
    10841355                                        if ( ! widget_form_control ) {
    … …  
    10891360
    10901361                                // Sort widget controls to their new positions
    1091                                 widget_form_controls.sort( function ( a, b ) {
     1362                                widget_form_controls.sort( function( a, b ) {
    10921363                                        var a_index = _.indexOf( new_widget_ids, a.params.widget_id ),
    10931364                                                b_index = _.indexOf( new_widget_ids, b.params.widget_id );
    … …  
    11101381
    11111382                                // If the widget was dragged into the sidebar, make sure the sidebar_id param is updated
    1112                                 _( widget_form_controls ).each( function ( widget_form_control ) {
     1383                                _( widget_form_controls ).each( function( widget_form_control ) {
    11131384                                        widget_form_control.params.sidebar_id = control.params.sidebar_id;
    11141385                                } );
    11151386
    11161387                                // Cleanup after widget removal
    1117                                 _( removed_widget_ids ).each( function ( removed_widget_id ) {
     1388                                _( removed_widget_ids ).each( function( removed_widget_id ) {
    11181389
    11191390                                        // Using setTimeout so that when moving a widget to another sidebar, the other sidebars_widgets settings get a chance to update
    … …  
    11271398
    11281399                                                // Check if the widget is in another sidebar
    1129                                                 api.each( function ( other_setting ) {
     1400                                                api.each( function( other_setting ) {
    11301401                                                        if ( other_setting.id === control.setting.id || 0 !== other_setting.id.indexOf( 'sidebars_widgets[' ) || other_setting.id === 'sidebars_widgets[wp_inactive_widgets]' ) {
    11311402                                                                return;
    … …  
    11791450
    11801451                        // Update the model with whether or not the sidebar is rendered
    1181                         api.Widgets.Previewer.bind( 'rendered-sidebars', function ( rendered_sidebars ) {
     1452                        api.Widgets.Previewer.bind( 'rendered-sidebars', function( rendered_sidebars ) {
    11821453                                var is_rendered = !! rendered_sidebars[control.params.sidebar_id];
    11831454                                registered_sidebar.set( 'is_rendered', is_rendered );
    … …  
    11851456
    11861457                        // Show the sidebar section when it becomes visible
    1187                         registered_sidebar.on( 'change:is_rendered', function ( ) {
     1458                        registered_sidebar.on( 'change:is_rendered', function( ) {
    11881459                                var section_selector = '#accordion-section-sidebar-widgets-' + this.get( 'id' ), section;
    11891460                                section = $( section_selector );
    … …  
    12201491                                update: function() {
    12211492                                        var widget_container_ids = control.section_content.sortable( 'toArray' ), widget_ids;
    1222                                         widget_ids = $.map( widget_container_ids, function ( widget_container_id ) {
     1493                                        widget_ids = $.map( widget_container_ids, function( widget_container_id ) {
    12231494                                                return $( '#' + widget_container_id ).find( ':input[name=widget-id]' ).val();
    12241495                                        } );
    … …  
    13071578                 * @param {Boolean} toggle to enable/disable reordering
    13081579                 */
    1309                 toggleReordering: function ( toggle ) {
     1580                toggleReordering: function( toggle ) {
    13101581                        var control = this;
    13111582                        toggle = Boolean( toggle );
    … …  
    13181589
    13191590                        if ( toggle ) {
    1320                                 _( control.getWidgetFormControls() ).each( function ( form_control ) {
     1591                                _( control.getWidgetFormControls() ).each( function( form_control ) {
    13211592                                        form_control.collapseForm();
    13221593                                } );
    … …  
    13301601                        var control = this, form_controls;
    13311602
    1332                         form_controls = _( control.setting() ).map( function ( widget_id ) {
     1603                        form_controls = _( control.setting() ).map( function( widget_id ) {
    13331604                                var setting_id = widget_id_to_setting_id( widget_id ),
    13341605                                        form_control = api.control( setting_id );
    … …  
    13461617                 * @returns {object} widget_form control instance
    13471618                 */
    1348                 addWidget: function ( widget_id ) {
     1619                addWidget: function( widget_id ) {
    13491620                        var control = this,
    13501621                                control_html,
    … …  
    13781649                        control_html = $( '#widget-tpl-' + widget.get( 'id' ) ).html();
    13791650                        if ( widget.get( 'is_multi' ) ) {
    1380                                 control_html = control_html.replace( /<[^<>]+>/g, function ( m ) {
     1651                                control_html = control_html.replace( /<[^<>]+>/g, function( m ) {
    13811652                                        return m.replace( /__i__|%i%/g, widget_number );
    13821653                                } );
    … …  
    14361707
    14371708                        // Make sure widget is removed from the other sidebars
    1438                         api.each( function ( other_setting ) {
     1709                        api.each( function( other_setting ) {
    14391710                                if ( other_setting.id === control.setting.id ) {
    14401711                                        return;
    … …  
    14631734                                        widget_form_control.updateWidget( {
    14641735                                                instance: widget_form_control.setting(),
    1465                                                 complete: function ( error ) {
     1736                                                complete: function( error ) {
    14661737                                                        if ( error ) {
    14671738                                                                throw error;
    … …  
    14891760        api.bind( 'ready', function() {
    14901761                // Set up the widgets panel
    1491                 api.Widgets.availableWidgetsPanel.setup();
     1762                api.Widgets.availableWidgetsPanel = new api.Widgets.AvailableWidgetsPanelView({
     1763                        collection: api.Widgets.availableWidgets
     1764                });
    14921765
    14931766                // Highlight widget control
    … …  
    15411814         * @return {object|null}
    15421815         */
    1543         api.Widgets.getSidebarWidgetControlContainingWidget = function ( widget_id ) {
     1816        api.Widgets.getSidebarWidgetControlContainingWidget = function( widget_id ) {
    15441817                var found_control = null;
    15451818                // @todo this can use widget_id_to_setting_id(), then pass into wp.customize.control( x ).getSidebarWidgetsControl()
    1546                 api.control.each( function ( control ) {
     1819                api.control.each( function( control ) {
    15471820                        if ( control.params.type === 'sidebar_widgets' && -1 !== _.indexOf( control.setting(), widget_id ) ) {
    15481821                                found_control = control;
    … …  
    15581831         * @return {object|null}
    15591832         */
    1560         api.Widgets.getWidgetFormControlForWidget = function ( widget_id ) {
     1833        api.Widgets.getWidgetFormControlForWidget = function( widget_id ) {
    15611834                var found_control = null;
    15621835                // @todo We can just use widget_id_to_setting_id() here
    1563                 api.control.each( function ( control ) {
     1836                api.control.each( function( control ) {
    15641837                        if ( control.params.type === 'widget_form' && control.params.widget_id === widget_id ) {
    15651838                                found_control = control;
    … …  
    15681841
    15691842                return found_control;
    1570         };
    1571 
    1572         /**
    1573          * Available Widgets Panel
    1574          */
    1575         api.Widgets.availableWidgetsPanel = {
    1576                 active_sidebar_widgets_control: null,
    1577                 selected_widget_tpl: null,
    1578                 container: null,
    1579                 filter_input: null,
    1580 
    1581                 /**
    1582                  * Set up event listeners
    1583                  */
    1584                 setup: function() {
    1585                         var panel = this;
    1586 
    1587                         panel.container = $( '#available-widgets' );
    1588                         panel.filter_input = $( '#available-widgets-filter' ).find( 'input' );
    1589 
    1590                         api.Widgets.availableWidgets.on( 'change update', panel.update_available_widgets_list );
    1591                         panel.update_available_widgets_list();
    1592 
    1593                         // If the available widgets panel is open and the customize controls are
    1594                         // interacted with (i.e. available widgets panel is blurred) then close the
    1595                         // available widgets panel.
    1596                         $( '#customize-controls' ).on( 'click keydown', function ( e ) {
    1597                                 var is_add_new_widget_btn = $( e.target ).is( '.add-new-widget, .add-new-widget *' );
    1598                                 if ( $( 'body' ).hasClass( 'adding-widget' ) && ! is_add_new_widget_btn ) {
    1599                                         panel.close();
    1600                                 }
    1601                         } );
    1602 
    1603                         // Close the panel if the URL in the preview changes
    1604                         api.Widgets.Previewer.bind( 'url', function() {
    1605                                 panel.close();
    1606                         } );
    1607 
    1608                         // Submit a selection when clicked or keypressed
    1609                         panel.container.find( '.widget-tpl' ).on( 'click keypress', function( event ) {
    1610 
    1611                                 // Only proceed with keypress if it is Enter or Spacebar
    1612                                 if ( event.type === 'keypress' && ( event.which !== 13 && event.which !== 32 ) ) {
    1613                                         return;
    1614                                 }
    1615 
    1616                                 panel.submit( this );
    1617                         } );
    1618 
    1619                         panel.filter_input.on( 'input keyup change', function( event ) {
    1620                                 var first_visible_widget;
    1621 
    1622                                 api.Widgets.availableWidgets.doSearch( event.target.value );
    1623 
    1624                                 // Remove a widget from being selected if it is no longer visible
    1625                                 if ( panel.selected_widget_tpl && ! panel.selected_widget_tpl.is( ':visible' ) ) {
    1626                                         panel.selected_widget_tpl.removeClass( 'selected' );
    1627                                         panel.selected_widget_tpl = null;
    1628                                 }
    1629 
    1630                                 // If a widget was selected but the filter value has been cleared out, clear selection
    1631                                 if ( panel.selected_widget_tpl && ! event.target.value ) {
    1632                                         panel.selected_widget_tpl.removeClass( 'selected' );
    1633                                         panel.selected_widget_tpl = null;
    1634                                 }
    1635 
    1636                                 // If a filter has been entered and a widget hasn't been selected, select the first one shown
    1637                                 if ( ! panel.selected_widget_tpl &&  event.target.value ) {
    1638                                         first_visible_widget = panel.container.find( '> .widget-tpl:visible:first' );
    1639                                         if ( first_visible_widget.length ) {
    1640                                                 panel.select( first_visible_widget );
    1641                                         }
    1642                                 }
    1643                         } );
    1644 
    1645                         // Select a widget when it is focused on
    1646                         panel.container.find( ' > .widget-tpl' ).on( 'focus', function() {
    1647                                 panel.select( this );
    1648                         } );
    1649 
    1650                         panel.container.on( 'keydown', function ( event ) {
    1651                                 var is_enter = ( event.which === 13 ),
    1652                                         is_esc = ( event.which === 27 ),
    1653                                         is_down = ( event.which === 40 ),
    1654                                         is_up = ( event.which === 38 ),
    1655                                         selected_widget_tpl = null,
    1656                                         first_visible_widget = panel.container.find( '> .widget-tpl:visible:first' ),
    1657                                         last_visible_widget = panel.container.find( '> .widget-tpl:visible:last' ),
    1658                                         is_input_focused = $( event.target ).is( panel.filter_input );
    1659 
    1660                                 if ( is_down || is_up ) {
    1661                                         if ( is_down ) {
    1662                                                 if ( is_input_focused ) {
    1663                                                         selected_widget_tpl = first_visible_widget;
    1664                                                 } else if ( panel.selected_widget_tpl && panel.selected_widget_tpl.nextAll( '.widget-tpl:visible' ).length !== 0 ) {
    1665                                                         selected_widget_tpl = panel.selected_widget_tpl.nextAll( '.widget-tpl:visible:first' );
    1666                                                 }
    1667                                         } else if ( is_up ) {
    1668                                                 if ( is_input_focused ) {
    1669                                                         selected_widget_tpl = last_visible_widget;
    1670                                                 } else if ( panel.selected_widget_tpl && panel.selected_widget_tpl.prevAll( '.widget-tpl:visible' ).length !== 0 ) {
    1671                                                         selected_widget_tpl = panel.selected_widget_tpl.prevAll( '.widget-tpl:visible:first' );
    1672                                                 }
    1673                                         }
    1674                                         panel.select( selected_widget_tpl );
    1675                                         if ( selected_widget_tpl ) {
    1676                                                 selected_widget_tpl.focus();
    1677                                         } else {
    1678                                                 panel.filter_input.focus();
    1679                                         }
    1680                                         return;
    1681                                 }
    1682 
    1683                                 // If enter pressed but nothing entered, don't do anything
    1684                                 if ( is_enter && ! panel.filter_input.val() ) {
    1685                                         return;
    1686                                 }
    1687 
    1688                                 if ( is_enter ) {
    1689                                         panel.submit();
    1690                                 } else if ( is_esc ) {
    1691                                         panel.close( { return_focus: true } );
    1692                                 }
    1693                         } );
    1694                 },
    1695 
    1696                 /**
    1697                  * Updates widgets list.
    1698                  */
    1699                 update_available_widgets_list: function() {
    1700                         var panel = api.Widgets.availableWidgetsPanel;
    1701 
    1702                         // First hide all widgets...
    1703                         panel.container.find( '.widget-tpl' ).hide();
    1704 
    1705                         // ..and then show only available widgets which could be filtered
    1706                         api.Widgets.availableWidgets.each( function ( widget ) {
    1707                                 var widget_tpl = $( '#widget-tpl-' + widget.id );
    1708                                 widget_tpl.toggle( ! widget.get( 'is_disabled' ) );
    1709                                 if ( widget.get( 'is_disabled' ) && widget_tpl.is( panel.selected_widget_tpl ) ) {
    1710                                         panel.selected_widget_tpl = null;
    1711                                 }
    1712                         } );
    1713                 },
    1714 
    1715                 /**
    1716                  * @param widget_tpl
    1717                  */
    1718                 select: function ( widget_tpl ) {
    1719                         var panel = this;
    1720                         panel.selected_widget_tpl = $( widget_tpl );
    1721                         panel.selected_widget_tpl.siblings( '.widget-tpl' ).removeClass( 'selected' );
    1722                         panel.selected_widget_tpl.addClass( 'selected' );
    1723                 },
    1724 
    1725                 submit: function ( widget_tpl ) {
    1726                         var panel = this, widget_id, widget;
    1727                         if ( ! widget_tpl ) {
    1728                                 widget_tpl = panel.selected_widget_tpl;
    1729                         }
    1730                         if ( ! widget_tpl || ! panel.active_sidebar_widgets_control ) {
    1731                                 return;
    1732                         }
    1733                         panel.select( widget_tpl );
    1734 
    1735                         widget_id = $( panel.selected_widget_tpl ).data( 'widget-id' );
    1736                         widget = api.Widgets.availableWidgets.findWhere( {id: widget_id} );
    1737                         if ( ! widget ) {
    1738                                 throw new Error( 'Widget unexpectedly not found.' );
    1739                         }
    1740                         panel.active_sidebar_widgets_control.addWidget( widget.get( 'id_base' ) );
    1741                         panel.close();
    1742                 },
    1743 
    1744                 /**
    1745                  * @param sidebars_widgets_control
    1746                  */
    1747                 open: function ( sidebars_widgets_control ) {
    1748                         var panel = this;
    1749                         panel.active_sidebar_widgets_control = sidebars_widgets_control;
    1750 
    1751                         // Wide widget controls appear over the preview, and so they need to be collapsed when the panel opens
    1752                         _( sidebars_widgets_control.getWidgetFormControls() ).each( function ( control ) {
    1753                                 if ( control.params.is_wide ) {
    1754                                         control.collapseForm();
    1755                                 }
    1756                         } );
    1757 
    1758                         $( 'body' ).addClass( 'adding-widget' );
    1759                         panel.container.find( '.widget-tpl' ).removeClass( 'selected' );
    1760                         api.Widgets.availableWidgets.doSearch( '' );
    1761                         panel.filter_input.focus();
    1762                 },
    1763 
    1764                 /**
    1765                  * Hide the panel
    1766                  */
    1767                 close: function ( options ) {
    1768                         var panel = this;
    1769                         options = options || {};
    1770                         if ( options.return_focus && panel.active_sidebar_widgets_control ) {
    1771                                 panel.active_sidebar_widgets_control.container.find( '.add-new-widget' ).focus();
    1772                         }
    1773                         panel.active_sidebar_widgets_control = null;
    1774                         panel.selected_widget_tpl = null;
    1775                         $( 'body' ).removeClass( 'adding-widget' );
    1776                         panel.filter_input.val( '' );
    1777                 }
    17781843        };
    17791844
Note: See TracChangeset for help on using the changeset viewer.