mirror of
https://github.com/WordPress/WordPress.git
synced 2024-10-30 15:31:04 +01:00
35b7340af9
About half of the file's code was a back-compat polyfill of base64 functions for IE9. Since WordPress no longer supports IE9 as of version 4.8, and all modern browsers come with these functions, the polyfills can be removed. Follow-up to [26072], [26131], [26601], [47771]. Props TobiasBg, sabernhardt. Fixes #61995. Built from https://develop.svn.wordpress.org/trunk@58997 git-svn-id: http://core.svn.wordpress.org/trunk@58393 1a063a9b-81f0-0310-95a4-ce76da25c4cd
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 );
|