diff --git a/src/wp-admin/includes/misc.php b/src/wp-admin/includes/misc.php index 641e2d4488..6f0ad5e40c 100644 --- a/src/wp-admin/includes/misc.php +++ b/src/wp-admin/includes/misc.php @@ -613,16 +613,16 @@ function admin_color_scheme_picker() { icon_colors ) ) { - echo '\n"; + if ( ! empty( $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) { + echo '\n"; } } -add_action( 'admin_head', 'set_color_scheme_json' ); +add_action( 'admin_head', 'wp_color_scheme_settings' ); function _ipad_meta() { if ( wp_is_mobile() ) { diff --git a/src/wp-admin/js/user-profile.js b/src/wp-admin/js/user-profile.js index 0f1dbee38b..93574e2012 100644 --- a/src/wp-admin/js/user-profile.js +++ b/src/wp-admin/js/user-profile.js @@ -83,7 +83,8 @@ current_user_id = $( 'input[name="checkuser_id"]' ).val(); $colorpicker.on( 'click.colorpicker', '.color-option', function() { - var $this = $(this); + var colors, + $this = $(this); if ( $this.hasClass( 'selected' ) ) { return; @@ -99,8 +100,14 @@ // repaint icons if ( typeof window.svgPainter !== 'undefined' ) { - svgPainter.setColors( $.parseJSON( $this.children( '.icon_colors' ).val() ) ); - svgPainter.paint(); + try { + colors = $.parseJSON( $this.children( '.icon_colors' ).val() ); + } catch ( error ) {} + + if ( colors ) { + svgPainter.setColors( colors ); + svgPainter.paint(); + } } // update user option diff --git a/src/wp-includes/general-template.php b/src/wp-includes/general-template.php index dfb147af09..028b949acd 100644 --- a/src/wp-includes/general-template.php +++ b/src/wp-includes/general-template.php @@ -2117,7 +2117,8 @@ function wp_admin_css_color( $key, $name, $url, $colors = array(), $icons = arra function register_admin_color_schemes() { wp_admin_css_color( 'fresh', _x( 'Default', 'admin color scheme' ), admin_url( 'css/colors.min.css' ), - array( '#222', '#333', '#0074a2', '#2ea2cc' ) + array( '#222', '#333', '#0074a2', '#2ea2cc' ), + array( 'base' => '#999', 'focus' => '#2ea2cc', 'current' => '#fff' ) ); // Other color schemes are not available when running out of src diff --git a/src/wp-includes/js/svg-painter.js b/src/wp-includes/js/svg-painter.js index c1ec8721ce..8e1ffbd48e 100644 --- a/src/wp-includes/js/svg-painter.js +++ b/src/wp-includes/js/svg-painter.js @@ -1,106 +1,182 @@ /* global wp_color_scheme:true */ var svgPainter = ( function( $, window, document, undefined ) { - 'use strict'; + var selector, base64, + colorscheme = {}, + elements = []; $(document).ready( function() { - // detection for browser SVG capability if ( document.implementation.hasFeature( 'http://www.w3.org/TR/SVG11/feature#Image', '1.1' ) ) { - document.body.className = document.body.className.replace( 'no-svg', 'svg' ); + $( document.body ).removeClass( 'no-svg' ).addClass( 'svg' ); + svgPainter.init(); } - - svgPainter.init(); - }); + /** + * Needed only for IE9 + * + * Based on jquery.base64.js 0.0.3 - https://github.com/yckart/jquery.base64.js + * + * Based on: https://gist.github.com/Yaffle/1284012 + * + * Copyright (c) 2012 Yannick Albert (http://yckart.com) + * Licensed under the MIT license + * http://www.opensource.org/licenses/mit-license.php + */ + base64 = ( function() { + var c, + b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/', + a256 = '', + r64 = [256], + r256 = [256], + i = 0; + + while( i < 256 ) { + c = String.fromCharCode(i); + a256 += c; + r256[i] = i; + r64[i] = b64.indexOf(c); + ++i; + } + + function code( s, discard, alpha, beta, w1, w2 ) { + var tmp, length, + buffer = 0, + i = 0, + result = '', + bitsInBuffer = 0; + + s = String(s); + length = s.length; + + while( i < length ) { + c = s.charCodeAt(i); + c = c < 256 ? alpha[c] : -1; + + buffer = ( buffer << w1 ) + c; + bitsInBuffer += w1; + + while( bitsInBuffer >= w2 ) { + bitsInBuffer -= w2; + tmp = buffer >> bitsInBuffer; + result += beta.charAt(tmp); + buffer ^= tmp << bitsInBuffer; + } + ++i; + } + + if ( ! discard && bitsInBuffer > 0 ) { + result += beta.charAt( buffer << ( w2 - bitsInBuffer ) ); + } + + return result; + } + + function btoa( plain ) { + plain = code( plain, false, r256, b64, 8, 6 ); + return plain + '===='.slice( ( plain.length % 4 ) || 4 ); + } + + function atob( coded ) { + var i; + + coded = coded.replace( /[^A-Za-z0-9\+\/\=]/g, '' ); + coded = String(coded).split('='); + i = coded.length; + + do { + --i; + coded[i] = code( coded[i], true, r64, a256, 6, 8 ); + } while ( i > 0 ); + + coded = coded.join(''); + return coded; + } + + return { + atob: atob, + btoa: btoa + }; + })(); + return { - - elements : [], - - init : function() { - - this.selector = $( '#adminmenu .wp-menu-image, #wpadminbar .ab-item' ); + init: function() { + selector = $( '#adminmenu .wp-menu-image, #wpadminbar .ab-item' ); this.setColors(); this.findElements(); this.paint(); - }, - setColors : function( colors ) { - - if ( typeof colors === 'undefined' && typeof wp_color_scheme !== 'undefined' ) { - colors = wp_color_scheme; + setColors: function( colors ) { + if ( typeof colors === 'undefined' && typeof window._wpColorScheme !== 'undefined' ) { + colors = window._wpColorScheme; } - this.colorscheme = colors; - + if ( colors && colors.icons && colors.icons.base && colors.icons.current && colors.icons.focus ) { + colorscheme = colors.icons; + } }, - findElements : function() { + findElements: function() { + selector.each( function() { + var $this = $(this), bgImage = $this.css( 'background-image' ); - this.selector.each(function() { - - var bgimg = $(this).css( 'background-image' ); - - if ( bgimg.indexOf( 'data:image/svg+xml;base64' ) != -1 ) { - svgPainter.elements.push( $(this) ); + if ( bgImage && bgImage.indexOf( 'data:image/svg+xml;base64' ) != -1 ) { + elements.push( $this ); } - }); - }, - paint : function() { - + paint: function() { // loop through all elements - $.each( this.elements, function( index, $element ) { - + $.each( elements, function( index, $element ) { var $menuitem = $element.parent().parent(); if ( $menuitem.hasClass( 'current' ) || $menuitem.hasClass( 'wp-has-current-submenu' ) ) { - // paint icon in 'current' color - svgPainter.paintElement( $element, svgPainter.colorscheme.icons.current ); - + svgPainter.paintElement( $element, 'current' ); } else { - // paint icon in base color - svgPainter.paintElement( $element, svgPainter.colorscheme.icons.base ); + svgPainter.paintElement( $element, 'base' ); // set hover callbacks $menuitem.hover( - function() { svgPainter.paintElement( $element, svgPainter.colorscheme.icons.focus ); }, - function() { svgPainter.paintElement( $element, svgPainter.colorscheme.icons.base ); } + function() { svgPainter.paintElement( $element, 'focus' ); }, + function() { svgPainter.paintElement( $element, 'base' ); } ); - } - }); - }, - paintElement : function( $element, color ) { + paintElement: function( $element, colorType ) { + var xml, encoded, color; + + if ( ! colorType || ! colorscheme.hasOwnProperty( colorType ) ) { + return; + } + + color = colorscheme[ colorType ]; // only accept hex colors: #101 or #101010 - if ( ! color.match( /^(#[0-9a-f]{3}|#[0-9a-f]{6})$/i ) ) + if ( ! color.match( /^(#[0-9a-f]{3}|#[0-9a-f]{6})$/i ) ) { return; + } - var xml = $element.data( 'mp6-svg-' + color ), - base64; + xml = $element.data( 'mp6-svg-' + color ); if ( ! xml ) { + encoded = $element.css( 'background-image' ).match( /.+data:image\/svg\+xml;base64,(.+?)['"] ?\)/ ); - base64 = $element.css( 'background-image' ).match( /.+data:image\/svg\+xml;base64,(.+)\)/ ); - - if ( ! base64 ) + if ( ! encoded || ! encoded[1] ) { return; + } - try { - xml = window.atob( base64[1] ); - } catch ( e ) { - xml = $.base64.atob( base64[1] ); + if ( 'atob' in window ) { + xml = window.atob( encoded[1] ); + } else { + xml = base64.atob( encoded[1] ); } // replace `fill` attributes @@ -112,97 +188,17 @@ var svgPainter = ( function( $, window, document, undefined ) { // replace `fill` properties in `