WordPress.org
Get WordPress

Make WordPress Core

Ticket #27491: 27491.2.diff

File 27491.2.diff, 12.8 KB (added by westonruter, 11 years ago)

Refresh patch. Conflicts also resolved at ​https://github.com/x-team/wordpress-develop/pull/5/files

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

    diff --git src/wp-admin/css/customize-widgets.css src/wp-admin/css/customize-widgets.css
index f8530a1..9d3fdf3 100644
     
    3737.customize-control-widget_form.previewer-loading .spinner {
    3838        opacity: 1.0;
    3939}
     40.customize-control-widget_form.widget-form-disabled .widget-content {
     41        opacity: 0.7;
     42        pointer-events: none;
     43        -moz-user-select: none;
     44        -webkit-user-select: none;
     45        -ms-user-select: none;
     46        user-select: none;
     47}
    4048
    4149.customize-control-widget_form .widget {
    4250        margin-bottom: 0;

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

    diff --git src/wp-admin/js/customize-widgets.js src/wp-admin/js/customize-widgets.js
index eb552ad..64032da 100644
    var WidgetCustomizer = ( function ($) { 
    88                Sidebar,
    99                SidebarCollection,
    1010                OldPreviewer,
     11                builtin_form_update_handlers,
    1112                customize = wp.customize, self = {
    1213                update_widget_ajax_action: null,
    1314                update_widget_nonce_value: null,
    … … var WidgetCustomizer = ( function ($) { 
    137138        self.registered_sidebars = new SidebarCollection( self.registered_sidebars );
    138139
    139140        /**
     141         * Handlers for the widget-form-update event, organized by widget ID base.
     142         * Other widgets may provide their own update handlers by adding
     143         * listeners for the widget-form-update event.
     144         */
     145        builtin_form_update_handlers = {
     146
     147                /**
     148                 * @param {jQuery.Event} e
     149                 * @param {String} args.widget_id
     150                 * @param {String} args.widget_id_base
     151                 * @param {String} args.new_form
     152                 * @param {Boolean} args.hard
     153                 * @param {wp.customize.controlConstructor.widget_form} args.customize_control
     154                 */
     155                rss: function ( e, args ) {
     156                        var old_widget_error = args.customize_control.container.find( '.widget-error:first' ),
     157                                new_widget_error = $( '<div>' + args.new_form + '</div>' ).find( '.widget-error:first' );
     158
     159                        if ( old_widget_error.length && new_widget_error.length ) {
     160                                old_widget_error.replaceWith( new_widget_error );
     161                        } else if ( old_widget_error.length ) {
     162                                old_widget_error.remove();
     163                        } else if ( new_widget_error.length ) {
     164                                args.customize_control.container.find( '.widget-content:first' ).prepend( new_widget_error );
     165                        }
     166                }
     167        };
     168
     169        /**
    140170         * On DOM ready, initialize some meta functionality independent of specific
    141171         * customizer controls.
    142172         */
    … … var WidgetCustomizer = ( function ($) { 
    630660                        control._setupHighlightEffects();
    631661                        control._setupUpdateUI();
    632662                        control._setupRemoveUI();
    633                         control.hook( 'init' );
    634                 },
    635 
    636                 /**
    637                  * Hooks for widgets to support living in the customizer control
    638                  */
    639                 hooks: {
    640                         _default: {},
    641                         rss: {
    642                                 formUpdated: function ( serialized_form ) {
    643                                         var control = this,
    644                                                 old_widget_error = control.container.find( '.widget-error:first' ),
    645                                                 new_widget_error = serialized_form.find( '.widget-error:first' );
    646 
    647                                         if ( old_widget_error.length && new_widget_error.length ) {
    648                                                 old_widget_error.replaceWith( new_widget_error );
    649                                         } else if ( old_widget_error.length ) {
    650                                                 old_widget_error.remove();
    651                                         } else if ( new_widget_error.length ) {
    652                                                 control.container.find( '.widget-content' ).prepend( new_widget_error );
    653                                         }
    654                                 }
    655                         }
    656                 },
    657 
    658                 /**
    659                  * Trigger an 'action' which a specific widget type can handle
    660                  *
    661                  * @param name
    662                  */
    663                 hook: function ( name ) {
    664                         var args = Array.prototype.slice.call( arguments, 1 ), handler;
    665 
    666                         if ( this.hooks[this.params.widget_id_base] && this.hooks[this.params.widget_id_base][name] ) {
    667                                 handler = this.hooks[this.params.widget_id_base][name];
    668                         } else if ( this.hooks._default[name] ) {
    669                                 handler = this.hooks._default[name];
    670                         }
    671                         if ( handler ) {
    672                                 handler.apply( this, args );
    673                         }
    674663                },
    675664
    676665                /**
    … … var WidgetCustomizer = ( function ($) { 
    688677
    689678                        control._update_count = 0;
    690679                        control.is_widget_updating = false;
     680                        control.live_update_mode = true;
    691681
    692682                        // Update widget whenever model changes
    693683                        control.setting.bind( function( to, from ) {
    … … var WidgetCustomizer = ( function ($) { 
    968958                        var control = this,
    969959                                widget_content,
    970960                                save_btn,
    971                                 update_widget_debounced;
     961                                update_widget_debounced,
     962                                form_update_event_handler;
    972963
    973964                        widget_content = control.container.find( '.widget-content' );
    974965
    … … var WidgetCustomizer = ( function ($) { 
    979970                        save_btn.removeClass( 'button-primary' ).addClass( 'button-secondary' );
    980971                        save_btn.on( 'click', function ( e ) {
    981972                                e.preventDefault();
    982                                 control.updateWidget();
     973                                control.updateWidget( { disable_form: true } );
    983974                        } );
    984975
    985976                        update_widget_debounced = _.debounce( function () {
    … … var WidgetCustomizer = ( function ($) { 
    997988
    998989                        // Handle widgets that support live previews
    999990                        widget_content.on( 'change input propertychange', ':input', function ( e ) {
    1000                                 if ( e.type === 'change' ) {
    1001                                         control.updateWidget();
    1002                                 } else if ( this.checkValidity && this.checkValidity() ) {
    1003                                         update_widget_debounced();
     991                                if ( control.live_update_mode ) {
     992                                        if ( e.type === 'change' ) {
     993                                                control.updateWidget();
     994                                        } else if ( this.checkValidity && this.checkValidity() ) {
     995                                                update_widget_debounced();
     996                                        }
    1004997                                }
    1005998                        } );
    1006999
    … … var WidgetCustomizer = ( function ($) { 
    10191012                                var is_rendered = !! rendered_widgets[control.params.widget_id];
    10201013                                control.container.toggleClass( 'widget-rendered', is_rendered );
    10211014                        } );
     1015
     1016                        form_update_event_handler = builtin_form_update_handlers[ control.params.widget_id_base ];
     1017                        if ( form_update_event_handler ) {
     1018                                control.container.find( '.widget:first' ).on( 'widget-form-update', form_update_event_handler );
     1019                        }
    10221020                },
    10231021
    10241022                /**
    … … var WidgetCustomizer = ( function ($) { 
    11481146                        var control = this,
    11491147                                instance_override,
    11501148                                complete_callback,
     1149                                widget_root,
    11511150                                update_number,
    11521151                                widget_content,
    1153                                 element_id_to_refocus = null,
    1154                                 active_input_selection_start = null,
    1155                                 active_input_selection_end = null,
    11561152                                params,
    11571153                                data,
    11581154                                inputs,
    … … var WidgetCustomizer = ( function ($) { 
    11711167                        control._update_count += 1;
    11721168                        update_number = control._update_count;
    11731169
    1174                         widget_content = control.container.find( '.widget-content' );
     1170                        widget_root = control.container.find( '.widget:first' );
     1171                        widget_content = control.container.find( '.widget-content:first' );
    11751172
    11761173                        // Remove a previous error message
    11771174                        widget_content.find( '.widget-error' ).remove();
    11781175
    1179                         // @todo Support more selectors than IDs?
    1180                         if ( $.contains( control.container[0], document.activeElement ) && $( document.activeElement ).is( '[id]' ) ) {
    1181                                 element_id_to_refocus = $( document.activeElement ).prop( 'id' );
    1182                                 // @todo IE8 support: http://stackoverflow.com/a/4207763/93579
    1183                                 try {
    1184                                         active_input_selection_start = document.activeElement.selectionStart;
    1185                                         active_input_selection_end = document.activeElement.selectionEnd;
    1186                                 }
    1187                                 catch( e ) {} // catch InvalidStateError in case of checkboxes
    1188                         }
    1189 
    11901176                        control.container.addClass( 'widget-form-loading' );
    11911177                        control.container.addClass( 'previewer-loading' );
    11921178                        processing = wp.customize.state( 'processing' );
    11931179                        processing( processing() + 1 );
    11941180
     1181                        if ( ! control.live_update_mode ) {
     1182                                control.container.addClass( 'widget-form-disabled' );
     1183                        }
     1184
    11951185                        params = {};
    11961186                        params.action = self.update_widget_ajax_action;
    11971187                        params.wp_customize = 'on';
    … … var WidgetCustomizer = ( function ($) { 
    12211211                                        sanitized_form,
    12221212                                        sanitized_inputs,
    12231213                                        has_same_inputs_in_response,
    1224                                         is_instance_identical;
     1214                                        no_setting_change,
     1215                                        is_live_update_aborted = false,
     1216                                        event_data;
    12251217
    12261218                                // Check if the user is logged out.
    12271219                                if ( '0' === r ) {
    … … var WidgetCustomizer = ( function ($) { 
    12411233
    12421234                                if ( r.success ) {
    12431235                                        sanitized_form = $( '<div>' + r.data.form + '</div>' );
    1244 
    1245                                         control.hook( 'formUpdate', sanitized_form );
    1246 
    12471236                                        sanitized_inputs = sanitized_form.find( ':input, option' );
    12481237                                        has_same_inputs_in_response = control._getInputsSignature( inputs ) === control._getInputsSignature( sanitized_inputs );
    12491238
    1250                                         if ( has_same_inputs_in_response ) {
     1239                                        if ( has_same_inputs_in_response && control.live_update_mode ) {
    12511240                                                inputs.each( function ( i ) {
    12521241                                                        var input = $( this ),
    12531242                                                                sanitized_input = $( sanitized_inputs[i] ),
    12541243                                                                property = control._getInputStatePropertyName( this ),
    1255                                                                 state,
     1244                                                                submitted_state,
    12561245                                                                sanitized_state;
    12571246
    1258                                                         state = input.data( 'state' + update_number );
     1247                                                        submitted_state = input.data( 'state' + update_number );
    12591248                                                        sanitized_state = sanitized_input.prop( property );
    12601249                                                        input.data( 'sanitized', sanitized_state );
     1250                                                        event_data = {
     1251                                                                'sanitized_state': sanitized_state,
     1252                                                                'submitted_state': submitted_state,
     1253                                                                'customize_control': control
     1254                                                        };
    12611255
    1262                                                         if ( state !== sanitized_state ) {
     1256                                                        if ( submitted_state !== sanitized_state ) {
    12631257
    12641258                                                                // Only update now if not currently focused on it,
    12651259                                                                // so that we don't cause the cursor
    12661260                                                                // it will be updated upon the change event
    12671261                                                                if ( args.ignore_active_element || ! input.is( document.activeElement ) ) {
    12681262                                                                        input.prop( property, sanitized_state );
     1263                                                                        input.trigger( 'widget-sanitary-field', [ event_data ] );
     1264                                                                } else {
     1265                                                                        input.trigger( 'widget-unsanitary-field', [ event_data ] );
    12691266                                                                }
    1270                                                                 control.hook( 'unsanitaryField', input, sanitized_state, state );
    12711267
    12721268                                                        } else {
    1273                                                                 control.hook( 'sanitaryField', input, state );
     1269                                                                input.trigger( 'widget-sanitary-field', [ event_data ] );
    12741270                                                        }
    12751271                                                } );
    1276                                                 control.hook( 'formUpdated', sanitized_form );
     1272
     1273                                        } else if ( control.live_update_mode ) {
     1274                                                control.live_update_mode = false;
     1275                                                control.container.find( 'input[name="savewidget"]' ).show();
     1276                                                is_live_update_aborted = true;
    12771277                                        } else {
    1278                                                 widget_content.html( sanitized_form.html() );
    1279                                                 if ( element_id_to_refocus ) {
    1280                                                         // not using jQuery selector so we don't have to worry about escaping IDs with brackets and other characters
    1281                                                         $( document.getElementById( element_id_to_refocus ) )
    1282                                                                 .prop( {
    1283                                                                         selectionStart: active_input_selection_start,
    1284                                                                         selectionEnd: active_input_selection_end
    1285                                                                 } )
    1286                                                                 .focus();
    1287                                                 }
    1288                                                 control.hook( 'formRefreshed' );
     1278                                                widget_content.html( r.data.form );
     1279                                                control.container.removeClass( 'widget-form-disabled' );
     1280                                        }
     1281
     1282                                        if ( ! is_live_update_aborted ) {
     1283                                                event_data = {
     1284                                                        'widget_id': control.params.widget_id,
     1285                                                        'widget_id_base': control.params.widget_id_base,
     1286                                                        'new_form': r.data.form,
     1287                                                        'hard': ! control.live_update_mode, // dynamic fields may need to be re-initialized (e.g. Chosen)
     1288                                                        'customize_control': control
     1289                                                };
     1290                                                widget_root.trigger( 'widget-form-update', [ event_data ] ); // @todo THIS IS NOT GETTING LISTENED TO
    12891291                                        }
    12901292
    12911293                                        /**
    … … var WidgetCustomizer = ( function ($) { 
    12931295                                         * needing to be rendered, and so we can preempt the event for the
    12941296                                         * preview finishing loading.
    12951297                                         */
    1296                                         is_instance_identical = _( control.setting() ).isEqual( r.data.instance );
    1297                                         if ( ! is_instance_identical ) {
     1298                                        no_setting_change = is_live_update_aborted || _( control.setting() ).isEqual( r.data.instance );
     1299                                        if ( no_setting_change ) {
    12981300                                                control.is_widget_updating = true; // suppress triggering another updateWidget
    12991301                                                control.setting( r.data.instance );
    13001302                                                control.is_widget_updating = false;
    13011303                                        }
    13021304
    13031305                                        if ( complete_callback ) {
    1304                                                 complete_callback.call( control, null, { no_change: is_instance_identical, ajax_finished: true } );
     1306                                                complete_callback.call( control, null, { no_change: no_setting_change, ajax_finished: true } );
    13051307                                        }
    13061308                                } else {
    13071309                                        message = self.i18n.error;

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

    diff --git src/wp-admin/js/widgets.js src/wp-admin/js/widgets.js
index 046907b..9f935ed 100644
    wpWidgets = { 
    332332
    333333        save : function( widget, del, animate, order ) {
    334334                var sidebarId = widget.closest('div.widgets-sortables').attr('id'),
    335                         data = widget.find('form').serialize(), a;
     335                        data = widget.find('form').serialize(), a, eventData;
    336336
    337337                widget = $(widget);
    338338                $('.spinner', widget).show();
    … … wpWidgets = { 
    374374                        } else {
    375375                                $('.spinner').hide();
    376376                                if ( r && r.length > 2 ) {
    377                                         $( 'div.widget-content', widget ).html(r);
     377                                        $( 'div.widget-content', widget ).html( r );
    378378                                        wpWidgets.appendTitle( widget );
     379                                        eventData = {
     380                                                'widget_id': widget.find( 'input.widget-id' ).val(),
     381                                                'widget_id_base': widget.find( 'input.id_base' ).val(),
     382                                                'new_form': r,
     383                                                'hard': true, // soft updates only in customizer
     384                                                'customize_control': null
     385                                        };
     386                                        widget.trigger( 'widget-form-update', [ eventData ] );
    379387                                }
    380388                        }
    381389                        if ( order ) {