sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Final SVG painter fixes.

Browse Source 
* 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@26693 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Nacin 2013-12-05 22:00:17 +00:00
parent 74d3e9103e
commit aa65527319
3 changed files with 73 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/wp-includes/js/svg-painter.js → src/wp-admin/js/svg-painter.js
View File

@ -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,6 +38,7 @@ var svgPainter = ( function( $, window, document, undefined ) {
r256 = [256],
i = 0;
function init() {
while( i < 256 ) {
c = String.fromCharCode(i);
a256 += c;
@ -42,6 +46,7 @@ var svgPainter = ( function( $, window, document, undefined ) {
r64[i] = b64.indexOf(c);
++i;
}
}
function code( s, discard, alpha, beta, w1, w2 ) {
var tmp, length,
@ -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,19 +190,27 @@ var svgPainter = ( function( $, window, document, undefined ) {
xml = $element.data( 'wp-ui-svg-' + color );
if ( ! xml ) {
encoded = $element.css( 'background-image' ).match( /.+data:image\/svg\+xml;base64,(.+?)['"]? ?\)/ );
if ( ! encoded || ! encoded[1] ) {
if ( xml === 'none' ) {
return;
}
if ( ! xml ) {
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;
}
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 + '"');
@ -198,9 +227,13 @@ var svgPainter = ( function( $, window, document, undefined ) {
}
$element.data( 'wp-ui-svg-' + color, xml );
} else {
$element.data( 'wp-ui-svg-' + color, 'none' );
return;
}
}
$element.css( 'background-image', 'url("data:image/svg+xml;base64,' + xml + '")' );
$element.attr( 'style', 'background-image: url("data:image/svg+xml;base64,' + xml + '") !important;' );
}
};

8
src/wp-admin/js/user-profile.js
View File

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

2
src/wp-includes/script-loader.php
View File

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