Final SVG painter fixes.
* wp.svgPainter and now moved to wp-admin. * Restore !important background-image handling. * Delay executing the IE9-specific base64 code if we don't need it. * Make painted icons lose their color after hover at the same speed as dashicons (100ms). props azaozz. fixes #26333. Built from https://develop.svn.wordpress.org/trunk@26693 git-svn-id: http://core.svn.wordpress.org/trunk@26583 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Nacin
parent
8b8c8e96e7
commit
0617feaa30
|
|
@ -2,9 +2,12 @@
|
|||
* Attempt to re-color SVG icons used in the admin menu or the toolbar
|
||||
*
|
||||
*/
|
||||
var svgPainter = ( function( $, window, document, undefined ) {
|
||||
|
||||
window.wp = window.wp || {};
|
||||
|
||||
wp.svgPainter = ( function( $, window, document, undefined ) {
|
||||
'use strict';
|
||||
var selector, base64,
|
||||
var selector, base64, painter,
|
||||
colorscheme = {},
|
||||
elements = [];
|
||||
|
||||
|
|
@ -12,7 +15,7 @@ var svgPainter = ( function( $, window, document, undefined ) {
|
|||
// detection for browser SVG capability
|
||||
if ( document.implementation.hasFeature( 'http://www.w3.org/TR/SVG11/feature#Image', '1.1' ) ) {
|
||||
$( document.body ).removeClass( 'no-svg' ).addClass( 'svg' );
|
||||
svgPainter.init();
|
||||
wp.svgPainter.init();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -35,12 +38,14 @@ var svgPainter = ( function( $, window, document, undefined ) {
|
|||
r256 = [256],
|
||||
i = 0;
|
||||
|
||||
while( i < 256 ) {
|
||||
c = String.fromCharCode(i);
|
||||
a256 += c;
|
||||
r256[i] = i;
|
||||
r64[i] = b64.indexOf(c);
|
||||
++i;
|
||||
function init() {
|
||||
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 ) {
|
||||
|
|
@ -77,6 +82,10 @@ var svgPainter = ( function( $, window, document, undefined ) {
|
|||
}
|
||||
|
||||
function btoa( plain ) {
|
||||
if ( ! c ) {
|
||||
init();
|
||||
}
|
||||
|
||||
plain = code( plain, false, r256, b64, 8, 6 );
|
||||
return plain + '===='.slice( ( plain.length % 4 ) || 4 );
|
||||
}
|
||||
|
|
@ -84,6 +93,10 @@ var svgPainter = ( function( $, window, document, undefined ) {
|
|||
function atob( coded ) {
|
||||
var i;
|
||||
|
||||
if ( ! c ) {
|
||||
init();
|
||||
}
|
||||
|
||||
coded = coded.replace( /[^A-Za-z0-9\+\/\=]/g, '' );
|
||||
coded = String(coded).split('=');
|
||||
i = coded.length;
|
||||
|
|
@ -105,6 +118,7 @@ var svgPainter = ( function( $, window, document, undefined ) {
|
|||
|
||||
return {
|
||||
init: function() {
|
||||
painter = this;
|
||||
selector = $( '#adminmenu .wp-menu-image, #wpadminbar .ab-item' );
|
||||
|
||||
this.setColors();
|
||||
|
|
@ -139,15 +153,22 @@ var svgPainter = ( function( $, window, document, undefined ) {
|
|||
|
||||
if ( $menuitem.hasClass( 'current' ) || $menuitem.hasClass( 'wp-has-current-submenu' ) ) {
|
||||
// paint icon in 'current' color
|
||||
svgPainter.paintElement( $element, 'current' );
|
||||
painter.paintElement( $element, 'current' );
|
||||
} else {
|
||||
// paint icon in base color
|
||||
svgPainter.paintElement( $element, 'base' );
|
||||
painter.paintElement( $element, 'base' );
|
||||
|
||||
// set hover callbacks
|
||||
$menuitem.hover(
|
||||
function() { svgPainter.paintElement( $element, 'focus' ); },
|
||||
function() { svgPainter.paintElement( $element, 'base' ); }
|
||||
function() {
|
||||
painter.paintElement( $element, 'focus' );
|
||||
},
|
||||
function() {
|
||||
// Match the delay from hoverIntent
|
||||
window.setTimeout( function() {
|
||||
painter.paintElement( $element, 'base' );
|
||||
}, 100 );
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
@ -169,38 +190,50 @@ var svgPainter = ( function( $, window, document, undefined ) {
|
|||
|
||||
xml = $element.data( 'wp-ui-svg-' + color );
|
||||
|
||||
if ( xml === 'none' ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( ! xml ) {
|
||||
encoded = $element.css( 'background-image' ).match( /.+data:image\/svg\+xml;base64,(.+?)['"]? ?\)/ );
|
||||
encoded = $element.css( 'background-image' ).match( /.+data:image\/svg\+xml;base64,([A-Za-z0-9\+\/\=]+)/ );
|
||||
|
||||
if ( ! encoded || ! encoded[1] ) {
|
||||
$element.data( 'wp-ui-svg-' + color, 'none' );
|
||||
return;
|
||||
}
|
||||
|
||||
if ( 'atob' in window ) {
|
||||
xml = window.atob( encoded[1] );
|
||||
try {
|
||||
if ( 'atob' in window ) {
|
||||
xml = window.atob( encoded[1] );
|
||||
} else {
|
||||
xml = base64.atob( encoded[1] );
|
||||
}
|
||||
} catch ( error ) {}
|
||||
|
||||
if ( xml ) {
|
||||
// replace `fill` attributes
|
||||
xml = xml.replace( /fill="(.+?)"/g, 'fill="' + color + '"');
|
||||
|
||||
// replace `style` attributes
|
||||
xml = xml.replace( /style="(.+?)"/g, 'style="fill:' + color + '"');
|
||||
|
||||
// replace `fill` properties in `<style>` tags
|
||||
xml = xml.replace( /fill:.*?;/g, 'fill: ' + color + ';');
|
||||
|
||||
if ( 'btoa' in window ) {
|
||||
xml = window.btoa( xml );
|
||||
} else {
|
||||
xml = base64.btoa( xml );
|
||||
}
|
||||
|
||||
$element.data( 'wp-ui-svg-' + color, xml );
|
||||
} else {
|
||||
xml = base64.atob( encoded[1] );
|
||||
$element.data( 'wp-ui-svg-' + color, 'none' );
|
||||
return;
|
||||
}
|
||||
|
||||
// replace `fill` attributes
|
||||
xml = xml.replace( /fill="(.+?)"/g, 'fill="' + color + '"');
|
||||
|
||||
// replace `style` attributes
|
||||
xml = xml.replace( /style="(.+?)"/g, 'style="fill:' + color + '"');
|
||||
|
||||
// replace `fill` properties in `<style>` tags
|
||||
xml = xml.replace( /fill:.*?;/g, 'fill: ' + color + ';');
|
||||
|
||||
if ( 'btoa' in window ) {
|
||||
xml = window.btoa( xml );
|
||||
} else {
|
||||
xml = base64.btoa( xml );
|
||||
}
|
||||
|
||||
$element.data( 'wp-ui-svg-' + color, xml );
|
||||
}
|
||||
|
||||
$element.css( 'background-image', 'url("data:image/svg+xml;base64,' + xml + '")' );
|
||||
$element.attr( 'style', 'background-image: url("data:image/svg+xml;base64,' + xml + '") !important;' );
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
window.wp=window.wp||{},wp.svgPainter=function(a,b,c){"use strict";var d,e,f,g={},h=[];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"),wp.svgPainter.init())}),e=function(){function a(){for(;256>j;)e=String.fromCharCode(j),g+=e,i[j]=j,h[j]=f.indexOf(e),++j}function b(a,b,c,d,f,g){var h,i,j=0,k=0,l="",m=0;for(a=String(a),i=a.length;i>k;){for(e=a.charCodeAt(k),e=256>e?c[e]:-1,j=(j<<f)+e,m+=f;m>=g;)m-=g,h=j>>m,l+=d.charAt(h),j^=h<<m;++k}return!b&&m>0&&(l+=d.charAt(j<<g-m)),l}function c(c){return e||a(),c=b(c,!1,i,f,8,6),c+"====".slice(c.length%4||4)}function d(c){var d;e||a(),c=c.replace(/[^A-Za-z0-9\+\/\=]/g,""),c=String(c).split("="),d=c.length;do--d,c[d]=b(c[d],!0,h,g,6,8);while(d>0);return c=c.join("")}var e,f="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",g="",h=[256],i=[256],j=0;return{atob:d,btoa:c}}(),{init:function(){f=this,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&&(g=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")&&h.push(b)})},paint:function(){a.each(h,function(a,c){var d=c.parent().parent();d.hasClass("current")||d.hasClass("wp-has-current-submenu")?f.paintElement(c,"current"):(f.paintElement(c,"base"),d.hover(function(){f.paintElement(c,"focus")},function(){b.setTimeout(function(){f.paintElement(c,"base")},100)}))})},paintElement:function(a,c){var d,f,h;if(c&&g.hasOwnProperty(c)&&(h=g[c],h.match(/^(#[0-9a-f]{3}|#[0-9a-f]{6})$/i)&&(d=a.data("wp-ui-svg-"+h),"none"!==d))){if(!d){if(f=a.css("background-image").match(/.+data:image\/svg\+xml;base64,([A-Za-z0-9\+\/\=]+)/),!f||!f[1])return a.data("wp-ui-svg-"+h,"none"),void 0;try{d="atob"in b?b.atob(f[1]):e.atob(f[1])}catch(i){}if(!d)return a.data("wp-ui-svg-"+h,"none"),void 0;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("wp-ui-svg-"+h,d)}a.attr("style",'background-image: url("data:image/svg+xml;base64,'+d+'") !important;')}}}}(jQuery,window,document);
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
/* global ajaxurl, pwsL10n, svgPainter */
|
||||
/* global ajaxurl, pwsL10n */
|
||||
(function($){
|
||||
|
||||
function check_pass_strength() {
|
||||
|
|
@ -99,14 +99,14 @@
|
|||
$stylesheet.attr( 'href', $this.children( '.css_url' ).val() );
|
||||
|
||||
// repaint icons
|
||||
if ( typeof window.svgPainter !== 'undefined' ) {
|
||||
if ( typeof wp !== 'undefined' && wp.svgPainter ) {
|
||||
try {
|
||||
colors = $.parseJSON( $this.children( '.icon_colors' ).val() );
|
||||
} catch ( error ) {}
|
||||
|
||||
if ( colors ) {
|
||||
svgPainter.setColors( colors );
|
||||
svgPainter.paint();
|
||||
wp.svgPainter.setColors( colors );
|
||||
wp.svgPainter.paint();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,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);
|
||||
!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 wp&&wp.svgPainter){try{b=a.parseJSON(c.children(".icon_colors").val())}catch(g){}b&&(wp.svgPainter.setColors(b),wp.svgPainter.paint())}a.post(ajaxurl,{action:"save-user-color-scheme",color_scheme:c.children('input[name="admin_color"]').val(),nonce:a("#_wpnonce").val()})}})})}(jQuery);
|
||||
|
|
@ -1 +0,0 @@
|
|||
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("wp-ui-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("wp-ui-svg-"+h,d)}a.css("background-image",'url("data:image/svg+xml;base64,'+d+'")')}}}}(jQuery,window,document);
|
||||
|
|
@ -515,7 +515,7 @@ function wp_default_scripts( &$scripts ) {
|
|||
$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 );
|
||||
$scripts->add( 'svg-painter', '/wp-admin/js/svg-painter.js', array( 'jquery' ), false, 1 );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue