lsd_rails 0.1

data/Packages/mootools-core/Docs/Fx/Fx.CSS.md

@@ -0,0 +1,12 @@
+Class: Fx.CSS {#Fx-CSS}
+=======================
+
+CSS parsing class for effects. Required by [Fx.Tween][], [Fx.Morph][], [Fx.Elements][].
+
+Has no public methods.
+
+
+
+[Fx.Tween]: /core/Fx/Fx.Tween
+[Fx.Morph]: /core/Fx/Fx.Morph
+[Fx.Elements]: /more/Fx/Fx.Elements

data/Packages/mootools-core/Docs/Fx/Fx.Morph.md

@@ -0,0 +1,225 @@
+Class: Fx.Morph {#Fx-Morph}
+===========================
+
+Allows for the animation of multiple CSS properties at once, even by a CSS selector. Inherits methods, properties, options and events from [Fx][].
+
+### Extends:
+
+- [Fx][]
+
+### Syntax:
+
+	var myFx = new Fx.Morph(element[, options]);
+
+### Arguments:
+
+1. element - (*mixed*) A string ID of the Element or an Element to apply the style transitions to.
+2. options - (*object*, optional) The [Fx][] options object.
+
+### Returns:
+
+* (*object*) A new Fx.Morph instance.
+
+### Examples:
+
+Multiple styles with start and end values using an object:
+
+	var myEffect = new Fx.Morph('myElement', {
+		duration: 'long',
+		transition: Fx.Transitions.Sine.easeOut
+	});
+
+	myEffect.start({
+		'height': [10, 100], // Morphs the 'height' style from 10px to 100px.
+		'width': [900, 300]  // Morphs the 'width' style from 900px to 300px.
+	});
+
+
+Multiple styles with the start value omitted will default to the current Element's value:
+
+	var myEffect = new Fx.Morph('myElement', {
+		duration: 'short',
+		transition: Fx.Transitions.Sine.easeOut
+	});
+
+	myEffect.start({
+		'height': 100, // Morphs the height from the current to 100px.
+		'width': 300   // Morphs the width from the current to 300px.
+	});
+
+
+Morphing one Element to match the CSS values within a CSS class. This is useful when
+separating the logic and styles:
+
+	var myEffect = new Fx.Morph('myElement', {
+		duration: 1000,
+		transition: Fx.Transitions.Sine.easeOut
+	});
+
+	// the styles of myClassName will be applied to the target Element.
+	myEffect.start('.myClassName');
+
+
+### See Also:
+
+- [Fx][]
+
+
+
+Fx.Morph Method: set {#Fx-Morph:set}
+------------------------------------
+
+Sets the Element's CSS properties to the specified values immediately.
+
+### Syntax:
+
+	myFx.set(to);
+
+### Arguments:
+
+1. properties - (*mixed*) Either an *object* of key/value pairs of CSS attributes to change or a *string* representing a CSS selector which can be found within the CSS of the page.  If only one value is given for any CSS property, the transition will be from the current value of that property to the value given.
+
+### Returns:
+
+* (*object*) This Fx.Morph instance.
+
+### Examples:
+
+	var myFx = new Fx.Morph('myElement').set({
+		'height': 200,
+		'width': 200,
+		'background-color': '#f00',
+		'opacity': 0
+	});
+	var myFx = new Fx.Morph('myElement').set('.myClass');
+
+
+
+Fx.Morph Method: start {#Fx-Morph:start}
+----------------------------------------
+
+Executes a transition for any number of CSS properties in tandem.
+
+### Syntax:
+
+	myFx.start(properties);
+
+### Arguments:
+
+1. properties - (*mixed*) An *object* of key/value pairs of CSS attributes to change or a *string* representing a CSS selector which can be found within the CSS of the page.
+	If only one value is given for any CSS property, the transition will be from the current value of that property to the value given.
+
+### Returns:
+
+* (*object*) This Fx.Morph instance.
+
+### Examples:
+
+	var myEffects = new Fx.Morph('myElement', {duration: 1000, transition: Fx.Transitions.Sine.easeOut});
+
+	myEffects.start({
+		'height': [10, 100],
+		'width': [900, 300],
+		'opacity': 0,
+		'background-color': '#00f'
+	});
+
+### Notes:
+
+- If a string is passed as the CSS selector, the selector must be identical to the one within the CSS.
+- Multiple selectors (with commas) are not supported.
+
+
+Object: Element.Properties {#Element-Properties}
+==============================================
+
+see [Element.Properties][]
+
+Element Property: morph {#Element-Properties:morph}
+---------------------------------------------------
+
+### Setter
+
+Sets a default Fx.Morph instance for an Element.
+
+#### Syntax:
+
+	el.set('morph'[, options]);
+
+#### Arguments:
+
+1. options - (*object*, optional) The Fx.Morph options.
+
+#### Returns:
+
+* (*element*) This Element.
+
+#### Examples:
+
+	el.set('morph', {duration: 'long', transition: 'bounce:out'});
+	el.morph({height: 100, width: 100});
+
+### Getter
+
+Gets the default Fx.Morph instance for the Element.
+
+#### Syntax:
+
+	el.get('morph');
+
+#### Arguments:
+
+1. property - (*string*) the Fx.Morph property argument.
+
+#### Returns:
+
+* (*object*) The Fx.Morph instance.
+
+#### Examples:
+
+	el.set('morph', {duration: 'long', transition: 'bounce:out'});
+	el.morph({height: 100, width: 100});
+	el.get('morph'); // the Fx.Morph instance.
+
+
+
+Type: Element {#Element}
+==========================
+
+Element Method: morph {#Element:morph}
+--------------------------------------
+
+Animates an Element given the properties passed in.
+
+### Syntax:
+
+	myElement.morph(properties);
+
+### Arguments:
+
+1. properties - (*mixed*) The CSS properties to animate. Can be either an object of CSS properties or a string representing a CSS selector.  If only one value is given for any CSS property, the transition will be from the current value of that property to the value given.
+
+### Returns:
+
+* (*element*) This Element.
+
+### Example:
+
+With an object:
+
+	$('myElement').morph({height: 100, width: 200});
+
+With a selector:
+
+	$('myElement').morph('.class1');
+
+### See Also:
+
+- [Fx.Morph][]
+
+
+
+[$]: /core/Element/Element#Window:dollar
+[Fx]: /core/Fx/Fx
+[Fx.Morph]: #Fx-Morph
+[Element.Properties]: /core/Element/Element/#Element-Properties

data/Packages/mootools-core/Docs/Fx/Fx.Transitions.md

@@ -0,0 +1,157 @@
+Class: Fx {#Fx}
+===============
+
+Fx.Transitions overrides the base [Fx][] constructor, and adds the possibility to use the transition option as string.
+
+### Transition option:
+
+The equation to use for the effect. See [Fx.Transitions][]. It accepts both a function (ex: Fx.Transitions.Sine.easeIn) or a string ('sine:in', 'bounce:out' or 'quad:in:out') that will map to Fx.Transitions.Sine.easeIn / Fx.Transitions.Bounce.easeOut / Fx.Transitions.Quad.easeInOut
+
+
+Object: Fx.Transitions {#Fx-Transitions}
+======================================
+
+A collection of tweening transitions for use with the [Fx][] classes.
+
+### Examples:
+
+	$('myElement').set('tween', {transition: Fx.Transitions.Elastic.easeOut});
+	$('myElement').tween('margin-top', 100);
+
+### See also:
+
+- [Robert Penner's Easing Equations](http://www.robertpenner.com/easing/)
+
+### Note:
+
+Since MooTools 1.3 this is a native JavaScript Object and not an instance of the deprecated Hash
+
+
+
+Fx.Transitions Method: linear {#Fx-Transitions:linear}
+------------------------------------------------------
+
+Displays a linear transition.
+
+Fx.Transitions Method: quad {#Fx-Transitions:quad}
+--------------------------------------------------
+
+Displays a quadratic transition. Must be used as Quad.easeIn or Quad.easeOut or Quad.easeInOut.
+
+Fx.Transitions Method: cubic {#Fx-Transitions:cubic}
+----------------------------------------------------
+
+Displays a cubicular transition. Must be used as Cubic.easeIn or Cubic.easeOut or Cubic.easeInOut.
+
+
+Fx.Transitions Method: quart {#Fx-Transitions:quart}
+----------------------------------------------------
+
+Displays a quartetic transition. Must be used as Quart.easeIn or Quart.easeOut or Quart.easeInOut.
+
+Fx.Transitions Method: quint {#Fx-Transitions:quint}
+----------------------------------------------------
+
+Displays a quintic transition. Must be used as Quint.easeIn or Quint.easeOut or Quint.easeInOut
+
+Fx.Transitions Method: pow {#Fx-Transitions:pow}
+------------------------------------------------
+
+Used to generate Quad, Cubic, Quart and Quint.
+
+### Note:
+
+- The default is `p^6`.
+
+Fx.Transitions Method: expo {#Fx-Transitions:expo}
+--------------------------------------------------
+
+Displays a exponential transition. Must be used as Expo.easeIn or Expo.easeOut or Expo.easeInOut.
+
+
+
+Fx.Transitions Method: circ {#Fx-Transitions:circ}
+--------------------------------------------------
+
+Displays a circular transition. Must be used as Circ.easeIn or Circ.easeOut or Circ.easeInOut.
+
+
+
+Fx.Transitions Method: sine {#Fx-Transitions:sine}
+--------------------------------------------------
+
+Displays a sineousidal transition. Must be used as Sine.easeIn or Sine.easeOut or Sine.easeInOut.
+
+
+
+Fx.Transitions Method: back {#Fx-Transitions:back}
+--------------------------------------------------
+
+Makes the transition go back, then all forth. Must be used as Back.easeIn or Back.easeOut or Back.easeInOut.
+
+
+
+Fx.Transitions Method: bounce {#Fx-Transitions:bounce}
+------------------------------------------------------
+
+Makes the transition bouncy. Must be used as Bounce.easeIn or Bounce.easeOut or Bounce.easeInOut.
+
+
+
+Fx.Transitions Method: elastic {#Fx-Transitions:elastic}
+--------------------------------------------------------
+
+Elastic curve. Must be used as Elastic.easeIn or Elastic.easeOut or Elastic.easeInOut
+
+
+
+Class: Fx.Transition {#Fx-Transition}
+=====================================
+
+This class is only useful for math geniuses who want to write their own easing equations.
+Returns an [Fx][] transition function with 'easeIn', 'easeOut', and 'easeInOut' methods.
+
+### Syntax:
+
+	var myTransition = new Fx.Transition(transition[, params]);
+
+### Arguments:
+
+1. transition - (*function*) Can be a [Fx.Transitions][] function or a user-provided function which will be extended with easing functions.
+2. params     - (*mixed*, optional) Single value or an array for multiple values to pass as the second parameter for the transition function. A single value will be transformed to an array.
+
+### Returns:
+
+* (*function*) A function with easing functions.
+
+### Examples:
+
+	// Your own function. Here overshoot is bigger (now 1.3) when base -> 1 and base != 1.
+	var myTransition = new Fx.Transition(function(pos, x){
+		return 1 - Math.pow(Math.abs(Math.log(pos) / Math.log(x && x[0] || Math.E)), pos);
+	}, 1.3);
+
+	var myFx = new Fx.Tween('myElement', {
+		property: 'height',
+		transition: myTransition.easeOut
+	}).start(30, 100);
+
+### See Also:
+
+- [Fx.Transitions][]
+
+
+[Fx]: /core/Fx/Fx
+[Fx.Transitions]: #Fx-Transitions
+[Element.effect]: /core/Element/#Element:effect
+[Linear]: ../Docs/assets/images/Linear.png
+[Quad]: ../Docs/assets/images/Quad.png
+[Cubic]: ../Docs/assets/images/Cubic.png
+[Quart]: ../Docs/assets/images/Quart.png
+[Quint]: ../Docs/assets/images/Quint.png
+[Expo]: ../Docs/assets/images/Expo.png
+[Circ]: ../Docs/assets/images/Circ.png
+[Sine]: ../Docs/assets/images/Sine.png
+[Back]: ../Docs/assets/images/Back.png
+[Bounce]: ../Docs/assets/images/Bounce.png
+[Elastic]: ../Docs/assets/images/Elastic.png

data/Packages/mootools-core/Docs/Fx/Fx.Tween.md

@@ -0,0 +1,303 @@
+Class: Fx.Tween {#Fx-Tween}
+===========================
+
+Contains [Fx.Tween][] and the Element shortcut [Element.tween][].
+
+### Extends:
+
+[Fx][]
+
+
+
+Fx.Tween Method: constructor {#Fx-Tween:constructor}
+----------------------------------------------------
+
+The Tween effect, used to transition any CSS property from one value to another.
+
+### Syntax:
+
+	var myFx = new Fx.Tween(element, [, options]);
+
+### Arguments:
+
+1. element  - (*mixed*) An Element or the string id of an Element to apply the transition to.
+2. options  - (*object*, optional) The [Fx][] options object, plus the options described below:
+
+### Options:
+
+* property - (*string*) The CSS property to transition to, for example 'width', 'color', 'font-size', 'border', etc. If this option is omitted, you are required to use the property as a first argument for the start and set methods. Defaults to null.
+
+
+### Notes:
+
+- Any CSS property that can be set with Element:setStyle can be transitioned with Fx.Tween.
+- If a property is not mathematically calculable, like border-style or background-image, it will be set immediately upon start of the transition.
+- If you use the property option, you must not use the property argument in the start and set methods.
+
+### See Also:
+
+- [Fx][]
+
+### Examples:
+
+Tweens the height of a element while clicking a link (which stops the default behavior), using a transition and a long duration.
+It uses the `link` option so when clicking the link twice it behaves smoothly. When the start value is omitted, the current
+value of the property (in this example the height property) will be used.
+
+	var myFx = new Fx.Tween('myElement', {
+		duration: 'long',
+		transition: 'bounce:out',
+		link: 'cancel',
+		property: 'height'
+	});
+
+	document.id('myLink').addEvent('click', function(event){
+		event.stop();
+		myFx.start(40, 100);
+	});
+
+It is also possible to use the Element properties: `.get('tween')` and `.set('tween')` and the `tween` method.
+In this example the property method is not set as an option, now it should be set as argument of the `tween` method.
+This is something you can choose for both the `Fx.Tween` constructor or this approach.
+
+	var myElement = document.id('myElement');
+	myElement.set('tween', {
+		duration: 'long',
+		transition: 'bounce:out',
+		link: 'cancel'
+	});
+
+	document.id('myLink').addEvent('click', function(event){
+		event.stop();
+		myElement.tween('height', 40, 100);
+	});
+
+
+
+Fx.Tween Method: set {#Fx-Tween:set}
+------------------------------------
+
+Sets the Element's CSS property to the specified value immediately.
+
+### Syntax:
+
+	myFx.set(property, value);
+
+### Arguments:
+
+1. property - (*string*) The css property to set the value to. Omit this if you use the property option.
+2. value - (*mixed*) The value to set the CSS property of this instance to.
+
+### Returns:
+
+* (*object*) This Fx.Tween instance.
+
+### Examples:
+
+	var myFx = new Fx.Tween(element);
+	// sets the background color of the element to red:
+	myFx.set('background-color', '#f00');
+
+### Note:
+
+If you use the property option, you must not use the property argument in the start and set methods.
+
+
+Fx.Tween Method: start {#Fx-Tween:start}
+----------------------------------------
+
+Transitions the Element's CSS property to the specified value.
+
+### Syntax:
+
+	myFx.start([property,] [from,] to);
+
+### Arguments:
+
+1. property - (*string*, if not in options) The css property to tween. Omit this if you use the property option.
+2. from     - (*mixed*, optional) The starting CSS property value for the effect.
+3. to       - (*mixed*) The target CSS property value for the effect.
+
+### Returns:
+
+* (*object*) This Fx.Tween instance.
+
+### Examples:
+
+	var myFx = new Fx.Tween(element);
+	// transitions the background color of the Element from black to red:
+	myFx.start('background-color', '#000', '#f00');
+	// transitions the background color of the Element from its current color to blue:
+	myFx.start('background-color', '#00f');
+
+### Notes:
+
+- If only one argument is provided, other than the property argument, the first argument to start will be used as the target value, and the initial value will be calculated from the current state of the element.
+- When using colors, either RGB or Hex values may be used.
+- If you use the property option, you must not use the property argument in the start and set methods.
+
+
+
+Object: Element.Properties {#Element-Properties}
+==============================================
+
+see [Element.Properties][]
+
+Element Property: tween {#Element-Properties:tween}
+---------------------------------------------------
+
+Sets and gets default options for the Fx.Tween instance of an Element.
+
+### Setter:
+
+#### Syntax:
+
+	el.set('tween'[, options]);
+
+#### Arguments:
+
+* options - (*object*) the Fx.Tween options.
+
+#### Returns:
+
+* (*element*) This Element.
+
+#### Examples:
+
+	el.set('tween', {duration: 'long'});
+	el.tween('color', '#f00');
+
+### Getter:
+
+#### Syntax:
+
+	el.get('tween');
+
+#### Arguments:
+
+1. property - (*string*) the Fx.Tween property argument.
+
+#### Returns:
+
+* (*object*) The Element's internal Fx.Tween instance.
+
+#### Examples:
+
+	el.get('tween').start(0);
+
+### Notes:
+
+- When initializing the Element's tween instance with Element:set, the property to tween SHOULD NOT be passed.
+- The property must be specified when using Element:get to retrieve the actual Fx.Tween instance, and in calls to Element:tween.
+- When options are passed to the setter, the instance will be reset.
+- As with the other Element shortcuts, the difference between a setter and a getter is that the getter returns the instance, while the setter returns the element (for chaining and initialization).
+
+
+
+Type: Element {#Element}
+========================
+
+Custom Type to allow all of its methods to be used with any DOM element via the dollar function [$][].
+
+
+
+Element Method: tween {#Element:tween}
+--------------------------------------
+
+Element shortcut method which immediately transitions any single CSS property of an Element from one value to another.
+
+### Syntax:
+
+	myElement.tween(property, startValue[, endValue]);
+
+### Arguments:
+
+1. property   - (*string*) the css property you want to animate. Omit this if you previously set the property option.
+2. startValue - (*mixed*) The start value for the transition.
+2. endValue   - (*mixed*) The end value for the transition. If this is omitted, startValue will be used as endValue.
+
+### Returns:
+
+* (*element*) This Element.
+
+### Examples:
+
+	// transitions the width of 'myElement' from its current width to 100px:
+	$('myElement').tween('width', '100');
+	// transitions the height of 'myElement' from 20px to 200px:
+	$('myElement').tween('height', [20, 200]);
+	// transitions the border of 'myElement' from its current to '6px solid blue':
+	$('myElement').tween('border', '6px solid #36f');
+
+### See Also:
+
+- [Fx.Tween][]
+
+
+
+Element Method: fade {#Element:fade}
+------------------------------------
+
+Element shortcut method for tween with opacity.  Useful for fading an Element in and out or to a certain opacity level.
+
+### Syntax:
+
+	myElement.fade([how]);
+
+### Arguments:
+
+1. how - (*mixed*, optional: defaults to 'toggle') The opacity level as a number or string representation.  Possible values include:
+ * 'in'     - Fade the element to 100% opacity.
+ * 'out'    - Fade the element to 0% opacity.
+ * 'show'   - Immediately set the element's opacity to 100%.
+ * 'hide'   - Immediately set the element's opacity to 0%.
+ * 'toggle' - If visible, fade the element out, otherwise, fade it in.
+ * (*number*)  - A float value between 0 and 1. Will fade the element to this opacity.
+
+### Returns:
+
+* This Element.
+
+### Examples:
+
+	$('myElement').fade('out'); // fades 'myElement' out.
+	$('myElement').fade(0.7); // fades 'myElement' to 70% opacity.
+
+
+
+Element Method: highlight {#Element:highlight}
+----------------------------------------------
+
+Element shortcut method for tweening the background color.  Immediately transitions an Element's background color to a specified highlight color then back to its set background color.
+
+### Syntax:
+
+	myElement.highlight([start, end]);
+
+### Arguments:
+
+1. start - (*string*, optional: defaults to '#ff8') The color from which to start the transition.
+2. end - (*string*, optional: defaults to Element's set background-color) The background color to return to after the highlight effect.
+
+### Note:
+
+If no background color is set on the Element, or its background color is set to 'transparent', the default end value will be white.
+
+### Returns:
+
+* (*element*) This Element.
+
+### Examples:
+
+    //immediately changes the background to light blue, then back to its original color (or white):
+	$('myElement').highlight('#ddf');
+
+	//immediately changes the background to light blue, then fades to grey:
+	$('myElement').highlight('#ddf', '#ccc');
+
+
+[$]: /core/Element/Element#Window:dollar
+[Fx]: /core/Fx/Fx
+[Fx.Tween]: #Fx-Tween
+[Element.tween]: #Element-Properties:tween
+[Element.Properties]: /core/Element/Element/#Element-Properties