Changeset 27986

Timestamp:

04/07/2014 02:09:53 PM (11 years ago)

Author:

ocean90

Message:

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

see #27690.

File:

• trunk/src/wp-admin/js/customize-widgets.js (modified) (48 diffs)

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

@@ -16 +16 @@
 
     /**
-     * Set up model
+     * wp.customize.Widgets.WidgetModel
+     *
+     * A single widget model.
+     *
+     * @constructor
+     * @augments Backbone.Model
      */
     api.Widgets.WidgetModel = Backbone.Model.extend({
@@ -35 +40 @@
     });
 
+    /**
+     * wp.customize.Widgets.WidgetCollection
+     *
+     * Collection for widget models.
+     *
+     * @constructor
+     * @augments Backbone.Model
+     */
     api.Widgets.WidgetCollection = Backbone.Collection.extend({
         model: api.Widgets.WidgetModel,
@@ -93 +106 @@
     api.Widgets.availableWidgets = new api.Widgets.WidgetCollection( api.Widgets.data.availableWidgets );
 
+    /**
+     * wp.customize.Widgets.SidebarModel
+     *
+     * A single sidebar model.
+     *
+     * @constructor
+     * @augments Backbone.Model
+     */
     api.Widgets.SidebarModel = Backbone.Model.extend({
         after_title: null,
@@ -105 +126 @@
     });
 
+    /**
+     * wp.customize.Widgets.SidebarCollection
+     *
+     * Collection for sidebar models.
+     *
+     * @constructor
+     * @augments Backbone.Collection
+     */
     api.Widgets.SidebarCollection = Backbone.Collection.extend({
         model: api.Widgets.SidebarModel
     });
     api.Widgets.registeredSidebars = new api.Widgets.SidebarCollection( api.Widgets.data.registeredSidebars );
+
+    /**
+     * wp.customize.Widgets.AvailableWidgetsPanelView
+     *
+     * View class for the available widgets panel.
+     *
+     * @constructor
+     * @augments wp.Backbone.View
+     * @augments Backbone.View
+     */
+    api.Widgets.AvailableWidgetsPanelView = wp.Backbone.View.extend({
+
+        el: '#available-widgets',
+
+        events: {
+            'input #widgets-search': 'search',
+            'keyup #widgets-search': 'search',
+            'change #widgets-search': 'search',
+            'search #widgets-search': 'search',
+            'focus .widget-tpl' : 'focus',
+            'click .widget-tpl' : '_submit',
+            'keypress .widget-tpl' : '_submit',
+            'keydown' : 'keyboardAccessible'
+        },
+
+        // Cache current selected widget
+        selected: null,
+
+        // Cache sidebar control which has opened panel
+        currentSidebarControl: null,
+        $search: null,
+
+        initialize: function() {
+            var self = this;
+
+            this.$search = $( '#widgets-search' );
+
+            _.bindAll( this, 'close' );
+
+            this.listenTo( this.collection, 'update', this.updateList );
+
+            this.updateList();
+
+            // If the available widgets panel is open and the customize controls are
+            // interacted with (i.e. available widgets panel is blurred) then close the
+            // available widgets panel.
+            $( '#customize-controls' ).on( 'click keydown', function( e ) {
+                var isAddNewBtn = $( e.target ).is( '.add-new-widget, .add-new-widget *' );
+                if ( $( 'body' ).hasClass( 'adding-widget' ) && ! isAddNewBtn ) {
+                    self.close();
+                }
+            } );
+
+            // Close the panel if the URL in the preview changes
+            api.Widgets.Previewer.bind( 'url', this.close );
+        },
+
+        // Performs a search and handles selected widget
+        search: function( event ) {
+            var firstVisible;
+
+            this.collection.doSearch( event.target.value );
+
+            // Remove a widget from being selected if it is no longer visible
+            if ( this.selected && ! this.selected.is( ':visible' ) ) {
+                this.selected.removeClass( 'selected' );
+                this.selected = null;
+            }
+
+            // If a widget was selected but the filter value has been cleared out, clear selection
+            if ( this.selected && ! event.target.value ) {
+                this.selected.removeClass( 'selected' );
+                this.selected = null;
+            }
+
+            // If a filter has been entered and a widget hasn't been selected, select the first one shown
+            if ( ! this.selected && event.target.value ) {
+                firstVisible = this.$el.find( '> .widget-tpl:visible:first' );
+                if ( firstVisible.length ) {
+                    this.select( firstVisible );
+                }
+            }
+        },
+
+        // Changes visibilty of available widgets
+        updateList: function() {
+            // First hide all widgets...
+            this.$el.find( '.widget-tpl' ).hide();
+
+            // ..and then show only available widgets which could be filtered
+            this.collection.each( function( widget ) {
+                var widgetTpl = $( '#widget-tpl-' + widget.id );
+                widgetTpl.toggle( ! widget.get( 'is_disabled' ) );
+                if ( widget.get( 'is_disabled' ) && widgetTpl.is( this.selected ) ) {
+                    this.selected = null;
+                }
+            } );
+        },
+
+        // Hightlights a widget
+        select: function( widgetTpl ) {
+            this.selected = $( widgetTpl );
+            this.selected.siblings( '.widget-tpl' ).removeClass( 'selected' );
+            this.selected.addClass( 'selected' );
+        },
+
+        // Hightlights a widget on focus
+        focus: function( event ) {
+            this.select( $( event.currentTarget ) );
+        },
+
+        // Submit handler for keypress and click on widget
+        _submit: function( event ) {
+            // Only proceed with keypress if it is Enter or Spacebar
+            if ( event.type === 'keypress' && ( event.which !== 13 && event.which !== 32 ) ) {
+                return;
+            }
+
+            this.submit( $( event.currentTarget ) );
+        },
+
+        // Adds a selected widget to the sidebar
+        submit: function( widgetTpl ) {
+            var widgetId, widget;
+
+            if ( ! widgetTpl ) {
+                widgetTpl = this.selected;
+            }
+
+            if ( ! widgetTpl || ! this.currentSidebarControl ) {
+                return;
+            }
+
+            this.select( widgetTpl );
+
+            widgetId = $( this.selected ).data( 'widget-id' );
+            widget = this.collection.findWhere( { id: widgetId } );
+            if ( ! widget ) {
+                return;
+            }
+
+            this.currentSidebarControl.addWidget( widget.get( 'id_base' ) );
+
+            this.close();
+        },
+
+        // Opens the panel
+        open: function( sidebarControl ) {
+            this.currentSidebarControl = sidebarControl;
+
+            // Wide widget controls appear over the preview, and so they need to be collapsed when the panel opens
+            _( this.currentSidebarControl.getWidgetFormControls() ).each( function( control ) {
+                if ( control.params.is_wide ) {
+                    control.collapseForm();
+                }
+            } );
+
+            $( 'body' ).addClass( 'adding-widget' );
+
+            this.$el.find( '.selected' ).removeClass( 'selected' );
+
+            // Reset search
+            this.collection.doSearch( '' );
+
+            this.$search.focus();
+        },
+
+        // Closes the panel
+        close: function( options ) {
+            options = options || {};
+
+            if ( options.returnFocus && this.currentSidebarControl ) {
+                this.currentSidebarControl.container.find( '.add-new-widget' ).focus();
+            }
+
+            this.currentSidebarControl = null;
+            this.selected = null;
+
+            $( 'body' ).removeClass( 'adding-widget' );
+
+            this.$search.val( '' );
+        },
+
+        // Add keyboard accessiblity to the panel
+        keyboardAccessible: function( event ) {
+            var isEnter = ( event.which === 13 ),
+                isEsc = ( event.which === 27 ),
+                isDown = ( event.which === 40 ),
+                isUp = ( event.which === 38 ),
+                selected = null,
+                firstVisible = this.$el.find( '> .widget-tpl:visible:first' ),
+                lastVisible = this.$el.find( '> .widget-tpl:visible:last' ),
+                isSearchFocused = $( event.target ).is( this.$search );
+
+            if ( isDown || isUp ) {
+                if ( isDown ) {
+                    if ( isSearchFocused ) {
+                        selected = firstVisible;
+                    } else if ( this.selected && this.selected.nextAll( '.widget-tpl:visible' ).length !== 0 ) {
+                        selected = this.selected.nextAll( '.widget-tpl:visible:first' );
+                    }
+                } else if ( isUp ) {
+                    if ( isSearchFocused ) {
+                        selected = lastVisible;
+                    } else if ( this.selected && this.selected.prevAll( '.widget-tpl:visible' ).length !== 0 ) {
+                        selected = this.selected.prevAll( '.widget-tpl:visible:first' );
+                    }
+                }
+
+                this.select( selected );
+
+                if ( selected ) {
+                    selected.focus();
+                } else {
+                    this.$search.focus();
+                }
+
+                return;
+            }
+
+            // If enter pressed but nothing entered, don't do anything
+            if ( isEnter && ! this.$search.val() ) {
+                return;
+            }
+
+            if ( isEnter ) {
+                this.submit();
+            } else if ( isEsc ) {
+                this.close( { returnFocus: true } );
+            }
+        }
+    });
 
     /**
@@ -122 +383 @@
          * @param {String} newForm
          */
-        rss: function ( e, widget, newForm ) {
+        rss: function( e, widget, newForm ) {
             var oldWidgetError = widget.find( '.widget-error:first' ),
                 newWidgetError = $( '<div>' + newForm + '</div>' ).find( '.widget-error:first' );
@@ -137 +398 @@
 
     /**
-     * Widget Form control
+     * wp.customize.Widgets.WidgetControl
+     *
+     * Customizer control for widgets.
      * Note that 'widget_form' must match the WP_Widget_Form_Customize_Control::$type
+     *
+     * @constructor
+     * @augments wp.customize.Control
      */
     api.Widgets.WidgetControl = api.Control.extend({
@@ -247 +513 @@
 
             // Reposition whenever a sidebar's widgets are changed
-            api.each( function ( setting ) {
+            api.each( function( setting ) {
                 if ( 0 === setting.id.indexOf( 'sidebars_widgets[' ) ) {
                     setting.bind( function() {
@@ -265 +531 @@
             var control = this, close_btn;
 
-            control.container.find( '.widget-top' ).on( 'click', function ( e ) {
+            control.container.find( '.widget-top' ).on( 'click', function( e ) {
                 e.preventDefault();
                 var sidebar_widgets_control = control.getSidebarWidgetsControl();
@@ -276 +542 @@
             close_btn = control.container.find( '.widget-control-close' );
             // @todo Hitting Enter on this link does nothing; will be resolved in core with <http://core.trac.wordpress.org/ticket/26633>
-            close_btn.on( 'click', function ( e ) {
+            close_btn.on( 'click', function( e ) {
                 e.preventDefault();
                 control.collapseForm();
@@ -318 +584 @@
              * @param {jQuery} li
              */
-            select_sidebar_item = function ( li ) {
+            select_sidebar_item = function( li ) {
                 li.siblings( '.selected' ).removeClass( 'selected' );
                 li.addClass( 'selected' );
@@ -364 +630 @@
              */
             reorder_nav = control.container.find( '.widget-reorder-nav' );
-            reorder_nav.find( '.move-widget, .move-widget-down, .move-widget-up' ).on( 'click keypress', function ( event ) {
+            reorder_nav.find( '.move-widget, .move-widget-down, .move-widget-up' ).on( 'click keypress', function( event ) {
                 if ( event.type === 'keypress' && ( event.which !== 13 && event.which !== 32 ) ) {
                     return;
@@ -394 +660 @@
              * Handle selecting a sidebar to move to
              */
-            control.container.find( '.widget-area-select' ).on( 'click keypress', 'li', function ( e ) {
+            control.container.find( '.widget-area-select' ).on( 'click keypress', 'li', function( e ) {
                 if ( event.type === 'keypress' && ( event.which !== 13 && event.which !== 32 ) ) {
                     return;
@@ -473 +739 @@
             save_btn.attr( 'title', l10n.saveBtnTooltip );
             save_btn.removeClass( 'button-primary' ).addClass( 'button-secondary' );
-            save_btn.on( 'click', function ( e ) {
+            save_btn.on( 'click', function( e ) {
                 e.preventDefault();
                 control.updateWidget( { disable_form: true } );
@@ -492 +758 @@
 
             // Handle widgets that support live previews
-            widget_content.on( 'change input propertychange', ':input', function ( e ) {
+            widget_content.on( 'change input propertychange', ':input', function( e ) {
                 if ( control.live_update_mode ) {
                     if ( e.type === 'change' ) {
@@ -506 +772 @@
                 control.container.removeClass( 'previewer-loading' );
             } );
-            api.Widgets.Previewer.bind( 'widget-updated', function ( updated_widget_id ) {
+            api.Widgets.Previewer.bind( 'widget-updated', function( updated_widget_id ) {
                 if ( updated_widget_id === control.params.widget_id ) {
                     control.container.removeClass( 'previewer-loading' );
@@ -513 +779 @@
 
             // Update widget control to indicate whether it is currently rendered (cf. Widget Visibility)
-            api.Widgets.Previewer.bind( 'rendered-widgets', function ( rendered_widgets ) {
+            api.Widgets.Previewer.bind( 'rendered-widgets', function( rendered_widgets ) {
                 var is_rendered = !! rendered_widgets[control.params.widget_id];
                 control.container.toggleClass( 'widget-rendered', is_rendered );
@@ -520 +786 @@
             form_update_event_handler = api.Widgets.formSyncHandlers[ control.params.widget_id_base ];
             if ( form_update_event_handler ) {
-                $( document ).on( 'widget-synced', function ( e, widget_el ) {
+                $( document ).on( 'widget-synced', function( e, widget_el ) {
                     if ( widget_root.is( widget_el ) ) {
                         form_update_event_handler.apply( document, arguments );
@@ -539 +805 @@
             remove_btn = control.container.find( 'a.widget-control-remove' );
             // @todo Hitting Enter on this link does nothing; will be resolved in core with <http://core.trac.wordpress.org/ticket/26633>
-            remove_btn.on( 'click', function ( e ) {
+            remove_btn.on( 'click', function( e ) {
                 e.preventDefault();
 
@@ -593 +859 @@
          * @private
          */
-        _getInputs: function ( container ) {
+        _getInputs: function( container ) {
             return $( container ).find( ':input[name]' );
         },
@@ -605 +871 @@
          * @private
          */
-        _getInputsSignature: function ( inputs ) {
-            var inputs_signatures = _( inputs ).map( function ( input ) {
+        _getInputsSignature: function( inputs ) {
+            var inputs_signatures = _( inputs ).map( function( input ) {
                 input = $( input );
                 var signature_parts;
@@ -626 +892 @@
          * @private
          */
-        _getInputStatePropertyName: function ( input ) {
+        _getInputStatePropertyName: function( input ) {
             input = $( input );
             if ( input.is( ':radio, :checkbox' ) ) {
@@ -662 +928 @@
          * @param {Boolean} [args.ignore_active_element=false] Whether or not updating a field will be deferred if focus is still on the element.
          */
-        updateWidget: function ( args ) {
+        updateWidget: function( args ) {
             var control = this,
                 instance_override,
@@ -727 +993 @@
             data += '&' + widget_content.find( '~ :input' ).serialize();
 
-            jqxhr = $.post( wp.ajax.settings.url, data, function ( r ) {
+            jqxhr = $.post( wp.ajax.settings.url, data, function( r ) {
                 var message,
                     sanitized_form,
@@ -764 +1030 @@
                     // Sync sanitized field states to existing fields if they are aligned
                     if ( has_same_inputs_in_response && control.live_update_mode ) {
-                        inputs.each( function ( i ) {
+                        inputs.each( function( i ) {
                             var input = $( this ),
                                 sanitized_input = $( sanitized_inputs[i] ),
@@ -828 +1094 @@
                 }
             } );
-            jqxhr.fail( function ( jqXHR, textStatus ) {
+            jqxhr.fail( function( jqXHR, textStatus ) {
                 if ( complete_callback ) {
                     complete_callback.call( control, textStatus );
@@ -873 +1139 @@
          * @param {boolean|undefined} [do_expand] If not supplied, will be inverse of current visibility
          */
-        toggleForm: function ( do_expand ) {
+        toggleForm: function( do_expand ) {
             var control = this, widget, inside, complete;
 
@@ -889 +1155 @@
             if ( do_expand ) {
                 // Close all other widget controls before expanding this one
-                api.control.each( function ( other_control ) {
+                api.control.each( function( other_control ) {
                     if ( control.params.type === other_control.params.type && control !== other_control ) {
                         other_control.collapseForm();
@@ -975 +1241 @@
          * @param {Number} offset 1|-1
          */
-        _moveWidgetByOne: function ( offset ) {
+        _moveWidgetByOne: function( offset ) {
             var control = this,
                 i,
@@ -998 +1264 @@
          * @param {Boolean} [toggle]
          */
-        toggleWidgetMoveArea: function ( toggle ) {
+        toggleWidgetMoveArea: function( toggle ) {
             var control = this, move_widget_area;
             move_widget_area = control.container.find( '.move-widget-area' );
@@ -1044 +1310 @@
 
     /**
-     * Sidebar Widgets control
+     * wp.customize.Widgets.SidebarControl
+     *
+     * Customizer control for widgets.
      * Note that 'sidebar_widgets' must match the WP_Widget_Area_Customize_Control::$type
+     *
+     * @constructor
+     * @augments wp.customize.Control
      */
     api.Widgets.SidebarControl = api.Control.extend({
@@ -1075 +1346 @@
 
                 // Filter out any persistent widget_ids for widgets which have been deactivated
-                new_widget_ids = _( new_widget_ids ).filter( function ( new_widget_id ) {
+                new_widget_ids = _( new_widget_ids ).filter( function( new_widget_id ) {
                     var parsed_widget_id = parse_widget_id( new_widget_id );
                     return !! api.Widgets.availableWidgets.findWhere( { id_base: parsed_widget_id.id_base } );
                 } );
 
-                widget_form_controls = _( new_widget_ids ).map( function ( widget_id ) {
+                widget_form_controls = _( new_widget_ids ).map( function( widget_id ) {
                     var widget_form_control = api.Widgets.getWidgetFormControlForWidget( widget_id );
                     if ( ! widget_form_control ) {
@@ -1089 +1360 @@
 
                 // Sort widget controls to their new positions
-                widget_form_controls.sort( function ( a, b ) {
+                widget_form_controls.sort( function( a, b ) {
                     var a_index = _.indexOf( new_widget_ids, a.params.widget_id ),
                         b_index = _.indexOf( new_widget_ids, b.params.widget_id );
@@ -1110 +1381 @@
 
                 // If the widget was dragged into the sidebar, make sure the sidebar_id param is updated
-                _( widget_form_controls ).each( function ( widget_form_control ) {
+                _( widget_form_controls ).each( function( widget_form_control ) {
                     widget_form_control.params.sidebar_id = control.params.sidebar_id;
                 } );
 
                 // Cleanup after widget removal
-                _( removed_widget_ids ).each( function ( removed_widget_id ) {
+                _( removed_widget_ids ).each( function( removed_widget_id ) {
 
                     // Using setTimeout so that when moving a widget to another sidebar, the other sidebars_widgets settings get a chance to update
@@ -1127 +1398 @@
 
                         // Check if the widget is in another sidebar
-                        api.each( function ( other_setting ) {
+                        api.each( function( other_setting ) {
                             if ( other_setting.id === control.setting.id || 0 !== other_setting.id.indexOf( 'sidebars_widgets[' ) || other_setting.id === 'sidebars_widgets[wp_inactive_widgets]' ) {
                                 return;
@@ -1179 +1450 @@
 
             // Update the model with whether or not the sidebar is rendered
-            api.Widgets.Previewer.bind( 'rendered-sidebars', function ( rendered_sidebars ) {
+            api.Widgets.Previewer.bind( 'rendered-sidebars', function( rendered_sidebars ) {
                 var is_rendered = !! rendered_sidebars[control.params.sidebar_id];
                 registered_sidebar.set( 'is_rendered', is_rendered );
@@ -1185 +1456 @@
 
             // Show the sidebar section when it becomes visible
-            registered_sidebar.on( 'change:is_rendered', function ( ) {
+            registered_sidebar.on( 'change:is_rendered', function( ) {
                 var section_selector = '#accordion-section-sidebar-widgets-' + this.get( 'id' ), section;
                 section = $( section_selector );
@@ -1220 +1491 @@
                 update: function() {
                     var widget_container_ids = control.section_content.sortable( 'toArray' ), widget_ids;
-                    widget_ids = $.map( widget_container_ids, function ( widget_container_id ) {
+                    widget_ids = $.map( widget_container_ids, function( widget_container_id ) {
                         return $( '#' + widget_container_id ).find( ':input[name=widget-id]' ).val();
                     } );
@@ -1307 +1578 @@
          * @param {Boolean} toggle to enable/disable reordering
          */
-        toggleReordering: function ( toggle ) {
+        toggleReordering: function( toggle ) {
             var control = this;
             toggle = Boolean( toggle );
@@ -1318 +1589 @@
 
             if ( toggle ) {
-                _( control.getWidgetFormControls() ).each( function ( form_control ) {
+                _( control.getWidgetFormControls() ).each( function( form_control ) {
                     form_control.collapseForm();
                 } );
@@ -1330 +1601 @@
             var control = this, form_controls;
 
-            form_controls = _( control.setting() ).map( function ( widget_id ) {
+            form_controls = _( control.setting() ).map( function( widget_id ) {
                 var setting_id = widget_id_to_setting_id( widget_id ),
                     form_control = api.control( setting_id );
@@ -1346 +1617 @@
          * @returns {object} widget_form control instance
          */
-        addWidget: function ( widget_id ) {
+        addWidget: function( widget_id ) {
             var control = this,
                 control_html,
@@ -1378 +1649 @@
             control_html = $( '#widget-tpl-' + widget.get( 'id' ) ).html();
             if ( widget.get( 'is_multi' ) ) {
-                control_html = control_html.replace( /<[^<>]+>/g, function ( m ) {
+                control_html = control_html.replace( /<[^<>]+>/g, function( m ) {
                     return m.replace( /__i__|%i%/g, widget_number );
                 } );
@@ -1436 +1707 @@
 
             // Make sure widget is removed from the other sidebars
-            api.each( function ( other_setting ) {
+            api.each( function( other_setting ) {
                 if ( other_setting.id === control.setting.id ) {
                     return;
@@ -1463 +1734 @@
                     widget_form_control.updateWidget( {
                         instance: widget_form_control.setting(),
-                        complete: function ( error ) {
+                        complete: function( error ) {
                             if ( error ) {
                                 throw error;
@@ -1489 +1760 @@
     api.bind( 'ready', function() {
         // Set up the widgets panel
-        api.Widgets.availableWidgetsPanel.setup();
+        api.Widgets.availableWidgetsPanel = new api.Widgets.AvailableWidgetsPanelView({
+            collection: api.Widgets.availableWidgets
+        });
 
         // Highlight widget control
@@ -1541 +1814 @@
      * @return {object|null}
      */
-    api.Widgets.getSidebarWidgetControlContainingWidget = function ( widget_id ) {
+    api.Widgets.getSidebarWidgetControlContainingWidget = function( widget_id ) {
         var found_control = null;
         // @todo this can use widget_id_to_setting_id(), then pass into wp.customize.control( x ).getSidebarWidgetsControl()
-        api.control.each( function ( control ) {
+        api.control.each( function( control ) {
             if ( control.params.type === 'sidebar_widgets' && -1 !== _.indexOf( control.setting(), widget_id ) ) {
                 found_control = control;
@@ -1558 +1831 @@
      * @return {object|null}
      */
-    api.Widgets.getWidgetFormControlForWidget = function ( widget_id ) {
+    api.Widgets.getWidgetFormControlForWidget = function( widget_id ) {
         var found_control = null;
         // @todo We can just use widget_id_to_setting_id() here
-        api.control.each( function ( control ) {
+        api.control.each( function( control ) {
             if ( control.params.type === 'widget_form' && control.params.widget_id === widget_id ) {
                 found_control = control;
@@ -1568 +1841 @@
 
         return found_control;
-    };
-
-    /**
-     * Available Widgets Panel
-     */
-    api.Widgets.availableWidgetsPanel = {
-        active_sidebar_widgets_control: null,
-        selected_widget_tpl: null,
-        container: null,
-        filter_input: null,
-
-        /**
-         * Set up event listeners
-         */
-        setup: function() {
-            var panel = this;
-
-            panel.container = $( '#available-widgets' );
-            panel.filter_input = $( '#available-widgets-filter' ).find( 'input' );
-
-            api.Widgets.availableWidgets.on( 'change update', panel.update_available_widgets_list );
-            panel.update_available_widgets_list();
-
-            // If the available widgets panel is open and the customize controls are
-            // interacted with (i.e. available widgets panel is blurred) then close the
-            // available widgets panel.
-            $( '#customize-controls' ).on( 'click keydown', function ( e ) {
-                var is_add_new_widget_btn = $( e.target ).is( '.add-new-widget, .add-new-widget *' );
-                if ( $( 'body' ).hasClass( 'adding-widget' ) && ! is_add_new_widget_btn ) {
-                    panel.close();
-                }
-            } );
-
-            // Close the panel if the URL in the preview changes
-            api.Widgets.Previewer.bind( 'url', function() {
-                panel.close();
-            } );
-
-            // Submit a selection when clicked or keypressed
-            panel.container.find( '.widget-tpl' ).on( 'click keypress', function( event ) {
-
-                // Only proceed with keypress if it is Enter or Spacebar
-                if ( event.type === 'keypress' && ( event.which !== 13 && event.which !== 32 ) ) {
-                    return;
-                }
-
-                panel.submit( this );
-            } );
-
-            panel.filter_input.on( 'input keyup change', function( event ) {
-                var first_visible_widget;
-
-                api.Widgets.availableWidgets.doSearch( event.target.value );
-
-                // Remove a widget from being selected if it is no longer visible
-                if ( panel.selected_widget_tpl && ! panel.selected_widget_tpl.is( ':visible' ) ) {
-                    panel.selected_widget_tpl.removeClass( 'selected' );
-                    panel.selected_widget_tpl = null;
-                }
-
-                // If a widget was selected but the filter value has been cleared out, clear selection
-                if ( panel.selected_widget_tpl && ! event.target.value ) {
-                    panel.selected_widget_tpl.removeClass( 'selected' );
-                    panel.selected_widget_tpl = null;
-                }
-
-                // If a filter has been entered and a widget hasn't been selected, select the first one shown
-                if ( ! panel.selected_widget_tpl &&  event.target.value ) {
-                    first_visible_widget = panel.container.find( '> .widget-tpl:visible:first' );
-                    if ( first_visible_widget.length ) {
-                        panel.select( first_visible_widget );
-                    }
-                }
-            } );
-
-            // Select a widget when it is focused on
-            panel.container.find( ' > .widget-tpl' ).on( 'focus', function() {
-                panel.select( this );
-            } );
-
-            panel.container.on( 'keydown', function ( event ) {
-                var is_enter = ( event.which === 13 ),
-                    is_esc = ( event.which === 27 ),
-                    is_down = ( event.which === 40 ),
-                    is_up = ( event.which === 38 ),
-                    selected_widget_tpl = null,
-                    first_visible_widget = panel.container.find( '> .widget-tpl:visible:first' ),
-                    last_visible_widget = panel.container.find( '> .widget-tpl:visible:last' ),
-                    is_input_focused = $( event.target ).is( panel.filter_input );
-
-                if ( is_down || is_up ) {
-                    if ( is_down ) {
-                        if ( is_input_focused ) {
-                            selected_widget_tpl = first_visible_widget;
-                        } else if ( panel.selected_widget_tpl && panel.selected_widget_tpl.nextAll( '.widget-tpl:visible' ).length !== 0 ) {
-                            selected_widget_tpl = panel.selected_widget_tpl.nextAll( '.widget-tpl:visible:first' );
-                        }
-                    } else if ( is_up ) {
-                        if ( is_input_focused ) {
-                            selected_widget_tpl = last_visible_widget;
-                        } else if ( panel.selected_widget_tpl && panel.selected_widget_tpl.prevAll( '.widget-tpl:visible' ).length !== 0 ) {
-                            selected_widget_tpl = panel.selected_widget_tpl.prevAll( '.widget-tpl:visible:first' );
-                        }
-                    }
-                    panel.select( selected_widget_tpl );
-                    if ( selected_widget_tpl ) {
-                        selected_widget_tpl.focus();
-                    } else {
-                        panel.filter_input.focus();
-                    }
-                    return;
-                }
-
-                // If enter pressed but nothing entered, don't do anything
-                if ( is_enter && ! panel.filter_input.val() ) {
-                    return;
-                }
-
-                if ( is_enter ) {
-                    panel.submit();
-                } else if ( is_esc ) {
-                    panel.close( { return_focus: true } );
-                }
-            } );
-        },
-
-        /**
-         * Updates widgets list.
-         */
-        update_available_widgets_list: function() {
-            var panel = api.Widgets.availableWidgetsPanel;
-
-            // First hide all widgets...
-            panel.container.find( '.widget-tpl' ).hide();
-
-            // ..and then show only available widgets which could be filtered
-            api.Widgets.availableWidgets.each( function ( widget ) {
-                var widget_tpl = $( '#widget-tpl-' + widget.id );
-                widget_tpl.toggle( ! widget.get( 'is_disabled' ) );
-                if ( widget.get( 'is_disabled' ) && widget_tpl.is( panel.selected_widget_tpl ) ) {
-                    panel.selected_widget_tpl = null;
-                }
-            } );
-        },
-
-        /**
-         * @param widget_tpl
-         */
-        select: function ( widget_tpl ) {
-            var panel = this;
-            panel.selected_widget_tpl = $( widget_tpl );
-            panel.selected_widget_tpl.siblings( '.widget-tpl' ).removeClass( 'selected' );
-            panel.selected_widget_tpl.addClass( 'selected' );
-        },
-
-        submit: function ( widget_tpl ) {
-            var panel = this, widget_id, widget;
-            if ( ! widget_tpl ) {
-                widget_tpl = panel.selected_widget_tpl;
-            }
-            if ( ! widget_tpl || ! panel.active_sidebar_widgets_control ) {
-                return;
-            }
-            panel.select( widget_tpl );
-
-            widget_id = $( panel.selected_widget_tpl ).data( 'widget-id' );
-            widget = api.Widgets.availableWidgets.findWhere( {id: widget_id} );
-            if ( ! widget ) {
-                throw new Error( 'Widget unexpectedly not found.' );
-            }
-            panel.active_sidebar_widgets_control.addWidget( widget.get( 'id_base' ) );
-            panel.close();
-        },
-
-        /**
-         * @param sidebars_widgets_control
-         */
-        open: function ( sidebars_widgets_control ) {
-            var panel = this;
-            panel.active_sidebar_widgets_control = sidebars_widgets_control;
-
-            // Wide widget controls appear over the preview, and so they need to be collapsed when the panel opens
-            _( sidebars_widgets_control.getWidgetFormControls() ).each( function ( control ) {
-                if ( control.params.is_wide ) {
-                    control.collapseForm();
-                }
-            } );
-
-            $( 'body' ).addClass( 'adding-widget' );
-            panel.container.find( '.widget-tpl' ).removeClass( 'selected' );
-            api.Widgets.availableWidgets.doSearch( '' );
-            panel.filter_input.focus();
-        },
-
-        /**
-         * Hide the panel
-         */
-        close: function ( options ) {
-            var panel = this;
-            options = options || {};
-            if ( options.return_focus && panel.active_sidebar_widgets_control ) {
-                panel.active_sidebar_widgets_control.container.find( '.add-new-widget' ).focus();
-            }
-            panel.active_sidebar_widgets_control = null;
-            panel.selected_widget_tpl = null;
-            $( 'body' ).removeClass( 'adding-widget' );
-            panel.filter_input.val( '' );
-        }
     };