, myObject: {foo: bar}, myString: Hello}
[/javascript]
*/
associate: function(obj){
var routed = {};
var objtype = $type(obj);
if (objtype == 'array'){
var temp = {};
for (var i = 0, j = obj.length; i < j; i++) temp[obj[i]] = true;
obj = temp;
}
for (var oname in obj) routed[oname] = null;
for (var k = 0, l = this.length; k < l; k++){
var res = (objtype == 'array') ? $defined(this[k]) : $type(this[k]);
for (var name in obj){
if (!$defined(routed[name]) && ((res && obj[name] === true) || obj[name].contains(res))){
routed[name] = this[k];
break;
}
}
}
return routed;
},
/*
Method: contains
Tests an array for the presence of an item.
Syntax:
>var inArray = myArray.contains(item[, from]);
Arguments:
item - (object) The item to search for in the array.
from - (number, optional: defaults to 0) The index of the array at which to begin the search.
Returns:
(boolean) If the array contains the item specified, returns true. Otherwise, returns false.
Example:
[javascript]
["a","b","c"].contains("a"); //returns true
["a","b","c"].contains("d"); //returns false
[/javascript]
See Also:
*/
contains: function(item, from){
return this.indexOf(item, from) != -1;
},
/*
Method: copy
Returns a copy of the array.
Syntax:
>var copiedArray = myArray.copy([start[, length]]);
Arguments:
start - (number, optional: defaults to 0) The index from which the copy should be started. If a negative number is provided, the offset is taken from the end of the array.
length - (number, optional: defaults to array.length - start) The number of elements to copy.
Returns:
(array) The new copied array.
Example:
[javascript]
var letters = ["a","b","c"];
var copy = letters.copy(); //copy = ["a", "b", "c"]
[/javascript]
See Also:
<$A>
*/
copy: function(start, length){
return $A(this, start, length);
},
/*
Method: extend
Extends an array with all the items of another.
Syntax:
>myArray.extend(array);
Arguments:
array - (array) The array whose items should be extended into this array.
Returns:
(array) This array, extended.
Example:
[javascript]
var animals = ['Cow', 'Pig', 'Dog'];
animals.extend(['Cat', 'Dog']); //animals = ['Cow', 'Pig', 'Dog', 'Cat', 'Dog'];
[/javascript]
*/
extend: function(array){
for (var i = 0, j = array.length; i < j; i++) this.push(array[i]);
return this;
},
/*
Method: getLast
Returns the last item from the array.
Syntax:
>myArray.getLast();
Returns:
(mixed) The last item in this array. If this array is empty, returns null.
Example:
[javascript]
['Cow', 'Pig', 'Dog', 'Cat'].getLast(); //returns 'Cat'
[/javascript]
*/
getLast: function(){
return (this.length) ? this[this.length - 1] : null;
},
/*
Method: getRandom
Returns a random item from the array.
Syntax:
>myArray.getRandom();
Returns:
(mixed) A random item from this array. If this array is empty, returns null.
Example:
[javascript]
['Cow', 'Pig', 'Dog', 'Cat'].getRandom(); //returns one of the items
[/javascript]
*/
getRandom: function(){
return (this.length) ? this[$random(0, this.length - 1)] : null;
},
/*
Method: include
Pushes the passed element into the array if it's not already present (case and type sensitive).
Syntax:
>myArray.include(item);
Arguments:
item - (object) The item that should be added to this array.
Returns:
(array) This array with the new item included.
Example:
[javascript]
['Cow', 'Pig', 'Dog'].include('Cat'); //returns ['Cow', 'Pig', 'Dog', 'Cat']
['Cow', 'Pig', 'Dog'].include('Dog'); //returns ['Cow', 'Pig', 'Dog']
[/javascript]
*/
include: function(item){
if (!this.contains(item)) this.push(item);
return this;
},
/*
Method: merge
Merges an array with all the items of another. Does not allow duplicates (case and type sensitive).
Syntax:
>myArray.merge(array);
Arguments:
array - (array) The array whose items should be merged into this array.
Returns:
(array) This array merged with the new items.
Example:
[javascript]
var animals = ['Cow', 'Pig', 'Dog'];
animals.merge(['Cat', 'Dog']); //animals = ['Cow', 'Pig', 'Dog', 'Cat'];
[/javascript]
*/
merge: function(array){
for (var i = 0, l = array.length; i < l; i++) this.include(array[i]);
return this;
},
/*
Method: remove
Removes all occurrences of an item from the array.
Syntax:
>myArray.remove(item);
Arguments:
item - (object) The item to search for in the array.
Returns:
(array) This array with all occurrences of the item removed.
Example:
[javascript]
['Cow', 'Pig', 'Dog', 'Cat', 'Dog'].remove('Dog') //returns ['Cow', 'Pig', 'Cat']
['Cow', 'Pig', 'Dog'].remove('Cat') //returns ['Cow', 'Pig', 'Dog']
[/javascript]
*/
remove: function(item){
for (var i = this.length; i--;){
if (this[i] === item) this.splice(i, 1);
}
return this;
},
/*
Method: empty
Empties an array.
Syntax:
>myArray.empty();
Returns:
(array) This array, emptied.
Example:
[javascript]
var myArray = ['old', 'data'];
myArray.empty(); //myArray is now []
[/javascript]
*/
empty: function(){
this.length = 0;
return this;
}
});
//copied functions
Array.extend({
/*
Method: each
Same as .
Syntax:
>myArray.each(fn[, bind]);
Arguments:
fn - (function) The function which should be executed on each item in the array. This function is passed the item and its index in the array.
bind - (object, optional) The object to use as 'this' in the function. For more information see .
fn (continued):
Signature:
>fn(item, index)
Arguments:
item - (mixed) The current item in the array.
index - (number) The current item's index in the array.
Example:
[javascript]
['apple','banana','lemon'].each(function(item, index){
alert(index + " = " + item); //alerts "0 = apple" etc.
}, bind); //optional second argument for binding, not used here
[/javascript]
*/
each: Array.prototype.forEach
});
//Array generics
['concat', 'join', 'pop', 'push', 'reverse', 'shift', 'slice', 'sort', 'splice', 'unshift'].each(function(prop) {
if (!Array[prop]) Array[prop] = Native.generic(prop);
});
/*
Function: $each
Use to iterate through iterables that are not regular arrays, such as builtin getElementsByTagName calls, arguments of a function, or an object.
Syntax:
>$each(iterable, fn[, bind]);
Arguments:
iterable - (object or array) The object or array to iterate through.
fn - (function) The function to test for each element.
bind - (object, optional) The object to use as 'this' in the function. For more information see .
fn (continued):
Signature:
>fn(item, index)
Arguments:
item - (mixed) The current item in the array.
index - (number) The current item's index in the array. In the case of an object, it is passed the key of that item rather than the index.
Examples:
Array example:
[javascript]
$each(['Sun','Mon','Tue'], function(day, index){
alert('name:' + day + ', index: ' + index);
}); //alerts "name: Sun, index: 0", "name: Mon, index: 1", etc.
[/javascript]
Object example:
[javascript]
$each({first: "Sunday", second: "Monday", third: "Tuesday"}, function(value, key){
alert("the " + key + " day of the week is " + value);
}); //alerts "the first day of the week is Sunday", "the second day of the week is Monday", etc.
[/javascript]
*/
function $each(iterable, fn, bind){
((iterable && typeof iterable.length == 'number' && $type(iterable) != 'object') ? Array : Abstract).each(iterable, fn, bind);
}/*
Script: String.js
Contains String prototypes.
License:
MIT-style license.
*/
/*
Class: String
A collection of the String Object prototype methods.
See Also:
*/
String.extend({
/*
Method: test
Searches for a match between the string and a regular expression.
For more information see .
Syntax:
>myString.test(regex[,params]);
Arguments:
regex - (mixed) The string or regular expression you want to match the string with.
params - (string, optional) If first parameter is a string, any parameters you want to pass to the regular expression ('g' has no effect).
Returns:
(boolean) If a match for the regular expression is found in this string returns true. Otherwise, returns false.
Example:
[javascript]
"I like cookies".test("cookie"); //returns true
"I like cookies".test("COOKIE", "i"); //returns true (ignore case)
"I like cookies".test("cake"); //returns false
[/javascript]
See Also:
*/
test: function(regex, params){
return (($type(regex) == 'string') ? new RegExp(regex, params) : regex).test(this);
},
/*
Method: contains
Checks to see if the string passed in is contained in this string.
If the separator parameter is passed, will check to see if the string is contained in the list of values separated by that parameter.
Syntax:
>myString.contains(string[, separator]);
Arguments:
string - (string) The string to search for.
separator - (string, optional) The string that separates the values in this string (eg. Element classNames are separated by a ' ').
Returns:
(boolean) If the string is contained in this string, returns true. Otherwise, returns false.
Example:
[javascript]
'a bc'.contains('bc'); //returns true
'a b c'.contains('c', ' '); //returns true
'a bc'.contains('b', ' '); //returns false
[/javascript]
*/
contains: function(string, separator){
return (separator) ? (separator + this + separator).indexOf(separator + string + separator) > -1 : this.indexOf(string) > -1;
},
/*
Method: trim
Trims the leading and trailing spaces off a string.
Syntax:
>myString.trim();
Returns:
(string) The trimmed string.
Example:
[javascript]
" i like cookies ".trim(); //"i like cookies"
[/javascript]
*/
trim: function(){
return this.replace(/^\s+|\s+$/g, '');
},
/*
Method: clean
Removes all extraneous whitespace from a string and trims () it.
Syntax:
>myString.clean();
Returns:
(string) The cleaned string.
Example:
[javascript]
" i like cookies \n\n".clean(); //returns "i like cookies"
[/javascript]
*/
clean: function(){
return this.replace(/\s{2,}/g, ' ').trim();
},
/*
Method: camelCase
Converts a hyphenated string to a camelcased string.
Syntax:
>myString.camelCase();
Returns:
(string) The camelcased string.
Example:
[javascript]
"I-like-cookies".camelCase(); //returns "ILikeCookies"
[/javascript]
*/
camelCase: function(){
return this.replace(/-\D/g, function(match){
return match.charAt(1).toUpperCase();
});
},
/*
Method: hyphenate
Converts a camelcased string to a hyphenated string.
Syntax:
>myString.hyphenate();
Returns:
(string) The hyphenated string.
Example:
[javascript]
"ILikeCookies".hyphenate(); //returns "I-like-cookies"
[/javascript]
*/
hyphenate: function(){
return this.replace(/[A-Z]/g, function(match){
return ('-' + match.charAt(0).toLowerCase());
});
},
/*
Method: capitalize
Converts the first letter of each word in a string to uppercase.
Syntax:
>myString.capitalize();
Returns:
(string) The capitalized string.
Example:
[javascript]
"i like cookies".capitalize(); //returns "I Like Cookies"
[/javascript]
*/
capitalize: function(){
return this.replace(/\b[a-z]/g, function(match){
return match.toUpperCase();
});
},
/*
Method: escapeRegExp
Escapes all regular expression characters from the string.
Syntax:
>myString.escapeRegExp();
Returns:
(string) The escaped string.
Example:
[javascript]
'animals.sheep[1]'.escapeRegExp(); //returns 'animals\.sheep\[1\]'
[/javascript]
*/
escapeRegExp: function(){
return this.replace(/([.*+?^${}()|[\]\/\\])/g, '\\$1');
},
/*
Method: toInt
Parses this string and returns a number of the specified radix or base.
Syntax:
>myString.toInt([base]);
Arguments:
base - (number, optional) The base to use (defaults to 10).
Returns:
(mixed) The number. If the string is not numeric, returns NaN.
Example:
[javascript]
"4em".toInt(); //returns 4
"10px".toInt(); //returns 10
[/javascript]
See Also:
*/
toInt: function(base){
return parseInt(this, base || 10);
},
/*
Method: toFloat
Parses this string and returns a floating point number.
Syntax:
>myString.toFloat();
Returns:
(mixed) The float. If the string is not numeric, returns NaN.
Example:
[javascript]
"95.25%".toFloat(); //returns 95.25
"10.848".toFloat(); //returns 10.848
[/javascript]
See Also:
*/
toFloat: function(){
return parseFloat(this);
},
/*
Method: hexToRgb
Converts a hexidecimal color value to RGB. Input string must be in one of the following hexidecimal color formats (with or without the hash).
>'#ffffff', #fff', 'ffffff', or 'fff'
Syntax:
>myString.hexToRgb([array]);
Arguments:
array - (boolean, optional) If true is passed, will output an array (eg. ['ff','33','00']) instead of a string (eg. "#ff3300").
Returns:
(mixed) A string representing the color in RGB. If the array flag is set, an array will be returned instead.
Example:
[javascript]
"#123".hexToRgb(); //returns "rgb(17,34,51)"
"112233".hexToRgb(); //returns "rgb(17,34,51)"
"#112233".hexToRgb(true); //returns [17,34,51]
[/javascript]
See Also:
*/
hexToRgb: function(array){
var hex = this.match(/^#?(\w{1,2})(\w{1,2})(\w{1,2})$/);
return (hex) ? hex.slice(1).hexToRgb(array) : null;
},
/*
Method: rgbToHex
Converts an RGB color value to hexidecimal. Input string must be in one of the following RGB color formats.
>"rgb(255,255,255)", or "rgba(255,255,255,1)"
Syntax:
>myString.rgbToHex([array]);
Arguments:
array - (boolean, optional) If true is passed, will output an array (eg. ['ff','33','00']) instead of a string (eg. "#ff3300").
Returns:
(mixed) A string representing the color in hexadecimal,
or transparent if the fourth value of rgba in the input string is 0. If the array flag is set, an array will be returned instead.
Example:
[javascript]
"rgb(17,34,51)".rgbToHex(); //returns "#112233"
"rgb(17,34,51)".rgbToHex(true); //returns ['11','22','33']
"rgba(17,34,51,0)".rgbToHex(); //returns "transparent"
[/javascript]
See Also:
*/
rgbToHex: function(array){
var rgb = this.match(/\d{1,3}/g);
return (rgb) ? rgb.rgbToHex(array) : null;
}
});
['charAt', 'charCodeAt', 'concat', 'indexOf', 'lastIndexOf', 'match', 'replace', 'search', 'slice', 'split', 'substr', 'substring', 'toLowerCase', 'toUpperCase'].each(function(prop) {
if (!String[prop]) String[prop] = Native.generic(prop);
});
/*
Class: Array
Contains Array prototypes.
See Also:
*/
Array.extend({
/*
Method: hexToRgb
Converts a hexidecimal color value to RGB. Input array must be in one of the following hexidecimal color formats.
>['ff', 'ff', 'ff'], or ['f', 'f', 'f']
Syntax:
myArray.hexToRgb([array]);
Arguments:
array - (boolean, optional) If true is passed, will output an array (eg. ['ff','33','00']) instead of a string (eg. "#ff3300").
Returns:
(mixed) A string representing the color in RGB. If the array flag is set, an array will be returned instead.
Example:
[javascript]
["1", "2", "3"].hexToRgb(); //returns "rgb(17,34,51)"
["11", "22", "33"].hexToRgb(); //returns "rgb(17,34,51)"
["11", "22", "33"].hexToRgb(true); //returns [17,34,51]
[/javascript]
See Also:
*/
hexToRgb: function(array){
if (this.length != 3) return null;
var rgb = [];
for (var i = 0; i < 3; i++){
rgb.push(((this[i].length == 1) ? this[i] + this[i] : this[i]).toInt(16));
}
return array ? rgb : 'rgb(' + rgb.join(',') + ')';
},
/*
Method: rgbToHex
Converts an RGB color value to hexidecimal. Input array must be in one of the following RGB color formats.
>[255,255,255], or [255,255,255,1]
Syntax:
>myArray.rgbToHex([array]);
Arguments:
array - (boolean, optional) If true is passed, will output an array (eg. ['ff','33','00']) instead of a string (eg. "#ff3300").
Returns:
(mixed) A string representing the color in hexadecimal, or transparent if the fourth value of rgba in the input array is 0.
If the array flag is set, an array will be returned instead.
Example:
[javascript]
[17,34,51].rgbToHex(); //returns "#112233"
[17,34,51].rgbToHex(true); //returns ['11','22','33']
[17,34,51,0].rgbToHex(); //returns "transparent"
[/javascript]
See Also:
*/
rgbToHex: function(array){
if (this.length < 3) return null;
if (this.length == 4 && this[3] == 0 && !array) return 'transparent';
var hex = [];
for (var i = 0; i < 3; i++){
var bit = (this[i] - 0).toString(16);
hex.push((bit.length == 1) ? '0' + bit : bit);
}
return array ? hex : '#' + hex.join('');
}
});/*
Script: Function.js
Contains Function prototypes and utility functions.
License:
MIT-style license.
*/
/*
Class: Function
A collection of The Function Object prototype methods.
See Also:
*/
Function.extend({
extend: $extend,
/*
Method: create
Base function for creating functional closures which is used by all other Function prototypes.
Syntax:
>var createdFunction = myFunction.create([options]);
Arguments:
options - (object, optional) The options from which the function will be created. If options is not provided, then creates a copy of the function.
options (continued):
bind - (object: defaults to this function) The object that the "this" of the function will refer to.
event - (mixed: defaults to false) If set to true, the function will act as an event listener and receive an event as its first argument. If set to a class name, the function will receive a new instance of this class (with the event passed as argument's constructor) as first argument.
arguments - (mixed: defaults to standard arguments) A single argument or an array of arguments that will be passed as arguments to the function. If both the event and arguments options are set, the event is passed as first argument and the arguments array will follow.
delay - (number: defaults to no delay) If set, the returned function will delay the actual execution by this amount of milliseconds and return a timer handle when called.
periodical - (number: defaults to no periodical execution) If set, the returned function will periodically perform the actual execution with this specified interval and return a timer handle when called.
attempt - (boolean: false) If set to true, the returned function will try to execute and return either the results or false on error.
Returns:
(function) The function that was created as a result of the options passed in.
Example:
[javascript]
var myFunction = function(){
alert("I'm a function :)");
};
var mySimpleFunction = myFunction.create(); //just a simple copy
var myAdvancedFunction = myFunction.create({ //when called, this function will attempt
arguments: [0,1,2,3],
attempt: true,
delay: 1000,
bind: myElement
});
[/javascript]
*/
create: function(options){
var self = this;
options = options || {};
return function(event){
var args = $splat(options.arguments) || arguments;
if (options.event) args = [event || window.event].extend(args);
var returns = function(){
return self.apply($pick(options.bind, self), args);
};
if (options.delay) return setTimeout(returns, options.delay);
if (options.periodical) return setInterval(returns, options.periodical);
if (options.attempt) return $try(returns);
return returns();
};
},
/*
Method: pass
Returns a closure with arguments and bind.
Syntax:
>var newFunction = myFunction.pass([args[, bind]]);
Arguments:
args - (mixed, optional) The arguments to pass to the function (must be an array if passing more than one argument).
bind - (object, optional) The object that the "this" of the function will refer to.
Returns:
(function) The function whose arguments are passed when called.
Example:
[javascript]
var myFunction = function(){
var result = 'Passed: ';
for(var i = 0, l = arguments.length; i < l; i++){
result += (arguments[i] + ' ');
}
return result;
}
var myHello = myFunction.pass('hello');
var myItems = myFunction.pass(['peach', 'apple', 'orange']);
//when ready I can execute the functions.
alert(myHello());
alert(myItems());
[/javascript]
*/
pass: function(args, bind){
return this.create({'arguments': args, 'bind': bind});
},
/*
Method: attempt
Tries to execute the function.
Syntax:
>var result = myFunction.attempt([args[, bind]]);
Arguments:
args - (mixed, optional) The arguments to pass to the function (must be an array if passing more than one argument).
bind - (object, optional) The object that the "this" of the function will refer to.
Returns:
(mixed) False if an exception is thrown, else the function's return.
Example:
[javascript]
var myObject = {
'cow': 'moo!'
};
var myFunction = function(){
for(var i = 0; i < arguments.length; i++){
if(!this[arguments[i]]) throw('doh!');
}
};
var result = myFunction.attempt(['pig', 'cow'], myObject); // false
[/javascript]
*/
attempt: function(args, bind){
return this.create({'arguments': args, 'bind': bind, 'attempt': true})();
},
/*
Method: bind
Returns a function whose "this" is altered.
Syntax:
>myFunction.bind([bind[, args[, evt]]]);
Arguments:
bind - (object, optional) The object that the "this" of the function will refer to.
args - (mixed, optional) The arguments to pass to the function (must be an array if passing more than one argument).
evt - (mixed, optional) Used to signifiy that the function is an Event Listener. See Options section for more information.
Returns:
(function) The binded function.
Example:
[javascript]
function myFunction(){
this.setStyle('color', 'red');
// note that 'this' here refers to myFunction, not an element
// we'll need to bind this function to the element we want to alter
};
var myBoundFunction = myFunction.bind(myElement);
myBoundFunction(); // this will make the element myElement red.
[/javascript]
*/
bind: function(bind, args, evt){
return this.create({'bind': bind, 'arguments': args, 'event': evt});
},
/*
Method: delay
Delays the execution of a function by a specified duration.
Syntax:
>var timeoutID = myFunction.delay([delay[, bind[, args]]]);
Arguments:
delay - (number, optional) The duration to wait (in milliseconds).
bind - (object, optional) The object that the "this" of the function will refer to.
args - (mixed, optional) The arguments passed (must be an array if the arguments are greater than one).
Returns:
(number) The JavaScript Timeout ID (useful for clearing delays).
Example:
[javascript]
var myFunction = function(){ alert('moo! Element id is: ' + this.id); };
//wait 50 milliseconds, then call myFunction and bind myElement to it
myFunction.delay(50, myElement); // alerts: 'moo! Element id is: ... '
// An anonymous function, example
(function(){ alert('one second later...'); }).delay(1000); //wait a second and alert
[/javascript]
See Also:
<$clear>,
*/
delay: function(delay, bind, args){
return this.create({'delay': delay, 'bind': bind, 'arguments': args})();
},
/*
Method: periodical
Executes a function in the specified intervals of time
Syntax:
>var intervalID = myFunction.periodical([period[, bind[, args]]]);
Arguments:
period - (number, optional) The duration of the intervals between executions.
bind - (object, optional) The object that the "this" of the function will refer to.
args - (mixed, optional) The arguments passed (must be an array if the arguments are greater than one).
Returns:
(number) The Interval ID (useful for clearing a periodical).
Example:
[javascript]
var Site = { counter: 0 };
var addCount = function(){ this.counter++; };
addCount.periodical(1000, Site); // will add the number of seconds at the Site
[/javascript]
See Also:
<$clear>,
*/
periodical: function(interval, bind, args){
return this.create({'periodical': interval, 'bind': bind, 'arguments': args})();
}
});
Function.empty = $empty;
/*
Script: Number.js
Contains the Number prototypes.
License:
MIT-style license.
*/
/*
Class: Number
A collection of the Number Object prototype methods.
See Also:
*/
Number.extend({
/*
Method: limit
Limits this number between two bounds.
Syntax:
>myNumber.limit(min, max);
Arguments:
min - (number) The minimum possible value.
max - (number) The maximum possible value.
Returns:
(number) The number bounded between the given limits.
Example:
[javascript]
(12).limit(2, 6.5); //returns 6.5
(-4).limit(2, 6.5); //returns 2
(4.3).limit(2, 6.5); //returns 4.3
[/javascript]
*/
limit: function(min, max){
return Math.min(max, Math.max(min, this));
},
/*
Method: round
Returns this number rounded to the specified precision.
Syntax:
>myNumber.round([precision]);
Arguments:
precision - (number, optional: defaults to 0) The number of digits after the decimal place.
Returns:
(number) The number, rounded.
Note:
Argument may also be negative.
Example:
[javascript]
(12.45).round() //returns 12
(12.45).round(1) //returns 12.5
(12.45).round(-1) //returns 10
[/javascript]
*/
round: function(precision){
precision = Math.pow(10, precision || 0);
return Math.round(this * precision) / precision;
},
/*
Method: times
Executes the function passed in the specified number of times.
Syntax:
>myNumber.times(fn[, bind]);
Arguments:
fn - (function) The function which should be executed on each iteration of the loop. This function is passed the current iteration's index.
bind - (object, optional) The object to use as 'this' in the function. For more information see .
Example:
[javascript]
(4).times(alert); //alerts 0, 1, 2, 3
[/javascript]
*/
times: function(fn, bind){
for (var i = 0; i < this; i++) fn.call(bind, i, this);
},
/*
Method: toFloat
Returns this number as a float. Useful because toFloat must work on both Strings and Numbers.
Syntax:
>myNumber.toFloat();
Returns:
(number) The number as a float.
Example:
[javascript]
(111).toFloat(); //returns 111
(111.1).toFloat(); //returns 111.1
[/javascript]
*/
toFloat: function(){
return parseFloat(this);
},
/*
Method: toInt
Returns this number as another number with the passed in base. Useful because toInt must work on both Strings and Numbers.
Syntax:
>myNumber.toInt([base]);
Arguments:
base - (number, optional: defaults to 10) The base to use.
Returns:
(number) A number with the base provided.
Example:
[javascript]
(111).toInt(); //returns 111
(111.1).toInt(); //returns 111
(111).toInt(2); //returns 7
[/javascript]
*/
toInt: function(base){
return parseInt(this, base || 10);
}
});/*
Script: Element.js
Contains useful Element prototypes, to be used with the dollar function <$>.
License:
MIT-style license.
Credits:
- Some functions are inspired by those found in prototype.js and the 'events' key whos value is passed to .
Example:
[javascript]
var myAnchor = new Element('a', {
'styles': {
'display': 'block',
'border': '1px solid black'
},
'events': {
'click': function(){
alert('omg u clicked');
},
'mousedown': function(){
alert('omg ur gonna click');
}
},
'class': 'myClassSuperClass',
'href': 'http://mad4milk.net'
});
[/javascript]
See Also:
<$>,
*/
var Element = function(el, props){
if ($type(el) == 'string'){
if (Client.Engine.ie && props && (props.name || props.type)){
var name = (props.name) ? ' name="' + props.name + '"' : '';
var type = (props.type) ? ' type="' + props.type + '"' : '';
delete props.name;
delete props.type;
el = '<' + el + name + type + '>';
}
el = document.createElement(el);
}
el = $(el);
return (!props || !el) ? el : el.set(props);
};
Element.prototype = HTMLElement.prototype;
/*
Function: Elements
The Elements class allows methods to work also on an array. In MooTools, every DOM function, such as <$$> (and every other function that returns a collection of nodes) returns them as an Elements class.
Syntax:
>var myElements = new Elements(elements[, nocheck]);
Arguments:
elements - (array) A mixed array with items of Elements or an string ID reference.
nocheck - (boolean: defaults to false) Optionally bypasses the extending of Elements.
Returns:
(array) An extended array with the methods.
Example:
[javascript];
//The following code would set the color of every paragraph to 'red'.
$$('p').each(function(el){
el.setStyle('color', 'red');
});
//However, because $$('myselector') also accepts methods, the below example would have the same effect as the one above.
$$('p').setStyle('color', 'red');
//Create myElements from
var myElements = new Elements(['myElementID', $('myElement'), 'myElementID2', document.getElementById('myElementID3')]);
myElements.removeElements('found'); //notice how 'remove' is an method and therefore the correct usage is:
[/javascript]
Note:
- Because Elements is an Array, it accepts all the methods.
- Array methods have priority, so overlapping Element methods (remove, getLast) are changed to "method + Elements" (removeElements, getLastElements).
- Every node of the Elements instance is already extended with <$>.
See Also:
<$$>
*/
var Elements = function(elements, nocheck){
elements = elements || [];
var l = elements.length;
if (nocheck || !l) return $extend(elements, this);
var uniques = {};
var returned = [];
for (var i = 0; i < l; i++){
var el = $(elements[i]);
if (!el || uniques[el.$attributes.uid]) continue;
uniques[el.$attributes.uid] = true;
returned.push(el);
}
return $extend(returned, this);
};
/*
Function: $
Returns the Element passed in with all the Element prototypes applied.
Syntax:
>var myElement = $(el);
Arguments:
el - (mixed) A string containing the id of the DOM Element desired or a reference to an actual DOM Element.
Returns:
a DOM Element or false (if no id was found).
Example:
[javascript]
var myElement = $('myElement') // gets a DOM Element by id with all the Element prototypes applied.
var div = document.getElementById('myElement'); // 1990s style of finding a DOM Element.
var myDiv = $(div) //returns an Element with all the MooTools extensions.
[/javascript]
Note:
- While the $ function needs to be called only once on an Element in order to get all the prototypes, extended Elements can be passed to this function multiple times without ill effects.
- Any Element whose tags are considered "bad" will not be extended. See:
*/
function $(el){
if (!el) return null;
if (el.htmlElement) return Garbage.collect(el);
var type = $type(el);
if (type == 'string'){
el = document.getElementById(el);
type = (el) ? 'element' : false;
}
if (type != 'element') return (['window', 'document'].contains(type)) ? el : null;
if (el.htmlElement) return Garbage.collect(el);
if (Element.$badTags.contains(el.tagName.toLowerCase())) return el;
$extend(el, Element.prototype);
el.htmlElement = $empty;
return Garbage.collect(el);
};
document.getElementsBySelector = document.getElementsByTagName;
/*
Function: $$
Finds, returns, and extends DOM Elements. Elements arrays returned with $$ will also accept all the methods.
The return type of Element methods run through $$ is always an array. If the return array is only made by Elements,
$$ will be applied automatically.
Syntax:
>var myElements = $$(selector, [selector2[, selector3[, ...]]]);
Arguments:
Any number of: HTML Collections, arrays of Elements, arrays of strings as Element IDs, Elements, strings as selectors.
Returns:
(array) An array of all the dom Elements matched with all its items extended with <$>. Returns as .
Examples:
Simple Selection:
[javascript]
$$('a'); //returns an array of all anchor tags on the page.
$$('a', 'b'); //returns an array of all anchor and bold tags on the page.
$$('#myElement'); //returns an array containing only the Element with id = myElement (requires Element.Selectors.js).
$$('#myElement a.myClass'); //returns an array of all anchor tags with the class "myClass" within the DOM Element with id "myElement" (requires Element.Selectors.js).
[/javascript]
Advanced:
[javascript]
$$(myelement, myelement2, 'a', ['myid', myid2, 'myid3'], document.getElementsByTagName('div'));
[/javascript]
Note:
- If you load , $$ will also accept CSS Selectors, otherwise the only selectors supported are tag names.
- If an Element is not found, nothing will be included into the array (not even *null*).
*/
function $$(){
var elements = [];
for (var i = 0, j = arguments.length; i < j; i++){
var selector = arguments[i];
switch ($type(selector)){
case 'element': elements.push(selector); break;
case false: case null: break;
case 'string': selector = document.getElementsBySelector(selector, true);
default: elements.extend(selector);
}
}
return new Elements(elements);
};
Element.extend = function(properties){
for (var property in properties){
Element.prototype[property] = properties[property];
Element[property] = Native.generic(property);
Elements.prototype[(Array.prototype[property]) ? property + 'Elements' : property] = Elements.$multiply(property);
}
};
Client.expand = function(properties){
Element.extend(properties);
window.extend(properties);
document.extend(properties);
};
Elements.extend = function(properties){
for (var property in properties){
Elements.prototype[property] = properties[property];
Elements[property] = Native.generic(property);
}
};
Elements.$multiply = function(property){
return function(){
var items = [];
var elements = true;
for (var i = 0, j = this.length; i < j; i++){
var returns = this[i][property].apply(this[i], arguments);
items.push(returns);
if (elements) elements = ($type(returns) == 'element');
}
return (elements) ? new Elements(items) : items;
};
};
Element.Setters = new Abstract({
attributes: function(properties){
this.setProperties(properties);
}
});
Element.Setters.properties = Element.Setters.attributes;
/*
Class: Element
Custom class to allow all of its methods to be used with any DOM Element via the dollar function <$>.
*/
Element.extend({
/*
Method: getElement
Searches all descendents for the first Element whose tag matches the tag provided. getElement method will also automatically extend the Element.
Syntax:
>var myElement = myElement.getElement(tag);
Arguments:
tag - (string) String of the tag to match.
Returns:
(mixed) If found returns an extended Element, else returns null.
Example:
[javascript]
var body = $(document.body);
var firstDiv = body.getElement('div');
// or
var firstDiv = $(document.body).getElement('div');
[/javascript]
Note:
This method gets replaced when is included. enhances getElement so that it maches with CSS selectors.
*/
getElement: function(tag){
return $(this.getElementsByTagName(tag)[0] || null);
},
/*
Method: getElements
Searches and returns all descendant Elements that match the tag provided.
Syntax:
>var myElements = myElement.getElements(tag);
Arguments:
tag - (string) String of the tag to match.
Returns:
(array) An array of all matched Elements. If none of the descendants matched the tag, will return an empty array.
Example:
[javascript]
var body = $(document.body);
var allAnchors = body.getElements('a');
// or
var allAnchors = $(document.body).getElement('a');
[/javascript]
Note:
This method gets replaced when is included. enhances getElements so that it maches with CSS selectors.
*/
getElements: function(tag){
return $$(this.getElementsByTagName(tag));
},
/*
Method: set
With this method you can set events, styles, and properties to the Element (same as calling new Element with the second paramater).
Syntax:
>myElement.set(props);
Arguments:
props - (object) An object with various properties used to modify the current Element. Keyword properties are: 'styles' and 'events' all other are considered properties. See also: new
Returns:
(element) This Element.
Example:
[javascript]
var body = $(document.body).set({
'styles': { // property styles passes the object to
'font': '12px Arial',
'color': 'blue'
},
'events': { // property events passes the object to
'click': function(){ alert('click'); },
'scroll': function(){
},
'id': 'documentBody' //any other property uses setProperty
});
[/javascript]
See Also:
, , ,
*/
set: function(props){
for (var prop in props){
if (Element.Setters[prop]) Element.Setters[prop].call(this, props[prop]);
else this.setProperty(prop, props[prop]);
}
return this;
},
/*
Method: inject
Injects, or inserts, the Element at a particular place relative to the Element's children (specified by the second the paramter).
Syntax:
>myElement.inject(el[, where]);
Arguments:
el - (mixed) el can be: the string of the id of the Element or an Element.
where - (string, optional) The place to inject this Element to (defaults to the bottom of the el's child nodes).
Returns:
(element) This Element.
Example:
[javascript]
var myDiv = new Element('div', {id: 'mydiv'});
myDiv.inject(document.body);
// or inline
var myDiv = new Element('div', {id: 'mydiv'}).inject(document.body);
new Element('a').inject('mydiv'); // is also valid since myDiv is now inside the body
[/javascript]
See Also:
*/
inject: function(el, where){
el = $(el);
switch (where){
case 'before': el.parentNode.insertBefore(this, el); break;
case 'after':
var next = el.getNext();
if (!next) el.parentNode.appendChild(this);
else el.parentNode.insertBefore(this, next);
break;
case 'top':
var first = el.firstChild;
if (first){
el.insertBefore(this, first);
break;
}
default: el.appendChild(this);
}
return this;
},
/*
Method: injectBefore
Inserts the Element before the passed Element.
Syntax:
>myElement.injectBefore(el);
Arguments:
el - (mixed) An Element reference or the id of the Element to be injected before.
Returns:
(element) This Element.
Example:
HTML:
[html]
[/html]
[javascript]
$('mySecondElement').injectBefore('myElement');
[/javascript]
Result:
[html]
[/html]
See Also:
*/
injectBefore: function(el){
return this.inject(el, 'before');
},
/*
Method: injectAfter
Inserts the Element after the passed Element.
Syntax:
>myElement.injectAfter(el);
Arguments:
el - (mixed) An Element reference or the id of the Element to be injected after.
Returns:
(element) This Element.
Example:
HTML:
[html]
[/html]
[javascript]
$('mySecondElement').injectBefore('myElement');
[/javascript]
Result:
[html]
[/html]
See Also:
,
*/
injectAfter: function(el){
return this.inject(el, 'after');
},
/*
Method: injectInside
Injects the Element inside and at the end of the child nodes of the passed in Element.
Syntax:
>myElement.injectInside(el);
Arguments:
el - (mixed) An Element reference or the id of the Element to be injected inside.
Returns:
(element) This Element.
Example:
HTML:
[html]
[/html]
[javascript]
$('mySecondElement').injectInside('myElement');
[/javascript]
Result:
[html]
[/html]
See Also:
*/
injectInside: function(el){
return this.inject(el, 'bottom');
},
/*
Method: injectTop
Same as , but inserts the Element inside, at the top.
Syntax:
>myElement.injectTop(el);
Arguments:
el - (mixed) An Element reference or the id of the Element to be injected top.
Returns:
(element) This Element.
Example:
HTML:
[html]
[/html]
[javascript]
$('myFourthElement').injectTop('myElement');
[/javascript]
Result:
[html]
[/html]
See Also:
*/
injectTop: function(el){
return this.inject(el, 'top');
},
/*
Method: adopt
Inserts the passed Elements inside the Element.
Syntax:
>myElement.adopt(el[, el2[, ...]]);
Arguments:
Accepts Elements references, Element ids as string, selectors ($$('stuff')) / array of Elements, array of ids as strings and collections.
Returns:
(element) This Element.
Example:
HTML:
[html]
[/html]
[javascript]
$('myElement').adopt('mySecondElement', 'myThirdElement', 'myFourthElement');
[/javascript]
Result:
[html]
[/html]
See Also:
*/
adopt: function(){
var elements = [];
$each(arguments, function(argument){
elements = elements.concat(argument);
});
$$(elements).inject(this);
return this;
},
/*
Method: remove
Removes the Element from the DOM.
Syntax:
>var removedElement = myElement.remove();
Returns:
(element) This Element.
Example:
HTML:
[html]
[/html]
[javascript]
$('myElement').remove() //bye bye
[/javascript]
Results:
[html]
[/html]
Note:
For this method is named removeElements, because has priority.
See Also:
*/
remove: function(){
return this.parentNode.removeChild(this);
},
/*
Method: clone
Clones the Element and returns the cloned one.
Syntax:
>var copy = myElement.clone([contents]);
Arguments:
contents - (boolean, optional) When true the Element is cloned with childNodes, default true
Returns:
(element) The cloned Element without Events.
Example:
HTML:
[html]
[/html]
[javascript]
var clone = $('myElement').clone().injectAfter('myElement'); //clones the Element and append the clone after the Element.
[/javascript]
Results:
[html]
[/html]
Note:
The returned Element does not have an attached events. To clone the events use .
See Also:
*/
clone: function(contents){
var el = $(this.cloneNode(contents !== false));
if (!el.$events) return el;
el.$events = {};
for (var type in this.$events) el.$events[type] = {
'keys': $A(this.$events[type].keys),
'values': $A(this.$events[type].values)
};
return el.removeEvents();
},
/*
Method: replaceWith
Replaces the Element with an Element passed.
Syntax:
>var replacingElement = myElement.replaceWidth(el);
Arguments:
el - (mixed) A string id representing the Element to be injected in, or an Element reference. In addition, if you pass div or another tag, the Element will be created.
Returns:
(element) The passed in Element.
Example:
[javascript]
$('myOldElement').replaceWith($('myNewElement')); //$('myOldElement') is gone, and $('myNewElement') is in its place.
[/javascript]]
See Also:
*/
replaceWith: function(el){
el = $(el);
this.parentNode.replaceChild(el, this);
return el;
},
/*
Method: appendText
Appends text node to a DOM Element.
Syntax:
>myElement.appendText(text);
Arguments:
text - (string) The text to append.
Returns:
(element) This Element.
Example:
HTML:
[html]
, but removes the class from the Element.
Syntax:
>myElement.removeClass(className);
Arguments:
className - (string) The class name to remove.
Returns:
(element) This Element.
Example:
HTML:
[html]
[/html]
[javascript]
$('myElement').removeClass('newClass');
[/javascript]
Result:
[html]
[/html]
*/
removeClass: function(className){
this.className = this.className.replace(new RegExp('(^|\\s)' + className + '(?:\\s|$)'), '$1').clean();
return this;
},
/*
Method: toggleClass
Adds or removes the passed in class name to the Element, depending on if it's present or not.
Syntax:
>myElement.toggleClass(className);
Arguments:
className - (string) The class to add or remove.
Returns:
(element) This Element.
Example:
HTML:
[html]
[/html]
[javascript]
$('myElement').toggleClass('myClass');
[/javascript]
Result:
[html]
[/html]
[javascript]
$('myElement').toggleClass('myClass');
[/javascript]
Result:
[html]
[/html]
*/
toggleClass: function(className){
return this[this.hasClass(className) ? 'removeClass' : 'addClass'](className);
},
walk: function(brother, start){
brother += 'Sibling';
var el = (start) ? this[start] : this[brother];
while (el && $type(el) != 'element') el = el[brother];
return $(el);
},
/*
Method: getPrevious
Returns the previousSibling of the Element (excluding text nodes).
Syntax:
>var previousSibling = myElement.getPrevious();
Returns:
(mixed) The previous sibling Element, or returns null if none found.
Example:
HTML:
[html]
[/html]
[javascript]
$('mySecondElement').getPrevious().remove(); //get the previous DOM Element from mySecondElement and removes.
[/javascript]
Result:
[html]
[/html]
See Also:
*/
getPrevious: function(){
return this.walk('previous');
},
/*
Method: getNext
Works as Element.getPrevious, but tries to find the nextSibling (excluding text nodes).
Syntax:
>var nextSibling = myElement.getNext();
Returns:
(mixed) The next sibling Element, or returns null if none found.
Example:
HTML:
[html]
[/html]
[javascript]
$('myElement').getNext().addClass('found'); //get the next DOM Element from myElement and adds class 'found'.
[/javascript]
Result:
[html]
[/html]
See Also:
*/
getNext: function(){
return this.walk('next');
},
/*
Method: getFirst
Works as , but tries to find the firstChild (excluding text nodes).
Syntax:
>var firstElement = myElement.getFirst();
Returns:
(mixed) The first sibling Element, or returns null if none found.
Example:
HTML:
[html]
[/html]
[javascript]
$('myThirdElement').getFirst().inject('mySecondElement'); //gets the first DOM Element from myThirdElement and injects inside mySecondElement.
[/javascript]
Result:
[html]
[/html]
See Also:
*/
getFirst: function(){
return this.walk('next', 'firstChild');
},
/*
Method: getLast
Works as , but tries to find the lastChild.
Syntax:
>var lastElement = myElement.getLast();
Returns:
(mixed) The first sibling Element, or returns null if none found.
Example:
HTML:
[html]
[/html]
[javascript]
$('myElement').getLast().adopt('mySecondElement'); //gets the last DOM Element from myElement and adopts mySecondElement.
[/javascript]
Result:
[html]
[/html]
Note:
For this method is named getLastElements, because has priority.
See Also:
*/
getLast: function(){
return this.walk('previous', 'lastChild');
},
/*
Method: getParent
Returns the parent node extended.
Syntax:
>var parent = myElement.getParent();
Returns:
(element) This Element's parent.
Example:
HTML:
[html]
[/html]
[javascript]
$('mySecondElement').getParent().addClass('papa');
[/javascript]
Result:
[html]
[/html]
See Also:
*/
getParent: function(){
return $(this.parentNode);
},
/*
Method: getChildren
Returns all the Element's children (excluding text nodes). Returns as .
Syntax:
>var children = myElement.getChildren();
Returns:
(array) A array with all of the Element's children except the text nodes.
Example:
HTML:
[html]
[/html]
[javascript]
$('myElement').getChildren().removeElements(); // notice how is renamed removeElements due to Array precedence.
[/javascript]
Result:
[/html]
[/javascript]
See Also:
,
*/
getChildren: function(){
return $$(this.childNodes);
},
/*
Method: hasChild
Checks all children (including text nodes) for a match.
Syntax:
>var result = myElement.hasChild(el);
Arguments:
el - (mixed) Can be a Element reference or string id.
Returns:
(boolean) Returns true if the passed in Element is a child of the Element, otherwise false.
Example:
HTML:
[html]
[/html]
[javascript]
if($('Darth_Vader').hasChild('Luke')) alert('Luke, I am your father.'); // tan tan tannn.....
[/javascript]
*/
hasChild: function(el){
return !!$A(this.getElementsByTagName('*')).contains(el);
},
/*
Method: getProperty
Gets the an attribute of the Element.
Syntax:
>myElement.getProperty(property);
Arguments:
property - (string) The attribute to retrieve.
Returns:
(mixed) The value of the property, or an empty string.
Example:
HTML:
[html]
[/html]
[javascript]
$('myImage').getProperty('src') // returns mootools.png
[/javascript]
*/
getProperty: function(property){
var index = Element.$attributes[property];
if (index) return this[index];
var flag = Element.$attributesIFlag[property] || 0;
if (!Client.Engine.ie || flag) return this.getAttribute(property, flag);
var node = (this.attributes) ? this.attributes[property] : null;
return (node) ? node.nodeValue : null;
},
/*
Method: removeProperty
Removes an attribute from the Element.
Syntax:
>myElement.removeProperty(property);
Arguments:
property - (string) The attribute to remove.
Returns:
(element) This Element.
Example:
HTML:
[html]
[/html]
[javascript]
$('myAnchor').removeProperty('onmousedown'); //eww inline javascript is bad! Let's get rid of it.
[/javascript]
Result:
[html]
[/html]
*/
removeProperty: function(property){
var index = Element.$attributes[property];
if (index) this[index] = '';
else this.removeAttribute(property);
return this;
},
/*
Method: getProperties
Same as , but for properties.
Syntax:
>var myProps = myElement.getProperties();
Returns:
(object) An object containing all of the Element's properties.
Example:
HTML:
[html]
[/html]
[javascript]
var imgProps = $('myImage').getProperties(); // returns: { id: 'myImage', src: 'mootools.png', title: 'MooTools, the compact JavaScript framework', alt: '' }
[/javascript]
See Also:
*/
getProperties: function(){
var result = {};
$each(arguments, function(key){
result[key] = this.getProperty(key);
}, this);
return result;
},
/*
Method: setProperty
Sets an attribute for the Element.
Arguments:
property - (string) The property to assign the value passed in.
value - (mixed) The value to assign to the property passed in.
Return:
(element) - This Element.
Example:
HTML:
[html]
![]()
[/html]
[javascript]
$('myImage').setProperty('src', 'mootools.png');
[/javascript]
Result:
[html]
[/html]
*/
setProperty: function(property, value){
var index = Element.$attributes[property];
if (index) this[index] = value;
else this.setAttribute(property, value);
return this;
},
/*
Method: setProperties
Sets numerous attributes for the Element.
Arguments:
properties - (object) An object with key/value pairs.
Returns:
(element) This Element.
Example:
HTML:
[html]
![]()
[/html]
[javascript]
$('myImage').setProperties({
src: 'whatever.gif',
alt: 'whatever dude'
});
[/javascript]
Result:
[html]
[/html]
*/
setProperties: function(properties){
for (var property in properties) this.setProperty(property, properties[property]);
return this;
},
/*
Method: setHTML
Sets the innerHTML of the Element.
Syntax:
>myElement.setHTML([htmlString[, htmlString2[, htmlString3[, ..]]]);
Arguments:
Any number of string paramters with html.
Returns:
(element) This Element.
Example:
HTML:
[html]
[/html]
[javascript]
$('myElement').setHTML('', '');
[/javascript]
Result:
[html]
[/html]
Note:
Any Elements added with setHTML will not be collected. This may be a source of memory leak.
See Also:
*/
setHTML: function(){
this.innerHTML = Array.join(arguments, '');
return this;
},
/*
Method: setText
Sets the inner text of the Element.
Syntax:
>myElement.setText(text);
Arguments:
text - (string) The new text content for the Element.
Returns:
(element) This Element.
Example:
HTML:
[html]
[/html]
[javascript]
$('myElement').setText('some text') //the text of myElement is now = 'some text'
[/javascript]
Result:
[html]
![]()
[/html]
[javascript]
var myTag = $('myImage').getTag() // myTag = 'img';
[/javascript]
See Also:
*/
getTag: function(){
return this.tagName.toLowerCase();
},
/*
Method: empty
Empties an Element of all its children.
Syntax:
>myElement.empty();
Returns:
(element) This Element..
Example:
HTML:
[html]
[/html]
[javascript]
$('myElement').empty() // empties the Div and returns it
[/javascript]
Result:
[html]
[/html]
*/
empty: function(){
Garbage.trash(this.getElementsByTagName('*'));
return this.setHTML('');
},
/*
Method: destroy
Empties an Element of all its children, removes and garbages the Element.
Syntax:
>myElement.destroy();
Returns:
(null)
Example:
HTML:
[html]
[/html]
[javascript]
$('myElement').destroy() // the Element is no more.
[/javascript]
See Also:
*/
destroy: function(){
Garbage.kill(this.empty().remove());
return null;
}
});
Element.$badTags = ['object', 'embed'];
Element.$attributes = {
'class': 'className', 'for': 'htmlFor', 'colspan': 'colSpan', 'rowspan': 'rowSpan',
'accesskey': 'accessKey', 'tabindex': 'tabIndex', 'maxlength': 'maxLength',
'readonly': 'readOnly', 'frameborder': 'frameBorder', 'value': 'value',
'disabled': 'disabled', 'checked': 'checked', 'multiple': 'multiple', 'selected': 'selected'
};
Element.$attributesIFlag = {
'href': 2, 'src': 2
};
Client.expand({
addListener: function(type, fn){
if (this.addEventListener) this.addEventListener(type, fn, false);
else this.attachEvent('on' + type, fn);
return this;
},
removeListener: function(type, fn){
if (this.removeEventListener) this.removeEventListener(type, fn, false);
else this.detachEvent('on' + type, fn);
return this;
}
});
Element.UID = 0;
var Garbage = {
elements: {},
collect: function(el){
if (!el.$attributes){
el.$attributes = {'opacity': 1, 'uid': Element.UID++};
Garbage.elements[el.$attributes.uid] = el;
}
return el;
},
trash: function(elements){
for (var i = elements.length, el; i--;){
if (!(el = elements[i]) || !el.$attributes) continue;
if (!el.tagName || Element.$badTags.contains(el.tagName.toLowerCase())) Garbage.kill(el);
}
},
kill: function(el, unload){
delete Garbage.elements[String(el.$attributes.uid)];
if (el.$events) el.fireEvent('trash', unload).removeEvents();
for (var p in el.$attributes) el.$attributes[p] = null;
if (Client.Engine.ie){
for (var d in Element.prototype) el[d] = null;
}
el.htmlElement = el.$attributes = el = null;
},
empty: function(){
Garbage.collect(window);
Garbage.collect(document);
for (var uid in Garbage.elements) Garbage.kill(Garbage.elements[uid], true);
}
};
window.addListener('beforeunload', function(){
window.addListener('unload', Garbage.empty);
if (Client.Engine.ie) window.addListener('unload', CollectGarbage);
});
/*
Script: Element.Form.js
Contains Element prototypes to deal with Forms and their elements.
License:
MIT-style license.
*/
/*
Class: Element
Custom class to allow all of its methods to be used with any DOM element via the dollar function <$>.
*/
Element.extend({
/*
Method: getValue
Returns the value of the Element, if its tag is textarea, select or input. getValue called on a multiple select will return an array.
Syntax:
>var value = myElement.getValue();
Returns:
(mixed) Returns false if if tag is not a 'select', 'input', or 'textarea'. Otherwise returns the value of the Element.
Example:
HTML:
[html]
[/html]
Result:
[javascript]
var result = $('myForm').getElement('select').getValue(); // returns 'Saab'
[/javascript]
*/
getValue: function(){
switch (this.getTag()){
case 'select':
var values = [];
$each(this.options, function(option){
if (option.selected) values.push(option.value);
});
return (this.multiple) ? values : values[0];
case 'input': if (!(this.checked && ['checkbox', 'radio'].contains(this.type)) && !['hidden', 'text', 'password'].contains(this.type)) break;
case 'textarea': return this.value;
}
return false;
},
/*
Method: getFormElements
Finds, extends, and returns all descendant form Elements: 'input, 'select', and 'textarea'.
Syntax:
>var elements = myElement.getFormElements();
Returns:
(array) A collection of Elements.
Example:
HTML:
[html]
[/html]
[javascript]
$('myForm').getFormElements(); // returns: [
hey
[/html]
[javascript]
$('myElement').appendText('. howdy'); //myElement innerHTML is now "hey howdy"
[/javascript]
Result:
[html]
hey. howdy
[/html]
*/
appendText: function(text){
this.appendChild(document.createTextNode(text));
return this;
},
/*
Method: hasClass
Tests the Element to see if it has the passed in className.
Syntax:
>var result = myElement.hasClass(className);
Arguments:
className - (string) The class name to test.
Returns:
(boolean) Returns true if the Element has the class, otherwise false.
Example:
[html]
[/html]
[javascript]
$('myElement').hasClass('testClass'); //returns true
[/javascript]
*/
hasClass: function(className){
return this.className.contains(className, ' ');
},
/*
Method: addClass
Adds the passed in class to the Element, if the Element doesnt already have it.
Syntax:
>myElement.addClass(className);
Arguments:
className - (string) The class name to add.
Returns:
(element) This Element.
Example:
HTML:
[html]
[/html]
[javascript]
$('myElement').addClass('newClass');
[/javascript]
Result:
[html]
[/html]
*/
addClass: function(className){
if (!this.hasClass(className)) this.className = (this.className + ' ' + className).clean();
return this;
},
/*
Method: removeClass
Works like
[/html]
[javascript]
$('myImage').getProperty('src') // returns mootools.png
[/javascript]
*/
getProperty: function(property){
var index = Element.$attributes[property];
if (index) return this[index];
var flag = Element.$attributesIFlag[property] || 0;
if (!Client.Engine.ie || flag) return this.getAttribute(property, flag);
var node = (this.attributes) ? this.attributes[property] : null;
return (node) ? node.nodeValue : null;
},
/*
Method: removeProperty
Removes an attribute from the Element.
Syntax:
>myElement.removeProperty(property);
Arguments:
property - (string) The attribute to remove.
Returns:
(element) This Element.
Example:
HTML:
[html]
[/html]
[javascript]
$('myAnchor').removeProperty('onmousedown'); //eww inline javascript is bad! Let's get rid of it.
[/javascript]
Result:
[html]
[/html]
*/
removeProperty: function(property){
var index = Element.$attributes[property];
if (index) this[index] = '';
else this.removeAttribute(property);
return this;
},
/*
Method: getProperties
Same as
[/html]
[javascript]
var imgProps = $('myImage').getProperties(); // returns: { id: 'myImage', src: 'mootools.png', title: 'MooTools, the compact JavaScript framework', alt: '' }
[/javascript]
See Also:
[/html]
*/
setProperty: function(property, value){
var index = Element.$attributes[property];
if (index) this[index] = value;
else this.setAttribute(property, value);
return this;
},
/*
Method: setProperties
Sets numerous attributes for the Element.
Arguments:
properties - (object) An object with key/value pairs.
Returns:
(element) This Element.
Example:
HTML:
[html]
[/html]
*/
setProperties: function(properties){
for (var property in properties) this.setProperty(property, properties[property]);
return this;
},
/*
Method: setHTML
Sets the innerHTML of the Element.
Syntax:
>myElement.setHTML([htmlString[, htmlString2[, htmlString3[, ..]]]);
Arguments:
Any number of string paramters with html.
Returns:
(element) This Element.
Example:
HTML:
[html]
[/html]
[javascript]
$('myElement').setHTML('', '');
[/javascript]
Result:
[html]
some text
[/html]
*/
setText: function(text){
var tag = this.getTag();
if (['style', 'script'].contains(tag)){
if (Client.Engine.ie){
if (tag == 'style') this.styleSheet.cssText = text;
else if (tag == 'script') this.setProperty('text', text);
return this;
} else {
if (this.firstChild) this.removeChild(this.firstChild);
return this.appendText(text);
}
}
this[$defined(this.innerText) ? 'innerText' : 'textContent'] = text;
return this;
},
/*
Method: getText
Gets the inner text of the Element.
Syntax:
>var myText = myElement.getText();
Returns:
(string) The text of the Element.
Example:
HTML:
[html]
my text
[/html]
[javascript]
var myText = $('myElement').getText(); //myText = 'my text';
[/javascript]
*/
getText: function(){
var tag = this.getTag();
if (['style', 'script'].contains(tag)){
if (Client.Engine.ie){
if (tag == 'style') return this.styleSheet.cssText;
else if (tag == 'script') return this.getProperty('text');
} else {
return this.innerHTML;
}
}
return $pick(this.innerText, this.textContent);
},
/*
Method: getTag
Returns the tagName of the Element in lower case.
Syntax:
>var myTag = myElement.getTag();
Returns:
(string) The tag name in lower case
Example:
HTML:
[html]