2 * Attempt to re-color SVG icons used in the admin menu or the toolbar
6 window.wp = window.wp || {};
8 wp.svgPainter = ( function( $, window, document, undefined ) {
10 var selector, base64, painter,
14 $(document).ready( function() {
15 // detection for browser SVG capability
16 if ( document.implementation.hasFeature( 'http://www.w3.org/TR/SVG11/feature#Image', '1.1' ) ) {
17 $( document.body ).removeClass( 'no-svg' ).addClass( 'svg' );
25 * Based on jquery.base64.js 0.0.3 - https://github.com/yckart/jquery.base64.js
27 * Based on: https://gist.github.com/Yaffle/1284012
29 * Copyright (c) 2012 Yannick Albert (http://yckart.com)
30 * Licensed under the MIT license
31 * http://www.opensource.org/licenses/mit-license.php
33 base64 = ( function() {
35 b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/',
43 c = String.fromCharCode(i);
46 r64[i] = b64.indexOf(c);
51 function code( s, discard, alpha, beta, w1, w2 ) {
63 c = c < 256 ? alpha[c] : -1;
65 buffer = ( buffer << w1 ) + c;
68 while( bitsInBuffer >= w2 ) {
70 tmp = buffer >> bitsInBuffer;
71 result += beta.charAt(tmp);
72 buffer ^= tmp << bitsInBuffer;
77 if ( ! discard && bitsInBuffer > 0 ) {
78 result += beta.charAt( buffer << ( w2 - bitsInBuffer ) );
84 function btoa( plain ) {
89 plain = code( plain, false, r256, b64, 8, 6 );
90 return plain + '===='.slice( ( plain.length % 4 ) || 4 );
93 function atob( coded ) {
100 coded = coded.replace( /[^A-Za-z0-9\+\/\=]/g, '' );
101 coded = String(coded).split('=');
106 coded[i] = code( coded[i], true, r64, a256, 6, 8 );
109 coded = coded.join('');
122 selector = $( '#adminmenu .wp-menu-image, #wpadminbar .ab-item' );
129 setColors: function( colors ) {
130 if ( typeof colors === 'undefined' && typeof window._wpColorScheme !== 'undefined' ) {
131 colors = window._wpColorScheme;
134 if ( colors && colors.icons && colors.icons.base && colors.icons.current && colors.icons.focus ) {
135 colorscheme = colors.icons;
139 findElements: function() {
140 selector.each( function() {
141 var $this = $(this), bgImage = $this.css( 'background-image' );
143 if ( bgImage && bgImage.indexOf( 'data:image/svg+xml;base64' ) != -1 ) {
144 elements.push( $this );
150 // loop through all elements
151 $.each( elements, function( index, $element ) {
152 var $menuitem = $element.parent().parent();
154 if ( $menuitem.hasClass( 'current' ) || $menuitem.hasClass( 'wp-has-current-submenu' ) ) {
155 // paint icon in 'current' color
156 painter.paintElement( $element, 'current' );
158 // paint icon in base color
159 painter.paintElement( $element, 'base' );
161 // set hover callbacks
164 painter.paintElement( $element, 'focus' );
167 // Match the delay from hoverIntent
168 window.setTimeout( function() {
169 painter.paintElement( $element, 'base' );
177 paintElement: function( $element, colorType ) {
178 var xml, encoded, color;
180 if ( ! colorType || ! colorscheme.hasOwnProperty( colorType ) ) {
184 color = colorscheme[ colorType ];
186 // only accept hex colors: #101 or #101010
187 if ( ! color.match( /^(#[0-9a-f]{3}|#[0-9a-f]{6})$/i ) ) {
191 xml = $element.data( 'wp-ui-svg-' + color );
193 if ( xml === 'none' ) {
198 encoded = $element.css( 'background-image' ).match( /.+data:image\/svg\+xml;base64,([A-Za-z0-9\+\/\=]+)/ );
200 if ( ! encoded || ! encoded[1] ) {
201 $element.data( 'wp-ui-svg-' + color, 'none' );
206 if ( 'atob' in window ) {
207 xml = window.atob( encoded[1] );
209 xml = base64.atob( encoded[1] );
214 // replace `fill` attributes
215 xml = xml.replace( /fill="(.+?)"/g, 'fill="' + color + '"');
217 // replace `style` attributes
218 xml = xml.replace( /style="(.+?)"/g, 'style="fill:' + color + '"');
220 // replace `fill` properties in `<style>` tags
221 xml = xml.replace( /fill:.*?;/g, 'fill: ' + color + ';');
223 if ( 'btoa' in window ) {
224 xml = window.btoa( xml );
226 xml = base64.btoa( xml );
229 $element.data( 'wp-ui-svg-' + color, xml );
231 $element.data( 'wp-ui-svg-' + color, 'none' );
236 $element.attr( 'style', 'background-image: url("data:image/svg+xml;base64,' + xml + '") !important;' );
240 })( jQuery, window, document );