@@ -6,25 +6,25 @@ var Effect = { this.globalQueue = new Effect.Queue(); this.queues.push(this.globalQueue); this.activeEffectCount = 0; - + this.setHeartbeat(heartbeat || new Effect.Heartbeat()); document.observe('effect:heartbeat', this.renderQueues.bind(this)); - + document.observe('effect:queued', function(){ Effect.activeEffectCount++; if (Effect.activeEffectCount == 1) Effect.heartbeat.start(); }); - + document.observe('effect:dequeued', function(){ Effect.activeEffectCount--; if (Effect.activeEffectCount == 0) Effect.heartbeat.stop(); }); }, - + setHeartbeat: function(heartbeat) { - this.heartbeat = heartbeat; + this.heartbeat = heartbeat; }, - + renderQueues: function() { this.queues.invoke('render', this.heartbeat.getTimestamp()); } effects/src/base.js @@ -1,17 +1,17 @@ Effect.Attribute = Class.create(Effect.Base, { initialize: function($super, object, from, to, options, method) { object = Object.isString(object) ? $(object) : object; - + this.method = Object.isFunction(method) ? method.bind(object) : Object.isFunction(object[method]) ? object[method].bind(object) : function(value) { object[method] = value }; - + this.to = to; this.from = from; - + return $super(options); }, - + update: function(position) { this.method(this.from.tween(this.to, position)); } effects/src/effects/attribute.js @@ -2,21 +2,21 @@ Effect.Base = Class.create({ initialize: function(options) { Effect.initialize(); this.updateWithoutWrappers = this.update; - - if(options.queue && !Effect.queues.include(options.queue)) - Effect.queues.push(options.queue); - + + if (options.queue && !Effect.queues.include(options.queue)) + Effect.queues.push(options.queue); + this.setOptions(options); this.state = 'idle'; - + $w('after before').each(function(method) { this[method] = function(method) { method(this); return this; } - }.bind(this)); + }, this); }, - + setOptions: function(options) { if (!this.options) this.options = Object.extend({ transition: options && options.tween ? options.tween : 'sinusoidal', @@ -24,7 +24,7 @@ Effect.Base = Class.create({ position: 'parallel', fps: 600 }, options); - + if (this.options.beforeUpdate || this.options.afterUpdate) { this.update = this.updateWithoutWrappers.wrap( function(proceed,position){ if (this.options.beforeUpdate) this.options.beforeUpdate(this); @@ -34,7 +34,7 @@ Effect.Base = Class.create({ } this.options.transition = Object.propertize(this.options.transition, Effect.Transitions); }, - + play: function(options) { this.setOptions(options); this.frameCount = 0; @@ -43,7 +43,7 @@ Effect.Base = Class.create({ this.maxFrames = this.options.fps * this.duration / 1000; return this; }, - + render: function(timestamp) { if (timestamp >= this.startsAt) { if (this.state == 'idle') { @@ -67,7 +67,7 @@ Effect.Base = Class.create({ } return this; }, - + inspect: function() { return '#<Effect:' + [this.state, this.startsAt, this.endsAt].inspect() + '>'; } @@ -79,17 +79,17 @@ Effect.Element = Class.create(Effect.Base, { this.operators = []; return $super(options); }, - + animate: function() { var args = $A(arguments), operator = args.shift().capitalize(); this.operators.push(new Effect.Operators[operator](args[0], args[1] || {})); }, - + play: function($super, element, options) { if (element) this.element = $(element); return $super(options); }, - + update: function(position) { this.operators.invoke('render', position); } effects/src/effects/base.js @@ -8,12 +8,12 @@ Effect.Morph = Class.create(Effect.Element, { propertyTransitions: this.options.propertyTransitions || { } }); }, - + teardown: function() { if (this.options.change) this.teardownWrappers(); }, - + setupWrappers: function() { var elementFloat = this.element.getStyle("float"); this.transitionElement = new Element('div').setStyle({ position: "relative", overflow: "hidden", 'float': elementFloat }); @@ -24,9 +24,9 @@ Effect.Morph = Class.create(Effect.Element, { this.transitionElement.insert(this.sourceElementWrapper).insert(this.destinationElementWrapper); - var sourceHeight = this.sourceElementWrapper.getHeight(), + var sourceHeight = this.sourceElementWrapper.getHeight(), sourceWidth = this.sourceElementWrapper.getWidth(); - + this.options.change(); var destinationHeight = this.destinationElementWrapper.getHeight(), @@ -35,7 +35,7 @@ Effect.Morph = Class.create(Effect.Element, { this.outerWrapper = new Element("div"); this.transitionElement.insert({ before: this.outerWrapper }); this.outerWrapper.setStyle({ - overflow: "hidden", height: sourceHeight + "px", width: sourceWidth + "px" + overflow: "hidden", height: sourceHeight + "px", width: sourceWidth + "px" }).appendChild(this.transitionElement); var maxHeight = Math.max(destinationHeight, sourceHeight), maxWidth = Math.max(destinationWidth, sourceWidth); @@ -45,17 +45,17 @@ Effect.Morph = Class.create(Effect.Element, { this.destinationElementWrapper.setStyle({ position: "absolute", height: maxHeight + "px", width: maxWidth + "px", top: 0, left: 0, opacity: 0, zIndex: 2000 }); this.outerWrapper.insert({ before: this.transitionElement }).remove(); - + this.animate('style', this.transitionElement, { style: 'height:' + destinationHeight + 'px; width:' + destinationWidth + 'px' }); this.animate('style', this.destinationElementWrapper, { style: 'opacity: 1.0' }); }, - + teardownWrappers: function() { var destinationElement = this.destinationElementWrapper.down(); - + if (destinationElement) this.transitionElement.insert({ before: destinationElement }); - + this.transitionElement.remove(); } }); \ No newline at end of file effects/src/effects/morph.js @@ -10,7 +10,7 @@ var CSS = { 'outlineWidth paddingBottom paddingLeft paddingRight paddingTop ' + 'right textIndent top width wordSpacing zIndex'), LENGTH: /^(([\+\-]?[0-9\.]+)(em|ex|px|in|cm|mm|pt|pc|\%))|0$/, - + __parseStyleElement: document.createElement('div'), parseStyle: function(styleString) { CSS.__parseStyleElement.innerHTML = '<div style="' + styleString + '"></div>'; @@ -19,39 +19,39 @@ var CSS = { CSS.NUMERIC_PROPERTIES.each( function(property){ if (style[property]) styleRules[property] = style[property]; }); - + CSS.COLOR_PROPERTIES.each( function(property){ if (style[property]) styleRules[property] = CSS.Color.fromString(style[property]); }); if (Prototype.Browser.IE && styleString.include('opacity')) styleRules.opacity = styleString.match(/opacity:\s*((?:0|1)?(?:\.\d*)?)/)[1]; - + return styleRules; }, - + Color: { normalize: function(color) { if (!color || ['rgba(0, 0, 0, 0)','transparent'].include(color)) color = '#ffffff'; color = CSS.Color.fromString(color); return [0,1,2].map(function(i){ return parseInt(color.slice(i*2+1,i*2+3), 16) }); }, - - fromString: function(color) { + + fromString: function(color) { var value = '#'; - if (color.slice(0,4) == 'rgb(') { - var cols = color.slice(4,color.length-1).split(','); - var i=0; do { value += parseInt(cols[i]).toColorPart() } while (++i<3); - } else { - if (color.slice(0,1) == '#') { - if (color.length==4) for(var i=1;i<4;i++) value += (color.charAt(i) + color.charAt(i)).toLowerCase(); - if (color.length==7) value = color.toLowerCase(); - } - } - return (value.length==7 ? value : (arguments[1] || value)); - } + if (color.slice(0,4) == 'rgb(') { + var cols = color.slice(4,color.length-1).split(','); + var i=0; do { value += parseInt(cols[i]).toColorPart() } while (++i<3); + } else { + if (color.slice(0,1) == '#') { + if (color.length==4) for(var i=1;i<4;i++) value += (color.charAt(i) + color.charAt(i)).toLowerCase(); + if (color.length==7) value = color.toLowerCase(); + } + } + return (value.length==7 ? value : (arguments[1] || value)); + } }, - + ElementMethods: { getStyles: function(element) { var css = document.defaultView.getComputedStyle($(element), null); effects/src/extensions/css.js @@ -2,35 +2,35 @@ Effect.ElementMethods = { effect: function(element, effect, options){ if (Object.isFunction(effect)) effect = new effect(element, options); - else if (Object.isString(effect)) + else if (Object.isString(effect)) effect = new Effect[effect.capitalize()](element, options); effect.play(element, options); return element; }, - + morph: function(element, style, options){ return element.effect('morph', Object.extend(options, {style: style})); }.optionize(), - + appear: function(element, options){ return element.effect('morph', Object.extend({ before: function(){ element.show().setStyle({opacity:0}) }, style: 'opacity:1' }, options)); }, - + fade: function(element, options){ return element.effect(Effect.Morph, Object.extend({ style: 'opacity:0', after: element.hide.bind(element) }, options)); }, - + cloneWithoutIDs: function(element) { element = $(element); var clone = element.cloneNode(true); - clone.id = ""; - clone.getElementsBySelector("*[id]").each(function(e) { e.id = "" }); + clone.id = ''; + $(clone).select('*[id]').each(function(e) { e.id = ''; }); return clone; } }; effects/src/extensions/element.js @@ -4,7 +4,7 @@ Effect.Helpers = { [(rw - (w*(rh/h)))/2, 0, w*(rh/h), rh] : [0, (rh - (h*(rw/w)))/2, rw, h*(rw/w)]; }, - + viewportOverlay: function(){ var viewport = document.viewport.getDimensions(); var offsets = document.viewport.getScrollOffsets(); @@ -14,5 +14,4 @@ Effect.Helpers = { width: viewport.width + 'px', height: viewport.height + 'px' }); } -}; - +}; \ No newline at end of file effects/src/extensions/helpers.js @@ -3,35 +3,36 @@ Effect.Heartbeat = Class.create({ this.options = Object.extend({ framerate: Prototype.Browser.MobileSafari ? 20 : 60 }, options); + this.beat = this.beat.bind(this); }, - + start: function() { if (this.heartbeatInterval) return; this.heartbeatInterval = - setInterval(this.beat.bind(this), 1000/this.options.framerate); + setInterval(this.beat, 1000/this.options.framerate); this.updateTimestamp(); }, - + stop: function() { if (!this.heartbeatInterval) return; clearInterval(this.heartbeatInterval); this.heartbeatInterval = null; this.timestamp = null; }, - + beat: function() { this.updateTimestamp(); document.fire('effect:heartbeat'); }, - + getTimestamp: function() { return this.timestamp || this.generateTimestamp(); }, - + generateTimestamp: function() { return new Date().getTime(); }, - + updateTimestamp: function() { this.timestamp = this.generateTimestamp(); } effects/src/heartbeat.js @@ -7,11 +7,11 @@ Effect.Operators.Base = Class.create({ transition: Prototype.K }, options); }, - + inspect: function() { return "#<Effect.Operators.Base:" + this.lastValue + ">"; }, - + render: function(position) { var value = this.valueAt(this.options.transition(position)); this.applyValue(value); effects/src/operators/base.js @@ -4,9 +4,11 @@ Effect.Operators.Scroll = Class.create(Effect.Operators.Base, { this.start = object.scrollTop; this.end = this.options.scrollTo; }, + valueAt: function(position) { return this.start + ((this.end - this.start)*position); }, + applyValue: function(value){ this.object.scrollTop = value.round(); } effects/src/operators/scroll.js @@ -2,39 +2,39 @@ Effect.Operators.Style = Class.create(Effect.Operators.Base, { initialize: function($super, object, options) { $super(object, options); this.element = $(this.object); - + if (!this.options.propertyTransitions) - this.options.propertyTransitions = { } + this.options.propertyTransitions = { }; else for (property in this.options.propertyTransitions) this.options.propertyTransitions[property] = Object.propertize(this.options.propertyTransitions[property], Effect.Transitions); - + if (!Object.isString(this.options.style)) { this.style = $H(this.options.style); } else { if (this.options.style.include(':')) { this.style = $H(CSS.parseStyle(this.options.style)); - + } 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.tweens = this.style.map(function(pair) { - var property = pair[0].camelize(), target = pair[1], unit = '', tween, + var property = pair[0].camelize(), target = pair[1], unit = '', tween, source = this.element.getStyle(property); if (CSS.COLOR_PROPERTIES.include(property)) { if (source == target) return; source = CSS.Color.normalize(source); - target = CSS.Color.normalize(target); unit = 'color'; + target = CSS.Color.normalize(target); unit = 'color'; tween = function(currentStyle, style, position) { position = (this.options.propertyTransitions[property] || Effect.Transitions.linear)(position); var value = '#' + [0,1,2].map(function(index){ @@ -48,7 +48,7 @@ Effect.Operators.Style = Class.create(Effect.Operators.Base, { target = components[1]; unit = String.interpret((components.length == 3) ? components[2] : null); } - source = parseFloat(source); target = parseFloat(target); + source = parseFloat(source); target = parseFloat(target); if (isNaN(source) || isNaN(target) || source == target) return; tween = function(currentStyle, style, position) { position = (this.options.propertyTransitions[property] || Effect.Transitions.linear)(position); @@ -57,17 +57,17 @@ Effect.Operators.Style = Class.create(Effect.Operators.Base, { }.bind(this); } return tween; - }.bind(this)).compact(); + }, this).compact(); }, - + valueAt: function(position) { var style = { }, currentStyle = this.currentStyle || { }; this.tweens.each( function(tween){ - tween(currentStyle, style, position) + tween(currentStyle, style, position); }); return style; }, - + applyValue: function(value) { this.element.setStyle(value); this.currentStyle = value; effects/src/operators/style.js @@ -2,44 +2,44 @@ Effect.Queue = Class.create({ initialize: function() { this.effects = []; }, - + active: function() { return this.effects.length > 0; }, - + add: function(effect) { this.calculateTiming(effect); this.effects.push(effect); document.fire('effect:queued', this); return this; }, - + remove: function(effect) { this.effects = this.effects.without(effect); delete effect; document.fire('effect:dequeued', this); return this; }, - + removeInactiveEffects: function() { this.effects.select(function(effect) { return effect.state == 'finished'; - }).each(this.remove.bind(this)); + }).each(this.remove, this); }, - + render: function(timestamp) { this.effects.invoke('render', timestamp); this.removeInactiveEffects(); return this; }, - + calculateTiming: function(effect) { - position = effect.options.position || 'parallel'; + position = effect.options.position || 'parallel'; var startsAt = Effect.heartbeat.getTimestamp(); - + if (position == 'end') startsAt = this.effects.without(effect).pluck('endsAt').max() || startsAt; - + effect.startsAt = startsAt + (effect.options.delay || 0) * 1000; effect.endsAt = effects/src/queue.js @@ -1,32 +1,30 @@ -/* -Based on Easing Equations v2.0 -(c) 2003 Robert Penner, all rights reserved. -This work is subject to the terms in http://www.robertpenner.com/easing_terms_of_use.html - -Adapted for Scriptaculous by Ken Snyder (kendsnyder ~at~ gmail ~dot~ com) June 2006 -*/ +// Based on Easing Equations v2.0 +// (c) 2003 Robert Penner, all rights reserved. +// This work is subject to the terms in http://www.robertpenner.com/easing_terms_of_use.html +// +// Adapted for Scriptaculous by Ken Snyder (kendsnyder ~at~ gmail ~dot~ com) June 2006 Object.extend(Effect.Transitions, { elastic: function(pos) { return -1 * Math.pow(4,-8*pos) * Math.sin((pos*6-1)*(2*Math.PI)/2) + 1; }, - + swingFromTo: function(pos) { var s = 1.70158; return ((pos/=0.5) < 1) ? 0.5*(pos*pos*(((s*=(1.525))+1)*pos - s)) : 0.5*((pos-=2)*pos*(((s*=(1.525))+1)*pos + s) + 2); }, - + swingFrom: function(pos) { var s = 1.70158; return pos*pos*((s+1)*pos - s); }, - + swingTo: function(pos) { var s = 1.70158; return (pos-=1)*pos*((s+1)*pos + s) + 1; }, - + bounce: function(pos) { if (pos < (1/2.75)) { return (7.5625*pos*pos); @@ -38,7 +36,7 @@ Object.extend(Effect.Transitions, { return (7.5625*(pos-=(2.625/2.75))*pos + .984375); } }, - + bouncePast: function(pos) { if (pos < (1/2.75)) { return (7.5625*pos*pos); @@ -50,16 +48,16 @@ Object.extend(Effect.Transitions, { return 2 - (7.5625*(pos-=(2.625/2.75))*pos + .984375); } }, - + easeFromTo: function(pos) { if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,4); - return -0.5 * ((pos-=2)*Math.pow(pos,3) - 2); + return -0.5 * ((pos-=2)*Math.pow(pos,3) - 2); }, - + easeFrom: function(pos) { return Math.pow(pos,4); }, - + easeTo: function(pos) { return Math.pow(pos,0.25); } effects/src/transitions/penner.js adea2310c233e48ef7889ff7b121e058c0562e2e Thomas Fuchs thomas@fesch.at http://github.com/madrobby/scripty2/commit/04e65d1f5887505cac9e3b34a8b0cc72d4beb0e8 04e65d1f5887505cac9e3b34a8b0cc72d4beb0e8 2008-05-05T14:57:59-07:00 2008-05-05T14:57:59-07:00 use context parameter of enumerables; various cosmetic cleanups cee154228b607a4996c5d62fef1f61feb327480f Thomas Fuchs thomas@fesch.at