[Summary view] [Print] [Text view]

   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  
   7  window.wp = window.wp || {};
   8  
   9  wp.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 );