[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, base64, painter,
  12          colorscheme = {},
  13          elements = [];
  14  
  15      $( function() {
  16          // Detection for browser SVG capability.
  17          if ( document.implementation.hasFeature( 'http://www.w3.org/TR/SVG11/feature#Image', '1.1' ) ) {
  18              $( document.body ).removeClass( 'no-svg' ).addClass( 'svg' );
  19              wp.svgPainter.init();
  20          }
  21      });
  22  
  23      /**
  24       * Needed only for IE9
  25       *
  26       * Based on jquery.base64.js 0.0.3 - https://github.com/yckart/jquery.base64.js
  27       *
  28       * Based on: https://gist.github.com/Yaffle/1284012
  29       *
  30       * Copyright (c) 2012 Yannick Albert (http://yckart.com)
  31       * Licensed under the MIT license
  32       * http://www.opensource.org/licenses/mit-license.php
  33       */
  34      base64 = ( function() {
  35          var c,
  36              b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/',
  37              a256 = '',
  38              r64 = [256],
  39              r256 = [256],
  40              i = 0;
  41  
  42  		function init() {
  43              while( i < 256 ) {
  44                  c = String.fromCharCode(i);
  45                  a256 += c;
  46                  r256[i] = i;
  47                  r64[i] = b64.indexOf(c);
  48                  ++i;
  49              }
  50          }
  51  
  52  		function code( s, discard, alpha, beta, w1, w2 ) {
  53              var tmp, length,
  54                  buffer = 0,
  55                  i = 0,
  56                  result = '',
  57                  bitsInBuffer = 0;
  58  
  59              s = String(s);
  60              length = s.length;
  61  
  62              while( i < length ) {
  63                  c = s.charCodeAt(i);
  64                  c = c < 256 ? alpha[c] : -1;
  65  
  66                  buffer = ( buffer << w1 ) + c;
  67                  bitsInBuffer += w1;
  68  
  69                  while( bitsInBuffer >= w2 ) {
  70                      bitsInBuffer -= w2;
  71                      tmp = buffer >> bitsInBuffer;
  72                      result += beta.charAt(tmp);
  73                      buffer ^= tmp << bitsInBuffer;
  74                  }
  75                  ++i;
  76              }
  77  
  78              if ( ! discard && bitsInBuffer > 0 ) {
  79                  result += beta.charAt( buffer << ( w2 - bitsInBuffer ) );
  80              }
  81  
  82              return result;
  83          }
  84  
  85  		function btoa( plain ) {
  86              if ( ! c ) {
  87                  init();
  88              }
  89  
  90              plain = code( plain, false, r256, b64, 8, 6 );
  91              return plain + '===='.slice( ( plain.length % 4 ) || 4 );
  92          }
  93  
  94  		function atob( coded ) {
  95              var i;
  96  
  97              if ( ! c ) {
  98                  init();
  99              }
 100  
 101              coded = coded.replace( /[^A-Za-z0-9\+\/\=]/g, '' );
 102              coded = String(coded).split('=');
 103              i = coded.length;
 104  
 105              do {
 106                  --i;
 107                  coded[i] = code( coded[i], true, r64, a256, 6, 8 );
 108              } while ( i > 0 );
 109  
 110              coded = coded.join('');
 111              return coded;
 112          }
 113  
 114          return {
 115              atob: atob,
 116              btoa: btoa
 117          };
 118      })();
 119  
 120      return {
 121          init: function() {
 122              painter = this;
 123              selector = $( '#adminmenu .wp-menu-image, #wpadminbar .ab-item' );
 124  
 125              this.setColors();
 126              this.findElements();
 127              this.paint();
 128          },
 129  
 130          setColors: function( colors ) {
 131              if ( typeof colors === 'undefined' && typeof window._wpColorScheme !== 'undefined' ) {
 132                  colors = window._wpColorScheme;
 133              }
 134  
 135              if ( colors && colors.icons && colors.icons.base && colors.icons.current && colors.icons.focus ) {
 136                  colorscheme = colors.icons;
 137              }
 138          },
 139  
 140          findElements: function() {
 141              selector.each( function() {
 142                  var $this = $(this), bgImage = $this.css( 'background-image' );
 143  
 144                  if ( bgImage && bgImage.indexOf( 'data:image/svg+xml;base64' ) != -1 ) {
 145                      elements.push( $this );
 146                  }
 147              });
 148          },
 149  
 150          paint: function() {
 151              // Loop through all elements.
 152              $.each( elements, function( index, $element ) {
 153                  var $menuitem = $element.parent().parent();
 154  
 155                  if ( $menuitem.hasClass( 'current' ) || $menuitem.hasClass( 'wp-has-current-submenu' ) ) {
 156                      // Paint icon in 'current' color.
 157                      painter.paintElement( $element, 'current' );
 158                  } else {
 159                      // Paint icon in base color.
 160                      painter.paintElement( $element, 'base' );
 161  
 162                      // Set hover callbacks.
 163                      $menuitem.on( 'mouseenter', function() {
 164                          painter.paintElement( $element, 'focus' );
 165                      } ).on( 'mouseleave', function() {
 166                          // Match the delay from hoverIntent.
 167                          window.setTimeout( function() {
 168                              painter.paintElement( $element, 'base' );
 169                          }, 100 );
 170                      } );
 171                  }
 172              });
 173          },
 174  
 175          paintElement: function( $element, colorType ) {
 176              var xml, encoded, color;
 177  
 178              if ( ! colorType || ! colorscheme.hasOwnProperty( colorType ) ) {
 179                  return;
 180              }
 181  
 182              color = colorscheme[ colorType ];
 183  
 184              // Only accept hex colors: #101 or #101010.
 185              if ( ! color.match( /^(#[0-9a-f]{3}|#[0-9a-f]{6})$/i ) ) {
 186                  return;
 187              }
 188  
 189              xml = $element.data( 'wp-ui-svg-' + color );
 190  
 191              if ( xml === 'none' ) {
 192                  return;
 193              }
 194  
 195              if ( ! xml ) {
 196                  encoded = $element.css( 'background-image' ).match( /.+data:image\/svg\+xml;base64,([A-Za-z0-9\+\/\=]+)/ );
 197  
 198                  if ( ! encoded || ! encoded[1] ) {
 199                      $element.data( 'wp-ui-svg-' + color, 'none' );
 200                      return;
 201                  }
 202  
 203                  try {
 204                      if ( 'atob' in window ) {
 205                          xml = window.atob( encoded[1] );
 206                      } else {
 207                          xml = base64.atob( encoded[1] );
 208                      }
 209                  } catch ( error ) {}
 210  
 211                  if ( xml ) {
 212                      // Replace `fill` attributes.
 213                      xml = xml.replace( /fill="(.+?)"/g, 'fill="' + color + '"');
 214  
 215                      // Replace `style` attributes.
 216                      xml = xml.replace( /style="(.+?)"/g, 'style="fill:' + color + '"');
 217  
 218                      // Replace `fill` properties in `<style>` tags.
 219                      xml = xml.replace( /fill:.*?;/g, 'fill: ' + color + ';');
 220  
 221                      if ( 'btoa' in window ) {
 222                          xml = window.btoa( xml );
 223                      } else {
 224                          xml = base64.btoa( xml );
 225                      }
 226  
 227                      $element.data( 'wp-ui-svg-' + color, xml );
 228                  } else {
 229                      $element.data( 'wp-ui-svg-' + color, 'none' );
 230                      return;
 231                  }
 232              }
 233  
 234              $element.attr( 'style', 'background-image: url("data:image/svg+xml;base64,' + xml + '") !important;' );
 235          }
 236      };
 237  
 238  })( jQuery, window, document );