[Summary view] [Print] [Text view]

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