1/**
  2 * Attempt to re-color SVG icons used in the admin menu or the toolbar
  3 *
  4 * @output wp-admin/js/svg-painter.js
  5 */
  6
  7window.wp = window.wp || {};
  8
  9wp.svgPainter = ( function( $, window, document, undefined ) {
 10	'use strict';
 11	var selector, painter,
 12		colorscheme = {},
 13		elements = [];
 14
 15	$( function() {
 16		wp.svgPainter.init();
 17	});
 18
 19	return {
 20		init: function() {
 21			painter = this;
 22			selector = $( '#adminmenu .wp-menu-image, #wpadminbar .ab-item' );
 23
 24			painter.setColors();
 25			painter.findElements();
 26			painter.paint();
 27		},
 28
 29		setColors: function( colors ) {
 30			if ( typeof colors === 'undefined' && typeof window._wpColorScheme !== 'undefined' ) {
 31				colors = window._wpColorScheme;
 32			}
 33
 34			if ( colors && colors.icons && colors.icons.base && colors.icons.current && colors.icons.focus ) {
 35				colorscheme = colors.icons;
 36			}
 37		},
 38
 39		findElements: function() {
 40			selector.each( function() {
 41				var $this = $(this), bgImage = $this.css( 'background-image' );
 42
 43				if ( bgImage && bgImage.indexOf( 'data:image/svg+xml;base64' ) != -1 ) {
 44					elements.push( $this );
 45				}
 46			});
 47		},
 48
 49		paint: function() {
 50			// Loop through all elements.
 51			$.each( elements, function( index, $element ) {
 52				var $menuitem = $element.parent().parent();
 53
 54				if ( $menuitem.hasClass( 'current' ) || $menuitem.hasClass( 'wp-has-current-submenu' ) ) {
 55					// Paint icon in 'current' color.
 56					painter.paintElement( $element, 'current' );
 57				} else {
 58					// Paint icon in base color.
 59					painter.paintElement( $element, 'base' );
 60
 61					// Set hover callbacks.
 62					$menuitem.on( 'mouseenter', function() {
 63						painter.paintElement( $element, 'focus' );
 64					} ).on( 'mouseleave', function() {
 65						// Match the delay from hoverIntent.
 66						window.setTimeout( function() {
 67							painter.paintElement( $element, 'base' );
 68						}, 100 );
 69					} );
 70				}
 71			});
 72		},
 73
 74		paintElement: function( $element, colorType ) {
 75			var xml, encoded, color;
 76
 77			if ( ! colorType || ! colorscheme.hasOwnProperty( colorType ) ) {
 78				return;
 79			}
 80
 81			color = colorscheme[ colorType ];
 82
 83			// Only accept hex colors: #101 or #101010.
 84			if ( ! color.match( /^(#[0-9a-f]{3}|#[0-9a-f]{6})$/i ) ) {
 85				return;
 86			}
 87
 88			xml = $element.data( 'wp-ui-svg-' + color );
 89
 90			if ( xml === 'none' ) {
 91				return;
 92			}
 93
 94			if ( ! xml ) {
 95				encoded = $element.css( 'background-image' ).match( /.+data:image\/svg\+xml;base64,([A-Za-z0-9\+\/\=]+)/ );
 96
 97				if ( ! encoded || ! encoded[1] ) {
 98					$element.data( 'wp-ui-svg-' + color, 'none' );
 99					return;
100				}
101
102				try {
103					xml = window.atob( encoded[1] );
104				} catch ( error ) {}
105
106				if ( xml ) {
107					// Replace `fill` attributes.
108					xml = xml.replace( /fill="(.+?)"/g, 'fill="' + color + '"');
109
110					// Replace `style` attributes.
111					xml = xml.replace( /style="(.+?)"/g, 'style="fill:' + color + '"');
112
113					// Replace `fill` properties in `<style>` tags.
114					xml = xml.replace( /fill:.*?;/g, 'fill: ' + color + ';');
115
116					xml = window.btoa( xml );
117
118					$element.data( 'wp-ui-svg-' + color, xml );
119				} else {
120					$element.data( 'wp-ui-svg-' + color, 'none' );
121					return;
122				}
123			}
124
125			$element.attr( 'style', 'background-image: url("data:image/svg+xml;base64,' + xml + '") !important;' );
126		}
127	};
128
129})( jQuery, window, document );
130