Diffstat (limited to 'frontend/delta/js/Clipperz/Visual.js') (more/less context) (show whitespace changes)
-rw-r--r-- | frontend/delta/js/Clipperz/Visual.js | 363 |
1 files changed, 363 insertions, 0 deletions
diff --git a/frontend/delta/js/Clipperz/Visual.js b/frontend/delta/js/Clipperz/Visual.js new file mode 100644 index 0000000..93ed725 --- a/dev/null +++ b/frontend/delta/js/Clipperz/Visual.js | |||
@@ -0,0 +1,363 @@ | |||
1 | /* | ||
2 | |||
3 | Copyright 2008-2013 Clipperz Srl | ||
4 | |||
5 | This file is part of Clipperz, the online password manager. | ||
6 | For further information about its features and functionalities please | ||
7 | refer to http://www.clipperz.com. | ||
8 | |||
9 | * Clipperz is free software: you can redistribute it and/or modify it | ||
10 | under the terms of the GNU Affero General Public License as published | ||
11 | by the Free Software Foundation, either version 3 of the License, or | ||
12 | (at your option) any later version. | ||
13 | |||
14 | * Clipperz is distributed in the hope that it will be useful, but | ||
15 | WITHOUT ANY WARRANTY; without even the implied warranty of | ||
16 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. | ||
17 | See the GNU Affero General Public License for more details. | ||
18 | |||
19 | * You should have received a copy of the GNU Affero General Public | ||
20 | License along with Clipperz. If not, see http://www.gnu.org/licenses/. | ||
21 | |||
22 | */ | ||
23 | |||
24 | if (typeof(Clipperz) == 'undefined') { Clipperz = {}; } | ||
25 | if (typeof(Clipperz.Visual) == 'undefined') { Clipperz.Visual = {}; } | ||
26 | |||
27 | Clipperz.Visual.VERSION = "0.1"; | ||
28 | Clipperz.Visual.NAME = "Clipperz.Visual"; | ||
29 | |||
30 | MochiKit.Base.update(Clipperz.Visual, { | ||
31 | |||
32 | //------------------------------------------------------------------------- | ||
33 | |||
34 | '__repr__': function () { | ||
35 | return "[" + this.NAME + " " + this.VERSION + "]"; | ||
36 | }, | ||
37 | |||
38 | //------------------------------------------------------------------------- | ||
39 | |||
40 | 'toString': function () { | ||
41 | return this.__repr__(); | ||
42 | }, | ||
43 | |||
44 | //------------------------------------------------------------------------- | ||
45 | |||
46 | 'deferredResize': function (anElement, someOptions) { | ||
47 | var deferredResult; | ||
48 | var moveTransition; | ||
49 | var scaleTransition; | ||
50 | var duration; | ||
51 | |||
52 | duration = someOptions.duration || 0.5; | ||
53 | |||
54 | deferredResult = new Clipperz.Async.Deferred("Visual.deferredResize", {trace:false}); | ||
55 | deferredResult.addCallback(MochiKit.Async.succeed, arguments[arguments.length - 1]); | ||
56 | |||
57 | moveTransition = MochiKit.Visual.Transitions.linear;//MochiKit.Visual.Transitions.sinoidal; | ||
58 | scaleTransition = MochiKit.Visual.Transitions.linear;//MochiKit.Visual.Transitions.sinoidal; | ||
59 | |||
60 | MochiKit.Style.setElementPosition(anElement, {x:someOptions.from.position.x, y:someOptions.from.position.y }, 'px'); | ||
61 | |||
62 | new MochiKit.Visual.Parallel([ | ||
63 | new MochiKit.Visual.Move(anElement, {x:someOptions.to.position.x, y:someOptions.to.position.y, mode:'absolute', transition:moveTransition, sync:true}), | ||
64 | new Clipperz.Visual.Resize(anElement, {fromSize:{h:someOptions.from.dimensions.h, w:someOptions.from.dimensions.w}, toSize:{h:someOptions.to.dimensions.h, w:someOptions.to.dimensions.w}, transition:scaleTransition, scaleContent:false, scaleFromCenter:false, restoreAfterFinish:true, sync:true}) | ||
65 | ], {duration:duration, afterFinish:MochiKit.Base.method(deferredResult, 'callback')}) | ||
66 | |||
67 | return deferredResult; | ||
68 | }, | ||
69 | |||
70 | //------------------------------------------------------------------------- | ||
71 | |||
72 | 'deferredAnimation': function (anAnimation, someParameters, someOptions) { | ||
73 | vardeferredResult; | ||
74 | var afterFinishCallback; | ||
75 | var options; | ||
76 | |||
77 | deferredResult = new Clipperz.Async.Deferred("Clipperz.Visual.deferredAnimation", {trace:false}); | ||
78 | deferredResult.addCallback(MochiKit.Async.succeed, arguments[arguments.length - 1]); | ||
79 | |||
80 | if (MochiKit.Base.isUndefinedOrNull(someOptions)) { | ||
81 | options = {} | ||
82 | } else { | ||
83 | options = someOptions; | ||
84 | } | ||
85 | |||
86 | if (MochiKit.Base.isUndefinedOrNull(someOptions['afterFinish'])) { | ||
87 | options['afterFinish'] = MochiKit.Base.noop; | ||
88 | } | ||
89 | |||
90 | MochiKit.Base.update(options, { | ||
91 | 'afterFinish': MochiKit.Base.compose(options['afterFinish'], MochiKit.Base.method(deferredResult, 'callback')) | ||
92 | }); | ||
93 | |||
94 | new anAnimation(someParameters, options); | ||
95 | |||
96 | return deferredResult; | ||
97 | }, | ||
98 | |||
99 | //------------------------------------------------------------------------- | ||
100 | |||
101 | 'deferredAnimations': function (aSinchronizationType, someAnimations, someOptions) { | ||
102 | var deferredResult; | ||
103 | varoptions; | ||
104 | |||
105 | deferredResult = new Clipperz.Async.Deferred("Visual.deferredParallelAnimations", {trace:false}); | ||
106 | deferredResult.addCallback(MochiKit.Async.succeed, arguments[arguments.length - 1]); | ||
107 | |||
108 | options = someOptions; | ||
109 | if (MochiKit.Base.isUndefinedOrNull(someOptions['afterFinish'])) { | ||
110 | options['afterFinish'] = MochiKit.Base.noop; | ||
111 | } | ||
112 | MochiKit.Base.update(options, { | ||
113 | 'afterFinish': MochiKit.Base.compose(options['afterFinish'], MochiKit.Base.method(deferredResult, 'callback')) | ||
114 | }); | ||
115 | |||
116 | new aSinchronizationType(someAnimations, options) | ||
117 | |||
118 | return deferredResult; | ||
119 | }, | ||
120 | |||
121 | //------------------------------------------------------------------------- | ||
122 | __syntaxFix__: "syntax fix" | ||
123 | |||
124 | }); | ||
125 | |||
126 | //############################################################################# | ||
127 | |||
128 | /** @id Clipperz.Visual.Resize */ | ||
129 | Clipperz.Visual.Resize = function (element, percent, options) { | ||
130 | var cls = arguments.callee; | ||
131 | if (!(this instanceof cls)) { | ||
132 | return new cls(element, percent, options); | ||
133 | } | ||
134 | this.__init__(element, percent, options); | ||
135 | }; | ||
136 | |||
137 | Clipperz.Visual.Resize.prototype = new MochiKit.Visual.Base(); | ||
138 | |||
139 | MochiKit.Base.update(Clipperz.Visual.Resize.prototype, { | ||
140 | __class__ : Clipperz.Visual.Resize, | ||
141 | |||
142 | __init__: function (element, options) { | ||
143 | this.element = MochiKit.DOM.getElement(element); | ||
144 | options = MochiKit.Base.update({ | ||
145 | scaleX: true, | ||
146 | scaleY: true, | ||
147 | scaleContent: true, | ||
148 | scaleFromCenter: false, | ||
149 | scaleMode: 'box', // 'box' or 'contents' or {} with provided values | ||
150 | syntax_fix: 'syntax fix' | ||
151 | }, options); | ||
152 | |||
153 | this.start(options); | ||
154 | }, | ||
155 | |||
156 | setup: function () { | ||
157 | this.restoreAfterFinish = this.options.restoreAfterFinish || false; | ||
158 | this.elementPositioning = MochiKit.Style.getStyle(this.element, 'position'); | ||
159 | |||
160 | var ma = MochiKit.Base.map; | ||
161 | var b = MochiKit.Base.bind; | ||
162 | this.originalStyle = {}; | ||
163 | ma(b(function (k) { this.originalStyle[k] = this.element.style[k]; }, this), ['top', 'left', 'width', 'height', 'fontSize']); | ||
164 | |||
165 | this.originalTop = this.element.offsetTop; | ||
166 | this.originalLeft = this.element.offsetLeft; | ||
167 | |||
168 | var fontSize = MochiKit.Style.getStyle(this.element, 'font-size') || '100%'; | ||
169 | ma(b(function (fontSizeType) { | ||
170 | if (fontSize.indexOf(fontSizeType) > 0) { | ||
171 | this.fontSize = parseFloat(fontSize); | ||
172 | this.fontSizeType = fontSizeType; | ||
173 | } | ||
174 | }, this), ['em', 'px', '%']); | ||
175 | |||
176 | this.factor = 1; | ||
177 | |||
178 | this.dims = [this.options.fromSize.h, this.options.fromSize.w]; | ||
179 | }, | ||
180 | |||
181 | update: function (position) { | ||
182 | this.setDimensions((this.options.toSize.h - this.options.fromSize.h) * position + this.options.fromSize.h, | ||
183 | (this.options.toSize.w - this.options.fromSize.w) * position + this.options.fromSize.w); | ||
184 | }, | ||
185 | |||
186 | finish: function () { | ||
187 | if (this.restoreAfterFinish) { | ||
188 | MochiKit.Style.setStyle(this.element, this.originalStyle); | ||
189 | } | ||
190 | }, | ||
191 | |||
192 | setDimensions: function (height, width) { | ||
193 | var d = {}; | ||
194 | var r = Math.round; | ||
195 | if (/MSIE/.test(navigator.userAgent)) { | ||
196 | r = Math.ceil; | ||
197 | } | ||
198 | if (this.options.scaleX) { | ||
199 | d.width = r(width) + 'px'; | ||
200 | } | ||
201 | if (this.options.scaleY) { | ||
202 | d.height = r(height) + 'px'; | ||
203 | } | ||
204 | if (this.options.scaleFromCenter) { | ||
205 | var topd = (height - this.dims[0])/2; | ||
206 | var leftd = (width - this.dims[1])/2; | ||
207 | if (this.elementPositioning == 'absolute') { | ||
208 | if (this.options.scaleY) { | ||
209 | d.top = this.originalTop - topd + 'px'; | ||
210 | } | ||
211 | if (this.options.scaleX) { | ||
212 | d.left = this.originalLeft - leftd + 'px'; | ||
213 | } | ||
214 | } else { | ||
215 | if (this.options.scaleY) { | ||
216 | d.top = -topd + 'px'; | ||
217 | } | ||
218 | if (this.options.scaleX) { | ||
219 | d.left = -leftd + 'px'; | ||
220 | } | ||
221 | } | ||
222 | } | ||
223 | MochiKit.Style.setStyle(this.element, d); | ||
224 | } | ||
225 | }); | ||
226 | |||
227 | //============================================================================= | ||
228 | |||
229 | Clipperz.Visual.squize = function (element, /* optional */ options) { | ||
230 | var d = MochiKit.DOM; | ||
231 | var v = MochiKit.Visual; | ||
232 | var s = MochiKit.Style; | ||
233 | |||
234 | element = d.getElement(element); | ||
235 | options = MochiKit.Base.update({ | ||
236 | moveTransition: v.Transitions.sinoidal, | ||
237 | scaleTransition: v.Transitions.sinoidal, | ||
238 | opacityTransition: v.Transitions.none, | ||
239 | scaleContent: true, | ||
240 | scaleFromCenter: false, | ||
241 | scaleX: true, | ||
242 | scaleY: true | ||
243 | }, options); | ||
244 | var oldStyle = { | ||
245 | top: element.style.top, | ||
246 | left: element.style.left, | ||
247 | height: element.style.height, | ||
248 | width: element.style.width, | ||
249 | opacity: s.getStyle(element, 'opacity') | ||
250 | }; | ||
251 | |||
252 | var dims = s.getElementDimensions(element, true); | ||
253 | var moveX, moveY; | ||
254 | |||
255 | moveX = options.scaleX ? dims.w/2 : 0; | ||
256 | moveY = options.scaleY ? dims.h/2 : 0; | ||
257 | |||
258 | var elemClip; | ||
259 | |||
260 | var optionsParallel = MochiKit.Base.update({ | ||
261 | beforeStartInternal: function (effect) { | ||
262 | s.makePositioned(effect.effects[0].element); | ||
263 | elemClip = s.makeClipping(effect.effects[0].element); | ||
264 | }, | ||
265 | afterFinishInternal: function (effect) { | ||
266 | s.hideElement(effect.effects[0].element); | ||
267 | s.undoClipping(effect.effects[0].element, elemClip); | ||
268 | s.undoPositioned(effect.effects[0].element); | ||
269 | s.setStyle(effect.effects[0].element, oldStyle); | ||
270 | } | ||
271 | }, options); | ||
272 | |||
273 | return new v.Parallel( | ||
274 | [new v.Opacity(element, { | ||
275 | sync: true, to: 0.0, from: 1.0, | ||
276 | transition: options.opacityTransition | ||
277 | }), | ||
278 | new v.Scale(element, /Opera/.test(navigator.userAgent) ? 1 : 0, { | ||
279 | scaleMode: {originalHeight: dims.h, originalWidth: dims.w}, | ||
280 | sync: true, transition: options.scaleTransition, | ||
281 | scaleContent: options.scaleContent, | ||
282 | scaleFromCenter: options.scaleFromCenter, | ||
283 | restoreAfterFinish: true, | ||
284 | scaleX: options.scaleX, | ||
285 | scaleY: options.scaleY | ||
286 | }), | ||
287 | new v.Move(element, { | ||
288 | x: moveX, y: moveY, sync: true, transition: options.moveTransition | ||
289 | }) | ||
290 | ], optionsParallel | ||
291 | ); | ||
292 | }; | ||
293 | |||
294 | //----------------------------------------------------------------------------- | ||
295 | |||
296 | Clipperz.Visual.expand = function (element, /* optional */ options) { | ||
297 | var d = MochiKit.DOM; | ||
298 | var v = MochiKit.Visual; | ||
299 | var s = MochiKit.Style; | ||
300 | |||
301 | element = d.getElement(element); | ||
302 | options = MochiKit.Base.update({ | ||
303 | // direction: 'center', | ||
304 | moveTransition: v.Transitions.sinoidal, | ||
305 | scaleTransition: v.Transitions.sinoidal, | ||
306 | opacityTransition: v.Transitions.none, | ||
307 | scaleContent: true, | ||
308 | scaleFromCenter: false, | ||
309 | scaleX: true, | ||
310 | scaleY: true | ||
311 | }, options); | ||
312 | var oldStyle = { | ||
313 | top: element.style.top, | ||
314 | left: element.style.left, | ||
315 | height: element.style.height, | ||
316 | width: element.style.width, | ||
317 | opacity: s.getStyle(element, 'opacity') | ||
318 | }; | ||
319 | |||
320 | var dims = s.getElementDimensions(element, true); | ||
321 | var moveX, moveY; | ||
322 | |||
323 | moveX = options.scaleX ? dims.w/2 : 0; | ||
324 | moveY = options.scaleY ? dims.h/2 : 0; | ||
325 | |||
326 | var elemClip; | ||
327 | |||
328 | var optionsParallel = MochiKit.Base.update({ | ||
329 | beforeStartInternal: function (effect) { | ||
330 | s.makePositioned(effect.effects[0].element); | ||
331 | elemClip = s.makeClipping(effect.effects[0].element); | ||
332 | }, | ||
333 | afterFinishInternal: function (effect) { | ||
334 | s.hideElement(effect.effects[0].element); | ||
335 | s.undoClipping(effect.effects[0].element, elemClip); | ||
336 | s.undoPositioned(effect.effects[0].element); | ||
337 | s.setStyle(effect.effects[0].element, oldStyle); | ||
338 | } | ||
339 | }, options); | ||
340 | |||
341 | return new v.Parallel( | ||
342 | [new v.Opacity(element, { | ||
343 | sync: true, to: 0.0, from: 1.0, | ||
344 | transition: options.opacityTransition | ||
345 | }), | ||
346 | new v.Scale(element, /Opera/.test(navigator.userAgent) ? 1 : 0, { | ||
347 | scaleMode: {originalHeight: dims.h, originalWidth: dims.w}, | ||
348 | sync: true, transition: options.scaleTransition, | ||
349 | scaleContent: options.scaleContent, | ||
350 | scaleFromCenter: options.scaleFromCenter, | ||
351 | restoreAfterFinish: true, | ||
352 | scaleX: options.scaleX, | ||
353 | scaleY: options.scaleY | ||
354 | }), | ||
355 | new v.Move(element, { | ||
356 | x: moveX, y: moveY, sync: true, transition: options.moveTransition | ||
357 | }) | ||
358 | ], optionsParallel | ||
359 | ); | ||
360 | }; | ||
361 | |||
362 | //============================================================================= | ||
363 | |||