The Tor Browser / file comparison

comparison: dom/tests/mochitest/ajax/mochikit/MochiKit/Visual.js

dom/tests/mochitest/ajax/mochikit/MochiKit/Visual.js

branch
TOR_BUG_9701
changeset 9
a63d609f5ebe
equal deleted inserted replaced
-1:000000000000 0:889d4269cc56
1 /***
2
3 MochiKit.Visual 1.4
4
5 See <http://mochikit.com/> for documentation, downloads, license, etc.
6
7 (c) 2005 Bob Ippolito and others. All rights Reserved.
8
9 ***/
10
11 if (typeof(dojo) != 'undefined') {
12 dojo.provide('MochiKit.Visual');
13 dojo.require('MochiKit.Base');
14 dojo.require('MochiKit.DOM');
15 dojo.require('MochiKit.Style');
16 dojo.require('MochiKit.Color');
17 dojo.require('MochiKit.Position');
18 }
19
20 if (typeof(JSAN) != 'undefined') {
21 JSAN.use("MochiKit.Base", []);
22 JSAN.use("MochiKit.DOM", []);
23 JSAN.use("MochiKit.Style", []);
24 JSAN.use("MochiKit.Color", []);
25 JSAN.use("MochiKit.Position", []);
26 }
27
28 try {
29 if (typeof(MochiKit.Base) === 'undefined' ||
30 typeof(MochiKit.DOM) === 'undefined' ||
31 typeof(MochiKit.Style) === 'undefined' ||
32 typeof(MochiKit.Position) === 'undefined' ||
33 typeof(MochiKit.Color) === 'undefined') {
34 throw "";
35 }
36 } catch (e) {
37 throw "MochiKit.Visual depends on MochiKit.Base, MochiKit.DOM, MochiKit.Style, MochiKit.Position and MochiKit.Color!";
38 }
39
40 if (typeof(MochiKit.Visual) == "undefined") {
41 MochiKit.Visual = {};
42 }
43
44 MochiKit.Visual.NAME = "MochiKit.Visual";
45 MochiKit.Visual.VERSION = "1.4";
46
47 MochiKit.Visual.__repr__ = function () {
48 return "[" + this.NAME + " " + this.VERSION + "]";
49 };
50
51 MochiKit.Visual.toString = function () {
52 return this.__repr__();
53 };
54
55 MochiKit.Visual._RoundCorners = function (e, options) {
56 e = MochiKit.DOM.getElement(e);
57 this._setOptions(options);
58 if (this.options.__unstable__wrapElement) {
59 e = this._doWrap(e);
60 }
61
62 var color = this.options.color;
63 var C = MochiKit.Color.Color;
64 if (this.options.color === "fromElement") {
65 color = C.fromBackground(e);
66 } else if (!(color instanceof C)) {
67 color = C.fromString(color);
68 }
69 this.isTransparent = (color.asRGB().a <= 0);
70
71 var bgColor = this.options.bgColor;
72 if (this.options.bgColor === "fromParent") {
73 bgColor = C.fromBackground(e.offsetParent);
74 } else if (!(bgColor instanceof C)) {
75 bgColor = C.fromString(bgColor);
76 }
77
78 this._roundCornersImpl(e, color, bgColor);
79 };
80
81 MochiKit.Visual._RoundCorners.prototype = {
82 _doWrap: function (e) {
83 var parent = e.parentNode;
84 var doc = MochiKit.DOM.currentDocument();
85 if (typeof(doc.defaultView) === "undefined"
86 || doc.defaultView === null) {
87 return e;
88 }
89 var style = doc.defaultView.getComputedStyle(e, null);
90 if (typeof(style) === "undefined" || style === null) {
91 return e;
92 }
93 var wrapper = MochiKit.DOM.DIV({"style": {
94 display: "block",
95 // convert padding to margin
96 marginTop: style.getPropertyValue("padding-top"),
97 marginRight: style.getPropertyValue("padding-right"),
98 marginBottom: style.getPropertyValue("padding-bottom"),
99 marginLeft: style.getPropertyValue("padding-left"),
100 // remove padding so the rounding looks right
101 padding: "0px"
102 /*
103 paddingRight: "0px",
104 paddingLeft: "0px"
105 */
106 }});
107 wrapper.innerHTML = e.innerHTML;
108 e.innerHTML = "";
109 e.appendChild(wrapper);
110 return e;
111 },
112
113 _roundCornersImpl: function (e, color, bgColor) {
114 if (this.options.border) {
115 this._renderBorder(e, bgColor);
116 }
117 if (this._isTopRounded()) {
118 this._roundTopCorners(e, color, bgColor);
119 }
120 if (this._isBottomRounded()) {
121 this._roundBottomCorners(e, color, bgColor);
122 }
123 },
124
125 _renderBorder: function (el, bgColor) {
126 var borderValue = "1px solid " + this._borderColor(bgColor);
127 var borderL = "border-left: " + borderValue;
128 var borderR = "border-right: " + borderValue;
129 var style = "style='" + borderL + ";" + borderR + "'";
130 el.innerHTML = "<div " + style + ">" + el.innerHTML + "</div>";
131 },
132
133 _roundTopCorners: function (el, color, bgColor) {
134 var corner = this._createCorner(bgColor);
135 for (var i = 0; i < this.options.numSlices; i++) {
136 corner.appendChild(
137 this._createCornerSlice(color, bgColor, i, "top")
138 );
139 }
140 el.style.paddingTop = 0;
141 el.insertBefore(corner, el.firstChild);
142 },
143
144 _roundBottomCorners: function (el, color, bgColor) {
145 var corner = this._createCorner(bgColor);
146 for (var i = (this.options.numSlices - 1); i >= 0; i--) {
147 corner.appendChild(
148 this._createCornerSlice(color, bgColor, i, "bottom")
149 );
150 }
151 el.style.paddingBottom = 0;
152 el.appendChild(corner);
153 },
154
155 _createCorner: function (bgColor) {
156 var dom = MochiKit.DOM;
157 return dom.DIV({style: {backgroundColor: bgColor.toString()}});
158 },
159
160 _createCornerSlice: function (color, bgColor, n, position) {
161 var slice = MochiKit.DOM.SPAN();
162
163 var inStyle = slice.style;
164 inStyle.backgroundColor = color.toString();
165 inStyle.display = "block";
166 inStyle.height = "1px";
167 inStyle.overflow = "hidden";
168 inStyle.fontSize = "1px";
169
170 var borderColor = this._borderColor(color, bgColor);
171 if (this.options.border && n === 0) {
172 inStyle.borderTopStyle = "solid";
173 inStyle.borderTopWidth = "1px";
174 inStyle.borderLeftWidth = "0px";
175 inStyle.borderRightWidth = "0px";
176 inStyle.borderBottomWidth = "0px";
177 // assumes css compliant box model
178 inStyle.height = "0px";
179 inStyle.borderColor = borderColor.toString();
180 } else if (borderColor) {
181 inStyle.borderColor = borderColor.toString();
182 inStyle.borderStyle = "solid";
183 inStyle.borderWidth = "0px 1px";
184 }
185
186 if (!this.options.compact && (n == (this.options.numSlices - 1))) {
187 inStyle.height = "2px";
188 }
189
190 this._setMargin(slice, n, position);
191 this._setBorder(slice, n, position);
192
193 return slice;
194 },
195
196 _setOptions: function (options) {
197 this.options = {
198 corners: "all",
199 color: "fromElement",
200 bgColor: "fromParent",
201 blend: true,
202 border: false,
203 compact: false,
204 __unstable__wrapElement: false
205 };
206 MochiKit.Base.update(this.options, options);
207
208 this.options.numSlices = (this.options.compact ? 2 : 4);
209 },
210
211 _whichSideTop: function () {
212 var corners = this.options.corners;
213 if (this._hasString(corners, "all", "top")) {
214 return "";
215 }
216
217 var has_tl = (corners.indexOf("tl") != -1);
218 var has_tr = (corners.indexOf("tr") != -1);
219 if (has_tl && has_tr) {
220 return "";
221 }
222 if (has_tl) {
223 return "left";
224 }
225 if (has_tr) {
226 return "right";
227 }
228 return "";
229 },
230
231 _whichSideBottom: function () {
232 var corners = this.options.corners;
233 if (this._hasString(corners, "all", "bottom")) {
234 return "";
235 }
236
237 var has_bl = (corners.indexOf('bl') != -1);
238 var has_br = (corners.indexOf('br') != -1);
239 if (has_bl && has_br) {
240 return "";
241 }
242 if (has_bl) {
243 return "left";
244 }
245 if (has_br) {
246 return "right";
247 }
248 return "";
249 },
250
251 _borderColor: function (color, bgColor) {
252 if (color == "transparent") {
253 return bgColor;
254 } else if (this.options.border) {
255 return this.options.border;
256 } else if (this.options.blend) {
257 return bgColor.blendedColor(color);
258 }
259 return "";
260 },
261
262
263 _setMargin: function (el, n, corners) {
264 var marginSize = this._marginSize(n) + "px";
265 var whichSide = (
266 corners == "top" ? this._whichSideTop() : this._whichSideBottom()
267 );
268 var style = el.style;
269
270 if (whichSide == "left") {
271 style.marginLeft = marginSize;
272 style.marginRight = "0px";
273 } else if (whichSide == "right") {
274 style.marginRight = marginSize;
275 style.marginLeft = "0px";
276 } else {
277 style.marginLeft = marginSize;
278 style.marginRight = marginSize;
279 }
280 },
281
282 _setBorder: function (el, n, corners) {
283 var borderSize = this._borderSize(n) + "px";
284 var whichSide = (
285 corners == "top" ? this._whichSideTop() : this._whichSideBottom()
286 );
287
288 var style = el.style;
289 if (whichSide == "left") {
290 style.borderLeftWidth = borderSize;
291 style.borderRightWidth = "0px";
292 } else if (whichSide == "right") {
293 style.borderRightWidth = borderSize;
294 style.borderLeftWidth = "0px";
295 } else {
296 style.borderLeftWidth = borderSize;
297 style.borderRightWidth = borderSize;
298 }
299 },
300
301 _marginSize: function (n) {
302 if (this.isTransparent) {
303 return 0;
304 }
305
306 var o = this.options;
307 if (o.compact && o.blend) {
308 var smBlendedMarginSizes = [1, 0];
309 return smBlendedMarginSizes[n];
310 } else if (o.compact) {
311 var compactMarginSizes = [2, 1];
312 return compactMarginSizes[n];
313 } else if (o.blend) {
314 var blendedMarginSizes = [3, 2, 1, 0];
315 return blendedMarginSizes[n];
316 } else {
317 var marginSizes = [5, 3, 2, 1];
318 return marginSizes[n];
319 }
320 },
321
322 _borderSize: function (n) {
323 var o = this.options;
324 var borderSizes;
325 if (o.compact && (o.blend || this.isTransparent)) {
326 return 1;
327 } else if (o.compact) {
328 borderSizes = [1, 0];
329 } else if (o.blend) {
330 borderSizes = [2, 1, 1, 1];
331 } else if (o.border) {
332 borderSizes = [0, 2, 0, 0];
333 } else if (this.isTransparent) {
334 borderSizes = [5, 3, 2, 1];
335 } else {
336 return 0;
337 }
338 return borderSizes[n];
339 },
340
341 _hasString: function (str) {
342 for (var i = 1; i< arguments.length; i++) {
343 if (str.indexOf(arguments[i]) != -1) {
344 return true;
345 }
346 }
347 return false;
348 },
349
350 _isTopRounded: function () {
351 return this._hasString(this.options.corners,
352 "all", "top", "tl", "tr"
353 );
354 },
355
356 _isBottomRounded: function () {
357 return this._hasString(this.options.corners,
358 "all", "bottom", "bl", "br"
359 );
360 },
361
362 _hasSingleTextChild: function (el) {
363 return (el.childNodes.length == 1 && el.childNodes[0].nodeType == 3);
364 }
365 };
366
367 /** @id MochiKit.Visual.roundElement */
368 MochiKit.Visual.roundElement = function (e, options) {
369 new MochiKit.Visual._RoundCorners(e, options);
370 };
371
372 /** @id MochiKit.Visual.roundClass */
373 MochiKit.Visual.roundClass = function (tagName, className, options) {
374 var elements = MochiKit.DOM.getElementsByTagAndClassName(
375 tagName, className
376 );
377 for (var i = 0; i < elements.length; i++) {
378 MochiKit.Visual.roundElement(elements[i], options);
379 }
380 };
381
382 /** @id MochiKit.Visual.tagifyText */
383 MochiKit.Visual.tagifyText = function (element, /* optional */tagifyStyle) {
384 /***
385
386 Change a node text to character in tags.
387
388 @param tagifyStyle: the style to apply to character nodes, default to
389 'position: relative'.
390
391 ***/
392 tagifyStyle = tagifyStyle || 'position:relative';
393 if (/MSIE/.test(navigator.userAgent)) {
394 tagifyStyle += ';zoom:1';
395 }
396 element = MochiKit.DOM.getElement(element);
397 var ma = MochiKit.Base.map;
398 ma(function (child) {
399 if (child.nodeType == 3) {
400 ma(function (character) {
401 element.insertBefore(
402 MochiKit.DOM.SPAN({style: tagifyStyle},
403 character == ' ' ? String.fromCharCode(160) : character), child);
404 }, child.nodeValue.split(''));
405 MochiKit.DOM.removeElement(child);
406 }
407 }, element.childNodes);
408 };
409
410 /** @id MochiKit.Visual.forceRerendering */
411 MochiKit.Visual.forceRerendering = function (element) {
412 try {
413 element = MochiKit.DOM.getElement(element);
414 var n = document.createTextNode(' ');
415 element.appendChild(n);
416 element.removeChild(n);
417 } catch(e) {
418 }
419 };
420
421 /** @id MochiKit.Visual.multiple */
422 MochiKit.Visual.multiple = function (elements, effect, /* optional */options) {
423 /***
424
425 Launch the same effect subsequently on given elements.
426
427 ***/
428 options = MochiKit.Base.update({
429 speed: 0.1, delay: 0.0
430 }, options || {});
431 var masterDelay = options.delay;
432 var index = 0;
433 MochiKit.Base.map(function (innerelement) {
434 options.delay = index * options.speed + masterDelay;
435 new effect(innerelement, options);
436 index += 1;
437 }, elements);
438 };
439
440 MochiKit.Visual.PAIRS = {
441 'slide': ['slideDown', 'slideUp'],
442 'blind': ['blindDown', 'blindUp'],
443 'appear': ['appear', 'fade'],
444 'size': ['grow', 'shrink']
445 };
446
447 /** @id MochiKit.Visual.toggle */
448 MochiKit.Visual.toggle = function (element, /* optional */effect, /* optional */options) {
449 /***
450
451 Toggle an item between two state depending of its visibility, making
452 a effect between these states. Default effect is 'appear', can be
453 'slide' or 'blind'.
454
455 ***/
456 element = MochiKit.DOM.getElement(element);
457 effect = (effect || 'appear').toLowerCase();
458 options = MochiKit.Base.update({
459 queue: {position: 'end', scope: (element.id || 'global'), limit: 1}
460 }, options || {});
461 var v = MochiKit.Visual;
462 v[MochiKit.Style.getStyle(element, 'display') != 'none' ?
463 v.PAIRS[effect][1] : v.PAIRS[effect][0]](element, options);
464 };
465
466 /***
467
468 Transitions: define functions calculating variations depending of a position.
469
470 ***/
471
472 MochiKit.Visual.Transitions = {};
473
474 /** @id MochiKit.Visual.Transitions.linear */
475 MochiKit.Visual.Transitions.linear = function (pos) {
476 return pos;
477 };
478
479 /** @id MochiKit.Visual.Transitions.sinoidal */
480 MochiKit.Visual.Transitions.sinoidal = function (pos) {
481 return (-Math.cos(pos*Math.PI)/2) + 0.5;
482 };
483
484 /** @id MochiKit.Visual.Transitions.reverse */
485 MochiKit.Visual.Transitions.reverse = function (pos) {
486 return 1 - pos;
487 };
488
489 /** @id MochiKit.Visual.Transitions.flicker */
490 MochiKit.Visual.Transitions.flicker = function (pos) {
491 return ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random()/4;
492 };
493
494 /** @id MochiKit.Visual.Transitions.wobble */
495 MochiKit.Visual.Transitions.wobble = function (pos) {
496 return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
497 };
498
499 /** @id MochiKit.Visual.Transitions.pulse */
500 MochiKit.Visual.Transitions.pulse = function (pos, pulses) {
501 if (!pulses) {
502 return (Math.floor(pos*10) % 2 === 0 ?
503 (pos*10 - Math.floor(pos*10)) : 1 - (pos*10 - Math.floor(pos*10)));
504 }
505 return (Math.round((pos % (1/pulses)) * pulses) == 0 ?
506 ((pos * pulses * 2) - Math.floor(pos * pulses * 2)) :
507 1 - ((pos * pulses * 2) - Math.floor(pos * pulses * 2)));
508 };
509
510 /** @id MochiKit.Visual.Transitions.none */
511 MochiKit.Visual.Transitions.none = function (pos) {
512 return 0;
513 };
514
515 /** @id MochiKit.Visual.Transitions.full */
516 MochiKit.Visual.Transitions.full = function (pos) {
517 return 1;
518 };
519
520 /***
521
522 Core effects
523
524 ***/
525
526 MochiKit.Visual.ScopedQueue = function () {
527 var cls = arguments.callee;
528 if (!(this instanceof cls)) {
529 return new cls();
530 }
531 this.__init__();
532 };
533
534 MochiKit.Base.update(MochiKit.Visual.ScopedQueue.prototype, {
535 __init__: function () {
536 this.effects = [];
537 this.interval = null;
538 },
539
540 /** @id MochiKit.Visual.ScopedQueue.prototype.add */
541 add: function (effect) {
542 var timestamp = new Date().getTime();
543
544 var position = (typeof(effect.options.queue) == 'string') ?
545 effect.options.queue : effect.options.queue.position;
546
547 var ma = MochiKit.Base.map;
548 switch (position) {
549 case 'front':
550 // move unstarted effects after this effect
551 ma(function (e) {
552 if (e.state == 'idle') {
553 e.startOn += effect.finishOn;
554 e.finishOn += effect.finishOn;
555 }
556 }, this.effects);
557 break;
558 case 'end':
559 var finish;
560 // start effect after last queued effect has finished
561 ma(function (e) {
562 var i = e.finishOn;
563 if (i >= (finish || i)) {
564 finish = i;
565 }
566 }, this.effects);
567 timestamp = finish || timestamp;
568 break;
569 case 'break':
570 ma(function (e) {
571 e.finalize();
572 }, this.effects);
573 break;
574 }
575
576 effect.startOn += timestamp;
577 effect.finishOn += timestamp;
578 if (!effect.options.queue.limit ||
579 this.effects.length < effect.options.queue.limit) {
580 this.effects.push(effect);
581 }
582
583 if (!this.interval) {
584 this.interval = this.startLoop(MochiKit.Base.bind(this.loop, this),
585 40);
586 }
587 },
588
589 /** @id MochiKit.Visual.ScopedQueue.prototype.startLoop */
590 startLoop: function (func, interval) {
591 return setInterval(func, interval);
592 },
593
594 /** @id MochiKit.Visual.ScopedQueue.prototype.remove */
595 remove: function (effect) {
596 this.effects = MochiKit.Base.filter(function (e) {
597 return e != effect;
598 }, this.effects);
599 if (!this.effects.length) {
600 this.stopLoop(this.interval);
601 this.interval = null;
602 }
603 },
604
605 /** @id MochiKit.Visual.ScopedQueue.prototype.stopLoop */
606 stopLoop: function (interval) {
607 clearInterval(interval);
608 },
609
610 /** @id MochiKit.Visual.ScopedQueue.prototype.loop */
611 loop: function () {
612 var timePos = new Date().getTime();
613 MochiKit.Base.map(function (effect) {
614 effect.loop(timePos);
615 }, this.effects);
616 }
617 });
618
619 MochiKit.Visual.Queues = {
620 instances: {},
621
622 get: function (queueName) {
623 if (typeof(queueName) != 'string') {
624 return queueName;
625 }
626
627 if (!this.instances[queueName]) {
628 this.instances[queueName] = new MochiKit.Visual.ScopedQueue();
629 }
630 return this.instances[queueName];
631 }
632 };
633
634 MochiKit.Visual.Queue = MochiKit.Visual.Queues.get('global');
635
636 MochiKit.Visual.DefaultOptions = {
637 transition: MochiKit.Visual.Transitions.sinoidal,
638 duration: 1.0, // seconds
639 fps: 25.0, // max. 25fps due to MochiKit.Visual.Queue implementation
640 sync: false, // true for combining
641 from: 0.0,
642 to: 1.0,
643 delay: 0.0,
644 queue: 'parallel'
645 };
646
647 MochiKit.Visual.Base = function () {};
648
649 MochiKit.Visual.Base.prototype = {
650 /***
651
652 Basic class for all Effects. Define a looping mechanism called for each step
653 of an effect. Don't instantiate it, only subclass it.
654
655 ***/
656
657 __class__ : MochiKit.Visual.Base,
658
659 /** @id MochiKit.Visual.Base.prototype.start */
660 start: function (options) {
661 var v = MochiKit.Visual;
662 this.options = MochiKit.Base.setdefault(options || {},
663 v.DefaultOptions);
664 this.currentFrame = 0;
665 this.state = 'idle';
666 this.startOn = this.options.delay*1000;
667 this.finishOn = this.startOn + (this.options.duration*1000);
668 this.event('beforeStart');
669 if (!this.options.sync) {
670 v.Queues.get(typeof(this.options.queue) == 'string' ?
671 'global' : this.options.queue.scope).add(this);
672 }
673 },
674
675 /** @id MochiKit.Visual.Base.prototype.loop */
676 loop: function (timePos) {
677 if (timePos >= this.startOn) {
678 if (timePos >= this.finishOn) {
679 return this.finalize();
680 }
681 var pos = (timePos - this.startOn) / (this.finishOn - this.startOn);
682 var frame =
683 Math.round(pos * this.options.fps * this.options.duration);
684 if (frame > this.currentFrame) {
685 this.render(pos);
686 this.currentFrame = frame;
687 }
688 }
689 },
690
691 /** @id MochiKit.Visual.Base.prototype.render */
692 render: function (pos) {
693 if (this.state == 'idle') {
694 this.state = 'running';
695 this.event('beforeSetup');
696 this.setup();
697 this.event('afterSetup');
698 }
699 if (this.state == 'running') {
700 if (this.options.transition) {
701 pos = this.options.transition(pos);
702 }
703 pos *= (this.options.to - this.options.from);
704 pos += this.options.from;
705 this.event('beforeUpdate');
706 this.update(pos);
707 this.event('afterUpdate');
708 }
709 },
710
711 /** @id MochiKit.Visual.Base.prototype.cancel */
712 cancel: function () {
713 if (!this.options.sync) {
714 MochiKit.Visual.Queues.get(typeof(this.options.queue) == 'string' ?
715 'global' : this.options.queue.scope).remove(this);
716 }
717 this.state = 'finished';
718 },
719
720 /** @id MochiKit.Visual.Base.prototype.finalize */
721 finalize: function () {
722 this.render(1.0);
723 this.cancel();
724 this.event('beforeFinish');
725 this.finish();
726 this.event('afterFinish');
727 },
728
729 setup: function () {
730 },
731
732 finish: function () {
733 },
734
735 update: function (position) {
736 },
737
738 /** @id MochiKit.Visual.Base.prototype.event */
739 event: function (eventName) {
740 if (this.options[eventName + 'Internal']) {
741 this.options[eventName + 'Internal'](this);
742 }
743 if (this.options[eventName]) {
744 this.options[eventName](this);
745 }
746 },
747
748 /** @id MochiKit.Visual.Base.prototype.repr */
749 repr: function () {
750 return '[' + this.__class__.NAME + ', options:' +
751 MochiKit.Base.repr(this.options) + ']';
752 }
753 };
754
755 /** @id MochiKit.Visual.Parallel */
756 MochiKit.Visual.Parallel = function (effects, options) {
757 var cls = arguments.callee;
758 if (!(this instanceof cls)) {
759 return new cls(effects, options);
760 }
761
762 this.__init__(effects, options);
763 };
764
765 MochiKit.Visual.Parallel.prototype = new MochiKit.Visual.Base();
766
767 MochiKit.Base.update(MochiKit.Visual.Parallel.prototype, {
768 /***
769
770 Run multiple effects at the same time.
771
772 ***/
773
774 __class__ : MochiKit.Visual.Parallel,
775
776 __init__: function (effects, options) {
777 this.effects = effects || [];
778 this.start(options);
779 },
780
781 /** @id MochiKit.Visual.Parallel.prototype.update */
782 update: function (position) {
783 MochiKit.Base.map(function (effect) {
784 effect.render(position);
785 }, this.effects);
786 },
787
788 /** @id MochiKit.Visual.Parallel.prototype.finish */
789 finish: function () {
790 MochiKit.Base.map(function (effect) {
791 effect.finalize();
792 }, this.effects);
793 }
794 });
795
796 /** @id MochiKit.Visual.Opacity */
797 MochiKit.Visual.Opacity = function (element, options) {
798 var cls = arguments.callee;
799 if (!(this instanceof cls)) {
800 return new cls(element, options);
801 }
802 this.__init__(element, options);
803 };
804
805 MochiKit.Visual.Opacity.prototype = new MochiKit.Visual.Base();
806
807 MochiKit.Base.update(MochiKit.Visual.Opacity.prototype, {
808 /***
809
810 Change the opacity of an element.
811
812 @param options: 'from' and 'to' change the starting and ending opacities.
813 Must be between 0.0 and 1.0. Default to current opacity and 1.0.
814
815 ***/
816
817 __class__ : MochiKit.Visual.Opacity,
818
819 __init__: function (element, /* optional */options) {
820 var b = MochiKit.Base;
821 var s = MochiKit.Style;
822 this.element = MochiKit.DOM.getElement(element);
823 // make this work on IE on elements without 'layout'
824 if (this.element.currentStyle &&
825 (!this.element.currentStyle.hasLayout)) {
826 s.setStyle(this.element, {zoom: 1});
827 }
828 options = b.update({
829 from: s.getStyle(this.element, 'opacity') || 0.0,
830 to: 1.0
831 }, options || {});
832 this.start(options);
833 },
834
835 /** @id MochiKit.Visual.Opacity.prototype.update */
836 update: function (position) {
837 MochiKit.Style.setStyle(this.element, {'opacity': position});
838 }
839 });
840
841 /** @id MochiKit.Visual.Move.prototype */
842 MochiKit.Visual.Move = function (element, options) {
843 var cls = arguments.callee;
844 if (!(this instanceof cls)) {
845 return new cls(element, options);
846 }
847 this.__init__(element, options);
848 };
849
850 MochiKit.Visual.Move.prototype = new MochiKit.Visual.Base();
851
852 MochiKit.Base.update(MochiKit.Visual.Move.prototype, {
853 /***
854
855 Move an element between its current position to a defined position
856
857 @param options: 'x' and 'y' for final positions, default to 0, 0.
858
859 ***/
860
861 __class__ : MochiKit.Visual.Move,
862
863 __init__: function (element, /* optional */options) {
864 this.element = MochiKit.DOM.getElement(element);
865 options = MochiKit.Base.update({
866 x: 0,
867 y: 0,
868 mode: 'relative'
869 }, options || {});
870 this.start(options);
871 },
872
873 /** @id MochiKit.Visual.Move.prototype.setup */
874 setup: function () {
875 // Bug in Opera: Opera returns the 'real' position of a static element
876 // or relative element that does not have top/left explicitly set.
877 // ==> Always set top and left for position relative elements in your
878 // stylesheets (to 0 if you do not need them)
879 MochiKit.DOM.makePositioned(this.element);
880
881 var s = this.element.style;
882 var originalVisibility = s.visibility;
883 var originalDisplay = s.display;
884 if (originalDisplay == 'none') {
885 s.visibility = 'hidden';
886 s.display = '';
887 }
888
889 this.originalLeft = parseFloat(MochiKit.Style.getStyle(this.element, 'left') || '0');
890 this.originalTop = parseFloat(MochiKit.Style.getStyle(this.element, 'top') || '0');
891
892 if (this.options.mode == 'absolute') {
893 // absolute movement, so we need to calc deltaX and deltaY
894 this.options.x -= this.originalLeft;
895 this.options.y -= this.originalTop;
896 }
897 if (originalDisplay == 'none') {
898 s.visibility = originalVisibility;
899 s.display = originalDisplay;
900 }
901 },
902
903 /** @id MochiKit.Visual.Move.prototype.update */
904 update: function (position) {
905 MochiKit.Style.setStyle(this.element, {
906 left: Math.round(this.options.x * position + this.originalLeft) + 'px',
907 top: Math.round(this.options.y * position + this.originalTop) + 'px'
908 });
909 }
910 });
911
912 /** @id MochiKit.Visual.Scale */
913 MochiKit.Visual.Scale = function (element, percent, options) {
914 var cls = arguments.callee;
915 if (!(this instanceof cls)) {
916 return new cls(element, percent, options);
917 }
918 this.__init__(element, percent, options);
919 };
920
921 MochiKit.Visual.Scale.prototype = new MochiKit.Visual.Base();
922
923 MochiKit.Base.update(MochiKit.Visual.Scale.prototype, {
924 /***
925
926 Change the size of an element.
927
928 @param percent: final_size = percent*original_size
929
930 @param options: several options changing scale behaviour
931
932 ***/
933
934 __class__ : MochiKit.Visual.Scale,
935
936 __init__: function (element, percent, /* optional */options) {
937 this.element = MochiKit.DOM.getElement(element);
938 options = MochiKit.Base.update({
939 scaleX: true,
940 scaleY: true,
941 scaleContent: true,
942 scaleFromCenter: false,
943 scaleMode: 'box', // 'box' or 'contents' or {} with provided values
944 scaleFrom: 100.0,
945 scaleTo: percent
946 }, options || {});
947 this.start(options);
948 },
949
950 /** @id MochiKit.Visual.Scale.prototype.setup */
951 setup: function () {
952 this.restoreAfterFinish = this.options.restoreAfterFinish || false;
953 this.elementPositioning = MochiKit.Style.getStyle(this.element,
954 'position');
955
956 var ma = MochiKit.Base.map;
957 var b = MochiKit.Base.bind;
958 this.originalStyle = {};
959 ma(b(function (k) {
960 this.originalStyle[k] = this.element.style[k];
961 }, this), ['top', 'left', 'width', 'height', 'fontSize']);
962
963 this.originalTop = this.element.offsetTop;
964 this.originalLeft = this.element.offsetLeft;
965
966 var fontSize = MochiKit.Style.getStyle(this.element,
967 'font-size') || '100%';
968 ma(b(function (fontSizeType) {
969 if (fontSize.indexOf(fontSizeType) > 0) {
970 this.fontSize = parseFloat(fontSize);
971 this.fontSizeType = fontSizeType;
972 }
973 }, this), ['em', 'px', '%']);
974
975 this.factor = (this.options.scaleTo - this.options.scaleFrom)/100;
976
977 if (/^content/.test(this.options.scaleMode)) {
978 this.dims = [this.element.scrollHeight, this.element.scrollWidth];
979 } else if (this.options.scaleMode == 'box') {
980 this.dims = [this.element.offsetHeight, this.element.offsetWidth];
981 } else {
982 this.dims = [this.options.scaleMode.originalHeight,
983 this.options.scaleMode.originalWidth];
984 }
985 },
986
987 /** @id MochiKit.Visual.Scale.prototype.update */
988 update: function (position) {
989 var currentScale = (this.options.scaleFrom/100.0) +
990 (this.factor * position);
991 if (this.options.scaleContent && this.fontSize) {
992 MochiKit.Style.setStyle(this.element, {
993 fontSize: this.fontSize * currentScale + this.fontSizeType
994 });
995 }
996 this.setDimensions(this.dims[0] * currentScale,
997 this.dims[1] * currentScale);
998 },
999
1000 /** @id MochiKit.Visual.Scale.prototype.finish */
1001 finish: function () {
1002 if (this.restoreAfterFinish) {
1003 MochiKit.Style.setStyle(this.element, this.originalStyle);
1004 }
1005 },
1006
1007 /** @id MochiKit.Visual.Scale.prototype.setDimensions */
1008 setDimensions: function (height, width) {
1009 var d = {};
1010 var r = Math.round;
1011 if (/MSIE/.test(navigator.userAgent)) {
1012 r = Math.ceil;
1013 }
1014 if (this.options.scaleX) {
1015 d.width = r(width) + 'px';
1016 }
1017 if (this.options.scaleY) {
1018 d.height = r(height) + 'px';
1019 }
1020 if (this.options.scaleFromCenter) {
1021 var topd = (height - this.dims[0])/2;
1022 var leftd = (width - this.dims[1])/2;
1023 if (this.elementPositioning == 'absolute') {
1024 if (this.options.scaleY) {
1025 d.top = this.originalTop - topd + 'px';
1026 }
1027 if (this.options.scaleX) {
1028 d.left = this.originalLeft - leftd + 'px';
1029 }
1030 } else {
1031 if (this.options.scaleY) {
1032 d.top = -topd + 'px';
1033 }
1034 if (this.options.scaleX) {
1035 d.left = -leftd + 'px';
1036 }
1037 }
1038 }
1039 MochiKit.Style.setStyle(this.element, d);
1040 }
1041 });
1042
1043 /** @id MochiKit.Visual.Highlight */
1044 MochiKit.Visual.Highlight = function (element, options) {
1045 var cls = arguments.callee;
1046 if (!(this instanceof cls)) {
1047 return new cls(element, options);
1048 }
1049 this.__init__(element, options);
1050 };
1051
1052 MochiKit.Visual.Highlight.prototype = new MochiKit.Visual.Base();
1053
1054 MochiKit.Base.update(MochiKit.Visual.Highlight.prototype, {
1055 /***
1056
1057 Highlight an item of the page.
1058
1059 @param options: 'startcolor' for choosing highlighting color, default
1060 to '#ffff99'.
1061
1062 ***/
1063
1064 __class__ : MochiKit.Visual.Highlight,
1065
1066 __init__: function (element, /* optional */options) {
1067 this.element = MochiKit.DOM.getElement(element);
1068 options = MochiKit.Base.update({
1069 startcolor: '#ffff99'
1070 }, options || {});
1071 this.start(options);
1072 },
1073
1074 /** @id MochiKit.Visual.Highlight.prototype.setup */
1075 setup: function () {
1076 var b = MochiKit.Base;
1077 var s = MochiKit.Style;
1078 // Prevent executing on elements not in the layout flow
1079 if (s.getStyle(this.element, 'display') == 'none') {
1080 this.cancel();
1081 return;
1082 }
1083 // Disable background image during the effect
1084 this.oldStyle = {
1085 backgroundImage: s.getStyle(this.element, 'background-image')
1086 };
1087 s.setStyle(this.element, {
1088 backgroundImage: 'none'
1089 });
1090
1091 if (!this.options.endcolor) {
1092 this.options.endcolor =
1093 MochiKit.Color.Color.fromBackground(this.element).toHexString();
1094 }
1095 if (b.isUndefinedOrNull(this.options.restorecolor)) {
1096 this.options.restorecolor = s.getStyle(this.element,
1097 'background-color');
1098 }
1099 // init color calculations
1100 this._base = b.map(b.bind(function (i) {
1101 return parseInt(
1102 this.options.startcolor.slice(i*2 + 1, i*2 + 3), 16);
1103 }, this), [0, 1, 2]);
1104 this._delta = b.map(b.bind(function (i) {
1105 return parseInt(this.options.endcolor.slice(i*2 + 1, i*2 + 3), 16)
1106 - this._base[i];
1107 }, this), [0, 1, 2]);
1108 },
1109
1110 /** @id MochiKit.Visual.Highlight.prototype.update */
1111 update: function (position) {
1112 var m = '#';
1113 MochiKit.Base.map(MochiKit.Base.bind(function (i) {
1114 m += MochiKit.Color.toColorPart(Math.round(this._base[i] +
1115 this._delta[i]*position));
1116 }, this), [0, 1, 2]);
1117 MochiKit.Style.setStyle(this.element, {
1118 backgroundColor: m
1119 });
1120 },
1121
1122 /** @id MochiKit.Visual.Highlight.prototype.finish */
1123 finish: function () {
1124 MochiKit.Style.setStyle(this.element,
1125 MochiKit.Base.update(this.oldStyle, {
1126 backgroundColor: this.options.restorecolor
1127 }));
1128 }
1129 });
1130
1131 /** @id MochiKit.Visual.ScrollTo */
1132 MochiKit.Visual.ScrollTo = function (element, options) {
1133 var cls = arguments.callee;
1134 if (!(this instanceof cls)) {
1135 return new cls(element, options);
1136 }
1137 this.__init__(element, options);
1138 };
1139
1140 MochiKit.Visual.ScrollTo.prototype = new MochiKit.Visual.Base();
1141
1142 MochiKit.Base.update(MochiKit.Visual.ScrollTo.prototype, {
1143 /***
1144
1145 Scroll to an element in the page.
1146
1147 ***/
1148
1149 __class__ : MochiKit.Visual.ScrollTo,
1150
1151 __init__: function (element, /* optional */options) {
1152 this.element = MochiKit.DOM.getElement(element);
1153 this.start(options || {});
1154 },
1155
1156 /** @id MochiKit.Visual.ScrollTo.prototype.setup */
1157 setup: function () {
1158 var p = MochiKit.Position;
1159 p.prepare();
1160 var offsets = p.cumulativeOffset(this.element);
1161 if (this.options.offset) {
1162 offsets.y += this.options.offset;
1163 }
1164 var max;
1165 if (window.innerHeight) {
1166 max = window.innerHeight - window.height;
1167 } else if (document.documentElement &&
1168 document.documentElement.clientHeight) {
1169 max = document.documentElement.clientHeight -
1170 document.body.scrollHeight;
1171 } else if (document.body) {
1172 max = document.body.clientHeight - document.body.scrollHeight;
1173 }
1174 this.scrollStart = p.windowOffset.y;
1175 this.delta = (offsets.y > max ? max : offsets.y) - this.scrollStart;
1176 },
1177
1178 /** @id MochiKit.Visual.ScrollTo.prototype.update */
1179 update: function (position) {
1180 var p = MochiKit.Position;
1181 p.prepare();
1182 window.scrollTo(p.windowOffset.x, this.scrollStart + (position * this.delta));
1183 }
1184 });
1185
1186 MochiKit.Visual.CSS_LENGTH = /^(([\+\-]?[0-9\.]+)(em|ex|px|in|cm|mm|pt|pc|\%))|0$/;
1187
1188 MochiKit.Visual.Morph = function (element, options) {
1189 var cls = arguments.callee;
1190 if (!(this instanceof cls)) {
1191 return new cls(element, options);
1192 }
1193 this.__init__(element, options);
1194 };
1195
1196 MochiKit.Visual.Morph.prototype = new MochiKit.Visual.Base();
1197
1198 MochiKit.Base.update(MochiKit.Visual.Morph.prototype, {
1199 /***
1200
1201 Morph effect: make a transformation from current style to the given style,
1202 automatically making a transition between the two.
1203
1204 ***/
1205
1206 __class__ : MochiKit.Visual.Morph,
1207
1208 __init__: function (element, /* optional */options) {
1209 this.element = MochiKit.DOM.getElement(element);
1210 this.start(options || {});
1211 },
1212
1213 /** @id MochiKit.Visual.Morph.prototype.setup */
1214 setup: function () {
1215 var b = MochiKit.Base;
1216 var style = this.options.style;
1217 this.styleStart = {};
1218 this.styleEnd = {};
1219 this.units = {};
1220 var value, unit;
1221 for (var s in style) {
1222 value = style[s];
1223 s = b.camelize(s);
1224 if (MochiKit.Visual.CSS_LENGTH.test(value)) {
1225 var components = value.match(/^([\+\-]?[0-9\.]+)(.*)$/);
1226 value = parseFloat(components[1]);
1227 unit = (components.length == 3) ? components[2] : null;
1228 this.styleEnd[s] = value;
1229 this.units[s] = unit;
1230 value = MochiKit.Style.getStyle(this.element, s);
1231 components = value.match(/^([\+\-]?[0-9\.]+)(.*)$/);
1232 value = parseFloat(components[1]);
1233 this.styleStart[s] = value;
1234 } else {
1235 var c = MochiKit.Color.Color;
1236 value = c.fromString(value);
1237 if (value) {
1238 this.units[s] = "color";
1239 this.styleEnd[s] = value.toHexString();
1240 value = MochiKit.Style.getStyle(this.element, s);
1241 this.styleStart[s] = c.fromString(value).toHexString();
1242
1243 this.styleStart[s] = b.map(b.bind(function (i) {
1244 return parseInt(
1245 this.styleStart[s].slice(i*2 + 1, i*2 + 3), 16);
1246 }, this), [0, 1, 2]);
1247 this.styleEnd[s] = b.map(b.bind(function (i) {
1248 return parseInt(
1249 this.styleEnd[s].slice(i*2 + 1, i*2 + 3), 16);
1250 }, this), [0, 1, 2]);
1251 }
1252 }
1253 }
1254 },
1255
1256 /** @id MochiKit.Visual.Morph.prototype.update */
1257 update: function (position) {
1258 var value;
1259 for (var s in this.styleStart) {
1260 if (this.units[s] == "color") {
1261 var m = '#';
1262 var start = this.styleStart[s];
1263 var end = this.styleEnd[s];
1264 MochiKit.Base.map(MochiKit.Base.bind(function (i) {
1265 m += MochiKit.Color.toColorPart(Math.round(start[i] +
1266 (end[i] - start[i])*position));
1267 }, this), [0, 1, 2]);
1268 this.element.style[s] = m;
1269 } else {
1270 value = this.styleStart[s] + Math.round((this.styleEnd[s] - this.styleStart[s]) * position * 1000) / 1000 + this.units[s];
1271 this.element.style[s] = value;
1272 }
1273 }
1274 }
1275 });
1276
1277 /***
1278
1279 Combination effects.
1280
1281 ***/
1282
1283 /** @id MochiKit.Visual.fade */
1284 MochiKit.Visual.fade = function (element, /* optional */ options) {
1285 /***
1286
1287 Fade a given element: change its opacity and hide it in the end.
1288
1289 @param options: 'to' and 'from' to change opacity.
1290
1291 ***/
1292 var s = MochiKit.Style;
1293 var oldOpacity = s.getStyle(element, 'opacity');
1294 options = MochiKit.Base.update({
1295 from: s.getStyle(element, 'opacity') || 1.0,
1296 to: 0.0,
1297 afterFinishInternal: function (effect) {
1298 if (effect.options.to !== 0) {
1299 return;
1300 }
1301 s.hideElement(effect.element);
1302 s.setStyle(effect.element, {'opacity': oldOpacity});
1303 }
1304 }, options || {});
1305 return new MochiKit.Visual.Opacity(element, options);
1306 };
1307
1308 /** @id MochiKit.Visual.appear */
1309 MochiKit.Visual.appear = function (element, /* optional */ options) {
1310 /***
1311
1312 Make an element appear.
1313
1314 @param options: 'to' and 'from' to change opacity.
1315
1316 ***/
1317 var s = MochiKit.Style;
1318 var v = MochiKit.Visual;
1319 options = MochiKit.Base.update({
1320 from: (s.getStyle(element, 'display') == 'none' ? 0.0 :
1321 s.getStyle(element, 'opacity') || 0.0),
1322 to: 1.0,
1323 // force Safari to render floated elements properly
1324 afterFinishInternal: function (effect) {
1325 v.forceRerendering(effect.element);
1326 },
1327 beforeSetupInternal: function (effect) {
1328 s.setStyle(effect.element, {'opacity': effect.options.from});
1329 s.showElement(effect.element);
1330 }
1331 }, options || {});
1332 return new v.Opacity(element, options);
1333 };
1334
1335 /** @id MochiKit.Visual.puff */
1336 MochiKit.Visual.puff = function (element, /* optional */ options) {
1337 /***
1338
1339 'Puff' an element: grow it to double size, fading it and make it hidden.
1340
1341 ***/
1342 var s = MochiKit.Style;
1343 var v = MochiKit.Visual;
1344 element = MochiKit.DOM.getElement(element);
1345 var oldStyle = {
1346 position: s.getStyle(element, 'position'),
1347 top: element.style.top,
1348 left: element.style.left,
1349 width: element.style.width,
1350 height: element.style.height,
1351 opacity: s.getStyle(element, 'opacity')
1352 };
1353 options = MochiKit.Base.update({
1354 beforeSetupInternal: function (effect) {
1355 MochiKit.Position.absolutize(effect.effects[0].element);
1356 },
1357 afterFinishInternal: function (effect) {
1358 s.hideElement(effect.effects[0].element);
1359 s.setStyle(effect.effects[0].element, oldStyle);
1360 },
1361 scaleContent: true,
1362 scaleFromCenter: true
1363 }, options || {});
1364 return new v.Parallel(
1365 [new v.Scale(element, 200,
1366 {sync: true, scaleFromCenter: options.scaleFromCenter,
1367 scaleContent: options.scaleContent, restoreAfterFinish: true}),
1368 new v.Opacity(element, {sync: true, to: 0.0 })],
1369 options);
1370 };
1371
1372 /** @id MochiKit.Visual.blindUp */
1373 MochiKit.Visual.blindUp = function (element, /* optional */ options) {
1374 /***
1375
1376 Blind an element up: change its vertical size to 0.
1377
1378 ***/
1379 var d = MochiKit.DOM;
1380 element = d.getElement(element);
1381 var elemClip = d.makeClipping(element);
1382 options = MochiKit.Base.update({
1383 scaleContent: false,
1384 scaleX: false,
1385 restoreAfterFinish: true,
1386 afterFinishInternal: function (effect) {
1387 MochiKit.Style.hideElement(effect.element);
1388 d.undoClipping(effect.element, elemClip);
1389 }
1390 }, options || {});
1391
1392 return new MochiKit.Visual.Scale(element, 0, options);
1393 };
1394
1395 /** @id MochiKit.Visual.blindDown */
1396 MochiKit.Visual.blindDown = function (element, /* optional */ options) {
1397 /***
1398
1399 Blind an element down: restore its vertical size.
1400
1401 ***/
1402 var d = MochiKit.DOM;
1403 var s = MochiKit.Style;
1404 element = d.getElement(element);
1405 var elementDimensions = s.getElementDimensions(element);
1406 var elemClip;
1407 options = MochiKit.Base.update({
1408 scaleContent: false,
1409 scaleX: false,
1410 scaleFrom: 0,
1411 scaleMode: {originalHeight: elementDimensions.h,
1412 originalWidth: elementDimensions.w},
1413 restoreAfterFinish: true,
1414 afterSetupInternal: function (effect) {
1415 elemClip = d.makeClipping(effect.element);
1416 s.setStyle(effect.element, {height: '0px'});
1417 s.showElement(effect.element);
1418 },
1419 afterFinishInternal: function (effect) {
1420 d.undoClipping(effect.element, elemClip);
1421 }
1422 }, options || {});
1423 return new MochiKit.Visual.Scale(element, 100, options);
1424 };
1425
1426 /** @id MochiKit.Visual.switchOff */
1427 MochiKit.Visual.switchOff = function (element, /* optional */ options) {
1428 /***
1429
1430 Apply a switch-off-like effect.
1431
1432 ***/
1433 var d = MochiKit.DOM;
1434 element = d.getElement(element);
1435 var oldOpacity = MochiKit.Style.getStyle(element, 'opacity');
1436 var elemClip;
1437 options = MochiKit.Base.update({
1438 duration: 0.3,
1439 scaleFromCenter: true,
1440 scaleX: false,
1441 scaleContent: false,
1442 restoreAfterFinish: true,
1443 beforeSetupInternal: function (effect) {
1444 d.makePositioned(effect.element);
1445 elemClip = d.makeClipping(effect.element);
1446 },
1447 afterFinishInternal: function (effect) {
1448 MochiKit.Style.hideElement(effect.element);
1449 d.undoClipping(effect.element, elemClip);
1450 d.undoPositioned(effect.element);
1451 MochiKit.Style.setStyle(effect.element, {'opacity': oldOpacity});
1452 }
1453 }, options || {});
1454 var v = MochiKit.Visual;
1455 return new v.appear(element, {
1456 duration: 0.4,
1457 from: 0,
1458 transition: v.Transitions.flicker,
1459 afterFinishInternal: function (effect) {
1460 new v.Scale(effect.element, 1, options);
1461 }
1462 });
1463 };
1464
1465 /** @id MochiKit.Visual.dropOut */
1466 MochiKit.Visual.dropOut = function (element, /* optional */ options) {
1467 /***
1468
1469 Make an element fall and disappear.
1470
1471 ***/
1472 var d = MochiKit.DOM;
1473 var s = MochiKit.Style;
1474 element = d.getElement(element);
1475 var oldStyle = {
1476 top: s.getStyle(element, 'top'),
1477 left: s.getStyle(element, 'left'),
1478 opacity: s.getStyle(element, 'opacity')
1479 };
1480
1481 options = MochiKit.Base.update({
1482 duration: 0.5,
1483 distance: 100,
1484 beforeSetupInternal: function (effect) {
1485 d.makePositioned(effect.effects[0].element);
1486 },
1487 afterFinishInternal: function (effect) {
1488 s.hideElement(effect.effects[0].element);
1489 d.undoPositioned(effect.effects[0].element);
1490 s.setStyle(effect.effects[0].element, oldStyle);
1491 }
1492 }, options || {});
1493 var v = MochiKit.Visual;
1494 return new v.Parallel(
1495 [new v.Move(element, {x: 0, y: options.distance, sync: true}),
1496 new v.Opacity(element, {sync: true, to: 0.0})],
1497 options);
1498 };
1499
1500 /** @id MochiKit.Visual.shake */
1501 MochiKit.Visual.shake = function (element, /* optional */ options) {
1502 /***
1503
1504 Move an element from left to right several times.
1505
1506 ***/
1507 var d = MochiKit.DOM;
1508 var v = MochiKit.Visual;
1509 var s = MochiKit.Style;
1510 element = d.getElement(element);
1511 options = MochiKit.Base.update({
1512 x: -20,
1513 y: 0,
1514 duration: 0.05,
1515 afterFinishInternal: function (effect) {
1516 d.undoPositioned(effect.element);
1517 s.setStyle(effect.element, oldStyle);
1518 }
1519 }, options || {});
1520 var oldStyle = {
1521 top: s.getStyle(element, 'top'),
1522 left: s.getStyle(element, 'left') };
1523 return new v.Move(element,
1524 {x: 20, y: 0, duration: 0.05, afterFinishInternal: function (effect) {
1525 new v.Move(effect.element,
1526 {x: -40, y: 0, duration: 0.1, afterFinishInternal: function (effect) {
1527 new v.Move(effect.element,
1528 {x: 40, y: 0, duration: 0.1, afterFinishInternal: function (effect) {
1529 new v.Move(effect.element,
1530 {x: -40, y: 0, duration: 0.1, afterFinishInternal: function (effect) {
1531 new v.Move(effect.element,
1532 {x: 40, y: 0, duration: 0.1, afterFinishInternal: function (effect) {
1533 new v.Move(effect.element, options
1534 ) }}) }}) }}) }}) }});
1535 };
1536
1537 /** @id MochiKit.Visual.slideDown */
1538 MochiKit.Visual.slideDown = function (element, /* optional */ options) {
1539 /***
1540
1541 Slide an element down.
1542 It needs to have the content of the element wrapped in a container
1543 element with fixed height.
1544
1545 ***/
1546 var d = MochiKit.DOM;
1547 var b = MochiKit.Base;
1548 var s = MochiKit.Style;
1549 element = d.getElement(element);
1550 if (!element.firstChild) {
1551 throw "MochiKit.Visual.slideDown must be used on a element with a child";
1552 }
1553 d.removeEmptyTextNodes(element);
1554 var oldInnerBottom = s.getStyle(element.firstChild, 'bottom') || 0;
1555 var elementDimensions = s.getElementDimensions(element);
1556 var elemClip;
1557 options = b.update({
1558 scaleContent: false,
1559 scaleX: false,
1560 scaleFrom: 0,
1561 scaleMode: {originalHeight: elementDimensions.h,
1562 originalWidth: elementDimensions.w},
1563 restoreAfterFinish: true,
1564 afterSetupInternal: function (effect) {
1565 d.makePositioned(effect.element);
1566 d.makePositioned(effect.element.firstChild);
1567 if (/Opera/.test(navigator.userAgent)) {
1568 s.setStyle(effect.element, {top: ''});
1569 }
1570 elemClip = d.makeClipping(effect.element);
1571 s.setStyle(effect.element, {height: '0px'});
1572 s.showElement(effect.element);
1573 },
1574 afterUpdateInternal: function (effect) {
1575 s.setStyle(effect.element.firstChild,
1576 {bottom: (effect.dims[0] - effect.element.clientHeight) + 'px'});
1577 },
1578 afterFinishInternal: function (effect) {
1579 d.undoClipping(effect.element, elemClip);
1580 // IE will crash if child is undoPositioned first
1581 if (/MSIE/.test(navigator.userAgent)) {
1582 d.undoPositioned(effect.element);
1583 d.undoPositioned(effect.element.firstChild);
1584 } else {
1585 d.undoPositioned(effect.element.firstChild);
1586 d.undoPositioned(effect.element);
1587 }
1588 s.setStyle(effect.element.firstChild,
1589 {bottom: oldInnerBottom});
1590 }
1591 }, options || {});
1592
1593 return new MochiKit.Visual.Scale(element, 100, options);
1594 };
1595
1596 /** @id MochiKit.Visual.slideUp */
1597 MochiKit.Visual.slideUp = function (element, /* optional */ options) {
1598 /***
1599
1600 Slide an element up.
1601 It needs to have the content of the element wrapped in a container
1602 element with fixed height.
1603
1604 ***/
1605 var d = MochiKit.DOM;
1606 var b = MochiKit.Base;
1607 var s = MochiKit.Style;
1608 element = d.getElement(element);
1609 if (!element.firstChild) {
1610 throw "MochiKit.Visual.slideUp must be used on a element with a child";
1611 }
1612 d.removeEmptyTextNodes(element);
1613 var oldInnerBottom = s.getStyle(element.firstChild, 'bottom');
1614 var elemClip;
1615 options = b.update({
1616 scaleContent: false,
1617 scaleX: false,
1618 scaleMode: 'box',
1619 scaleFrom: 100,
1620 restoreAfterFinish: true,
1621 beforeStartInternal: function (effect) {
1622 d.makePositioned(effect.element);
1623 d.makePositioned(effect.element.firstChild);
1624 if (/Opera/.test(navigator.userAgent)) {
1625 s.setStyle(effect.element, {top: ''});
1626 }
1627 elemClip = d.makeClipping(effect.element);
1628 s.showElement(effect.element);
1629 },
1630 afterUpdateInternal: function (effect) {
1631 s.setStyle(effect.element.firstChild,
1632 {bottom: (effect.dims[0] - effect.element.clientHeight) + 'px'});
1633 },
1634 afterFinishInternal: function (effect) {
1635 s.hideElement(effect.element);
1636 d.undoClipping(effect.element, elemClip);
1637 d.undoPositioned(effect.element.firstChild);
1638 d.undoPositioned(effect.element);
1639 s.setStyle(effect.element.firstChild, {bottom: oldInnerBottom});
1640 }
1641 }, options || {});
1642 return new MochiKit.Visual.Scale(element, 0, options);
1643 };
1644
1645 // Bug in opera makes the TD containing this element expand for a instance
1646 // after finish
1647 /** @id MochiKit.Visual.squish */
1648 MochiKit.Visual.squish = function (element, /* optional */ options) {
1649 /***
1650
1651 Reduce an element and make it disappear.
1652
1653 ***/
1654 var d = MochiKit.DOM;
1655 var b = MochiKit.Base;
1656 var elemClip;
1657 options = b.update({
1658 restoreAfterFinish: true,
1659 beforeSetupInternal: function (effect) {
1660 elemClip = d.makeClipping(effect.element);
1661 },
1662 afterFinishInternal: function (effect) {
1663 MochiKit.Style.hideElement(effect.element);
1664 d.undoClipping(effect.element, elemClip);
1665 }
1666 }, options || {});
1667
1668 return new MochiKit.Visual.Scale(element, /Opera/.test(navigator.userAgent) ? 1 : 0, options);
1669 };
1670
1671 /** @id MochiKit.Visual.grow */
1672 MochiKit.Visual.grow = function (element, /* optional */ options) {
1673 /***
1674
1675 Grow an element to its original size. Make it zero-sized before
1676 if necessary.
1677
1678 ***/
1679 var d = MochiKit.DOM;
1680 var v = MochiKit.Visual;
1681 var s = MochiKit.Style;
1682 element = d.getElement(element);
1683 options = MochiKit.Base.update({
1684 direction: 'center',
1685 moveTransition: v.Transitions.sinoidal,
1686 scaleTransition: v.Transitions.sinoidal,
1687 opacityTransition: v.Transitions.full,
1688 scaleContent: true,
1689 scaleFromCenter: false
1690 }, options || {});
1691 var oldStyle = {
1692 top: element.style.top,
1693 left: element.style.left,
1694 height: element.style.height,
1695 width: element.style.width,
1696 opacity: s.getStyle(element, 'opacity')
1697 };
1698
1699 var dims = s.getElementDimensions(element);
1700 var initialMoveX, initialMoveY;
1701 var moveX, moveY;
1702
1703 switch (options.direction) {
1704 case 'top-left':
1705 initialMoveX = initialMoveY = moveX = moveY = 0;
1706 break;
1707 case 'top-right':
1708 initialMoveX = dims.w;
1709 initialMoveY = moveY = 0;
1710 moveX = -dims.w;
1711 break;
1712 case 'bottom-left':
1713 initialMoveX = moveX = 0;
1714 initialMoveY = dims.h;
1715 moveY = -dims.h;
1716 break;
1717 case 'bottom-right':
1718 initialMoveX = dims.w;
1719 initialMoveY = dims.h;
1720 moveX = -dims.w;
1721 moveY = -dims.h;
1722 break;
1723 case 'center':
1724 initialMoveX = dims.w / 2;
1725 initialMoveY = dims.h / 2;
1726 moveX = -dims.w / 2;
1727 moveY = -dims.h / 2;
1728 break;
1729 }
1730
1731 var optionsParallel = MochiKit.Base.update({
1732 beforeSetupInternal: function (effect) {
1733 s.setStyle(effect.effects[0].element, {height: '0px'});
1734 s.showElement(effect.effects[0].element);
1735 },
1736 afterFinishInternal: function (effect) {
1737 d.undoClipping(effect.effects[0].element);
1738 d.undoPositioned(effect.effects[0].element);
1739 s.setStyle(effect.effects[0].element, oldStyle);
1740 }
1741 }, options || {});
1742
1743 return new v.Move(element, {
1744 x: initialMoveX,
1745 y: initialMoveY,
1746 duration: 0.01,
1747 beforeSetupInternal: function (effect) {
1748 s.hideElement(effect.element);
1749 d.makeClipping(effect.element);
1750 d.makePositioned(effect.element);
1751 },
1752 afterFinishInternal: function (effect) {
1753 new v.Parallel(
1754 [new v.Opacity(effect.element, {
1755 sync: true, to: 1.0, from: 0.0,
1756 transition: options.opacityTransition
1757 }),
1758 new v.Move(effect.element, {
1759 x: moveX, y: moveY, sync: true,
1760 transition: options.moveTransition
1761 }),
1762 new v.Scale(effect.element, 100, {
1763 scaleMode: {originalHeight: dims.h,
1764 originalWidth: dims.w},
1765 sync: true,
1766 scaleFrom: /Opera/.test(navigator.userAgent) ? 1 : 0,
1767 transition: options.scaleTransition,
1768 scaleContent: options.scaleContent,
1769 scaleFromCenter: options.scaleFromCenter,
1770 restoreAfterFinish: true
1771 })
1772 ], optionsParallel
1773 );
1774 }
1775 });
1776 };
1777
1778 /** @id MochiKit.Visual.shrink */
1779 MochiKit.Visual.shrink = function (element, /* optional */ options) {
1780 /***
1781
1782 Shrink an element and make it disappear.
1783
1784 ***/
1785 var d = MochiKit.DOM;
1786 var v = MochiKit.Visual;
1787 var s = MochiKit.Style;
1788 element = d.getElement(element);
1789 options = MochiKit.Base.update({
1790 direction: 'center',
1791 moveTransition: v.Transitions.sinoidal,
1792 scaleTransition: v.Transitions.sinoidal,
1793 opacityTransition: v.Transitions.none,
1794 scaleContent: true,
1795 scaleFromCenter: false
1796 }, options || {});
1797 var oldStyle = {
1798 top: element.style.top,
1799 left: element.style.left,
1800 height: element.style.height,
1801 width: element.style.width,
1802 opacity: s.getStyle(element, 'opacity')
1803 };
1804
1805 var dims = s.getElementDimensions(element);
1806 var moveX, moveY;
1807
1808 switch (options.direction) {
1809 case 'top-left':
1810 moveX = moveY = 0;
1811 break;
1812 case 'top-right':
1813 moveX = dims.w;
1814 moveY = 0;
1815 break;
1816 case 'bottom-left':
1817 moveX = 0;
1818 moveY = dims.h;
1819 break;
1820 case 'bottom-right':
1821 moveX = dims.w;
1822 moveY = dims.h;
1823 break;
1824 case 'center':
1825 moveX = dims.w / 2;
1826 moveY = dims.h / 2;
1827 break;
1828 }
1829 var elemClip;
1830
1831 var optionsParallel = MochiKit.Base.update({
1832 beforeStartInternal: function (effect) {
1833 elemClip = d.makePositioned(effect.effects[0].element);
1834 d.makeClipping(effect.effects[0].element);
1835 },
1836 afterFinishInternal: function (effect) {
1837 s.hideElement(effect.effects[0].element);
1838 d.undoClipping(effect.effects[0].element, elemClip);
1839 d.undoPositioned(effect.effects[0].element);
1840 s.setStyle(effect.effects[0].element, oldStyle);
1841 }
1842 }, options || {});
1843
1844 return new v.Parallel(
1845 [new v.Opacity(element, {
1846 sync: true, to: 0.0, from: 1.0,
1847 transition: options.opacityTransition
1848 }),
1849 new v.Scale(element, /Opera/.test(navigator.userAgent) ? 1 : 0, {
1850 sync: true, transition: options.scaleTransition,
1851 scaleContent: options.scaleContent,
1852 scaleFromCenter: options.scaleFromCenter,
1853 restoreAfterFinish: true
1854 }),
1855 new v.Move(element, {
1856 x: moveX, y: moveY, sync: true, transition: options.moveTransition
1857 })
1858 ], optionsParallel
1859 );
1860 };
1861
1862 /** @id MochiKit.Visual.pulsate */
1863 MochiKit.Visual.pulsate = function (element, /* optional */ options) {
1864 /***
1865
1866 Pulse an element between appear/fade.
1867
1868 ***/
1869 var d = MochiKit.DOM;
1870 var v = MochiKit.Visual;
1871 var b = MochiKit.Base;
1872 var oldOpacity = MochiKit.Style.getStyle(element, 'opacity');
1873 options = b.update({
1874 duration: 3.0,
1875 from: 0,
1876 afterFinishInternal: function (effect) {
1877 MochiKit.Style.setStyle(effect.element, {'opacity': oldOpacity});
1878 }
1879 }, options || {});
1880 var transition = options.transition || v.Transitions.sinoidal;
1881 var reverser = b.bind(function (pos) {
1882 return transition(1 - v.Transitions.pulse(pos, options.pulses));
1883 }, transition);
1884 b.bind(reverser, transition);
1885 return new v.Opacity(element, b.update({
1886 transition: reverser}, options));
1887 };
1888
1889 /** @id MochiKit.Visual.fold */
1890 MochiKit.Visual.fold = function (element, /* optional */ options) {
1891 /***
1892
1893 Fold an element, first vertically, then horizontally.
1894
1895 ***/
1896 var d = MochiKit.DOM;
1897 var v = MochiKit.Visual;
1898 var s = MochiKit.Style;
1899 element = d.getElement(element);
1900 var oldStyle = {
1901 top: element.style.top,
1902 left: element.style.left,
1903 width: element.style.width,
1904 height: element.style.height
1905 };
1906 var elemClip = d.makeClipping(element);
1907 options = MochiKit.Base.update({
1908 scaleContent: false,
1909 scaleX: false,
1910 afterFinishInternal: function (effect) {
1911 new v.Scale(element, 1, {
1912 scaleContent: false,
1913 scaleY: false,
1914 afterFinishInternal: function (effect) {
1915 s.hideElement(effect.element);
1916 d.undoClipping(effect.element, elemClip);
1917 s.setStyle(effect.element, oldStyle);
1918 }
1919 });
1920 }
1921 }, options || {});
1922 return new v.Scale(element, 5, options);
1923 };
1924
1925
1926 // Compatibility with MochiKit 1.0
1927 MochiKit.Visual.Color = MochiKit.Color.Color;
1928 MochiKit.Visual.getElementsComputedStyle = MochiKit.DOM.computedStyle;
1929
1930 /* end of Rico adaptation */
1931
1932 MochiKit.Visual.__new__ = function () {
1933 var m = MochiKit.Base;
1934
1935 m.nameFunctions(this);
1936
1937 this.EXPORT_TAGS = {
1938 ":common": this.EXPORT,
1939 ":all": m.concat(this.EXPORT, this.EXPORT_OK)
1940 };
1941
1942 };
1943
1944 MochiKit.Visual.EXPORT = [
1945 "roundElement",
1946 "roundClass",
1947 "tagifyText",
1948 "multiple",
1949 "toggle",
1950 "Parallel",
1951 "Opacity",
1952 "Move",
1953 "Scale",
1954 "Highlight",
1955 "ScrollTo",
1956 "Morph",
1957 "fade",
1958 "appear",
1959 "puff",
1960 "blindUp",
1961 "blindDown",
1962 "switchOff",
1963 "dropOut",
1964 "shake",
1965 "slideDown",
1966 "slideUp",
1967 "squish",
1968 "grow",
1969 "shrink",
1970 "pulsate",
1971 "fold"
1972 ];
1973
1974 MochiKit.Visual.EXPORT_OK = [
1975 "Base",
1976 "PAIRS"
1977 ];
1978
1979 MochiKit.Visual.__new__();
1980
1981 MochiKit.Base._exportSymbols(this, MochiKit.Visual);

Mercurial Repository: The Tor Browser

Europalab SCM Repository Server

mercurial