/* global mp6_color_scheme:true */ var svgPainter = ( function( $, window, document, undefined ) { 'use strict'; $(document).ready( function() { // detection for browser SVG capability if ( document.implementation.hasFeature( 'http://www.w3.org/TR/SVG11/feature#Image', '1.1' ) ) { document.body.className = document.body.className.replace( 'no-svg', 'svg' ); } svgPainter.init(); }); return { elements : [], init : function() { this.selector = $( '#adminmenu .wp-menu-image, #wpadminbar .ab-item' ); this.setColors(); this.findElements(); this.paint(); }, setColors : function( colors ) { if ( typeof colors === 'undefined' && typeof mp6_color_scheme !== 'undefined' ) { colors = mp6_color_scheme; } this.colorscheme = colors; }, findElements : function() { this.selector.each(function() { var bgimg = $(this).css( 'background-image' ); if ( bgimg.indexOf( 'data:image/svg+xml;base64' ) != -1 ) { svgPainter.elements.push( $(this) ); } }); }, paint : function() { // loop through all elements $.each( this.elements, function( index, $element ) { var $menuitem = $element.parent().parent(); if ( $menuitem.hasClass( 'current' ) || $menuitem.hasClass( 'wp-has-current-submenu' ) ) { // paint icon in 'current' color svgPainter.paintElement( $element, svgPainter.colorscheme.icons.current ); } else { // paint icon in base color svgPainter.paintElement( $element, svgPainter.colorscheme.icons.base ); // set hover callbacks $menuitem.hover( function() { svgPainter.paintElement( $element, svgPainter.colorscheme.icons.focus ); }, function() { svgPainter.paintElement( $element, svgPainter.colorscheme.icons.base ); } ); } }); }, paintElement : function( $element, color ) { // only accept hex colors: #101 or #101010 if ( ! color.match( /^(#[0-9a-f]{3}|#[0-9a-f]{6})$/i ) ) return; var xml = $element.data( 'mp6-svg-' + color ), base64; if ( ! xml ) { base64 = $element.css( 'background-image' ).match( /.+data:image\/svg\+xml;base64,(.+)\)/ ); if ( ! base64 ) return; try { xml = window.atob( base64[1] ); } catch ( e ) { xml = $.base64.atob( base64[1] ); } // 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 `