Changeset 26693

Timestamp:

12/05/2013 10:00:17 PM (11 years ago)

Author:

nacin

Message:

Final SVG painter fixes.

• wp.svgPainter and now moved to wp-admin.
• Restore !important background-image handling.
• Delay executing the IE9-specific base64 code if we don't need it.
• Make painted icons lose their color after hover at the same speed as dashicons (100ms).

props azaozz.
fixes #26333.

Location:

trunk/src

Files:

• wp-admin/js/svg-painter.js (moved) (moved from trunk/src/wp-includes/js/svg-painter.js) (8 diffs)
• wp-admin/js/user-profile.js (modified) (3 diffs)
• wp-includes/script-loader.php (modified) (1 diff)

trunk/src/wp-admin/js/svg-painter.js

@@ -3 +3 @@
  *
  */
-var svgPainter = ( function( $, window, document, undefined ) {
+
+window.wp = window.wp || {};
+
+wp.svgPainter = ( function( $, window, document, undefined ) {
     'use strict';
-    var selector, base64,
+    var selector, base64, painter,
         colorscheme = {},
         elements = [];
@@ -13 +16 @@
         if ( document.implementation.hasFeature( 'http://www.w3.org/TR/SVG11/feature#Image', '1.1' ) ) {
             $( document.body ).removeClass( 'no-svg' ).addClass( 'svg' );
-            svgPainter.init();
+            wp.svgPainter.init();
         }
     });
@@ -36 +39 @@
             i = 0;
 
-        while( i < 256 ) {
-            c = String.fromCharCode(i);
-            a256 += c;
-            r256[i] = i;
-            r64[i] = b64.indexOf(c);
-            ++i;
+        function init() {
+            while( i < 256 ) {
+                c = String.fromCharCode(i);
+                a256 += c;
+                r256[i] = i;
+                r64[i] = b64.indexOf(c);
+                ++i;
+            }
         }
 
@@ -78 +83 @@
 
         function btoa( plain ) {
+            if ( ! c ) {
+                init();
+            }
+
             plain = code( plain, false, r256, b64, 8, 6 );
             return plain + '===='.slice( ( plain.length % 4 ) || 4 );
@@ -84 +93 @@
         function atob( coded ) {
             var i;
+
+            if ( ! c ) {
+                init();
+            }
 
             coded = coded.replace( /[^A-Za-z0-9\+\/\=]/g, '' );
@@ -106 +119 @@
     return {
         init: function() {
+            painter = this;
             selector = $( '#adminmenu .wp-menu-image, #wpadminbar .ab-item' );
 
@@ -140 +154 @@
                 if ( $menuitem.hasClass( 'current' ) || $menuitem.hasClass( 'wp-has-current-submenu' ) ) {
                     // paint icon in 'current' color
-                    svgPainter.paintElement( $element, 'current' );
+                    painter.paintElement( $element, 'current' );
                 } else {
                     // paint icon in base color
-                    svgPainter.paintElement( $element, 'base' );
+                    painter.paintElement( $element, 'base' );
 
                     // set hover callbacks
                     $menuitem.hover(
-                        function() { svgPainter.paintElement( $element, 'focus' ); },
-                        function() { svgPainter.paintElement( $element, 'base' ); }
+                        function() {
+                            painter.paintElement( $element, 'focus' );
+                        },
+                        function() {
+                            // Match the delay from hoverIntent
+                            window.setTimeout( function() {
+                                painter.paintElement( $element, 'base' );
+                            }, 100 );
+                        }
                     );
                 }
@@ -170 +191 @@
             xml = $element.data( 'wp-ui-svg-' + color );
 
+            if ( xml === 'none' ) {
+                return;
+            }
+
             if ( ! xml ) {
-                encoded = $element.css( 'background-image' ).match( /.+data:image\/svg\+xml;base64,(.+?)['"]? ?\)/ );
+                encoded = $element.css( 'background-image' ).match( /.+data:image\/svg\+xml;base64,([A-Za-z0-9\+\/\=]+)/ );
 
                 if ( ! encoded || ! encoded[1] ) {
+                    $element.data( 'wp-ui-svg-' + color, 'none' );
                     return;
                 }
 
-                if ( 'atob' in window ) {
-                    xml = window.atob( encoded[1] );
+                try {
+                    if ( 'atob' in window ) {
+                        xml = window.atob( encoded[1] );
+                    } else {
+                        xml = base64.atob( encoded[1] );
+                    }
+                } catch ( error ) {}
+
+                if ( xml ) {
+                    // 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 `<style>` tags
+                    xml = xml.replace( /fill:.*?;/g, 'fill: ' + color + ';');
+
+                    if ( 'btoa' in window ) {
+                        xml = window.btoa( xml );
+                    } else {
+                        xml = base64.btoa( xml );
+                    }
+
+                    $element.data( 'wp-ui-svg-' + color, xml );
                 } else {
-                    xml = base64.atob( encoded[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 `<style>` tags
-                xml = xml.replace( /fill:.*?;/g, 'fill: ' + color + ';');
-
-                if ( 'btoa' in window ) {
-                    xml = window.btoa( xml );
-                } else {
-                    xml = base64.btoa( xml );
-                }
-
-                $element.data( 'wp-ui-svg-' + color, xml );
-            }
-
-            $element.css( 'background-image', 'url("data:image/svg+xml;base64,' + xml + '")' );
+                    $element.data( 'wp-ui-svg-' + color, 'none' );
+                    return;
+                }
+            }
+
+            $element.attr( 'style', 'background-image: url("data:image/svg+xml;base64,' + xml + '") !important;' );
         }
     };

trunk/src/wp-admin/js/user-profile.js

@@ -1 @@
-/* global ajaxurl, pwsL10n, svgPainter */
+/* global ajaxurl, pwsL10n */
 (function($){
 
@@ -100 +100 @@
 
                 // repaint icons
-                if ( typeof window.svgPainter !== 'undefined' ) {
+                if ( typeof wp !== 'undefined' && wp.svgPainter ) {
                     try {
                         colors = $.parseJSON( $this.children( '.icon_colors' ).val() );
@@ -106 +106 @@
 
                     if ( colors ) {
-                        svgPainter.setColors( colors );
-                        svgPainter.paint();
+                        wp.svgPainter.setColors( colors );
+                        wp.svgPainter.paint();
                     }
                 }

trunk/src/wp-includes/script-loader.php

@@ -516 +516 @@
         $scripts->add( 'media-gallery', "/wp-admin/js/media-gallery$suffix.js", array('jquery'), false, 1 );
 
-        $scripts->add( 'svg-painter', '/wp-includes/js/svg-painter.js', array( 'jquery' ), false, 1 );
+        $scripts->add( 'svg-painter', '/wp-admin/js/svg-painter.js', array( 'jquery' ), false, 1 );
     }
 }