/*
Filename: moo.rd - A lightweight Mootools extension
Author: Riccardo Degni,
License: GNU GPL License
Copyright: copyright 2007 Riccardo Degni
[Credits]
[li] moo.rd is based on the MooTools framework , and uses the MooTools syntax
[li] moo.rd constructors extends some of the MooTools Classes
[li] moo.rd Documentation is written by Riccardo Degni
[/Credits]
*/
var Moo = {};
Moo.Rd = {
version: '1.2',
author: 'Riccardo Degni'
};
/*
Filename: constructors.js
Author: Riccardo Degni,
License: GPL (General Public License)
Contains: Class Custom, Class Table, Class Make, Class Fx.Base
Filedescription: Contains some of the moo.rd native Constructors based on the MooTools Class. It permits a major modularity.
*/
/*
Class: Custom
Description: Wrapper to create standard customization
*/
var Custom = {};
/*
Class: Table
Description: Allows you to customize tables, tables rows, cells and columns
*/
var Table = new Class({
initialize: function(element) {
this.element = $(element);
}
});
/*
Class: Make
Description: Wrapper to create Classes that makes dinamically Elements.
*/
var Make = {};
/*
Class: Fx.Base
Description: Extension to create the moo.rd effects repository.
*/
Fx.Base.implement({
initStyles: function() {
this.init = {};
$A(arguments).each(function(a) {
(this.element.getStyle(a).test('px')) ? this.init[a] = this.element.getStyle(a).toInt() : this.init[a] = this.element.getStyle(a);
}, this);
},
removeAuto: function() {
if(!this.init) this.init = {};
$A(arguments).each(function(a) {
(this.element.getStyle(a).test('auto')) ? this.element.setStyle(a, '0px') : this.element.getStyle(a);
(this.init[a] != 'auto') ? this.init[a] : this.init[a] = 0;
}, this);
}
});
/*
Filename: effects.js
Author: Riccardo Degni,
License: GPL (General Public License)
Contains: Class Fx.Fold, Fx.Squish, Fx.Puff, Fx.Shrink, Fx.Grow
>> Element.fold, Element.squish, Element.puff, Element.shrink, Element.grow
Requires: constructors.js
Filedescription: Contains Fx extensions which allow to create web2.0 effects
[Summary]
Fx.Fold ::: Will close an element like a folder
Fx.Squish ::: Will resize an element with a squish transition
Fx.Puff ::: Will fade an element with a puff transition
Fx.Shrink ::: Will shrink an element
Fx.Grow ::: Will grow an element
Element ::: Extend the Element Class with Fx shortcuts
[/Summary]
*/
/*
Class: Fx.Fold
Description: Will close an element like a folder
Extends: Class Fx.Style
Constructor: new Fx.Fold (element, options, options2)
[Properties]
element - the element
options - the height transition (first) Fx options
options2 - the width transition (second) Fx options
[/Properties]
[Methods]
start -- starts the Fx.Fold effect
[/Methods]
Method: start
Description: starts the Fx.Fold effects
[Example]
> var fx = new Fx.Fold('box', {duration:2000}, {onComplete:function() { alert('Complete!');}});
> fx.start();
[/Example]
*/
Fx.Fold = Fx.Style.extend({
initialize: function(element, options, opt2) {
this.parent(element, 'height', options);
this.fx = new Fx.Style(element, 'width', opt2);
this.element.setStyle('overflow', 'hidden');
},
start: function() {
this.parent(0).chain(function() {
this.fx.start(0);
});
}
});
/*
Class: Fx.Squish
Description: Will resize an element with a squish transition
Extends: Class Fx.Styles
Constructor: new Fx.Squish (element, options)
[Properties]
element - the element
options - the Fx options
[/Properties]
[Methods]
start -- starts the Fx.Squish effect
[/Methods]
Method: start
Description: starts the Fx.Squish effect
[Example]
> var fx = new Fx.Squish('box', {duration:2000});
> fx.start();
[/Example]
*/
Fx.Squish = Fx.Styles.extend({
initialize: function(element, options) {
this.parent(element, options);
this.element.setStyle('overflow', 'hidden');
},
start: function() {
this.parent({
'height': [0],
'width': [0],
'opacity': [0]
});
}
});
/*
Class: Fx.Puff
Description: Will fade an element with a puff transition
Extends: Class Fx.Styles
Constructor: new Fx.Squish (element, options)
[Properties]
element - the element
options - the Fx options
[/Properties]
[Methods]
start -- starts the Fx.Puff effect
[/Methods]
Method: start
Description: starts the Fx.Puff effect
[Example]
> var fx = new Fx.Puff('box', {duration:2000});
> fx.start();
[/Example]
*/
Fx.Puff = Fx.Styles.extend({
initialize: function(element, options) {
this.parent(element, options);
this.initStyles('height', 'width', 'fontSize');
this.element.setStyles({position: 'relative', overflow: 'hidden'});
},
start: function() {
this.parent({
'height': [this.init.height*1.3],
'width': [this.init.width*1.3],
'font-size': [this.init.fontSize*1.3],
'opacity': [0]
}).chain(function() { this.element.setStyle('display', 'none'); });
}
});
/*
Class: Fx.Shrink
Description: Will shrink an element
Extends: Class Fx.Styles
Constructor: new Fx.Squish (element, options, options2)
[Properties]
element - the element
options - the main Fx options
options2 - the Fx options for the opacity
[/Properties]
[Methods]
start -- starts the Fx.Shrink effect
[/Methods]
Method: start
Description: starts the Fx.Shrink effect
[Example]
> var fx = new Fx.Shrink('box', {wait:true});
> fx.start();
[/Example]
*/
Fx.Shrink = Fx.Styles.extend({
initialize: function(element, options, opt2) {
this.parent(element, options);
this.fx = new Fx.Style(this.element, 'opacity', opt2);
this.initStyles('fontSize');
this.element.setStyles({position: 'relative', overflow: 'hidden'});
},
start: function() {
this.parent({
'height': [0],
'width': [0],
'font-size': [this.init.fontSize, 0]
}).chain(function() {
this.fx.start(1,0);
});
}
});
/*
Class: Fx.Grow
Description: Will grow an element
Extends: Class Fx.Styles
Constructor: new Fx.Grow (element, options, values)
[Properties]
element - the element
options - the Fx options
values - an object represents the final values of height, width and fontsize. These properties can be passed in.
[/Properties]
[Methods]
start -- starts the Fx.Grow effect
[/Methods]
Method: start
Description: starts the Fx.Grow effect
[Example]
> var fx = new Fx.Grow('box', {wait:true}, {height: 200, width: 200, fontsize: 16});
> fx.start();
[/Example]
*/
Fx.Grow = Fx.Styles.extend({
initialize: function(element, options, values) {
this.parent(element, options);
this.values = values || {};
this.element.setStyle('overflow', 'hidden');
},
start: function() {
this.parent({
'height': [0, this.values.height],
'width': [0, this.values.width],
'font-size': [0, this.values.fontsize]
});
}
});
/*
Class: Element
Description: Extend the Element Class with Fx shortcuts. All these methods accept the same arguments of the relative Fx effect (obviously without the element)
Extends: Class Element
Constructor: new Element (element)
[Properties]
element - the element
[/Properties]
[Methods]
fold -- returns an Fx.Fold instance
squish -- returns an Fx.Squish instance
puff -- returns an Fx.Puff instance
shirnk -- returns an Fx.Shrink instance
grow -- return an Fx.Grow instance
[/Methods]
*/
Element.extend({
/*
Method: fold
Description: returns an Fx.Fold instance
[Example]
> var fx = $('box').fold({wait:true}, {duration:2000});
> fx.start();
[/Example]
*/
fold: function(options, opt2) {
return new Fx.Fold(this, options, opt2);
},
/*
Method: squish
Description: returns an Fx.Squish instance
*/
squish: function(options) {
return new Fx.Squish(this, options);
},
/*
Method: puff
Description: returns an Fx.Puff instance
*/
puff: function(options) {
return new Fx.Puff(this, options);
},
/*
Method: shrink
Description: returns an Fx.Shrink instance
*/
shrink: function(options, opt2) {
return new Fx.Shrink(this, options, opt2);
},
/*
Method: grow
Description: returns an Fx.Grow instance
*/
grow: function(options, values) {
return new Fx.Grow(this, options, values);
}
});
/*
Filename: effects2.js
Author: Riccardo Degni,
License: GPL (General Public License)
Contains: Class Fx.FadeOut, Fx.SwitchOffH, Fx.SwitchOffW, Fx.ShakeH, Fx.ShakeW
>> Element.fadeOut, Element.switchOffH, Element.switchOffW, Element.shakeH, Element.shakeW
Requires: constructors.js
Filedescription: Contains Fx extensions which allow to create web2.0 effects
[Summary]
Fx.FadeOut ::: Will smoothly show the element
Fx.SwitchOffH ::: Will close vertically the element with a 'switch off'
Fx.SwitchOffW ::: Will close horizontally the element with a 'switch off'
Fx.ShakeH ::: Will shake vertically the element
Fx.ShakeW ::: Will shake horizontally the element
Element ::: Extend the Element Class with Fx shortcuts
[/Summary]
*/
/*
Class: Fx.FadeOut
Description: Will smoothly show the element
Extends: Class Fx.Style
Constructor: new Fx.FadeOut (element, options)
[Properties]
element - the element
options - the effect Fx options
[/Properties]
[Methods]
start -- starts the Fx.FadeOut effect
[/Methods]
Method: start
Description: starts the Fx.FadeOut effect
[Example]
> var fx = new Fx.FadeOut('box', {duration:2000});
> fx.start();
[/Example]
*/
Fx.FadeOut = Fx.Style.extend({
initialize: function(element, options) {
this.parent(element, 'opacity', options);
},
start: function() {
this.parent(0);
}
});
/*
Class: Fx.SwitchOffH
Description: Will close vertically the element with a 'switch off'
Extends: Class Fx.Style
Constructor: new Fx.SwitchOffH (element, options)
[Properties]
element - the element
options - the height transition Fx options
[/Properties]
[Methods]
start -- starts the Fx.SwitchOffH effect
[/Methods]
Method: start
Description: starts the Fx.SwitchOffH effect
[Example]
> var fx = new Fx.SwitchOffH('box', {duration:2000});
> fx.start();
[/Example]
*/
Fx.SwitchOffH = Fx.Style.extend({
initialize: function(element, options) {
this.parent(element);
this.fx = new Fx.Style(this.element, 'opacity', {duration:100});
this.fx2 = new Fx.Style(this.element, 'height', options);
this.element.setStyle('overflow', 'hidden');
},
start: function() {
this.fx.start(0).chain(function() {
this.fx.start(1);
}.bind(this)).chain(function() {
this.fx2.start(0);
}.bind(this));
}
});
/*
Class: Fx.SwitchOffW
Description: Will close horizontally the element with a 'switch off'
Extends: Class Fx.Style
Constructor: new Fx.SwitchOffH (element, options)
[Properties]
element - the element
options - the width transition Fx options
[/Properties]
[Methods]
start -- starts the Fx.SwitchOffW effect
[/Methods]
Method: start
Description: starts the Fx.SwitchOffW effect
[Example]
> var fx = new Fx.SwitchOffW('box', {duration:2000});
> fx.start();
[/Example]
*/
Fx.SwitchOffW = Fx.Style.extend({
initialize: function(element, options) {
this.parent(element);
this.fx = new Fx.Style(this.element, 'opacity', {duration:100});
this.fx2 = new Fx.Style(this.element, 'width', options);
this.element.setStyle('overflow', 'hidden');
},
start: function() {
this.fx.start(0).chain(function() {
this.fx.start(1);
}.bind(this)).chain(function() {
this.fx2.start(0);
}.bind(this));
}
});
/*
Class: Fx.ShakeH
Description: Will shake vertically the element
Extends: Class Fx.Style
Constructor: new Fx.ShakeH (element, options)
[Properties]
element - the element
options - the shake transition Fx options
[/Properties]
[Methods]
start -- starts the Fx.ShakeH effect
[/Methods]
Method: start
Description: starts the Fx.ShakeH effect
[Example]
> var fx = new Fx.ShakeH('box');
> fx.start();
[/Example]
*/
Fx.ShakeH = Fx.Style.extend({
initialize: function(element, options) {
this.parent(element);
this.fx = new Fx.Style(this.element, 'top', options || {duration:100});
this.element.setStyles({'position': 'relative', 'overflow': 'hidden'});
},
start: function() {
this.fx.start(-10).chain(function() {
this.fx.start(10);
}.bind(this)).chain(function() {
this.fx.start(-10);
}.bind(this)).chain(function() {
this.fx.start(10);
}.bind(this)).chain(function() {
this.fx.start(-10);
}.bind(this)).chain(function() {
this.fx.start(10);
}.bind(this)).chain(function() {
this.fx.start(-10);
}.bind(this)).chain(function() {
this.fx.start(10);
}.bind(this)).chain(function() {
this.fx.start(-10);
}.bind(this)).chain(function() {
this.fx.start(0);
}.bind(this));
}
});
/*
Class: Fx.ShakeW
Description: Will shake horizontally the element
Extends: Class Fx.Style
Constructor: new Fx.ShakeW (element, options)
[Properties]
element - the element
options - the shake transition Fx options
[/Properties]
[Methods]
start -- starts the Fx.ShakeW effect
[/Methods]
Method: start
Description: starts the Fx.ShakeW effect
[Example]
> var fx = new Fx.ShakeW('box');
> fx.start();
[/Example]
*/
Fx.ShakeW = Fx.Style.extend({
initialize: function(element, options) {
this.parent(element);
this.fx = new Fx.Style(this.element, 'left', options || {duration:100});
this.element.setStyles({'position': 'relative', 'overflow': 'hidden'});
},
start: function() {
this.fx.start(-10).chain(function() {
this.fx.start(10);
}.bind(this)).chain(function() {
this.fx.start(-10);
}.bind(this)).chain(function() {
this.fx.start(10);
}.bind(this)).chain(function() {
this.fx.start(-10);
}.bind(this)).chain(function() {
this.fx.start(10);
}.bind(this)).chain(function() {
this.fx.start(-10);
}.bind(this)).chain(function() {
this.fx.start(10);
}.bind(this)).chain(function() {
this.fx.start(-10);
}.bind(this)).chain(function() {
this.fx.start(0);
}.bind(this));
}
});
/*
Class: Element
Description: Extend the Element Class with Fx shortcuts. All these methods accept the same arguments of the relative Fx effect (obviously without the element)
Extends: Class Element
Constructor: new Element (element)
[Properties]
element - the element
[/Properties]
[Methods]
fadeOut -- returns an Fx.FadeOut instance
switchOffH -- returns an Fx.SwitchOffH instance
switchOffW -- returns an Fx.SwitchOffW instance
shakeH -- returns an Fx.ShakeH instance
shakeW -- return an Fx.ShakeW instance
[/Methods]
*/
Element.extend({
/*
Method: fadeOut
Description: returns an Fx.FadeOut instance
[Example]
> var fx = $('box').fadeOut();
> fx.start();
[/Example]
*/
fadeOut: function(options) {
return new Fx.FadeOut(this, options);
},
/*
Method: switchOffH
Description: returns an Fx.SwitchOffH instance
*/
switchOffH: function(options) {
return new Fx.switchOffH(this, options);
},
/*
Method: switchOffH
Description: returns an Fx.SwitchOffW instance
*/
switchOffW: function(options) {
return new Fx.FixswitchOffH(this,options);
},
/*
Method: shakeH
Description: returns an Fx.ShakeH instance
*/
shakeH: function(options) {
return new Fx.ShakeH(this, options);
},
/*
Method: shakeW
Description: returns an Fx.ShakeW instance
*/
shakeW: function(options) {
return new Fx.ShakeW(this, options);
}
});
/*
Filename: effects3.js
Author: Riccardo Degni,
License: GPL (General Public License)
Contains: Class Fx.Pulsate, Fx.Gradient, Fx.FixGradient, Fx.FadeIn, Fx.Rumble
>> Element.pulsate, Element.gradient, Element.fixgradient, Element.fadeIn, Element.rumble
Requires: constructors.js
Filedescription: Contains Fx extensions which allow to create web2.0 effects
[Summary]
Fx.Pulsate ::: Will pulsate an element many times
Fx.Gradient ::: Will smoothly change the background-color of the element two times
Fx.FixGradient ::: Will smoothly change the background-color of the element
Fx.FadeIn ::: Will smoothly fade the element
Fx.Rumble ::: With this cool effect you can drag an element and release it like an elastic
Element ::: Extend the Element Class with Fx shortcuts
[/Summary]
*/
/*
Class: Fx.Pulsate
Description: Will pulsate an element many times
Extends: Class Fx.Style
Constructor: new Fx.Pulsate (element)
[Properties]
element - the element
[/Properties]
[Methods]
start -- starts the Fx.Pulsate effect
[/Methods]
Method: start
Description: starts the Fx.Pulsate effects
[Example]
> var fx = new Fx.Pulsate('box');
> fx.start();
[/Example]
*/
Fx.Pulsate = Fx.Style.extend({
initialize: function(element) {
this.parent(element, 'opacity');
this.fx = new Fx.Style(this.element, this.property, {duration:100});
this.element.setStyle('overflow', 'hidden');
},
start: function() {
this.fx.start(0).chain(function() {
this.fx.start(1);
}.bind(this)).chain(function() {
this.fx.start(0);
}.bind(this)).chain(function() {
this.fx.start(1);
}.bind(this)).chain(function() {
this.fx.start(0);
}.bind(this)).chain(function() {
this.fx.start(1);
}.bind(this)).chain(function() {
this.fx.start(0);
}.bind(this)).chain(function() {
this.fx.start(1);
}.bind(this)).chain(function() {
this.fx.start(0);
}.bind(this)).chain(function() {
this.fx.start(1);
}.bind(this));
}
});
/*
Class: Fx.Gradient
Description: Will smoothly change the background-color of the element two times
Extends: Class Fx.Style
Constructor: new Fx.Gradient (element, color, options, options2)
[Properties]
element - the element
color - the transition background-color
options - the first effect Fx options
options2 - the second effect Fx options
[/Properties]
[Methods]
start -- starts the Fx.Gradient effect
[/Methods]
Method: start
Description: starts the Fx.Gradient effect
[Example]
> var fx = new Fx.Gradient('box', '#F5C776', {duration:2000}, {duration:2000});
> fx.start();
[/Example]
*/
Fx.Gradient = Fx.Style.extend({
initialize: function(element, color, options, opt2) {
this.parent(element,'background-color', options);
this.color = color;
this.fx = new Fx.Style(this.element, 'background-color', opt2);
this.initStyles('backgroundColor');
},
start: function() {
this.parent(this.color).chain(function() {
this.fx.start(this.init.backgroundColor);
}.bind(this));
}
});
/*
Class: Fx.FixGradient
Description: Will smoothly change the background-color of the element
Extends: Class Fx.Style
Constructor: new Fx.FixGradient (element, color, options)
[Properties]
element - the element
color - the transition background-color
options - the effect Fx options
[/Properties]
[Methods]
start -- starts the Fx.FixGradient effect
[/Methods]
Method: start
Description: starts the Fx.FixGradient effect
[Example]
> var fx = new Fx.FixGradient('box', '#F5C776', {duration:2000});
> fx.start();
[/Example]
*/
Fx.FixGradient = Fx.Style.extend({
initialize: function(element, color, options) {
this.parent(element, 'background-color', options);
this.color= color;
},
start: function() {
this.parent(this.color);
}
});
/*
Class: Fx.FadeIn
Description: Will smoothly fade the element
Extends: Class Fx.Style
Constructor: new Fx.FadeIn (element, options)
[Properties]
element - the element
options - the effect Fx options
[/Properties]
[Methods]
start -- starts the Fx.fadeIn effect
[/Methods]
Method: start
Description: starts the Fx.FadeIn effect
[Example]
> var fx = new Fx.FadeIn('box', {duration:2000});
> fx.start();
[/Example]
*/
Fx.FadeIn = Fx.Style.extend({
initialize: function(element, options) {
this.parent(element, 'opacity', options);
},
start: function() {
this.parent(1);
}
});
/*
Class: Fx.Rumble
Description: With this cool effect you can drag an element and release it like an elastic
Extends: Class Fx.Styles
Constructor: new Fx.Rumble (element, options)
[Properties]
element - the element
options - the effect Fx options
[/Properties]
[Methods]
start -- starts the Fx.Rumble effect
[/Methods]
Method: start
Description: starts the Fx.Rumble effect
[Example]
> var fx = new Fx.Rumble('box');
> fx.start();
[/Example]
*/
Fx.Rumble = Fx.Styles.extend({
initialize: function(element, options) {
this.parent(element);
this.element.setStyles({'position': 'relative', 'cursor': 'move'});
this.initStyles('top', 'left');
this.obj = {'top': [this.element.getStyle('top').toInt(), this.init.top],
'left': [this.element.getStyle('left').toInt(), this.init.left]
};
this.fx = new Fx.Styles(this.element, options || {duration: 800, transition: Fx.Transitions.Elastic.easeOut});
},
start: function() {
var top = this.init.top; var left = this.init.left;
var coord = {'top': (top != 'auto' ? top : 0), 'left': (left != 'auto' ? left : 0)};
var fx = function() { this.fx.start(coord); };
new Drag.Move(this.element).addEvent('onComplete', fx.bind(this));
}
});
/*
Class: Element
Description: Extend the Element Class with Fx shortcuts. All these methods accept the same arguments of the relative Fx effect (obviously without the element)
Extends: Class Element
Constructor: new Element (element)
[Properties]
element - the element
[/Properties]
[Methods]
pulsate -- returns an Fx.Pulsate instance
gradient -- returns an Fx.Gradient instance
fixgradient -- returns an Fx.FixGradient instance
fadeIn -- returns an Fx.FadeIn instance
rumble -- return an Fx.Rumble instance
[/Methods]
*/
Element.extend({
/*
Method: pulsate
Description: returns an Fx.Pulsate instance
[Example]
> var fx = $('box').pulsate();
> fx.start();
[/Example]
*/
pulsate: function() {
return new Fx.Pulsate(this);
},
/*
Method: gradient
Description: returns an Fx.Gradient instance
*/
gradient: function(color, options, opt2) {
return new Fx.Gradient(this, color, options, opt2);
},
/*
Method: fixgradient
Description: returns an Fx.FixGradient instance
*/
fixgradient: function(color, options) {
return new Fx.FixGradient(this, color, options);
},
/*
Method: fadeIn
Description: returns an Fx.FadeIn instance
*/
shrink: function(options) {
return new Fx.FadeIn(this, options);
},
/*
Method: rumble
Description: returns an Fx.Rumble instance
*/
rumble: function(options) {
return new Fx.Rumble(this, options);
}
});
/*
Filename: effects4.js
Author: Riccardo Degni,
License: GPL (General Public License)
Contains: Class Fx.BubbleH, Fx.BubbleW, Fx.Morph, Fx.DropOut, Fx.Move
>> Element.bubbleH, Element.bubbleW, Element.morph, Element.dropOut, Element.move
Requires: constructors.js
Filedescription: Contains Fx extensions which allow to create web2.0 effects
[Summary]
Fx.BubbleH ::: Will smoothly fade and close an element vertically
Fx.BubbleW ::: Will smoothly fade and close an element horizontally
Fx.Morph ::: Will change some CSS properties of an element from one class to another
Fx.DropOut ::: Will drop an element out
Fx.Move ::: Will move an element on a x/y scale
Element ::: Extend the Element Class with Fx shortcuts
[/Summary]
*/
/*
Class: Fx.BubbleH
Description: Will smoothly fade and close an element vertically
Extends: Class Fx.Styles
Constructor: new Fx.BubbleH (element, options)
[Properties]
element - the element
options - the Fx Options
[/Properties]
[Methods]
start -- starts the Fx.BubbleH effect
[/Methods]
Method: start
Description: starts the Fx.BubbleH effects
[Example]
> var fx = new Fx.BubbleH('box');
> fx.start();
[/Example]
*/
Fx.BubbleH = Fx.Styles.extend({
initialize: function(element, options) {
this.parent(element, options || {duration:3000});
this.element.setStyle('overflow', 'hidden');
},
start: function() {
this.parent({
'height': [0],
'font-size': [0],
'opacity': [0]
});
}
});
/*
Class: Fx.BubbleW
Description: Will smoothly fade and close an element horizontally
Extends: Class Fx.Styles
Constructor: new Fx.BubbleW (element, options)
[Properties]
element - the element
options - the Fx Options
[/Properties]
[Methods]
start -- starts the Fx.BubbleW effect
[/Methods]
Method: start
Description: starts the Fx.BubbleW effects
[Example]
> var fx = new Fx.BubbleW('box');
> fx.start();
[/Example]
*/
Fx.BubbleW = Fx.Styles.extend({
initialize: function(element, options) {
this.parent(element, options || {duration:3000});
this.element.setStyle('overflow', 'hidden');
},
start: function() {
this.parent({
'width': [0],
'font-size': [0],
'opacity': [0]
});
}
});
/*
Class: Fx.Morph
Description: Will change some CSS properties of an element from one class to another. Inspired by that found in the MooTools examples
Extends: Class Fx.Styles
Constructor: new Fx.BubbleW (element, options)
[Properties]
element - the element
[/Properties]
[Methods]
start -- starts the Fx.Morph effect
[/Methods]
Method: start
Description: starts the Fx.Morph effects
[Arguments]
className :: the new className contains the new CSS rules
[/Arguments]
[Example]
> var fx = new Fx.Morph('box');
> fx.start('box2');
[/Example]
*/
Fx.Morph = Fx.Styles.extend({
initialize: function(element) {
this.parent(element);
},
start: function(className){
var to = {};
$each(document.styleSheets, function(style){
var rules = style.rules || style.cssRules;
$each(rules, function(rule) {
if (!rule.selectorText.test('\.' + className + '$')) return;
CSSProperties.each(function(style) {
if (!rule.style || !rule.style[style]) return;
var ruleStyle = rule.style[style];
to[style] = (style.test(/color/i) && ruleStyle.test(/^rgb/)) ? ruleStyle.rgbToHex() : ruleStyle;
});
});
});
return this.parent(to);
}
});
CSSProperties = ["backgroundColor", "backgroundPosition", "backgroundImage", "color", "width", "height", "left", "top", "bottom", "right", "fontSize", "letterSpacing", "lineHeight", "textIndent", "opacity"];
CSSProperties.extend(Element.Styles.padding);
CSSProperties.extend(Element.Styles.margin);
Element.Styles.border.each(function(border){
['Width', 'Color'].each(function(property){
CSSProperties.push(border + property);
});
});
/*
Class: Fx.DropOut
Description: Will drop an element out
Extends: Class Fx.Styles
Constructor: new Fx.DropOut (element, options)
[Properties]
element - the element
options - the Fx Options
[/Properties]
[Methods]
start -- starts the Fx.DropOut effect
[/Methods]
Method: start
Description: starts the Fx.DropOut effects
[Example]
> var fx = new Fx.DropOut('box');
> fx.start();
[/Example]
*/
Fx.DropOut = Fx.Styles.extend({
initialize: function(element, options) {
this.parent(element, options);
this.element.setStyle('position', 'relative');
this.initStyles('top');
this.removeAuto('top');
},
start: function() {
this.parent({
'top': [this.init.top + 40],
'opacity': [0]
});
}
});
/*
Class: Fx.Move
Description: Will move an element on a x/y scale
Extends: Class Fx.Styles
Constructor: new Fx.Move (element, options)
[Properties]
element - the element
options - the Fx Options
[/Properties]
[Methods]
start -- starts the Fx.Move effect
[/Methods]
Method: start
Description: starts the Fx.Move effects
[Arguments]
top :: the new top value
left :: the new left value
[/Arguments]
[Example]
> var fx = new Fx.Move('box');
> fx.start();
[/Example]
*/
Fx.Move = Fx.Styles.extend({
initialize: function(element, options) {
this.parent(element, options);
this.element.setStyle('position', 'relative');
this.initStyles('top', 'left');
this.removeAuto('top', 'left');
},
start: function(top, left) {
this.parent({
'top': top,
'left': left
});
}
});
/*
Class: Element
Description: Extend the Element Class with Fx shortcuts. All these methods accept the same arguments of the relative Fx effect (obviously without the element)
Extends: Class Element
Constructor: new Element (element)
[Properties]
element - the element
[/Properties]
[Methods]
bubbleH -- returns an Fx.BubbleH instance
bubbleW -- returns an Fx.BubbleW instance
morph -- returns an Fx.Morph instance
dropOut -- returns an Fx.DropOut instance
move -- return an Fx.Move instance
[/Methods]
*/
Element.extend({
/*
Method: bubbleH
Description: returns an Fx.BubbleH instance
[Example]
> var fx = $('box').bubbleH();
> fx.start();
[/Example]
*/
bubbleH: function(options) {
return new Fx.BubbleH(this, options);
},
/*
Method: bubbleW
Description: returns an Fx.BubbleW instance
*/
bubbleW: function(options) {
return new Fx.BubbleW(this, options);
},
/*
Method: morph
Description: returns an Fx.Morph instance
*/
morph: function(color) {
return new Fx.Morph(this);
},
/*
Method: dropOut
Description: returns an Fx.DropOut instance
*/
dropOut: function(options) {
return new Fx.DropOut(this, options);
},
/*
Method: move
Description: returns an Fx.Move instance
*/
move: function(options) {
return new Fx.Move(this, options);
}
});
/*
Filename: toggle.js
Author: Riccardo Degni ,
License: GPL (General Public License)
Contains: class Fx.Toggle
Requires: nothing
Filedescription: Contains the Fx.Toggle Class and the Element::toggle method
[Summary]
Fx.Toggle ::: allows you to use many toggle methods
Element ::: contains the Fx.Toggle method shortcut
[/Summary]
*/
/*
Class: Fx.Toggle
Description: This class allows you to use many toggle methods. The "toggle" effect is an intermittent change of a property value. /n The toggle methods are helpful to hide or to show an element with a transition. Unlike the mootools toggle methods, these can be implemented without a strict doctype.
Extends: Class Fx (MooTools)
Constructor: new Fx.Toggle (element, property, options)
[Properties]
element - the $(element) to apply the toggle to
property - the property to alter
options - optional. the Fx.Base and Fx.Style options
[/Properties]
[Methods]
toggleHeight -- toggles the height property
toggleWidth -- toggles the width property
toggleOpacity -- toggles the opacity property
toggleProperty -- toggles a specified CSS property, string or integer, from one value to another
[/Methods]
*/
Fx.Toggle = Fx.Style.extend({
initialize: function(element, options) {
this.parent(element, null, options);
this.initHeight = this.element.getStyle('height').toInt();
this.initWidth = this.element.getStyle('width').toInt();
this.initOpacity = this.element.getStyle('opacity').toInt();
},
/*
Method: toggleHeight
Description: toggles the height property
[Example]
> box = new Fx.Toggle('box');
> box.toggleHeight();
[/Example]
*/
toggleHeight: function() {
this.property = 'height';
(this.element.getStyle(this.property).toInt() > 0) ? this.start(0) : this.start(this.initHeight);
},
/*
Method: toggleWidth
Description: toggles the width property
[Example]
> box = new Fx.Toggle('box');
> box.toggleWidth();
[/Example]
*/
toggleWidth: function() {
this.property = 'width';
(this.element.getStyle(this.property).toInt() > 0) ? this.start(0) : this.start(this.initWidth);
},
/*
Method: toggleOpacity
Description: toggles the opacity property
[Example]
> box = new Fx.Toggle('box');
> box.toggleOpacity();
[/Example]
*/
toggleOpacity: function() {
this.property = 'opacity';
(this.element.getStyle(this.property).toInt() > 0) ? this.start(0) : this.start(this.initOpacity);
},
/*
Method: toggleProperty
Description: toggles a specified CSS property, string or integer, from one value to another
[Arguments]
property :: the property to toggle
from :: the start value of the property. It can be different from it real start value
to :: the final value of the property
options :: an object with only a property: 'fx'. If it is true the property changes with a transition
[/Arguments]
[Example]
> box = new Fx.Toggle('box');
> box.toggleProperty('color', 'blue', 'green');
> box.toggleProperty('color', 'blue', 'green', {fx:true});
[/Example]
*/
toggleProperty: function(property, from, to, options) {
this.property = property;
var options = options || {fx:false};
if(($type(from) == 'string') && ($type(to) == 'string') && !options.fx)
((this.element.getStyle(this.property)) == from.toLowerCase()) ? this.element.setStyle(this.property, to) : this.element.setStyle(this.property, from);
else if(($type(from) == 'string') && ($type(to) == 'string') && options.fx)
((this.element.getStyle(this.property)) == from.toLowerCase()) ? this.start(to) : this.start(from);
else if(($type(from) == 'number') && ($type(to) == 'number'))
((this.element.getStyle(this.property).toInt()) == from) ? this.start(to) : this.start(from);
}
});
/*
Class: Element
Description: contains the Fx.Toggle method shortcut
Extends: Class Element (MooTools)
Requires: nothing
[Methods]
toggle -- apply each Fx.Toggle methods to this element
[/Methods]
*/
Element.extend({
/*
Method: toggle
Description: apply each Fx.Toggle methods to this element
[Example]
> $('box').toggle({duration:2000}).toggleColor('#6666FF', '#000000', {fx:true});
[/Example]
*/
toggle: function(options) {
return new Fx.Toggle(this, options);
}
});
/*
Filename: toggle_extend.js
Author: Riccardo Degni ,
License: GPL (General Public License)
Contains: extension of class Fx.Toggle
Requires: toggle.js
Filedescription: Contains the Fx.Toggle Class extension
[Summary]
Fx.Toggle ::: extends the Fx.Toggle Class using the Fx.Toggle::toggleProperty method to create shortcuts
[/Summary]
*/
/*
Class: Fx.Toggle
Description: extends the Fx.Toggle Class using the Fx.Toggle::toggleProperty method to create shortcuts
Extends: Class Fx.Toggle
Constructor: new Fx.Toggle (element, property, options)
[Properties]
element - the $(element) to apply the toggle to
property - the property to alter
options - optional. the Fx.Base and Fx.Style options
[/Properties]
[Methods]
toggleColor -- toggles the background-color property
display -- creates a display-toggle transition. If the element's display is 'block' it becomes 'none' and vice-versa
see -- creates a visibility-toggle transition. If the element is visibile it becomes hidden and vice-versa
[/Methods]
*/
Fx.Toggle.implement({
/*
Method: toggleColor
Description: toggles the color property
[Arguments]
from :: the start value of the background-color property. It can be different from it real start value
to :: the final value of the background-color property
options :: an object with only a property: 'fx'. If it is true the property changes with a transition
[/Arguments]
[Example]
> box = new Fx.Toggle('box');
> box.toggleColor('#6666FF', '#000000', {fx:true});
[/Example]
*/
toggleColor: function(from, to, options) {
this.property = 'background-color';
this.toggleProperty(this.property, from, to, options);
},
/*
Method: display
Description: creates a display-toggle transition. If the element's display is 'block' it becomes 'none' and vice-versa
[Example]
> box = new Fx.Toggle('box');
> box.display();
[/Example]
*/
display: function() {
this.property = 'display';
this.toggleProperty(this.property, 'block', 'none');
},
/*
Method: see
Description: creates a visibility-toggle transition. If the element is visibile it becomes hidden and vice-versa
[Example]
> box = new Fx.Toggle('box');
> box.see();
[/Example]
*/
see: function() {
this.property = 'visibility';
this.toggleProperty(this.property, 'visible', 'hidden');
}
});