You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
241 lines
5.4 KiB
241 lines
5.4 KiB
/** |
|
* Attempt to re-color SVG icons used in the admin menu or the toolbar |
|
* |
|
* @output wp-admin/js/svg-painter.js |
|
*/ |
|
|
|
window.wp = window.wp || {}; |
|
|
|
wp.svgPainter = ( function( $, window, document, undefined ) { |
|
'use strict'; |
|
var selector, base64, painter, |
|
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 ).removeClass( 'no-svg' ).addClass( 'svg' ); |
|
wp.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; |
|
|
|
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 ) { |
|
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 ) { |
|
if ( ! c ) { |
|
init(); |
|
} |
|
|
|
plain = code( plain, false, r256, b64, 8, 6 ); |
|
return plain + '===='.slice( ( plain.length % 4 ) || 4 ); |
|
} |
|
|
|
function atob( coded ) { |
|
var i; |
|
|
|
if ( ! c ) { |
|
init(); |
|
} |
|
|
|
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 { |
|
init: function() { |
|
painter = this; |
|
selector = $( '#adminmenu .wp-menu-image, #wpadminbar .ab-item' ); |
|
|
|
this.setColors(); |
|
this.findElements(); |
|
this.paint(); |
|
}, |
|
|
|
setColors: function( colors ) { |
|
if ( typeof colors === 'undefined' && typeof window._wpColorScheme !== 'undefined' ) { |
|
colors = window._wpColorScheme; |
|
} |
|
|
|
if ( colors && colors.icons && colors.icons.base && colors.icons.current && colors.icons.focus ) { |
|
colorscheme = colors.icons; |
|
} |
|
}, |
|
|
|
findElements: function() { |
|
selector.each( function() { |
|
var $this = $(this), bgImage = $this.css( 'background-image' ); |
|
|
|
if ( bgImage && bgImage.indexOf( 'data:image/svg+xml;base64' ) != -1 ) { |
|
elements.push( $this ); |
|
} |
|
}); |
|
}, |
|
|
|
paint: function() { |
|
// loop through all elements |
|
$.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 |
|
painter.paintElement( $element, 'current' ); |
|
} else { |
|
// paint icon in base color |
|
painter.paintElement( $element, 'base' ); |
|
|
|
// set hover callbacks |
|
$menuitem.hover( |
|
function() { |
|
painter.paintElement( $element, 'focus' ); |
|
}, |
|
function() { |
|
// Match the delay from hoverIntent |
|
window.setTimeout( function() { |
|
painter.paintElement( $element, 'base' ); |
|
}, 100 ); |
|
} |
|
); |
|
} |
|
}); |
|
}, |
|
|
|
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 ) ) { |
|
return; |
|
} |
|
|
|
xml = $element.data( 'wp-ui-svg-' + color ); |
|
|
|
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 + '"'); |
|
|
|
// 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 { |
|
$element.data( 'wp-ui-svg-' + color, 'none' ); |
|
return; |
|
} |
|
} |
|
|
|
$element.attr( 'style', 'background-image: url("data:image/svg+xml;base64,' + xml + '") !important;' ); |
|
} |
|
}; |
|
|
|
})( jQuery, window, document );
|
|
|