← Back to branch summary

~canonical-sysadmins/wordpress/4.7.2

« back to all changes in this revision

Viewing changes to wp-admin/js/svg-painter.js

  • Committer: Jacek Nykis
  • Date: 2015-01-05 16:17:05 UTC
  • Revision ID: jacek.nykis@canonical.com-20150105161705-w544l1h5mcg7u4w9
Initial commit

Show diffs side-by-side

added added

removed removed

Lines of Context:
wp-admin/js/svg-painter.js
 
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 );