Changeset 26137 for trunk/src/wp-admin/js/user-profile.js

Timestamp:

11/13/2013 07:37:10 PM (12 years ago)

Author:

helen

Message:

Merge the color schemes component from MP6. Introduces Light, Blue, and Midnight.

Color scheme selection on your own profile page gives you a preview and autosaves the selection.

Also introduces the usage of a preprocessor for core files, namely Sass. For 3.8, we will not expand its implementation past the color schemes. This does require Ruby as well as Sass 3.3.0+ due to the usage of the sourcemap option.

Note that only the default color scheme is available when running out of src. Use build to test the rest as well as the color picker.

props ryelle, melchoyce, tillkruess, drw158, littlethingsstudio, helen. see #25858, #22862.

File:

• trunk/src/wp-admin/js/user-profile.js (modified) (1 diff)

trunk/src/wp-admin/js/user-profile.js

@@ -74 +74 @@
             });
         }
+
+        var $colorpicker = $( '#color-picker' ),
+            $stylesheet = $( '#colors-css' ),
+            user_id = $( 'input#user_id' ).val(),
+            current_user_id = $( 'input[name="checkuser_id"]' ).val();
+
+        // dropdown toggle
+        $colorpicker.on( 'click', '.dropdown-current', function() {
+            $colorpicker.toggleClass( 'picker-expanded' );
+        });
+
+        $colorpicker.on( 'click', '.color-option', function() {
+
+            var color_scheme = $( this ).children( 'input[name="admin_color"]' ).val();
+
+            // update selected
+            $( this ).siblings( '.selected' ).removeClass( 'selected' )
+            $( this ).addClass( 'selected' );
+            $( this ).find( 'input' ).prop( 'checked', true );
+
+            // update current
+            $colorpicker.find( '.dropdown-current label' ).html( $( this ).children( 'label' ).html() );
+            $colorpicker.find( '.dropdown-current table' ).html( $( this ).children( 'table' ).html() );
+            $colorpicker.toggleClass( 'picker-expanded' );
+
+            // preview/save color scheme
+            if ( user_id == current_user_id ) {
+
+                // repaint icons
+                $stylesheet.attr( 'href', $( this ).children( '.css_url' ).val() );
+                svgPainter.setColors( $.parseJSON( $( this ).children( '.icon_colors' ).val() ) );
+                svgPainter.paint();
+
+                // update user option
+                $.post( ajaxurl, {
+                    action: 'save-user-color-scheme',
+                    color_scheme: color_scheme,
+                    user_id: user_id
+                });
+
+            }
+
+        });
+
     });