@@ -257,7 +257,7 @@ s2.css = { ElementMethods: { /** - * s2.css.ElementMethods.getStyles(@element) -> Object + * Element.getStyles(@element) -> Object * - element (String | Object): DOM object or element ID * * Returns an object with all currently applied style attributes for src/css.js @@ -1,3 +1,9 @@ +/** section: Effects + * class s2.fx.Parallel < s2.fx.Base + * + * This effect can change an object property or call + * a method with a numerical interpolation. +**/ s2.fx.Attribute = Class.create(s2.fx.Base, { initialize: function($super, object, from, to, options, method) { object = Object.isString(object) ? $(object) : object; src/effects/attribute.js @@ -1,3 +1,6 @@ +/** section: Effects + * class s2.fx.Heartbeat +**/ s2.fx.Heartbeat = Class.create({ initialize: function(options) { this.options = Object.extend({ src/effects/heartbeat.js @@ -1,5 +1,5 @@ /** section: Effects - * class s2.fx.Parallel < s2.fx.Element + * class s2.fx.Parallel < s2.fx.Base * * Effect to execute several other effects in parallel. **/ src/effects/parallel.js @@ -11,180 +11,418 @@ */ Object.extend(s2.fx.Transitions, { + /** + * s2.fx.Transitions.easeInQuad(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ easeInQuad: function(pos){ return Math.pow(pos, 2); - }, - - easeOutQuad: function(pos){ - return -(Math.pow((pos-1), 2) -1); - }, - - easeInOutQuad: function(pos){ - if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,2); - return -0.5 * ((pos-=2)*pos - 2); - }, - - easeInCubic: function(pos){ - return Math.pow(pos, 3); - }, - - easeOutCubic: function(pos){ - return (Math.pow((pos-1), 3) +1); - }, - - easeInOutCubic: function(pos){ - if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3); - return 0.5 * (Math.pow((pos-2),3) + 2); - }, - - easeInQuart: function(pos){ - return Math.pow(pos, 4); - }, - - easeOutQuart: function(pos){ - return -(Math.pow((pos-1), 4) -1) - }, - - easeInOutQuart: function(pos){ - if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,4); - return -0.5 * ((pos-=2)*Math.pow(pos,3) - 2); - }, - - easeInQuint: function(pos){ - return Math.pow(pos, 5); - }, - - easeOutQuint: function(pos){ - return (Math.pow((pos-1), 5) +1); - }, - - easeInOutQuint: function(pos){ - if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,5); - return 0.5 * (Math.pow((pos-2),5) + 2); - }, - - easeInSine: function(pos){ - return -Math.cos(pos * (Math.PI/2)) + 1; - }, - - easeOutSine: function(pos){ - return Math.sin(pos * (Math.PI/2)); - }, - - easeInOutSine: function(pos){ - return (-.5 * (Math.cos(Math.PI*pos) -1)); - }, - - easeInExpo: function(pos){ - return (pos==0) ? 0 : Math.pow(2, 10 * (pos - 1)); - }, - - easeOutExpo: function(pos){ - return (pos==1) ? 1 : -Math.pow(2, -10 * pos) + 1; - }, - - easeInOutExpo: function(pos){ - if(pos==0) return 0; - if(pos==1) return 1; - if((pos/=0.5) < 1) return 0.5 * Math.pow(2,10 * (pos-1)); - return 0.5 * (-Math.pow(2, -10 * --pos) + 2); - }, - - easeInCirc: function(pos){ - return -(Math.sqrt(1 - (pos*pos)) - 1); - }, - - easeOutCirc: function(pos){ - return Math.sqrt(1 - Math.pow((pos-1), 2)) - }, - - easeInOutCirc: function(pos){ - if((pos/=0.5) < 1) return -0.5 * (Math.sqrt(1 - pos*pos) - 1); - return 0.5 * (Math.sqrt(1 - (pos-=2)*pos) + 1); - }, - - easeOutBounce: function(pos){ - if ((pos) < (1/2.75)) { - return (7.5625*pos*pos); - } else if (pos < (2/2.75)) { - return (7.5625*(pos-=(1.5/2.75))*pos + .75); - } else if (pos < (2.5/2.75)) { - return (7.5625*(pos-=(2.25/2.75))*pos + .9375); - } else { - return (7.5625*(pos-=(2.625/2.75))*pos + .984375); - } - }, - - easeInBack: function(pos){ - var s = 1.70158; - return (pos)*pos*((s+1)*pos - s); - }, - - easeOutBack: function(pos){ - var s = 1.70158; - return (pos=pos-1)*pos*((s+1)*pos + s) + 1; - }, - - easeInOutBack: function(pos){ - var s = 1.70158; - if((pos/=0.5) < 1) return 0.5*(pos*pos*(((s*=(1.525))+1)*pos -s)); - return 0.5*((pos-=2)*pos*(((s*=(1.525))+1)*pos +s) +2); - }, - - 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); - } else if (pos < (2/2.75)) { - return (7.5625*(pos-=(1.5/2.75))*pos + .75); - } else if (pos < (2.5/2.75)) { - return (7.5625*(pos-=(2.25/2.75))*pos + .9375); - } else { - return (7.5625*(pos-=(2.625/2.75))*pos + .984375); - } - }, - - bouncePast: function(pos) { - if (pos < (1/2.75)) { - return (7.5625*pos*pos); - } else if (pos < (2/2.75)) { - return 2 - (7.5625*(pos-=(1.5/2.75))*pos + .75); - } else if (pos < (2.5/2.75)) { - return 2 - (7.5625*(pos-=(2.25/2.75))*pos + .9375); - } else { - 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); - }, - - easeFrom: function(pos) { - return Math.pow(pos,4); - }, - - easeTo: function(pos) { - return Math.pow(pos,0.25); - } + }, + + /** + * s2.fx.Transitions.easeOutQuad(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + easeOutQuad: function(pos){ + return -(Math.pow((pos-1), 2) -1); + }, + + /** + * s2.fx.Transitions.easeInOutQuad(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + easeInOutQuad: function(pos){ + if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,2); + return -0.5 * ((pos-=2)*pos - 2); + }, + + /** + * s2.fx.Transitions.easeInCubic(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + easeInCubic: function(pos){ + return Math.pow(pos, 3); + }, + + /** + * s2.fx.Transitions.easeOutCubic(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + easeOutCubic: function(pos){ + return (Math.pow((pos-1), 3) +1); + }, + + /** + * s2.fx.Transitions.easeInOutCubic(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + easeInOutCubic: function(pos){ + if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3); + return 0.5 * (Math.pow((pos-2),3) + 2); + }, + + /** + * s2.fx.Transitions.easeInQuart(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + easeInQuart: function(pos){ + return Math.pow(pos, 4); + }, + + /** + * s2.fx.Transitions.easeOutQuart(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + easeOutQuart: function(pos){ + return -(Math.pow((pos-1), 4) -1) + }, + + /** + * s2.fx.Transitions.easeInOutQuart(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + easeInOutQuart: function(pos){ + if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,4); + return -0.5 * ((pos-=2)*Math.pow(pos,3) - 2); + }, + + /** + * s2.fx.Transitions.easeInQuint(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + easeInQuint: function(pos){ + return Math.pow(pos, 5); + }, + + /** + * s2.fx.Transitions.easeOutQuint(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + easeOutQuint: function(pos){ + return (Math.pow((pos-1), 5) +1); + }, + + /** + * s2.fx.Transitions.easeInOutQuint(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + easeInOutQuint: function(pos){ + if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,5); + return 0.5 * (Math.pow((pos-2),5) + 2); + }, + + /** + * s2.fx.Transitions.easeInSine(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + easeInSine: function(pos){ + return -Math.cos(pos * (Math.PI/2)) + 1; + }, + + /** + * s2.fx.Transitions.easeOutSine(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + easeOutSine: function(pos){ + return Math.sin(pos * (Math.PI/2)); + }, + + /** + * s2.fx.Transitions.easeInOutSine(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + easeInOutSine: function(pos){ + return (-.5 * (Math.cos(Math.PI*pos) -1)); + }, + + /** + * s2.fx.Transitions.easeInExpo(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + easeInExpo: function(pos){ + return (pos==0) ? 0 : Math.pow(2, 10 * (pos - 1)); + }, + + /** + * s2.fx.Transitions.easeOutExpo(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + easeOutExpo: function(pos){ + return (pos==1) ? 1 : -Math.pow(2, -10 * pos) + 1; + }, + + /** + * s2.fx.Transitions.easeInOutExpo(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + easeInOutExpo: function(pos){ + if(pos==0) return 0; + if(pos==1) return 1; + if((pos/=0.5) < 1) return 0.5 * Math.pow(2,10 * (pos-1)); + return 0.5 * (-Math.pow(2, -10 * --pos) + 2); + }, + + /** + * s2.fx.Transitions.easeInCirc(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + easeInCirc: function(pos){ + return -(Math.sqrt(1 - (pos*pos)) - 1); + }, + + /** + * s2.fx.Transitions.easeOutCirc(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + easeOutCirc: function(pos){ + return Math.sqrt(1 - Math.pow((pos-1), 2)) + }, + + /** + * s2.fx.Transitions.easeInOutCirc(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + easeInOutCirc: function(pos){ + if((pos/=0.5) < 1) return -0.5 * (Math.sqrt(1 - pos*pos) - 1); + return 0.5 * (Math.sqrt(1 - (pos-=2)*pos) + 1); + }, + + /** + * s2.fx.Transitions.easeOutBounce(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + easeOutBounce: function(pos){ + if ((pos) < (1/2.75)) { + return (7.5625*pos*pos); + } else if (pos < (2/2.75)) { + return (7.5625*(pos-=(1.5/2.75))*pos + .75); + } else if (pos < (2.5/2.75)) { + return (7.5625*(pos-=(2.25/2.75))*pos + .9375); + } else { + return (7.5625*(pos-=(2.625/2.75))*pos + .984375); + } + }, + + /** + * s2.fx.Transitions.easeInBack(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + easeInBack: function(pos){ + var s = 1.70158; + return (pos)*pos*((s+1)*pos - s); + }, + + /** + * s2.fx.Transitions.easeOutBack(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + easeOutBack: function(pos){ + var s = 1.70158; + return (pos=pos-1)*pos*((s+1)*pos + s) + 1; + }, + + /** + * s2.fx.Transitions.easeInOutBack(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + easeInOutBack: function(pos){ + var s = 1.70158; + if((pos/=0.5) < 1) return 0.5*(pos*pos*(((s*=(1.525))+1)*pos -s)); + return 0.5*((pos-=2)*pos*(((s*=(1.525))+1)*pos +s) +2); + }, + + /** + * s2.fx.Transitions.elastic(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + elastic: function(pos) { + return -1 * Math.pow(4,-8*pos) * Math.sin((pos*6-1)*(2*Math.PI)/2) + 1; + }, + + /** + * s2.fx.Transitions.swingFromTo(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + 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); + }, + + /** + * s2.fx.Transitions.swingFrom(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + swingFrom: function(pos) { + var s = 1.70158; + return pos*pos*((s+1)*pos - s); + }, + + /** + * s2.fx.Transitions.swingTo(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + swingTo: function(pos) { + var s = 1.70158; + return (pos-=1)*pos*((s+1)*pos + s) + 1; + }, + + /** + * s2.fx.Transitions.bounce(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + bounce: function(pos) { + if (pos < (1/2.75)) { + return (7.5625*pos*pos); + } else if (pos < (2/2.75)) { + return (7.5625*(pos-=(1.5/2.75))*pos + .75); + } else if (pos < (2.5/2.75)) { + return (7.5625*(pos-=(2.25/2.75))*pos + .9375); + } else { + return (7.5625*(pos-=(2.625/2.75))*pos + .984375); + } + }, + + /** + * s2.fx.Transitions.bouncePast(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + bouncePast: function(pos) { + if (pos < (1/2.75)) { + return (7.5625*pos*pos); + } else if (pos < (2/2.75)) { + return 2 - (7.5625*(pos-=(1.5/2.75))*pos + .75); + } else if (pos < (2.5/2.75)) { + return 2 - (7.5625*(pos-=(2.25/2.75))*pos + .9375); + } else { + return 2 - (7.5625*(pos-=(2.625/2.75))*pos + .984375); + } + }, + + /** + * s2.fx.Transitions.easeFromTo(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + 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); + }, + + /** + * s2.fx.Transitions.easeFrom(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + easeFrom: function(pos) { + return Math.pow(pos,4); + }, + + /** + * s2.fx.Transitions.easeTo(pos) -> Number + * - pos (Number): position between 0 (start of effect) and 1 (end of effect) + * + * Based on Easing Equations by Robert Penner. + * <div class="transition"></div> + **/ + easeTo: function(pos) { + return Math.pow(pos,0.25); + } }); \ No newline at end of file src/effects/transitions/penner.js @@ -11,6 +11,26 @@ * * By using Transitions, it is easily possible to add movement easing, * pulsation, bouncing, reversal and other forms of special effects. + * + * <h4>Default transition</h4 + * + * If no transition option is given to an effect, [[s2.fx.Transitions.sinusoidal]] is used. + * This setting can be changed by redifining [[s2.fx.DefaultOptions.transition]]. + * + * <h4>Implementing your own transitions</h4> + * + * Transitions can easily be added, by using this template: + * + * Object.extend(s2.fx.Transitions, { + * myTransition: function(pos) { + * return pos; // do your calculations here! + * } + * }); + * + * Transitions defined this way automatically become available to be used with + * the shorthand syntax for the `options.transition` argument: + * + * $('some_element').morph('left:300px', { transition: 'myTransition' }); **/ s2.fx.Transitions = { @@ -20,6 +40,7 @@ s2.fx.Transitions = { * - pos (Number): position between 0 (start of effect) and 1 (end of effect) * * Basic linear transition, no easing or other alteration of the effect. + * <div class="transition"></div> **/ linear: Prototype.K, @@ -28,6 +49,7 @@ s2.fx.Transitions = { * - pos (Number): position between 0 (start of effect) and 1 (end of effect) * * Alters the effect timing to be aligned to a sine wave. + * <div class="transition"></div> **/ sinusoidal: function(pos) { return (-Math.cos(pos*Math.PI)/2) + 0.5; @@ -38,6 +60,7 @@ s2.fx.Transitions = { * - pos (Number): position between 0 (start of effect) and 1 (end of effect) * * Effect is executed in a reverse linear fashion. + * <div class="transition"></div> **/ reverse: function(pos) { return 1 - pos; @@ -48,6 +71,7 @@ s2.fx.Transitions = { * - pos (Number): position between 0 (start of effect) and 1 (end of effect) * * Effect flickers along a sine wave. + * <div class="transition"></div> **/ flicker: function(pos) { return Math.max((-Math.cos(pos*Math.PI)/4) + 0.75 + Math.random()/4, 1); @@ -57,7 +81,8 @@ s2.fx.Transitions = { * s2.fx.Transitions.wobble(pos) -> Number * - pos (Number): position between 0 (start of effect) and 1 (end of effect) * - * Effect wobbles between start and end positions. + * Effect wobbles increasingly fast between start and end positions. + * <div class="transition"></div> **/ wobble: function(pos) { return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5; @@ -69,6 +94,7 @@ s2.fx.Transitions = { * - pulses (Number): Number of pulses, defaults to 5 * * Effect pulses along a sinusoidal transition. + * <div class="transition"></div> **/ pulse: function(pos, pulses) { return (-Math.cos((pos*((pulses||5)-.5)*2)*Math.PI)/2) + .5; @@ -78,7 +104,8 @@ s2.fx.Transitions = { * s2.fx.Transitions.spring(pos) -> Number * - pos (Number): position between 0 (start of effect) and 1 (end of effect) * - * Alters the effect timing to a "string". + * Alters the effect timing to a "spring". + * <div class="transition"></div> **/ spring: function(pos) { return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp(-pos * 6)); @@ -88,6 +115,7 @@ s2.fx.Transitions = { * s2.fx.Transitions.none() -> Number * * No transition, the effect stays in intial state (returns 0 regardless of input values). + * <div class="transition"></div> **/ none: Prototype.K.curry(0), @@ -95,6 +123,7 @@ s2.fx.Transitions = { * s2.fx.Transitions.full() -> Number * * No transition, the effect is always in final state (returns 1 regardless of input values). + * <div class="transition"></div> **/ full: Prototype.K.curry(1) }; src/effects/transitions/transitions.js @@ -1,4 +1,15 @@ -s2.fx.ElementMethods = { +/** section: Effects + * Element + * + * A collection of shortcut methods that are added to all DOM elements. + * [[Element.Morph]] is the preferred way to invoke morph effects. +**/ +Element.addMethods({ + /** + * Element.effect(@element, effect[, options]) -> element + * + * Initialize and play the specified effect on the element. + **/ effect: function(element, effect, options){ if (Object.isFunction(effect)) effect = new effect(element, options); @@ -8,11 +19,22 @@ s2.fx.ElementMethods = { return element; }, + /** + * Element.morph(@element, style[, options]) -> element + * + * Dynamically adjust an element's CSS styles to the CSS properties given + * in the `style` argument. See [[s2.fx.Morph]]. + **/ morph: function(element, style, options){ options = s2.fx.parseOptions(options); return element.effect('morph', Object.extend(options, {style: style})); }.optionize(), + /** + * Element.appear(@element[, options]) -> element + * + * Make an element appear by fading it in from 0% opacity. + **/ appear: function(element, options){ return element.effect('morph', Object.extend({ before: function(){ element.show().setStyle({opacity: 0}); }, @@ -20,6 +42,11 @@ s2.fx.ElementMethods = { }, options)); }, + /** + * Element.fade(@element[, options]) -> element + * + * Fade out an element from it's current opacity setting (or 100%). + **/ fade: function(element, options){ return element.effect(Effect.Morph, Object.extend({ style: 'opacity:0', @@ -27,6 +54,11 @@ s2.fx.ElementMethods = { }, options)); }, + /** + * Element.cloneWithoutIDs(@element) -> element + * + * Returns a clone of the element with all `id` attributed removed. + **/ cloneWithoutIDs: function(element) { element = $(element); var clone = element.cloneNode(true); @@ -34,6 +66,4 @@ s2.fx.ElementMethods = { $(clone).select('*[id]').each(function(e) { e.id = ''; }); return clone; } -}; - -Element.addMethods(s2.fx.ElementMethods); \ No newline at end of file +}); \ No newline at end of file src/extensions/element.js @@ -56,7 +56,26 @@ PDoc.highlight = function(element) { window.scrollBy(0, frameOffset.top - 10); } }).defer(); +}; + +var s2doc = { + init: function(){ + $$('.transition').each(s2doc.TransitionExample); + }, + TransitionExample: function(element){ + var type = element.up().down('.ebnf').innerHTML.gsub(/s2\.fx\.Transitions\./,'').split('(').first(), + transition = s2.fx.Transitions[type]; + + var values = $R(0,200).map(function(v){ return transition(v/200)*200; }), + min = values.min(), max = values.max(), factor = 200/(max-min), + grid = '<span style="bottom:'+((0-min)*factor).round()+'px">0</span>'+ + '<span style="bottom:'+((200-min)*factor).round()+'px">1</span>'; + + element.innerHTML = grid + $R(0,200).map(function(v){ + return '<div style="left:'+v+'px;bottom:'+((values[v]-min)*factor).round()+'px;height:1px"></div>'; + }).join(''); + } }; // Live API search. @@ -380,4 +399,5 @@ Form.GhostedField = Class.create({ document.observe("dom:loaded", function() { new Form.GhostedField($('search'), "Search"); + s2doc.init(); }); \ No newline at end of file templates/html/assets/javascripts/application.js @@ -29,6 +29,29 @@ span.hidden { display: none; } +div.transition { + margin-top: 30px; + width: 200px; + height: 200px; + position: relative; +} + +div.transition div { + position: absolute; + height: 1px; + width: 1px; + background: #000; +} + +div.transition span { + display: block; + position: absolute; + border-bottom: 1px solid #dadada; + font-size: 10x; + color: #888; + width: 200px; + left: 0px; +} body { font-size: 82.5%; templates/html/assets/stylesheets/apidocs.css 8cb6b1c3554e9590a026c56e2f2b2cb43a24d35c Thomas Fuchs thomas@fesch.at http://github.com/madrobby/scripty2/commit/10c8c42fdccffea202530f20e2374b952b629770 10c8c42fdccffea202530f20e2374b952b629770 2009-06-12T05:52:15-07:00 2009-06-12T05:52:15-07:00 add more documentation, nice graphs for effect transitions e6db82c9b6f7f35765627e410d2452cb969bf8db Thomas Fuchs thomas@fesch.at