Changeset 32012

Timestamp:

04/04/2015 04:33:24 PM (10 years ago)

Author:

ocean90

Message:

Customize Widgets: Improve sync logic for select[multiple] inputs.

The current logic doesn't account for the special case of select[multiple] inputs which lack a single value to synchronize: The value to synchronize is an array of zero or more values.
This change replaces _getInputStatePropertyName() with _getInputState(), which returns the state for an input depending on its type, and _setInputState(), which updates an input's state based on its type.

props westonruter.
fixes #31885.

File:

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

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

@@ -928 +928 @@
 
         /**
-         * Get the property that represents the state of an input.
-         *
-         * @param {jQuery|DOMElement} input
-         * @returns {string}
+         * Get the state for an input depending on its type.
+         *
+         * @param {jQuery|Element} input
+         * @returns {string|boolean|array|*}
          * @private
          */
-        _getInputStatePropertyName: function( input ) {
-            var $input = $( input );
-
-            if ( $input.is( ':radio, :checkbox' ) ) {
-                return 'checked';
+        _getInputState: function( input ) {
+            input = $( input );
+            if ( input.is( ':radio, :checkbox' ) ) {
+                return input.prop( 'checked' );
+            } else if ( input.is( 'select[multiple]' ) ) {
+                return input.find( 'option:selected' ).map( function () {
+                    return $( this ).val();
+                } ).get();
             } else {
-                return 'value';
+                return input.val();
+            }
+        },
+
+        /**
+         * Update an input's state based on its type.
+         *
+         * @param {jQuery|Element} input
+         * @param {string|boolean|array|*} state
+         * @private
+         */
+        _setInputState: function ( input, state ) {
+            input = $( input );
+            if ( input.is( ':radio, :checkbox' ) ) {
+                input.prop( 'checked', state );
+            } else if ( input.is( 'select[multiple]' ) ) {
+                if ( ! $.isArray( state ) ) {
+                    state = [];
+                } else {
+                    // Make sure all state items are strings since the DOM value is a string
+                    state = _.map( state, function ( value ) {
+                        return String( value );
+                    } );
+                }
+                input.find( 'option' ).each( function () {
+                    $( this ).prop( 'selected', -1 !== _.indexOf( state, String( this.value ) ) );
+                } );
+            } else {
+                input.val( state );
             }
         },
@@ -1017 +1048 @@
             // then we do not need to touch the UI and mess up the user's ongoing editing.
             $inputs.each( function() {
-                var input = $( this ),
-                    property = self._getInputStatePropertyName( this );
-                input.data( 'state' + updateNumber, input.prop( property ) );
+                $( this ).data( 'state' + updateNumber, self._getInputState( this ) );
             } );
 
@@ -1072 +1101 @@
                             var $input = $( this ),
                                 $sanitizedInput = $( $sanitizedInputs[i] ),
-                                property = self._getInputStatePropertyName( this ),
                                 submittedState, sanitizedState, canUpdateState;
 
                             submittedState = $input.data( 'state' + updateNumber );
-                            sanitizedState = $sanitizedInput.prop( property );
+                            sanitizedState = self._getInputState( $sanitizedInput );
                             $input.data( 'sanitized', sanitizedState );
 
-                            canUpdateState = ( submittedState !== sanitizedState && ( args.ignoreActiveElement || ! $input.is( document.activeElement ) )   );
+                            canUpdateState = ( ! _.isEqual( submittedState, sanitizedState ) && ( args.ignoreActiveElement || ! $input.is( document.activeElement ) ) );
                             if ( canUpdateState ) {
-                                $input.prop( property, sanitizedState );
+                                self._setInputState( $input, sanitizedState );
                             }
                         } );