130 lines
3.2 KiB
JavaScript
130 lines
3.2 KiB
JavaScript
/**
|
|
* 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, painter,
|
|
colorscheme = {},
|
|
elements = [];
|
|
|
|
$( function() {
|
|
wp.svgPainter.init();
|
|
});
|
|
|
|
return {
|
|
init: function() {
|
|
painter = this;
|
|
selector = $( '#adminmenu .wp-menu-image, #wpadminbar .ab-item' );
|
|
|
|
painter.setColors();
|
|
painter.findElements();
|
|
painter.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.on( 'mouseenter', function() {
|
|
painter.paintElement( $element, 'focus' );
|
|
} ).on( 'mouseleave', 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 {
|
|
xml = window.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 + ';');
|
|
|
|
xml = window.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 );
|