/*
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: custom_alert.js
Author: Riccardo Degni,
License: GPL (General Public License)
Contains: Class Custom.Alert
Requires: constructors.js
Filedescription: It allows you to create custom alert boxes, without overwriting the standard window.alert method. /n The boxes created with Custom.Alert Class are MODAL and FIXED, like the standard alert boxes.
[Summary]
Custom.Alert ::: Custom Class to create customized alert
[/Summary]
*/
/*
Class: Custom.Alert
Description: Custom Class to create customized alert. /n The styles of your custom alert boxes can be different, and you may have many different custom alert boxes in the same page. The custom alert box consist of three zones:
[List]
[li] the alertbox, is the box that contains the other zones
[li] the alerthead, is the header of the alert box. (contains the title)
[li] the alertbody, is the content of the alert box (contains the 'OK' button)
[/List]
>> You can alter the normal style of the custom alert creating a css style for this three objects, and you may set an opacity transition when alert box appears and disappears. (unlike the standard)
Extends: Class Custom
Constructor: new Custom.Alert (title, text, options)
[Properties]
title - a string represents the title of the alert
text - a string represents the content text of the alert
options - optional. an object that contains the class names of the alert box's zones. Allows you to set some general options like button text
[/Properties]
[Options]
opacify : if true the alert appears and disappears with an opacity transition
alertbox : see above
alerthead : see above
alertbody : see above
height : the alert height. Default '100px'
width : the alert width. Default '300px'
buttonText : the text of the alert confirm button. Defaults to 'OK'
[/Options]
[Methods]
create -- creates the custom alert box
setText -- set the text of the custom alert
setTitle -- set the title of the custom alert
[/Methods]
*/
Custom.Alert = new Class({
options: {
height: '100px',
width: '300px',
buttonText: 'OK',
opacify: true,
alertbox: null,
alerthead: null,
alertbody: null
},
initialize: function(title, text, options) {
this.title = title;
this.text = text;
this.setOptions(options);
this.alertbox = new Element('div', {
'id': 'customAlert',
'styles': {
'position': 'fixed',
'top': '50%',
'left': '50%',
'z-index': 1000,
'height': this.options.height,
'width': this.options.width
}
});
this.overlay = new Element('div', {
'id': 'customAlertOverlay',
'styles': {
'position': 'absolute',
'top': '0px',
'left': '0px',
'width': '100%',
'height': window.getScrollHeight(),
'background-image':'url(g.gif)',
'z-index': 900
}
});
this.mechanize();
this.fx = new Fx.Style(this.alertbox, 'opacity', {duration:1000});
if(this.options.initialize) this.options.initialize.call(this);
},
/*
Method: create
Description: creates the custom alert box
[Example]
> var ca = new Custom.Alert('custom alert', 'You cannot access at this page',
> {alertbox:'cabox', alerthead: 'cahead', alertbody: 'cabody'});
>
> ca.create();
[/Example]
*/
create: function() {
this.customize();
},
mechanize: function() {
if(this.options['alertbox']) this.alertbox.addClass(this.options['alertbox']);
this.alertbox.setStyles({
'margin-left': - this.alertbox.getStyle('width').toInt()/2,
'margin-top': - this.alertbox.getStyle('height').toInt()/2
});
this.head = new Element('div').injectInside(this.alertbox);
if(this.options.alerthead) this.head.addClass(this.options['alerthead']);
this.head.appendText(this.title);
this.content = new Element('div').injectInside(this.alertbox);
if(this.options.alerthead) this.content.addClass(this.options['alertbody']);
this.content.appendText(this.text);
this.closebox = new Element('div').injectInside(this.alertbox);
this.closebox.setProperty('align', 'center');
this.button = new Element('a').injectInside(this.closebox);
this.button.setProperty('href', '#');
this.button.appendText(this.options.buttonText);
this.button.addEvent('click', function(event) {
var event = new Event(event).preventDefault();
});
if(this.options.opacify) this.button.addEvent('click', this.opacify.bind(this));
else this.button.addEvent('click', this.remove.bind(this));
},
customize: function() {
if($('customAlert')) return;
this.alertbox.injectInside(this.overlay);
this.overlay.injectInside($E('body'));
if(this.options.opacify) this.alertbox.setStyle('opacity', 0);
this.fx.start(1);
},
opacify: function() {
this.fx.start(0).chain(function() {
this.alertbox.remove();
this.overlay.remove();
}.bind(this));
},
remove: function() {
this.alertbox.remove();
this.overlay.remove();
},
/*
Method: setText
Description: set the text of the custom alert
[Example]
> // change the previous text
> ca.setText('Custom Alert with some new text');
[/Example]
*/
setText: function(text) {
this.content.setHTML(text);
return this;
},
/*
Method: setTitle
Description: set the title of the custom alert
[Example]
> // change the previous title
> ca.setTitle('A new Custom Alert');
[/Example]
*/
setTitle: function(title) {
this.title = title;
return this;
}
});
Custom.Alert.implement(new Options);
/*
Filename: custom_confirm.js
Author: Riccardo Degni,
License: GPL (General Public License)
Contains: Class Custom.Confirm
Requires: constructors.js
Filedescription: It allows you to create custom confirm boxes, without overwriting the standard window.confirm method. /n The boxes created with Custom.Confirm Class are MODAL and FIXED, like the standard confirm boxes.
[Summary]
Custom.Confirm ::: Custom Class to create customize confirm
[/Summary]
*/
/*
Class: Custom.Confirm
Description: Custom Class to create customized confirm. /n The styles of your custom confirm boxes can be different, and you may have many different custom confirm boxes in the same page. The custom confirm box consist of three zones:
[List]
[li] the confirmbox, is the box that contains the other zones
[li] the confirmhead, is the header of the confirm box. (contains the title)
[li] the confirmbody, is the content of the confirm box (contains the 'OK' button)
[/List]
>> You can alter the normal style of the custom confirm creating a css style for this three objects, and you may set an opacity transition when confirm box appears and disappears. (unlike the standard)
>> In addiction, you can also specify the actions that will be fired when user clicks the 'OK' or the 'Cancel' button, with the onConfirm and onCancel options.
Extends: Class Custom
Constructor: new Custom.Confirm (title, text, options)
[Properties]
title - a string represents the title of the confirm
text - a string represents the content text of the confirm
options - optional. an object that contains the class names of the confirm box's zones. Allows you to set some general options like button text
[/Properties]
[Options]
opacify : if true the confirm appears and disappears with an opacity transition
confirmbox : see above
confirmhead : see above
confirmbody : see above
height : the confirm height. Default '100px'
width : the confirm width. Default '300px'
confirmText : the text of the confirm button. Defaults to 'OK'
cancelText : the text of the cancel button. Defaults to 'Cancel'
onConfirm : a function executed when the user clicks confirm
onCancel : a function executed when the user clicks cancel
[/Options]
[Methods]
create -- creates the custom confirm box
setText -- set the text of the custom confirm
setTitle -- set the title of the custom confirm
[/Methods]
*/
Custom.Confirm = new Class({
options: {
height: '100px',
width: '300px',
confirmText: 'OK',
cancelText: 'Cancel',
opacify: true,
confirmbox: null,
confirmhead: null,
confirmbody: null,
onConfirm: function() {
return true;
},
onCancel: function() {
return false;
}
},
initialize: function(title, text, options) {
this.title = title;
this.text = text;
this.setOptions(options);
this.confirmbox = new Element('div', {
'id': 'customConfirm',
'styles': {
'position': 'fixed',
'top': '50%',
'left': '50%',
'z-index': 1000,
'height': this.options.height,
'width': this.options.width
}
});
this.overlay = new Element('div', {
'id': 'customConfirmOverlay',
'styles': {
'position': 'absolute',
'top': '0px',
'left': '0px',
'width': '100%',
'height': window.getScrollHeight(), //window.getHeight() + window.getScrollTop(),
'background-image':'url(g.gif)',
'z-index': 900
}
});
this.mechanize();
this.fx = new Fx.Style(this.confirmbox, 'opacity', {duration:1000});
if(this.options.initialize) this.options.initialize.call(this);
},
/*
Method: create
Description: creates the custom alert box
[Example]
> var cc = new Custom.Confirm('custom confirm', 'Do you want to submit?',
> {confirmbox:'ccbox', confirmhead: 'cchead', confirmbody: 'ccbody'});
>
> cc.create();
[/Example]
*/
create: function() {
this.customize();
},
mechanize: function() {
if(this.options['confirmbox']) this.confirmbox.addClass(this.options['confirmbox']);
this.confirmbox.setStyles({
'margin-left': - this.confirmbox.getStyle('width').toInt()/2,
'margin-top': - this.confirmbox.getStyle('height').toInt()/2
});
this.head = new Element('div').injectInside(this.confirmbox);
if(this.options.confirmhead) this.head.addClass(this.options['confirmhead']);
this.head.appendText(this.title);
this.content = new Element('div').injectInside(this.confirmbox);
if(this.options.confirmhead) this.content.addClass(this.options['confirmbody']);
this.content.appendText(this.text);
this.closebox = new Element('div').injectInside(this.confirmbox);
this.closebox.setProperty('align', 'center');
this.confirmButton = new Element('a').injectInside(this.closebox);
this.confirmButton.setProperty('href', '#');
this.confirmButton.appendText(this.options.confirmText);
this.confirmButton.addEvent('click', function(event) {
var event = new Event(event).preventDefault();
});
if(this.options.opacify) this.confirmButton.addEvent('click', this.opacifyConfirm.bind(this));
else this.confirmButton.addEvent('click', this.confirmRemove.bind(this));
this.cancelButton = new Element('a').injectInside(this.closebox);
this.cancelButton.setProperty('href', '#');
this.cancelButton.appendText(this.options.cancelText);
this.cancelButton.addEvent('click', function(event) {
var event = new Event(event).preventDefault();
});
if(this.options.opacify) this.cancelButton.addEvent('click', this.opacifyCancel.bind(this));
else this.cancelButton.addEvent('click', this.cancelRemove.bind(this));
},
customize: function() {
if($('customConfirm')) return false;
this.confirmbox.injectInside(this.overlay);
this.overlay.injectInside($E('body'));
if(this.options.opacify) this.confirmbox.setStyle('opacity', 0);
this.fx.start(1);
},
opacifyConfirm: function() {
this.fireEvent('onConfirm');
this.fx.start(0).chain(function() {
this.confirmbox.remove();
this.overlay.remove();
}.bind(this));
},
opacifyCancel: function() {
this.fireEvent('onCancel');
this.fx.start(0).chain(function() {
this.confirmbox.remove();
this.overlay.remove();
}.bind(this));
},
confirmRemove: function() {
this.fireEvent('onConfirm');
this.confirmbox.remove();
this.overlay.remove();
},
cancelRemove: function() {
this.fireEvent('onCancel');
this.confirmbox.remove();
this.overlay.remove();
},
/*
Method: setText
Description: set the text of the custom confirm
[Example]
> // change the previous text
> ca.setText('Custom Confirm with some new text');
[/Example]
*/
setText: function(text) {
this.content.setHTML(text);
return this;
},
/*
Method: setTitle
Description: set the title of the custom confirm
[Example]
> // change the previous title
> ca.setTitle('A new Custom Confirm');
[/Example]
*/
setTitle: function(title) {
this.title = title;
return this;
}
});
Custom.Confirm.implement(new Options, new Events);