WordPress.org
Get WordPress

Make WordPress Core

Changeset 27985


Ignore:
Timestamp:
04/07/2014 09:03:18 AM (12 years ago)
Author:
ocean90
Message:

Widget Customizer: Move WidgetCustomizer to wp.customize.Widgets. First pass.

see #27690.

Location:
trunk/src
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/customize-controls.css

    r27970 r27985  
    491491        -webkit-border-radius: 2px;
    492492        border: 1px solid #eee;
     493        -webkit-border-radius: 2px;
    493494        border-radius: 2px;
    494495}

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

    r27912 r27985  
    108108        display: none;
    109109}
    110 
    111 
    112 /* MP6-compat */
    113 #customize-theme-controls .accordion-section-content .widget {
    114         color: black;
    115 }
    116 
    117110
    118111/**
    … …  
    327320body.adding-widget .add-new-widget,
    328321body.adding-widget .add-new-widget:hover {
    329         background: #EEE;
     322        background: #eee;
    330323        border-color: #999;
    331324        color: #333;

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

    r27913 r27985  
    1 /*global wp, Backbone, _, jQuery, WidgetCustomizer_exports */
    2 /*exported WidgetCustomizer */
    3 var WidgetCustomizer = ( function ($) {
    4         'use strict';
    5 
    6         var Widget,
    7                 WidgetCollection,
    8                 Sidebar,
    9                 SidebarCollection,
    10                 OldPreviewer,
    11                 builtin_form_sync_handlers,
    12                 customize = wp.customize, self = {
    13                 nonce: null,
    14                 i18n: {
    15                         save_btn_label: '',
    16                         save_btn_tooltip: '',
    17                         remove_btn_label: '',
    18                         remove_btn_tooltip: '',
    19                         error: ''
    20                 },
    21                 available_widgets: [], // available widgets for instantiating
    22                 registered_widgets: [], // all widgets registered
    23                 active_sidebar_control: null,
    24                 previewer: null,
    25                 saved_widget_ids: {},
    26                 registered_sidebars: [],
    27                 tpl: {
    28                         move_widget_area: '',
    29                         widget_reorder_nav: ''
    30                 }
    31         };
    32         $.extend( self, WidgetCustomizer_exports );
    33 
    34         // Lots of widgets expect this old ajaxurl global to be available
    35         if ( typeof window.ajaxurl === 'undefined' ) {
    36                 window.ajaxurl = wp.ajax.settings.url;
    37         }
     1/* global _wpCustomizeWidgetsSettings */
     2(function( wp, $ ){
     3
     4        if ( ! wp || ! wp.customize ) { return; }
     5
     6        // Set up our namespace...
     7        var api = wp.customize,
     8                l10n, OldPreviewer;
     9
     10        api.Widgets = api.Widgets || {};
     11
     12        // Link settings
     13        api.Widgets.data = _wpCustomizeWidgetsSettings || {};
     14        l10n = api.Widgets.data.l10n;
     15        delete api.Widgets.data.l10n;
    3816
    3917        /**
    4018         * Set up model
    4119         */
    42         Widget = self.Widget = Backbone.Model.extend( {
     20        api.Widgets.WidgetModel = Backbone.Model.extend({
    4321                id: null,
    4422                temp_id: null,
    … …  
    5533                width: null,
    5634                height: null
    57         } );
    58 
    59         WidgetCollection = self.WidgetCollection = Backbone.Collection.extend( {
    60                 model: Widget,
     35        });
     36
     37        api.Widgets.WidgetCollection = Backbone.Collection.extend({
     38                model: api.Widgets.WidgetModel,
    6139
    6240                // Controls searching on the current widget collection
    … …  
    8159                        // Useful for resetting the views when you clean the input
    8260                        if ( this.terms === '' ) {
    83                                 this.reset( WidgetCustomizer_exports.available_widgets );
     61                                this.reset( api.Widgets.data.availableWidgets );
    8462                        }
    8563
    … …  
    9472
    9573                        // Start with a full collection
    96                         this.reset( WidgetCustomizer_exports.available_widgets, { silent: true } );
     74                        this.reset( api.Widgets.data.availableWidgets, { silent: true } );
    9775
    9876                        // Escape the term string for RegExp meta characters
    … …  
    11290                        this.reset( results );
    11391                }
    114         } );
    115         self.available_widgets = new WidgetCollection( self.available_widgets );
    116 
    117         Sidebar = self.Sidebar = Backbone.Model.extend( {
     92        });
     93        api.Widgets.availableWidgets = new api.Widgets.WidgetCollection( api.Widgets.data.availableWidgets );
     94
     95        api.Widgets.SidebarModel = Backbone.Model.extend({
    11896                after_title: null,
    11997                after_widget: null,
    … …  
    125103                name: null,
    126104                is_rendered: false
    127         } );
    128 
    129         SidebarCollection = self.SidebarCollection = Backbone.Collection.extend( {
    130                 model: Sidebar
    131         } );
    132         self.registered_sidebars = new SidebarCollection( self.registered_sidebars );
     105        });
     106
     107        api.Widgets.SidebarCollection = Backbone.Collection.extend({
     108                model: api.Widgets.SidebarModel
     109        });
     110        api.Widgets.registeredSidebars = new api.Widgets.SidebarCollection( api.Widgets.data.registeredSidebars );
    133111
    134112        /**
    … …  
    137115         * listeners for the widget-synced event.
    138116         */
    139         builtin_form_sync_handlers = {
     117        api.Widgets.formSyncHandlers = {
    140118
    141119                /**
    142120                 * @param {jQuery.Event} e
    143                  * @param {jQuery} widget_el
    144                  * @param {String} new_form
    145                  */
    146                 rss: function ( e, widget_el, new_form ) {
    147                         var old_widget_error = widget_el.find( '.widget-error:first' ),
    148                                 new_widget_error = $( '<div>' + new_form + '</div>' ).find( '.widget-error:first' );
    149 
    150                         if ( old_widget_error.length && new_widget_error.length ) {
    151                                 old_widget_error.replaceWith( new_widget_error );
    152                         } else if ( old_widget_error.length ) {
    153                                 old_widget_error.remove();
    154                         } else if ( new_widget_error.length ) {
    155                                 widget_el.find( '.widget-content:first' ).prepend( new_widget_error );
     121                 * @param {jQuery} widget
     122                 * @param {String} newForm
     123                 */
     124                rss: function ( e, widget, newForm ) {
     125                        var oldWidgetError = widget.find( '.widget-error:first' ),
     126                                newWidgetError = $( '<div>' + newForm + '</div>' ).find( '.widget-error:first' );
     127
     128                        if ( oldWidgetError.length && newWidgetError.length ) {
     129                                oldWidgetError.replaceWith( newWidgetError );
     130                        } else if ( oldWidgetError.length ) {
     131                                oldWidgetError.remove();
     132                        } else if ( newWidgetError.length ) {
     133                                widget.find( '.widget-content:first' ).prepend( newWidgetError );
    156134                        }
    157135                }
    … …  
    159137
    160138        /**
    161          * On DOM ready, initialize some meta functionality independent of specific
    162          * customizer controls.
     139         * Widget Form control
     140         * Note that 'widget_form' must match the WP_Widget_Form_Customize_Control::$type
    163141         */
    164         self.init = function () {
    165                 this.availableWidgetsPanel.setup();
    166 
    167                 // Highlight widget control
    168                 this.previewer.bind( 'highlight-widget-control', self.highlightWidgetFormControl );
    169 
    170                 // Open and focus widget control
    171                 this.previewer.bind( 'focus-widget-control', self.focusWidgetFormControl );
    172         };
    173         wp.customize.bind( 'ready', function () {
    174                 self.init();
     142        api.Widgets.WidgetControl = api.Control.extend({
     143                /**
     144                 * Set up the control
     145                 */
     146                ready: function() {
     147                        var control = this;
     148                        control._setupModel();
     149                        control._setupWideWidget();
     150                        control._setupControlToggle();
     151                        control._setupWidgetTitle();
     152                        control._setupReorderUI();
     153                        control._setupHighlightEffects();
     154                        control._setupUpdateUI();
     155                        control._setupRemoveUI();
     156                },
     157
     158                /**
     159                 * Handle changes to the setting
     160                 */
     161                _setupModel: function() {
     162                        var control = this, remember_saved_widget_id;
     163
     164                        api.Widgets.savedWidgetIds = api.Widgets.savedWidgetIds || [];
     165
     166                        // Remember saved widgets so we know which to trash (move to inactive widgets sidebar)
     167                        remember_saved_widget_id = function() {
     168                                api.Widgets.savedWidgetIds[control.params.widget_id] = true;
     169                        };
     170                        api.bind( 'ready', remember_saved_widget_id );
     171                        api.bind( 'saved', remember_saved_widget_id );
     172
     173                        control._update_count = 0;
     174                        control.is_widget_updating = false;
     175                        control.live_update_mode = true;
     176
     177                        // Update widget whenever model changes
     178                        control.setting.bind( function( to, from ) {
     179                                if ( ! _( from ).isEqual( to ) && ! control.is_widget_updating ) {
     180                                        control.updateWidget( { instance: to } );
     181                                }
     182                        } );
     183                },
     184
     185                /**
     186                 * Add special behaviors for wide widget controls
     187                 */
     188                _setupWideWidget: function() {
     189                        var control = this,
     190                                widget_inside,
     191                                widget_form,
     192                                customize_sidebar,
     193                                position_widget,
     194                                theme_controls_container;
     195
     196                        if ( ! control.params.is_wide ) {
     197                                return;
     198                        }
     199
     200                        widget_inside = control.container.find( '.widget-inside' );
     201                        widget_form = widget_inside.find( '> .form' );
     202                        customize_sidebar = $( '.wp-full-overlay-sidebar-content:first' );
     203                        control.container.addClass( 'wide-widget-control' );
     204
     205                        control.container.find( '.widget-content:first' ).css( {
     206                                'max-width': control.params.width,
     207                                'min-height': control.params.height
     208                        } );
     209
     210                        /**
     211                         * Keep the widget-inside positioned so the top of fixed-positioned
     212                         * element is at the same top position as the widget-top. When the
     213                         * widget-top is scrolled out of view, keep the widget-top in view;
     214                         * likewise, don't allow the widget to drop off the bottom of the window.
     215                         * If a widget is too tall to fit in the window, don't let the height
     216                         * exceed the window height so that the contents of the widget control
     217                         * will become scrollable (overflow:auto).
     218                         */
     219                        position_widget = function() {
     220                                var offset_top = control.container.offset().top,
     221                                        window_height = $( window ).height(),
     222                                        form_height = widget_form.outerHeight(),
     223                                        top;
     224                                widget_inside.css( 'max-height', window_height );
     225                                top = Math.max(
     226                                        0, // prevent top from going off screen
     227                                        Math.min(
     228                                                Math.max( offset_top, 0 ), // distance widget in panel is from top of screen
     229                                                window_height - form_height // flush up against bottom of screen
     230                                        )
     231                                );
     232                                widget_inside.css( 'top', top );
     233                        };
     234
     235                        theme_controls_container = $( '#customize-theme-controls' );
     236                        control.container.on( 'expand', function() {
     237                                position_widget();
     238                                customize_sidebar.on( 'scroll', position_widget );
     239                                $( window ).on( 'resize', position_widget );
     240                                theme_controls_container.on( 'expanded collapsed', position_widget );
     241                        } );
     242                        control.container.on( 'collapsed', function() {
     243                                customize_sidebar.off( 'scroll', position_widget );
     244                                $( window ).off( 'resize', position_widget );
     245                                theme_controls_container.off( 'expanded collapsed', position_widget );
     246                        } );
     247
     248                        // Reposition whenever a sidebar's widgets are changed
     249                        api.each( function ( setting ) {
     250                                if ( 0 === setting.id.indexOf( 'sidebars_widgets[' ) ) {
     251                                        setting.bind( function() {
     252                                                if ( control.container.hasClass( 'expanded' ) ) {
     253                                                        position_widget();
     254                                                }
     255                                        } );
     256                                }
     257                        } );
     258                },
     259
     260                /**
     261                 * Show/hide the control when clicking on the form title, when clicking
     262                 * the close button
     263                 */
     264                _setupControlToggle: function() {
     265                        var control = this, close_btn;
     266
     267                        control.container.find( '.widget-top' ).on( 'click', function ( e ) {
     268                                e.preventDefault();
     269                                var sidebar_widgets_control = control.getSidebarWidgetsControl();
     270                                if ( sidebar_widgets_control.is_reordering ) {
     271                                        return;
     272                                }
     273                                control.toggleForm();
     274                        } );
     275
     276                        close_btn = control.container.find( '.widget-control-close' );
     277                        // @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 ) {
     279                                e.preventDefault();
     280                                control.collapseForm();
     281                                control.container.find( '.widget-top .widget-action:first' ).focus(); // keyboard accessibility
     282                        } );
     283                },
     284
     285                /**
     286                 * Update the title of the form if a title field is entered
     287                 */
     288                _setupWidgetTitle: function() {
     289                        var control = this, update_title;
     290
     291                        update_title = function() {
     292                                var title = control.setting().title,
     293                                        in_widget_title = control.container.find( '.in-widget-title' );
     294
     295                                if ( title ) {
     296                                        in_widget_title.text( ': ' + title );
     297                                } else {
     298                                        in_widget_title.text( '' );
     299                                }
     300                        };
     301                        control.setting.bind( update_title );
     302                        update_title();
     303                },
     304
     305                /**
     306                 * Set up the widget-reorder-nav
     307                 */
     308                _setupReorderUI: function() {
     309                        var control = this,
     310                                select_sidebar_item,
     311                                move_widget_area,
     312                                reorder_nav,
     313                                update_available_sidebars;
     314
     315                        /**
     316                         * select the provided sidebar list item in the move widget area
     317                         *
     318                         * @param {jQuery} li
     319                         */
     320                        select_sidebar_item = function ( li ) {
     321                                li.siblings( '.selected' ).removeClass( 'selected' );
     322                                li.addClass( 'selected' );
     323                                var is_self_sidebar = ( li.data( 'id' ) === control.params.sidebar_id );
     324                                control.container.find( '.move-widget-btn' ).prop( 'disabled', is_self_sidebar );
     325                        };
     326
     327                        /**
     328                         * Add the widget reordering elements to the widget control
     329                         */
     330                        control.container.find( '.widget-title-action' ).after( $( api.Widgets.data.tpl.widgetReorderNav ) );
     331                        move_widget_area = $(
     332                                _.template( api.Widgets.data.tpl.moveWidgetArea, {
     333                                        sidebars: _( api.Widgets.registeredSidebars.toArray() ).pluck( 'attributes' )
     334                                } )
     335                        );
     336                        control.container.find( '.widget-top' ).after( move_widget_area );
     337
     338                        /**
     339                         * Update available sidebars when their rendered state changes
     340                         */
     341                        update_available_sidebars = function() {
     342                                var sidebar_items = move_widget_area.find( 'li' ), self_sidebar_item;
     343                                self_sidebar_item = sidebar_items.filter( function(){
     344                                        return $( this ).data( 'id' ) === control.params.sidebar_id;
     345                                } );
     346                                sidebar_items.each( function() {
     347                                        var li = $( this ),
     348                                                sidebar_id,
     349                                                sidebar_model;
     350
     351                                        sidebar_id = li.data( 'id' );
     352                                        sidebar_model = api.Widgets.registeredSidebars.get( sidebar_id );
     353                                        li.toggle( sidebar_model.get( 'is_rendered' ) );
     354                                        if ( li.hasClass( 'selected' ) && ! sidebar_model.get( 'is_rendered' ) ) {
     355                                                select_sidebar_item( self_sidebar_item );
     356                                        }
     357                                } );
     358                        };
     359                        update_available_sidebars();
     360                        api.Widgets.registeredSidebars.on( 'change:is_rendered', update_available_sidebars );
     361
     362                        /**
     363                         * Handle clicks for up/down/move on the reorder nav
     364                         */
     365                        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 ) {
     367                                if ( event.type === 'keypress' && ( event.which !== 13 && event.which !== 32 ) ) {
     368                                        return;
     369                                }
     370                                $( this ).focus();
     371
     372                                if ( $( this ).is( '.move-widget' ) ) {
     373                                        control.toggleWidgetMoveArea();
     374                                } else {
     375                                        var is_move_down = $( this ).is( '.move-widget-down' ),
     376                                                is_move_up = $( this ).is( '.move-widget-up' ),
     377                                                i = control.getWidgetSidebarPosition();
     378
     379                                        if ( ( is_move_up && i === 0 ) || ( is_move_down && i === control.getSidebarWidgetsControl().setting().length - 1 ) ) {
     380                                                return;
     381                                        }
     382
     383                                        if ( is_move_up ) {
     384                                                control.moveUp();
     385                                        } else {
     386                                                control.moveDown();
     387                                        }
     388
     389                                        $( this ).focus(); // re-focus after the container was moved
     390                                }
     391                        } );
     392
     393                        /**
     394                         * Handle selecting a sidebar to move to
     395                         */
     396                        control.container.find( '.widget-area-select' ).on( 'click keypress', 'li', function ( e ) {
     397                                if ( event.type === 'keypress' && ( event.which !== 13 && event.which !== 32 ) ) {
     398                                        return;
     399                                }
     400                                e.preventDefault();
     401                                select_sidebar_item( $( this ) );
     402                        } );
     403
     404                        /**
     405                         * Move widget to another sidebar
     406                         */
     407                        control.container.find( '.move-widget-btn' ).click( function() {
     408                                control.getSidebarWidgetsControl().toggleReordering( false );
     409
     410                                var old_sidebar_id = control.params.sidebar_id,
     411                                        new_sidebar_id = control.container.find( '.widget-area-select li.selected' ).data( 'id' ),
     412                                        old_sidebar_widgets_setting,
     413                                        new_sidebar_widgets_setting,
     414                                        old_sidebar_widget_ids,
     415                                        new_sidebar_widget_ids,
     416                                        i;
     417
     418                                old_sidebar_widgets_setting = api( 'sidebars_widgets[' + old_sidebar_id + ']' );
     419                                new_sidebar_widgets_setting = api( 'sidebars_widgets[' + new_sidebar_id + ']' );
     420                                old_sidebar_widget_ids = Array.prototype.slice.call( old_sidebar_widgets_setting() );
     421                                new_sidebar_widget_ids = Array.prototype.slice.call( new_sidebar_widgets_setting() );
     422
     423                                i = control.getWidgetSidebarPosition();
     424                                old_sidebar_widget_ids.splice( i, 1 );
     425                                new_sidebar_widget_ids.push( control.params.widget_id );
     426
     427                                old_sidebar_widgets_setting( old_sidebar_widget_ids );
     428                                new_sidebar_widgets_setting( new_sidebar_widget_ids );
     429
     430                                control.focus();
     431                        } );
     432                },
     433
     434                /**
     435                 * Highlight widgets in preview when interacted with in the customizer
     436                 */
     437                _setupHighlightEffects: function() {
     438                        var control = this;
     439
     440                        // Highlight whenever hovering or clicking over the form
     441                        control.container.on( 'mouseenter click', function() {
     442                                control.setting.previewer.send( 'highlight-widget', control.params.widget_id );
     443                        } );
     444
     445                        // Highlight when the setting is updated
     446                        control.setting.bind( function() {
     447                                control.setting.previewer.send( 'highlight-widget', control.params.widget_id );
     448                        } );
     449
     450                        // Highlight when the widget form is expanded
     451                        control.container.on( 'expand', function() {
     452                                control.scrollPreviewWidgetIntoView();
     453                        } );
     454                },
     455
     456                /**
     457                 * Set up event handlers for widget updating
     458                 */
     459                _setupUpdateUI: function() {
     460                        var control = this,
     461                                widget_root,
     462                                widget_content,
     463                                save_btn,
     464                                update_widget_debounced,
     465                                form_update_event_handler;
     466
     467                        widget_root = control.container.find( '.widget:first' );
     468                        widget_content = widget_root.find( '.widget-content:first' );
     469
     470                        // Configure update button
     471                        save_btn = control.container.find( '.widget-control-save' );
     472                        save_btn.val( l10n.saveBtnLabel );
     473                        save_btn.attr( 'title', l10n.saveBtnTooltip );
     474                        save_btn.removeClass( 'button-primary' ).addClass( 'button-secondary' );
     475                        save_btn.on( 'click', function ( e ) {
     476                                e.preventDefault();
     477                                control.updateWidget( { disable_form: true } );
     478                        } );
     479
     480                        update_widget_debounced = _.debounce( function() {
     481                                // @todo For compatibility with other plugins, should we trigger a click event? What about form submit event?
     482                                control.updateWidget();
     483                        }, 250 );
     484
     485                        // Trigger widget form update when hitting Enter within an input
     486                        control.container.find( '.widget-content' ).on( 'keydown', 'input', function( e ) {
     487                                if ( 13 === e.which ) { // Enter
     488                                        e.preventDefault();
     489                                        control.updateWidget( { ignore_active_element: true } );
     490                                }
     491                        } );
     492
     493                        // Handle widgets that support live previews
     494                        widget_content.on( 'change input propertychange', ':input', function ( e ) {
     495                                if ( control.live_update_mode ) {
     496                                        if ( e.type === 'change' ) {
     497                                                control.updateWidget();
     498                                        } else if ( this.checkValidity && this.checkValidity() ) {
     499                                                update_widget_debounced();
     500                                        }
     501                                }
     502                        } );
     503
     504                        // Remove loading indicators when the setting is saved and the preview updates
     505                        control.setting.previewer.channel.bind( 'synced', function() {
     506                                control.container.removeClass( 'previewer-loading' );
     507                        } );
     508                        api.Widgets.Previewer.bind( 'widget-updated', function ( updated_widget_id ) {
     509                                if ( updated_widget_id === control.params.widget_id ) {
     510                                        control.container.removeClass( 'previewer-loading' );
     511                                }
     512                        } );
     513
     514                        // Update widget control to indicate whether it is currently rendered (cf. Widget Visibility)
     515                        api.Widgets.Previewer.bind( 'rendered-widgets', function ( rendered_widgets ) {
     516                                var is_rendered = !! rendered_widgets[control.params.widget_id];
     517                                control.container.toggleClass( 'widget-rendered', is_rendered );
     518                        } );
     519
     520                        form_update_event_handler = api.Widgets.formSyncHandlers[ control.params.widget_id_base ];
     521                        if ( form_update_event_handler ) {
     522                                $( document ).on( 'widget-synced', function ( e, widget_el ) {
     523                                        if ( widget_root.is( widget_el ) ) {
     524                                                form_update_event_handler.apply( document, arguments );
     525                                        }
     526                                } );
     527                        }
     528                },
     529
     530                /**
     531                 * Set up event handlers for widget removal
     532                 */
     533                _setupRemoveUI: function() {
     534                        var control = this,
     535                                remove_btn,
     536                                replace_delete_with_remove;
     537
     538                        // Configure remove button
     539                        remove_btn = control.container.find( 'a.widget-control-remove' );
     540                        // @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 ) {
     542                                e.preventDefault();
     543
     544                                // Find an adjacent element to add focus to when this widget goes away
     545                                var adjacent_focus_target;
     546                                if ( control.container.next().is( '.customize-control-widget_form' ) ) {
     547                                        adjacent_focus_target = control.container.next().find( '.widget-action:first' );
     548                                } else if ( control.container.prev().is( '.customize-control-widget_form' ) ) {
     549                                        adjacent_focus_target = control.container.prev().find( '.widget-action:first' );
     550                                } else {
     551                                        adjacent_focus_target = control.container.next( '.customize-control-sidebar_widgets' ).find( '.add-new-widget:first' );
     552                                }
     553
     554                                control.container.slideUp( function() {
     555                                        var sidebars_widgets_control = api.Widgets.getSidebarWidgetControlContainingWidget( control.params.widget_id ),
     556                                                sidebar_widget_ids,
     557                                                i;
     558
     559                                        if ( ! sidebars_widgets_control ) {
     560                                                throw new Error( 'Unable to find sidebars_widgets_control' );
     561                                        }
     562                                        sidebar_widget_ids = sidebars_widgets_control.setting().slice();
     563                                        i = _.indexOf( sidebar_widget_ids, control.params.widget_id );
     564                                        if ( -1 === i ) {
     565                                                throw new Error( 'Widget is not in sidebar' );
     566                                        }
     567                                        sidebar_widget_ids.splice( i, 1 );
     568                                        sidebars_widgets_control.setting( sidebar_widget_ids );
     569                                        adjacent_focus_target.focus(); // keyboard accessibility
     570                                } );
     571                        } );
     572
     573                        replace_delete_with_remove = function() {
     574                                remove_btn.text( l10n.removeBtnLabel ); // wp_widget_control() outputs the link as "Delete"
     575                                remove_btn.attr( 'title', l10n.removeBtnTooltip );
     576                        };
     577                        if ( control.params.is_new ) {
     578                                api.bind( 'saved', replace_delete_with_remove );
     579                        } else {
     580                                replace_delete_with_remove();
     581                        }
     582                },
     583
     584                /**
     585                 * Find all inputs in a widget container that should be considered when
     586                 * comparing the loaded form with the sanitized form, whose fields will
     587                 * be aligned to copy the sanitized over. The elements returned by this
     588                 * are passed into this._getInputsSignature(), and they are iterated
     589                 * over when copying sanitized values over to the the form loaded.
     590                 *
     591                 * @param {jQuery} container element in which to look for inputs
     592                 * @returns {jQuery} inputs
     593                 * @private
     594                 */
     595                _getInputs: function ( container ) {
     596                        return $( container ).find( ':input[name]' );
     597                },
     598
     599                /**
     600                 * Iterate over supplied inputs and create a signature string for all of them together.
     601                 * This string can be used to compare whether or not the form has all of the same fields.
     602                 *
     603                 * @param {jQuery} inputs
     604                 * @returns {string}
     605                 * @private
     606                 */
     607                _getInputsSignature: function ( inputs ) {
     608                        var inputs_signatures = _( inputs ).map( function ( input ) {
     609                                input = $( input );
     610                                var signature_parts;
     611                                if ( input.is( ':checkbox, :radio' ) ) {
     612                                        signature_parts = [ input.attr( 'id' ), input.attr( 'name' ), input.prop( 'value' ) ];
     613                                } else {
     614                                        signature_parts = [ input.attr( 'id' ), input.attr( 'name' ) ];
     615                                }
     616                                return signature_parts.join( ',' );
     617                        } );
     618                        return inputs_signatures.join( ';' );
     619                },
     620
     621                /**
     622                 * Get the property that represents the state of an input.
     623                 *
     624                 * @param {jQuery|DOMElement} input
     625                 * @returns {string}
     626                 * @private
     627                 */
     628                _getInputStatePropertyName: function ( input ) {
     629                        input = $( input );
     630                        if ( input.is( ':radio, :checkbox' ) ) {
     631                                return 'checked';
     632                        } else {
     633                                return 'value';
     634                        }
     635                },
     636
     637                /***********************************************************************
     638                 * Begin public API methods
     639                 **********************************************************************/
     640
     641                /**
     642                 * @return {wp.customize.controlConstructor.sidebar_widgets[]}
     643                 */
     644                getSidebarWidgetsControl: function() {
     645                        var control = this, setting_id, sidebar_widgets_control;
     646
     647                        setting_id = 'sidebars_widgets[' + control.params.sidebar_id + ']';
     648                        sidebar_widgets_control = api.control( setting_id );
     649                        if ( ! sidebar_widgets_control ) {
     650                                throw new Error( 'Unable to locate sidebar_widgets control for ' + control.params.sidebar_id );
     651                        }
     652                        return sidebar_widgets_control;
     653                },
     654
     655                /**
     656                 * Submit the widget form via Ajax and get back the updated instance,
     657                 * along with the new widget control form to render.
     658                 *
     659                 * @param {object} [args]
     660                 * @param {Object|null} [args.instance=null]  When the model changes, the instance is sent here; otherwise, the inputs from the form are used
     661                 * @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.
     662                 * @param {Boolean} [args.ignore_active_element=false] Whether or not updating a field will be deferred if focus is still on the element.
     663                 */
     664                updateWidget: function ( args ) {
     665                        var control = this,
     666                                instance_override,
     667                                complete_callback,
     668                                widget_root,
     669                                update_number,
     670                                widget_content,
     671                                params,
     672                                data,
     673                                inputs,
     674                                processing,
     675                                jqxhr,
     676                                is_changed;
     677
     678                        args = $.extend( {
     679                                instance: null,
     680                                complete: null,
     681                                ignore_active_element: false
     682                        }, args );
     683
     684                        instance_override = args.instance;
     685                        complete_callback = args.complete;
     686
     687                        control._update_count += 1;
     688                        update_number = control._update_count;
     689
     690                        widget_root = control.container.find( '.widget:first' );
     691                        widget_content = widget_root.find( '.widget-content:first' );
     692
     693                        // Remove a previous error message
     694                        widget_content.find( '.widget-error' ).remove();
     695
     696                        control.container.addClass( 'widget-form-loading' );
     697                        control.container.addClass( 'previewer-loading' );
     698                        processing = api.state( 'processing' );
     699                        processing( processing() + 1 );
     700
     701                        if ( ! control.live_update_mode ) {
     702                                control.container.addClass( 'widget-form-disabled' );
     703                        }
     704
     705                        params = {};
     706                        params.action = 'update-widget';
     707                        params.wp_customize = 'on';
     708                        params.nonce = api.Widgets.data.nonce;
     709
     710                        data = $.param( params );
     711                        inputs = control._getInputs( widget_content );
     712
     713                        // Store the value we're submitting in data so that when the response comes back,
     714                        // we know if it got sanitized; if there is no difference in the sanitized value,
     715                        // then we do not need to touch the UI and mess up the user's ongoing editing.
     716                        inputs.each( function() {
     717                                var input = $( this ),
     718                                        property = control._getInputStatePropertyName( this );
     719                                input.data( 'state' + update_number, input.prop( property ) );
     720                        } );
     721
     722                        if ( instance_override ) {
     723                                data += '&' + $.param( { 'sanitized_widget_setting': JSON.stringify( instance_override ) } );
     724                        } else {
     725                                data += '&' + inputs.serialize();
     726                        }
     727                        data += '&' + widget_content.find( '~ :input' ).serialize();
     728
     729                        jqxhr = $.post( wp.ajax.settings.url, data, function ( r ) {
     730                                var message,
     731                                        sanitized_form,
     732                                        sanitized_inputs,
     733                                        has_same_inputs_in_response,
     734                                        is_live_update_aborted = false;
     735
     736                                // Check if the user is logged out.
     737                                if ( '0' === r ) {
     738                                        api.Widgets.Previewer.preview.iframe.hide();
     739                                        api.Widgets.Previewer.login().done( function() {
     740                                                control.updateWidget( args );
     741                                                api.Widgets.Previewer.preview.iframe.show();
     742                                        } );
     743                                        return;
     744                                }
     745
     746                                // Check for cheaters.
     747                                if ( '-1' === r ) {
     748                                        api.Widgets.Previewer.cheatin();
     749                                        return;
     750                                }
     751
     752                                if ( r.success ) {
     753                                        sanitized_form = $( '<div>' + r.data.form + '</div>' );
     754                                        sanitized_inputs = control._getInputs( sanitized_form );
     755                                        has_same_inputs_in_response = control._getInputsSignature( inputs ) === control._getInputsSignature( sanitized_inputs );
     756
     757                                        // Restore live update mode if sanitized fields are now aligned with the existing fields
     758                                        if ( has_same_inputs_in_response && ! control.live_update_mode ) {
     759                                                control.live_update_mode = true;
     760                                                control.container.removeClass( 'widget-form-disabled' );
     761                                                control.container.find( 'input[name="savewidget"]' ).hide();
     762                                        }
     763
     764                                        // Sync sanitized field states to existing fields if they are aligned
     765                                        if ( has_same_inputs_in_response && control.live_update_mode ) {
     766                                                inputs.each( function ( i ) {
     767                                                        var input = $( this ),
     768                                                                sanitized_input = $( sanitized_inputs[i] ),
     769                                                                property = control._getInputStatePropertyName( this ),
     770                                                                submitted_state,
     771                                                                sanitized_state,
     772                                                                can_update_state;
     773
     774                                                        submitted_state = input.data( 'state' + update_number );
     775                                                        sanitized_state = sanitized_input.prop( property );
     776                                                        input.data( 'sanitized', sanitized_state );
     777
     778                                                        can_update_state = (
     779                                                                submitted_state !== sanitized_state &&
     780                                                                ( args.ignore_active_element || ! input.is( document.activeElement ) )
     781                                                        );
     782                                                        if ( can_update_state ) {
     783                                                                input.prop( property, sanitized_state );
     784                                                        }
     785                                                } );
     786                                                $( document ).trigger( 'widget-synced', [ widget_root, r.data.form ] );
     787
     788                                        // Otherwise, if sanitized fields are not aligned with existing fields, disable live update mode if enabled
     789                                        } else if ( control.live_update_mode ) {
     790                                                control.live_update_mode = false;
     791                                                control.container.find( 'input[name="savewidget"]' ).show();
     792                                                is_live_update_aborted = true;
     793                                        // Otherwise, replace existing form with the sanitized form
     794                                        } else {
     795                                                widget_content.html( r.data.form );
     796                                                control.container.removeClass( 'widget-form-disabled' );
     797                                                $( document ).trigger( 'widget-updated', [ widget_root ] );
     798                                        }
     799
     800                                        /**
     801                                         * If the old instance is identical to the new one, there is nothing new
     802                                         * needing to be rendered, and so we can preempt the event for the
     803                                         * preview finishing loading.
     804                                         */
     805                                        is_changed = ! is_live_update_aborted && ! _( control.setting() ).isEqual( r.data.instance );
     806                                        if ( is_changed ) {
     807                                                control.is_widget_updating = true; // suppress triggering another updateWidget
     808                                                control.setting( r.data.instance );
     809                                                control.is_widget_updating = false;
     810                                        } else {
     811                                                // no change was made, so stop the spinner now instead of when the preview would updates
     812                                                control.container.removeClass( 'previewer-loading' );
     813                                        }
     814
     815                                        if ( complete_callback ) {
     816                                                complete_callback.call( control, null, { no_change: ! is_changed, ajax_finished: true } );
     817                                        }
     818                                } else {
     819                                        message = l10n.error;
     820                                        if ( r.data && r.data.message ) {
     821                                                message = r.data.message;
     822                                        }
     823                                        if ( complete_callback ) {
     824                                                complete_callback.call( control, message );
     825                                        } else {
     826                                                widget_content.prepend( '<p class="widget-error"><strong>' + message + '</strong></p>' );
     827                                        }
     828                                }
     829                        } );
     830                        jqxhr.fail( function ( jqXHR, textStatus ) {
     831                                if ( complete_callback ) {
     832                                        complete_callback.call( control, textStatus );
     833                                }
     834                        } );
     835                        jqxhr.always( function() {
     836                                control.container.removeClass( 'widget-form-loading' );
     837                                inputs.each( function() {
     838                                        $( this ).removeData( 'state' + update_number );
     839                                } );
     840
     841                                processing( processing() - 1 );
     842                        } );
     843                },
     844
     845                /**
     846                 * Expand the accordion section containing a control
     847                 * @todo it would be nice if accordion had a proper API instead of having to trigger UI events on its elements
     848                 */
     849                expandControlSection: function() {
     850                        var section = this.container.closest( '.accordion-section' );
     851                        if ( ! section.hasClass( 'open' ) ) {
     852                                section.find( '.accordion-section-title:first' ).trigger( 'click' );
     853                        }
     854                },
     855
     856                /**
     857                 * Expand the widget form control
     858                 */
     859                expandForm: function() {
     860                        this.toggleForm( true );
     861                },
     862
     863                /**
     864                 * Collapse the widget form control
     865                 */
     866                collapseForm: function() {
     867                        this.toggleForm( false );
     868                },
     869
     870                /**
     871                 * Expand or collapse the widget control
     872                 *
     873                 * @param {boolean|undefined} [do_expand] If not supplied, will be inverse of current visibility
     874                 */
     875                toggleForm: function ( do_expand ) {
     876                        var control = this, widget, inside, complete;
     877
     878                        widget = control.container.find( 'div.widget:first' );
     879                        inside = widget.find( '.widget-inside:first' );
     880                        if ( typeof do_expand === 'undefined' ) {
     881                                do_expand = ! inside.is( ':visible' );
     882                        }
     883
     884                        // Already expanded or collapsed, so noop
     885                        if ( inside.is( ':visible' ) === do_expand ) {
     886                                return;
     887                        }
     888
     889                        if ( do_expand ) {
     890                                // Close all other widget controls before expanding this one
     891                                api.control.each( function ( other_control ) {
     892                                        if ( control.params.type === other_control.params.type && control !== other_control ) {
     893                                                other_control.collapseForm();
     894                                        }
     895                                } );
     896
     897                                complete = function() {
     898                                        control.container.removeClass( 'expanding' );
     899                                        control.container.addClass( 'expanded' );
     900                                        control.container.trigger( 'expanded' );
     901                                };
     902                                if ( control.params.is_wide ) {
     903                                        inside.fadeIn( 'fast', complete );
     904                                } else {
     905                                        inside.slideDown( 'fast', complete );
     906                                }
     907                                control.container.trigger( 'expand' );
     908                                control.container.addClass( 'expanding' );
     909                        } else {
     910                                control.container.trigger( 'collapse' );
     911                                control.container.addClass( 'collapsing' );
     912                                complete = function() {
     913                                        control.container.removeClass( 'collapsing' );
     914                                        control.container.removeClass( 'expanded' );
     915                                        control.container.trigger( 'collapsed' );
     916                                };
     917                                if ( control.params.is_wide ) {
     918                                        inside.fadeOut( 'fast', complete );
     919                                } else {
     920                                        inside.slideUp( 'fast', function() {
     921                                                widget.css( { width:'', margin:'' } );
     922                                                complete();
     923                                        } );
     924                                }
     925                        }
     926                },
     927
     928                /**
     929                 * Expand the containing sidebar section, expand the form, and focus on
     930                 * the first input in the control
     931                 */
     932                focus: function() {
     933                        var control = this;
     934                        control.expandControlSection();
     935                        control.expandForm();
     936                        control.container.find( '.widget-content :focusable:first' ).focus();
     937                },
     938
     939                /**
     940                 * Get the position (index) of the widget in the containing sidebar
     941                 *
     942                 * @throws Error
     943                 * @returns {Number}
     944                 */
     945                getWidgetSidebarPosition: function() {
     946                        var control = this,
     947                                sidebar_widget_ids,
     948                                position;
     949
     950                        sidebar_widget_ids = control.getSidebarWidgetsControl().setting();
     951                        position = _.indexOf( sidebar_widget_ids, control.params.widget_id );
     952                        if ( position === -1 ) {
     953                                throw new Error( 'Widget was unexpectedly not present in the sidebar.' );
     954                        }
     955                        return position;
     956                },
     957
     958                /**
     959                 * Move widget up one in the sidebar
     960                 */
     961                moveUp: function() {
     962                        this._moveWidgetByOne( -1 );
     963                },
     964
     965                /**
     966                 * Move widget up one in the sidebar
     967                 */
     968                moveDown: function() {
     969                        this._moveWidgetByOne( 1 );
     970                },
     971
     972                /**
     973                 * @private
     974                 *
     975                 * @param {Number} offset 1|-1
     976                 */
     977                _moveWidgetByOne: function ( offset ) {
     978                        var control = this,
     979                                i,
     980                                sidebar_widgets_setting,
     981                                sidebar_widget_ids,
     982                                adjacent_widget_id;
     983
     984                        i = control.getWidgetSidebarPosition();
     985
     986                        sidebar_widgets_setting = control.getSidebarWidgetsControl().setting;
     987                        sidebar_widget_ids = Array.prototype.slice.call( sidebar_widgets_setting() ); // clone
     988                        adjacent_widget_id = sidebar_widget_ids[i + offset];
     989                        sidebar_widget_ids[i + offset] = control.params.widget_id;
     990                        sidebar_widget_ids[i] = adjacent_widget_id;
     991
     992                        sidebar_widgets_setting( sidebar_widget_ids );
     993                },
     994
     995                /**
     996                 * Toggle visibility of the widget move area
     997                 *
     998                 * @param {Boolean} [toggle]
     999                 */
     1000                toggleWidgetMoveArea: function ( toggle ) {
     1001                        var control = this, move_widget_area;
     1002                        move_widget_area = control.container.find( '.move-widget-area' );
     1003                        if ( typeof toggle === 'undefined' ) {
     1004                                toggle = ! move_widget_area.hasClass( 'active' );
     1005                        }
     1006                        if ( toggle ) {
     1007                                // reset the selected sidebar
     1008                                move_widget_area.find( '.selected' ).removeClass( 'selected' );
     1009                                move_widget_area.find( 'li' ).filter( function() {
     1010                                        return $( this ).data( 'id' ) === control.params.sidebar_id;
     1011                                } ).addClass( 'selected' );
     1012                                control.container.find( '.move-widget-btn' ).prop( 'disabled', true );
     1013                        }
     1014                        move_widget_area.toggleClass( 'active', toggle );
     1015                },
     1016
     1017                /**
     1018                 * Inside of the customizer preview, scroll the widget into view
     1019                 */
     1020                scrollPreviewWidgetIntoView: function() {
     1021                        // @todo scrollIntoView() provides a robust but very poor experience. Animation is needed. See https://github.com/x-team/wp-widget-customizer/issues/16
     1022                },
     1023
     1024                /**
     1025                 * Highlight the widget control and section
     1026                 */
     1027                highlightSectionAndControl: function() {
     1028                        var control = this, target_element;
     1029
     1030                        if ( control.container.is( ':hidden' ) ) {
     1031                                target_element = control.container.closest( '.control-section' );
     1032                        } else {
     1033                                target_element = control.container;
     1034                        }
     1035
     1036                        $( '.widget-customizer-highlighted' ).removeClass( 'widget-customizer-highlighted' );
     1037                        target_element.addClass( 'widget-customizer-highlighted' );
     1038                        setTimeout( function() {
     1039                                target_element.removeClass( 'widget-customizer-highlighted' );
     1040                        }, 500 );
     1041                }
     1042
    1751043        } );
    1761044
    1771045        /**
    1781046         * Sidebar Widgets control
    179          * Note that 'sidebar_widgets' must match the Sidebar_Widgets_WP_Customize_Control::$type
     1047         * Note that 'sidebar_widgets' must match the WP_Widget_Area_Customize_Control::$type
    1801048         */
    181         customize.controlConstructor.sidebar_widgets = customize.Control.extend( {
    182 
     1049        api.Widgets.SidebarControl = api.Control.extend({
    1831050                /**
    1841051                 * Set up the control
    … …  
    1991066                _setupModel: function() {
    2001067                        var control = this,
    201                                 registered_sidebar = self.registered_sidebars.get( control.params.sidebar_id );
     1068                                registered_sidebar = api.Widgets.registeredSidebars.get( control.params.sidebar_id );
    2021069
    2031070                        control.setting.bind( function( new_widget_ids, old_widget_ids ) {
    … …  
    2101077                                new_widget_ids = _( new_widget_ids ).filter( function ( new_widget_id ) {
    2111078                                        var parsed_widget_id = parse_widget_id( new_widget_id );
    212                                         return !! self.available_widgets.findWhere( { id_base: parsed_widget_id.id_base } );
     1079                                        return !! api.Widgets.availableWidgets.findWhere( { id_base: parsed_widget_id.id_base } );
    2131080                                } );
    2141081
    2151082                                widget_form_controls = _( new_widget_ids ).map( function ( widget_id ) {
    216                                         var widget_form_control = self.getWidgetFormControlForWidget( widget_id );
     1083                                        var widget_form_control = api.Widgets.getWidgetFormControlForWidget( widget_id );
    2171084                                        if ( ! widget_form_control ) {
    2181085                                                widget_form_control = control.addWidget( widget_id );
    … …  
    2511118
    2521119                                        // Using setTimeout so that when moving a widget to another sidebar, the other sidebars_widgets settings get a chance to update
    253                                         setTimeout( function () {
     1120                                        setTimeout( function() {
    2541121                                                var is_present_in_another_sidebar = false,
    2551122                                                        removed_control,
    … …  
    2601127
    2611128                                                // Check if the widget is in another sidebar
    262                                                 wp.customize.each( function ( other_setting ) {
     1129                                                api.each( function ( other_setting ) {
    2631130                                                        if ( other_setting.id === control.setting.id || 0 !== other_setting.id.indexOf( 'sidebars_widgets[' ) || other_setting.id === 'sidebars_widgets[wp_inactive_widgets]' ) {
    2641131                                                                return;
    … …  
    2771144                                                }
    2781145
    279                                                 removed_control = self.getWidgetFormControlForWidget( removed_widget_id );
     1146                                                removed_control = api.Widgets.getWidgetFormControlForWidget( removed_widget_id );
    2801147
    2811148                                                // Detect if widget control was dragged to another sidebar
    … …  
    2881155                                                // Delete any widget form controls for removed widgets
    2891156                                                if ( removed_control && ! was_dragged_to_another_sidebar ) {
    290                                                         wp.customize.control.remove( removed_control.id );
     1157                                                        api.control.remove( removed_control.id );
    2911158                                                        removed_control.container.remove();
    2921159                                                }
    … …  
    2941161                                                // Move widget to inactive widgets sidebar (move it to trash) if has been previously saved
    2951162                                                // This prevents the inactive widgets sidebar from overflowing with throwaway widgets
    296                                                 if ( self.saved_widget_ids[removed_widget_id] ) {
    297                                                         inactive_widgets = wp.customize.value( 'sidebars_widgets[wp_inactive_widgets]' )().slice();
     1163                                                if ( api.Widgets.savedWidgetIds[removed_widget_id] ) {
     1164                                                        inactive_widgets = api.value( 'sidebars_widgets[wp_inactive_widgets]' )().slice();
    2981165                                                        inactive_widgets.push( removed_widget_id );
    299                                                         wp.customize.value( 'sidebars_widgets[wp_inactive_widgets]' )( _( inactive_widgets ).unique() );
     1166                                                        api.value( 'sidebars_widgets[wp_inactive_widgets]' )( _( inactive_widgets ).unique() );
    3001167                                                }
    3011168
    3021169                                                // Make old single widget available for adding again
    3031170                                                removed_id_base = parse_widget_id( removed_widget_id ).id_base;
    304                                                 widget = self.available_widgets.findWhere( { id_base: removed_id_base } );
     1171                                                widget = api.Widgets.availableWidgets.findWhere( { id_base: removed_id_base } );
    3051172                                                if ( widget && ! widget.get( 'is_multi' ) ) {
    3061173                                                        widget.set( 'is_disabled', false );
    … …  
    3121179
    3131180                        // Update the model with whether or not the sidebar is rendered
    314                         self.previewer.bind( 'rendered-sidebars', function ( rendered_sidebars ) {
     1181                        api.Widgets.Previewer.bind( 'rendered-sidebars', function ( rendered_sidebars ) {
    3151182                                var is_rendered = !! rendered_sidebars[control.params.sidebar_id];
    3161183                                registered_sidebar.set( 'is_rendered', is_rendered );
    … …  
    3221189                                section = $( section_selector );
    3231190                                if ( this.get( 'is_rendered' ) ) {
    324                                         section.stop().slideDown( function () {
     1191                                        section.stop().slideDown( function() {
    3251192                                                $( this ).css( 'height', 'auto' ); // so that the .accordion-section-content won't overflow
    3261193                                        } );
    … …  
    3391206                 * Allow widgets in sidebar to be re-ordered, and for the order to be previewed
    3401207                 */
    341                 _setupSortable: function () {
     1208                _setupSortable: function() {
    3421209                        var control = this;
    3431210                        control.is_reordering = false;
    … …  
    3511218                                axis: 'y',
    3521219                                connectWith: '.accordion-section-content:has(.customize-control-sidebar_widgets)',
    353                                 update: function () {
     1220                                update: function() {
    3541221                                        var widget_container_ids = control.section_content.sortable( 'toArray' ), widget_ids;
    3551222                                        widget_ids = $.map( widget_container_ids, function ( widget_container_id ) {
    … …  
    3661233                        control.control_section.find( '.accordion-section-title' ).droppable( {
    3671234                                accept: '.customize-control-widget_form',
    368                                 over: function () {
     1235                                over: function() {
    3691236                                        if ( ! control.control_section.hasClass( 'open' ) ) {
    3701237                                                control.control_section.addClass( 'open' );
    371                                                 control.section_content.toggle( false ).slideToggle( 150, function () {
     1238                                                control.section_content.toggle( false ).slideToggle( 150, function() {
    3721239                                                        control.section_content.sortable( 'refreshPositions' );
    3731240                                                } );
    … …  
    3911258                 * Set up UI for adding a new widget
    3921259                 */
    393                 _setupAddition: function () {
     1260                _setupAddition: function() {
    3941261                        var control = this;
    3951262
    … …  
    4051272                                // @todo Use an control.is_adding state
    4061273                                if ( ! $( 'body' ).hasClass( 'adding-widget' ) ) {
    407                                         self.availableWidgetsPanel.open( control );
     1274                                        api.Widgets.availableWidgetsPanel.open( control );
    4081275                                } else {
    409                                         self.availableWidgetsPanel.close();
     1276                                        api.Widgets.availableWidgetsPanel.close();
    4101277                                }
    4111278                        } );
    … …  
    4151282                 * Add classes to the widget_form controls to assist with styling
    4161283                 */
    417                 _applyCardinalOrderClassNames: function () {
     1284                _applyCardinalOrderClassNames: function() {
    4181285                        var control = this;
    4191286                        control.section_content.find( '.customize-control-widget_form' )
    … …  
    4601327                 * @return {wp.customize.controlConstructor.widget_form[]}
    4611328                 */
    462                 getWidgetFormControls: function () {
     1329                getWidgetFormControls: function() {
    4631330                        var control = this, form_controls;
    4641331
    4651332                        form_controls = _( control.setting() ).map( function ( widget_id ) {
    4661333                                var setting_id = widget_id_to_setting_id( widget_id ),
    467                                         form_control = customize.control( setting_id );
     1334                                        form_control = api.control( setting_id );
    4681335
    4691336                                if ( ! form_control ) {
    … …  
    4881355                                widget_number = parsed_widget_id.number,
    4891356                                widget_id_base = parsed_widget_id.id_base,
    490                                 widget = self.available_widgets.findWhere( {id_base: widget_id_base} ),
     1357                                widget = api.Widgets.availableWidgets.findWhere( {id_base: widget_id_base} ),
    4911358                                setting_id,
    4921359                                is_existing_widget,
    … …  
    5401407
    5411408                        // Only create setting if it doesn't already exist (if we're adding a pre-existing inactive widget)
    542                         is_existing_widget = wp.customize.has( setting_id );
     1409                        is_existing_widget = api.has( setting_id );
    5431410                        if ( ! is_existing_widget ) {
    5441411                                setting_args = {
    … …  
    5461413                                        previewer: control.setting.previewer
    5471414                                };
    548                                 wp.customize.create( setting_id, setting_id, {}, setting_args );
    549                         }
    550 
    551                         Constructor = wp.customize.controlConstructor[customize_control_type];
     1415                                api.create( setting_id, setting_id, {}, setting_args );
     1416                        }
     1417
     1418                        Constructor = api.controlConstructor[customize_control_type];
    5521419                        widget_form_control = new Constructor( setting_id, {
    5531420                                params: {
    … …  
    5661433                                previewer: control.setting.previewer
    5671434                        } );
    568                         wp.customize.control.add( setting_id, widget_form_control );
     1435                        api.control.add( setting_id, widget_form_control );
    5691436
    5701437                        // Make sure widget is removed from the other sidebars
    571                         wp.customize.each( function ( other_setting ) {
     1438                        api.each( function ( other_setting ) {
    5721439                                if ( other_setting.id === control.setting.id ) {
    5731440                                        return;
    … …  
    5911458                        }
    5921459
    593                         customize_control.slideDown( function () {
     1460                        customize_control.slideDown( function() {
    5941461                                if ( is_existing_widget ) {
    5951462                                        widget_form_control.expandForm();
    … …  
    6151482        } );
    6161483
    617         /**
    618          * Widget Form control
    619          * Note that 'widget_form' must match the Widget_Form_WP_Customize_Control::$type
    620          */
    621         customize.controlConstructor.widget_form = customize.Control.extend( {
    622 
    623                 /**
    624                  * Set up the control
    625                  */
    626                 ready: function() {
    627                         var control = this;
    628                         control._setupModel();
    629                         control._setupWideWidget();
    630                         control._setupControlToggle();
    631                         control._setupWidgetTitle();
    632                         control._setupReorderUI();
    633                         control._setupHighlightEffects();
    634                         control._setupUpdateUI();
    635                         control._setupRemoveUI();
    636                 },
    637 
    638                 /**
    639                  * Handle changes to the setting
    640                  */
    641                 _setupModel: function () {
    642                         var control = this, remember_saved_widget_id;
    643 
    644                         // Remember saved widgets so we know which to trash (move to inactive widgets sidebar)
    645                         remember_saved_widget_id = function () {
    646                                 self.saved_widget_ids[control.params.widget_id] = true;
    647                         };
    648                         wp.customize.bind( 'ready', remember_saved_widget_id );
    649                         wp.customize.bind( 'saved', remember_saved_widget_id );
    650 
    651                         control._update_count = 0;
    652                         control.is_widget_updating = false;
    653                         control.live_update_mode = true;
    654 
    655                         // Update widget whenever model changes
    656                         control.setting.bind( function( to, from ) {
    657                                 if ( ! _( from ).isEqual( to ) && ! control.is_widget_updating ) {
    658                                         control.updateWidget( { instance: to } );
    659                                 }
    660                         } );
    661                 },
    662 
    663                 /**
    664                  * Add special behaviors for wide widget controls
    665                  */
    666                 _setupWideWidget: function () {
    667                         var control = this,
    668                                 widget_inside,
    669                                 widget_form,
    670                                 customize_sidebar,
    671                                 position_widget,
    672                                 theme_controls_container;
    673 
    674                         if ( ! control.params.is_wide ) {
    675                                 return;
    676                         }
    677 
    678                         widget_inside = control.container.find( '.widget-inside' );
    679                         widget_form = widget_inside.find( '> .form' );
    680                         customize_sidebar = $( '.wp-full-overlay-sidebar-content:first' );
    681                         control.container.addClass( 'wide-widget-control' );
    682 
    683                         control.container.find( '.widget-content:first' ).css( {
    684                                 'max-width': control.params.width,
    685                                 'min-height': control.params.height
    686                         } );
    687 
    688                         /**
    689                          * Keep the widget-inside positioned so the top of fixed-positioned
    690                          * element is at the same top position as the widget-top. When the
    691                          * widget-top is scrolled out of view, keep the widget-top in view;
    692                          * likewise, don't allow the widget to drop off the bottom of the window.
    693                          * If a widget is too tall to fit in the window, don't let the height
    694                          * exceed the window height so that the contents of the widget control
    695                          * will become scrollable (overflow:auto).
    696                          */
    697                         position_widget = function () {
    698                                 var offset_top = control.container.offset().top,
    699                                         window_height = $( window ).height(),
    700                                         form_height = widget_form.outerHeight(),
    701                                         top;
    702                                 widget_inside.css( 'max-height', window_height );
    703                                 top = Math.max(
    704                                         0, // prevent top from going off screen
    705                                         Math.min(
    706                                                 Math.max( offset_top, 0 ), // distance widget in panel is from top of screen
    707                                                 window_height - form_height // flush up against bottom of screen
    708                                         )
    709                                 );
    710                                 widget_inside.css( 'top', top );
    711                         };
    712 
    713                         theme_controls_container = $( '#customize-theme-controls' );
    714                         control.container.on( 'expand', function () {
    715                                 position_widget();
    716                                 customize_sidebar.on( 'scroll', position_widget );
    717                                 $( window ).on( 'resize', position_widget );
    718                                 theme_controls_container.on( 'expanded collapsed', position_widget );
    719                         } );
    720                         control.container.on( 'collapsed', function () {
    721                                 customize_sidebar.off( 'scroll', position_widget );
    722                                 $( window ).off( 'resize', position_widget );
    723                                 theme_controls_container.off( 'expanded collapsed', position_widget );
    724                         } );
    725 
    726                         // Reposition whenever a sidebar's widgets are changed
    727                         wp.customize.each( function ( setting ) {
    728                                 if ( 0 === setting.id.indexOf( 'sidebars_widgets[' ) ) {
    729                                         setting.bind( function () {
    730                                                 if ( control.container.hasClass( 'expanded' ) ) {
    731                                                         position_widget();
    732                                                 }
    733                                         } );
    734                                 }
    735                         } );
    736                 },
    737 
    738                 /**
    739                  * Show/hide the control when clicking on the form title, when clicking
    740                  * the close button
    741                  */
    742                 _setupControlToggle: function() {
    743                         var control = this, close_btn;
    744 
    745                         control.container.find( '.widget-top' ).on( 'click', function ( e ) {
    746                                 e.preventDefault();
    747                                 var sidebar_widgets_control = control.getSidebarWidgetsControl();
    748                                 if ( sidebar_widgets_control.is_reordering ) {
    749                                         return;
    750                                 }
    751                                 control.toggleForm();
    752                         } );
    753 
    754                         close_btn = control.container.find( '.widget-control-close' );
    755                         // @todo Hitting Enter on this link does nothing; will be resolved in core with <http://core.trac.wordpress.org/ticket/26633>
    756                         close_btn.on( 'click', function ( e ) {
    757                                 e.preventDefault();
    758                                 control.collapseForm();
    759                                 control.container.find( '.widget-top .widget-action:first' ).focus(); // keyboard accessibility
    760                         } );
    761                 },
    762 
    763                 /**
    764                  * Update the title of the form if a title field is entered
    765                  */
    766                 _setupWidgetTitle: function () {
    767                         var control = this, update_title;
    768 
    769                         update_title = function () {
    770                                 var title = control.setting().title,
    771                                         in_widget_title = control.container.find( '.in-widget-title' );
    772 
    773                                 if ( title ) {
    774                                         in_widget_title.text( ': ' + title );
    775                                 } else {
    776                                         in_widget_title.text( '' );
    777                                 }
    778                         };
    779                         control.setting.bind( update_title );
    780                         update_title();
    781                 },
    782 
    783                 /**
    784                  * Set up the widget-reorder-nav
    785                  */
    786                 _setupReorderUI: function () {
    787                         var control = this,
    788                                 select_sidebar_item,
    789                                 move_widget_area,
    790                                 reorder_nav,
    791                                 update_available_sidebars;
    792 
    793                         /**
    794                          * select the provided sidebar list item in the move widget area
    795                          *
    796                          * @param {jQuery} li
    797                          */
    798                         select_sidebar_item = function ( li ) {
    799                                 li.siblings( '.selected' ).removeClass( 'selected' );
    800                                 li.addClass( 'selected' );
    801                                 var is_self_sidebar = ( li.data( 'id' ) === control.params.sidebar_id );
    802                                 control.container.find( '.move-widget-btn' ).prop( 'disabled', is_self_sidebar );
    803                         };
    804 
    805                         /**
    806                          * Add the widget reordering elements to the widget control
    807                          */
    808                         control.container.find( '.widget-title-action' ).after( $( self.tpl.widget_reorder_nav ) );
    809                         move_widget_area = $(
    810                                 _.template( self.tpl.move_widget_area, {
    811                                         sidebars: _( self.registered_sidebars.toArray() ).pluck( 'attributes' )
    812                                 } )
    813                         );
    814                         control.container.find( '.widget-top' ).after( move_widget_area );
    815 
    816                         /**
    817                          * Update available sidebars when their rendered state changes
    818                          */
    819                         update_available_sidebars = function () {
    820                                 var sidebar_items = move_widget_area.find( 'li' ), self_sidebar_item;
    821                                 self_sidebar_item = sidebar_items.filter( function(){
    822                                         return $( this ).data( 'id' ) === control.params.sidebar_id;
    823                                 } );
    824                                 sidebar_items.each( function () {
    825                                         var li = $( this ),
    826                                                 sidebar_id,
    827                                                 sidebar_model;
    828 
    829                                         sidebar_id = li.data( 'id' );
    830                                         sidebar_model = self.registered_sidebars.get( sidebar_id );
    831                                         li.toggle( sidebar_model.get( 'is_rendered' ) );
    832                                         if ( li.hasClass( 'selected' ) && ! sidebar_model.get( 'is_rendered' ) ) {
    833                                                 select_sidebar_item( self_sidebar_item );
    834                                         }
    835                                 } );
    836                         };
    837                         update_available_sidebars();
    838                         self.registered_sidebars.on( 'change:is_rendered', update_available_sidebars );
    839 
    840                         /**
    841                          * Handle clicks for up/down/move on the reorder nav
    842                          */
    843                         reorder_nav = control.container.find( '.widget-reorder-nav' );
    844                         reorder_nav.find( '.move-widget, .move-widget-down, .move-widget-up' ).on( 'click keypress', function ( event ) {
    845                                 if ( event.type === 'keypress' && ( event.which !== 13 && event.which !== 32 ) ) {
    846                                         return;
    847                                 }
    848                                 $( this ).focus();
    849 
    850                                 if ( $( this ).is( '.move-widget' ) ) {
    851                                         control.toggleWidgetMoveArea();
    852                                 } else {
    853                                         var is_move_down = $( this ).is( '.move-widget-down' ),
    854                                                 is_move_up = $( this ).is( '.move-widget-up' ),
    855                                                 i = control.getWidgetSidebarPosition();
    856 
    857                                         if ( ( is_move_up && i === 0 ) || ( is_move_down && i === control.getSidebarWidgetsControl().setting().length - 1 ) ) {
    858                                                 return;
    859                                         }
    860 
    861                                         if ( is_move_up ) {
    862                                                 control.moveUp();
    863                                         } else {
    864                                                 control.moveDown();
    865                                         }
    866 
    867                                         $( this ).focus(); // re-focus after the container was moved
    868                                 }
    869                         } );
    870 
    871                         /**
    872                          * Handle selecting a sidebar to move to
    873                          */
    874                         control.container.find( '.widget-area-select' ).on( 'click keypress', 'li', function ( e ) {
    875                                 if ( event.type === 'keypress' && ( event.which !== 13 && event.which !== 32 ) ) {
    876                                         return;
    877                                 }
    878                                 e.preventDefault();
    879                                 select_sidebar_item( $( this ) );
    880                         } );
    881 
    882                         /**
    883                          * Move widget to another sidebar
    884                          */
    885                         control.container.find( '.move-widget-btn' ).click( function () {
    886                                 control.getSidebarWidgetsControl().toggleReordering( false );
    887 
    888                                 var old_sidebar_id = control.params.sidebar_id,
    889                                         new_sidebar_id = control.container.find( '.widget-area-select li.selected' ).data( 'id' ),
    890                                         old_sidebar_widgets_setting,
    891                                         new_sidebar_widgets_setting,
    892                                         old_sidebar_widget_ids,
    893                                         new_sidebar_widget_ids,
    894                                         i;
    895 
    896                                 old_sidebar_widgets_setting = customize( 'sidebars_widgets[' + old_sidebar_id + ']' );
    897                                 new_sidebar_widgets_setting = customize( 'sidebars_widgets[' + new_sidebar_id + ']' );
    898                                 old_sidebar_widget_ids = Array.prototype.slice.call( old_sidebar_widgets_setting() );
    899                                 new_sidebar_widget_ids = Array.prototype.slice.call( new_sidebar_widgets_setting() );
    900 
    901                                 i = control.getWidgetSidebarPosition();
    902                                 old_sidebar_widget_ids.splice( i, 1 );
    903                                 new_sidebar_widget_ids.push( control.params.widget_id );
    904 
    905                                 old_sidebar_widgets_setting( old_sidebar_widget_ids );
    906                                 new_sidebar_widgets_setting( new_sidebar_widget_ids );
    907 
    908                                 control.focus();
    909                         } );
    910                 },
    911 
    912                 /**
    913                  * Highlight widgets in preview when interacted with in the customizer
    914                  */
    915                 _setupHighlightEffects: function() {
    916                         var control = this;
    917 
    918                         // Highlight whenever hovering or clicking over the form
    919                         control.container.on( 'mouseenter click', function () {
    920                                 control.setting.previewer.send( 'highlight-widget', control.params.widget_id );
    921                         } );
    922 
    923                         // Highlight when the setting is updated
    924                         control.setting.bind( function () {
    925                                 control.setting.previewer.send( 'highlight-widget', control.params.widget_id );
    926                         } );
    927 
    928                         // Highlight when the widget form is expanded
    929                         control.container.on( 'expand', function () {
    930                                 control.scrollPreviewWidgetIntoView();
    931                         } );
    932                 },
    933 
    934                 /**
    935                  * Set up event handlers for widget updating
    936                  */
    937                 _setupUpdateUI: function () {
    938                         var control = this,
    939                                 widget_root,
    940                                 widget_content,
    941                                 save_btn,
    942                                 update_widget_debounced,
    943                                 form_update_event_handler;
    944 
    945                         widget_root = control.container.find( '.widget:first' );
    946                         widget_content = widget_root.find( '.widget-content:first' );
    947 
    948                         // Configure update button
    949                         save_btn = control.container.find( '.widget-control-save' );
    950                         save_btn.val( self.i18n.save_btn_label );
    951                         save_btn.attr( 'title', self.i18n.save_btn_tooltip );
    952                         save_btn.removeClass( 'button-primary' ).addClass( 'button-secondary' );
    953                         save_btn.on( 'click', function ( e ) {
    954                                 e.preventDefault();
    955                                 control.updateWidget( { disable_form: true } );
    956                         } );
    957 
    958                         update_widget_debounced = _.debounce( function () {
    959                                 // @todo For compatibility with other plugins, should we trigger a click event? What about form submit event?
    960                                 control.updateWidget();
    961                         }, 250 );
    962 
    963                         // Trigger widget form update when hitting Enter within an input
    964                         control.container.find( '.widget-content' ).on( 'keydown', 'input', function( e ) {
    965                                 if ( 13 === e.which ) { // Enter
    966                                         e.preventDefault();
    967                                         control.updateWidget( { ignore_active_element: true } );
    968                                 }
    969                         } );
    970 
    971                         // Handle widgets that support live previews
    972                         widget_content.on( 'change input propertychange', ':input', function ( e ) {
    973                                 if ( control.live_update_mode ) {
    974                                         if ( e.type === 'change' ) {
    975                                                 control.updateWidget();
    976                                         } else if ( this.checkValidity && this.checkValidity() ) {
    977                                                 update_widget_debounced();
    978                                         }
    979                                 }
    980                         } );
    981 
    982                         // Remove loading indicators when the setting is saved and the preview updates
    983                         control.setting.previewer.channel.bind( 'synced', function () {
    984                                 control.container.removeClass( 'previewer-loading' );
    985                         } );
    986                         self.previewer.bind( 'widget-updated', function ( updated_widget_id ) {
    987                                 if ( updated_widget_id === control.params.widget_id ) {
    988                                         control.container.removeClass( 'previewer-loading' );
    989                                 }
    990                         } );
    991 
    992                         // Update widget control to indicate whether it is currently rendered (cf. Widget Visibility)
    993                         self.previewer.bind( 'rendered-widgets', function ( rendered_widgets ) {
    994                                 var is_rendered = !! rendered_widgets[control.params.widget_id];
    995                                 control.container.toggleClass( 'widget-rendered', is_rendered );
    996                         } );
    997 
    998                         form_update_event_handler = builtin_form_sync_handlers[ control.params.widget_id_base ];
    999                         if ( form_update_event_handler ) {
    1000                                 $( document ).on( 'widget-synced', function ( e, widget_el ) {
    1001                                         if ( widget_root.is( widget_el ) ) {
    1002                                                 form_update_event_handler.apply( document, arguments );
    1003                                         }
    1004                                 } );
    1005                         }
    1006                 },
    1007 
    1008                 /**
    1009                  * Set up event handlers for widget removal
    1010                  */
    1011                 _setupRemoveUI: function () {
    1012                         var control = this,
    1013                                 remove_btn,
    1014                                 replace_delete_with_remove;
    1015 
    1016                         // Configure remove button
    1017                         remove_btn = control.container.find( 'a.widget-control-remove' );
    1018                         // @todo Hitting Enter on this link does nothing; will be resolved in core with <http://core.trac.wordpress.org/ticket/26633>
    1019                         remove_btn.on( 'click', function ( e ) {
    1020                                 e.preventDefault();
    1021 
    1022                                 // Find an adjacent element to add focus to when this widget goes away
    1023                                 var adjacent_focus_target;
    1024                                 if ( control.container.next().is( '.customize-control-widget_form' ) ) {
    1025                                         adjacent_focus_target = control.container.next().find( '.widget-action:first' );
    1026                                 } else if ( control.container.prev().is( '.customize-control-widget_form' ) ) {
    1027                                         adjacent_focus_target = control.container.prev().find( '.widget-action:first' );
    1028                                 } else {
    1029                                         adjacent_focus_target = control.container.next( '.customize-control-sidebar_widgets' ).find( '.add-new-widget:first' );
    1030                                 }
    1031 
    1032                                 control.container.slideUp( function() {
    1033                                         var sidebars_widgets_control = self.getSidebarWidgetControlContainingWidget( control.params.widget_id ),
    1034                                                 sidebar_widget_ids,
    1035                                                 i;
    1036 
    1037                                         if ( ! sidebars_widgets_control ) {
    1038                                                 throw new Error( 'Unable to find sidebars_widgets_control' );
    1039                                         }
    1040                                         sidebar_widget_ids = sidebars_widgets_control.setting().slice();
    1041                                         i = _.indexOf( sidebar_widget_ids, control.params.widget_id );
    1042                                         if ( -1 === i ) {
    1043                                                 throw new Error( 'Widget is not in sidebar' );
    1044                                         }
    1045                                         sidebar_widget_ids.splice( i, 1 );
    1046                                         sidebars_widgets_control.setting( sidebar_widget_ids );
    1047                                         adjacent_focus_target.focus(); // keyboard accessibility
    1048                                 } );
    1049                         } );
    1050 
    1051                         replace_delete_with_remove = function () {
    1052                                 remove_btn.text( self.i18n.remove_btn_label ); // wp_widget_control() outputs the link as "Delete"
    1053                                 remove_btn.attr( 'title', self.i18n.remove_btn_tooltip );
    1054                         };
    1055                         if ( control.params.is_new ) {
    1056                                 wp.customize.bind( 'saved', replace_delete_with_remove );
    1057                         } else {
    1058                                 replace_delete_with_remove();
    1059                         }
    1060                 },
    1061 
    1062                 /**
    1063                  * Find all inputs in a widget container that should be considered when
    1064                  * comparing the loaded form with the sanitized form, whose fields will
    1065                  * be aligned to copy the sanitized over. The elements returned by this
    1066                  * are passed into this._getInputsSignature(), and they are iterated
    1067                  * over when copying sanitized values over to the the form loaded.
    1068                  *
    1069                  * @param {jQuery} container element in which to look for inputs
    1070                  * @returns {jQuery} inputs
    1071                  * @private
    1072                  */
    1073                 _getInputs: function ( container ) {
    1074                         return $( container ).find( ':input[name]' );
    1075                 },
    1076 
    1077                 /**
    1078                  * Iterate over supplied inputs and create a signature string for all of them together.
    1079                  * This string can be used to compare whether or not the form has all of the same fields.
    1080                  *
    1081                  * @param {jQuery} inputs
    1082                  * @returns {string}
    1083                  * @private
    1084                  */
    1085                 _getInputsSignature: function ( inputs ) {
    1086                         var inputs_signatures = _( inputs ).map( function ( input ) {
    1087                                 input = $( input );
    1088                                 var signature_parts;
    1089                                 if ( input.is( ':checkbox, :radio' ) ) {
    1090                                         signature_parts = [ input.attr( 'id' ), input.attr( 'name' ), input.prop( 'value' ) ];
    1091                                 } else {
    1092                                         signature_parts = [ input.attr( 'id' ), input.attr( 'name' ) ];
    1093                                 }
    1094                                 return signature_parts.join( ',' );
    1095                         } );
    1096                         return inputs_signatures.join( ';' );
    1097                 },
    1098 
    1099                 /**
    1100                  * Get the property that represents the state of an input.
    1101                  *
    1102                  * @param {jQuery|DOMElement} input
    1103                  * @returns {string}
    1104                  * @private
    1105                  */
    1106                 _getInputStatePropertyName: function ( input ) {
    1107                         input = $( input );
    1108                         if ( input.is( ':radio, :checkbox' ) ) {
    1109                                 return 'checked';
    1110                         } else {
    1111                                 return 'value';
    1112                         }
    1113                 },
    1114 
    1115                 /***********************************************************************
    1116                  * Begin public API methods
    1117                  **********************************************************************/
    1118 
    1119                 /**
    1120                  * @return {wp.customize.controlConstructor.sidebar_widgets[]}
    1121                  */
    1122                 getSidebarWidgetsControl: function () {
    1123                         var control = this, setting_id, sidebar_widgets_control;
    1124 
    1125                         setting_id = 'sidebars_widgets[' + control.params.sidebar_id + ']';
    1126                         sidebar_widgets_control = customize.control( setting_id );
    1127                         if ( ! sidebar_widgets_control ) {
    1128                                 throw new Error( 'Unable to locate sidebar_widgets control for ' + control.params.sidebar_id );
    1129                         }
    1130                         return sidebar_widgets_control;
    1131                 },
    1132 
    1133                 /**
    1134                  * Submit the widget form via Ajax and get back the updated instance,
    1135                  * along with the new widget control form to render.
    1136                  *
    1137                  * @param {object} [args]
    1138                  * @param {Object|null} [args.instance=null]  When the model changes, the instance is sent here; otherwise, the inputs from the form are used
    1139                  * @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.
    1140                  * @param {Boolean} [args.ignore_active_element=false] Whether or not updating a field will be deferred if focus is still on the element.
    1141                  */
    1142                 updateWidget: function ( args ) {
    1143                         var control = this,
    1144                                 instance_override,
    1145                                 complete_callback,
    1146                                 widget_root,
    1147                                 update_number,
    1148                                 widget_content,
    1149                                 params,
    1150                                 data,
    1151                                 inputs,
    1152                                 processing,
    1153                                 jqxhr,
    1154                                 is_changed;
    1155 
    1156                         args = $.extend( {
    1157                                 instance: null,
    1158                                 complete: null,
    1159                                 ignore_active_element: false
    1160                         }, args );
    1161 
    1162                         instance_override = args.instance;
    1163                         complete_callback = args.complete;
    1164 
    1165                         control._update_count += 1;
    1166                         update_number = control._update_count;
    1167 
    1168                         widget_root = control.container.find( '.widget:first' );
    1169                         widget_content = widget_root.find( '.widget-content:first' );
    1170 
    1171                         // Remove a previous error message
    1172                         widget_content.find( '.widget-error' ).remove();
    1173 
    1174                         control.container.addClass( 'widget-form-loading' );
    1175                         control.container.addClass( 'previewer-loading' );
    1176                         processing = wp.customize.state( 'processing' );
    1177                         processing( processing() + 1 );
    1178 
    1179                         if ( ! control.live_update_mode ) {
    1180                                 control.container.addClass( 'widget-form-disabled' );
    1181                         }
    1182 
    1183                         params = {};
    1184                         params.action = 'update-widget';
    1185                         params.wp_customize = 'on';
    1186                         params.nonce = self.nonce;
    1187 
    1188                         data = $.param( params );
    1189                         inputs = control._getInputs( widget_content );
    1190 
    1191                         // Store the value we're submitting in data so that when the response comes back,
    1192                         // we know if it got sanitized; if there is no difference in the sanitized value,
    1193                         // then we do not need to touch the UI and mess up the user's ongoing editing.
    1194                         inputs.each( function () {
    1195                                 var input = $( this ),
    1196                                         property = control._getInputStatePropertyName( this );
    1197                                 input.data( 'state' + update_number, input.prop( property ) );
    1198                         } );
    1199 
    1200                         if ( instance_override ) {
    1201                                 data += '&' + $.param( { 'sanitized_widget_setting': JSON.stringify( instance_override ) } );
    1202                         } else {
    1203                                 data += '&' + inputs.serialize();
    1204                         }
    1205                         data += '&' + widget_content.find( '~ :input' ).serialize();
    1206 
    1207                         jqxhr = $.post( wp.ajax.settings.url, data, function ( r ) {
    1208                                 var message,
    1209                                         sanitized_form,
    1210                                         sanitized_inputs,
    1211                                         has_same_inputs_in_response,
    1212                                         is_live_update_aborted = false;
    1213 
    1214                                 // Check if the user is logged out.
    1215                                 if ( '0' === r ) {
    1216                                         self.previewer.preview.iframe.hide();
    1217                                         self.previewer.login().done( function() {
    1218                                                 control.updateWidget( args );
    1219                                                 self.previewer.preview.iframe.show();
    1220                                         } );
    1221                                         return;
    1222                                 }
    1223 
    1224                                 // Check for cheaters.
    1225                                 if ( '-1' === r ) {
    1226                                         self.previewer.cheatin();
    1227                                         return;
    1228                                 }
    1229 
    1230                                 if ( r.success ) {
    1231                                         sanitized_form = $( '<div>' + r.data.form + '</div>' );
    1232                                         sanitized_inputs = control._getInputs( sanitized_form );
    1233                                         has_same_inputs_in_response = control._getInputsSignature( inputs ) === control._getInputsSignature( sanitized_inputs );
    1234 
    1235                                         // Restore live update mode if sanitized fields are now aligned with the existing fields
    1236                                         if ( has_same_inputs_in_response && ! control.live_update_mode ) {
    1237                                                 control.live_update_mode = true;
    1238                                                 control.container.removeClass( 'widget-form-disabled' );
    1239                                                 control.container.find( 'input[name="savewidget"]' ).hide();
    1240                                         }
    1241 
    1242                                         // Sync sanitized field states to existing fields if they are aligned
    1243                                         if ( has_same_inputs_in_response && control.live_update_mode ) {
    1244                                                 inputs.each( function ( i ) {
    1245                                                         var input = $( this ),
    1246                                                                 sanitized_input = $( sanitized_inputs[i] ),
    1247                                                                 property = control._getInputStatePropertyName( this ),
    1248                                                                 submitted_state,
    1249                                                                 sanitized_state,
    1250                                                                 can_update_state;
    1251 
    1252                                                         submitted_state = input.data( 'state' + update_number );
    1253                                                         sanitized_state = sanitized_input.prop( property );
    1254                                                         input.data( 'sanitized', sanitized_state );
    1255 
    1256                                                         can_update_state = (
    1257                                                                 submitted_state !== sanitized_state &&
    1258                                                                 ( args.ignore_active_element || ! input.is( document.activeElement ) )
    1259                                                         );
    1260                                                         if ( can_update_state ) {
    1261                                                                 input.prop( property, sanitized_state );
    1262                                                         }
    1263                                                 } );
    1264                                                 $( document ).trigger( 'widget-synced', [ widget_root, r.data.form ] );
    1265 
    1266                                         // Otherwise, if sanitized fields are not aligned with existing fields, disable live update mode if enabled
    1267                                         } else if ( control.live_update_mode ) {
    1268                                                 control.live_update_mode = false;
    1269                                                 control.container.find( 'input[name="savewidget"]' ).show();
    1270                                                 is_live_update_aborted = true;
    1271                                         // Otherwise, replace existing form with the sanitized form
    1272                                         } else {
    1273                                                 widget_content.html( r.data.form );
    1274                                                 control.container.removeClass( 'widget-form-disabled' );
    1275                                                 $( document ).trigger( 'widget-updated', [ widget_root ] );
    1276                                         }
    1277 
    1278                                         /**
    1279                                          * If the old instance is identical to the new one, there is nothing new
    1280                                          * needing to be rendered, and so we can preempt the event for the
    1281                                          * preview finishing loading.
    1282                                          */
    1283                                         is_changed = ! is_live_update_aborted && ! _( control.setting() ).isEqual( r.data.instance );
    1284                                         if ( is_changed ) {
    1285                                                 control.is_widget_updating = true; // suppress triggering another updateWidget
    1286                                                 control.setting( r.data.instance );
    1287                                                 control.is_widget_updating = false;
    1288                                         } else {
    1289                                                 // no change was made, so stop the spinner now instead of when the preview would updates
    1290                                                 control.container.removeClass( 'previewer-loading' );
    1291                                         }
    1292 
    1293                                         if ( complete_callback ) {
    1294                                                 complete_callback.call( control, null, { no_change: ! is_changed, ajax_finished: true } );
    1295                                         }
    1296                                 } else {
    1297                                         message = self.i18n.error;
    1298                                         if ( r.data && r.data.message ) {
    1299                                                 message = r.data.message;
    1300                                         }
    1301                                         if ( complete_callback ) {
    1302                                                 complete_callback.call( control, message );
    1303                                         } else {
    1304                                                 widget_content.prepend( '<p class="widget-error"><strong>' + message + '</strong></p>' );
    1305                                         }
    1306                                 }
    1307                         } );
    1308                         jqxhr.fail( function ( jqXHR, textStatus ) {
    1309                                 if ( complete_callback ) {
    1310                                         complete_callback.call( control, textStatus );
    1311                                 }
    1312                         } );
    1313                         jqxhr.always( function () {
    1314                                 control.container.removeClass( 'widget-form-loading' );
    1315                                 inputs.each( function () {
    1316                                         $( this ).removeData( 'state' + update_number );
    1317                                 } );
    1318 
    1319                                 processing( processing() - 1 );
    1320                         } );
    1321                 },
    1322 
    1323                 /**
    1324                  * Expand the accordion section containing a control
    1325                  * @todo it would be nice if accordion had a proper API instead of having to trigger UI events on its elements
    1326                  */
    1327                 expandControlSection: function () {
    1328                         var section = this.container.closest( '.accordion-section' );
    1329                         if ( ! section.hasClass( 'open' ) ) {
    1330                                 section.find( '.accordion-section-title:first' ).trigger( 'click' );
    1331                         }
    1332                 },
    1333 
    1334                 /**
    1335                  * Expand the widget form control
    1336                  */
    1337                 expandForm: function () {
    1338                         this.toggleForm( true );
    1339                 },
    1340 
    1341                 /**
    1342                  * Collapse the widget form control
    1343                  */
    1344                 collapseForm: function () {
    1345                         this.toggleForm( false );
    1346                 },
    1347 
    1348                 /**
    1349                  * Expand or collapse the widget control
    1350                  *
    1351                  * @param {boolean|undefined} [do_expand] If not supplied, will be inverse of current visibility
    1352                  */
    1353                 toggleForm: function ( do_expand ) {
    1354                         var control = this, widget, inside, complete;
    1355 
    1356                         widget = control.container.find( 'div.widget:first' );
    1357                         inside = widget.find( '.widget-inside:first' );
    1358                         if ( typeof do_expand === 'undefined' ) {
    1359                                 do_expand = ! inside.is( ':visible' );
    1360                         }
    1361 
    1362                         // Already expanded or collapsed, so noop
    1363                         if ( inside.is( ':visible' ) === do_expand ) {
    1364                                 return;
    1365                         }
    1366 
    1367                         if ( do_expand ) {
    1368                                 // Close all other widget controls before expanding this one
    1369                                 wp.customize.control.each( function ( other_control ) {
    1370                                         if ( control.params.type === other_control.params.type && control !== other_control ) {
    1371                                                 other_control.collapseForm();
    1372                                         }
    1373                                 } );
    1374 
    1375                                 complete = function () {
    1376                                         control.container.removeClass( 'expanding' );
    1377                                         control.container.addClass( 'expanded' );
    1378                                         control.container.trigger( 'expanded' );
    1379                                 };
    1380                                 if ( control.params.is_wide ) {
    1381                                         inside.fadeIn( 'fast', complete );
    1382                                 } else {
    1383                                         inside.slideDown( 'fast', complete );
    1384                                 }
    1385                                 control.container.trigger( 'expand' );
    1386                                 control.container.addClass( 'expanding' );
    1387                         } else {
    1388                                 control.container.trigger( 'collapse' );
    1389                                 control.container.addClass( 'collapsing' );
    1390                                 complete = function () {
    1391                                         control.container.removeClass( 'collapsing' );
    1392                                         control.container.removeClass( 'expanded' );
    1393                                         control.container.trigger( 'collapsed' );
    1394                                 };
    1395                                 if ( control.params.is_wide ) {
    1396                                         inside.fadeOut( 'fast', complete );
    1397                                 } else {
    1398                                         inside.slideUp( 'fast', function() {
    1399                                                 widget.css( { width:'', margin:'' } );
    1400                                                 complete();
    1401                                         } );
    1402                                 }
    1403                         }
    1404                 },
    1405 
    1406                 /**
    1407                  * Expand the containing sidebar section, expand the form, and focus on
    1408                  * the first input in the control
    1409                  */
    1410                 focus: function () {
    1411                         var control = this;
    1412                         control.expandControlSection();
    1413                         control.expandForm();
    1414                         control.container.find( '.widget-content :focusable:first' ).focus();
    1415                 },
    1416 
    1417                 /**
    1418                  * Get the position (index) of the widget in the containing sidebar
    1419                  *
    1420                  * @throws Error
    1421                  * @returns {Number}
    1422                  */
    1423                 getWidgetSidebarPosition: function () {
    1424                         var control = this,
    1425                                 sidebar_widget_ids,
    1426                                 position;
    1427 
    1428                         sidebar_widget_ids = control.getSidebarWidgetsControl().setting();
    1429                         position = _.indexOf( sidebar_widget_ids, control.params.widget_id );
    1430                         if ( position === -1 ) {
    1431                                 throw new Error( 'Widget was unexpectedly not present in the sidebar.' );
    1432                         }
    1433                         return position;
    1434                 },
    1435 
    1436                 /**
    1437                  * Move widget up one in the sidebar
    1438                  */
    1439                 moveUp: function () {
    1440                         this._moveWidgetByOne( -1 );
    1441                 },
    1442 
    1443                 /**
    1444                  * Move widget up one in the sidebar
    1445                  */
    1446                 moveDown: function () {
    1447                         this._moveWidgetByOne( 1 );
    1448                 },
    1449 
    1450                 /**
    1451                  * @private
    1452                  *
    1453                  * @param {Number} offset 1|-1
    1454                  */
    1455                 _moveWidgetByOne: function ( offset ) {
    1456                         var control = this,
    1457                                 i,
    1458                                 sidebar_widgets_setting,
    1459                                 sidebar_widget_ids,
    1460                                 adjacent_widget_id;
    1461 
    1462                         i = control.getWidgetSidebarPosition();
    1463 
    1464                         sidebar_widgets_setting = control.getSidebarWidgetsControl().setting;
    1465                         sidebar_widget_ids = Array.prototype.slice.call( sidebar_widgets_setting() ); // clone
    1466                         adjacent_widget_id = sidebar_widget_ids[i + offset];
    1467                         sidebar_widget_ids[i + offset] = control.params.widget_id;
    1468                         sidebar_widget_ids[i] = adjacent_widget_id;
    1469 
    1470                         sidebar_widgets_setting( sidebar_widget_ids );
    1471                 },
    1472 
    1473                 /**
    1474                  * Toggle visibility of the widget move area
    1475                  *
    1476                  * @param {Boolean} [toggle]
    1477                  */
    1478                 toggleWidgetMoveArea: function ( toggle ) {
    1479                         var control = this, move_widget_area;
    1480                         move_widget_area = control.container.find( '.move-widget-area' );
    1481                         if ( typeof toggle === 'undefined' ) {
    1482                                 toggle = ! move_widget_area.hasClass( 'active' );
    1483                         }
    1484                         if ( toggle ) {
    1485                                 // reset the selected sidebar
    1486                                 move_widget_area.find( '.selected' ).removeClass( 'selected' );
    1487                                 move_widget_area.find( 'li' ).filter( function () {
    1488                                         return $( this ).data( 'id' ) === control.params.sidebar_id;
    1489                                 } ).addClass( 'selected' );
    1490                                 control.container.find( '.move-widget-btn' ).prop( 'disabled', true );
    1491                         }
    1492                         move_widget_area.toggleClass( 'active', toggle );
    1493                 },
    1494 
    1495                 /**
    1496                  * Inside of the customizer preview, scroll the widget into view
    1497                  */
    1498                 scrollPreviewWidgetIntoView: function () {
    1499                         // @todo scrollIntoView() provides a robust but very poor experience. Animation is needed. See https://github.com/x-team/wp-widget-customizer/issues/16
    1500                 },
    1501 
    1502                 /**
    1503                  * Highlight the widget control and section
    1504                  */
    1505                 highlightSectionAndControl: function() {
    1506                         var control = this, target_element;
    1507 
    1508                         if ( control.container.is( ':hidden' ) ) {
    1509                                 target_element = control.container.closest( '.control-section' );
    1510                         } else {
    1511                                 target_element = control.container;
    1512                         }
    1513 
    1514                         $( '.widget-customizer-highlighted' ).removeClass( 'widget-customizer-highlighted' );
    1515                         target_element.addClass( 'widget-customizer-highlighted' );
    1516                         setTimeout( function () {
    1517                                 target_element.removeClass( 'widget-customizer-highlighted' );
    1518                         }, 500 );
    1519                 }
    1520 
     1484        $.extend( api.controlConstructor, {
     1485                widget_form: api.Widgets.WidgetControl,
     1486                sidebar_widgets: api.Widgets.SidebarControl
     1487        });
     1488
     1489        api.bind( 'ready', function() {
     1490                // Set up the widgets panel
     1491                api.Widgets.availableWidgetsPanel.setup();
     1492
     1493                // Highlight widget control
     1494                api.Widgets.Previewer.bind( 'highlight-widget-control', api.Widgets.highlightWidgetFormControl );
     1495
     1496                // Open and focus widget control
     1497                api.Widgets.Previewer.bind( 'focus-widget-control', api.Widgets.focusWidgetFormControl );
    15211498        } );
    15221499
    … …  
    15241501         * Capture the instance of the Previewer since it is private
    15251502         */
    1526         OldPreviewer = wp.customize.Previewer;
    1527         wp.customize.Previewer = OldPreviewer.extend( {
     1503        OldPreviewer = api.Previewer;
     1504        api.Previewer = OldPreviewer.extend({
    15281505                initialize: function( params, options ) {
    1529                         self.previewer = this;
     1506                        api.Widgets.Previewer = this;
    15301507                        OldPreviewer.prototype.initialize.call( this, params, options );
    15311508                        this.bind( 'refresh', this.refresh );
    … …  
    15381515         * @param {string} widgetId
    15391516         */
    1540         self.highlightWidgetFormControl = function( widgetId ) {
    1541                 var control = self.getWidgetFormControlForWidget( widgetId );
     1517        api.Widgets.highlightWidgetFormControl = function( widgetId ) {
     1518                var control = api.Widgets.getWidgetFormControlForWidget( widgetId );
    15421519
    15431520                if ( control ) {
    … …  
    15511528         * @param {string} widgetId
    15521529         */
    1553         self.focusWidgetFormControl = function( widgetId ) {
    1554                 var control = self.getWidgetFormControlForWidget( widgetId );
     1530        api.Widgets.focusWidgetFormControl = function( widgetId ) {
     1531                var control = api.Widgets.getWidgetFormControlForWidget( widgetId );
    15551532
    15561533                if ( control ) {
    … …  
    15641541         * @return {object|null}
    15651542         */
    1566         self.getSidebarWidgetControlContainingWidget = function ( widget_id ) {
     1543        api.Widgets.getSidebarWidgetControlContainingWidget = function ( widget_id ) {
    15671544                var found_control = null;
    15681545                // @todo this can use widget_id_to_setting_id(), then pass into wp.customize.control( x ).getSidebarWidgetsControl()
    1569                 wp.customize.control.each( function ( control ) {
     1546                api.control.each( function ( control ) {
    15701547                        if ( control.params.type === 'sidebar_widgets' && -1 !== _.indexOf( control.setting(), widget_id ) ) {
    15711548                                found_control = control;
    15721549                        }
    15731550                } );
     1551
    15741552                return found_control;
    15751553        };
    … …  
    15801558         * @return {object|null}
    15811559         */
    1582         self.getWidgetFormControlForWidget = function ( widget_id ) {
     1560        api.Widgets.getWidgetFormControlForWidget = function ( widget_id ) {
    15831561                var found_control = null;
    15841562                // @todo We can just use widget_id_to_setting_id() here
    1585                 wp.customize.control.each( function ( control ) {
     1563                api.control.each( function ( control ) {
    15861564                        if ( control.params.type === 'widget_form' && control.params.widget_id === widget_id ) {
    15871565                                found_control = control;
    15881566                        }
    15891567                } );
     1568
    15901569                return found_control;
    1591         };
    1592 
    1593         /**
    1594          * @returns {Window}
    1595          */
    1596         self.getPreviewWindow = function (){
    1597                 return $( '#customize-preview' ).find( 'iframe' ).prop( 'contentWindow' );
    15981570        };
    15991571
    … …  
    16011573         * Available Widgets Panel
    16021574         */
    1603         self.availableWidgetsPanel = {
     1575        api.Widgets.availableWidgetsPanel = {
    16041576                active_sidebar_widgets_control: null,
    16051577                selected_widget_tpl: null,
    … …  
    16101582                 * Set up event listeners
    16111583                 */
    1612                 setup: function () {
     1584                setup: function() {
    16131585                        var panel = this;
    16141586
    … …  
    16161588                        panel.filter_input = $( '#available-widgets-filter' ).find( 'input' );
    16171589
    1618                         self.available_widgets.on( 'change update', panel.update_available_widgets_list );
     1590                        api.Widgets.availableWidgets.on( 'change update', panel.update_available_widgets_list );
    16191591                        panel.update_available_widgets_list();
    16201592
    … …  
    16301602
    16311603                        // Close the panel if the URL in the preview changes
    1632                         self.previewer.bind( 'url', function () {
     1604                        api.Widgets.Previewer.bind( 'url', function() {
    16331605                                panel.close();
    16341606                        } );
    … …  
    16481620                                var first_visible_widget;
    16491621
    1650                                 self.available_widgets.doSearch( event.target.value );
     1622                                api.Widgets.availableWidgets.doSearch( event.target.value );
    16511623
    16521624                                // Remove a widget from being selected if it is no longer visible
    … …  
    16721644
    16731645                        // Select a widget when it is focused on
    1674                         panel.container.find( ' > .widget-tpl' ).on( 'focus', function () {
     1646                        panel.container.find( ' > .widget-tpl' ).on( 'focus', function() {
    16751647                                panel.select( this );
    16761648                        } );
    … …  
    17261698                 */
    17271699                update_available_widgets_list: function() {
    1728                         var panel = self.availableWidgetsPanel;
     1700                        var panel = api.Widgets.availableWidgetsPanel;
    17291701
    17301702                        // First hide all widgets...
    … …  
    17321704
    17331705                        // ..and then show only available widgets which could be filtered
    1734                         self.available_widgets.each( function ( widget ) {
     1706                        api.Widgets.availableWidgets.each( function ( widget ) {
    17351707                                var widget_tpl = $( '#widget-tpl-' + widget.id );
    17361708                                widget_tpl.toggle( ! widget.get( 'is_disabled' ) );
    … …  
    17621734
    17631735                        widget_id = $( panel.selected_widget_tpl ).data( 'widget-id' );
    1764                         widget = self.available_widgets.findWhere( {id: widget_id} );
     1736                        widget = api.Widgets.availableWidgets.findWhere( {id: widget_id} );
    17651737                        if ( ! widget ) {
    17661738                                throw new Error( 'Widget unexpectedly not found.' );
    … …  
    17861758                        $( 'body' ).addClass( 'adding-widget' );
    17871759                        panel.container.find( '.widget-tpl' ).removeClass( 'selected' );
    1788                         self.available_widgets.doSearch( '' );
     1760                        api.Widgets.availableWidgets.doSearch( '' );
    17891761                        panel.filter_input.focus();
    17901762                },
    … …  
    18401812        }
    18411813
    1842         return self;
    1843 }( jQuery ));
     1814})( window.wp, jQuery );

  • trunk/src/wp-includes/class-wp-customize-control.php

    r27971 r27985  
    918918                ?>
    919919                <span class="button-secondary add-new-widget" tabindex="0">
    920                         <?php esc_html_e( 'Add a Widget' ); ?>
     920                        <?php _e( 'Add a Widget' ); ?>
    921921                </span>
    922922
    923923                <span class="reorder-toggle" tabindex="0">
    924                         <span class="reorder"><?php esc_html_e( 'Reorder' ); ?></span>
    925                         <span class="reorder-done"><?php esc_html_e( 'Done' ); ?></span>
     924                        <span class="reorder"><?php _ex( 'Reorder', 'Reorder widgets in Customizer' ); ?></span>
     925                        <span class="reorder-done"><?php _ex( 'Done', 'Cancel reordering widgets in Customizer' ); ?></span>
    926926                </span>
    927927                <?php
    … …  
    941941        public $height;
    942942        public $is_wide = false;
    943         public $is_live_previewable = false;
    944943
    945944        public function to_json() {
    946945                parent::to_json();
    947                 $exported_properties = array( 'widget_id', 'widget_id_base', 'sidebar_id', 'width', 'height', 'is_wide', 'is_live_previewable' );
     946                $exported_properties = array( 'widget_id', 'widget_id_base', 'sidebar_id', 'width', 'height', 'is_wide' );
    948947                foreach ( $exported_properties as $key ) {
    949948                        $this->json[ $key ] = $this->$key;

  • trunk/src/wp-includes/class-wp-customize-widgets.php

    r27973 r27985  
    407407                                $id_base           = $GLOBALS['wp_registered_widget_controls'][$widget_id]['id_base'];
    408408
    409                                 assert( false !== is_active_widget( $registered_widget['callback'], $registered_widget['id'], false, false ) );
    410 
    411409                                $control = new WP_Widget_Form_Customize_Control( $this->manager, $setting_id, array(
    412410                                        'label'          => $registered_widget['name'],
    … …  
    600598                        array( '{description}', '{btn}' ),
    601599                        array(
    602                                 ( 'Select an area to move this widget into:' ), // @todo translate
    603                                 esc_html_x( 'Move', 'move widget' ),
     600                                __( 'Select an area to move this widget into:' ),
     601                                _x( 'Move', 'Move widget' ),
    604602                        ),
    605603                        '<div class="move-widget-area">
    … …  
    616614                );
    617615
    618                 /*
    619                  * Why not wp_localize_script? Because we're not localizing,
    620                  * and it forces values into strings.
    621                  */
    622616                global $wp_scripts;
    623617
    624                 $exports = array(
    625                         'nonce'               => wp_create_nonce( 'update-widget' ),
    626                         'registered_sidebars' => array_values( $GLOBALS['wp_registered_sidebars'] ),
    627                         'registered_widgets'  => $GLOBALS['wp_registered_widgets'],
    628                         'available_widgets'   => $available_widgets, // @todo Merge this with registered_widgets
    629                         'i18n' => array(
    630                                 'save_btn_label'     => __( 'Apply' ),
    631                                 // @todo translate? do we want these tooltips?
    632                                 'save_btn_tooltip'   => ( 'Save and preview changes before publishing them.' ),
    633                                 'remove_btn_label'   => __( 'Remove' ),
    634                                 'remove_btn_tooltip' => ( 'Trash widget by moving it to the inactive widgets sidebar.' ),
    635                                 'error'              => __( 'An error has occurred. Please reload the page and try again.' ),
     618                $settings = array(
     619                        'nonce'                => wp_create_nonce( 'update-widget' ),
     620                        'registeredSidebars'   => array_values( $GLOBALS['wp_registered_sidebars'] ),
     621                        'registeredWidgets'    => $GLOBALS['wp_registered_widgets'],
     622                        'availableWidgets'     => $available_widgets, // @todo Merge this with registered_widgets
     623                        'l10n' => array(
     624                                'saveBtnLabel'     => __( 'Apply' ),
     625                                'saveBtnTooltip'   => __( 'Save and preview changes before publishing them.' ),
     626                                'removeBtnLabel'   => __( 'Remove' ),
     627                                'removeBtnTooltip' => __( 'Trash widget by moving it to the inactive widgets sidebar.' ),
     628                                'error'            => __( 'An error has occurred. Please reload the page and try again.' ),
    636629                        ),
    637                         'tpl'                 => array(
    638                                 'widget_reorder_nav' => $widget_reorder_nav_tpl,
    639                                 'move_widget_area'   => $move_widget_area_tpl,
     630                        'tpl' => array(
     631                                'widgetReorderNav' => $widget_reorder_nav_tpl,
     632                                'moveWidgetArea'   => $move_widget_area_tpl,
    640633                        ),
    641634                );
    642635
    643                 foreach ( $exports['registered_widgets'] as &$registered_widget ) {
     636                foreach ( $settings['registeredWidgets'] as &$registered_widget ) {
    644637                        unset( $registered_widget['callback'] ); // may not be JSON-serializeable
    645638                }
    … …  
    648641                        'customize-widgets',
    649642                        'data',
    650                         sprintf( 'var WidgetCustomizer_exports = %s;', json_encode( $exports ) )
     643                        sprintf( 'var _wpCustomizeWidgetsSettings = %s;', json_encode( $settings ) )
    651644                );
    652645        }
    … …  
    663656                <div id="available-widgets">
    664657                        <div id="available-widgets-filter">
    665                                 <label class="screen-reader-text" for="widgets-search"><?php _e( 'Find Widgets' ); ?></label>
    666                                 <input type="search" id="widgets-search" placeholder="<?php esc_attr_e( 'Find widgets&hellip;' ) ?>" />
     658                                <label class="screen-reader-text" for="widgets-search"><?php _e( 'Search Widgets' ); ?></label>
     659                                <input type="search" id="widgets-search" placeholder="<?php esc_attr_e( 'Search widgets&hellip;' ) ?>" />
    667660                        </div>
    668661                        <?php foreach ( $this->get_available_widgets() as $available_widget ): ?>
    669662                                <div id="widget-tpl-<?php echo esc_attr( $available_widget['id'] ) ?>" data-widget-id="<?php echo esc_attr( $available_widget['id'] ) ?>" class="widget-tpl <?php echo esc_attr( $available_widget['id'] ) ?>" tabindex="0">
    670                                         <?php echo $available_widget['control_tpl']; // xss ok ?>
     663                                        <?php echo $available_widget['control_tpl']; ?>
    671664                                </div>
    672665                        <?php endforeach; ?>
    … …  
    827820                        $available_widgets[] = $available_widget;
    828821                }
     822
    829823                return $available_widgets;
    830824        }

  • trunk/src/wp-includes/js/customize-preview-widgets.js

    r27892 r27985  
    1 (function( $, wp ){
     1(function( wp, $ ){
    22
    33        if ( ! wp || ! wp.customize ) { return; }
    … …  
    125125        });
    126126
    127 })( jQuery, window.wp );
     127})( window.wp, jQuery );
Note: See TracChangeset for help on using the changeset viewer.