root / ui / static / jQueryRotate.js @ f87e79a4
History | View | Annotate | Download (13.3 kB)
1 | 24d0c6a9 | Christodoulos Psaltis | // VERSION: 1.7 LAST UPDATE: 16.12.2010
|
---|---|---|---|
2 | 24d0c6a9 | Christodoulos Psaltis | /*
|
3 | 24d0c6a9 | Christodoulos Psaltis | * THIS IS FREE SCRIPT BUT LEAVE THIS COMMENT IF
|
4 | 24d0c6a9 | Christodoulos Psaltis | * YOU WANT USE THIS CODE ON YOUR SITE
|
5 | 24d0c6a9 | Christodoulos Psaltis | *
|
6 | 24d0c6a9 | Christodoulos Psaltis | * Made by Wilq32, wilq32@gmail.com, Wroclaw, Poland, 01.2009
|
7 | 24d0c6a9 | Christodoulos Psaltis | * http://wilq32.blogspot.com
|
8 | 24d0c6a9 | Christodoulos Psaltis | *
|
9 | 24d0c6a9 | Christodoulos Psaltis | */
|
10 | 24d0c6a9 | Christodoulos Psaltis | /*
|
11 | 24d0c6a9 | Christodoulos Psaltis | Description:
|
12 | 24d0c6a9 | Christodoulos Psaltis | |
13 | 24d0c6a9 | Christodoulos Psaltis | This is an final product of a Wilq32.PhotoEffect Snippet. Actually you can
|
14 | 24d0c6a9 | Christodoulos Psaltis | use this simple and tiny script to get effect of rotated images directly
|
15 | 24d0c6a9 | Christodoulos Psaltis | from client side (for ex. user generated content), and animate them using
|
16 | 24d0c6a9 | Christodoulos Psaltis | own functions.
|
17 | 24d0c6a9 | Christodoulos Psaltis | |
18 | 24d0c6a9 | Christodoulos Psaltis | |
19 | 24d0c6a9 | Christodoulos Psaltis | Notices:
|
20 | 24d0c6a9 | Christodoulos Psaltis | |
21 | 24d0c6a9 | Christodoulos Psaltis | Include script after including main jQuery. Whole plugin uses jQuery
|
22 | 24d0c6a9 | Christodoulos Psaltis | namespace and should be compatible with older version (unchecked).
|
23 | 24d0c6a9 | Christodoulos Psaltis | |
24 | 24d0c6a9 | Christodoulos Psaltis | Usage:
|
25 | 24d0c6a9 | Christodoulos Psaltis | |
26 | 24d0c6a9 | Christodoulos Psaltis | jQuery(imgElement).rotate(angleValue)
|
27 | 24d0c6a9 | Christodoulos Psaltis | jQuery(imgElement).rotate(parameters)
|
28 | 24d0c6a9 | Christodoulos Psaltis | jQuery(imgElement).rotateAnimation(parameters)
|
29 | 24d0c6a9 | Christodoulos Psaltis | jQuery(imgElement).rotateAnimation(parameters)
|
30 | 24d0c6a9 | Christodoulos Psaltis | |
31 | 24d0c6a9 | Christodoulos Psaltis | |
32 | 24d0c6a9 | Christodoulos Psaltis | |
33 | 24d0c6a9 | Christodoulos Psaltis | Returns:
|
34 | 24d0c6a9 | Christodoulos Psaltis | |
35 | 24d0c6a9 | Christodoulos Psaltis | jQueryRotateElement - !!! NOTICE !!! function return rotateElement
|
36 | 24d0c6a9 | Christodoulos Psaltis | instance to help connect events with actually created 'rotation' element.
|
37 | 24d0c6a9 | Christodoulos Psaltis | |
38 | 24d0c6a9 | Christodoulos Psaltis | Parameters:
|
39 | 24d0c6a9 | Christodoulos Psaltis | |
40 | 24d0c6a9 | Christodoulos Psaltis | ({angle:angleValue,
|
41 | 24d0c6a9 | Christodoulos Psaltis | [animateAngle:animateAngleValue],
|
42 | 24d0c6a9 | Christodoulos Psaltis | [easing:easingFunction],
|
43 | 24d0c6a9 | Christodoulos Psaltis | [duration:durationValue],
|
44 | 24d0c6a9 | Christodoulos Psaltis | !!! DEPRECATED !!! [maxAngle:maxAngleValue],
|
45 | 24d0c6a9 | Christodoulos Psaltis | !!! DEPRECATED !!! [minAngle:minAngleValue],
|
46 | 24d0c6a9 | Christodoulos Psaltis | [callback:callbackFunction],
|
47 | 24d0c6a9 | Christodoulos Psaltis | [animatedGif:animatedGifBoolean],
|
48 | 24d0c6a9 | Christodoulos Psaltis | [bind:[{event: function},{event:function} ] })
|
49 | 24d0c6a9 | Christodoulos Psaltis | jQuery(imgElement).rotateAnimation
|
50 | 24d0c6a9 | Christodoulos Psaltis | |
51 | 24d0c6a9 | Christodoulos Psaltis | Where:
|
52 | 24d0c6a9 | Christodoulos Psaltis | |
53 | 24d0c6a9 | Christodoulos Psaltis | - angleValue - clockwise rotation given in degrees,
|
54 | 24d0c6a9 | Christodoulos Psaltis | - [animateAngleValue] - optional parameter, animate rotating into this value,
|
55 | 24d0c6a9 | Christodoulos Psaltis | - [easing] - optional parameter, function to control animation speed - supports native easing
|
56 | 24d0c6a9 | Christodoulos Psaltis | function and a jquery easing plugin, default: easeOutQuart
|
57 | 24d0c6a9 | Christodoulos Psaltis | - [duration] - optional parameter, duration of a animation - default 1000ms
|
58 | 24d0c6a9 | Christodoulos Psaltis | - [maxAngleValue] - !!! DEPRECATED !!! optional parameter, maximum angle possible for animation,
|
59 | 24d0c6a9 | Christodoulos Psaltis | - [minAngleValue] - !!! DEPRECATED !!! optional parameter, minimum angle possible for animation,
|
60 | 24d0c6a9 | Christodoulos Psaltis | - [callbackFunction] - optional function to run after animation is done
|
61 | 24d0c6a9 | Christodoulos Psaltis | - [animatedGifBoolean](boolean) - optional set to display animated gif in firefox/chrome/safari
|
62 | 24d0c6a9 | Christodoulos Psaltis | !!! this might slow down browser because it need to render image again and
|
63 | 24d0c6a9 | Christodoulos Psaltis | again to display animation,
|
64 | 24d0c6a9 | Christodoulos Psaltis | - [bind: [ {event: function}...] -optional parameter, list of events binded
|
65 | 24d0c6a9 | Christodoulos Psaltis | to newly created rotateable object
|
66 | 24d0c6a9 | Christodoulos Psaltis | |
67 | 24d0c6a9 | Christodoulos Psaltis | Examples:
|
68 | 24d0c6a9 | Christodoulos Psaltis | |
69 | 24d0c6a9 | Christodoulos Psaltis | $(document).ready(function()
|
70 | 24d0c6a9 | Christodoulos Psaltis | {
|
71 | 24d0c6a9 | Christodoulos Psaltis | $('#image').rotate(-25);
|
72 | 24d0c6a9 | Christodoulos Psaltis | });
|
73 | 24d0c6a9 | Christodoulos Psaltis | |
74 | 24d0c6a9 | Christodoulos Psaltis | $(document).ready(function()
|
75 | 24d0c6a9 | Christodoulos Psaltis | {
|
76 | 24d0c6a9 | Christodoulos Psaltis | $('#image2').rotate({angle:5});
|
77 | 24d0c6a9 | Christodoulos Psaltis | });
|
78 | 24d0c6a9 | Christodoulos Psaltis | |
79 | 24d0c6a9 | Christodoulos Psaltis | $(document).ready(function()
|
80 | 24d0c6a9 | Christodoulos Psaltis | {
|
81 | 24d0c6a9 | Christodoulos Psaltis | var rot=$('#image3').rotate({maxAngle:25,minAngle:-55, duration:570,
|
82 | 24d0c6a9 | Christodoulos Psaltis | easing:$.easing.easeInOutExpo,
|
83 | 24d0c6a9 | Christodoulos Psaltis | bind:
|
84 | 24d0c6a9 | Christodoulos Psaltis | [
|
85 | 24d0c6a9 | Christodoulos Psaltis | {"mouseover":function(){rot[0].rotateAnimation(85);}},
|
86 | 24d0c6a9 | Christodoulos Psaltis | {"mouseout":function(){rot[0].rotateAnimation(-35);}}
|
87 | 24d0c6a9 | Christodoulos Psaltis | ]
|
88 | 24d0c6a9 | Christodoulos Psaltis | });
|
89 | 24d0c6a9 | Christodoulos Psaltis | });
|
90 | 24d0c6a9 | Christodoulos Psaltis | */
|
91 | 24d0c6a9 | Christodoulos Psaltis | |
92 | 24d0c6a9 | Christodoulos Psaltis | (function($) { |
93 | 24d0c6a9 | Christodoulos Psaltis | var supportedCSS,styles=document.getElementsByTagName("head")[0].style,toCheck="transformProperty WebkitTransform OTransform msTransform".split(" "); //MozTransform <- firefox works slower with css!!! |
94 | 24d0c6a9 | Christodoulos Psaltis | for (var a=0;a<toCheck.length;a++) if (styles[toCheck[a]] !== undefined) supportedCSS = toCheck[a]; |
95 | 24d0c6a9 | Christodoulos Psaltis | // Bad eval to preven google closure to remove it from code o_O
|
96 | 24d0c6a9 | Christodoulos Psaltis | // After compresion replace it back to var IE = 'v' == '\v'
|
97 | 24d0c6a9 | Christodoulos Psaltis | var IE = eval('"v"=="\v"'); |
98 | 24d0c6a9 | Christodoulos Psaltis | |
99 | 24d0c6a9 | Christodoulos Psaltis | jQuery.fn.extend({ |
100 | 24d0c6a9 | Christodoulos Psaltis | ImageRotate:function(parameters) |
101 | 24d0c6a9 | Christodoulos Psaltis | { |
102 | 24d0c6a9 | Christodoulos Psaltis | // If this element is already a Wilq32.PhotoEffect object, skip creation
|
103 | 24d0c6a9 | Christodoulos Psaltis | if (this.Wilq32&&this.Wilq32.PhotoEffect) return; |
104 | 24d0c6a9 | Christodoulos Psaltis | // parameters might be applied to many objects - so because we use them later - a fresh instance is needed
|
105 | 24d0c6a9 | Christodoulos Psaltis | var paramClone = $.extend(true, {}, parameters); |
106 | 24d0c6a9 | Christodoulos Psaltis | return (new Wilq32.PhotoEffect(this.get(0),paramClone))._temp; |
107 | 24d0c6a9 | Christodoulos Psaltis | }, |
108 | 24d0c6a9 | Christodoulos Psaltis | rotate:function(parameters) |
109 | 24d0c6a9 | Christodoulos Psaltis | { |
110 | 24d0c6a9 | Christodoulos Psaltis | if (this.length===0||typeof parameters=="undefined") return; |
111 | 24d0c6a9 | Christodoulos Psaltis | if (typeof parameters=="number") parameters={angle:parameters}; |
112 | 24d0c6a9 | Christodoulos Psaltis | var returned=[];
|
113 | 24d0c6a9 | Christodoulos Psaltis | for (var i=0,i0=this.length;i<i0;i++) |
114 | 24d0c6a9 | Christodoulos Psaltis | { |
115 | 24d0c6a9 | Christodoulos Psaltis | var element=this.get(i); |
116 | 24d0c6a9 | Christodoulos Psaltis | if (typeof element.Wilq32 == "undefined") |
117 | 24d0c6a9 | Christodoulos Psaltis | returned.push($($(element).ImageRotate(parameters))); |
118 | 24d0c6a9 | Christodoulos Psaltis | else
|
119 | 24d0c6a9 | Christodoulos Psaltis | { |
120 | 24d0c6a9 | Christodoulos Psaltis | element.Wilq32.PhotoEffect._rotate(parameters.angle); |
121 | 24d0c6a9 | Christodoulos Psaltis | } |
122 | 24d0c6a9 | Christodoulos Psaltis | } |
123 | 24d0c6a9 | Christodoulos Psaltis | return returned;
|
124 | 24d0c6a9 | Christodoulos Psaltis | }, |
125 | 24d0c6a9 | Christodoulos Psaltis | |
126 | 24d0c6a9 | Christodoulos Psaltis | rotateAnimation:function(parameters) |
127 | 24d0c6a9 | Christodoulos Psaltis | { |
128 | 24d0c6a9 | Christodoulos Psaltis | if (this.length===0||typeof parameters=="undefined") return; |
129 | 24d0c6a9 | Christodoulos Psaltis | if (typeof parameters=="number") parameters={animateAngle:parameters}; |
130 | 24d0c6a9 | Christodoulos Psaltis | var returned=[];
|
131 | 24d0c6a9 | Christodoulos Psaltis | for (var i=0,i0=this.length;i<i0;i++) |
132 | 24d0c6a9 | Christodoulos Psaltis | { |
133 | 24d0c6a9 | Christodoulos Psaltis | var element=this.get(i); |
134 | 24d0c6a9 | Christodoulos Psaltis | if (typeof element.Wilq32 == "undefined") |
135 | 24d0c6a9 | Christodoulos Psaltis | returned.push($($(element).ImageRotate(parameters))); |
136 | 24d0c6a9 | Christodoulos Psaltis | else
|
137 | 24d0c6a9 | Christodoulos Psaltis | { |
138 | 24d0c6a9 | Christodoulos Psaltis | element.Wilq32.PhotoEffect.rotateAnimation(parameters); |
139 | 24d0c6a9 | Christodoulos Psaltis | } |
140 | 24d0c6a9 | Christodoulos Psaltis | } |
141 | 24d0c6a9 | Christodoulos Psaltis | return returned;
|
142 | 24d0c6a9 | Christodoulos Psaltis | } |
143 | 24d0c6a9 | Christodoulos Psaltis | |
144 | 24d0c6a9 | Christodoulos Psaltis | }); |
145 | 24d0c6a9 | Christodoulos Psaltis | |
146 | 24d0c6a9 | Christodoulos Psaltis | // Library agnostic interface
|
147 | 24d0c6a9 | Christodoulos Psaltis | |
148 | 24d0c6a9 | Christodoulos Psaltis | Wilq32=window.Wilq32||{}; |
149 | 24d0c6a9 | Christodoulos Psaltis | Wilq32.PhotoEffect=(function(){
|
150 | 24d0c6a9 | Christodoulos Psaltis | function setupParameters(img,parameters){ |
151 | 24d0c6a9 | Christodoulos Psaltis | this._img = img;
|
152 | 24d0c6a9 | Christodoulos Psaltis | this._parameters = parameters || {};
|
153 | 24d0c6a9 | Christodoulos Psaltis | this._parameters.angle = this._angle = parameters.angle || 0; |
154 | 24d0c6a9 | Christodoulos Psaltis | this._parameters.animateAngle = typeof parameters.animateAngle=="number" ? parameters.animateAngle : this._angle; |
155 | 24d0c6a9 | Christodoulos Psaltis | this._parameters.easing = parameters.easing || function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; } |
156 | 24d0c6a9 | Christodoulos Psaltis | this._parameters.duration = parameters.duration || 1000; |
157 | 24d0c6a9 | Christodoulos Psaltis | } |
158 | 24d0c6a9 | Christodoulos Psaltis | if (supportedCSS) {
|
159 | 24d0c6a9 | Christodoulos Psaltis | return function(img,parameters){ |
160 | 24d0c6a9 | Christodoulos Psaltis | setupParameters.call(this,img,parameters);
|
161 | 24d0c6a9 | Christodoulos Psaltis | img.Wilq32 = { |
162 | 24d0c6a9 | Christodoulos Psaltis | PhotoEffect: this |
163 | 24d0c6a9 | Christodoulos Psaltis | }; |
164 | 24d0c6a9 | Christodoulos Psaltis | // TODO: needed to have a _temp variable accessible outside - used for object retrieval,
|
165 | 24d0c6a9 | Christodoulos Psaltis | // needs refactor + change name (temp is not self descriptive)
|
166 | 24d0c6a9 | Christodoulos Psaltis | // also need better passing values between functions - to FIX (remove _temp and _img at all)
|
167 | 24d0c6a9 | Christodoulos Psaltis | this._temp = this._img; |
168 | 24d0c6a9 | Christodoulos Psaltis | this._BindEvents(img,this._parameters.bind); |
169 | 24d0c6a9 | Christodoulos Psaltis | this._rotate(this._parameters.angle); |
170 | 24d0c6a9 | Christodoulos Psaltis | if (this._parameters.angle!=this._parameters.animateAngle) this.rotateAnimation(this._parameters); |
171 | 24d0c6a9 | Christodoulos Psaltis | } |
172 | 24d0c6a9 | Christodoulos Psaltis | } else {
|
173 | 24d0c6a9 | Christodoulos Psaltis | return function(img,parameters) { |
174 | 24d0c6a9 | Christodoulos Psaltis | setupParameters.call(this,img,parameters);
|
175 | 24d0c6a9 | Christodoulos Psaltis | // Make sure that class and id are also copied - just in case you would like to refeer to an newly created object
|
176 | 24d0c6a9 | Christodoulos Psaltis | this._parameters.className=img.className;
|
177 | 24d0c6a9 | Christodoulos Psaltis | this._parameters.id=img.getAttribute('id'); |
178 | 24d0c6a9 | Christodoulos Psaltis | |
179 | 24d0c6a9 | Christodoulos Psaltis | this._temp=document.createElement('span'); |
180 | 24d0c6a9 | Christodoulos Psaltis | this._temp.style.display="inline-block"; |
181 | 24d0c6a9 | Christodoulos Psaltis | this._temp.Wilq32 =
|
182 | 24d0c6a9 | Christodoulos Psaltis | { |
183 | 24d0c6a9 | Christodoulos Psaltis | PhotoEffect: this |
184 | 24d0c6a9 | Christodoulos Psaltis | }; |
185 | 24d0c6a9 | Christodoulos Psaltis | img.parentNode.insertBefore(this._temp,img);
|
186 | 24d0c6a9 | Christodoulos Psaltis | |
187 | 24d0c6a9 | Christodoulos Psaltis | if (img.complete) {
|
188 | 24d0c6a9 | Christodoulos Psaltis | this._Loader();
|
189 | 24d0c6a9 | Christodoulos Psaltis | } else {
|
190 | 24d0c6a9 | Christodoulos Psaltis | var self=this; |
191 | 24d0c6a9 | Christodoulos Psaltis | // TODO: Remove jQuery dependency
|
192 | 24d0c6a9 | Christodoulos Psaltis | jQuery(this._img).bind("load", function() |
193 | 24d0c6a9 | Christodoulos Psaltis | { |
194 | 24d0c6a9 | Christodoulos Psaltis | self._Loader(); |
195 | 24d0c6a9 | Christodoulos Psaltis | }); |
196 | 24d0c6a9 | Christodoulos Psaltis | } |
197 | 24d0c6a9 | Christodoulos Psaltis | } |
198 | 24d0c6a9 | Christodoulos Psaltis | } |
199 | 24d0c6a9 | Christodoulos Psaltis | })(); |
200 | 24d0c6a9 | Christodoulos Psaltis | |
201 | 24d0c6a9 | Christodoulos Psaltis | Wilq32.PhotoEffect.prototype={ |
202 | 24d0c6a9 | Christodoulos Psaltis | |
203 | 24d0c6a9 | Christodoulos Psaltis | rotateAnimation : function(parameters){ |
204 | 24d0c6a9 | Christodoulos Psaltis | this._parameters.animateAngle = parameters.animateAngle;
|
205 | 24d0c6a9 | Christodoulos Psaltis | this._parameters.callback = parameters.callback || this._parameters.callback || function(){}; |
206 | 24d0c6a9 | Christodoulos Psaltis | this._animateStart();
|
207 | 24d0c6a9 | Christodoulos Psaltis | }, |
208 | 24d0c6a9 | Christodoulos Psaltis | |
209 | 24d0c6a9 | Christodoulos Psaltis | _BindEvents:function(element,events){ |
210 | 24d0c6a9 | Christodoulos Psaltis | if (events)
|
211 | 24d0c6a9 | Christodoulos Psaltis | { |
212 | 24d0c6a9 | Christodoulos Psaltis | for (var a in events) if (events.hasOwnProperty(a)) |
213 | 24d0c6a9 | Christodoulos Psaltis | for (var b in events[a]) if (events[a].hasOwnProperty(b)) |
214 | 24d0c6a9 | Christodoulos Psaltis | // TODO: Remove jQuery dependency
|
215 | 24d0c6a9 | Christodoulos Psaltis | jQuery(element).bind(b,events[a][b]); |
216 | 24d0c6a9 | Christodoulos Psaltis | } |
217 | 24d0c6a9 | Christodoulos Psaltis | }, |
218 | 24d0c6a9 | Christodoulos Psaltis | |
219 | 24d0c6a9 | Christodoulos Psaltis | _Loader:(function() |
220 | 24d0c6a9 | Christodoulos Psaltis | { |
221 | 24d0c6a9 | Christodoulos Psaltis | if (IE)
|
222 | 24d0c6a9 | Christodoulos Psaltis | return function() |
223 | 24d0c6a9 | Christodoulos Psaltis | { |
224 | 24d0c6a9 | Christodoulos Psaltis | var width=this._img.width; |
225 | 24d0c6a9 | Christodoulos Psaltis | var height=this._img.height; |
226 | 24d0c6a9 | Christodoulos Psaltis | this._img.parentNode.removeChild(this._img); |
227 | 24d0c6a9 | Christodoulos Psaltis | |
228 | 24d0c6a9 | Christodoulos Psaltis | this._vimage = this.createVMLNode('image'); |
229 | 24d0c6a9 | Christodoulos Psaltis | this._vimage.src=this._img.src; |
230 | 24d0c6a9 | Christodoulos Psaltis | this._vimage.style.height=height+"px"; |
231 | 24d0c6a9 | Christodoulos Psaltis | this._vimage.style.width=width+"px"; |
232 | 24d0c6a9 | Christodoulos Psaltis | this._vimage.style.position="absolute"; // FIXES IE PROBLEM - its only rendered if its on absolute position! |
233 | 24d0c6a9 | Christodoulos Psaltis | this._vimage.style.top = "0px"; |
234 | 24d0c6a9 | Christodoulos Psaltis | this._vimage.style.left = "0px"; |
235 | 24d0c6a9 | Christodoulos Psaltis | |
236 | 24d0c6a9 | Christodoulos Psaltis | /* Group minifying a small 1px precision problem when rotating object */
|
237 | 24d0c6a9 | Christodoulos Psaltis | this._container = this.createVMLNode('group'); |
238 | 24d0c6a9 | Christodoulos Psaltis | this._container.style.width=width;
|
239 | 24d0c6a9 | Christodoulos Psaltis | this._container.style.height=height;
|
240 | 24d0c6a9 | Christodoulos Psaltis | this._container.style.position="absolute"; |
241 | 24d0c6a9 | Christodoulos Psaltis | this._container.setAttribute('coordsize',width-1+','+(height-1)); // This -1, -1 trying to fix that ugly problem |
242 | 24d0c6a9 | Christodoulos Psaltis | this._container.appendChild(this._vimage); |
243 | 24d0c6a9 | Christodoulos Psaltis | |
244 | 24d0c6a9 | Christodoulos Psaltis | this._temp.appendChild(this._container); |
245 | 24d0c6a9 | Christodoulos Psaltis | this._temp.style.position="relative"; // FIXES IE PROBLEM |
246 | 24d0c6a9 | Christodoulos Psaltis | this._temp.style.width=width+"px"; |
247 | 24d0c6a9 | Christodoulos Psaltis | this._temp.style.height=height+"px"; |
248 | 24d0c6a9 | Christodoulos Psaltis | this._temp.setAttribute('id',this._parameters.id); |
249 | 24d0c6a9 | Christodoulos Psaltis | this._temp.className=this._parameters.className; |
250 | 24d0c6a9 | Christodoulos Psaltis | |
251 | 24d0c6a9 | Christodoulos Psaltis | this._BindEvents(this._temp,this._parameters.bind); |
252 | 24d0c6a9 | Christodoulos Psaltis | _finally.call(this);
|
253 | 24d0c6a9 | Christodoulos Psaltis | |
254 | 24d0c6a9 | Christodoulos Psaltis | } |
255 | 24d0c6a9 | Christodoulos Psaltis | else
|
256 | 24d0c6a9 | Christodoulos Psaltis | return function () |
257 | 24d0c6a9 | Christodoulos Psaltis | { |
258 | 24d0c6a9 | Christodoulos Psaltis | this._temp.setAttribute('id',this._parameters.id); |
259 | 24d0c6a9 | Christodoulos Psaltis | this._temp.className=this._parameters.className; |
260 | 24d0c6a9 | Christodoulos Psaltis | |
261 | 24d0c6a9 | Christodoulos Psaltis | this._width=this._img.width; |
262 | 24d0c6a9 | Christodoulos Psaltis | this._height=this._img.height; |
263 | 24d0c6a9 | Christodoulos Psaltis | this._widthHalf=this._width/2; // used for optimisation |
264 | 24d0c6a9 | Christodoulos Psaltis | this._heightHalf=this._height/2;// used for optimisation |
265 | 24d0c6a9 | Christodoulos Psaltis | |
266 | 24d0c6a9 | Christodoulos Psaltis | var _widthMax=Math.sqrt((this._height)*(this._height) + (this._width) * (this._width)); |
267 | 24d0c6a9 | Christodoulos Psaltis | |
268 | 24d0c6a9 | Christodoulos Psaltis | this._widthAdd = _widthMax - this._width; |
269 | 24d0c6a9 | Christodoulos Psaltis | this._heightAdd = _widthMax - this._height; // widthMax because maxWidth=maxHeight |
270 | 24d0c6a9 | Christodoulos Psaltis | this._widthAddHalf=this._widthAdd/2; // used for optimisation |
271 | 24d0c6a9 | Christodoulos Psaltis | this._heightAddHalf=this._heightAdd/2;// used for optimisation |
272 | 24d0c6a9 | Christodoulos Psaltis | |
273 | 24d0c6a9 | Christodoulos Psaltis | this._img.parentNode.removeChild(this._img); |
274 | 24d0c6a9 | Christodoulos Psaltis | |
275 | 24d0c6a9 | Christodoulos Psaltis | this._aspectW = ((parseInt(this._img.style.width,10)) || this._width)/this._img.width; |
276 | 24d0c6a9 | Christodoulos Psaltis | this._aspectH = ((parseInt(this._img.style.height,10)) || this._height)/this._img.height; |
277 | 24d0c6a9 | Christodoulos Psaltis | |
278 | 24d0c6a9 | Christodoulos Psaltis | this._canvas=document.createElement('canvas'); |
279 | 24d0c6a9 | Christodoulos Psaltis | this._canvas.setAttribute('width',this._width); |
280 | 24d0c6a9 | Christodoulos Psaltis | this._canvas.style.position="relative"; |
281 | 24d0c6a9 | Christodoulos Psaltis | this._canvas.style.left = -this._widthAddHalf + "px"; |
282 | 24d0c6a9 | Christodoulos Psaltis | this._canvas.style.top = -this._heightAddHalf + "px"; |
283 | 24d0c6a9 | Christodoulos Psaltis | this._canvas.Wilq32 = this._temp.Wilq32; |
284 | 24d0c6a9 | Christodoulos Psaltis | |
285 | 24d0c6a9 | Christodoulos Psaltis | this._temp.appendChild(this._canvas); |
286 | 24d0c6a9 | Christodoulos Psaltis | this._temp.style.width=this._width+"px"; |
287 | 24d0c6a9 | Christodoulos Psaltis | this._temp.style.height=this._height+"px"; |
288 | 24d0c6a9 | Christodoulos Psaltis | |
289 | 24d0c6a9 | Christodoulos Psaltis | this._BindEvents(this._canvas,this._parameters.bind); |
290 | 24d0c6a9 | Christodoulos Psaltis | this._cnv=this._canvas.getContext('2d'); |
291 | 24d0c6a9 | Christodoulos Psaltis | _finally.call(this);
|
292 | 24d0c6a9 | Christodoulos Psaltis | } |
293 | 24d0c6a9 | Christodoulos Psaltis | function _finally(){ |
294 | 24d0c6a9 | Christodoulos Psaltis | this._rotate(this._parameters.angle); |
295 | 24d0c6a9 | Christodoulos Psaltis | if (this._parameters.angle!=this._parameters.animateAngle) this.rotateAnimation(this._parameters); |
296 | 24d0c6a9 | Christodoulos Psaltis | } |
297 | 24d0c6a9 | Christodoulos Psaltis | |
298 | 24d0c6a9 | Christodoulos Psaltis | })(), |
299 | 24d0c6a9 | Christodoulos Psaltis | |
300 | 24d0c6a9 | Christodoulos Psaltis | _animateStart:function() |
301 | 24d0c6a9 | Christodoulos Psaltis | { |
302 | 24d0c6a9 | Christodoulos Psaltis | if (this._timer) { |
303 | 24d0c6a9 | Christodoulos Psaltis | clearTimeout(this._timer);
|
304 | 24d0c6a9 | Christodoulos Psaltis | } |
305 | 24d0c6a9 | Christodoulos Psaltis | this._animateStartTime = +new Date; |
306 | 24d0c6a9 | Christodoulos Psaltis | this._animateStartAngle = this._angle; |
307 | 24d0c6a9 | Christodoulos Psaltis | this._animate();
|
308 | 24d0c6a9 | Christodoulos Psaltis | }, |
309 | 24d0c6a9 | Christodoulos Psaltis | _animate:function() |
310 | 24d0c6a9 | Christodoulos Psaltis | { |
311 | 24d0c6a9 | Christodoulos Psaltis | var actualTime = +new Date; |
312 | 24d0c6a9 | Christodoulos Psaltis | //var checkEnd = !!(Math.round(this._angle * 100 - this._parameters.animateAngle * 100)) == 0 && !!this._timer;
|
313 | 24d0c6a9 | Christodoulos Psaltis | var checkEnd = actualTime - this._animateStartTime > this._parameters.duration; |
314 | 24d0c6a9 | Christodoulos Psaltis | if (this._parameters.callback && checkEnd){ |
315 | 24d0c6a9 | Christodoulos Psaltis | this._parameters.callback();
|
316 | 24d0c6a9 | Christodoulos Psaltis | } |
317 | 24d0c6a9 | Christodoulos Psaltis | |
318 | 24d0c6a9 | Christodoulos Psaltis | // TODO: Bug for animatedGif for static rotation ? (to test)
|
319 | 24d0c6a9 | Christodoulos Psaltis | if (checkEnd && !this._parameters.animatedGif) |
320 | 24d0c6a9 | Christodoulos Psaltis | { |
321 | 24d0c6a9 | Christodoulos Psaltis | clearTimeout(this._timer);
|
322 | 24d0c6a9 | Christodoulos Psaltis | } |
323 | 24d0c6a9 | Christodoulos Psaltis | else
|
324 | 24d0c6a9 | Christodoulos Psaltis | { |
325 | 24d0c6a9 | Christodoulos Psaltis | if (this._canvas||this._vimage||this._img) { |
326 | 24d0c6a9 | Christodoulos Psaltis | // TODO: implement easing and speed of animation
|
327 | 24d0c6a9 | Christodoulos Psaltis | this._angle = this._parameters.easing(0, actualTime - this._animateStartTime, this._animateStartAngle, this._parameters.animateAngle - this._animateStartAngle, this._parameters.duration); |
328 | 24d0c6a9 | Christodoulos Psaltis | //this._angle-=(this._angle-this._parameters.animateAngle)*0.1;
|
329 | 24d0c6a9 | Christodoulos Psaltis | //if (typeof this._parameters.minAngle!="undefined") this._angle=Math.max(this._angle,this._parameters.minAngle);
|
330 | 24d0c6a9 | Christodoulos Psaltis | //if (typeof this._parameters.maxAngle!="undefined") this._angle=Math.min(this._angle,this._parameters.maxAngle);
|
331 | 24d0c6a9 | Christodoulos Psaltis | this._rotate((~~(this._angle*10))/10); |
332 | 24d0c6a9 | Christodoulos Psaltis | } |
333 | 24d0c6a9 | Christodoulos Psaltis | var self = this; |
334 | 24d0c6a9 | Christodoulos Psaltis | this._timer = setTimeout(function() |
335 | 24d0c6a9 | Christodoulos Psaltis | { |
336 | 24d0c6a9 | Christodoulos Psaltis | self._animate.call(self); |
337 | 24d0c6a9 | Christodoulos Psaltis | }, 10);
|
338 | 24d0c6a9 | Christodoulos Psaltis | } |
339 | 24d0c6a9 | Christodoulos Psaltis | }, |
340 | 24d0c6a9 | Christodoulos Psaltis | |
341 | 24d0c6a9 | Christodoulos Psaltis | _rotate : (function() |
342 | 24d0c6a9 | Christodoulos Psaltis | { |
343 | 24d0c6a9 | Christodoulos Psaltis | var rad = Math.PI/180; |
344 | 24d0c6a9 | Christodoulos Psaltis | if (IE)
|
345 | 24d0c6a9 | Christodoulos Psaltis | return function(angle) |
346 | 24d0c6a9 | Christodoulos Psaltis | { |
347 | 24d0c6a9 | Christodoulos Psaltis | this._container.style.rotation=angle+"deg"; |
348 | 24d0c6a9 | Christodoulos Psaltis | } |
349 | 24d0c6a9 | Christodoulos Psaltis | else if (supportedCSS) |
350 | 24d0c6a9 | Christodoulos Psaltis | return function(angle){ |
351 | 24d0c6a9 | Christodoulos Psaltis | this._img.style[supportedCSS]="rotate("+angle+"deg)"; |
352 | 24d0c6a9 | Christodoulos Psaltis | } |
353 | 24d0c6a9 | Christodoulos Psaltis | else
|
354 | 24d0c6a9 | Christodoulos Psaltis | return function(angle) |
355 | 24d0c6a9 | Christodoulos Psaltis | { |
356 | 24d0c6a9 | Christodoulos Psaltis | |
357 | 24d0c6a9 | Christodoulos Psaltis | if (!this._img.width||typeof angle!="number") return; |
358 | 24d0c6a9 | Christodoulos Psaltis | angle=(angle%360)* rad;
|
359 | 24d0c6a9 | Christodoulos Psaltis | // clear canvas
|
360 | 24d0c6a9 | Christodoulos Psaltis | this._canvas.width = this._width+this._widthAdd; |
361 | 24d0c6a9 | Christodoulos Psaltis | this._canvas.height = this._height+this._heightAdd; |
362 | 24d0c6a9 | Christodoulos Psaltis | |
363 | 24d0c6a9 | Christodoulos Psaltis | // REMEMBER: all drawings are read from backwards.. so first function is translate, then rotate, then translate, translate..
|
364 | 24d0c6a9 | Christodoulos Psaltis | this._cnv.translate(this._widthAddHalf,this._heightAddHalf); // at least center image on screen |
365 | 24d0c6a9 | Christodoulos Psaltis | this._cnv.translate(this._widthHalf,this._heightHalf); // we move image back to its orginal |
366 | 24d0c6a9 | Christodoulos Psaltis | this._cnv.rotate(angle); // rotate image |
367 | 24d0c6a9 | Christodoulos Psaltis | this._cnv.translate(-this._widthHalf,-this._heightHalf); // move image to its center, so we can rotate around its center |
368 | 24d0c6a9 | Christodoulos Psaltis | this._cnv.scale(this._aspectW,this._aspectH); // SCALE - if needed ;) |
369 | 24d0c6a9 | Christodoulos Psaltis | this._cnv.drawImage(this._img, 0, 0); // First - we draw image |
370 | 24d0c6a9 | Christodoulos Psaltis | } |
371 | 24d0c6a9 | Christodoulos Psaltis | |
372 | 24d0c6a9 | Christodoulos Psaltis | })() |
373 | 24d0c6a9 | Christodoulos Psaltis | } |
374 | 24d0c6a9 | Christodoulos Psaltis | |
375 | 24d0c6a9 | Christodoulos Psaltis | if (IE)
|
376 | 24d0c6a9 | Christodoulos Psaltis | { |
377 | 24d0c6a9 | Christodoulos Psaltis | Wilq32.PhotoEffect.prototype.createVMLNode=(function(){
|
378 | 24d0c6a9 | Christodoulos Psaltis | document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)"); |
379 | 24d0c6a9 | Christodoulos Psaltis | try {
|
380 | 24d0c6a9 | Christodoulos Psaltis | !document.namespaces.rvml && document.namespaces.add("rvml", "urn:schemas-microsoft-com:vml"); |
381 | 24d0c6a9 | Christodoulos Psaltis | return function (tagName) { |
382 | 24d0c6a9 | Christodoulos Psaltis | return document.createElement('<rvml:' + tagName + ' class="rvml">'); |
383 | 24d0c6a9 | Christodoulos Psaltis | }; |
384 | 24d0c6a9 | Christodoulos Psaltis | } catch (e) {
|
385 | 24d0c6a9 | Christodoulos Psaltis | return function (tagName) { |
386 | 24d0c6a9 | Christodoulos Psaltis | return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">'); |
387 | 24d0c6a9 | Christodoulos Psaltis | }; |
388 | 24d0c6a9 | Christodoulos Psaltis | } |
389 | 24d0c6a9 | Christodoulos Psaltis | })(); |
390 | 24d0c6a9 | Christodoulos Psaltis | } |
391 | 24d0c6a9 | Christodoulos Psaltis | |
392 | 24d0c6a9 | Christodoulos Psaltis | })(jQuery); |