Mercurial > hg > digilib-old
comparison client/src/main/webapp/jquery/svg/jquery.svganim.js @ 892:ba1eb2d821a2 mvnify
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); |