Mercurial > hg > digilib-old

comparison client/src/main/webapp/jquery/svg/jquery.svganim.js @ 892:ba1eb2d821a2 mvnify

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
rearrange sources to maven directory standard
author robcast
date Tue, 19 Apr 2011 18:44:25 +0200
parents client/digitallibrary/jquery/svg/jquery.svganim.js@ccf67eaf97ee
children
comparison
equal deleted inserted replaced
891:6584af320296 892:ba1eb2d821a2
1 /* http://keith-wood.name/svg.html
2 SVG attribute animations for jQuery v1.4.3.
3 Written by Keith Wood (kbwood{at}iinet.com.au) June 2008.
4 Dual licensed under the GPL (http://dev.jquery.com/browser/trunk/jquery/GPL-LICENSE.txt) and
5 MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) licenses.
6 Please attribute the author if you use it. */
7
8 (function($) { // Hide scope, no $ conflict
9
10 // Enable animation for all of these SVG numeric attributes -
11 // named as svg-* or svg* (with first character upper case)
12 $.each(['x', 'y', 'width', 'height', 'rx', 'ry', 'cx', 'cy', 'r', 'x1', 'y1', 'x2', 'y2',
13 'stroke-width', 'strokeWidth', 'opacity', 'fill-opacity', 'fillOpacity',
14 'stroke-opacity', 'strokeOpacity', 'font-size', 'fontSize'],
15 function(i, attrName) {
16 var ccName = attrName.charAt(0).toUpperCase() + attrName.substr(1);
17 $.fx.step['svg' + ccName] = $.fx.step['svg-' + attrName] = function(fx) {
18 var realAttrName = $.svg._attrNames[attrName] || attrName;
19 var attr = fx.elem.attributes.getNamedItem(realAttrName);
20 if (!fx.set) {
21 fx.start = (attr ? parseFloat(attr.nodeValue) : 0);
22 var offset = fx.options.curAnim['svg-' + attrName] ||
23 fx.options.curAnim['svg' + ccName];
24 if (/^[+-]=/.exec(offset)) {
25 fx.end = fx.start + parseFloat(offset.replace(/=/, ''));
26 }
27 $(fx.elem).css(realAttrName, '');
28 fx.set = true;
29 }
30 var value = (fx.pos * (fx.end - fx.start) + fx.start) + (fx.unit == '%' ? '%' : '');
31 (attr ? attr.nodeValue = value : fx.elem.setAttribute(realAttrName, value));
32 };
33 }
34 );
35
36 // Enable animation for the SVG viewBox attribute
37 $.fx.step['svgViewBox'] = $.fx.step['svg-viewBox'] = function(fx) {
38 var attr = fx.elem.attributes.getNamedItem('viewBox');
39 if (!fx.set) {
40 fx.start = parseViewBox(attr ? attr.nodeValue : '');
41 var offset = fx.options.curAnim['svg-viewBox'] || fx.options.curAnim['svgViewBox'];
42 fx.end = parseViewBox(offset);
43 if (/^[+-]=/.exec(offset)) {
44 offset = offset.split(' ');
45 while (offset.length < 4) {
46 offset.push('0');
47 }
48 for (var i = 0; i < 4; i++) {
49 if (/^[+-]=/.exec(offset[i])) {
50 fx.end[i] = fx.start[i] + parseFloat(offset[i].replace(/=/, ''));
51 }
52 }
53 }
54 fx.set = true;
55 }
56 var value = $.map(fx.start, function(n, i) {
57 return (fx.pos * (fx.end[i] - n) + n);
58 }).join(' ');
59 (attr ? attr.nodeValue = value : fx.elem.setAttribute('viewBox', value));
60 };
61
62 /* Parse a viewBox definition: x, y, width, height.
63 @param value (string) the definition
64 @return (number[4]) the extracted values */
65 function parseViewBox(value) {
66 var viewBox = value.split(' ');
67 for (var i = 0; i < viewBox.length; i++) {
68 viewBox[i] = parseFloat(viewBox[i]);
69 if (isNaN(viewBox[i])) {
70 viewBox[i] = 0;
71 }
72 }
73 while (viewBox.length < 4) {
74 viewBox.push(0);
75 }
76 return viewBox;
77 }
78
79 // Enable animation for the SVG transform attribute
80 $.fx.step['svgTransform'] = $.fx.step['svg-transform'] = function(fx) {
81 var attr = fx.elem.attributes.getNamedItem('transform');
82 if (!fx.set) {
83 fx.start = parseTransform(attr ? attr.nodeValue : '');
84 fx.end = parseTransform(fx.end, fx.start);
85 fx.set = true;
86 }
87 var transform = '';
88 for (var i = 0; i < fx.end.order.length; i++) {
89 switch (fx.end.order.charAt(i)) {
90 case 't':
91 transform += (fx.start.translateX != fx.end.translateX || fx.start.translateY != fx.end.translateY ?
92 ' translate(' + (fx.pos * (fx.end.translateX - fx.start.translateX) + fx.start.translateX) + ',' +
93 (fx.pos * (fx.end.translateY - fx.start.translateY) + fx.start.translateY) + ')' : '');
94 break;
95 case 's':
96 transform += (fx.start.scaleX != fx.end.scaleX || fx.start.scaleY != fx.end.scaleY ?
97 ' scale(' + (fx.pos * (fx.end.scaleX - fx.start.scaleX) + fx.start.scaleX) + ',' +
98 (fx.pos * (fx.end.scaleY - fx.start.scaleY) + fx.start.scaleY) + ')' : '');
99 break;
100 case 'r':
101 transform += (fx.start.rotateA != fx.end.rotateA ||
102 fx.start.rotateX != fx.end.rotateX || fx.start.rotateY != fx.end.rotateY ?
103 ' rotate(' + (fx.pos * (fx.end.rotateA - fx.start.rotateA) + fx.start.rotateA) + ',' +
104 (fx.pos * (fx.end.rotateX - fx.start.rotateX) + fx.start.rotateX) + ',' +
105 (fx.pos * (fx.end.rotateY - fx.start.rotateY) + fx.start.rotateY) + ')' : '');
106 break;
107 case 'x':
108 transform += (fx.start.skewX != fx.end.skewX ?
109 ' skewX(' + (fx.pos * (fx.end.skewX - fx.start.skewX) + fx.start.skewX) + ')' : '');
110 case 'y':
111 transform += (fx.start.skewY != fx.end.skewY ?
112 ' skewY(' + (fx.pos * (fx.end.skewY - fx.start.skewY) + fx.start.skewY) + ')' : '');
113 break;
114 case 'm':
115 var matrix = '';
116 for (var j = 0; j < 6; j++) {
117 matrix += ',' + (fx.pos * (fx.end.matrix[j] - fx.start.matrix[j]) + fx.start.matrix[j]);
118 }
119 transform += ' matrix(' + matrix.substr(1) + ')';
120 break;
121 }
122 }
123 (attr ? attr.nodeValue = transform : fx.elem.setAttribute('transform', transform));
124 };
125
126 /* Decode a transform string and extract component values.
127 @param value (string) the transform string to parse
128 @param original (object) the settings from the original node
129 @return (object) the combined transformation attributes */
130 function parseTransform(value, original) {
131 value = value || '';
132 if (typeof value == 'object') {
133 value = value.nodeValue;
134 }
135 var transform = $.extend({translateX: 0, translateY: 0, scaleX: 0, scaleY: 0,
136 rotateA: 0, rotateX: 0, rotateY: 0, skewX: 0, skewY: 0,
137 matrix: [0, 0, 0, 0, 0, 0]}, original || {});
138 transform.order = '';
139 var pattern = /([a-zA-Z]+)\(\s*([+-]?[\d\.]+)\s*(?:[\s,]\s*([+-]?[\d\.]+)\s*(?:[\s,]\s*([+-]?[\d\.]+)\s*(?:[\s,]\s*([+-]?[\d\.]+)\s*[\s,]\s*([+-]?[\d\.]+)\s*[\s,]\s*([+-]?[\d\.]+)\s*)?)?)?\)/g;
140 var result = pattern.exec(value);
141 while (result) {
142 switch (result[1]) {
143 case 'translate':
144 transform.order += 't';
145 transform.translateX = parseFloat(result[2]);
146 transform.translateY = (result[3] ? parseFloat(result[3]) : 0);
147 break;
148 case 'scale':
149 transform.order += 's';
150 transform.scaleX = parseFloat(result[2]);
151 transform.scaleY = (result[3] ? parseFloat(result[3]) : transform.scaleX);
152 break;
153 case 'rotate':
154 transform.order += 'r';
155 transform.rotateA = parseFloat(result[2]);
156 transform.rotateX = (result[3] ? parseFloat(result[3]) : 0);
157 transform.rotateY = (result[4] ? parseFloat(result[4]) : 0);
158 break;
159 case 'skewX':
160 transform.order += 'x';
161 transform.skewX = parseFloat(result[2]);
162 break;
163 case 'skewY':
164 transform.order += 'y';
165 transform.skewY = parseFloat(result[2]);
166 break;
167 case 'matrix':
168 transform.order += 'm';
169 transform.matrix = [parseFloat(result[2]), parseFloat(result[3]),
170 parseFloat(result[4]), parseFloat(result[5]),
171 parseFloat(result[6]), parseFloat(result[7])];
172 break;
173 }
174 result = pattern.exec(value);
175 }
176 return transform;
177 }
178
179 // Enable animation for all of these SVG colour properties - based on jquery.color.js
180 $.each(['fill', 'stroke'],
181 function(i, attrName) {
182 var ccName = attrName.charAt(0).toUpperCase() + attrName.substr(1);
183 $.fx.step['svg' + ccName] = $.fx.step['svg-' + attrName] = function(fx) {
184 if (!fx.set) {
185 fx.start = getColour(fx.elem, attrName);
186 var toNone = (fx.end == 'none');
187 fx.end = (toNone ? getColour(fx.elem.parentNode, attrName) : getRGB(fx.end));
188 fx.end[3] = toNone;
189 $(fx.elem).css(attrName, '');
190 fx.set = true;
191 }
192 var attr = fx.elem.attributes.getNamedItem(attrName);
193 var colour = 'rgb(' + [
194 Math.min(Math.max(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0], 10), 0), 255),
195 Math.min(Math.max(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1], 10), 0), 255),
196 Math.min(Math.max(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2], 10), 0), 255)
197 ].join(',') + ')';
198 colour = (fx.end[3] && fx.state == 1 ? 'none' : colour);
199 (attr ? attr.nodeValue = colour : fx.elem.setAttribute(attrName, colour));
200 }
201 }
202 );
203
204 /* Find this attribute value somewhere up the node hierarchy.
205 @param elem (element) the starting element to find the attribute
206 @param attr (string) the attribute name
207 @return (number[3]) RGB components for the attribute colour */
208 function getColour(elem, attr) {
209 var colour;
210 do {
211 colour = (elem.attributes && elem.attributes.getNamedItem(attr) ?
212 elem.attributes.getNamedItem(attr).nodeValue : '');
213 // Keep going until we find an element that has colour, or exit SVG
214 if ((colour != '' && colour != 'none') || $(elem).hasClass('hasSVG')) {
215 break;
216 }
217 } while (elem = elem.parentNode);
218 return getRGB(colour);
219 }
220
221 /* Parse strings looking for common colour formats.
222 @param colour (string) colour description to parse
223 @return (number[3]) RGB components of this colour */
224 function getRGB(colour) {
225 var result;
226 // Check if we're already dealing with an array of colors
227 if (colour && colour.constructor == Array && (colour.length == 3 || colour.length == 4)) {
228 return colour;
229 }
230 // Look for rgb(num,num,num)
231 if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(colour)) {
232 return [parseInt(result[1], 10), parseInt(result[2], 10), parseInt(result[3], 10)];
233 }
234 // Look for rgb(num%,num%,num%)
235 if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(colour)) {
236 return [parseFloat(result[1]) * 2.55, parseFloat(result[2]) * 2.55,
237 parseFloat(result[3]) * 2.55];
238 }
239 // Look for #a0b1c2
240 if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(colour)) {
241 return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)];
242 }
243 // Look for #abc
244 if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(colour)) {
245 return [parseInt(result[1] + result[1], 16), parseInt(result[2] + result[2], 16),
246 parseInt(result[3] + result[3], 16)];
247 }
248 // Otherwise, we're most likely dealing with a named color
249 return colours[$.trim(colour).toLowerCase()] || colours['none'];
250 }
251
252 // The SVG named colours
253 var colours = {
254 '': [255, 255, 255, 1],
255 none: [255, 255, 255, 1],
256 aliceblue: [240, 248, 255],
257 antiquewhite: [250, 235, 215],
258 aqua: [ 0, 255, 255],
259 aquamarine: [127, 255, 212],
260 azure: [240, 255, 255],
261 beige: [245, 245, 220],
262 bisque: [255, 228, 196],
263 black: [ 0, 0, 0],
264 blanchedalmond: [255, 235, 205],
265 blue: [ 0, 0, 255],
266 blueviolet: [138, 43, 226],
267 brown: [165, 42, 42],
268 burlywood: [222, 184, 135],
269 cadetblue: [ 95, 158, 160],
270 chartreuse: [127, 255, 0],
271 chocolate: [210, 105, 30],
272 coral: [255, 127, 80],
273 cornflowerblue: [100, 149, 237],
274 cornsilk: [255, 248, 220],
275 crimson: [220, 20, 60],
276 cyan: [ 0, 255, 255],
277 darkblue: [ 0, 0, 139],
278 darkcyan: [ 0, 139, 139],
279 darkgoldenrod: [184, 134, 11],
280 darkgray: [169, 169, 169],
281 darkgreen: [ 0, 100, 0],
282 darkgrey: [169, 169, 169],
283 darkkhaki: [189, 183, 107],
284 darkmagenta: [139, 0, 139],
285 darkolivegreen: [ 85, 107, 47],
286 darkorange: [255, 140, 0],
287 darkorchid: [153, 50, 204],
288 darkred: [139, 0, 0],
289 darksalmon: [233, 150, 122],
290 darkseagreen: [143, 188, 143],
291 darkslateblue: [ 72, 61, 139],
292 darkslategray: [ 47, 79, 79],
293 darkslategrey: [ 47, 79, 79],
294 darkturquoise: [ 0, 206, 209],
295 darkviolet: [148, 0, 211],
296 deeppink: [255, 20, 147],
297 deepskyblue: [ 0, 191, 255],
298 dimgray: [105, 105, 105],
299 dimgrey: [105, 105, 105],
300 dodgerblue: [ 30, 144, 255],
301 firebrick: [178, 34, 34],
302 floralwhite: [255, 250, 240],
303 forestgreen: [ 34, 139, 34],
304 fuchsia: [255, 0, 255],
305 gainsboro: [220, 220, 220],
306 ghostwhite: [248, 248, 255],
307 gold: [255, 215, 0],
308 goldenrod: [218, 165, 32],
309 gray: [128, 128, 128],
310 grey: [128, 128, 128],
311 green: [ 0, 128, 0],
312 greenyellow: [173, 255, 47],
313 honeydew: [240, 255, 240],
314 hotpink: [255, 105, 180],
315 indianred: [205, 92, 92],
316 indigo: [ 75, 0, 130],
317 ivory: [255, 255, 240],
318 khaki: [240, 230, 140],
319 lavender: [230, 230, 250],
320 lavenderblush: [255, 240, 245],
321 lawngreen: [124, 252, 0],
322 lemonchiffon: [255, 250, 205],
323 lightblue: [173, 216, 230],
324 lightcoral: [240, 128, 128],
325 lightcyan: [224, 255, 255],
326 lightgoldenrodyellow: [250, 250, 210],
327 lightgray: [211, 211, 211],
328 lightgreen: [144, 238, 144],
329 lightgrey: [211, 211, 211],
330 lightpink: [255, 182, 193],
331 lightsalmon: [255, 160, 122],
332 lightseagreen: [ 32, 178, 170],
333 lightskyblue: [135, 206, 250],
334 lightslategray: [119, 136, 153],
335 lightslategrey: [119, 136, 153],
336 lightsteelblue: [176, 196, 222],
337 lightyellow: [255, 255, 224],
338 lime: [ 0, 255, 0],
339 limegreen: [ 50, 205, 50],
340 linen: [250, 240, 230],
341 magenta: [255, 0, 255],
342 maroon: [128, 0, 0],
343 mediumaquamarine: [102, 205, 170],
344 mediumblue: [ 0, 0, 205],
345 mediumorchid: [186, 85, 211],
346 mediumpurple: [147, 112, 219],
347 mediumseagreen: [ 60, 179, 113],
348 mediumslateblue: [123, 104, 238],
349 mediumspringgreen: [ 0, 250, 154],
350 mediumturquoise: [ 72, 209, 204],
351 mediumvioletred: [199, 21, 133],
352 midnightblue: [ 25, 25, 112],
353 mintcream: [245, 255, 250],
354 mistyrose: [255, 228, 225],
355 moccasin: [255, 228, 181],
356 navajowhite: [255, 222, 173],
357 navy: [ 0, 0, 128],
358 oldlace: [253, 245, 230],
359 olive: [128, 128, 0],
360 olivedrab: [107, 142, 35],
361 orange: [255, 165, 0],
362 orangered: [255, 69, 0],
363 orchid: [218, 112, 214],
364 palegoldenrod: [238, 232, 170],
365 palegreen: [152, 251, 152],
366 paleturquoise: [175, 238, 238],
367 palevioletred: [219, 112, 147],
368 papayawhip: [255, 239, 213],
369 peachpuff: [255, 218, 185],
370 peru: [205, 133, 63],
371 pink: [255, 192, 203],
372 plum: [221, 160, 221],
373 powderblue: [176, 224, 230],
374 purple: [128, 0, 128],
375 red: [255, 0, 0],
376 rosybrown: [188, 143, 143],
377 royalblue: [ 65, 105, 225],
378 saddlebrown: [139, 69, 19],
379 salmon: [250, 128, 114],
380 sandybrown: [244, 164, 96],
381 seagreen: [ 46, 139, 87],
382 seashell: [255, 245, 238],
383 sienna: [160, 82, 45],
384 silver: [192, 192, 192],
385 skyblue: [135, 206, 235],
386 slateblue: [106, 90, 205],
387 slategray: [112, 128, 144],
388 slategrey: [112, 128, 144],
389 snow: [255, 250, 250],
390 springgreen: [ 0, 255, 127],
391 steelblue: [ 70, 130, 180],
392 tan: [210, 180, 140],
393 teal: [ 0, 128, 128],
394 thistle: [216, 191, 216],
395 tomato: [255, 99, 71],
396 turquoise: [ 64, 224, 208],
397 violet: [238, 130, 238],
398 wheat: [245, 222, 179],
399 white: [255, 255, 255],
400 whitesmoke: [245, 245, 245],
401 yellow: [255, 255, 0],
402 yellowgreen: [154, 205, 50]
403 };
404
405 })(jQuery);