mp-wp_genesis 1 // script.aculo.us effects.js v1.8.0, Tue Nov 06 15:01:40 +0300 2007
mp-wp_genesis 2
mp-wp_genesis 3 // Copyright (c) 2005-2007 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
mp-wp_genesis 4 // Contributors:
mp-wp_genesis 5 // Justin Palmer (http://encytemedia.com/)
mp-wp_genesis 6 // Mark Pilgrim (http://diveintomark.org/)
mp-wp_genesis 7 // Martin Bialasinki
mp-wp_genesis 8 //
mp-wp_genesis 9 // script.aculo.us is freely distributable under the terms of an MIT-style license.
mp-wp_genesis 10 // For details, see the script.aculo.us web site: http://script.aculo.us/
mp-wp_genesis 11
mp-wp_genesis 12 // converts rgb() and #xxx to #xxxxxx format,
mp-wp_genesis 13 // returns self (or first argument) if not convertable
mp-wp_genesis 14 String.prototype.parseColor = function() {
mp-wp_genesis 15 var color = '#';
mp-wp_genesis 16 if (this.slice(0,4) == 'rgb(') {
mp-wp_genesis 17 var cols = this.slice(4,this.length-1).split(',');
mp-wp_genesis 18 var i=0; do { color += parseInt(cols[i]).toColorPart() } while (++i<3);
mp-wp_genesis 19 } else {
mp-wp_genesis 20 if (this.slice(0,1) == '#') {
mp-wp_genesis 21 if (this.length==4) for(var i=1;i<4;i++) color += (this.charAt(i) + this.charAt(i)).toLowerCase();
mp-wp_genesis 22 if (this.length==7) color = this.toLowerCase();
mp-wp_genesis 23 }
mp-wp_genesis 24 }
mp-wp_genesis 25 return (color.length==7 ? color : (arguments[0] || this));
mp-wp_genesis 26 };
mp-wp_genesis 27
mp-wp_genesis 28 /*--------------------------------------------------------------------------*/
mp-wp_genesis 29
mp-wp_genesis 30 Element.collectTextNodes = function(element) {
mp-wp_genesis 31 return $A($(element).childNodes).collect( function(node) {
mp-wp_genesis 32 return (node.nodeType==3 ? node.nodeValue :
mp-wp_genesis 33 (node.hasChildNodes() ? Element.collectTextNodes(node) : ''));
mp-wp_genesis 34 }).flatten().join('');
mp-wp_genesis 35 };
mp-wp_genesis 36
mp-wp_genesis 37 Element.collectTextNodesIgnoreClass = function(element, className) {
mp-wp_genesis 38 return $A($(element).childNodes).collect( function(node) {
mp-wp_genesis 39 return (node.nodeType==3 ? node.nodeValue :
mp-wp_genesis 40 ((node.hasChildNodes() && !Element.hasClassName(node,className)) ?
mp-wp_genesis 41 Element.collectTextNodesIgnoreClass(node, className) : ''));
mp-wp_genesis 42 }).flatten().join('');
mp-wp_genesis 43 };
mp-wp_genesis 44
mp-wp_genesis 45 Element.setContentZoom = function(element, percent) {
mp-wp_genesis 46 element = $(element);
mp-wp_genesis 47 element.setStyle({fontSize: (percent/100) + 'em'});
mp-wp_genesis 48 if (Prototype.Browser.WebKit) window.scrollBy(0,0);
mp-wp_genesis 49 return element;
mp-wp_genesis 50 };
mp-wp_genesis 51
mp-wp_genesis 52 Element.getInlineOpacity = function(element){
mp-wp_genesis 53 return $(element).style.opacity || '';
mp-wp_genesis 54 };
mp-wp_genesis 55
mp-wp_genesis 56 Element.forceRerendering = function(element) {
mp-wp_genesis 57 try {
mp-wp_genesis 58 element = $(element);
mp-wp_genesis 59 var n = document.createTextNode(' ');
mp-wp_genesis 60 element.appendChild(n);
mp-wp_genesis 61 element.removeChild(n);
mp-wp_genesis 62 } catch(e) { }
mp-wp_genesis 63 };
mp-wp_genesis 64
mp-wp_genesis 65 /*--------------------------------------------------------------------------*/
mp-wp_genesis 66
mp-wp_genesis 67 var Effect = {
mp-wp_genesis 68 _elementDoesNotExistError: {
mp-wp_genesis 69 name: 'ElementDoesNotExistError',
mp-wp_genesis 70 message: 'The specified DOM element does not exist, but is required for this effect to operate'
mp-wp_genesis 71 },
mp-wp_genesis 72 Transitions: {
mp-wp_genesis 73 linear: Prototype.K,
mp-wp_genesis 74 sinoidal: function(pos) {
mp-wp_genesis 75 return (-Math.cos(pos*Math.PI)/2) + 0.5;
mp-wp_genesis 76 },
mp-wp_genesis 77 reverse: function(pos) {
mp-wp_genesis 78 return 1-pos;
mp-wp_genesis 79 },
mp-wp_genesis 80 flicker: function(pos) {
mp-wp_genesis 81 var pos = ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random()/4;
mp-wp_genesis 82 return pos > 1 ? 1 : pos;
mp-wp_genesis 83 },
mp-wp_genesis 84 wobble: function(pos) {
mp-wp_genesis 85 return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
mp-wp_genesis 86 },
mp-wp_genesis 87 pulse: function(pos, pulses) {
mp-wp_genesis 88 pulses = pulses || 5;
mp-wp_genesis 89 return (
mp-wp_genesis 90 ((pos % (1/pulses)) * pulses).round() == 0 ?
mp-wp_genesis 91 ((pos * pulses * 2) - (pos * pulses * 2).floor()) :
mp-wp_genesis 92 1 - ((pos * pulses * 2) - (pos * pulses * 2).floor())
mp-wp_genesis 93 );
mp-wp_genesis 94 },
mp-wp_genesis 95 spring: function(pos) {
mp-wp_genesis 96 return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp(-pos * 6));
mp-wp_genesis 97 },
mp-wp_genesis 98 none: function(pos) {
mp-wp_genesis 99 return 0;
mp-wp_genesis 100 },
mp-wp_genesis 101 full: function(pos) {
mp-wp_genesis 102 return 1;
mp-wp_genesis 103 }
mp-wp_genesis 104 },
mp-wp_genesis 105 DefaultOptions: {
mp-wp_genesis 106 duration: 1.0, // seconds
mp-wp_genesis 107 fps: 100, // 100= assume 66fps max.
mp-wp_genesis 108 sync: false, // true for combining
mp-wp_genesis 109 from: 0.0,
mp-wp_genesis 110 to: 1.0,
mp-wp_genesis 111 delay: 0.0,
mp-wp_genesis 112 queue: 'parallel'
mp-wp_genesis 113 },
mp-wp_genesis 114 tagifyText: function(element) {
mp-wp_genesis 115 var tagifyStyle = 'position:relative';
mp-wp_genesis 116 if (Prototype.Browser.IE) tagifyStyle += ';zoom:1';
mp-wp_genesis 117
mp-wp_genesis 118 element = $(element);
mp-wp_genesis 119 $A(element.childNodes).each( function(child) {
mp-wp_genesis 120 if (child.nodeType==3) {
mp-wp_genesis 121 child.nodeValue.toArray().each( function(character) {
mp-wp_genesis 122 element.insertBefore(
mp-wp_genesis 123 new Element('span', {style: tagifyStyle}).update(
mp-wp_genesis 124 character == ' ' ? String.fromCharCode(160) : character),
mp-wp_genesis 125 child);
mp-wp_genesis 126 });
mp-wp_genesis 127 Element.remove(child);
mp-wp_genesis 128 }
mp-wp_genesis 129 });
mp-wp_genesis 130 },
mp-wp_genesis 131 multiple: function(element, effect) {
mp-wp_genesis 132 var elements;
mp-wp_genesis 133 if (((typeof element == 'object') ||
mp-wp_genesis 134 Object.isFunction(element)) &&
mp-wp_genesis 135 (element.length))
mp-wp_genesis 136 elements = element;
mp-wp_genesis 137 else
mp-wp_genesis 138 elements = $(element).childNodes;
mp-wp_genesis 139
mp-wp_genesis 140 var options = Object.extend({
mp-wp_genesis 141 speed: 0.1,
mp-wp_genesis 142 delay: 0.0
mp-wp_genesis 143 }, arguments[2] || { });
mp-wp_genesis 144 var masterDelay = options.delay;
mp-wp_genesis 145
mp-wp_genesis 146 $A(elements).each( function(element, index) {
mp-wp_genesis 147 new effect(element, Object.extend(options, { delay: index * options.speed + masterDelay }));
mp-wp_genesis 148 });
mp-wp_genesis 149 },
mp-wp_genesis 150 PAIRS: {
mp-wp_genesis 151 'slide': ['SlideDown','SlideUp'],
mp-wp_genesis 152 'blind': ['BlindDown','BlindUp'],
mp-wp_genesis 153 'appear': ['Appear','Fade']
mp-wp_genesis 154 },
mp-wp_genesis 155 toggle: function(element, effect) {
mp-wp_genesis 156 element = $(element);
mp-wp_genesis 157 effect = (effect || 'appear').toLowerCase();
mp-wp_genesis 158 var options = Object.extend({
mp-wp_genesis 159 queue: { position:'end', scope:(element.id || 'global'), limit: 1 }
mp-wp_genesis 160 }, arguments[2] || { });
mp-wp_genesis 161 Effect[element.visible() ?
mp-wp_genesis 162 Effect.PAIRS[effect][1] : Effect.PAIRS[effect][0]](element, options);
mp-wp_genesis 163 }
mp-wp_genesis 164 };
mp-wp_genesis 165
mp-wp_genesis 166 Effect.DefaultOptions.transition = Effect.Transitions.sinoidal;
mp-wp_genesis 167
mp-wp_genesis 168 /* ------------- core effects ------------- */
mp-wp_genesis 169
mp-wp_genesis 170 Effect.ScopedQueue = Class.create(Enumerable, {
mp-wp_genesis 171 initialize: function() {
mp-wp_genesis 172 this.effects = [];
mp-wp_genesis 173 this.interval = null;
mp-wp_genesis 174 },
mp-wp_genesis 175 _each: function(iterator) {
mp-wp_genesis 176 this.effects._each(iterator);
mp-wp_genesis 177 },
mp-wp_genesis 178 add: function(effect) {
mp-wp_genesis 179 var timestamp = new Date().getTime();
mp-wp_genesis 180
mp-wp_genesis 181 var position = Object.isString(effect.options.queue) ?
mp-wp_genesis 182 effect.options.queue : effect.options.queue.position;
mp-wp_genesis 183
mp-wp_genesis 184 switch(position) {
mp-wp_genesis 185 case 'front':
mp-wp_genesis 186 // move unstarted effects after this effect
mp-wp_genesis 187 this.effects.findAll(function(e){ return e.state=='idle' }).each( function(e) {
mp-wp_genesis 188 e.startOn += effect.finishOn;
mp-wp_genesis 189 e.finishOn += effect.finishOn;
mp-wp_genesis 190 });
mp-wp_genesis 191 break;
mp-wp_genesis 192 case 'with-last':
mp-wp_genesis 193 timestamp = this.effects.pluck('startOn').max() || timestamp;
mp-wp_genesis 194 break;
mp-wp_genesis 195 case 'end':
mp-wp_genesis 196 // start effect after last queued effect has finished
mp-wp_genesis 197 timestamp = this.effects.pluck('finishOn').max() || timestamp;
mp-wp_genesis 198 break;
mp-wp_genesis 199 }
mp-wp_genesis 200
mp-wp_genesis 201 effect.startOn += timestamp;
mp-wp_genesis 202 effect.finishOn += timestamp;
mp-wp_genesis 203
mp-wp_genesis 204 if (!effect.options.queue.limit || (this.effects.length < effect.options.queue.limit))
mp-wp_genesis 205 this.effects.push(effect);
mp-wp_genesis 206
mp-wp_genesis 207 if (!this.interval)
mp-wp_genesis 208 this.interval = setInterval(this.loop.bind(this), 15);
mp-wp_genesis 209 },
mp-wp_genesis 210 remove: function(effect) {
mp-wp_genesis 211 this.effects = this.effects.reject(function(e) { return e==effect });
mp-wp_genesis 212 if (this.effects.length == 0) {
mp-wp_genesis 213 clearInterval(this.interval);
mp-wp_genesis 214 this.interval = null;
mp-wp_genesis 215 }
mp-wp_genesis 216 },
mp-wp_genesis 217 loop: function() {
mp-wp_genesis 218 var timePos = new Date().getTime();
mp-wp_genesis 219 for(var i=0, len=this.effects.length;i<len;i++)
mp-wp_genesis 220 this.effects[i] && this.effects[i].loop(timePos);
mp-wp_genesis 221 }
mp-wp_genesis 222 });
mp-wp_genesis 223
mp-wp_genesis 224 Effect.Queues = {
mp-wp_genesis 225 instances: $H(),
mp-wp_genesis 226 get: function(queueName) {
mp-wp_genesis 227 if (!Object.isString(queueName)) return queueName;
mp-wp_genesis 228
mp-wp_genesis 229 return this.instances.get(queueName) ||
mp-wp_genesis 230 this.instances.set(queueName, new Effect.ScopedQueue());
mp-wp_genesis 231 }
mp-wp_genesis 232 };
mp-wp_genesis 233 Effect.Queue = Effect.Queues.get('global');
mp-wp_genesis 234
mp-wp_genesis 235 Effect.Base = Class.create({
mp-wp_genesis 236 position: null,
mp-wp_genesis 237 start: function(options) {
mp-wp_genesis 238 function codeForEvent(options,eventName){
mp-wp_genesis 239 return (
mp-wp_genesis 240 (options[eventName+'Internal'] ? 'this.options.'+eventName+'Internal(this);' : '') +
mp-wp_genesis 241 (options[eventName] ? 'this.options.'+eventName+'(this);' : '')
mp-wp_genesis 242 );
mp-wp_genesis 243 }
mp-wp_genesis 244 if (options && options.transition === false) options.transition = Effect.Transitions.linear;
mp-wp_genesis 245 this.options = Object.extend(Object.extend({ },Effect.DefaultOptions), options || { });
mp-wp_genesis 246 this.currentFrame = 0;
mp-wp_genesis 247 this.state = 'idle';
mp-wp_genesis 248 this.startOn = this.options.delay*1000;
mp-wp_genesis 249 this.finishOn = this.startOn+(this.options.duration*1000);
mp-wp_genesis 250 this.fromToDelta = this.options.to-this.options.from;
mp-wp_genesis 251 this.totalTime = this.finishOn-this.startOn;
mp-wp_genesis 252 this.totalFrames = this.options.fps*this.options.duration;
mp-wp_genesis 253
mp-wp_genesis 254 eval('this.render = function(pos){ '+
mp-wp_genesis 255 'if (this.state=="idle"){this.state="running";'+
mp-wp_genesis 256 codeForEvent(this.options,'beforeSetup')+
mp-wp_genesis 257 (this.setup ? 'this.setup();':'')+
mp-wp_genesis 258 codeForEvent(this.options,'afterSetup')+
mp-wp_genesis 259 '};if (this.state=="running"){'+
mp-wp_genesis 260 'pos=this.options.transition(pos)*'+this.fromToDelta+'+'+this.options.from+';'+
mp-wp_genesis 261 'this.position=pos;'+
mp-wp_genesis 262 codeForEvent(this.options,'beforeUpdate')+
mp-wp_genesis 263 (this.update ? 'this.update(pos);':'')+
mp-wp_genesis 264 codeForEvent(this.options,'afterUpdate')+
mp-wp_genesis 265 '}}');
mp-wp_genesis 266
mp-wp_genesis 267 this.event('beforeStart');
mp-wp_genesis 268 if (!this.options.sync)
mp-wp_genesis 269 Effect.Queues.get(Object.isString(this.options.queue) ?
mp-wp_genesis 270 'global' : this.options.queue.scope).add(this);
mp-wp_genesis 271 },
mp-wp_genesis 272 loop: function(timePos) {
mp-wp_genesis 273 if (timePos >= this.startOn) {
mp-wp_genesis 274 if (timePos >= this.finishOn) {
mp-wp_genesis 275 this.render(1.0);
mp-wp_genesis 276 this.cancel();
mp-wp_genesis 277 this.event('beforeFinish');
mp-wp_genesis 278 if (this.finish) this.finish();
mp-wp_genesis 279 this.event('afterFinish');
mp-wp_genesis 280 return;
mp-wp_genesis 281 }
mp-wp_genesis 282 var pos = (timePos - this.startOn) / this.totalTime,
mp-wp_genesis 283 frame = (pos * this.totalFrames).round();
mp-wp_genesis 284 if (frame > this.currentFrame) {
mp-wp_genesis 285 this.render(pos);
mp-wp_genesis 286 this.currentFrame = frame;
mp-wp_genesis 287 }
mp-wp_genesis 288 }
mp-wp_genesis 289 },
mp-wp_genesis 290 cancel: function() {
mp-wp_genesis 291 if (!this.options.sync)
mp-wp_genesis 292 Effect.Queues.get(Object.isString(this.options.queue) ?
mp-wp_genesis 293 'global' : this.options.queue.scope).remove(this);
mp-wp_genesis 294 this.state = 'finished';
mp-wp_genesis 295 },
mp-wp_genesis 296 event: function(eventName) {
mp-wp_genesis 297 if (this.options[eventName + 'Internal']) this.options[eventName + 'Internal'](this);
mp-wp_genesis 298 if (this.options[eventName]) this.options[eventName](this);
mp-wp_genesis 299 },
mp-wp_genesis 300 inspect: function() {
mp-wp_genesis 301 var data = $H();
mp-wp_genesis 302 for(property in this)
mp-wp_genesis 303 if (!Object.isFunction(this[property])) data.set(property, this[property]);
mp-wp_genesis 304 return '#<Effect:' + data.inspect() + ',options:' + $H(this.options).inspect() + '>';
mp-wp_genesis 305 }
mp-wp_genesis 306 });
mp-wp_genesis 307
mp-wp_genesis 308 Effect.Parallel = Class.create(Effect.Base, {
mp-wp_genesis 309 initialize: function(effects) {
mp-wp_genesis 310 this.effects = effects || [];
mp-wp_genesis 311 this.start(arguments[1]);
mp-wp_genesis 312 },
mp-wp_genesis 313 update: function(position) {
mp-wp_genesis 314 this.effects.invoke('render', position);
mp-wp_genesis 315 },
mp-wp_genesis 316 finish: function(position) {
mp-wp_genesis 317 this.effects.each( function(effect) {
mp-wp_genesis 318 effect.render(1.0);
mp-wp_genesis 319 effect.cancel();
mp-wp_genesis 320 effect.event('beforeFinish');
mp-wp_genesis 321 if (effect.finish) effect.finish(position);
mp-wp_genesis 322 effect.event('afterFinish');
mp-wp_genesis 323 });
mp-wp_genesis 324 }
mp-wp_genesis 325 });
mp-wp_genesis 326
mp-wp_genesis 327 Effect.Tween = Class.create(Effect.Base, {
mp-wp_genesis 328 initialize: function(object, from, to) {
mp-wp_genesis 329 object = Object.isString(object) ? $(object) : object;
mp-wp_genesis 330 var args = $A(arguments), method = args.last(),
mp-wp_genesis 331 options = args.length == 5 ? args[3] : null;
mp-wp_genesis 332 this.method = Object.isFunction(method) ? method.bind(object) :
mp-wp_genesis 333 Object.isFunction(object[method]) ? object[method].bind(object) :
mp-wp_genesis 334 function(value) { object[method] = value };
mp-wp_genesis 335 this.start(Object.extend({ from: from, to: to }, options || { }));
mp-wp_genesis 336 },
mp-wp_genesis 337 update: function(position) {
mp-wp_genesis 338 this.method(position);
mp-wp_genesis 339 }
mp-wp_genesis 340 });
mp-wp_genesis 341
mp-wp_genesis 342 Effect.Event = Class.create(Effect.Base, {
mp-wp_genesis 343 initialize: function() {
mp-wp_genesis 344 this.start(Object.extend({ duration: 0 }, arguments[0] || { }));
mp-wp_genesis 345 },
mp-wp_genesis 346 update: Prototype.emptyFunction
mp-wp_genesis 347 });
mp-wp_genesis 348
mp-wp_genesis 349 Effect.Opacity = Class.create(Effect.Base, {
mp-wp_genesis 350 initialize: function(element) {
mp-wp_genesis 351 this.element = $(element);
mp-wp_genesis 352 if (!this.element) throw(Effect._elementDoesNotExistError);
mp-wp_genesis 353 // make this work on IE on elements without 'layout'
mp-wp_genesis 354 if (Prototype.Browser.IE && (!this.element.currentStyle.hasLayout))
mp-wp_genesis 355 this.element.setStyle({zoom: 1});
mp-wp_genesis 356 var options = Object.extend({
mp-wp_genesis 357 from: this.element.getOpacity() || 0.0,
mp-wp_genesis 358 to: 1.0
mp-wp_genesis 359 }, arguments[1] || { });
mp-wp_genesis 360 this.start(options);
mp-wp_genesis 361 },
mp-wp_genesis 362 update: function(position) {
mp-wp_genesis 363 this.element.setOpacity(position);
mp-wp_genesis 364 }
mp-wp_genesis 365 });
mp-wp_genesis 366
mp-wp_genesis 367 Effect.Move = Class.create(Effect.Base, {
mp-wp_genesis 368 initialize: function(element) {
mp-wp_genesis 369 this.element = $(element);
mp-wp_genesis 370 if (!this.element) throw(Effect._elementDoesNotExistError);
mp-wp_genesis 371 var options = Object.extend({
mp-wp_genesis 372 x: 0,
mp-wp_genesis 373 y: 0,
mp-wp_genesis 374 mode: 'relative'
mp-wp_genesis 375 }, arguments[1] || { });
mp-wp_genesis 376 this.start(options);
mp-wp_genesis 377 },
mp-wp_genesis 378 setup: function() {
mp-wp_genesis 379 this.element.makePositioned();
mp-wp_genesis 380 this.originalLeft = parseFloat(this.element.getStyle('left') || '0');
mp-wp_genesis 381 this.originalTop = parseFloat(this.element.getStyle('top') || '0');
mp-wp_genesis 382 if (this.options.mode == 'absolute') {
mp-wp_genesis 383 this.options.x = this.options.x - this.originalLeft;
mp-wp_genesis 384 this.options.y = this.options.y - this.originalTop;
mp-wp_genesis 385 }
mp-wp_genesis 386 },
mp-wp_genesis 387 update: function(position) {
mp-wp_genesis 388 this.element.setStyle({
mp-wp_genesis 389 left: (this.options.x * position + this.originalLeft).round() + 'px',
mp-wp_genesis 390 top: (this.options.y * position + this.originalTop).round() + 'px'
mp-wp_genesis 391 });
mp-wp_genesis 392 }
mp-wp_genesis 393 });
mp-wp_genesis 394
mp-wp_genesis 395 // for backwards compatibility
mp-wp_genesis 396 Effect.MoveBy = function(element, toTop, toLeft) {
mp-wp_genesis 397 return new Effect.Move(element,
mp-wp_genesis 398 Object.extend({ x: toLeft, y: toTop }, arguments[3] || { }));
mp-wp_genesis 399 };
mp-wp_genesis 400
mp-wp_genesis 401 Effect.Scale = Class.create(Effect.Base, {
mp-wp_genesis 402 initialize: function(element, percent) {
mp-wp_genesis 403 this.element = $(element);
mp-wp_genesis 404 if (!this.element) throw(Effect._elementDoesNotExistError);
mp-wp_genesis 405 var options = Object.extend({
mp-wp_genesis 406 scaleX: true,
mp-wp_genesis 407 scaleY: true,
mp-wp_genesis 408 scaleContent: true,
mp-wp_genesis 409 scaleFromCenter: false,
mp-wp_genesis 410 scaleMode: 'box', // 'box' or 'contents' or { } with provided values
mp-wp_genesis 411 scaleFrom: 100.0,
mp-wp_genesis 412 scaleTo: percent
mp-wp_genesis 413 }, arguments[2] || { });
mp-wp_genesis 414 this.start(options);
mp-wp_genesis 415 },
mp-wp_genesis 416 setup: function() {
mp-wp_genesis 417 this.restoreAfterFinish = this.options.restoreAfterFinish || false;
mp-wp_genesis 418 this.elementPositioning = this.element.getStyle('position');
mp-wp_genesis 419
mp-wp_genesis 420 this.originalStyle = { };
mp-wp_genesis 421 ['top','left','width','height','fontSize'].each( function(k) {
mp-wp_genesis 422 this.originalStyle[k] = this.element.style[k];
mp-wp_genesis 423 }.bind(this));
mp-wp_genesis 424
mp-wp_genesis 425 this.originalTop = this.element.offsetTop;
mp-wp_genesis 426 this.originalLeft = this.element.offsetLeft;
mp-wp_genesis 427
mp-wp_genesis 428 var fontSize = this.element.getStyle('font-size') || '100%';
mp-wp_genesis 429 ['em','px','%','pt'].each( function(fontSizeType) {
mp-wp_genesis 430 if (fontSize.indexOf(fontSizeType)>0) {
mp-wp_genesis 431 this.fontSize = parseFloat(fontSize);
mp-wp_genesis 432 this.fontSizeType = fontSizeType;
mp-wp_genesis 433 }
mp-wp_genesis 434 }.bind(this));
mp-wp_genesis 435
mp-wp_genesis 436 this.factor = (this.options.scaleTo - this.options.scaleFrom)/100;
mp-wp_genesis 437
mp-wp_genesis 438 this.dims = null;
mp-wp_genesis 439 if (this.options.scaleMode=='box')
mp-wp_genesis 440 this.dims = [this.element.offsetHeight, this.element.offsetWidth];
mp-wp_genesis 441 if (/^content/.test(this.options.scaleMode))
mp-wp_genesis 442 this.dims = [this.element.scrollHeight, this.element.scrollWidth];
mp-wp_genesis 443 if (!this.dims)
mp-wp_genesis 444 this.dims = [this.options.scaleMode.originalHeight,
mp-wp_genesis 445 this.options.scaleMode.originalWidth];
mp-wp_genesis 446 },
mp-wp_genesis 447 update: function(position) {
mp-wp_genesis 448 var currentScale = (this.options.scaleFrom/100.0) + (this.factor * position);
mp-wp_genesis 449 if (this.options.scaleContent && this.fontSize)
mp-wp_genesis 450 this.element.setStyle({fontSize: this.fontSize * currentScale + this.fontSizeType });
mp-wp_genesis 451 this.setDimensions(this.dims[0] * currentScale, this.dims[1] * currentScale);
mp-wp_genesis 452 },
mp-wp_genesis 453 finish: function(position) {
mp-wp_genesis 454 if (this.restoreAfterFinish) this.element.setStyle(this.originalStyle);
mp-wp_genesis 455 },
mp-wp_genesis 456 setDimensions: function(height, width) {
mp-wp_genesis 457 var d = { };
mp-wp_genesis 458 if (this.options.scaleX) d.width = width.round() + 'px';
mp-wp_genesis 459 if (this.options.scaleY) d.height = height.round() + 'px';
mp-wp_genesis 460 if (this.options.scaleFromCenter) {
mp-wp_genesis 461 var topd = (height - this.dims[0])/2;
mp-wp_genesis 462 var leftd = (width - this.dims[1])/2;
mp-wp_genesis 463 if (this.elementPositioning == 'absolute') {
mp-wp_genesis 464 if (this.options.scaleY) d.top = this.originalTop-topd + 'px';
mp-wp_genesis 465 if (this.options.scaleX) d.left = this.originalLeft-leftd + 'px';
mp-wp_genesis 466 } else {
mp-wp_genesis 467 if (this.options.scaleY) d.top = -topd + 'px';
mp-wp_genesis 468 if (this.options.scaleX) d.left = -leftd + 'px';
mp-wp_genesis 469 }
mp-wp_genesis 470 }
mp-wp_genesis 471 this.element.setStyle(d);
mp-wp_genesis 472 }
mp-wp_genesis 473 });
mp-wp_genesis 474
mp-wp_genesis 475 Effect.Highlight = Class.create(Effect.Base, {
mp-wp_genesis 476 initialize: function(element) {
mp-wp_genesis 477 this.element = $(element);
mp-wp_genesis 478 if (!this.element) throw(Effect._elementDoesNotExistError);
mp-wp_genesis 479 var options = Object.extend({ startcolor: '#ffff99' }, arguments[1] || { });
mp-wp_genesis 480 this.start(options);
mp-wp_genesis 481 },
mp-wp_genesis 482 setup: function() {
mp-wp_genesis 483 // Prevent executing on elements not in the layout flow
mp-wp_genesis 484 if (this.element.getStyle('display')=='none') { this.cancel(); return; }
mp-wp_genesis 485 // Disable background image during the effect
mp-wp_genesis 486 this.oldStyle = { };
mp-wp_genesis 487 if (!this.options.keepBackgroundImage) {
mp-wp_genesis 488 this.oldStyle.backgroundImage = this.element.getStyle('background-image');
mp-wp_genesis 489 this.element.setStyle({backgroundImage: 'none'});
mp-wp_genesis 490 }
mp-wp_genesis 491 if (!this.options.endcolor)
mp-wp_genesis 492 this.options.endcolor = this.element.getStyle('background-color').parseColor('#ffffff');
mp-wp_genesis 493 if (!this.options.restorecolor)
mp-wp_genesis 494 this.options.restorecolor = this.element.getStyle('background-color');
mp-wp_genesis 495 // init color calculations
mp-wp_genesis 496 this._base = $R(0,2).map(function(i){ return parseInt(this.options.startcolor.slice(i*2+1,i*2+3),16) }.bind(this));
mp-wp_genesis 497 this._delta = $R(0,2).map(function(i){ return parseInt(this.options.endcolor.slice(i*2+1,i*2+3),16)-this._base[i] }.bind(this));
mp-wp_genesis 498 },
mp-wp_genesis 499 update: function(position) {
mp-wp_genesis 500 this.element.setStyle({backgroundColor: $R(0,2).inject('#',function(m,v,i){
mp-wp_genesis 501 return m+((this._base[i]+(this._delta[i]*position)).round().toColorPart()); }.bind(this)) });
mp-wp_genesis 502 },
mp-wp_genesis 503 finish: function() {
mp-wp_genesis 504 this.element.setStyle(Object.extend(this.oldStyle, {
mp-wp_genesis 505 backgroundColor: this.options.restorecolor
mp-wp_genesis 506 }));
mp-wp_genesis 507 }
mp-wp_genesis 508 });
mp-wp_genesis 509
mp-wp_genesis 510 Effect.ScrollTo = function(element) {
mp-wp_genesis 511 var options = arguments[1] || { },
mp-wp_genesis 512 scrollOffsets = document.viewport.getScrollOffsets(),
mp-wp_genesis 513 elementOffsets = $(element).cumulativeOffset(),
mp-wp_genesis 514 max = (window.height || document.body.scrollHeight) - document.viewport.getHeight();
mp-wp_genesis 515
mp-wp_genesis 516 if (options.offset) elementOffsets[1] += options.offset;
mp-wp_genesis 517
mp-wp_genesis 518 return new Effect.Tween(null,
mp-wp_genesis 519 scrollOffsets.top,
mp-wp_genesis 520 elementOffsets[1] > max ? max : elementOffsets[1],
mp-wp_genesis 521 options,
mp-wp_genesis 522 function(p){ scrollTo(scrollOffsets.left, p.round()) }
mp-wp_genesis 523 );
mp-wp_genesis 524 };
mp-wp_genesis 525
mp-wp_genesis 526 /* ------------- combination effects ------------- */
mp-wp_genesis 527
mp-wp_genesis 528 Effect.Fade = function(element) {
mp-wp_genesis 529 element = $(element);
mp-wp_genesis 530 var oldOpacity = element.getInlineOpacity();
mp-wp_genesis 531 var options = Object.extend({
mp-wp_genesis 532 from: element.getOpacity() || 1.0,
mp-wp_genesis 533 to: 0.0,
mp-wp_genesis 534 afterFinishInternal: function(effect) {
mp-wp_genesis 535 if (effect.options.to!=0) return;
mp-wp_genesis 536 effect.element.hide().setStyle({opacity: oldOpacity});
mp-wp_genesis 537 }
mp-wp_genesis 538 }, arguments[1] || { });
mp-wp_genesis 539 return new Effect.Opacity(element,options);
mp-wp_genesis 540 };
mp-wp_genesis 541
mp-wp_genesis 542 Effect.Appear = function(element) {
mp-wp_genesis 543 element = $(element);
mp-wp_genesis 544 var options = Object.extend({
mp-wp_genesis 545 from: (element.getStyle('display') == 'none' ? 0.0 : element.getOpacity() || 0.0),
mp-wp_genesis 546 to: 1.0,
mp-wp_genesis 547 // force Safari to render floated elements properly
mp-wp_genesis 548 afterFinishInternal: function(effect) {
mp-wp_genesis 549 effect.element.forceRerendering();
mp-wp_genesis 550 },
mp-wp_genesis 551 beforeSetup: function(effect) {
mp-wp_genesis 552 effect.element.setOpacity(effect.options.from).show();
mp-wp_genesis 553 }}, arguments[1] || { });
mp-wp_genesis 554 return new Effect.Opacity(element,options);
mp-wp_genesis 555 };
mp-wp_genesis 556
mp-wp_genesis 557 Effect.Puff = function(element) {
mp-wp_genesis 558 element = $(element);
mp-wp_genesis 559 var oldStyle = {
mp-wp_genesis 560 opacity: element.getInlineOpacity(),
mp-wp_genesis 561 position: element.getStyle('position'),
mp-wp_genesis 562 top: element.style.top,
mp-wp_genesis 563 left: element.style.left,
mp-wp_genesis 564 width: element.style.width,
mp-wp_genesis 565 height: element.style.height
mp-wp_genesis 566 };
mp-wp_genesis 567 return new Effect.Parallel(
mp-wp_genesis 568 [ new Effect.Scale(element, 200,
mp-wp_genesis 569 { sync: true, scaleFromCenter: true, scaleContent: true, restoreAfterFinish: true }),
mp-wp_genesis 570 new Effect.Opacity(element, { sync: true, to: 0.0 } ) ],
mp-wp_genesis 571 Object.extend({ duration: 1.0,
mp-wp_genesis 572 beforeSetupInternal: function(effect) {
mp-wp_genesis 573 Position.absolutize(effect.effects[0].element)
mp-wp_genesis 574 },
mp-wp_genesis 575 afterFinishInternal: function(effect) {
mp-wp_genesis 576 effect.effects[0].element.hide().setStyle(oldStyle); }
mp-wp_genesis 577 }, arguments[1] || { })
mp-wp_genesis 578 );
mp-wp_genesis 579 };
mp-wp_genesis 580
mp-wp_genesis 581 Effect.BlindUp = function(element) {
mp-wp_genesis 582 element = $(element);
mp-wp_genesis 583 element.makeClipping();
mp-wp_genesis 584 return new Effect.Scale(element, 0,
mp-wp_genesis 585 Object.extend({ scaleContent: false,
mp-wp_genesis 586 scaleX: false,
mp-wp_genesis 587 restoreAfterFinish: true,
mp-wp_genesis 588 afterFinishInternal: function(effect) {
mp-wp_genesis 589 effect.element.hide().undoClipping();
mp-wp_genesis 590 }
mp-wp_genesis 591 }, arguments[1] || { })
mp-wp_genesis 592 );
mp-wp_genesis 593 };
mp-wp_genesis 594
mp-wp_genesis 595 Effect.BlindDown = function(element) {
mp-wp_genesis 596 element = $(element);
mp-wp_genesis 597 var elementDimensions = element.getDimensions();
mp-wp_genesis 598 return new Effect.Scale(element, 100, Object.extend({
mp-wp_genesis 599 scaleContent: false,
mp-wp_genesis 600 scaleX: false,
mp-wp_genesis 601 scaleFrom: 0,
mp-wp_genesis 602 scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
mp-wp_genesis 603 restoreAfterFinish: true,
mp-wp_genesis 604 afterSetup: function(effect) {
mp-wp_genesis 605 effect.element.makeClipping().setStyle({height: '0px'}).show();
mp-wp_genesis 606 },
mp-wp_genesis 607 afterFinishInternal: function(effect) {
mp-wp_genesis 608 effect.element.undoClipping();
mp-wp_genesis 609 }
mp-wp_genesis 610 }, arguments[1] || { }));
mp-wp_genesis 611 };
mp-wp_genesis 612
mp-wp_genesis 613 Effect.SwitchOff = function(element) {
mp-wp_genesis 614 element = $(element);
mp-wp_genesis 615 var oldOpacity = element.getInlineOpacity();
mp-wp_genesis 616 return new Effect.Appear(element, Object.extend({
mp-wp_genesis 617 duration: 0.4,
mp-wp_genesis 618 from: 0,
mp-wp_genesis 619 transition: Effect.Transitions.flicker,
mp-wp_genesis 620 afterFinishInternal: function(effect) {
mp-wp_genesis 621 new Effect.Scale(effect.element, 1, {
mp-wp_genesis 622 duration: 0.3, scaleFromCenter: true,
mp-wp_genesis 623 scaleX: false, scaleContent: false, restoreAfterFinish: true,
mp-wp_genesis 624 beforeSetup: function(effect) {
mp-wp_genesis 625 effect.element.makePositioned().makeClipping();
mp-wp_genesis 626 },
mp-wp_genesis 627 afterFinishInternal: function(effect) {
mp-wp_genesis 628 effect.element.hide().undoClipping().undoPositioned().setStyle({opacity: oldOpacity});
mp-wp_genesis 629 }
mp-wp_genesis 630 })
mp-wp_genesis 631 }
mp-wp_genesis 632 }, arguments[1] || { }));
mp-wp_genesis 633 };
mp-wp_genesis 634
mp-wp_genesis 635 Effect.DropOut = function(element) {
mp-wp_genesis 636 element = $(element);
mp-wp_genesis 637 var oldStyle = {
mp-wp_genesis 638 top: element.getStyle('top'),
mp-wp_genesis 639 left: element.getStyle('left'),
mp-wp_genesis 640 opacity: element.getInlineOpacity() };
mp-wp_genesis 641 return new Effect.Parallel(
mp-wp_genesis 642 [ new Effect.Move(element, {x: 0, y: 100, sync: true }),
mp-wp_genesis 643 new Effect.Opacity(element, { sync: true, to: 0.0 }) ],
mp-wp_genesis 644 Object.extend(
mp-wp_genesis 645 { duration: 0.5,
mp-wp_genesis 646 beforeSetup: function(effect) {
mp-wp_genesis 647 effect.effects[0].element.makePositioned();
mp-wp_genesis 648 },
mp-wp_genesis 649 afterFinishInternal: function(effect) {
mp-wp_genesis 650 effect.effects[0].element.hide().undoPositioned().setStyle(oldStyle);
mp-wp_genesis 651 }
mp-wp_genesis 652 }, arguments[1] || { }));
mp-wp_genesis 653 };
mp-wp_genesis 654
mp-wp_genesis 655 Effect.Shake = function(element) {
mp-wp_genesis 656 element = $(element);
mp-wp_genesis 657 var options = Object.extend({
mp-wp_genesis 658 distance: 20,
mp-wp_genesis 659 duration: 0.5
mp-wp_genesis 660 }, arguments[1] || {});
mp-wp_genesis 661 var distance = parseFloat(options.distance);
mp-wp_genesis 662 var split = parseFloat(options.duration) / 10.0;
mp-wp_genesis 663 var oldStyle = {
mp-wp_genesis 664 top: element.getStyle('top'),
mp-wp_genesis 665 left: element.getStyle('left') };
mp-wp_genesis 666 return new Effect.Move(element,
mp-wp_genesis 667 { x: distance, y: 0, duration: split, afterFinishInternal: function(effect) {
mp-wp_genesis 668 new Effect.Move(effect.element,
mp-wp_genesis 669 { x: -distance*2, y: 0, duration: split*2, afterFinishInternal: function(effect) {
mp-wp_genesis 670 new Effect.Move(effect.element,
mp-wp_genesis 671 { x: distance*2, y: 0, duration: split*2, afterFinishInternal: function(effect) {
mp-wp_genesis 672 new Effect.Move(effect.element,
mp-wp_genesis 673 { x: -distance*2, y: 0, duration: split*2, afterFinishInternal: function(effect) {
mp-wp_genesis 674 new Effect.Move(effect.element,
mp-wp_genesis 675 { x: distance*2, y: 0, duration: split*2, afterFinishInternal: function(effect) {
mp-wp_genesis 676 new Effect.Move(effect.element,
mp-wp_genesis 677 { x: -distance, y: 0, duration: split, afterFinishInternal: function(effect) {
mp-wp_genesis 678 effect.element.undoPositioned().setStyle(oldStyle);
mp-wp_genesis 679 }}) }}) }}) }}) }}) }});
mp-wp_genesis 680 };
mp-wp_genesis 681
mp-wp_genesis 682 Effect.SlideDown = function(element) {
mp-wp_genesis 683 element = $(element).cleanWhitespace();
mp-wp_genesis 684 // SlideDown need to have the content of the element wrapped in a container element with fixed height!
mp-wp_genesis 685 var oldInnerBottom = element.down().getStyle('bottom');
mp-wp_genesis 686 var elementDimensions = element.getDimensions();
mp-wp_genesis 687 return new Effect.Scale(element, 100, Object.extend({
mp-wp_genesis 688 scaleContent: false,
mp-wp_genesis 689 scaleX: false,
mp-wp_genesis 690 scaleFrom: window.opera ? 0 : 1,
mp-wp_genesis 691 scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
mp-wp_genesis 692 restoreAfterFinish: true,
mp-wp_genesis 693 afterSetup: function(effect) {
mp-wp_genesis 694 effect.element.makePositioned();
mp-wp_genesis 695 effect.element.down().makePositioned();
mp-wp_genesis 696 if (window.opera) effect.element.setStyle({top: ''});
mp-wp_genesis 697 effect.element.makeClipping().setStyle({height: '0px'}).show();
mp-wp_genesis 698 },
mp-wp_genesis 699 afterUpdateInternal: function(effect) {
mp-wp_genesis 700 effect.element.down().setStyle({bottom:
mp-wp_genesis 701 (effect.dims[0] - effect.element.clientHeight) + 'px' });
mp-wp_genesis 702 },
mp-wp_genesis 703 afterFinishInternal: function(effect) {
mp-wp_genesis 704 effect.element.undoClipping().undoPositioned();
mp-wp_genesis 705 effect.element.down().undoPositioned().setStyle({bottom: oldInnerBottom}); }
mp-wp_genesis 706 }, arguments[1] || { })
mp-wp_genesis 707 );
mp-wp_genesis 708 };
mp-wp_genesis 709
mp-wp_genesis 710 Effect.SlideUp = function(element) {
mp-wp_genesis 711 element = $(element).cleanWhitespace();
mp-wp_genesis 712 var oldInnerBottom = element.down().getStyle('bottom');
mp-wp_genesis 713 var elementDimensions = element.getDimensions();
mp-wp_genesis 714 return new Effect.Scale(element, window.opera ? 0 : 1,
mp-wp_genesis 715 Object.extend({ scaleContent: false,
mp-wp_genesis 716 scaleX: false,
mp-wp_genesis 717 scaleMode: 'box',
mp-wp_genesis 718 scaleFrom: 100,
mp-wp_genesis 719 scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
mp-wp_genesis 720 restoreAfterFinish: true,
mp-wp_genesis 721 afterSetup: function(effect) {
mp-wp_genesis 722 effect.element.makePositioned();
mp-wp_genesis 723 effect.element.down().makePositioned();
mp-wp_genesis 724 if (window.opera) effect.element.setStyle({top: ''});
mp-wp_genesis 725 effect.element.makeClipping().show();
mp-wp_genesis 726 },
mp-wp_genesis 727 afterUpdateInternal: function(effect) {
mp-wp_genesis 728 effect.element.down().setStyle({bottom:
mp-wp_genesis 729 (effect.dims[0] - effect.element.clientHeight) + 'px' });
mp-wp_genesis 730 },
mp-wp_genesis 731 afterFinishInternal: function(effect) {
mp-wp_genesis 732 effect.element.hide().undoClipping().undoPositioned();
mp-wp_genesis 733 effect.element.down().undoPositioned().setStyle({bottom: oldInnerBottom});
mp-wp_genesis 734 }
mp-wp_genesis 735 }, arguments[1] || { })
mp-wp_genesis 736 );
mp-wp_genesis 737 };
mp-wp_genesis 738
mp-wp_genesis 739 // Bug in opera makes the TD containing this element expand for a instance after finish
mp-wp_genesis 740 Effect.Squish = function(element) {
mp-wp_genesis 741 return new Effect.Scale(element, window.opera ? 1 : 0, {
mp-wp_genesis 742 restoreAfterFinish: true,
mp-wp_genesis 743 beforeSetup: function(effect) {
mp-wp_genesis 744 effect.element.makeClipping();
mp-wp_genesis 745 },
mp-wp_genesis 746 afterFinishInternal: function(effect) {
mp-wp_genesis 747 effect.element.hide().undoClipping();
mp-wp_genesis 748 }
mp-wp_genesis 749 });
mp-wp_genesis 750 };
mp-wp_genesis 751
mp-wp_genesis 752 Effect.Grow = function(element) {
mp-wp_genesis 753 element = $(element);
mp-wp_genesis 754 var options = Object.extend({
mp-wp_genesis 755 direction: 'center',
mp-wp_genesis 756 moveTransition: Effect.Transitions.sinoidal,
mp-wp_genesis 757 scaleTransition: Effect.Transitions.sinoidal,
mp-wp_genesis 758 opacityTransition: Effect.Transitions.full
mp-wp_genesis 759 }, arguments[1] || { });
mp-wp_genesis 760 var oldStyle = {
mp-wp_genesis 761 top: element.style.top,
mp-wp_genesis 762 left: element.style.left,
mp-wp_genesis 763 height: element.style.height,
mp-wp_genesis 764 width: element.style.width,
mp-wp_genesis 765 opacity: element.getInlineOpacity() };
mp-wp_genesis 766
mp-wp_genesis 767 var dims = element.getDimensions();
mp-wp_genesis 768 var initialMoveX, initialMoveY;
mp-wp_genesis 769 var moveX, moveY;
mp-wp_genesis 770
mp-wp_genesis 771 switch (options.direction) {
mp-wp_genesis 772 case 'top-left':
mp-wp_genesis 773 initialMoveX = initialMoveY = moveX = moveY = 0;
mp-wp_genesis 774 break;
mp-wp_genesis 775 case 'top-right':
mp-wp_genesis 776 initialMoveX = dims.width;
mp-wp_genesis 777 initialMoveY = moveY = 0;
mp-wp_genesis 778 moveX = -dims.width;
mp-wp_genesis 779 break;
mp-wp_genesis 780 case 'bottom-left':
mp-wp_genesis 781 initialMoveX = moveX = 0;
mp-wp_genesis 782 initialMoveY = dims.height;
mp-wp_genesis 783 moveY = -dims.height;
mp-wp_genesis 784 break;
mp-wp_genesis 785 case 'bottom-right':
mp-wp_genesis 786 initialMoveX = dims.width;
mp-wp_genesis 787 initialMoveY = dims.height;
mp-wp_genesis 788 moveX = -dims.width;
mp-wp_genesis 789 moveY = -dims.height;
mp-wp_genesis 790 break;
mp-wp_genesis 791 case 'center':
mp-wp_genesis 792 initialMoveX = dims.width / 2;
mp-wp_genesis 793 initialMoveY = dims.height / 2;
mp-wp_genesis 794 moveX = -dims.width / 2;
mp-wp_genesis 795 moveY = -dims.height / 2;
mp-wp_genesis 796 break;
mp-wp_genesis 797 }
mp-wp_genesis 798
mp-wp_genesis 799 return new Effect.Move(element, {
mp-wp_genesis 800 x: initialMoveX,
mp-wp_genesis 801 y: initialMoveY,
mp-wp_genesis 802 duration: 0.01,
mp-wp_genesis 803 beforeSetup: function(effect) {
mp-wp_genesis 804 effect.element.hide().makeClipping().makePositioned();
mp-wp_genesis 805 },
mp-wp_genesis 806 afterFinishInternal: function(effect) {
mp-wp_genesis 807 new Effect.Parallel(
mp-wp_genesis 808 [ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }),
mp-wp_genesis 809 new Effect.Move(effect.element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }),
mp-wp_genesis 810 new Effect.Scale(effect.element, 100, {
mp-wp_genesis 811 scaleMode: { originalHeight: dims.height, originalWidth: dims.width },
mp-wp_genesis 812 sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true})
mp-wp_genesis 813 ], Object.extend({
mp-wp_genesis 814 beforeSetup: function(effect) {
mp-wp_genesis 815 effect.effects[0].element.setStyle({height: '0px'}).show();
mp-wp_genesis 816 },
mp-wp_genesis 817 afterFinishInternal: function(effect) {
mp-wp_genesis 818 effect.effects[0].element.undoClipping().undoPositioned().setStyle(oldStyle);
mp-wp_genesis 819 }
mp-wp_genesis 820 }, options)
mp-wp_genesis 821 )
mp-wp_genesis 822 }
mp-wp_genesis 823 });
mp-wp_genesis 824 };
mp-wp_genesis 825
mp-wp_genesis 826 Effect.Shrink = function(element) {
mp-wp_genesis 827 element = $(element);
mp-wp_genesis 828 var options = Object.extend({
mp-wp_genesis 829 direction: 'center',
mp-wp_genesis 830 moveTransition: Effect.Transitions.sinoidal,
mp-wp_genesis 831 scaleTransition: Effect.Transitions.sinoidal,
mp-wp_genesis 832 opacityTransition: Effect.Transitions.none
mp-wp_genesis 833 }, arguments[1] || { });
mp-wp_genesis 834 var oldStyle = {
mp-wp_genesis 835 top: element.style.top,
mp-wp_genesis 836 left: element.style.left,
mp-wp_genesis 837 height: element.style.height,
mp-wp_genesis 838 width: element.style.width,
mp-wp_genesis 839 opacity: element.getInlineOpacity() };
mp-wp_genesis 840
mp-wp_genesis 841 var dims = element.getDimensions();
mp-wp_genesis 842 var moveX, moveY;
mp-wp_genesis 843
mp-wp_genesis 844 switch (options.direction) {
mp-wp_genesis 845 case 'top-left':
mp-wp_genesis 846 moveX = moveY = 0;
mp-wp_genesis 847 break;
mp-wp_genesis 848 case 'top-right':
mp-wp_genesis 849 moveX = dims.width;
mp-wp_genesis 850 moveY = 0;
mp-wp_genesis 851 break;
mp-wp_genesis 852 case 'bottom-left':
mp-wp_genesis 853 moveX = 0;
mp-wp_genesis 854 moveY = dims.height;
mp-wp_genesis 855 break;
mp-wp_genesis 856 case 'bottom-right':
mp-wp_genesis 857 moveX = dims.width;
mp-wp_genesis 858 moveY = dims.height;
mp-wp_genesis 859 break;
mp-wp_genesis 860 case 'center':
mp-wp_genesis 861 moveX = dims.width / 2;
mp-wp_genesis 862 moveY = dims.height / 2;
mp-wp_genesis 863 break;
mp-wp_genesis 864 }
mp-wp_genesis 865
mp-wp_genesis 866 return new Effect.Parallel(
mp-wp_genesis 867 [ new Effect.Opacity(element, { sync: true, to: 0.0, from: 1.0, transition: options.opacityTransition }),
mp-wp_genesis 868 new Effect.Scale(element, window.opera ? 1 : 0, { sync: true, transition: options.scaleTransition, restoreAfterFinish: true}),
mp-wp_genesis 869 new Effect.Move(element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition })
mp-wp_genesis 870 ], Object.extend({
mp-wp_genesis 871 beforeStartInternal: function(effect) {
mp-wp_genesis 872 effect.effects[0].element.makePositioned().makeClipping();
mp-wp_genesis 873 },
mp-wp_genesis 874 afterFinishInternal: function(effect) {
mp-wp_genesis 875 effect.effects[0].element.hide().undoClipping().undoPositioned().setStyle(oldStyle); }
mp-wp_genesis 876 }, options)
mp-wp_genesis 877 );
mp-wp_genesis 878 };
mp-wp_genesis 879
mp-wp_genesis 880 Effect.Pulsate = function(element) {
mp-wp_genesis 881 element = $(element);
mp-wp_genesis 882 var options = arguments[1] || { };
mp-wp_genesis 883 var oldOpacity = element.getInlineOpacity();
mp-wp_genesis 884 var transition = options.transition || Effect.Transitions.sinoidal;
mp-wp_genesis 885 var reverser = function(pos){ return transition(1-Effect.Transitions.pulse(pos, options.pulses)) };
mp-wp_genesis 886 reverser.bind(transition);
mp-wp_genesis 887 return new Effect.Opacity(element,
mp-wp_genesis 888 Object.extend(Object.extend({ duration: 2.0, from: 0,
mp-wp_genesis 889 afterFinishInternal: function(effect) { effect.element.setStyle({opacity: oldOpacity}); }
mp-wp_genesis 890 }, options), {transition: reverser}));
mp-wp_genesis 891 };
mp-wp_genesis 892
mp-wp_genesis 893 Effect.Fold = function(element) {
mp-wp_genesis 894 element = $(element);
mp-wp_genesis 895 var oldStyle = {
mp-wp_genesis 896 top: element.style.top,
mp-wp_genesis 897 left: element.style.left,
mp-wp_genesis 898 width: element.style.width,
mp-wp_genesis 899 height: element.style.height };
mp-wp_genesis 900 element.makeClipping();
mp-wp_genesis 901 return new Effect.Scale(element, 5, Object.extend({
mp-wp_genesis 902 scaleContent: false,
mp-wp_genesis 903 scaleX: false,
mp-wp_genesis 904 afterFinishInternal: function(effect) {
mp-wp_genesis 905 new Effect.Scale(element, 1, {
mp-wp_genesis 906 scaleContent: false,
mp-wp_genesis 907 scaleY: false,
mp-wp_genesis 908 afterFinishInternal: function(effect) {
mp-wp_genesis 909 effect.element.hide().undoClipping().setStyle(oldStyle);
mp-wp_genesis 910 } });
mp-wp_genesis 911 }}, arguments[1] || { }));
mp-wp_genesis 912 };
mp-wp_genesis 913
mp-wp_genesis 914 Effect.Morph = Class.create(Effect.Base, {
mp-wp_genesis 915 initialize: function(element) {
mp-wp_genesis 916 this.element = $(element);
mp-wp_genesis 917 if (!this.element) throw(Effect._elementDoesNotExistError);
mp-wp_genesis 918 var options = Object.extend({
mp-wp_genesis 919 style: { }
mp-wp_genesis 920 }, arguments[1] || { });
mp-wp_genesis 921
mp-wp_genesis 922 if (!Object.isString(options.style)) this.style = $H(options.style);
mp-wp_genesis 923 else {
mp-wp_genesis 924 if (options.style.include(':'))
mp-wp_genesis 925 this.style = options.style.parseStyle();
mp-wp_genesis 926 else {
mp-wp_genesis 927 this.element.addClassName(options.style);
mp-wp_genesis 928 this.style = $H(this.element.getStyles());
mp-wp_genesis 929 this.element.removeClassName(options.style);
mp-wp_genesis 930 var css = this.element.getStyles();
mp-wp_genesis 931 this.style = this.style.reject(function(style) {
mp-wp_genesis 932 return style.value == css[style.key];
mp-wp_genesis 933 });
mp-wp_genesis 934 options.afterFinishInternal = function(effect) {
mp-wp_genesis 935 effect.element.addClassName(effect.options.style);
mp-wp_genesis 936 effect.transforms.each(function(transform) {
mp-wp_genesis 937 effect.element.style[transform.style] = '';
mp-wp_genesis 938 });
mp-wp_genesis 939 }
mp-wp_genesis 940 }
mp-wp_genesis 941 }
mp-wp_genesis 942 this.start(options);
mp-wp_genesis 943 },
mp-wp_genesis 944
mp-wp_genesis 945 setup: function(){
mp-wp_genesis 946 function parseColor(color){
mp-wp_genesis 947 if (!color || ['rgba(0, 0, 0, 0)','transparent'].include(color)) color = '#ffffff';
mp-wp_genesis 948 color = color.parseColor();
mp-wp_genesis 949 return $R(0,2).map(function(i){
mp-wp_genesis 950 return parseInt( color.slice(i*2+1,i*2+3), 16 )
mp-wp_genesis 951 });
mp-wp_genesis 952 }
mp-wp_genesis 953 this.transforms = this.style.map(function(pair){
mp-wp_genesis 954 var property = pair[0], value = pair[1], unit = null;
mp-wp_genesis 955
mp-wp_genesis 956 if (value.parseColor('#zzzzzz') != '#zzzzzz') {
mp-wp_genesis 957 value = value.parseColor();
mp-wp_genesis 958 unit = 'color';
mp-wp_genesis 959 } else if (property == 'opacity') {
mp-wp_genesis 960 value = parseFloat(value);
mp-wp_genesis 961 if (Prototype.Browser.IE && (!this.element.currentStyle.hasLayout))
mp-wp_genesis 962 this.element.setStyle({zoom: 1});
mp-wp_genesis 963 } else if (Element.CSS_LENGTH.test(value)) {
mp-wp_genesis 964 var components = value.match(/^([\+\-]?[0-9\.]+)(.*)$/);
mp-wp_genesis 965 value = parseFloat(components[1]);
mp-wp_genesis 966 unit = (components.length == 3) ? components[2] : null;
mp-wp_genesis 967 }
mp-wp_genesis 968
mp-wp_genesis 969 var originalValue = this.element.getStyle(property);
mp-wp_genesis 970 return {
mp-wp_genesis 971 style: property.camelize(),
mp-wp_genesis 972 originalValue: unit=='color' ? parseColor(originalValue) : parseFloat(originalValue || 0),
mp-wp_genesis 973 targetValue: unit=='color' ? parseColor(value) : value,
mp-wp_genesis 974 unit: unit
mp-wp_genesis 975 };
mp-wp_genesis 976 }.bind(this)).reject(function(transform){
mp-wp_genesis 977 return (
mp-wp_genesis 978 (transform.originalValue == transform.targetValue) ||
mp-wp_genesis 979 (
mp-wp_genesis 980 transform.unit != 'color' &&
mp-wp_genesis 981 (isNaN(transform.originalValue) || isNaN(transform.targetValue))
mp-wp_genesis 982 )
mp-wp_genesis 983 )
mp-wp_genesis 984 });
mp-wp_genesis 985 },
mp-wp_genesis 986 update: function(position) {
mp-wp_genesis 987 var style = { }, transform, i = this.transforms.length;
mp-wp_genesis 988 while(i--)
mp-wp_genesis 989 style[(transform = this.transforms[i]).style] =
mp-wp_genesis 990 transform.unit=='color' ? '#'+
mp-wp_genesis 991 (Math.round(transform.originalValue[0]+
mp-wp_genesis 992 (transform.targetValue[0]-transform.originalValue[0])*position)).toColorPart() +
mp-wp_genesis 993 (Math.round(transform.originalValue[1]+
mp-wp_genesis 994 (transform.targetValue[1]-transform.originalValue[1])*position)).toColorPart() +
mp-wp_genesis 995 (Math.round(transform.originalValue[2]+
mp-wp_genesis 996 (transform.targetValue[2]-transform.originalValue[2])*position)).toColorPart() :
mp-wp_genesis 997 (transform.originalValue +
mp-wp_genesis 998 (transform.targetValue - transform.originalValue) * position).toFixed(3) +
mp-wp_genesis 999 (transform.unit === null ? '' : transform.unit);
mp-wp_genesis 1000 this.element.setStyle(style, true);
mp-wp_genesis 1001 }
mp-wp_genesis 1002 });
mp-wp_genesis 1003
mp-wp_genesis 1004 Effect.Transform = Class.create({
mp-wp_genesis 1005 initialize: function(tracks){
mp-wp_genesis 1006 this.tracks = [];
mp-wp_genesis 1007 this.options = arguments[1] || { };
mp-wp_genesis 1008 this.addTracks(tracks);
mp-wp_genesis 1009 },
mp-wp_genesis 1010 addTracks: function(tracks){
mp-wp_genesis 1011 tracks.each(function(track){
mp-wp_genesis 1012 track = $H(track);
mp-wp_genesis 1013 var data = track.values().first();
mp-wp_genesis 1014 this.tracks.push($H({
mp-wp_genesis 1015 ids: track.keys().first(),
mp-wp_genesis 1016 effect: Effect.Morph,
mp-wp_genesis 1017 options: { style: data }
mp-wp_genesis 1018 }));
mp-wp_genesis 1019 }.bind(this));
mp-wp_genesis 1020 return this;
mp-wp_genesis 1021 },
mp-wp_genesis 1022 play: function(){
mp-wp_genesis 1023 return new Effect.Parallel(
mp-wp_genesis 1024 this.tracks.map(function(track){
mp-wp_genesis 1025 var ids = track.get('ids'), effect = track.get('effect'), options = track.get('options');
mp-wp_genesis 1026 var elements = [$(ids) || $$(ids)].flatten();
mp-wp_genesis 1027 return elements.map(function(e){ return new effect(e, Object.extend({ sync:true }, options)) });
mp-wp_genesis 1028 }).flatten(),
mp-wp_genesis 1029 this.options
mp-wp_genesis 1030 );
mp-wp_genesis 1031 }
mp-wp_genesis 1032 });
mp-wp_genesis 1033
mp-wp_genesis 1034 Element.CSS_PROPERTIES = $w(
mp-wp_genesis 1035 'backgroundColor backgroundPosition borderBottomColor borderBottomStyle ' +
mp-wp_genesis 1036 'borderBottomWidth borderLeftColor borderLeftStyle borderLeftWidth ' +
mp-wp_genesis 1037 'borderRightColor borderRightStyle borderRightWidth borderSpacing ' +
mp-wp_genesis 1038 'borderTopColor borderTopStyle borderTopWidth bottom clip color ' +
mp-wp_genesis 1039 'fontSize fontWeight height left letterSpacing lineHeight ' +
mp-wp_genesis 1040 'marginBottom marginLeft marginRight marginTop markerOffset maxHeight '+
mp-wp_genesis 1041 'maxWidth minHeight minWidth opacity outlineColor outlineOffset ' +
mp-wp_genesis 1042 'outlineWidth paddingBottom paddingLeft paddingRight paddingTop ' +
mp-wp_genesis 1043 'right textIndent top width wordSpacing zIndex');
mp-wp_genesis 1044
mp-wp_genesis 1045 Element.CSS_LENGTH = /^(([\+\-]?[0-9\.]+)(em|ex|px|in|cm|mm|pt|pc|\%))|0$/;
mp-wp_genesis 1046
mp-wp_genesis 1047 String.__parseStyleElement = document.createElement('div');
mp-wp_genesis 1048 String.prototype.parseStyle = function(){
mp-wp_genesis 1049 var style, styleRules = $H();
mp-wp_genesis 1050 if (Prototype.Browser.WebKit)
mp-wp_genesis 1051 style = new Element('div',{style:this}).style;
mp-wp_genesis 1052 else {
mp-wp_genesis 1053 String.__parseStyleElement.innerHTML = '<div style="' + this + '"></div>';
mp-wp_genesis 1054 style = String.__parseStyleElement.childNodes[0].style;
mp-wp_genesis 1055 }
mp-wp_genesis 1056
mp-wp_genesis 1057 Element.CSS_PROPERTIES.each(function(property){
mp-wp_genesis 1058 if (style[property]) styleRules.set(property, style[property]);
mp-wp_genesis 1059 });
mp-wp_genesis 1060
mp-wp_genesis 1061 if (Prototype.Browser.IE && this.include('opacity'))
mp-wp_genesis 1062 styleRules.set('opacity', this.match(/opacity:\s*((?:0|1)?(?:\.\d*)?)/)[1]);
mp-wp_genesis 1063
mp-wp_genesis 1064 return styleRules;
mp-wp_genesis 1065 };
mp-wp_genesis 1066
mp-wp_genesis 1067 if (document.defaultView && document.defaultView.getComputedStyle) {
mp-wp_genesis 1068 Element.getStyles = function(element) {
mp-wp_genesis 1069 var css = document.defaultView.getComputedStyle($(element), null);
mp-wp_genesis 1070 return Element.CSS_PROPERTIES.inject({ }, function(styles, property) {
mp-wp_genesis 1071 styles[property] = css[property];
mp-wp_genesis 1072 return styles;
mp-wp_genesis 1073 });
mp-wp_genesis 1074 };
mp-wp_genesis 1075 } else {
mp-wp_genesis 1076 Element.getStyles = function(element) {
mp-wp_genesis 1077 element = $(element);
mp-wp_genesis 1078 var css = element.currentStyle, styles;
mp-wp_genesis 1079 styles = Element.CSS_PROPERTIES.inject({ }, function(hash, property) {
mp-wp_genesis 1080 hash.set(property, css[property]);
mp-wp_genesis 1081 return hash;
mp-wp_genesis 1082 });
mp-wp_genesis 1083 if (!styles.opacity) styles.set('opacity', element.getOpacity());
mp-wp_genesis 1084 return styles;
mp-wp_genesis 1085 };
mp-wp_genesis 1086 };
mp-wp_genesis 1087
mp-wp_genesis 1088 Effect.Methods = {
mp-wp_genesis 1089 morph: function(element, style) {
mp-wp_genesis 1090 element = $(element);
mp-wp_genesis 1091 new Effect.Morph(element, Object.extend({ style: style }, arguments[2] || { }));
mp-wp_genesis 1092 return element;
mp-wp_genesis 1093 },
mp-wp_genesis 1094 visualEffect: function(element, effect, options) {
mp-wp_genesis 1095 element = $(element)
mp-wp_genesis 1096 var s = effect.dasherize().camelize(), klass = s.charAt(0).toUpperCase() + s.substring(1);
mp-wp_genesis 1097 new Effect[klass](element, options);
mp-wp_genesis 1098 return element;
mp-wp_genesis 1099 },
mp-wp_genesis 1100 highlight: function(element, options) {
mp-wp_genesis 1101 element = $(element);
mp-wp_genesis 1102 new Effect.Highlight(element, options);
mp-wp_genesis 1103 return element;
mp-wp_genesis 1104 }
mp-wp_genesis 1105 };
mp-wp_genesis 1106
mp-wp_genesis 1107 $w('fade appear grow shrink fold blindUp blindDown slideUp slideDown '+
mp-wp_genesis 1108 'pulsate shake puff squish switchOff dropOut').each(
mp-wp_genesis 1109 function(effect) {
mp-wp_genesis 1110 Effect.Methods[effect] = function(element, options){
mp-wp_genesis 1111 element = $(element);
mp-wp_genesis 1112 Effect[effect.charAt(0).toUpperCase() + effect.substring(1)](element, options);
mp-wp_genesis 1113 return element;
mp-wp_genesis 1114 }
mp-wp_genesis 1115 }
mp-wp_genesis 1116 );
mp-wp_genesis 1117
mp-wp_genesis 1118 $w('getInlineOpacity forceRerendering setContentZoom collectTextNodes collectTextNodesIgnoreClass getStyles').each(
mp-wp_genesis 1119 function(f) { Effect.Methods[f] = Element[f]; }
mp-wp_genesis 1120 );
mp-wp_genesis 1121
mp-wp_genesis 1122 Element.addMethods(Effect.Methods);