WordPress.org
Get WordPress

Make WordPress Core

Changeset 26601


Ignore:
Timestamp:
12/04/2013 04:12:41 AM (11 years ago)
Author:
azaozz
Message:

Svg-painter:

  • 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.

Location:
trunk/src
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/includes/misc.php

    r26549 r26601  
    614614}
    615615
    616 function set_color_scheme_json() {
     616function wp_color_scheme_settings() {
    617617    global $_wp_admin_css_colors;
    618618
    619619    $color_scheme = get_user_option( 'admin_color' );
    620620
    621     if ( isset( $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) {
    622         echo '<script type="text/javascript">var wp_color_scheme = ' . json_encode( array( 'icons' => $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) . ";</script>\n";
    623     }
    624 }
    625 add_action( 'admin_head', 'set_color_scheme_json' );
     621    if ( ! empty( $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) {
     622        echo '<script type="text/javascript">var _wpColorScheme = ' . json_encode( array( 'icons' => $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) . ";</script>\n";
     623    }
     624}
     625add_action( 'admin_head', 'wp_color_scheme_settings' );
    626626
    627627function _ipad_meta() {

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

    r26535 r26601  
    8484
    8585        $colorpicker.on( 'click.colorpicker', '.color-option', function() {
    86             var $this = $(this);
     86            var colors,
     87                $this = $(this);
    8788
    8889            if ( $this.hasClass( 'selected' ) ) {
    … …  
    100101                // repaint icons
    101102                if ( typeof window.svgPainter !== 'undefined' ) {
    102                     svgPainter.setColors( $.parseJSON( $this.children( '.icon_colors' ).val() ) );
    103                     svgPainter.paint();
     103                    try {
     104                        colors = $.parseJSON( $this.children( '.icon_colors' ).val() );
     105                    } catch ( error ) {}
     106
     107                    if ( colors ) {
     108                        svgPainter.setColors( colors );
     109                        svgPainter.paint();
     110                    }
    104111                }
    105112

  • trunk/src/wp-includes/general-template.php

    r26570 r26601  
    21182118    wp_admin_css_color( 'fresh', _x( 'Default', 'admin color scheme' ),
    21192119        admin_url( 'css/colors.min.css' ),
    2120         array( '#222', '#333', '#0074a2', '#2ea2cc' )
     2120        array( '#222', '#333', '#0074a2', '#2ea2cc' ),
     2121        array( 'base' => '#999', 'focus' => '#2ea2cc', 'current' => '#fff' )
    21212122    );
    21222123

  • trunk/src/wp-includes/js/svg-painter.js

    r26406 r26601  
    11/* global wp_color_scheme:true */
    22var svgPainter = ( function( $, window, document, undefined ) {
    3 
    43    'use strict';
     4    var selector, base64,
     5        colorscheme = {},
     6        elements = [];
    57
    68    $(document).ready( function() {
    7 
    89        // detection for browser SVG capability
    910        if ( document.implementation.hasFeature( 'http://www.w3.org/TR/SVG11/feature#Image', '1.1' ) ) {
    10             document.body.className = document.body.className.replace( 'no-svg', 'svg' );
    11         }
    12 
    13         svgPainter.init();
    14 
     11            $( document.body ).removeClass( 'no-svg' ).addClass( 'svg' );
     12            svgPainter.init();
     13        }
    1514    });
    1615
     16    /**
     17     * Needed only for IE9
     18     *
     19     * Based on jquery.base64.js 0.0.3 - https://github.com/yckart/jquery.base64.js
     20     *
     21     * Based on: https://gist.github.com/Yaffle/1284012
     22     *
     23     * Copyright (c) 2012 Yannick Albert (http://yckart.com)
     24     * Licensed under the MIT license
     25     * http://www.opensource.org/licenses/mit-license.php
     26     */
     27    base64 = ( function() {
     28        var c,
     29            b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/',
     30            a256 = '',
     31            r64 = [256],
     32            r256 = [256],
     33            i = 0;
     34
     35        while( i < 256 ) {
     36            c = String.fromCharCode(i);
     37            a256 += c;
     38            r256[i] = i;
     39            r64[i] = b64.indexOf(c);
     40            ++i;
     41        }
     42
     43        function code( s, discard, alpha, beta, w1, w2 ) {
     44            var tmp, length,
     45                buffer = 0,
     46                i = 0,
     47                result = '',
     48                bitsInBuffer = 0;
     49
     50            s = String(s);
     51            length = s.length;
     52
     53            while( i < length ) {
     54                c = s.charCodeAt(i);
     55                c = c < 256 ? alpha[c] : -1;
     56
     57                buffer = ( buffer << w1 ) + c;
     58                bitsInBuffer += w1;
     59
     60                while( bitsInBuffer >= w2 ) {
     61                    bitsInBuffer -= w2;
     62                    tmp = buffer >> bitsInBuffer;
     63                    result += beta.charAt(tmp);
     64                    buffer ^= tmp << bitsInBuffer;
     65                }
     66                ++i;
     67            }
     68
     69            if ( ! discard && bitsInBuffer > 0 ) {
     70                result += beta.charAt( buffer << ( w2 - bitsInBuffer ) );
     71            }
     72
     73            return result;
     74        }
     75
     76        function btoa( plain ) {
     77            plain = code( plain, false, r256, b64, 8, 6 );
     78            return plain + '===='.slice( ( plain.length % 4 ) || 4 );
     79        }
     80
     81        function atob( coded ) {
     82            var i;
     83
     84            coded = coded.replace( /[^A-Za-z0-9\+\/\=]/g, '' );
     85            coded = String(coded).split('=');
     86            i = coded.length;
     87
     88            do {
     89                --i;
     90                coded[i] = code( coded[i], true, r64, a256, 6, 8 );
     91            } while ( i > 0 );
     92
     93            coded = coded.join('');
     94            return coded;
     95        }
     96
     97        return {
     98            atob: atob,
     99            btoa: btoa
     100        };
     101    })();
     102
    17103    return {
    18 
    19         elements : [],
    20 
    21         init : function() {
    22 
    23             this.selector = $( '#adminmenu .wp-menu-image, #wpadminbar .ab-item' );
     104        init: function() {
     105            selector = $( '#adminmenu .wp-menu-image, #wpadminbar .ab-item' );
    24106
    25107            this.setColors();
    26108            this.findElements();
    27109            this.paint();
    28 
    29         },
    30 
    31         setColors : function( colors ) {
    32 
    33             if ( typeof colors === 'undefined' && typeof wp_color_scheme !== 'undefined' ) {
    34                 colors = wp_color_scheme;
    35             }
    36 
    37             this.colorscheme = colors;
    38 
    39         },
    40 
    41         findElements : function() {
    42 
    43             this.selector.each(function() {
    44 
    45                 var bgimg = $(this).css( 'background-image' );
    46 
    47                 if ( bgimg.indexOf( 'data:image/svg+xml;base64' ) != -1 ) {
    48                     svgPainter.elements.push( $(this) );
    49                 }
    50 
     110        },
     111
     112        setColors: function( colors ) {
     113            if ( typeof colors === 'undefined' && typeof window._wpColorScheme !== 'undefined' ) {
     114                colors = window._wpColorScheme;
     115            }
     116
     117            if ( colors && colors.icons && colors.icons.base && colors.icons.current && colors.icons.focus ) {
     118                colorscheme = colors.icons;
     119            }
     120        },
     121
     122        findElements: function() {
     123            selector.each( function() {
     124                var $this = $(this), bgImage = $this.css( 'background-image' );
     125
     126                if ( bgImage && bgImage.indexOf( 'data:image/svg+xml;base64' ) != -1 ) {
     127                    elements.push( $this );
     128                }
    51129            });
    52 
    53         },
    54 
    55         paint : function() {
    56 
     130        },
     131
     132        paint: function() {
    57133            // loop through all elements
    58             $.each( this.elements, function( index, $element ) {
    59 
     134            $.each( elements, function( index, $element ) {
    60135                var $menuitem = $element.parent().parent();
    61136
    62137                if ( $menuitem.hasClass( 'current' ) || $menuitem.hasClass( 'wp-has-current-submenu' ) ) {
    63 
    64138                    // paint icon in 'current' color
    65                     svgPainter.paintElement( $element, svgPainter.colorscheme.icons.current );
    66 
     139                    svgPainter.paintElement( $element, 'current' );
    67140                } else {
    68 
    69141                    // paint icon in base color
    70                     svgPainter.paintElement( $element, svgPainter.colorscheme.icons.base );
     142                    svgPainter.paintElement( $element, 'base' );
    71143
    72144                    // set hover callbacks
    73145                    $menuitem.hover(
    74                         function() { svgPainter.paintElement( $element, svgPainter.colorscheme.icons.focus ); },
    75                         function() { svgPainter.paintElement( $element, svgPainter.colorscheme.icons.base ); }
     146                        function() { svgPainter.paintElement( $element, 'focus' ); },
     147                        function() { svgPainter.paintElement( $element, 'base' ); }
    76148                    );
    77 
    78                 }
    79 
     149                }
    80150            });
    81 
    82         },
    83 
    84         paintElement : function( $element, color ) {
     151        },
     152
     153        paintElement: function( $element, colorType ) {
     154            var xml, encoded, color;
     155
     156            if ( ! colorType || ! colorscheme.hasOwnProperty( colorType ) ) {
     157                return;
     158            }
     159
     160            color = colorscheme[ colorType ];
    85161
    86162            // only accept hex colors: #101 or #101010
    87             if ( ! color.match( /^(#[0-9a-f]{3}|#[0-9a-f]{6})$/i ) )
     163            if ( ! color.match( /^(#[0-9a-f]{3}|#[0-9a-f]{6})$/i ) ) {
    88164                return;
    89 
    90             var xml = $element.data( 'mp6-svg-' + color ),
    91                 base64;
     165            }
     166
     167            xml = $element.data( 'mp6-svg-' + color );
    92168
    93169            if ( ! xml ) {
    94 
    95                 base64 = $element.css( 'background-image' ).match( /.+data:image\/svg\+xml;base64,(.+)\)/ );
    96 
    97                 if ( ! base64 )
     170                encoded = $element.css( 'background-image' ).match( /.+data:image\/svg\+xml;base64,(.+?)['"] ?\)/ );
     171
     172                if ( ! encoded || ! encoded[1] ) {
    98173                    return;
    99 
    100                 try {
    101                     xml = window.atob( base64[1] );
    102                 } catch ( e ) {
    103                     xml = $.base64.atob( base64[1] );
     174                }
     175
     176                if ( 'atob' in window ) {
     177                    xml = window.atob( encoded[1] );
     178                } else {
     179                    xml = base64.atob( encoded[1] );
    104180                }
    105181
    … …  
    113189                xml = xml.replace( /fill:.*?;/g, 'fill: ' + color + ';');
    114190
    115                 try {
     191                if ( 'btoa' in window ) {
    116192                    xml = window.btoa( xml );
    117                 } catch ( e ) {
    118                     xml = $.base64.btoa( xml );
     193                } else {
     194                    xml = base64.btoa( xml );
    119195                }
    120196
    121197                $element.data( 'mp6-svg-' + color, xml );
    122 
    123198            }
    124199
    125200            $element.attr( 'style', 'background-image: url("data:image/svg+xml;base64,' + xml + '") !important;' );
    126 
    127         }
    128 
     201        }
    129202    };
    130203
    131204})( jQuery, window, document );
    132 
    133 /*!
    134  * Customized for MP6
    135  *
    136  * Based on jquery.base64.js 0.0.3 - https://github.com/yckart/jquery.base64.js
    137  *
    138  * Based upon: https://gist.github.com/Yaffle/1284012
    139  *
    140  * Copyright (c) 2012 Yannick Albert (http://yckart.com)
    141  * Licensed under the MIT license
    142  * http://www.opensource.org/licenses/mit-license.php
    143  **/
    144 ;(function($) {
    145 
    146     var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/',
    147         a256 = '',
    148         r64 = [256],
    149         r256 = [256],
    150         i = 0,
    151         c, Plugin;
    152 
    153     while(i < 256) {
    154         c = String.fromCharCode(i);
    155         a256 += c;
    156         r256[i] = i;
    157         r64[i] = b64.indexOf(c);
    158         ++i;
    159     }
    160 
    161     function code(s, discard, alpha, beta, w1, w2) {
    162         s = String(s);
    163         var buffer = 0,
    164             i = 0,
    165             length = s.length,
    166             result = '',
    167             bitsInBuffer = 0,
    168             tmp;
    169 
    170         while(i < length) {
    171             c = s.charCodeAt(i);
    172             c = c < 256 ? alpha[c] : -1;
    173 
    174             buffer = (buffer << w1) + c;
    175             bitsInBuffer += w1;
    176 
    177             while(bitsInBuffer >= w2) {
    178                 bitsInBuffer -= w2;
    179                 tmp = buffer >> bitsInBuffer;
    180                 result += beta.charAt(tmp);
    181                 buffer ^= tmp << bitsInBuffer;
    182             }
    183             ++i;
    184         }
    185         if(!discard && bitsInBuffer > 0) result += beta.charAt(buffer << (w2 - bitsInBuffer));
    186         return result;
    187     }
    188 
    189     Plugin = $.base64 = function(dir, input, encode) {
    190             return input ? Plugin[dir](input, encode) : dir ? null : this;
    191         };
    192 
    193     $.base64.btoa = function(plain) {
    194         plain = code(plain, false, r256, b64, 8, 6);
    195         return plain + '===='.slice((plain.length % 4) || 4);
    196     };
    197 
    198     $.base64.atob = function(coded) {
    199         coded = coded.replace(/[^A-Za-z0-9\+\/\=]/g, '');
    200         coded = String(coded).split('=');
    201         var i = coded.length;
    202         do {--i;
    203             coded[i] = code(coded[i], true, r64, a256, 6, 8);
    204         } while (i > 0);
    205         coded = coded.join('');
    206         return coded;
    207     };
    208 }(jQuery));

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

    r26596 r26601  
    393393    $scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'media-models' ), false, 1 );
    394394
    395     $scripts->add( 'svg-painter', '/wp-includes/js/svg-painter.js' );
    396 
    397395    if ( is_admin() ) {
    398396        $scripts->add( 'admin-tags', "/wp-admin/js/tags$suffix.js", array('jquery', 'wp-ajax-response'), false, 1 );
    … …  
    517515        $scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array( 'wp-color-picker', 'media-views' ), false, 1 );
    518516        $scripts->add( 'media-gallery', "/wp-admin/js/media-gallery$suffix.js", array('jquery'), false, 1 );
     517
     518        $scripts->add( 'svg-painter', '/wp-includes/js/svg-painter.js', array( 'jquery' ), false, 1 );
    519519    }
    520520}
Note: See TracChangeset for help on using the changeset viewer.