X-Git-Url: https://scripts.mit.edu/gitweb/autoinstalls/wordpress.git/blobdiff_plain/a66f9e26487c560245ef9cd17d7e87c0cbb650af..177fd6fefd2e3d5a0ea6591c71d660cabdb3c1a4:/wp-includes/js/scriptaculous/effects.js diff --git a/wp-includes/js/scriptaculous/effects.js b/wp-includes/js/scriptaculous/effects.js index 70d07526..27c29016 100644 --- a/wp-includes/js/scriptaculous/effects.js +++ b/wp-includes/js/scriptaculous/effects.js @@ -1,4 +1,4 @@ -// script.aculo.us effects.js v1.7.1_beta3, Fri May 25 17:19:41 +0200 2007 +// script.aculo.us effects.js v1.8.0, Tue Nov 06 15:01:40 +0300 2007 // Copyright (c) 2005-2007 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us) // Contributors: @@ -13,17 +13,17 @@ // returns self (or first argument) if not convertable String.prototype.parseColor = function() { var color = '#'; - if(this.slice(0,4) == 'rgb(') { + 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(); + 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)); -} + return (color.length==7 ? color : (arguments[0] || this)); +}; /*--------------------------------------------------------------------------*/ @@ -32,7 +32,7 @@ Element.collectTextNodes = function(element) { return (node.nodeType==3 ? node.nodeValue : (node.hasChildNodes() ? Element.collectTextNodes(node) : '')); }).flatten().join(''); -} +}; Element.collectTextNodesIgnoreClass = function(element, className) { return $A($(element).childNodes).collect( function(node) { @@ -40,18 +40,18 @@ Element.collectTextNodesIgnoreClass = function(element, className) { ((node.hasChildNodes() && !Element.hasClassName(node,className)) ? Element.collectTextNodesIgnoreClass(node, className) : '')); }).flatten().join(''); -} +}; Element.setContentZoom = function(element, percent) { element = $(element); element.setStyle({fontSize: (percent/100) + 'em'}); - if(Prototype.Browser.WebKit) window.scrollBy(0,0); + if (Prototype.Browser.WebKit) window.scrollBy(0,0); return element; -} +}; Element.getInlineOpacity = function(element){ return $(element).style.opacity || ''; -} +}; Element.forceRerendering = function(element) { try { @@ -64,31 +64,63 @@ Element.forceRerendering = function(element) { /*--------------------------------------------------------------------------*/ -Array.prototype.call = function() { - var args = arguments; - this.each(function(f){ f.apply(this, args) }); -} - -/*--------------------------------------------------------------------------*/ - var Effect = { _elementDoesNotExistError: { name: 'ElementDoesNotExistError', message: 'The specified DOM element does not exist, but is required for this effect to operate' }, + 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) { + var pos = ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random()/4; + return pos > 1 ? 1 : pos; + }, + wobble: function(pos) { + return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5; + }, + pulse: function(pos, pulses) { + pulses = pulses || 5; + return ( + ((pos % (1/pulses)) * pulses).round() == 0 ? + ((pos * pulses * 2) - (pos * pulses * 2).floor()) : + 1 - ((pos * pulses * 2) - (pos * pulses * 2).floor()) + ); + }, + spring: function(pos) { + return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp(-pos * 6)); + }, + none: function(pos) { + return 0; + }, + full: function(pos) { + return 1; + } + }, + DefaultOptions: { + duration: 1.0, // seconds + fps: 100, // 100= assume 66fps max. + sync: false, // true for combining + from: 0.0, + to: 1.0, + delay: 0.0, + queue: 'parallel' + }, tagifyText: function(element) { - if(typeof Builder == 'undefined') - throw("Effect.tagifyText requires including script.aculo.us' builder.js library"); - var tagifyStyle = 'position:relative'; - if(Prototype.Browser.IE) tagifyStyle += ';zoom:1'; + if (Prototype.Browser.IE) tagifyStyle += ';zoom:1'; element = $(element); $A(element.childNodes).each( function(child) { - if(child.nodeType==3) { + if (child.nodeType==3) { child.nodeValue.toArray().each( function(character) { element.insertBefore( - Builder.node('span',{style: tagifyStyle}, + new Element('span', {style: tagifyStyle}).update( character == ' ' ? String.fromCharCode(160) : character), child); }); @@ -98,8 +130,8 @@ var Effect = { }, multiple: function(element, effect) { var elements; - if(((typeof element == 'object') || - (typeof element == 'function')) && + if (((typeof element == 'object') || + Object.isFunction(element)) && (element.length)) elements = element; else @@ -108,7 +140,7 @@ var Effect = { var options = Object.extend({ speed: 0.1, delay: 0.0 - }, arguments[2] || {}); + }, arguments[2] || { }); var masterDelay = options.delay; $A(elements).each( function(element, index) { @@ -125,51 +157,17 @@ var Effect = { effect = (effect || 'appear').toLowerCase(); var options = Object.extend({ queue: { position:'end', scope:(element.id || 'global'), limit: 1 } - }, arguments[2] || {}); + }, arguments[2] || { }); Effect[element.visible() ? Effect.PAIRS[effect][1] : Effect.PAIRS[effect][0]](element, options); } }; -var Effect2 = Effect; // deprecated - -/* ------------- transitions ------------- */ - -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) { - var pos = ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random()/4; - return (pos > 1 ? 1 : pos); - }, - 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; - } -}; +Effect.DefaultOptions.transition = Effect.Transitions.sinoidal; /* ------------- core effects ------------- */ -Effect.ScopedQueue = Class.create(); -Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), { +Effect.ScopedQueue = Class.create(Enumerable, { initialize: function() { this.effects = []; this.interval = null; @@ -180,7 +178,7 @@ Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), { add: function(effect) { var timestamp = new Date().getTime(); - var position = (typeof effect.options.queue == 'string') ? + var position = Object.isString(effect.options.queue) ? effect.options.queue : effect.options.queue.position; switch(position) { @@ -203,15 +201,15 @@ Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), { effect.startOn += timestamp; effect.finishOn += timestamp; - if(!effect.options.queue.limit || (this.effects.length < effect.options.queue.limit)) + if (!effect.options.queue.limit || (this.effects.length < effect.options.queue.limit)) this.effects.push(effect); - if(!this.interval) + if (!this.interval) this.interval = setInterval(this.loop.bind(this), 15); }, remove: function(effect) { this.effects = this.effects.reject(function(e) { return e==effect }); - if(this.effects.length == 0) { + if (this.effects.length == 0) { clearInterval(this.interval); this.interval = null; } @@ -226,29 +224,15 @@ Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), { Effect.Queues = { instances: $H(), get: function(queueName) { - if(typeof queueName != 'string') return queueName; + if (!Object.isString(queueName)) return queueName; - if(!this.instances[queueName]) - this.instances[queueName] = new Effect.ScopedQueue(); - - return this.instances[queueName]; + return this.instances.get(queueName) || + this.instances.set(queueName, new Effect.ScopedQueue()); } -} +}; Effect.Queue = Effect.Queues.get('global'); -Effect.DefaultOptions = { - transition: Effect.Transitions.sinoidal, - duration: 1.0, // seconds - fps: 100, // 100= assume 66fps max. - sync: false, // true for combining - from: 0.0, - to: 1.0, - delay: 0.0, - queue: 'parallel' -} - -Effect.Base = function() {}; -Effect.Base.prototype = { +Effect.Base = Class.create({ position: null, start: function(options) { function codeForEvent(options,eventName){ @@ -257,8 +241,8 @@ Effect.Base.prototype = { (options[eventName] ? 'this.options.'+eventName+'(this);' : '') ); } - if(options.transition === false) options.transition = Effect.Transitions.linear; - this.options = Object.extend(Object.extend({},Effect.DefaultOptions), options || {}); + if (options && options.transition === false) options.transition = Effect.Transitions.linear; + this.options = Object.extend(Object.extend({ },Effect.DefaultOptions), options || { }); this.currentFrame = 0; this.state = 'idle'; this.startOn = this.options.delay*1000; @@ -268,61 +252,60 @@ Effect.Base.prototype = { this.totalFrames = this.options.fps*this.options.duration; eval('this.render = function(pos){ '+ - 'if(this.state=="idle"){this.state="running";'+ - codeForEvent(options,'beforeSetup')+ + 'if (this.state=="idle"){this.state="running";'+ + codeForEvent(this.options,'beforeSetup')+ (this.setup ? 'this.setup();':'')+ - codeForEvent(options,'afterSetup')+ - '};if(this.state=="running"){'+ + codeForEvent(this.options,'afterSetup')+ + '};if (this.state=="running"){'+ 'pos=this.options.transition(pos)*'+this.fromToDelta+'+'+this.options.from+';'+ 'this.position=pos;'+ - codeForEvent(options,'beforeUpdate')+ + codeForEvent(this.options,'beforeUpdate')+ (this.update ? 'this.update(pos);':'')+ - codeForEvent(options,'afterUpdate')+ + codeForEvent(this.options,'afterUpdate')+ '}}'); this.event('beforeStart'); - if(!this.options.sync) - Effect.Queues.get(typeof this.options.queue == 'string' ? + if (!this.options.sync) + Effect.Queues.get(Object.isString(this.options.queue) ? 'global' : this.options.queue.scope).add(this); }, loop: function(timePos) { - if(timePos >= this.startOn) { - if(timePos >= this.finishOn) { + if (timePos >= this.startOn) { + if (timePos >= this.finishOn) { this.render(1.0); this.cancel(); this.event('beforeFinish'); - if(this.finish) this.finish(); + if (this.finish) this.finish(); this.event('afterFinish'); return; } var pos = (timePos - this.startOn) / this.totalTime, - frame = Math.round(pos * this.totalFrames); - if(frame > this.currentFrame) { + frame = (pos * this.totalFrames).round(); + if (frame > this.currentFrame) { this.render(pos); this.currentFrame = frame; } } }, cancel: function() { - if(!this.options.sync) - Effect.Queues.get(typeof this.options.queue == 'string' ? + if (!this.options.sync) + Effect.Queues.get(Object.isString(this.options.queue) ? 'global' : this.options.queue.scope).remove(this); this.state = 'finished'; }, event: function(eventName) { - if(this.options[eventName + 'Internal']) this.options[eventName + 'Internal'](this); - if(this.options[eventName]) this.options[eventName](this); + if (this.options[eventName + 'Internal']) this.options[eventName + 'Internal'](this); + if (this.options[eventName]) this.options[eventName](this); }, inspect: function() { var data = $H(); for(property in this) - if(typeof this[property] != 'function') data[property] = this[property]; + if (!Object.isFunction(this[property])) data.set(property, this[property]); return '#'; } -} +}); -Effect.Parallel = Class.create(); -Object.extend(Object.extend(Effect.Parallel.prototype, Effect.Base.prototype), { +Effect.Parallel = Class.create(Effect.Base, { initialize: function(effects) { this.effects = effects || []; this.start(arguments[1]); @@ -335,35 +318,45 @@ Object.extend(Object.extend(Effect.Parallel.prototype, Effect.Base.prototype), { effect.render(1.0); effect.cancel(); effect.event('beforeFinish'); - if(effect.finish) effect.finish(position); + if (effect.finish) effect.finish(position); effect.event('afterFinish'); }); } }); -Effect.Event = Class.create(); -Object.extend(Object.extend(Effect.Event.prototype, Effect.Base.prototype), { +Effect.Tween = Class.create(Effect.Base, { + initialize: function(object, from, to) { + object = Object.isString(object) ? $(object) : object; + var args = $A(arguments), method = args.last(), + options = args.length == 5 ? args[3] : null; + this.method = Object.isFunction(method) ? method.bind(object) : + Object.isFunction(object[method]) ? object[method].bind(object) : + function(value) { object[method] = value }; + this.start(Object.extend({ from: from, to: to }, options || { })); + }, + update: function(position) { + this.method(position); + } +}); + +Effect.Event = Class.create(Effect.Base, { initialize: function() { - var options = Object.extend({ - duration: 0 - }, arguments[0] || {}); - this.start(options); + this.start(Object.extend({ duration: 0 }, arguments[0] || { })); }, update: Prototype.emptyFunction }); -Effect.Opacity = Class.create(); -Object.extend(Object.extend(Effect.Opacity.prototype, Effect.Base.prototype), { +Effect.Opacity = Class.create(Effect.Base, { initialize: function(element) { this.element = $(element); - if(!this.element) throw(Effect._elementDoesNotExistError); + if (!this.element) throw(Effect._elementDoesNotExistError); // make this work on IE on elements without 'layout' - if(Prototype.Browser.IE && (!this.element.currentStyle.hasLayout)) + if (Prototype.Browser.IE && (!this.element.currentStyle.hasLayout)) this.element.setStyle({zoom: 1}); var options = Object.extend({ from: this.element.getOpacity() || 0.0, to: 1.0 - }, arguments[1] || {}); + }, arguments[1] || { }); this.start(options); }, update: function(position) { @@ -371,36 +364,30 @@ Object.extend(Object.extend(Effect.Opacity.prototype, Effect.Base.prototype), { } }); -Effect.Move = Class.create(); -Object.extend(Object.extend(Effect.Move.prototype, Effect.Base.prototype), { +Effect.Move = Class.create(Effect.Base, { initialize: function(element) { this.element = $(element); - if(!this.element) throw(Effect._elementDoesNotExistError); + if (!this.element) throw(Effect._elementDoesNotExistError); var options = Object.extend({ x: 0, y: 0, mode: 'relative' - }, arguments[1] || {}); + }, arguments[1] || { }); this.start(options); }, 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) 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 + if (this.options.mode == 'absolute') { this.options.x = this.options.x - this.originalLeft; this.options.y = this.options.y - this.originalTop; } }, update: function(position) { this.element.setStyle({ - left: Math.round(this.options.x * position + this.originalLeft) + 'px', - top: Math.round(this.options.y * position + this.originalTop) + 'px' + left: (this.options.x * position + this.originalLeft).round() + 'px', + top: (this.options.y * position + this.originalTop).round() + 'px' }); } }); @@ -408,30 +395,29 @@ Object.extend(Object.extend(Effect.Move.prototype, Effect.Base.prototype), { // for backwards compatibility Effect.MoveBy = function(element, toTop, toLeft) { return new Effect.Move(element, - Object.extend({ x: toLeft, y: toTop }, arguments[3] || {})); + Object.extend({ x: toLeft, y: toTop }, arguments[3] || { })); }; -Effect.Scale = Class.create(); -Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), { +Effect.Scale = Class.create(Effect.Base, { initialize: function(element, percent) { this.element = $(element); - if(!this.element) throw(Effect._elementDoesNotExistError); + if (!this.element) throw(Effect._elementDoesNotExistError); var options = Object.extend({ scaleX: true, scaleY: true, scaleContent: true, scaleFromCenter: false, - scaleMode: 'box', // 'box' or 'contents' or {} with provided values + scaleMode: 'box', // 'box' or 'contents' or { } with provided values scaleFrom: 100.0, scaleTo: percent - }, arguments[2] || {}); + }, arguments[2] || { }); this.start(options); }, setup: function() { this.restoreAfterFinish = this.options.restoreAfterFinish || false; this.elementPositioning = this.element.getStyle('position'); - this.originalStyle = {}; + this.originalStyle = { }; ['top','left','width','height','fontSize'].each( function(k) { this.originalStyle[k] = this.element.style[k]; }.bind(this)); @@ -441,7 +427,7 @@ Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), { var fontSize = this.element.getStyle('font-size') || '100%'; ['em','px','%','pt'].each( function(fontSizeType) { - if(fontSize.indexOf(fontSizeType)>0) { + if (fontSize.indexOf(fontSizeType)>0) { this.fontSize = parseFloat(fontSize); this.fontSizeType = fontSizeType; } @@ -450,62 +436,61 @@ Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), { this.factor = (this.options.scaleTo - this.options.scaleFrom)/100; this.dims = null; - if(this.options.scaleMode=='box') + if (this.options.scaleMode=='box') this.dims = [this.element.offsetHeight, this.element.offsetWidth]; - if(/^content/.test(this.options.scaleMode)) + if (/^content/.test(this.options.scaleMode)) this.dims = [this.element.scrollHeight, this.element.scrollWidth]; - if(!this.dims) + 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) + if (this.options.scaleContent && this.fontSize) this.element.setStyle({fontSize: this.fontSize * currentScale + this.fontSizeType }); this.setDimensions(this.dims[0] * currentScale, this.dims[1] * currentScale); }, finish: function(position) { - if(this.restoreAfterFinish) this.element.setStyle(this.originalStyle); + if (this.restoreAfterFinish) this.element.setStyle(this.originalStyle); }, setDimensions: function(height, width) { - var d = {}; - if(this.options.scaleX) d.width = Math.round(width) + 'px'; - if(this.options.scaleY) d.height = Math.round(height) + 'px'; - if(this.options.scaleFromCenter) { + var d = { }; + if (this.options.scaleX) d.width = width.round() + 'px'; + if (this.options.scaleY) d.height = height.round() + 'px'; + 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'; + 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'; + if (this.options.scaleY) d.top = -topd + 'px'; + if (this.options.scaleX) d.left = -leftd + 'px'; } } this.element.setStyle(d); } }); -Effect.Highlight = Class.create(); -Object.extend(Object.extend(Effect.Highlight.prototype, Effect.Base.prototype), { +Effect.Highlight = Class.create(Effect.Base, { initialize: function(element) { this.element = $(element); - if(!this.element) throw(Effect._elementDoesNotExistError); - var options = Object.extend({ startcolor: '#ffff99' }, arguments[1] || {}); + if (!this.element) throw(Effect._elementDoesNotExistError); + var options = Object.extend({ startcolor: '#ffff99' }, arguments[1] || { }); this.start(options); }, setup: function() { // Prevent executing on elements not in the layout flow - if(this.element.getStyle('display')=='none') { this.cancel(); return; } + if (this.element.getStyle('display')=='none') { this.cancel(); return; } // Disable background image during the effect - this.oldStyle = {}; + this.oldStyle = { }; if (!this.options.keepBackgroundImage) { this.oldStyle.backgroundImage = this.element.getStyle('background-image'); this.element.setStyle({backgroundImage: 'none'}); } - if(!this.options.endcolor) + if (!this.options.endcolor) this.options.endcolor = this.element.getStyle('background-color').parseColor('#ffffff'); - if(!this.options.restorecolor) + if (!this.options.restorecolor) this.options.restorecolor = this.element.getStyle('background-color'); // 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)); @@ -513,7 +498,7 @@ Object.extend(Object.extend(Effect.Highlight.prototype, Effect.Base.prototype), }, update: function(position) { this.element.setStyle({backgroundColor: $R(0,2).inject('#',function(m,v,i){ - return m+(Math.round(this._base[i]+(this._delta[i]*position)).toColorPart()); }.bind(this)) }); + return m+((this._base[i]+(this._delta[i]*position)).round().toColorPart()); }.bind(this)) }); }, finish: function() { this.element.setStyle(Object.extend(this.oldStyle, { @@ -522,30 +507,21 @@ Object.extend(Object.extend(Effect.Highlight.prototype, Effect.Base.prototype), } }); -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)); - } -}); +Effect.ScrollTo = function(element) { + var options = arguments[1] || { }, + scrollOffsets = document.viewport.getScrollOffsets(), + elementOffsets = $(element).cumulativeOffset(), + max = (window.height || document.body.scrollHeight) - document.viewport.getHeight(); + + if (options.offset) elementOffsets[1] += options.offset; + + return new Effect.Tween(null, + scrollOffsets.top, + elementOffsets[1] > max ? max : elementOffsets[1], + options, + function(p){ scrollTo(scrollOffsets.left, p.round()) } + ); +}; /* ------------- combination effects ------------- */ @@ -553,14 +529,15 @@ Effect.Fade = function(element) { element = $(element); var oldOpacity = element.getInlineOpacity(); var options = Object.extend({ - from: element.getOpacity() || 1.0, - to: 0.0, - afterFinishInternal: function(effect) { - if(effect.options.to!=0) return; - effect.element.hide().setStyle({opacity: oldOpacity}); - }}, arguments[1] || {}); + from: element.getOpacity() || 1.0, + to: 0.0, + afterFinishInternal: function(effect) { + if (effect.options.to!=0) return; + effect.element.hide().setStyle({opacity: oldOpacity}); + } + }, arguments[1] || { }); return new Effect.Opacity(element,options); -} +}; Effect.Appear = function(element) { element = $(element); @@ -573,9 +550,9 @@ Effect.Appear = function(element) { }, beforeSetup: function(effect) { effect.element.setOpacity(effect.options.from).show(); - }}, arguments[1] || {}); + }}, arguments[1] || { }); return new Effect.Opacity(element,options); -} +}; Effect.Puff = function(element) { element = $(element); @@ -597,9 +574,9 @@ Effect.Puff = function(element) { }, afterFinishInternal: function(effect) { effect.effects[0].element.hide().setStyle(oldStyle); } - }, arguments[1] || {}) + }, arguments[1] || { }) ); -} +}; Effect.BlindUp = function(element) { element = $(element); @@ -611,9 +588,9 @@ Effect.BlindUp = function(element) { afterFinishInternal: function(effect) { effect.element.hide().undoClipping(); } - }, arguments[1] || {}) + }, arguments[1] || { }) ); -} +}; Effect.BlindDown = function(element) { element = $(element); @@ -630,8 +607,8 @@ Effect.BlindDown = function(element) { afterFinishInternal: function(effect) { effect.element.undoClipping(); } - }, arguments[1] || {})); -} + }, arguments[1] || { })); +}; Effect.SwitchOff = function(element) { element = $(element); @@ -652,8 +629,8 @@ Effect.SwitchOff = function(element) { } }) } - }, arguments[1] || {})); -} + }, arguments[1] || { })); +}; Effect.DropOut = function(element) { element = $(element); @@ -672,29 +649,35 @@ Effect.DropOut = function(element) { afterFinishInternal: function(effect) { effect.effects[0].element.hide().undoPositioned().setStyle(oldStyle); } - }, arguments[1] || {})); -} + }, arguments[1] || { })); +}; Effect.Shake = function(element) { element = $(element); + var options = Object.extend({ + distance: 20, + duration: 0.5 + }, arguments[1] || {}); + var distance = parseFloat(options.distance); + var split = parseFloat(options.duration) / 10.0; var oldStyle = { top: element.getStyle('top'), left: element.getStyle('left') }; - return new Effect.Move(element, - { x: 20, y: 0, duration: 0.05, afterFinishInternal: function(effect) { + return new Effect.Move(element, + { x: distance, y: 0, duration: split, afterFinishInternal: function(effect) { new Effect.Move(effect.element, - { x: -40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { + { x: -distance*2, y: 0, duration: split*2, afterFinishInternal: function(effect) { new Effect.Move(effect.element, - { x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { + { x: distance*2, y: 0, duration: split*2, afterFinishInternal: function(effect) { new Effect.Move(effect.element, - { x: -40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { + { x: -distance*2, y: 0, duration: split*2, afterFinishInternal: function(effect) { new Effect.Move(effect.element, - { x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { + { x: distance*2, y: 0, duration: split*2, afterFinishInternal: function(effect) { new Effect.Move(effect.element, - { x: -20, y: 0, duration: 0.05, afterFinishInternal: function(effect) { + { x: -distance, y: 0, duration: split, afterFinishInternal: function(effect) { effect.element.undoPositioned().setStyle(oldStyle); }}) }}) }}) }}) }}) }}); -} +}; Effect.SlideDown = function(element) { element = $(element).cleanWhitespace(); @@ -710,7 +693,7 @@ Effect.SlideDown = function(element) { afterSetup: function(effect) { effect.element.makePositioned(); effect.element.down().makePositioned(); - if(window.opera) effect.element.setStyle({top: ''}); + if (window.opera) effect.element.setStyle({top: ''}); effect.element.makeClipping().setStyle({height: '0px'}).show(); }, afterUpdateInternal: function(effect) { @@ -720,23 +703,25 @@ Effect.SlideDown = function(element) { afterFinishInternal: function(effect) { effect.element.undoClipping().undoPositioned(); effect.element.down().undoPositioned().setStyle({bottom: oldInnerBottom}); } - }, arguments[1] || {}) + }, arguments[1] || { }) ); -} +}; Effect.SlideUp = function(element) { element = $(element).cleanWhitespace(); var oldInnerBottom = element.down().getStyle('bottom'); + var elementDimensions = element.getDimensions(); return new Effect.Scale(element, window.opera ? 0 : 1, Object.extend({ scaleContent: false, scaleX: false, scaleMode: 'box', scaleFrom: 100, + scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width}, restoreAfterFinish: true, - beforeStartInternal: function(effect) { + afterSetup: function(effect) { effect.element.makePositioned(); effect.element.down().makePositioned(); - if(window.opera) effect.element.setStyle({top: ''}); + if (window.opera) effect.element.setStyle({top: ''}); effect.element.makeClipping().show(); }, afterUpdateInternal: function(effect) { @@ -744,12 +729,12 @@ Effect.SlideUp = function(element) { (effect.dims[0] - effect.element.clientHeight) + 'px' }); }, afterFinishInternal: function(effect) { - effect.element.hide().undoClipping().undoPositioned().setStyle({bottom: oldInnerBottom}); - effect.element.down().undoPositioned(); + effect.element.hide().undoClipping().undoPositioned(); + effect.element.down().undoPositioned().setStyle({bottom: oldInnerBottom}); } - }, arguments[1] || {}) + }, arguments[1] || { }) ); -} +}; // Bug in opera makes the TD containing this element expand for a instance after finish Effect.Squish = function(element) { @@ -762,7 +747,7 @@ Effect.Squish = function(element) { effect.element.hide().undoClipping(); } }); -} +}; Effect.Grow = function(element) { element = $(element); @@ -771,7 +756,7 @@ Effect.Grow = function(element) { moveTransition: Effect.Transitions.sinoidal, scaleTransition: Effect.Transitions.sinoidal, opacityTransition: Effect.Transitions.full - }, arguments[1] || {}); + }, arguments[1] || { }); var oldStyle = { top: element.style.top, left: element.style.left, @@ -836,7 +821,7 @@ Effect.Grow = function(element) { ) } }); -} +}; Effect.Shrink = function(element) { element = $(element); @@ -845,7 +830,7 @@ Effect.Shrink = function(element) { moveTransition: Effect.Transitions.sinoidal, scaleTransition: Effect.Transitions.sinoidal, opacityTransition: Effect.Transitions.none - }, arguments[1] || {}); + }, arguments[1] || { }); var oldStyle = { top: element.style.top, left: element.style.left, @@ -890,11 +875,11 @@ Effect.Shrink = function(element) { effect.effects[0].element.hide().undoClipping().undoPositioned().setStyle(oldStyle); } }, options) ); -} +}; Effect.Pulsate = function(element) { element = $(element); - var options = arguments[1] || {}; + var options = arguments[1] || { }; var oldOpacity = element.getInlineOpacity(); var transition = options.transition || Effect.Transitions.sinoidal; var reverser = function(pos){ return transition(1-Effect.Transitions.pulse(pos, options.pulses)) }; @@ -903,7 +888,7 @@ Effect.Pulsate = function(element) { Object.extend(Object.extend({ duration: 2.0, from: 0, afterFinishInternal: function(effect) { effect.element.setStyle({opacity: oldOpacity}); } }, options), {transition: reverser})); -} +}; Effect.Fold = function(element) { element = $(element); @@ -923,46 +908,43 @@ Effect.Fold = function(element) { afterFinishInternal: function(effect) { effect.element.hide().undoClipping().setStyle(oldStyle); } }); - }}, arguments[1] || {})); + }}, arguments[1] || { })); }; -Effect.Morph = Class.create(); -Object.extend(Object.extend(Effect.Morph.prototype, Effect.Base.prototype), { +Effect.Morph = Class.create(Effect.Base, { initialize: function(element) { this.element = $(element); - if(!this.element) throw(Effect._elementDoesNotExistError); + if (!this.element) throw(Effect._elementDoesNotExistError); var options = Object.extend({ - style: {} - }, arguments[1] || {}); - if (typeof options.style == 'string') { - if(options.style.indexOf(':') == -1) { - var cssText = '', selector = '.' + options.style; - $A(document.styleSheets).reverse().each(function(styleSheet) { - if (styleSheet.cssRules) cssRules = styleSheet.cssRules; - else if (styleSheet.rules) cssRules = styleSheet.rules; - $A(cssRules).reverse().each(function(rule) { - if (selector == rule.selectorText) { - cssText = rule.style.cssText; - throw $break; - } - }); - if (cssText) throw $break; + style: { } + }, arguments[1] || { }); + + if (!Object.isString(options.style)) this.style = $H(options.style); + else { + if (options.style.include(':')) + this.style = options.style.parseStyle(); + else { + this.element.addClassName(options.style); + this.style = $H(this.element.getStyles()); + this.element.removeClassName(options.style); + var css = this.element.getStyles(); + this.style = this.style.reject(function(style) { + return style.value == css[style.key]; }); - this.style = cssText.parseStyle(); - options.afterFinishInternal = function(effect){ + options.afterFinishInternal = function(effect) { effect.element.addClassName(effect.options.style); effect.transforms.each(function(transform) { - if(transform.style != 'opacity') - effect.element.style[transform.style] = ''; + effect.element.style[transform.style] = ''; }); } - } else this.style = options.style.parseStyle(); - } else this.style = $H(options.style) + } + } this.start(options); }, + setup: function(){ function parseColor(color){ - if(!color || ['rgba(0, 0, 0, 0)','transparent'].include(color)) color = '#ffffff'; + 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 ) @@ -971,14 +953,14 @@ Object.extend(Object.extend(Effect.Morph.prototype, Effect.Base.prototype), { this.transforms = this.style.map(function(pair){ var property = pair[0], value = pair[1], unit = null; - if(value.parseColor('#zzzzzz') != '#zzzzzz') { + if (value.parseColor('#zzzzzz') != '#zzzzzz') { value = value.parseColor(); unit = 'color'; - } else if(property == 'opacity') { + } else if (property == 'opacity') { value = parseFloat(value); - if(Prototype.Browser.IE && (!this.element.currentStyle.hasLayout)) + if (Prototype.Browser.IE && (!this.element.currentStyle.hasLayout)) this.element.setStyle({zoom: 1}); - } else if(Element.CSS_LENGTH.test(value)) { + } else if (Element.CSS_LENGTH.test(value)) { var components = value.match(/^([\+\-]?[0-9\.]+)(.*)$/); value = parseFloat(components[1]); unit = (components.length == 3) ? components[2] : null; @@ -1002,7 +984,7 @@ Object.extend(Object.extend(Effect.Morph.prototype, Effect.Base.prototype), { }); }, update: function(position) { - var style = {}, transform, i = this.transforms.length; + var style = { }, transform, i = this.transforms.length; while(i--) style[(transform = this.transforms[i]).style] = transform.unit=='color' ? '#'+ @@ -1012,24 +994,25 @@ Object.extend(Object.extend(Effect.Morph.prototype, Effect.Base.prototype), { (transform.targetValue[1]-transform.originalValue[1])*position)).toColorPart() + (Math.round(transform.originalValue[2]+ (transform.targetValue[2]-transform.originalValue[2])*position)).toColorPart() : - transform.originalValue + Math.round( - ((transform.targetValue - transform.originalValue) * position) * 1000)/1000 + transform.unit; + (transform.originalValue + + (transform.targetValue - transform.originalValue) * position).toFixed(3) + + (transform.unit === null ? '' : transform.unit); this.element.setStyle(style, true); } }); -Effect.Transform = Class.create(); -Object.extend(Effect.Transform.prototype, { +Effect.Transform = Class.create({ initialize: function(tracks){ this.tracks = []; - this.options = arguments[1] || {}; + this.options = arguments[1] || { }; this.addTracks(tracks); }, addTracks: function(tracks){ tracks.each(function(track){ - var data = $H(track).values().first(); + track = $H(track); + var data = track.values().first(); this.tracks.push($H({ - ids: $H(track).keys().first(), + ids: track.keys().first(), effect: Effect.Morph, options: { style: data } })); @@ -1039,8 +1022,9 @@ Object.extend(Effect.Transform.prototype, { 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)) }); + var ids = track.get('ids'), effect = track.get('effect'), options = track.get('options'); + var elements = [$(ids) || $$(ids)].flatten(); + return elements.map(function(e){ return new effect(e, Object.extend({ sync:true }, options)) }); }).flatten(), this.options ); @@ -1060,35 +1044,79 @@ Element.CSS_PROPERTIES = $w( Element.CSS_LENGTH = /^(([\+\-]?[0-9\.]+)(em|ex|px|in|cm|mm|pt|pc|\%))|0$/; +String.__parseStyleElement = document.createElement('div'); String.prototype.parseStyle = function(){ - var element = document.createElement('div'); - element.innerHTML = '
'; - var style = element.childNodes[0].style, styleRules = $H(); + var style, styleRules = $H(); + if (Prototype.Browser.WebKit) + style = new Element('div',{style:this}).style; + else { + String.__parseStyleElement.innerHTML = '
'; + style = String.__parseStyleElement.childNodes[0].style; + } Element.CSS_PROPERTIES.each(function(property){ - if(style[property]) styleRules[property] = style[property]; + if (style[property]) styleRules.set(property, style[property]); }); - if(Prototype.Browser.IE && this.indexOf('opacity') > -1) { - styleRules.opacity = this.match(/opacity:\s*((?:0|1)?(?:\.\d*)?)/)[1]; - } + + if (Prototype.Browser.IE && this.include('opacity')) + styleRules.set('opacity', this.match(/opacity:\s*((?:0|1)?(?:\.\d*)?)/)[1]); + return styleRules; }; -Element.morph = function(element, style) { - new Effect.Morph(element, Object.extend({ style: style }, arguments[2] || {})); - return element; +if (document.defaultView && document.defaultView.getComputedStyle) { + Element.getStyles = function(element) { + var css = document.defaultView.getComputedStyle($(element), null); + return Element.CSS_PROPERTIES.inject({ }, function(styles, property) { + styles[property] = css[property]; + return styles; + }); + }; +} else { + Element.getStyles = function(element) { + element = $(element); + var css = element.currentStyle, styles; + styles = Element.CSS_PROPERTIES.inject({ }, function(hash, property) { + hash.set(property, css[property]); + return hash; + }); + if (!styles.opacity) styles.set('opacity', element.getOpacity()); + return styles; + }; +}; + +Effect.Methods = { + morph: function(element, style) { + element = $(element); + new Effect.Morph(element, Object.extend({ style: style }, arguments[2] || { })); + return element; + }, + visualEffect: function(element, effect, options) { + element = $(element) + var s = effect.dasherize().camelize(), klass = s.charAt(0).toUpperCase() + s.substring(1); + new Effect[klass](element, options); + return element; + }, + highlight: function(element, options) { + element = $(element); + new Effect.Highlight(element, options); + return element; + } }; -['getInlineOpacity','forceRerendering','setContentZoom', - 'collectTextNodes','collectTextNodesIgnoreClass','morph'].each( - function(f) { Element.Methods[f] = Element[f]; } +$w('fade appear grow shrink fold blindUp blindDown slideUp slideDown '+ + 'pulsate shake puff squish switchOff dropOut').each( + function(effect) { + Effect.Methods[effect] = function(element, options){ + element = $(element); + Effect[effect.charAt(0).toUpperCase() + effect.substring(1)](element, options); + return element; + } + } ); -Element.Methods.visualEffect = function(element, effect, options) { - s = effect.dasherize().camelize(); - effect_class = s.charAt(0).toUpperCase() + s.substring(1); - new Effect[effect_class](element, options); - return $(element); -}; +$w('getInlineOpacity forceRerendering setContentZoom collectTextNodes collectTextNodesIgnoreClass getStyles').each( + function(f) { Effect.Methods[f] = Element[f]; } +); -Element.addMethods(); \ No newline at end of file +Element.addMethods(Effect.Methods);