<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[26693] trunk/src: Final SVG painter fixes.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/26693">26693</a></dd>
<dt>Author</dt> <dd>nacin</dd>
<dt>Date</dt> <dd>2013-12-05 22:00:17 +0000 (Thu, 05 Dec 2013)</dd>
</dl>
<h3>Log Message</h3>
<pre>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 <a href="http://core.trac.wordpress.org/ticket/26333">#26333</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadminjsuserprofilejs">trunk/src/wp-admin/js/user-profile.js</a></li>
<li><a href="#trunksrcwpincludesscriptloaderphp">trunk/src/wp-includes/script-loader.php</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunksrcwpadminjssvgpainterjs">trunk/src/wp-admin/js/svg-painter.js</a></li>
</ul>
<h3>Removed Paths</h3>
<ul>
<li><a href="#trunksrcwpincludesjssvgpainterjs">trunk/src/wp-includes/js/svg-painter.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadminjssvgpainterjsfromrev26690trunksrcwpincludesjssvgpainterjs"></a>
<div class="copfile"><h4>Copied: trunk/src/wp-admin/js/svg-painter.js (from rev 26690, trunk/src/wp-includes/js/svg-painter.js) (0 => 26693)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/js/svg-painter.js (rev 0)
+++ trunk/src/wp-admin/js/svg-painter.js 2013-12-05 22:00:17 UTC (rev 26693)
</span><span class="lines">@@ -0,0 +1,240 @@
</span><ins>+/**
+ * Attempt to re-color SVG icons used in the admin menu or the toolbar
+ *
+ */
+
+window.wp = window.wp || {};
+
+wp.svgPainter = ( function( $, window, document, undefined ) {
+ 'use strict';
+ var selector, base64, painter,
+ colorscheme = {},
+ elements = [];
+
+ $(document).ready( function() {
+ // detection for browser SVG capability
+ if ( document.implementation.hasFeature( 'http://www.w3.org/TR/SVG11/feature#Image', '1.1' ) ) {
+ $( document.body ).removeClass( 'no-svg' ).addClass( 'svg' );
+ wp.svgPainter.init();
+ }
+ });
+
+ /**
+ * Needed only for IE9
+ *
+ * Based on jquery.base64.js 0.0.3 - https://github.com/yckart/jquery.base64.js
+ *
+ * Based on: https://gist.github.com/Yaffle/1284012
+ *
+ * Copyright (c) 2012 Yannick Albert (http://yckart.com)
+ * Licensed under the MIT license
+ * http://www.opensource.org/licenses/mit-license.php
+ */
+ base64 = ( function() {
+ var c,
+ b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/',
+ a256 = '',
+ r64 = [256],
+ r256 = [256],
+ i = 0;
+
+ function init() {
+ while( i < 256 ) {
+ c = String.fromCharCode(i);
+ a256 += c;
+ r256[i] = i;
+ r64[i] = b64.indexOf(c);
+ ++i;
+ }
+ }
+
+ function code( s, discard, alpha, beta, w1, w2 ) {
+ var tmp, length,
+ buffer = 0,
+ i = 0,
+ result = '',
+ bitsInBuffer = 0;
+
+ s = String(s);
+ length = s.length;
+
+ while( i < length ) {
+ c = s.charCodeAt(i);
+ c = c < 256 ? alpha[c] : -1;
+
+ buffer = ( buffer << w1 ) + c;
+ bitsInBuffer += w1;
+
+ while( bitsInBuffer >= w2 ) {
+ bitsInBuffer -= w2;
+ tmp = buffer >> bitsInBuffer;
+ result += beta.charAt(tmp);
+ buffer ^= tmp << bitsInBuffer;
+ }
+ ++i;
+ }
+
+ if ( ! discard && bitsInBuffer > 0 ) {
+ result += beta.charAt( buffer << ( w2 - bitsInBuffer ) );
+ }
+
+ return result;
+ }
+
+ function btoa( plain ) {
+ if ( ! c ) {
+ init();
+ }
+
+ plain = code( plain, false, r256, b64, 8, 6 );
+ return plain + '===='.slice( ( plain.length % 4 ) || 4 );
+ }
+
+ function atob( coded ) {
+ var i;
+
+ if ( ! c ) {
+ init();
+ }
+
+ coded = coded.replace( /[^A-Za-z0-9\+\/\=]/g, '' );
+ coded = String(coded).split('=');
+ i = coded.length;
+
+ do {
+ --i;
+ coded[i] = code( coded[i], true, r64, a256, 6, 8 );
+ } while ( i > 0 );
+
+ coded = coded.join('');
+ return coded;
+ }
+
+ return {
+ atob: atob,
+ btoa: btoa
+ };
+ })();
+
+ return {
+ init: function() {
+ painter = this;
+ selector = $( '#adminmenu .wp-menu-image, #wpadminbar .ab-item' );
+
+ this.setColors();
+ this.findElements();
+ this.paint();
+ },
+
+ setColors: function( colors ) {
+ if ( typeof colors === 'undefined' && typeof window._wpColorScheme !== 'undefined' ) {
+ colors = window._wpColorScheme;
+ }
+
+ if ( colors && colors.icons && colors.icons.base && colors.icons.current && colors.icons.focus ) {
+ colorscheme = colors.icons;
+ }
+ },
+
+ findElements: function() {
+ selector.each( function() {
+ var $this = $(this), bgImage = $this.css( 'background-image' );
+
+ if ( bgImage && bgImage.indexOf( 'data:image/svg+xml;base64' ) != -1 ) {
+ elements.push( $this );
+ }
+ });
+ },
+
+ paint: function() {
+ // loop through all elements
+ $.each( elements, function( index, $element ) {
+ var $menuitem = $element.parent().parent();
+
+ if ( $menuitem.hasClass( 'current' ) || $menuitem.hasClass( 'wp-has-current-submenu' ) ) {
+ // paint icon in 'current' color
+ painter.paintElement( $element, 'current' );
+ } else {
+ // paint icon in base color
+ painter.paintElement( $element, 'base' );
+
+ // set hover callbacks
+ $menuitem.hover(
+ function() {
+ painter.paintElement( $element, 'focus' );
+ },
+ function() {
+ // Match the delay from hoverIntent
+ window.setTimeout( function() {
+ painter.paintElement( $element, 'base' );
+ }, 100 );
+ }
+ );
+ }
+ });
+ },
+
+ paintElement: function( $element, colorType ) {
+ var xml, encoded, color;
+
+ if ( ! colorType || ! colorscheme.hasOwnProperty( colorType ) ) {
+ return;
+ }
+
+ color = colorscheme[ colorType ];
+
+ // only accept hex colors: #101 or #101010
+ if ( ! color.match( /^(#[0-9a-f]{3}|#[0-9a-f]{6})$/i ) ) {
+ return;
+ }
+
+ xml = $element.data( 'wp-ui-svg-' + color );
+
+ if ( xml === 'none' ) {
+ return;
+ }
+
+ if ( ! xml ) {
+ 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;
+ }
+
+ 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 {
+ $element.data( 'wp-ui-svg-' + color, 'none' );
+ return;
+ }
+ }
+
+ $element.attr( 'style', 'background-image: url("data:image/svg+xml;base64,' + xml + '") !important;' );
+ }
+ };
+
+})( jQuery, window, document );
</ins></span></pre></div>
<a id="trunksrcwpadminjsuserprofilejs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/js/user-profile.js (26692 => 26693)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/js/user-profile.js 2013-12-05 21:29:37 UTC (rev 26692)
+++ trunk/src/wp-admin/js/user-profile.js 2013-12-05 22:00:17 UTC (rev 26693)
</span><span class="lines">@@ -1,4 +1,4 @@
</span><del>-/* global ajaxurl, pwsL10n, svgPainter */
</del><ins>+/* global ajaxurl, pwsL10n */
</ins><span class="cx"> (function($){
</span><span class="cx">
</span><span class="cx"> function check_pass_strength() {
</span><span class="lines">@@ -99,14 +99,14 @@
</span><span class="cx"> $stylesheet.attr( 'href', $this.children( '.css_url' ).val() );
</span><span class="cx">
</span><span class="cx"> // repaint icons
</span><del>- if ( typeof window.svgPainter !== 'undefined' ) {
</del><ins>+ if ( typeof wp !== 'undefined' && wp.svgPainter ) {
</ins><span class="cx"> try {
</span><span class="cx"> colors = $.parseJSON( $this.children( '.icon_colors' ).val() );
</span><span class="cx"> } catch ( error ) {}
</span><span class="cx">
</span><span class="cx"> if ( colors ) {
</span><del>- svgPainter.setColors( colors );
- svgPainter.paint();
</del><ins>+ wp.svgPainter.setColors( colors );
+ wp.svgPainter.paint();
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunksrcwpincludesjssvgpainterjs"></a>
<div class="delfile"><h4>Deleted: trunk/src/wp-includes/js/svg-painter.js (26692 => 26693)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/js/svg-painter.js 2013-12-05 21:29:37 UTC (rev 26692)
+++ trunk/src/wp-includes/js/svg-painter.js 2013-12-05 22:00:17 UTC (rev 26693)
</span><span class="lines">@@ -1,207 +0,0 @@
</span><del>-/**
- * Attempt to re-color SVG icons used in the admin menu or the toolbar
- *
- */
-var svgPainter = ( function( $, window, document, undefined ) {
- 'use strict';
- var selector, base64,
- colorscheme = {},
- elements = [];
-
- $(document).ready( function() {
- // detection for browser SVG capability
- if ( document.implementation.hasFeature( 'http://www.w3.org/TR/SVG11/feature#Image', '1.1' ) ) {
- $( document.body ).removeClass( 'no-svg' ).addClass( 'svg' );
- svgPainter.init();
- }
- });
-
- /**
- * Needed only for IE9
- *
- * Based on jquery.base64.js 0.0.3 - https://github.com/yckart/jquery.base64.js
- *
- * Based on: https://gist.github.com/Yaffle/1284012
- *
- * Copyright (c) 2012 Yannick Albert (http://yckart.com)
- * Licensed under the MIT license
- * http://www.opensource.org/licenses/mit-license.php
- */
- base64 = ( function() {
- var c,
- b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/',
- a256 = '',
- r64 = [256],
- r256 = [256],
- i = 0;
-
- while( i < 256 ) {
- c = String.fromCharCode(i);
- a256 += c;
- r256[i] = i;
- r64[i] = b64.indexOf(c);
- ++i;
- }
-
- function code( s, discard, alpha, beta, w1, w2 ) {
- var tmp, length,
- buffer = 0,
- i = 0,
- result = '',
- bitsInBuffer = 0;
-
- s = String(s);
- length = s.length;
-
- while( i < length ) {
- c = s.charCodeAt(i);
- c = c < 256 ? alpha[c] : -1;
-
- buffer = ( buffer << w1 ) + c;
- bitsInBuffer += w1;
-
- while( bitsInBuffer >= w2 ) {
- bitsInBuffer -= w2;
- tmp = buffer >> bitsInBuffer;
- result += beta.charAt(tmp);
- buffer ^= tmp << bitsInBuffer;
- }
- ++i;
- }
-
- if ( ! discard && bitsInBuffer > 0 ) {
- result += beta.charAt( buffer << ( w2 - bitsInBuffer ) );
- }
-
- return result;
- }
-
- function btoa( plain ) {
- plain = code( plain, false, r256, b64, 8, 6 );
- return plain + '===='.slice( ( plain.length % 4 ) || 4 );
- }
-
- function atob( coded ) {
- var i;
-
- coded = coded.replace( /[^A-Za-z0-9\+\/\=]/g, '' );
- coded = String(coded).split('=');
- i = coded.length;
-
- do {
- --i;
- coded[i] = code( coded[i], true, r64, a256, 6, 8 );
- } while ( i > 0 );
-
- coded = coded.join('');
- return coded;
- }
-
- return {
- atob: atob,
- btoa: btoa
- };
- })();
-
- return {
- init: function() {
- selector = $( '#adminmenu .wp-menu-image, #wpadminbar .ab-item' );
-
- this.setColors();
- this.findElements();
- this.paint();
- },
-
- setColors: function( colors ) {
- if ( typeof colors === 'undefined' && typeof window._wpColorScheme !== 'undefined' ) {
- colors = window._wpColorScheme;
- }
-
- if ( colors && colors.icons && colors.icons.base && colors.icons.current && colors.icons.focus ) {
- colorscheme = colors.icons;
- }
- },
-
- findElements: function() {
- selector.each( function() {
- var $this = $(this), bgImage = $this.css( 'background-image' );
-
- if ( bgImage && bgImage.indexOf( 'data:image/svg+xml;base64' ) != -1 ) {
- elements.push( $this );
- }
- });
- },
-
- paint: function() {
- // loop through all elements
- $.each( elements, function( index, $element ) {
- var $menuitem = $element.parent().parent();
-
- if ( $menuitem.hasClass( 'current' ) || $menuitem.hasClass( 'wp-has-current-submenu' ) ) {
- // paint icon in 'current' color
- svgPainter.paintElement( $element, 'current' );
- } else {
- // paint icon in base color
- svgPainter.paintElement( $element, 'base' );
-
- // set hover callbacks
- $menuitem.hover(
- function() { svgPainter.paintElement( $element, 'focus' ); },
- function() { svgPainter.paintElement( $element, 'base' ); }
- );
- }
- });
- },
-
- paintElement: function( $element, colorType ) {
- var xml, encoded, color;
-
- if ( ! colorType || ! colorscheme.hasOwnProperty( colorType ) ) {
- return;
- }
-
- color = colorscheme[ colorType ];
-
- // only accept hex colors: #101 or #101010
- if ( ! color.match( /^(#[0-9a-f]{3}|#[0-9a-f]{6})$/i ) ) {
- return;
- }
-
- xml = $element.data( 'wp-ui-svg-' + color );
-
- if ( ! xml ) {
- encoded = $element.css( 'background-image' ).match( /.+data:image\/svg\+xml;base64,(.+?)['"]? ?\)/ );
-
- if ( ! encoded || ! encoded[1] ) {
- return;
- }
-
- if ( 'atob' in window ) {
- xml = window.atob( encoded[1] );
- } 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 + '")' );
- }
- };
-
-})( jQuery, window, document );
</del></span></pre></div>
<a id="trunksrcwpincludesscriptloaderphp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/script-loader.php (26692 => 26693)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/script-loader.php 2013-12-05 21:29:37 UTC (rev 26692)
+++ trunk/src/wp-includes/script-loader.php 2013-12-05 22:00:17 UTC (rev 26693)
</span><span class="lines">@@ -515,7 +515,7 @@
</span><span class="cx"> $scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array( 'wp-color-picker', 'media-views' ), false, 1 );
</span><span class="cx"> $scripts->add( 'media-gallery', "/wp-admin/js/media-gallery$suffix.js", array('jquery'), false, 1 );
</span><span class="cx">
</span><del>- $scripts->add( 'svg-painter', '/wp-includes/js/svg-painter.js', array( 'jquery' ), false, 1 );
</del><ins>+ $scripts->add( 'svg-painter', '/wp-admin/js/svg-painter.js', array( 'jquery' ), false, 1 );
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>