Svg-painter:

- Clean up the JS, better names, etc.
- Convert the base64 encode/decode code from jQuery plugin to local use.
- Add missing icon colors for the default theme.
- Make it more error-proof.
Fixes #26333.
Built from https://develop.svn.wordpress.org/trunk@26601


git-svn-id: http://core.svn.wordpress.org/trunk@26491 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz 2013-12-04 04:13:11 +00:00
parent 469fc3baba
commit e6dd5fbf48
7 changed files with 152 additions and 148 deletions

View File

@ -613,16 +613,16 @@ function admin_color_scheme_picker() {
<?php
}
function set_color_scheme_json() {
function wp_color_scheme_settings() {
global $_wp_admin_css_colors;
$color_scheme = get_user_option( 'admin_color' );
if ( isset( $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) {
echo '<script type="text/javascript">var wp_color_scheme = ' . json_encode( array( 'icons' => $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) . ";</script>\n";
if ( ! empty( $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) {
echo '<script type="text/javascript">var _wpColorScheme = ' . json_encode( array( 'icons' => $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) . ";</script>\n";
}
}
add_action( 'admin_head', 'set_color_scheme_json' );
add_action( 'admin_head', 'wp_color_scheme_settings' );
function _ipad_meta() {
if ( wp_is_mobile() ) {

View File

@ -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

View File

@ -1 +1 @@
!function(a){function b(){var b,c=a("#pass1").val(),d=a("#pass2").val();if(a("#pass-strength-result").removeClass("short bad good strong"),!c)return a("#pass-strength-result").html(pwsL10n.empty),void 0;switch(b=wp.passwordStrength.meter(c,wp.passwordStrength.userInputBlacklist(),d)){case 2:a("#pass-strength-result").addClass("bad").html(pwsL10n.bad);break;case 3:a("#pass-strength-result").addClass("good").html(pwsL10n.good);break;case 4:a("#pass-strength-result").addClass("strong").html(pwsL10n.strong);break;case 5:a("#pass-strength-result").addClass("short").html(pwsL10n.mismatch);break;default:a("#pass-strength-result").addClass("short").html(pwsL10n["short"])}}a(document).ready(function(){var c,d,e,f,g=a("#display_name");a("#pass1").val("").keyup(b),a("#pass2").val("").keyup(b),a("#pass-strength-result").show(),a(".color-palette").click(function(){a(this).siblings('input[name="admin_color"]').prop("checked",!0)}),g.length&&a("#first_name, #last_name, #nickname").bind("blur.user_profile",function(){var b=[],c={display_nickname:a("#nickname").val()||"",display_username:a("#user_login").val()||"",display_firstname:a("#first_name").val()||"",display_lastname:a("#last_name").val()||""};c.display_firstname&&c.display_lastname&&(c.display_firstlast=c.display_firstname+" "+c.display_lastname,c.display_lastfirst=c.display_lastname+" "+c.display_firstname),a.each(a("option",g),function(a,c){b.push(c.value)}),a.each(c,function(d,e){if(e){var f=e.replace(/<\/?[a-z][^>]*>/gi,"");c[d].length&&-1===a.inArray(f,b)&&(b.push(f),a("<option />",{text:f}).appendTo(g))}})}),c=a("#color-picker"),d=a("#colors-css"),e=a("input#user_id").val(),f=a('input[name="checkuser_id"]').val(),c.on("click.colorpicker",".color-option",function(){var b=a(this);b.hasClass("selected")||(b.siblings(".selected").removeClass("selected"),b.addClass("selected").find('input[type="radio"]').prop("checked",!0),e===f&&(d.attr("href",b.children(".css_url").val()),"undefined"!=typeof window.svgPainter&&(svgPainter.setColors(a.parseJSON(b.children(".icon_colors").val())),svgPainter.paint()),a.post(ajaxurl,{action:"save-user-color-scheme",color_scheme:b.children('input[name="admin_color"]').val(),nonce:a("#_wpnonce").val()})))})})}(jQuery);
!function(a){function b(){var b,c=a("#pass1").val(),d=a("#pass2").val();if(a("#pass-strength-result").removeClass("short bad good strong"),!c)return a("#pass-strength-result").html(pwsL10n.empty),void 0;switch(b=wp.passwordStrength.meter(c,wp.passwordStrength.userInputBlacklist(),d)){case 2:a("#pass-strength-result").addClass("bad").html(pwsL10n.bad);break;case 3:a("#pass-strength-result").addClass("good").html(pwsL10n.good);break;case 4:a("#pass-strength-result").addClass("strong").html(pwsL10n.strong);break;case 5:a("#pass-strength-result").addClass("short").html(pwsL10n.mismatch);break;default:a("#pass-strength-result").addClass("short").html(pwsL10n["short"])}}a(document).ready(function(){var c,d,e,f,g=a("#display_name");a("#pass1").val("").keyup(b),a("#pass2").val("").keyup(b),a("#pass-strength-result").show(),a(".color-palette").click(function(){a(this).siblings('input[name="admin_color"]').prop("checked",!0)}),g.length&&a("#first_name, #last_name, #nickname").bind("blur.user_profile",function(){var b=[],c={display_nickname:a("#nickname").val()||"",display_username:a("#user_login").val()||"",display_firstname:a("#first_name").val()||"",display_lastname:a("#last_name").val()||""};c.display_firstname&&c.display_lastname&&(c.display_firstlast=c.display_firstname+" "+c.display_lastname,c.display_lastfirst=c.display_lastname+" "+c.display_firstname),a.each(a("option",g),function(a,c){b.push(c.value)}),a.each(c,function(d,e){if(e){var f=e.replace(/<\/?[a-z][^>]*>/gi,"");c[d].length&&-1===a.inArray(f,b)&&(b.push(f),a("<option />",{text:f}).appendTo(g))}})}),c=a("#color-picker"),d=a("#colors-css"),e=a("input#user_id").val(),f=a('input[name="checkuser_id"]').val(),c.on("click.colorpicker",".color-option",function(){var b,c=a(this);if(!c.hasClass("selected")&&(c.siblings(".selected").removeClass("selected"),c.addClass("selected").find('input[type="radio"]').prop("checked",!0),e===f)){if(d.attr("href",c.children(".css_url").val()),"undefined"!=typeof window.svgPainter){try{b=a.parseJSON(c.children(".icon_colors").val())}catch(g){}b&&(svgPainter.setColors(b),svgPainter.paint())}a.post(ajaxurl,{action:"save-user-color-scheme",color_scheme:c.children('input[name="admin_color"]').val(),nonce:a("#_wpnonce").val()})}})})}(jQuery);

View File

@ -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

View File

@ -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 `<style>` tags
xml = xml.replace( /fill:.*?;/g, 'fill: ' + color + ';');
try {
if ( 'btoa' in window ) {
xml = window.btoa( xml );
} catch ( e ) {
xml = $.base64.btoa( xml );
} else {
xml = base64.btoa( xml );
}
$element.data( 'mp6-svg-' + color, xml );
}
$element.attr( 'style', 'background-image: url("data:image/svg+xml;base64,' + xml + '") !important;' );
}
};
})( jQuery, window, document );
/*!
* Customized for MP6
*
* Based on jquery.base64.js 0.0.3 - https://github.com/yckart/jquery.base64.js
*
* Based upon: 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
**/
;(function($) {
var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/',
a256 = '',
r64 = [256],
r256 = [256],
i = 0,
c, Plugin;
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) {
s = String(s);
var buffer = 0,
i = 0,
length = s.length,
result = '',
bitsInBuffer = 0,
tmp;
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;
}
Plugin = $.base64 = function(dir, input, encode) {
return input ? Plugin[dir](input, encode) : dir ? null : this;
};
$.base64.btoa = function(plain) {
plain = code(plain, false, r256, b64, 8, 6);
return plain + '===='.slice((plain.length % 4) || 4);
};
$.base64.atob = function(coded) {
coded = coded.replace(/[^A-Za-z0-9\+\/\=]/g, '');
coded = String(coded).split('=');
var i = coded.length;
do {--i;
coded[i] = code(coded[i], true, r64, a256, 6, 8);
} while (i > 0);
coded = coded.join('');
return coded;
};
}(jQuery));

View File

@ -1 +1 @@
var svgPainter=function(a,b,c){"use strict";return a(c).ready(function(){c.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")&&(c.body.className=c.body.className.replace("no-svg","svg")),svgPainter.init()}),{elements:[],init:function(){this.selector=a("#adminmenu .wp-menu-image, #wpadminbar .ab-item"),this.setColors(),this.findElements(),this.paint()},setColors:function(a){"undefined"==typeof a&&"undefined"!=typeof wp_color_scheme&&(a=wp_color_scheme),this.colorscheme=a},findElements:function(){this.selector.each(function(){var b=a(this).css("background-image");-1!=b.indexOf("data:image/svg+xml;base64")&&svgPainter.elements.push(a(this))})},paint:function(){a.each(this.elements,function(a,b){var c=b.parent().parent();c.hasClass("current")||c.hasClass("wp-has-current-submenu")?svgPainter.paintElement(b,svgPainter.colorscheme.icons.current):(svgPainter.paintElement(b,svgPainter.colorscheme.icons.base),c.hover(function(){svgPainter.paintElement(b,svgPainter.colorscheme.icons.focus)},function(){svgPainter.paintElement(b,svgPainter.colorscheme.icons.base)}))})},paintElement:function(c,d){if(d.match(/^(#[0-9a-f]{3}|#[0-9a-f]{6})$/i)){var e,f=c.data("mp6-svg-"+d);if(!f){if(e=c.css("background-image").match(/.+data:image\/svg\+xml;base64,(.+)\)/),!e)return;try{f=b.atob(e[1])}catch(g){f=a.base64.atob(e[1])}f=f.replace(/fill="(.+?)"/g,'fill="'+d+'"'),f=f.replace(/style="(.+?)"/g,'style="fill:'+d+'"'),f=f.replace(/fill:.*?;/g,"fill: "+d+";");try{f=b.btoa(f)}catch(g){f=a.base64.btoa(f)}c.data("mp6-svg-"+d,f)}c.attr("style",'background-image: url("data:image/svg+xml;base64,'+f+'") !important;')}}}}(jQuery,window,document);!function(a){function b(a,b,d,e,f,g){a=String(a);for(var h,i=0,j=0,k=a.length,l="",m=0;k>j;){for(c=a.charCodeAt(j),c=256>c?d[c]:-1,i=(i<<f)+c,m+=f;m>=g;)m-=g,h=i>>m,l+=e.charAt(h),i^=h<<m;++j}return!b&&m>0&&(l+=e.charAt(i<<g-m)),l}for(var c,d,e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",f="",g=[256],h=[256],i=0;256>i;)c=String.fromCharCode(i),f+=c,h[i]=i,g[i]=e.indexOf(c),++i;d=a.base64=function(a,b,c){return b?d[a](b,c):a?null:this},a.base64.btoa=function(a){return a=b(a,!1,h,e,8,6),a+"====".slice(a.length%4||4)},a.base64.atob=function(a){a=a.replace(/[^A-Za-z0-9\+\/\=]/g,""),a=String(a).split("=");var c=a.length;do--c,a[c]=b(a[c],!0,g,f,6,8);while(c>0);return a=a.join("")}}(jQuery);
var svgPainter=function(a,b,c){"use strict";var d,e,f={},g=[];return a(c).ready(function(){c.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")&&(a(c.body).removeClass("no-svg").addClass("svg"),svgPainter.init())}),e=function(){function a(a,b,c,e,f,g){var h,i,j=0,k=0,l="",m=0;for(a=String(a),i=a.length;i>k;){for(d=a.charCodeAt(k),d=256>d?c[d]:-1,j=(j<<f)+d,m+=f;m>=g;)m-=g,h=j>>m,l+=e.charAt(h),j^=h<<m;++k}return!b&&m>0&&(l+=e.charAt(j<<g-m)),l}function b(b){return b=a(b,!1,h,e,8,6),b+"====".slice(b.length%4||4)}function c(b){var c;b=b.replace(/[^A-Za-z0-9\+\/\=]/g,""),b=String(b).split("="),c=b.length;do--c,b[c]=a(b[c],!0,g,f,6,8);while(c>0);return b=b.join("")}for(var d,e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",f="",g=[256],h=[256],i=0;256>i;)d=String.fromCharCode(i),f+=d,h[i]=i,g[i]=e.indexOf(d),++i;return{atob:c,btoa:b}}(),{init:function(){d=a("#adminmenu .wp-menu-image, #wpadminbar .ab-item"),this.setColors(),this.findElements(),this.paint()},setColors:function(a){"undefined"==typeof a&&"undefined"!=typeof b._wpColorScheme&&(a=b._wpColorScheme),a&&a.icons&&a.icons.base&&a.icons.current&&a.icons.focus&&(f=a.icons)},findElements:function(){d.each(function(){var b=a(this),c=b.css("background-image");c&&-1!=c.indexOf("data:image/svg+xml;base64")&&g.push(b)})},paint:function(){a.each(g,function(a,b){var c=b.parent().parent();c.hasClass("current")||c.hasClass("wp-has-current-submenu")?svgPainter.paintElement(b,"current"):(svgPainter.paintElement(b,"base"),c.hover(function(){svgPainter.paintElement(b,"focus")},function(){svgPainter.paintElement(b,"base")}))})},paintElement:function(a,c){var d,g,h;if(c&&f.hasOwnProperty(c)&&(h=f[c],h.match(/^(#[0-9a-f]{3}|#[0-9a-f]{6})$/i))){if(d=a.data("mp6-svg-"+h),!d){if(g=a.css("background-image").match(/.+data:image\/svg\+xml;base64,(.+?)['"] ?\)/),!g||!g[1])return;d="atob"in b?b.atob(g[1]):e.atob(g[1]),d=d.replace(/fill="(.+?)"/g,'fill="'+h+'"'),d=d.replace(/style="(.+?)"/g,'style="fill:'+h+'"'),d=d.replace(/fill:.*?;/g,"fill: "+h+";"),d="btoa"in b?b.btoa(d):e.btoa(d),a.data("mp6-svg-"+h,d)}a.attr("style",'background-image: url("data:image/svg+xml;base64,'+d+'") !important;')}}}}(jQuery,window,document);

View File

@ -392,8 +392,6 @@ function wp_default_scripts( &$scripts ) {
$scripts->add( 'media-editor', "/wp-includes/js/media-editor$suffix.js", array( 'shortcode', 'media-views' ), false, 1 );
$scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'media-models' ), false, 1 );
$scripts->add( 'svg-painter', '/wp-includes/js/svg-painter.js' );
if ( is_admin() ) {
$scripts->add( 'admin-tags', "/wp-admin/js/tags$suffix.js", array('jquery', 'wp-ajax-response'), false, 1 );
did_action( 'init' ) && $scripts->localize( 'admin-tags', 'tagsl10n', array(
@ -516,6 +514,8 @@ function wp_default_scripts( &$scripts ) {
$scripts->add( 'custom-header', "/wp-admin/js/custom-header.js", array( 'jquery-masonry' ), false, 1 );
$scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array( 'wp-color-picker', 'media-views' ), false, 1 );
$scripts->add( 'media-gallery', "/wp-admin/js/media-gallery$suffix.js", array('jquery'), false, 1 );
$scripts->add( 'svg-painter', '/wp-includes/js/svg-painter.js', array( 'jquery' ), false, 1 );
}
}