sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Svg-painter:

Browse Source 
- Clean up the JS, better names, etc.
- Convert the base64 encode/decode code from jQuery plugin to local use.
- Add missing icon colors for the default theme.
- Make it more error-proof.
Fixes #26333.

git-svn-id: https://develop.svn.wordpress.org/trunk@26601 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Ozz 2013-12-04 04:12:41 +00:00
parent eb41771db6
commit 93a5bff7a7
5 changed files with 150 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/wp-admin/includes/misc.php
View File

@ -613,16 +613,16 @@ function admin_color_scheme_picker() {
<?php
}
function set_color_scheme_json() {
function wp_color_scheme_settings() {
global $_wp_admin_css_colors;
$color_scheme = get_user_option( 'admin_color' );
if ( isset( $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) {
echo '<script type="text/javascript">var wp_color_scheme = ' . json_encode( array( 'icons' => $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) . ";</script>\n";
if ( ! empty( $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) {
echo '<script type="text/javascript">var _wpColorScheme = ' . json_encode( array( 'icons' => $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) . ";</script>\n";
}
}
add_action( 'admin_head', 'set_color_scheme_json' );
add_action( 'admin_head', 'wp_color_scheme_settings' );
function _ipad_meta() {
if ( wp_is_mobile() ) {

11
src/wp-admin/js/user-profile.js
View File

@ -83,7 +83,8 @@
current_user_id = $( 'input[name="checkuser_id"]' ).val();
$colorpicker.on( 'click.colorpicker', '.color-option', function() {
var $this = $(this);
var colors,
$this = $(this);
if ( $this.hasClass( 'selected' ) ) {
return;
@ -99,9 +100,15 @@
// repaint icons
if ( typeof window.svgPainter !== 'undefined' ) {
svgPainter.setColors( $.parseJSON( $this.children( '.icon_colors' ).val() ) );
try {
colors = $.parseJSON( $this.children( '.icon_colors' ).val() );
} catch ( error ) {}
if ( colors ) {
svgPainter.setColors( colors );
svgPainter.paint();
}
}
// update user option
$.post( ajaxurl, {

3
src/wp-includes/general-template.php
View File

@ -2117,7 +2117,8 @@ function wp_admin_css_color( $key, $name, $url, $colors = array(), $icons = arra
function register_admin_color_schemes() {
wp_admin_css_color( 'fresh', _x( 'Default', 'admin color scheme' ),
admin_url( 'css/colors.min.css' ),
array( '#222', '#333', '#0074a2', '#2ea2cc' )
array( '#222', '#333', '#0074a2', '#2ea2cc' ),
array( 'base' => '#999', 'focus' => '#2ea2cc', 'current' => '#fff' )
);
// Other color schemes are not available when running out of src

290
src/wp-includes/js/svg-painter.js
View File

@ -1,154 +1,36 @@
/* global wp_color_scheme:true */
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.className = document.body.className.replace( 'no-svg', 'svg' );
}
$( document.body ).removeClass( 'no-svg' ).addClass( 'svg' );
svgPainter.init();
}
});
return {
elements : [],
init : function() {
this.selector = $( '#adminmenu .wp-menu-image, #wpadminbar .ab-item' );
this.setColors();
this.findElements();
this.paint();
},
setColors : function( colors ) {
if ( typeof colors === 'undefined' && typeof wp_color_scheme !== 'undefined' ) {
colors = wp_color_scheme;
}
this.colorscheme = colors;
},
findElements : function() {
this.selector.each(function() {
var bgimg = $(this).css( 'background-image' );
if ( bgimg.indexOf( 'data:image/svg+xml;base64' ) != -1 ) {
svgPainter.elements.push( $(this) );
}
});
},
paint : function() {
// loop through all elements
$.each( this.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, svgPainter.colorscheme.icons.current );
} else {
// paint icon in base color
svgPainter.paintElement( $element, svgPainter.colorscheme.icons.base );
// set hover callbacks
$menuitem.hover(
function() { svgPainter.paintElement( $element, svgPainter.colorscheme.icons.focus ); },
function() { svgPainter.paintElement( $element, svgPainter.colorscheme.icons.base ); }
);
}
});
},
paintElement : function( $element, color ) {
// only accept hex colors: #101 or #101010
if ( ! color.match( /^(#[0-9a-f]{3}|#[0-9a-f]{6})$/i ) )
return;
var xml = $element.data( 'mp6-svg-' + color ),
base64;
if ( ! xml ) {
base64 = $element.css( 'background-image' ).match( /.+data:image\/svg\+xml;base64,(.+)\)/ );
if ( ! base64 )
return;
try {
xml = window.atob( base64[1] );
} catch ( e ) {
xml = $.base64.atob( base64[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 + ';');
try {
xml = window.btoa( xml );
} catch ( e ) {
xml = $.base64.btoa( xml );
}
$element.data( 'mp6-svg-' + color, xml );
}
$element.attr( 'style', 'background-image: url("data:image/svg+xml;base64,' + xml + '") !important;' );
}
};
})( jQuery, window, document );
/*!
* Customized for MP6
/**
* Needed only for IE9
*
* Based on jquery.base64.js 0.0.3 - https://github.com/yckart/jquery.base64.js
*
* Based upon: https://gist.github.com/Yaffle/1284012
* 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
**/
;(function($) {
var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/',
*/
base64 = ( function() {
var c,
b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/',
a256 = '',
r64 = [256],
r256 = [256],
i = 0,
c, Plugin;
i = 0;
while( i < 256 ) {
c = String.fromCharCode(i);
@ -159,13 +41,14 @@ var svgPainter = ( function( $, window, document, undefined ) {
}
function code( s, discard, alpha, beta, w1, w2 ) {
s = String(s);
var buffer = 0,
var tmp, length,
buffer = 0,
i = 0,
length = s.length,
result = '',
bitsInBuffer = 0,
tmp;
bitsInBuffer = 0;
s = String(s);
length = s.length;
while( i < length ) {
c = s.charCodeAt(i);
@ -182,27 +65,140 @@ var svgPainter = ( function( $, window, document, undefined ) {
}
++i;
}
if(!discard && bitsInBuffer > 0) result += beta.charAt(buffer << (w2 - bitsInBuffer));
if ( ! discard && bitsInBuffer > 0 ) {
result += beta.charAt( buffer << ( w2 - bitsInBuffer ) );
}
return result;
}
Plugin = $.base64 = function(dir, input, encode) {
return input ? Plugin[dir](input, encode) : dir ? null : this;
};
$.base64.btoa = function(plain) {
function btoa( plain ) {
plain = code( plain, false, r256, b64, 8, 6 );
return plain + '===='.slice( ( plain.length % 4 ) || 4 );
};
}
function atob( coded ) {
var i;
$.base64.atob = function(coded) {
coded = coded.replace( /[^A-Za-z0-9\+\/\=]/g, '' );
coded = String(coded).split('=');
var i = coded.length;
do {--i;
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
};
}(jQuery));
})();
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( 'mp6-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( 'mp6-svg-' + color, xml );
}
$element.attr( 'style', 'background-image: url("data:image/svg+xml;base64,' + xml + '") !important;' );
}
};
})( jQuery, window, document );

4
src/wp-includes/script-loader.php
View File

@ -392,8 +392,6 @@ function wp_default_scripts( &$scripts ) {
$scripts->add( 'media-editor', "/wp-includes/js/media-editor$suffix.js", array( 'shortcode', 'media-views' ), false, 1 );
$scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'media-models' ), false, 1 );
$scripts->add( 'svg-painter', '/wp-includes/js/svg-painter.js' );
if ( is_admin() ) {
$scripts->add( 'admin-tags', "/wp-admin/js/tags$suffix.js", array('jquery', 'wp-ajax-response'), false, 1 );
did_action( 'init' ) && $scripts->localize( 'admin-tags', 'tagsl10n', array(
@ -516,6 +514,8 @@ function wp_default_scripts( &$scripts ) {
$scripts->add( 'custom-header', "/wp-admin/js/custom-header.js", array( 'jquery-masonry' ), false, 1 );
$scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array( 'wp-color-picker', 'media-views' ), false, 1 );
$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 );
}
}