home *** CD-ROM | disk | FTP | other *** search
/ HTML Examples / WP.iso / wordpress / wp-admin / js / svg-painter.js < prev    next >
Encoding:
JavaScript  |  2013-12-05  |  5.4 KB  |  241 lines
  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 );
  241.