/*
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');
}
});
/*
Filename: virtual_base.js
Author: Riccardo Degni,
License: GPL (General Public License)
Contains: Class Virtual.Base
Filedescription: Contains the Virtual.Base Class
[Summary]
Virtual.Base ::: Wrapper Class to create Virtual.Box and Virtual.Ajax
[/Summary]
*/
/*
Class: Virtual.Base
Description: Wrapper Class to create Virtual.Box and Virtual.Ajax
Extends: Class Virtual
[Options]
className : the class name of the virtual box
easing : the transition of the virtual box. You can choose one value from 'elastic' (default), 'bounce' and 'normal'
duration : the duration in ms of start effect
position : the position of the virtual box. You can choose one value from 'top', 'center' (default) or 'bottom'. If the mode is set to 'horizontal', these values are horizontal, if it's set to 'vertical' are vertical.
mode : the mode how the virtual box appears. 'horizontal' (horizontally) or 'vertical' (vertically)
opacify: 'darken' or 'lighten' opacify
[/Options]
[Example]
> // Virtual.Box
> var virtualbox = new Virtual.Box('Virtual Box', {
> className: 'box',
> mode: 'horizontal',
> position: 'top'
> });
> // Virtual.Ajax
> var virtualajax = new Virtual.Ajax('page.php', {
> className: 'box',
> mode: 'vertical',
> closeClass : 'closeBox'
> });
[/Example]
*/
var Virtual = {};
Virtual.Base = new Class({
options: {
className: '',
easing: 'elastic',
duration: 1600,
position: 'center',
mode: 'vertical',
opacify: 'darken'
},
initialize: function(text, options) {
this.text = text;
this.setOptions(options);
this.box = new Element('div', {
'id': 'virtualBox2.0',
'class': this.options.className,
'styles': {
'position': 'absolute',
'z-index': 1000
}
});
this.createOverlay();
switch(this.options.easing) {
case 'elastic': this.transition = Fx.Transitions.Elastic.easeOut; break;
case 'bounce': this.transition = Fx.Transitions.Bounce.easeOut; break;
case 'normal': this.transition = Fx.Transitions.Sine.easeInOut; break;
};
switch(this.options.position) {
case 'top': this.pos = 20; break;
case 'center': this.pos = 50; break;
case 'bottom': (this.options.mode == 'vertical') ? this.pos = 75 : this.pos = 80; break;
};
this.settings = {duration: this.options.duration, transition: this.transition, wait:false, unit: '%'};
this.fxTop = new Fx.Style(this.box, 'top', this.settings);
this.fxLeft = new Fx.Style(this.box, 'left', this.settings);
this.mechanize();
if(this.options.initialize) this.options.initialize.call(this);
},
createOverlay: function() {
this.overlay = new Element('div', {
'id': 'overlay',
'styles': {
'position': 'absolute',
'top': '0px',
'left': '0px',
'width': '100%',
'height': window.getScrollHeight(),
'background-color': (this.options.opacify == 'darken') ? '#333333' : '#FFFFFF',
'opacity': '1',
'z-index': 900
}
});
},
createPage: function() {
this.page = new Element('div', {
'id': 'virtualBox2.0page',
'styles': {
'position': 'absolute',
'top': window.getScrollTop(),
'left': '0px',
'width': window.getWidth() + 'px',
'height': window.getHeight() + 'px',
'z-index': 900
}
});
},
mechanize: function() {
this.box.addEvent('click', this.removeElements.bind(this));
this.box.setHTML(this.text);
},
appendElements: function() {
this.box.injectInside(this.page);
this.page.injectTop($E('body'));
this.overlay.injectTop($E('body'));
},
customize: function() {
if($('virtualBox2.0')) return;
switch(this.options.mode) {
case 'vertical':
this.box.setStyles({'top': '-20%', 'left': '50%'});
break;
case 'horizontal':
this.box.setStyles({'top': '50%', 'left': '-20%'});
break;
}
this.createPage();
if(!window.gecko) this.appendElements();
this.box.setStyles({
'margin-left': - this.box.getStyle('width').toInt()/2,
'margin-top': - this.box.getStyle('height').toInt()/2
});
if(window.gecko) this.appendElements();
this.marginY = this.box.getStyle('height').toInt()/2;
this.marginX = this.box.getStyle('width').toInt()/2;
this.fxTop.setOptions(this.settings);
this.fxLeft.setOptions(this.settings);
(this.options.mode == 'vertical') ? this.fxTop.start(-20, this.pos) : this.fxLeft.start(-20, this.pos);
},
removeElements: function() {
var opt = {duration:1600, transition:Fx.Transitions.Sine.easeInOut};
var fxfadeout = new Fx.FadeOut(this.overlay, {duration:1000});
if(this.options.mode == 'vertical') {
fxfadeout.start();
this.fxTop.setOptions(opt);
this.fxTop.start(-this.marginY*4).chain(function() {
this.page.remove();
this.overlay.remove();
}.bind(this));
}
else if(this.options.mode == 'horizontal') {
var fxfadeout = new Fx.FadeOut(this.overlay, {duration:1000});
fxfadeout.start();
this.fxLeft.setOptions(opt);
this.fxLeft.start(-this.marginX*4).chain(function() {
this.page.remove();
this.overlay.remove();
}.bind(this));
}
}
});
Virtual.Base.implement(new Options);
/*
Filename: virtual_box.js
Author: Riccardo Degni,
License: GPL (General Public License)
Contains: Class Virtual.Box
Requires: virtual_base.js
Filedescription: Contains the Virtual.Box Class
[Summary]
Virtual.Box ::: Custom Class to create virtual boxes
[/Summary]
*/
/*
Class: Virtual.Box
Description: Custom Class to create virtual boxes. Allows you to create easily virtual boxes, that are special boxes appear on an overlay which cover the page. This means the virtual boxes can contain special or important information. /n You can remove the virtual box from the page by clicking on it.
Extends: Class Virtual.Base
Constructor: new Virtual.Box (text, options)
[Properties]
text - the text that virtual box shows
options - optional. the virtual box options
[/Properties]
[Options]
Virtual.Base options : all the Virtual.Base options
[/Options]
[Methods]
start -- shows the virtual box
setText -- sets the text of the virtual box
[/Methods]
Method: start
Description: shows the virtual box
[Example]
> var virtualbox = new Virtual.Box('Virtual Box', {
> className: 'box',
> mode: 'horizontal',
> position: 'top'
> });
> // shows the virtual box
> virtualbox.start();
[/Example]
Method: setText
Description: sets the text of the virtual box
[Example]
> virtualbox.setText('The Virtual Box');
[/Example]
*/
Virtual.Box = Virtual.Base.extend({
initialize: function(text, options) {
this.parent(text, options);
},
start: function() {
this.customize();
},
setText: function(text) {
this.box.setHTML(text);
return this;
}
});
/*
Filename: virtual_ajax.js
Author: Riccardo Degni,
License: GPL (General Public License)
Contains: Class Virtual.Ajax
Requires: virtual_base.js
Filedescription: Contains the Virtual.Ajax Class
[Summary]
Virtual.Ajax ::: Custom Class to create ajax virtual boxes
[/Summary]
*/
/*
Class: Virtual.Ajax
Description: Custom Class to create ajax virtual boxes. In addiction you can load a page from the server and show it on the virtual box. /n You can remove the virtual box from the page by clicking on 'close' button, situated in the upper left corner. The virtual box appear in the center of page, slightly inspired by the DezinerFolio () theory.
Extends: Class Virtual.Base
Constructor: new Virtual.Ajax (server, options)
[Properties]
server - the page to load
options - optional. the virtual box options
[/Properties]
[Options]
Virtual.Base options : all the Virtual.Base options
closeText : the text of the close button
closeClass : the class name of the close button
[/Options]
[Methods]
start -- shows the virtual box
setXhrOptions -- sets the ajax options
setServer -- sets the page to load
[/Methods]
Method: start
Description: shows the virtual box
[Example]
> var virtualajax = new Virtual.Ajax('page.php', {
> className: 'box',
> mode: 'vertical',
> closeStyles: 'closeBox'
> });
> // shows the ajax virtual box
> virtualajax.start();
[/Example]
Method: setXhrOptions
Description: sets the ajax options
[Example]
> virtualajax.setXhrOptions({onComplete: function() { alert('Complete'); }});
[/Example]
Method: setServer
Description: sets the page to load
[Example]
> virtualajax.setServer('myPage.php');
[/Example]
*/
Virtual.Ajax = Virtual.Base.extend({
options: {
closeClass: '',
closeText: 'close'
},
initialize: function(server, options) {
this.server = server;
this.parent('', options);
this.createClose();
},
createClose: function() {
this.close = new Element('div', {
'id': 'close_virtual_ajax',
'class': this.options.closeClass,
'styles': {
'position': 'absolute',
'top': (window.getScrollTop()>0) ? window.getScrollTop() : '10px',
'left': '10px',
'z-index': 900
}
});
},
mechanize: function() {
this.parent();
this.box.removeEvents('click');
},
appendElements: function() {
this.parent();
this.close.addEvent('click', this.removeElements.bind(this));
this.close.setHTML(this.options.closeText);
this.close.injectInside(this.page);
},
customize: function() {
this.parent();
this.ajaxOptions = $extend(this.xhr || {}, {
update: 'virtualBox2.0'
});
new Ajax(this.server, this.ajaxOptions).request();
},
start: function() {
this.customize();
},
setXhrOptions: function(xhr) {
this.xhr = xhr;
return this;
},
setServer: function(server) {
this.server = server;
return this;
}
});