effects.js
1087 lines
| 37.3 KiB
| application/javascript
|
JavascriptLexer
Jean-Philippe Lang
|
r238 | // Copyright (c) 2005, 2006 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us) | |
|
Jean-Philippe Lang
|
r2 | // Contributors: | |
| // Justin Palmer (http://encytemedia.com/) | |||
| // Mark Pilgrim (http://diveintomark.org/) | |||
| // Martin Bialasinki | |||
| // | |||
|
Jean-Philippe Lang
|
r238 | // script.aculo.us is freely distributable under the terms of an MIT-style license. | |
| // For details, see the script.aculo.us web site: http://script.aculo.us/ | |||
|
Jean-Philippe Lang
|
r2 | ||
| // converts rgb() and #xxx to #xxxxxx format, | |||
| // returns self (or first argument) if not convertable | |||
| String.prototype.parseColor = function() { | |||
|
Jean-Philippe Lang
|
r238 | var color = '#'; | |
|
Jean-Philippe Lang
|
r2 | if(this.slice(0,4) == 'rgb(') { | |
| var cols = this.slice(4,this.length-1).split(','); | |||
| var i=0; do { color += parseInt(cols[i]).toColorPart() } while (++i<3); | |||
| } else { | |||
| if(this.slice(0,1) == '#') { | |||
| if(this.length==4) for(var i=1;i<4;i++) color += (this.charAt(i) + this.charAt(i)).toLowerCase(); | |||
| if(this.length==7) color = this.toLowerCase(); | |||
| } | |||
| } | |||
| return(color.length==7 ? color : (arguments[0] || this)); | |||
|
Jean-Philippe Lang
|
r238 | } | |
|
Jean-Philippe Lang
|
r2 | ||
|
Jean-Philippe Lang
|
r238 | /*--------------------------------------------------------------------------*/ | |
| Element.collectTextNodes = function(element) { | |||
| return $A($(element).childNodes).collect( function(node) { | |||
| return (node.nodeType==3 ? node.nodeValue : | |||
| (node.hasChildNodes() ? Element.collectTextNodes(node) : '')); | |||
| }).flatten().join(''); | |||
|
Jean-Philippe Lang
|
r2 | } | |
|
Jean-Philippe Lang
|
r238 | Element.collectTextNodesIgnoreClass = function(element, className) { | |
| return $A($(element).childNodes).collect( function(node) { | |||
| return (node.nodeType==3 ? node.nodeValue : | |||
| ((node.hasChildNodes() && !Element.hasClassName(node,className)) ? | |||
| Element.collectTextNodesIgnoreClass(node, className) : '')); | |||
| }).flatten().join(''); | |||
|
Jean-Philippe Lang
|
r2 | } | |
|
Jean-Philippe Lang
|
r238 | Element.setContentZoom = function(element, percent) { | |
| element = $(element); | |||
| element.setStyle({fontSize: (percent/100) + 'em'}); | |||
| if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0); | |||
| return element; | |||
|
Jean-Philippe Lang
|
r2 | } | |
|
Jean-Philippe Lang
|
r238 | Element.getOpacity = function(element){ | |
| element = $(element); | |||
|
Jean-Philippe Lang
|
r2 | var opacity; | |
|
Jean-Philippe Lang
|
r238 | if (opacity = element.getStyle('opacity')) | |
|
Jean-Philippe Lang
|
r2 | return parseFloat(opacity); | |
|
Jean-Philippe Lang
|
r238 | if (opacity = (element.getStyle('filter') || '').match(/alpha\(opacity=(.*)\)/)) | |
|
Jean-Philippe Lang
|
r2 | if(opacity[1]) return parseFloat(opacity[1]) / 100; | |
| return 1.0; | |||
| } | |||
| Element.setOpacity = function(element, value){ | |||
| element= $(element); | |||
| if (value == 1){ | |||
|
Jean-Philippe Lang
|
r238 | element.setStyle({ opacity: | |
|
Jean-Philippe Lang
|
r2 | (/Gecko/.test(navigator.userAgent) && !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ? | |
|
Jean-Philippe Lang
|
r238 | 0.999999 : 1.0 }); | |
| if(/MSIE/.test(navigator.userAgent) && !window.opera) | |||
| element.setStyle({filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'')}); | |||
|
Jean-Philippe Lang
|
r2 | } else { | |
| if(value < 0.00001) value = 0; | |||
|
Jean-Philippe Lang
|
r238 | element.setStyle({opacity: value}); | |
| if(/MSIE/.test(navigator.userAgent) && !window.opera) | |||
| element.setStyle( | |||
| { filter: element.getStyle('filter').replace(/alpha\([^\)]*\)/gi,'') + | |||
| 'alpha(opacity='+value*100+')' }); | |||
| } | |||
| return element; | |||
|
Jean-Philippe Lang
|
r2 | } | |
| Element.getInlineOpacity = function(element){ | |||
| return $(element).style.opacity || ''; | |||
| } | |||
|
Jean-Philippe Lang
|
r238 | Element.forceRerendering = function(element) { | |
| try { | |||
| element = $(element); | |||
| var n = document.createTextNode(' '); | |||
| element.appendChild(n); | |||
| element.removeChild(n); | |||
| } catch(e) { } | |||
| }; | |||
| /*--------------------------------------------------------------------------*/ | |||
|
Jean-Philippe Lang
|
r2 | ||
| Array.prototype.call = function() { | |||
| var args = arguments; | |||
| this.each(function(f){ f.apply(this, args) }); | |||
| } | |||
| /*--------------------------------------------------------------------------*/ | |||
| var Effect = { | |||
|
Jean-Philippe Lang
|
r238 | _elementDoesNotExistError: { | |
| name: 'ElementDoesNotExistError', | |||
| message: 'The specified DOM element does not exist, but is required for this effect to operate' | |||
| }, | |||
|
Jean-Philippe Lang
|
r2 | tagifyText: function(element) { | |
|
Jean-Philippe Lang
|
r238 | if(typeof Builder == 'undefined') | |
| throw("Effect.tagifyText requires including script.aculo.us' builder.js library"); | |||
|
Jean-Philippe Lang
|
r2 | var tagifyStyle = 'position:relative'; | |
|
Jean-Philippe Lang
|
r238 | if(/MSIE/.test(navigator.userAgent) && !window.opera) tagifyStyle += ';zoom:1'; | |
|
Jean-Philippe Lang
|
r2 | element = $(element); | |
| $A(element.childNodes).each( function(child) { | |||
| if(child.nodeType==3) { | |||
| child.nodeValue.toArray().each( function(character) { | |||
| element.insertBefore( | |||
| Builder.node('span',{style: tagifyStyle}, | |||
| character == ' ' ? String.fromCharCode(160) : character), | |||
| child); | |||
| }); | |||
| Element.remove(child); | |||
| } | |||
| }); | |||
| }, | |||
| multiple: function(element, effect) { | |||
| var elements; | |||
| if(((typeof element == 'object') || | |||
| (typeof element == 'function')) && | |||
| (element.length)) | |||
| elements = element; | |||
| else | |||
| elements = $(element).childNodes; | |||
| var options = Object.extend({ | |||
| speed: 0.1, | |||
| delay: 0.0 | |||
| }, arguments[2] || {}); | |||
| var masterDelay = options.delay; | |||
| $A(elements).each( function(element, index) { | |||
| new effect(element, Object.extend(options, { delay: index * options.speed + masterDelay })); | |||
| }); | |||
|
Jean-Philippe Lang
|
r238 | }, | |
| PAIRS: { | |||
| 'slide': ['SlideDown','SlideUp'], | |||
| 'blind': ['BlindDown','BlindUp'], | |||
| 'appear': ['Appear','Fade'] | |||
| }, | |||
| toggle: function(element, effect) { | |||
| element = $(element); | |||
| effect = (effect || 'appear').toLowerCase(); | |||
| var options = Object.extend({ | |||
| queue: { position:'end', scope:(element.id || 'global'), limit: 1 } | |||
| }, arguments[2] || {}); | |||
| Effect[element.visible() ? | |||
| Effect.PAIRS[effect][1] : Effect.PAIRS[effect][0]](element, options); | |||
|
Jean-Philippe Lang
|
r2 | } | |
| }; | |||
| var Effect2 = Effect; // deprecated | |||
| /* ------------- transitions ------------- */ | |||
|
Jean-Philippe Lang
|
r238 | Effect.Transitions = { | |
| linear: Prototype.K, | |||
| sinoidal: function(pos) { | |||
| return (-Math.cos(pos*Math.PI)/2) + 0.5; | |||
| }, | |||
| reverse: function(pos) { | |||
| return 1-pos; | |||
| }, | |||
| flicker: function(pos) { | |||
| return ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random()/4; | |||
| }, | |||
| wobble: function(pos) { | |||
| return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5; | |||
| }, | |||
| pulse: function(pos, pulses) { | |||
| pulses = pulses || 5; | |||
| return ( | |||
| Math.round((pos % (1/pulses)) * pulses) == 0 ? | |||
| ((pos * pulses * 2) - Math.floor(pos * pulses * 2)) : | |||
| 1 - ((pos * pulses * 2) - Math.floor(pos * pulses * 2)) | |||
| ); | |||
| }, | |||
| none: function(pos) { | |||
| return 0; | |||
| }, | |||
| full: function(pos) { | |||
| return 1; | |||
| } | |||
| }; | |||
|
Jean-Philippe Lang
|
r2 | ||
| /* ------------- core effects ------------- */ | |||
|
Jean-Philippe Lang
|
r238 | Effect.ScopedQueue = Class.create(); | |
| Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), { | |||
| initialize: function() { | |||
| this.effects = []; | |||
| this.interval = null; | |||
| }, | |||
|
Jean-Philippe Lang
|
r2 | _each: function(iterator) { | |
| this.effects._each(iterator); | |||
| }, | |||
| add: function(effect) { | |||
| var timestamp = new Date().getTime(); | |||
|
Jean-Philippe Lang
|
r238 | var position = (typeof effect.options.queue == 'string') ? | |
| effect.options.queue : effect.options.queue.position; | |||
| switch(position) { | |||
|
Jean-Philippe Lang
|
r2 | case 'front': | |
| // move unstarted effects after this effect | |||
| this.effects.findAll(function(e){ return e.state=='idle' }).each( function(e) { | |||
| e.startOn += effect.finishOn; | |||
| e.finishOn += effect.finishOn; | |||
| }); | |||
| break; | |||
|
Jean-Philippe Lang
|
r238 | case 'with-last': | |
| timestamp = this.effects.pluck('startOn').max() || timestamp; | |||
| break; | |||
|
Jean-Philippe Lang
|
r2 | case 'end': | |
| // start effect after last queued effect has finished | |||
| timestamp = this.effects.pluck('finishOn').max() || timestamp; | |||
| break; | |||
| } | |||
| effect.startOn += timestamp; | |||
| effect.finishOn += timestamp; | |||
|
Jean-Philippe Lang
|
r238 | ||
| if(!effect.options.queue.limit || (this.effects.length < effect.options.queue.limit)) | |||
| this.effects.push(effect); | |||
|
Jean-Philippe Lang
|
r2 | if(!this.interval) | |
| this.interval = setInterval(this.loop.bind(this), 40); | |||
| }, | |||
| remove: function(effect) { | |||
| this.effects = this.effects.reject(function(e) { return e==effect }); | |||
| if(this.effects.length == 0) { | |||
| clearInterval(this.interval); | |||
| this.interval = null; | |||
| } | |||
| }, | |||
| loop: function() { | |||
| var timePos = new Date().getTime(); | |||
| this.effects.invoke('loop', timePos); | |||
| } | |||
|
Jean-Philippe Lang
|
r238 | }); | |
| Effect.Queues = { | |||
| instances: $H(), | |||
| get: function(queueName) { | |||
| if(typeof queueName != 'string') return queueName; | |||
| if(!this.instances[queueName]) | |||
| this.instances[queueName] = new Effect.ScopedQueue(); | |||
| return this.instances[queueName]; | |||
| } | |||
| } | |||
| Effect.Queue = Effect.Queues.get('global'); | |||
| Effect.DefaultOptions = { | |||
| transition: Effect.Transitions.sinoidal, | |||
| duration: 1.0, // seconds | |||
| fps: 25.0, // max. 25fps due to Effect.Queue implementation | |||
| sync: false, // true for combining | |||
| from: 0.0, | |||
| to: 1.0, | |||
| delay: 0.0, | |||
| queue: 'parallel' | |||
|
Jean-Philippe Lang
|
r2 | } | |
| Effect.Base = function() {}; | |||
| Effect.Base.prototype = { | |||
| position: null, | |||
| start: function(options) { | |||
|
Jean-Philippe Lang
|
r238 | this.options = Object.extend(Object.extend({},Effect.DefaultOptions), options || {}); | |
|
Jean-Philippe Lang
|
r2 | this.currentFrame = 0; | |
| this.state = 'idle'; | |||
| this.startOn = this.options.delay*1000; | |||
| this.finishOn = this.startOn + (this.options.duration*1000); | |||
| this.event('beforeStart'); | |||
|
Jean-Philippe Lang
|
r238 | if(!this.options.sync) | |
| Effect.Queues.get(typeof this.options.queue == 'string' ? | |||
| 'global' : this.options.queue.scope).add(this); | |||
|
Jean-Philippe Lang
|
r2 | }, | |
| loop: function(timePos) { | |||
| if(timePos >= this.startOn) { | |||
| if(timePos >= this.finishOn) { | |||
| this.render(1.0); | |||
| this.cancel(); | |||
| this.event('beforeFinish'); | |||
| if(this.finish) this.finish(); | |||
| this.event('afterFinish'); | |||
| return; | |||
| } | |||
| var pos = (timePos - this.startOn) / (this.finishOn - this.startOn); | |||
| var frame = Math.round(pos * this.options.fps * this.options.duration); | |||
| if(frame > this.currentFrame) { | |||
| this.render(pos); | |||
| this.currentFrame = frame; | |||
| } | |||
| } | |||
| }, | |||
| render: function(pos) { | |||
| if(this.state == 'idle') { | |||
| this.state = 'running'; | |||
| this.event('beforeSetup'); | |||
| if(this.setup) this.setup(); | |||
| this.event('afterSetup'); | |||
| } | |||
| if(this.state == 'running') { | |||
| if(this.options.transition) pos = this.options.transition(pos); | |||
| pos *= (this.options.to-this.options.from); | |||
| pos += this.options.from; | |||
| this.position = pos; | |||
| this.event('beforeUpdate'); | |||
| if(this.update) this.update(pos); | |||
| this.event('afterUpdate'); | |||
| } | |||
| }, | |||
| cancel: function() { | |||
|
Jean-Philippe Lang
|
r238 | if(!this.options.sync) | |
| Effect.Queues.get(typeof this.options.queue == 'string' ? | |||
| 'global' : this.options.queue.scope).remove(this); | |||
|
Jean-Philippe Lang
|
r2 | this.state = 'finished'; | |
| }, | |||
| event: function(eventName) { | |||
| if(this.options[eventName + 'Internal']) this.options[eventName + 'Internal'](this); | |||
| if(this.options[eventName]) this.options[eventName](this); | |||
| }, | |||
| inspect: function() { | |||
| return '#<Effect:' + $H(this).inspect() + ',options:' + $H(this.options).inspect() + '>'; | |||
| } | |||
| } | |||
| Effect.Parallel = Class.create(); | |||
| Object.extend(Object.extend(Effect.Parallel.prototype, Effect.Base.prototype), { | |||
| initialize: function(effects) { | |||
| this.effects = effects || []; | |||
| this.start(arguments[1]); | |||
| }, | |||
| update: function(position) { | |||
| this.effects.invoke('render', position); | |||
| }, | |||
| finish: function(position) { | |||
| this.effects.each( function(effect) { | |||
| effect.render(1.0); | |||
| effect.cancel(); | |||
| effect.event('beforeFinish'); | |||
| if(effect.finish) effect.finish(position); | |||
| effect.event('afterFinish'); | |||
| }); | |||
| } | |||
| }); | |||
|
Jean-Philippe Lang
|
r238 | Effect.Event = Class.create(); | |
| Object.extend(Object.extend(Effect.Event.prototype, Effect.Base.prototype), { | |||
| initialize: function() { | |||
| var options = Object.extend({ | |||
| duration: 0 | |||
| }, arguments[0] || {}); | |||
| this.start(options); | |||
| }, | |||
| update: Prototype.emptyFunction | |||
| }); | |||
|
Jean-Philippe Lang
|
r2 | Effect.Opacity = Class.create(); | |
| Object.extend(Object.extend(Effect.Opacity.prototype, Effect.Base.prototype), { | |||
| initialize: function(element) { | |||
| this.element = $(element); | |||
|
Jean-Philippe Lang
|
r238 | if(!this.element) throw(Effect._elementDoesNotExistError); | |
|
Jean-Philippe Lang
|
r2 | // make this work on IE on elements without 'layout' | |
|
Jean-Philippe Lang
|
r238 | if(/MSIE/.test(navigator.userAgent) && !window.opera && (!this.element.currentStyle.hasLayout)) | |
| this.element.setStyle({zoom: 1}); | |||
|
Jean-Philippe Lang
|
r2 | var options = Object.extend({ | |
|
Jean-Philippe Lang
|
r238 | from: this.element.getOpacity() || 0.0, | |
|
Jean-Philippe Lang
|
r2 | to: 1.0 | |
| }, arguments[1] || {}); | |||
| this.start(options); | |||
| }, | |||
| update: function(position) { | |||
|
Jean-Philippe Lang
|
r238 | this.element.setOpacity(position); | |
|
Jean-Philippe Lang
|
r2 | } | |
| }); | |||
|
Jean-Philippe Lang
|
r238 | Effect.Move = Class.create(); | |
| Object.extend(Object.extend(Effect.Move.prototype, Effect.Base.prototype), { | |||
| initialize: function(element) { | |||
| this.element = $(element); | |||
| if(!this.element) throw(Effect._elementDoesNotExistError); | |||
| var options = Object.extend({ | |||
| x: 0, | |||
| y: 0, | |||
| mode: 'relative' | |||
| }, arguments[1] || {}); | |||
| this.start(options); | |||
|
Jean-Philippe Lang
|
r2 | }, | |
| setup: function() { | |||
| // Bug in Opera: Opera returns the "real" position of a static element or | |||
| // relative element that does not have top/left explicitly set. | |||
| // ==> Always set top and left for position relative elements in your stylesheets | |||
| // (to 0 if you do not need them) | |||
|
Jean-Philippe Lang
|
r238 | this.element.makePositioned(); | |
| this.originalLeft = parseFloat(this.element.getStyle('left') || '0'); | |||
| this.originalTop = parseFloat(this.element.getStyle('top') || '0'); | |||
| if(this.options.mode == 'absolute') { | |||
| // absolute movement, so we need to calc deltaX and deltaY | |||
| this.options.x = this.options.x - this.originalLeft; | |||
| this.options.y = this.options.y - this.originalTop; | |||
| } | |||
|
Jean-Philippe Lang
|
r2 | }, | |
| update: function(position) { | |||
|
Jean-Philippe Lang
|
r238 | this.element.setStyle({ | |
| left: Math.round(this.options.x * position + this.originalLeft) + 'px', | |||
| top: Math.round(this.options.y * position + this.originalTop) + 'px' | |||
|
Jean-Philippe Lang
|
r2 | }); | |
| } | |||
| }); | |||
|
Jean-Philippe Lang
|
r238 | // for backwards compatibility | |
| Effect.MoveBy = function(element, toTop, toLeft) { | |||
| return new Effect.Move(element, | |||
| Object.extend({ x: toLeft, y: toTop }, arguments[3] || {})); | |||
| }; | |||
|
Jean-Philippe Lang
|
r2 | Effect.Scale = Class.create(); | |
| Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), { | |||
| initialize: function(element, percent) { | |||
|
Jean-Philippe Lang
|
r238 | this.element = $(element); | |
| if(!this.element) throw(Effect._elementDoesNotExistError); | |||
|
Jean-Philippe Lang
|
r2 | var options = Object.extend({ | |
| scaleX: true, | |||
| scaleY: true, | |||
| scaleContent: true, | |||
| scaleFromCenter: false, | |||
| scaleMode: 'box', // 'box' or 'contents' or {} with provided values | |||
| scaleFrom: 100.0, | |||
| scaleTo: percent | |||
| }, arguments[2] || {}); | |||
| this.start(options); | |||
| }, | |||
| setup: function() { | |||
| this.restoreAfterFinish = this.options.restoreAfterFinish || false; | |||
|
Jean-Philippe Lang
|
r238 | this.elementPositioning = this.element.getStyle('position'); | |
|
Jean-Philippe Lang
|
r2 | ||
| this.originalStyle = {}; | |||
| ['top','left','width','height','fontSize'].each( function(k) { | |||
| this.originalStyle[k] = this.element.style[k]; | |||
| }.bind(this)); | |||
| this.originalTop = this.element.offsetTop; | |||
| this.originalLeft = this.element.offsetLeft; | |||
|
Jean-Philippe Lang
|
r238 | var fontSize = this.element.getStyle('font-size') || '100%'; | |
| ['em','px','%','pt'].each( function(fontSizeType) { | |||
|
Jean-Philippe Lang
|
r2 | if(fontSize.indexOf(fontSizeType)>0) { | |
| this.fontSize = parseFloat(fontSize); | |||
| this.fontSizeType = fontSizeType; | |||
| } | |||
| }.bind(this)); | |||
| this.factor = (this.options.scaleTo - this.options.scaleFrom)/100; | |||
| this.dims = null; | |||
| if(this.options.scaleMode=='box') | |||
| this.dims = [this.element.offsetHeight, this.element.offsetWidth]; | |||
| if(/^content/.test(this.options.scaleMode)) | |||
| this.dims = [this.element.scrollHeight, this.element.scrollWidth]; | |||
| if(!this.dims) | |||
| this.dims = [this.options.scaleMode.originalHeight, | |||
| this.options.scaleMode.originalWidth]; | |||
| }, | |||
| update: function(position) { | |||
| var currentScale = (this.options.scaleFrom/100.0) + (this.factor * position); | |||
| if(this.options.scaleContent && this.fontSize) | |||
|
Jean-Philippe Lang
|
r238 | this.element.setStyle({fontSize: this.fontSize * currentScale + this.fontSizeType }); | |
|
Jean-Philippe Lang
|
r2 | this.setDimensions(this.dims[0] * currentScale, this.dims[1] * currentScale); | |
| }, | |||
| finish: function(position) { | |||
|
Jean-Philippe Lang
|
r238 | if(this.restoreAfterFinish) this.element.setStyle(this.originalStyle); | |
|
Jean-Philippe Lang
|
r2 | }, | |
| setDimensions: function(height, width) { | |||
| var d = {}; | |||
|
Jean-Philippe Lang
|
r238 | if(this.options.scaleX) d.width = Math.round(width) + 'px'; | |
| if(this.options.scaleY) d.height = Math.round(height) + 'px'; | |||
|
Jean-Philippe Lang
|
r2 | if(this.options.scaleFromCenter) { | |
| var topd = (height - this.dims[0])/2; | |||
| var leftd = (width - this.dims[1])/2; | |||
| if(this.elementPositioning == 'absolute') { | |||
| if(this.options.scaleY) d.top = this.originalTop-topd + 'px'; | |||
| if(this.options.scaleX) d.left = this.originalLeft-leftd + 'px'; | |||
| } else { | |||
| if(this.options.scaleY) d.top = -topd + 'px'; | |||
| if(this.options.scaleX) d.left = -leftd + 'px'; | |||
| } | |||
| } | |||
|
Jean-Philippe Lang
|
r238 | this.element.setStyle(d); | |
|
Jean-Philippe Lang
|
r2 | } | |
| }); | |||
| Effect.Highlight = Class.create(); | |||
| Object.extend(Object.extend(Effect.Highlight.prototype, Effect.Base.prototype), { | |||
| initialize: function(element) { | |||
| this.element = $(element); | |||
|
Jean-Philippe Lang
|
r238 | if(!this.element) throw(Effect._elementDoesNotExistError); | |
|
Jean-Philippe Lang
|
r2 | var options = Object.extend({ startcolor: '#ffff99' }, arguments[1] || {}); | |
| this.start(options); | |||
| }, | |||
| setup: function() { | |||
| // Prevent executing on elements not in the layout flow | |||
|
Jean-Philippe Lang
|
r238 | if(this.element.getStyle('display')=='none') { this.cancel(); return; } | |
|
Jean-Philippe Lang
|
r2 | // Disable background image during the effect | |
| this.oldStyle = { | |||
|
Jean-Philippe Lang
|
r238 | backgroundImage: this.element.getStyle('background-image') }; | |
| this.element.setStyle({backgroundImage: 'none'}); | |||
|
Jean-Philippe Lang
|
r2 | if(!this.options.endcolor) | |
|
Jean-Philippe Lang
|
r238 | this.options.endcolor = this.element.getStyle('background-color').parseColor('#ffffff'); | |
|
Jean-Philippe Lang
|
r2 | if(!this.options.restorecolor) | |
|
Jean-Philippe Lang
|
r238 | this.options.restorecolor = this.element.getStyle('background-color'); | |
|
Jean-Philippe Lang
|
r2 | // init color calculations | |
| this._base = $R(0,2).map(function(i){ return parseInt(this.options.startcolor.slice(i*2+1,i*2+3),16) }.bind(this)); | |||
| 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)); | |||
| }, | |||
| update: function(position) { | |||
|
Jean-Philippe Lang
|
r238 | this.element.setStyle({backgroundColor: $R(0,2).inject('#',function(m,v,i){ | |
|
Jean-Philippe Lang
|
r2 | return m+(Math.round(this._base[i]+(this._delta[i]*position)).toColorPart()); }.bind(this)) }); | |
| }, | |||
| finish: function() { | |||
|
Jean-Philippe Lang
|
r238 | this.element.setStyle(Object.extend(this.oldStyle, { | |
|
Jean-Philippe Lang
|
r2 | backgroundColor: this.options.restorecolor | |
| })); | |||
| } | |||
| }); | |||
| Effect.ScrollTo = Class.create(); | |||
| Object.extend(Object.extend(Effect.ScrollTo.prototype, Effect.Base.prototype), { | |||
| initialize: function(element) { | |||
| this.element = $(element); | |||
| this.start(arguments[1] || {}); | |||
| }, | |||
| setup: function() { | |||
| Position.prepare(); | |||
| var offsets = Position.cumulativeOffset(this.element); | |||
| if(this.options.offset) offsets[1] += this.options.offset; | |||
| var max = window.innerHeight ? | |||
| window.height - window.innerHeight : | |||
| document.body.scrollHeight - | |||
| (document.documentElement.clientHeight ? | |||
| document.documentElement.clientHeight : document.body.clientHeight); | |||
| this.scrollStart = Position.deltaY; | |||
| this.delta = (offsets[1] > max ? max : offsets[1]) - this.scrollStart; | |||
| }, | |||
| update: function(position) { | |||
| Position.prepare(); | |||
| window.scrollTo(Position.deltaX, | |||
| this.scrollStart + (position*this.delta)); | |||
| } | |||
| }); | |||
| /* ------------- combination effects ------------- */ | |||
| Effect.Fade = function(element) { | |||
|
Jean-Philippe Lang
|
r238 | element = $(element); | |
| var oldOpacity = element.getInlineOpacity(); | |||
|
Jean-Philippe Lang
|
r2 | var options = Object.extend({ | |
|
Jean-Philippe Lang
|
r238 | from: element.getOpacity() || 1.0, | |
|
Jean-Philippe Lang
|
r2 | to: 0.0, | |
|
Jean-Philippe Lang
|
r238 | afterFinishInternal: function(effect) { | |
|
Jean-Philippe Lang
|
r2 | if(effect.options.to!=0) return; | |
|
Jean-Philippe Lang
|
r238 | effect.element.hide().setStyle({opacity: oldOpacity}); | |
| }}, arguments[1] || {}); | |||
|
Jean-Philippe Lang
|
r2 | return new Effect.Opacity(element,options); | |
| } | |||
| Effect.Appear = function(element) { | |||
|
Jean-Philippe Lang
|
r238 | element = $(element); | |
|
Jean-Philippe Lang
|
r2 | var options = Object.extend({ | |
|
Jean-Philippe Lang
|
r238 | from: (element.getStyle('display') == 'none' ? 0.0 : element.getOpacity() || 0.0), | |
|
Jean-Philippe Lang
|
r2 | to: 1.0, | |
|
Jean-Philippe Lang
|
r238 | // force Safari to render floated elements properly | |
| afterFinishInternal: function(effect) { | |||
| effect.element.forceRerendering(); | |||
| }, | |||
| beforeSetup: function(effect) { | |||
| effect.element.setOpacity(effect.options.from).show(); | |||
| }}, arguments[1] || {}); | |||
|
Jean-Philippe Lang
|
r2 | return new Effect.Opacity(element,options); | |
| } | |||
| Effect.Puff = function(element) { | |||
| element = $(element); | |||
|
Jean-Philippe Lang
|
r238 | var oldStyle = { | |
| opacity: element.getInlineOpacity(), | |||
| position: element.getStyle('position'), | |||
| top: element.style.top, | |||
| left: element.style.left, | |||
| width: element.style.width, | |||
| height: element.style.height | |||
| }; | |||
|
Jean-Philippe Lang
|
r2 | return new Effect.Parallel( | |
| [ new Effect.Scale(element, 200, | |||
| { sync: true, scaleFromCenter: true, scaleContent: true, restoreAfterFinish: true }), | |||
| new Effect.Opacity(element, { sync: true, to: 0.0 } ) ], | |||
| Object.extend({ duration: 1.0, | |||
|
Jean-Philippe Lang
|
r238 | beforeSetupInternal: function(effect) { | |
| Position.absolutize(effect.effects[0].element) | |||
| }, | |||
| afterFinishInternal: function(effect) { | |||
| effect.effects[0].element.hide().setStyle(oldStyle); } | |||
|
Jean-Philippe Lang
|
r2 | }, arguments[1] || {}) | |
| ); | |||
| } | |||
| Effect.BlindUp = function(element) { | |||
| element = $(element); | |||
|
Jean-Philippe Lang
|
r238 | element.makeClipping(); | |
| return new Effect.Scale(element, 0, | |||
|
Jean-Philippe Lang
|
r2 | Object.extend({ scaleContent: false, | |
| scaleX: false, | |||
| restoreAfterFinish: true, | |||
|
Jean-Philippe Lang
|
r238 | afterFinishInternal: function(effect) { | |
| effect.element.hide().undoClipping(); | |||
| } | |||
|
Jean-Philippe Lang
|
r2 | }, arguments[1] || {}) | |
| ); | |||
| } | |||
| Effect.BlindDown = function(element) { | |||
| element = $(element); | |||
|
Jean-Philippe Lang
|
r238 | var elementDimensions = element.getDimensions(); | |
| return new Effect.Scale(element, 100, Object.extend({ | |||
| scaleContent: false, | |||
| scaleX: false, | |||
| scaleFrom: 0, | |||
| scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width}, | |||
| restoreAfterFinish: true, | |||
| afterSetup: function(effect) { | |||
| effect.element.makeClipping().setStyle({height: '0px'}).show(); | |||
| }, | |||
| afterFinishInternal: function(effect) { | |||
| effect.element.undoClipping(); | |||
| } | |||
| }, arguments[1] || {})); | |||
|
Jean-Philippe Lang
|
r2 | } | |
| Effect.SwitchOff = function(element) { | |||
| element = $(element); | |||
|
Jean-Philippe Lang
|
r238 | var oldOpacity = element.getInlineOpacity(); | |
| return new Effect.Appear(element, Object.extend({ | |||
|
Jean-Philippe Lang
|
r2 | duration: 0.4, | |
| from: 0, | |||
| transition: Effect.Transitions.flicker, | |||
| afterFinishInternal: function(effect) { | |||
| new Effect.Scale(effect.element, 1, { | |||
| duration: 0.3, scaleFromCenter: true, | |||
| scaleX: false, scaleContent: false, restoreAfterFinish: true, | |||
|
Jean-Philippe Lang
|
r238 | beforeSetup: function(effect) { | |
| effect.element.makePositioned().makeClipping(); | |||
| }, | |||
| afterFinishInternal: function(effect) { | |||
| effect.element.hide().undoClipping().undoPositioned().setStyle({opacity: oldOpacity}); | |||
| } | |||
|
Jean-Philippe Lang
|
r2 | }) | |
| } | |||
|
Jean-Philippe Lang
|
r238 | }, arguments[1] || {})); | |
|
Jean-Philippe Lang
|
r2 | } | |
| Effect.DropOut = function(element) { | |||
| element = $(element); | |||
| var oldStyle = { | |||
|
Jean-Philippe Lang
|
r238 | top: element.getStyle('top'), | |
| left: element.getStyle('left'), | |||
| opacity: element.getInlineOpacity() }; | |||
|
Jean-Philippe Lang
|
r2 | return new Effect.Parallel( | |
|
Jean-Philippe Lang
|
r238 | [ new Effect.Move(element, {x: 0, y: 100, sync: true }), | |
|
Jean-Philippe Lang
|
r2 | new Effect.Opacity(element, { sync: true, to: 0.0 }) ], | |
| Object.extend( | |||
| { duration: 0.5, | |||
|
Jean-Philippe Lang
|
r238 | beforeSetup: function(effect) { | |
| effect.effects[0].element.makePositioned(); | |||
| }, | |||
| afterFinishInternal: function(effect) { | |||
| effect.effects[0].element.hide().undoPositioned().setStyle(oldStyle); | |||
| } | |||
|
Jean-Philippe Lang
|
r2 | }, arguments[1] || {})); | |
| } | |||
| Effect.Shake = function(element) { | |||
| element = $(element); | |||
| var oldStyle = { | |||
|
Jean-Philippe Lang
|
r238 | top: element.getStyle('top'), | |
| left: element.getStyle('left') }; | |||
| return new Effect.Move(element, | |||
| { x: 20, y: 0, duration: 0.05, afterFinishInternal: function(effect) { | |||
| new Effect.Move(effect.element, | |||
| { x: -40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { | |||
| new Effect.Move(effect.element, | |||
| { x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { | |||
| new Effect.Move(effect.element, | |||
| { x: -40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { | |||
| new Effect.Move(effect.element, | |||
| { x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { | |||
| new Effect.Move(effect.element, | |||
| { x: -20, y: 0, duration: 0.05, afterFinishInternal: function(effect) { | |||
| effect.element.undoPositioned().setStyle(oldStyle); | |||
| }}) }}) }}) }}) }}) }}); | |||
|
Jean-Philippe Lang
|
r2 | } | |
| Effect.SlideDown = function(element) { | |||
|
Jean-Philippe Lang
|
r238 | element = $(element).cleanWhitespace(); | |
|
Jean-Philippe Lang
|
r2 | // SlideDown need to have the content of the element wrapped in a container element with fixed height! | |
|
Jean-Philippe Lang
|
r238 | var oldInnerBottom = element.down().getStyle('bottom'); | |
| var elementDimensions = element.getDimensions(); | |||
|
Jean-Philippe Lang
|
r2 | return new Effect.Scale(element, 100, Object.extend({ | |
| scaleContent: false, | |||
| scaleX: false, | |||
|
Jean-Philippe Lang
|
r238 | scaleFrom: window.opera ? 0 : 1, | |
|
Jean-Philippe Lang
|
r2 | scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width}, | |
| restoreAfterFinish: true, | |||
|
Jean-Philippe Lang
|
r238 | afterSetup: function(effect) { | |
| effect.element.makePositioned(); | |||
| effect.element.down().makePositioned(); | |||
| if(window.opera) effect.element.setStyle({top: ''}); | |||
| effect.element.makeClipping().setStyle({height: '0px'}).show(); | |||
| }, | |||
| afterUpdateInternal: function(effect) { | |||
| effect.element.down().setStyle({bottom: | |||
| (effect.dims[0] - effect.element.clientHeight) + 'px' }); | |||
| }, | |||
| afterFinishInternal: function(effect) { | |||
| effect.element.undoClipping().undoPositioned(); | |||
| effect.element.down().undoPositioned().setStyle({bottom: oldInnerBottom}); } | |||
|
Jean-Philippe Lang
|
r2 | }, arguments[1] || {}) | |
| ); | |||
| } | |||
|
Jean-Philippe Lang
|
r238 | ||
|
Jean-Philippe Lang
|
r2 | Effect.SlideUp = function(element) { | |
|
Jean-Philippe Lang
|
r238 | element = $(element).cleanWhitespace(); | |
| var oldInnerBottom = element.down().getStyle('bottom'); | |||
| return new Effect.Scale(element, window.opera ? 0 : 1, | |||
|
Jean-Philippe Lang
|
r2 | Object.extend({ scaleContent: false, | |
| scaleX: false, | |||
| scaleMode: 'box', | |||
| scaleFrom: 100, | |||
| restoreAfterFinish: true, | |||
|
Jean-Philippe Lang
|
r238 | beforeStartInternal: function(effect) { | |
| effect.element.makePositioned(); | |||
| effect.element.down().makePositioned(); | |||
| if(window.opera) effect.element.setStyle({top: ''}); | |||
| effect.element.makeClipping().show(); | |||
| }, | |||
| afterUpdateInternal: function(effect) { | |||
| effect.element.down().setStyle({bottom: | |||
| (effect.dims[0] - effect.element.clientHeight) + 'px' }); | |||
| }, | |||
| afterFinishInternal: function(effect) { | |||
| effect.element.hide().undoClipping().undoPositioned().setStyle({bottom: oldInnerBottom}); | |||
| effect.element.down().undoPositioned(); | |||
| } | |||
|
Jean-Philippe Lang
|
r2 | }, arguments[1] || {}) | |
| ); | |||
| } | |||
| // Bug in opera makes the TD containing this element expand for a instance after finish | |||
| Effect.Squish = function(element) { | |||
|
Jean-Philippe Lang
|
r238 | return new Effect.Scale(element, window.opera ? 1 : 0, { | |
| restoreAfterFinish: true, | |||
| beforeSetup: function(effect) { | |||
| effect.element.makeClipping(); | |||
| }, | |||
| afterFinishInternal: function(effect) { | |||
| effect.element.hide().undoClipping(); | |||
| } | |||
|
Jean-Philippe Lang
|
r2 | }); | |
| } | |||
| Effect.Grow = function(element) { | |||
| element = $(element); | |||
| var options = Object.extend({ | |||
| direction: 'center', | |||
|
Jean-Philippe Lang
|
r238 | moveTransition: Effect.Transitions.sinoidal, | |
|
Jean-Philippe Lang
|
r2 | scaleTransition: Effect.Transitions.sinoidal, | |
| opacityTransition: Effect.Transitions.full | |||
| }, arguments[1] || {}); | |||
| var oldStyle = { | |||
| top: element.style.top, | |||
| left: element.style.left, | |||
| height: element.style.height, | |||
| width: element.style.width, | |||
|
Jean-Philippe Lang
|
r238 | opacity: element.getInlineOpacity() }; | |
|
Jean-Philippe Lang
|
r2 | ||
|
Jean-Philippe Lang
|
r238 | var dims = element.getDimensions(); | |
|
Jean-Philippe Lang
|
r2 | var initialMoveX, initialMoveY; | |
| var moveX, moveY; | |||
| switch (options.direction) { | |||
| case 'top-left': | |||
| initialMoveX = initialMoveY = moveX = moveY = 0; | |||
| break; | |||
| case 'top-right': | |||
| initialMoveX = dims.width; | |||
| initialMoveY = moveY = 0; | |||
| moveX = -dims.width; | |||
| break; | |||
| case 'bottom-left': | |||
| initialMoveX = moveX = 0; | |||
| initialMoveY = dims.height; | |||
| moveY = -dims.height; | |||
| break; | |||
| case 'bottom-right': | |||
| initialMoveX = dims.width; | |||
| initialMoveY = dims.height; | |||
| moveX = -dims.width; | |||
| moveY = -dims.height; | |||
| break; | |||
| case 'center': | |||
| initialMoveX = dims.width / 2; | |||
| initialMoveY = dims.height / 2; | |||
| moveX = -dims.width / 2; | |||
| moveY = -dims.height / 2; | |||
| break; | |||
| } | |||
|
Jean-Philippe Lang
|
r238 | return new Effect.Move(element, { | |
| x: initialMoveX, | |||
| y: initialMoveY, | |||
|
Jean-Philippe Lang
|
r2 | duration: 0.01, | |
|
Jean-Philippe Lang
|
r238 | beforeSetup: function(effect) { | |
| effect.element.hide().makeClipping().makePositioned(); | |||
| }, | |||
|
Jean-Philippe Lang
|
r2 | afterFinishInternal: function(effect) { | |
| new Effect.Parallel( | |||
| [ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }), | |||
|
Jean-Philippe Lang
|
r238 | new Effect.Move(effect.element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }), | |
|
Jean-Philippe Lang
|
r2 | new Effect.Scale(effect.element, 100, { | |
| scaleMode: { originalHeight: dims.height, originalWidth: dims.width }, | |||
| sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true}) | |||
| ], Object.extend({ | |||
|
Jean-Philippe Lang
|
r238 | beforeSetup: function(effect) { | |
| effect.effects[0].element.setStyle({height: '0px'}).show(); | |||
| }, | |||
| afterFinishInternal: function(effect) { | |||
| effect.effects[0].element.undoClipping().undoPositioned().setStyle(oldStyle); | |||
| } | |||
|
Jean-Philippe Lang
|
r2 | }, options) | |
| ) | |||
| } | |||
| }); | |||
| } | |||
| Effect.Shrink = function(element) { | |||
| element = $(element); | |||
| var options = Object.extend({ | |||
| direction: 'center', | |||
|
Jean-Philippe Lang
|
r238 | moveTransition: Effect.Transitions.sinoidal, | |
|
Jean-Philippe Lang
|
r2 | scaleTransition: Effect.Transitions.sinoidal, | |
| opacityTransition: Effect.Transitions.none | |||
| }, arguments[1] || {}); | |||
| var oldStyle = { | |||
| top: element.style.top, | |||
| left: element.style.left, | |||
| height: element.style.height, | |||
| width: element.style.width, | |||
|
Jean-Philippe Lang
|
r238 | opacity: element.getInlineOpacity() }; | |
|
Jean-Philippe Lang
|
r2 | ||
|
Jean-Philippe Lang
|
r238 | var dims = element.getDimensions(); | |
|
Jean-Philippe Lang
|
r2 | var moveX, moveY; | |
| switch (options.direction) { | |||
| case 'top-left': | |||
| moveX = moveY = 0; | |||
| break; | |||
| case 'top-right': | |||
| moveX = dims.width; | |||
| moveY = 0; | |||
| break; | |||
| case 'bottom-left': | |||
| moveX = 0; | |||
| moveY = dims.height; | |||
| break; | |||
| case 'bottom-right': | |||
| moveX = dims.width; | |||
| moveY = dims.height; | |||
| break; | |||
| case 'center': | |||
| moveX = dims.width / 2; | |||
| moveY = dims.height / 2; | |||
| break; | |||
| } | |||
| return new Effect.Parallel( | |||
| [ new Effect.Opacity(element, { sync: true, to: 0.0, from: 1.0, transition: options.opacityTransition }), | |||
| new Effect.Scale(element, window.opera ? 1 : 0, { sync: true, transition: options.scaleTransition, restoreAfterFinish: true}), | |||
|
Jean-Philippe Lang
|
r238 | new Effect.Move(element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }) | |
|
Jean-Philippe Lang
|
r2 | ], Object.extend({ | |
|
Jean-Philippe Lang
|
r238 | beforeStartInternal: function(effect) { | |
| effect.effects[0].element.makePositioned().makeClipping(); | |||
| }, | |||
| afterFinishInternal: function(effect) { | |||
| effect.effects[0].element.hide().undoClipping().undoPositioned().setStyle(oldStyle); } | |||
|
Jean-Philippe Lang
|
r2 | }, options) | |
| ); | |||
| } | |||
| Effect.Pulsate = function(element) { | |||
| element = $(element); | |||
| var options = arguments[1] || {}; | |||
|
Jean-Philippe Lang
|
r238 | var oldOpacity = element.getInlineOpacity(); | |
|
Jean-Philippe Lang
|
r2 | var transition = options.transition || Effect.Transitions.sinoidal; | |
|
Jean-Philippe Lang
|
r238 | var reverser = function(pos){ return transition(1-Effect.Transitions.pulse(pos, options.pulses)) }; | |
|
Jean-Philippe Lang
|
r2 | reverser.bind(transition); | |
| return new Effect.Opacity(element, | |||
|
Jean-Philippe Lang
|
r238 | Object.extend(Object.extend({ duration: 2.0, from: 0, | |
| afterFinishInternal: function(effect) { effect.element.setStyle({opacity: oldOpacity}); } | |||
|
Jean-Philippe Lang
|
r2 | }, options), {transition: reverser})); | |
| } | |||
| Effect.Fold = function(element) { | |||
| element = $(element); | |||
| var oldStyle = { | |||
| top: element.style.top, | |||
| left: element.style.left, | |||
| width: element.style.width, | |||
| height: element.style.height }; | |||
|
Jean-Philippe Lang
|
r238 | element.makeClipping(); | |
|
Jean-Philippe Lang
|
r2 | return new Effect.Scale(element, 5, Object.extend({ | |
| scaleContent: false, | |||
| scaleX: false, | |||
| afterFinishInternal: function(effect) { | |||
| new Effect.Scale(element, 1, { | |||
| scaleContent: false, | |||
| scaleY: false, | |||
|
Jean-Philippe Lang
|
r238 | afterFinishInternal: function(effect) { | |
| effect.element.hide().undoClipping().setStyle(oldStyle); | |||
| } }); | |||
|
Jean-Philippe Lang
|
r2 | }}, arguments[1] || {})); | |
|
Jean-Philippe Lang
|
r238 | }; | |
| Effect.Morph = Class.create(); | |||
| Object.extend(Object.extend(Effect.Morph.prototype, Effect.Base.prototype), { | |||
| initialize: function(element) { | |||
| this.element = $(element); | |||
| if(!this.element) throw(Effect._elementDoesNotExistError); | |||
| var options = Object.extend({ | |||
| style: '' | |||
| }, arguments[1] || {}); | |||
| this.start(options); | |||
| }, | |||
| setup: function(){ | |||
| function parseColor(color){ | |||
| if(!color || ['rgba(0, 0, 0, 0)','transparent'].include(color)) color = '#ffffff'; | |||
| color = color.parseColor(); | |||
| return $R(0,2).map(function(i){ | |||
| return parseInt( color.slice(i*2+1,i*2+3), 16 ) | |||
| }); | |||
| } | |||
| this.transforms = this.options.style.parseStyle().map(function(property){ | |||
| var originalValue = this.element.getStyle(property[0]); | |||
| return $H({ | |||
| style: property[0], | |||
| originalValue: property[1].unit=='color' ? | |||
| parseColor(originalValue) : parseFloat(originalValue || 0), | |||
| targetValue: property[1].unit=='color' ? | |||
| parseColor(property[1].value) : property[1].value, | |||
| unit: property[1].unit | |||
| }); | |||
| }.bind(this)).reject(function(transform){ | |||
| return ( | |||
| (transform.originalValue == transform.targetValue) || | |||
| ( | |||
| transform.unit != 'color' && | |||
| (isNaN(transform.originalValue) || isNaN(transform.targetValue)) | |||
| ) | |||
| ) | |||
| }); | |||
| }, | |||
| update: function(position) { | |||
| var style = $H(), value = null; | |||
| this.transforms.each(function(transform){ | |||
| value = transform.unit=='color' ? | |||
| $R(0,2).inject('#',function(m,v,i){ | |||
| return m+(Math.round(transform.originalValue[i]+ | |||
| (transform.targetValue[i] - transform.originalValue[i])*position)).toColorPart() }) : | |||
| transform.originalValue + Math.round( | |||
| ((transform.targetValue - transform.originalValue) * position) * 1000)/1000 + transform.unit; | |||
| style[transform.style] = value; | |||
| }); | |||
| this.element.setStyle(style); | |||
| } | |||
| }); | |||
| Effect.Transform = Class.create(); | |||
| Object.extend(Effect.Transform.prototype, { | |||
| initialize: function(tracks){ | |||
| this.tracks = []; | |||
| this.options = arguments[1] || {}; | |||
| this.addTracks(tracks); | |||
| }, | |||
| addTracks: function(tracks){ | |||
| tracks.each(function(track){ | |||
| var data = $H(track).values().first(); | |||
| this.tracks.push($H({ | |||
| ids: $H(track).keys().first(), | |||
| effect: Effect.Morph, | |||
| options: { style: data } | |||
| })); | |||
| }.bind(this)); | |||
| return this; | |||
| }, | |||
| play: function(){ | |||
| return new Effect.Parallel( | |||
| this.tracks.map(function(track){ | |||
| var elements = [$(track.ids) || $$(track.ids)].flatten(); | |||
| return elements.map(function(e){ return new track.effect(e, Object.extend({ sync:true }, track.options)) }); | |||
| }).flatten(), | |||
| this.options | |||
| ); | |||
| } | |||
| }); | |||
| Element.CSS_PROPERTIES = ['azimuth', 'backgroundAttachment', 'backgroundColor', 'backgroundImage', | |||
| 'backgroundPosition', 'backgroundRepeat', 'borderBottomColor', 'borderBottomStyle', | |||
| 'borderBottomWidth', 'borderCollapse', 'borderLeftColor', 'borderLeftStyle', 'borderLeftWidth', | |||
| 'borderRightColor', 'borderRightStyle', 'borderRightWidth', 'borderSpacing', 'borderTopColor', | |||
| 'borderTopStyle', 'borderTopWidth', 'bottom', 'captionSide', 'clear', 'clip', 'color', 'content', | |||
| 'counterIncrement', 'counterReset', 'cssFloat', 'cueAfter', 'cueBefore', 'cursor', 'direction', | |||
| 'display', 'elevation', 'emptyCells', 'fontFamily', 'fontSize', 'fontSizeAdjust', 'fontStretch', | |||
| 'fontStyle', 'fontVariant', 'fontWeight', 'height', 'left', 'letterSpacing', 'lineHeight', | |||
| 'listStyleImage', 'listStylePosition', 'listStyleType', 'marginBottom', 'marginLeft', 'marginRight', | |||
| 'marginTop', 'markerOffset', 'marks', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'opacity', | |||
| 'orphans', 'outlineColor', 'outlineOffset', 'outlineStyle', 'outlineWidth', 'overflowX', 'overflowY', | |||
| 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'page', 'pageBreakAfter', 'pageBreakBefore', | |||
| 'pageBreakInside', 'pauseAfter', 'pauseBefore', 'pitch', 'pitchRange', 'position', 'quotes', | |||
| 'richness', 'right', 'size', 'speakHeader', 'speakNumeral', 'speakPunctuation', 'speechRate', 'stress', | |||
| 'tableLayout', 'textAlign', 'textDecoration', 'textIndent', 'textShadow', 'textTransform', 'top', | |||
| 'unicodeBidi', 'verticalAlign', 'visibility', 'voiceFamily', 'volume', 'whiteSpace', 'widows', | |||
| 'width', 'wordSpacing', 'zIndex']; | |||
| Element.CSS_LENGTH = /^(([\+\-]?[0-9\.]+)(em|ex|px|in|cm|mm|pt|pc|\%))|0$/; | |||
| String.prototype.parseStyle = function(){ | |||
| var element = Element.extend(document.createElement('div')); | |||
| element.innerHTML = '<div style="' + this + '"></div>'; | |||
| var style = element.down().style, styleRules = $H(); | |||
| Element.CSS_PROPERTIES.each(function(property){ | |||
| if(style[property]) styleRules[property] = style[property]; | |||
| }); | |||
| var result = $H(); | |||
| styleRules.each(function(pair){ | |||
| var property = pair[0], value = pair[1], unit = null; | |||
| if(value.parseColor('#zzzzzz') != '#zzzzzz') { | |||
| value = value.parseColor(); | |||
| unit = 'color'; | |||
| } else if(Element.CSS_LENGTH.test(value)) | |||
| var components = value.match(/^([\+\-]?[0-9\.]+)(.*)$/), | |||
| value = parseFloat(components[1]), unit = (components.length == 3) ? components[2] : null; | |||
| result[property.underscore().dasherize()] = $H({ value:value, unit:unit }); | |||
| }.bind(this)); | |||
| return result; | |||
| }; | |||
| Element.morph = function(element, style) { | |||
| new Effect.Morph(element, Object.extend({ style: style }, arguments[2] || {})); | |||
| return element; | |||
| }; | |||
| ['setOpacity','getOpacity','getInlineOpacity','forceRerendering','setContentZoom', | |||
| 'collectTextNodes','collectTextNodesIgnoreClass','morph'].each( | |||
| function(f) { Element.Methods[f] = Element[f]; } | |||
| ); | |||
| Element.Methods.visualEffect = function(element, effect, options) { | |||
| s = effect.gsub(/_/, '-').camelize(); | |||
| effect_class = s.charAt(0).toUpperCase() + s.substring(1); | |||
| new Effect[effect_class](element, options); | |||
| return $(element); | |||
| }; | |||
| Element.addMethods(); |