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

wp-admin/js/svg-painter.js

@@ -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;' );
 		}
 	};
 

wp-admin/js/svg-painter.min.js

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

wp-admin/js/user-profile.js

@@ -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();
 					}
 				}
 

wp-admin/js/user-profile.min.js

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

wp-includes/js/svg-painter.min.js

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

wp-includes/script-loader.php

@@ -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 );
 	}
 }