, 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: 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 and is 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;
}
});
/*
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, array)
Arguments:
item - (mixed) The current item in the array.
index - (number) The current item's index in the array.
array - (array) The actual 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]
*/
Array.prototype.each = Array.prototype.forEach;
Array.each = Array.forEach;
/* Section: Utility Functions */
/*
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, object)
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.
object - (mixed) The actual array/object.
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){
var type = $type(iterable);
if (!type) return;
((type == 'arguments' || type == 'collection' || type == 'array') ? Array : Hash).each(iterable, fn, bind);
};
/*
Script: String.js
Contains String prototypes.
License:
MIT-style license.
*/
/*
Native: String
A collection of the String Object prototype methods.
See Also:
*/
String.implement({
/*
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;
}
});
/*
Native: Array
Contains Array prototypes.
See Also:
*/
Array.implement({
/*
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(' + String(rgb) + ')';
},
/*
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.
*/
/*
Native: Function
A collection of The Function Object prototype methods.
See Also:
*/
Function.implement({
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($pick(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})();
},
/*
Method: run
Runs the Function with specified arguments and binding. Kinda like .apply but reversed and with support for single argument.
Syntax:
>var myFunctionResult = myFunction.run(args[, bind]);
Arguments:
args - (mixed) An argument, or array of arguments to run the function with.
bind - (object, optional) The object that the "this" of the function will refer to.
Returns:
(mixed) This Function's return.
Examples:
Simple run:
[javascript]
var myFn = function(a, b, c){
return a + b + c;
}
var myArgs = [1,2,3];
myFn.run(args); //returns 6
[/javascript]
Run with binding:
[javascript]
var myFn = function(a, b, c){
return a + b + c + this;
}
var myArgs = [1,2,3];
myFn.run(args, 6); //returns 12
[/javascript]
*/
run: function(args, bind){
return this.apply(bind, $splat(args));
}
});
Function.empty = $empty;
/*
Script: Number.js
Contains the Number prototypes.
License:
MIT-style license.
*/
/*
Native: Number
A collection of the Number Object prototype methods.
See Also:
*/
Number.implement({
/*
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: Hash.js
Contains the Hash implementation for custom Object prototypes.
License:
MIT-style license.
*/
/*
Native: Hash
A Custom "Object" ({}) implementation which does not account for prototypes when setting, getting, iterating.
*/
var Hash = new Native({
name: 'Hash',
initialize: function(object){
if (object){
if ($type(object) == 'hash') return object;
this.extend(object);
}
return this;
}
});
function $H(object){
return new Hash(object);
};
Hash.implement({
/*
Method: each
Calls a function for each key-value pair in the object.
Syntax:
>myArray.forEach(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(value, key, hash)
Arguments:
value - (mixed) The current value in the hash.
key - (string) The current value's key in the hash.
hash - (hash) The actual hash.
Example:
[javascript]
var hash = new Hash({first: "Sunday", second: "Monday", third: "Tuesday"});
hash.each(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]
*/
each: function(fn, bind){
for (var key in this){
if (this.hasOwnProperty(key)) fn.call(bind, this[key], key, this);
}
},
/*
Method: contains
Tests for the presence of a specified key in the Hash.
Syntax:
>var inHash = myHash.contains(item);
Arguments:
key - (string) The key to search for in the Hash.
Returns:
(boolean) If the Hash has a defined value for the specified key, returns true. Otherwise, returns false.
Example:
[javascript]
var hash = new Hash({'a': 'one', 'b': 'two', 'c': 'three'});
hash.contains('a'); //returns true
hash.contains('d'); //returns false
[/javascript]
Notes:
Testing for a Hash prototype will never return true. Only testing the actual properties of the Hash will return true.
*/
contains: function(key){
return this.hasOwnProperty(key);
},
/*
Method: extend
Extends this Hash with the key-value pairs from the object passed in.
Syntax:
>myHash.extend(properties);
Arguments:
properties - (object) The object whose items should be extended into this Hash.
Returns:
(hash) This Hash, extended.
Example:
[javascript]
var hash = new Hash({
'name': 'John',
'lastName': 'Doe'
});
var properties = {
'age': '20',
'sex': 'male',
'lastName': 'Dorian'
};
hash.extend(properties);
//hash now holds an object containing: { 'name': 'John', 'lastName': 'Dorian', 'age': '20', 'sex': 'male' };
[/javascript]
*/
extend: function(properties){
Hash.each(properties, function(value, key){
this[key] = value;
}, this);
return this;
},
/*
Method: merge
Merges this Hash with the key-value pairs of the object passed in. Does not allow duplicates and is case and type sensitive.
Syntax:
>myHash.merge(properties);
Arguments:
properties - (object) The object whose items should be merged into this Hash.
Returns:
(hash) This Hash, merged with the new key-value pairs.
Example:
[javascript]
var hash = new Hash({
'name': 'John',
'lastName': 'Doe'
});
var properties = {
'age': '20',
'sex': 'male',
'lastName': 'Dorian'
};
hash.merge(properties);
//hash now holds an object containing: { 'name': 'John', 'lastName': 'Doe', 'age': '20', 'sex': 'male' };
[/javascript]
*/
merge: function(properties){
Hash.each(properties, function(value, key){
this.include(key, value);
}, this);
return this;
},
/*
Method: remove
Removes the specified key from the Hash.
Syntax:
>myHash.remove(key);
Arguments:
key - (string) The key to search for in the Hash.
Returns:
(hash) This Hash with the specified key and its value removed.
Example:
[javascript]
var hash = new Hash({
'name': 'John',
'lastName': 'Doe'
});
hash.remove('lastName');
//hash now holds an object containing: { 'name': 'John' };
[/javascript]
*/
remove: function(key){
if (this.contains(key)) delete this[key];
return this;
},
/*
Method: get
Retrieves a value from the hash, or if no key is specified, returns a clean copy of the object that this Hash holds.
Syntax:
>myHash.get([key]);
Arguments:
key - (string, optional) The key to search for in the Hash.
Returns:
(mixed) If a key is specified, returns the value that corresponds to the key if found, or null if the key doesn't exist.
If no argument is passed, a clean copy of the object this Hash holds is returned.
Example:
[javascript]
var hash = new Hash({
'name': 'John',
'lastName': 'Doe'
});
hash.get('name'); //returns 'John'
hash.get(); //returns { 'name': 'John', 'lastName': 'Doe' }
[/javascript]
*/
get: function(key){
if (key) return (this.contains(key)) ? this[key] : null;
var clean = {};
this.each(function(value, key){
clean[key] = value;
});
return clean;
},
/*
Property: getKeys
Returns an array containing all the keys, in the same order as the values returned by .
Syntax:
>var keys = myHash.getKeys();
Returns:
(array) An array containing all the keys of the hash.
*/
getKeys: function(){
var keys = [];
Hash.each(this, function(value, key){
keys.push(key);
});
return keys;
},
/*
Property: getValues
Returns an array containing all the values, in the same order as the keys returned by .
Syntax:
>var values = myHash.getValues();
Returns:
(array) An array containing all the values of the hash.
*/
getValues: function(){
var values = [];
Hash.each(this, function(value, key){
values.push(value);
});
return values;
},
/*
Method: set
Adds a key-value pair to the hash or replaces a previous value associated with the specified key.
Syntax:
>myHash.set(key, value);
Arguments:
key - (string) The key to insert or modify in the Hash.
value - (mixed) The value to associate with the specified key in the Hash.
Returns:
(hash) This Hash with the specified key set to the specified value.
Example:
[javascript]
var hash = new Hash({
'name': 'John',
'lastName': 'Doe'
});
hash.set('name', 'Michelle'); //hash.name is now 'Michelle'
[/javascript]
*/
set: function(key, value){
if (!this[key] || this.contains(key)) this[key] = value;
return this;
},
/*
Method: empty
Empties the hash.
Syntax:
>myHash.empty();
Example:
[javascript]
var hash = new Hash({
'name': 'John',
'lastName': 'Doe'
});
hash.empty();
//hash now holds an empty object: {}
[/javascript]
*/
empty: function(){
Hash.each(this, function(value, key){
delete this[key];
}, this);
},
/*
Method: include
Includes the specified key-value pair in the Hash if the key doesn't already exist.
Syntax:
>myHash.include(key, value);
Arguments:
key - (string) The key to insert into the Hash.
value - (mixed) The value to associate with the specified key in the Hash.
Returns:
(hash) This Hash with the specified key included if it did not previously exist.
Example:
[javascript]
var hash = new Hash({
'name': 'John',
'lastName': 'Doe'
});
hash.include('name', 'Michelle'); //hash is unchanged
hash.include('age', 25); //hash.age is now 25
[/javascript]
*/
include: function(key, value){
if (!this[key]) this[key] = value;
return this;
},
/*
Method: map
Creates a new map with the results of calling a provided function on every value in the map.
Syntax:
>var mappedHash = myHash.map(fn[, bind]);
Arguments:
fn - (function) The function to produce an element of the new Array from an element of the current one.
bind - (object, optional) The object to use as 'this' in the function. For more information see .
fn (continued):
Signature:
>fn(value, key, hash)
Arguments:
value - (mixed) The current value in the hash.
key - (string) The current value's key in the hash.
hash - (hash) The actual hash.
Returns:
(array) The new mapped hash.
Example:
[javascript]
var timesTwo = new Hash({a: 1, b: 2, c: 3}).map(function(item, index){
return item * 2;
}); //timesTwo now holds an object containing: {a: 2, b: 4, c: 6};
[/javascript]
*/
map: function(fn, bind){
var results = new Hash;
Hash.each(this, function(value, key){
results.set(key, fn.call(bind, value, key, this));
}, this);
return results;
},
/*
Method: filter
Creates a new Hash with all of the elements of the Hash for which the provided filtering function returns true.
Syntax:
>var filteredHash = myHash.filter(fn[, bind]);
Arguments:
fn - (function) The function to test each element of the Hash. This function is passed the value and its key in the Hash.
bind - (object, optional) The object to use as 'this' in the function. For more information see .
fn (continued):
Signature:
>fn(value, key, hash)
Arguments:
value - (mixed) The current value in the hash.
key - (string) The current value's key in the hash.
hash - (hash) The actual hash.
Returns:
(hash) The new filtered hash.
Example:
[javascript]
var biggerThanTwenty = new Hash({a: 10, b: 20, c: 30}).filter(function(value, key){
return value > 20;
}); //biggerThanTwenty now holds an object containing: {c: 30}
[/javascript]
*/
filter: function(fn, bind){
var results = new Hash;
Hash.each(this, function(value, key){
if (fn.call(bind, value, key, this)) results.set(key, value);
}, this);
return results;
},
/*
Method: every
Returns true if every value in the object satisfies the provided testing function.
Syntax:
>var allPassed = myHash.every(fn[, bind]);
Arguments:
fn - (function) The function to test each element of the Hash. This function is passed the value and its key in the Hash.
bind - (object, optional) The object to use as 'this' in the function. For more information see .
fn (continued):
Signature:
>fn(value, key, hash)
Arguments:
value - (mixed) The current value in the hash.
key - (string) The current value's key in the hash.
hash - (hash) The actual hash.
Returns:
(boolean) If every value in the Hash satisfies the provided testing function, returns true. Otherwise, returns false.
Example:
[javascript]
var areAllBigEnough = ({a: 10, b: 4, c: 25, d: 100}).every(function(value, key){
return value > 20;
}); //areAllBigEnough = false
[/javascript]
*/
every: function(fn, bind){
for (var key in this){
if (this.hasOwnProperty(key) && !fn.call(bind, this[key], key)) return false;
}
return true;
},
/*
Method: some
Returns true if at least one value in the object satisfies the provided testing function.
Syntax:
>var anyPassed = myHash.any(fn[, bind]);
Arguments:
fn - (function) The function to test each element of the Hash. This function is passed the value and its key in the Hash.
bind - (object, optional) The object to use as 'this' in the function. For more information see .
fn (continued):
Signature:
>fn(value, key, hash)
Arguments:
value - (mixed) The current value in the hash.
key - (string) The current value's key in the hash.
hash - (hash) The actual hash.
Returns:
(boolean) If any value in the Hash satisfies the provided testing function, returns true. Otherwise, returns false.
Example:
[javascript]
var areAllBigEnough = ({a: 10, b: 4, c: 25, d: 100}).some(function(value, key){
return value > 20;
}); //isAnyBigEnough = true
[/javascript]
*/
some: function(fn, bind){
for (var key in this){
if (this.hasOwnProperty(key) && fn.call(bind, this[key], key)) return true;
}
return false;
}
});
/*
Script: Class.js
Contains the Class implementations.
License:
MIT-style license.
*/
/*
Function: Class
The base Class object of the .
Syntax:
>MyClass.implement(properties);
Arguments:
properties - (object) The properties to add to the base Class.
Example:
[javascript]
var Animal = new Class({
initialize: function(age){
this.age = age;
}
});
Animal.implement({
setName: function(name){
this.name = name
}
});
var myAnimal = new Animal(20);
myAnimal.setName('Micia');
alert(myAnimal.name); //alerts 'Micia'
[/javascript]
*/
implement: function(){
$extend(this.prototype, Class.Implements.run(arguments));
return this;
}
};
Class.Implements = function(){
var all = {};
Array.each(arguments, function(set){
$extend(all, ($type(set) == 'class') ? new set($empty) : set);
});
return all;
};
Class.Extends = function(klass, properties){
var proto = new klass($empty);
for (var property in properties){
var pp = proto[property];
proto[property] = Class.merge(pp, properties[property]);
}
return proto;
};
Class.merge = function(previous, current){
if ($defined(previous) && previous != current){
var type = $type(current);
if (type != $type(previous)) return current;
switch (type){
case 'function':
return function(){
current.parent = this.parent = previous.bind(this);
return current.apply(this, arguments);
};
case 'object': return $merge(previous, current);
}
}
return current;
};
/*
Script: Class.Extras.js
Contains common implementations for custom classes.
In MooTools these Utilities are implemented in , , and many other Classes to provide rich functionality.
License:
MIT-style license.
*/
/*
Class: Chain
A "Utility" Class which executes functions one after another, with each function firing after completion of the previous.
Its methods can be implemented with into any , and it is currently implemented in , and .
In , for example, it is used to create custom, complex animations.
Syntax:
For new classes:
>var MyClass = new Class({ Implements: Chain });
For existing classes:
>MyClass.implement(new Chain);
Example:
[javascript]
var Todo = new Class({
Implements: Chain,
initialize: function(){
this.chain.apply(this, arguments);
}
});
var myTodoList = new Todo(
function(){ alert('get groceries'); },
function(){ alert('go workout'); },
function(){ alert('code mootools documentation until eyes close involuntarily'); },
function(){ alert('sleep'); }
);
[/javascript]
See Also:
*/
var Chain = new Class({
/*
Method: chain
Adds functions to the end of the call stack of the Chain instance.
Syntax:
>myClass.chain(fn[, fn2[, fn3[, ...]]]);
Arguments:
Any number of functions.
Returns:
(class) This Class instance. Calls to chain can also be chained.
Example:
[javascript]
//will fade the element in and out three times
var myFx = new Fx.Style('myElement', 'opacity'); //Fx.Style has implemented class Chain because of inheritance.
myFx.start(1,0).chain(
function(){ this.start(0,1); }, //notice that "this" refers to the calling object. In this case: myFx object.
function(){ this.start(1,0); },
function(){ this.start(0,1); }
);
[/javascript]
See Also:
,
*/
chain: function(){
this.$chain = (this.$chain || []).extend(arguments);
return this;
},
/*
Method: callChain
Removes the first function of the Chain instance stack and executes it. The next function will then become first in the array.
Syntax:
>myClass.callChain();
Returns:
(class) This Class instance.
Example:
[javascript]
var Queue = new Class({
Implements: Chain,
initialize: function(){
this.chain.apply(this, arguments);
}
});
var myQueue = new Queue();
myQueue.chain(
function(){ alert('do dishes'); },
function(){ alert('put away clean dishes'); }
);
myQueue.callChain(); //alerts 'do dishes'
myQueue.callChain(); //alerts 'put away clean dishes'
[/javascript]
*/
callChain: function(){
if (this.$chain && this.$chain.length) this.$chain.shift().delay(10, this);
return this;
},
/*
Method: clearChain
Clears the stack of a Chain instance.
Syntax:
>myClass.clearChain();
Returns:
(class) This Class instance.
Example:
[javascript]
var myFx = Fx.Style('myElement', 'color'); //Fx.Style inherited Fx's implementation of Chain see
myFx.chain(function(){ while(true) alert('doh!'); }); //don't try this at home, kids.
myFx.clearChain(); // .. that was a close one ...
[/javascript]
See Also:
,
*/
clearChain: function(){
if (this.$chain) this.$chain.empty();
return this;
}
});
/*
Class: Events
A "Utility" Class. Its methods can be implemented with into any .
In , for example, this Class is used to allow any number of functions to be added to the Fx events, like onComplete, onStart, and onCancel.
Events in a Class that implements must be either added as an option or with addEvent, not directly through .options.onEventName.
Syntax:
For new classes:
>var MyClass = new Class({ Implements: Events });
For existing classes:
>MyClass.implement(new Events);
Implementing:
This class can be implemented into other classes to add its functionality to them.
It has been designed to work well with the class.
Example:
[javascript]
var Widget = new Class({
Implements: Events,
initialize: function(element){
...
},
complete: function(){
this.fireEvent('onComplete');
}
});
var myWidget = new Widget();
myWidget.addEvent('onComplete', myFunction);
[/javascript]
See Also:
,
*/
var Events = new Class({
/*
Method: addEvent
Adds an event to the Class instance's event stack.
Syntax:
>myClass.addEvent(type, fn[, internal]);
Arguments:
type - (string) The type of event (e.g. 'onComplete').
fn - (function) The function to execute.
internal - (boolean, optional) Sets the function property: internal to true. Internal property is used to prevent removal.
Returns:
(class) This Class instance.
Example:
[javascript]
var myFx = new Fx.Style('element', 'opacity');
myFx.addEvent('onStart', myStartFunction);
[/javascript]
*/
addEvent: function(type, fn, internal){
if (fn != $empty){
this.$events = this.$events || {};
this.$events[type] = this.$events[type] || [];
this.$events[type].include(fn);
if (internal) fn.internal = true;
}
return this;
},
/*
Method: addEvents
Works as , but accepts an object to add multiple events at once.
Syntax:
>myClass.addEvents(events);
Arguments:
events - (object) An object containing a collection of event type / function pairs.
Returns:
(class) This Class instance.
Example:
[javascript]
var myFx = new Fx.Style('element', 'opacity');
myFx.addEvents({
'onStart': myStartFunction,
'onComplete': myCompleteFunction
});
[/javascript]
*/
addEvents: function(events){
for (var type in events) this.addEvent(type, events[type]);
return this;
},
/*
Method: fireEvent
Fires all events of the specified type in the Class instance.
Syntax:
>myClass.fireEvent(type[, args[, delay]]);
Arguments:
type - (string) The type of event (e.g. 'onComplete').
args - (mixed, optional) The argument(s) to pass to the function. To pass more than one argument, the arguments must be in an array.
delay - (number, optional) Delay in miliseconds to wait before executing the event (defaults to 0).
Returns:
(class) This Class instance.
Example:
[javascript]
var Widget = new Class({
Implements: Events,
initialize: function(arg1, arg2){
...
this.fireEvent("onInitialize", [arg1, arg2], 50);
}
});
[/javascript]
*/
fireEvent: function(type, args, delay){
if (this.$events && this.$events[type]){
this.$events[type].each(function(fn){
fn.create({'bind': this, 'delay': delay, 'arguments': args})();
}, this);
}
return this;
},
/*
Method: removeEvent
Removes an event from the stack of events of the Class instance.
Syntax:
>myClass.removeEvent(type, fn);
Arguments:
type - (string) The type of event (e.g. 'onComplete').
fn - (function) The function to remove. Note: this argument is not optional. You must pass the exact function that was added as an event in order to remove it.
Returns:
(class) This Class instance.
Note:
If the function has the property internal and is set to true, then the event will not be removed.
*/
removeEvent: function(type, fn){
if (!this.$events) return this;
if (this.$events && this.$events[type]){
if (!fn.internal) this.$events[type].remove(fn);
}
return this;
},
/*
Method: removeEvents
Removes all events of the given type from the stack of events of a Class instance. If no type is specified, removes all events of all types.
Syntax:
>myClass.removeEvents([type]);
Arguments:
type - (string, optional) The type of event to remove (e.g. 'onComplete'). If no type is specified, removes all events of all types.
Returns:
(class) This Class instance.
Example:
[javascript]
var myFx = new Fx.Style('element', 'opacity');
myFx.removeEvents('onComplete');
[/javascript]
Note:
Will not remove internal events. See .
*/
removeEvents: function(type){
for (var e in this.$events){
if (!type || type == e){
var fns = this.$events[e];
for (var i = fns.length; i--;) this.removeEvent(e, fns[i]);
}
}
return this;
}
});
/*
Class: Options
A "Utility" Class. Its methods can be implemented with into any .
Used to automate the setting of a Class instance's options.
Will also add Class when the option property begins with on, followed by a capital letter (e.g. 'onComplete').
Syntax:
For new classes:
>var MyClass = new Class({Implements: Options});
For existing classes:
>MyClass.implement(Options);
*/
var Options = new Class({
/*
Method: setOptions
Merges the default options of the Class with the options passed in.
Syntax:
>myClass.setOptions([options]);
Arguments:
options - (object, optional) The user defined options to merge with the defaults.
Returns:
(class) This Class instance.
Example:
[javascript]
var Widget = new Class({
Implements: Options,
options: {
color: '#fff',
size: {
width: 100,
height: 100
}
},
initialize: function(options){
this.setOptions(options);
}
});
var myWidget = new Widget({
color: '#f00',
size: {
width: 200
}
});
//myWidget.options is now {color: #f00, size: {width: 200, height: 100}}
[/javascript]
Note:
Relies on the default options of a Class defined in its options object.
If a Class has implemented, every option beginning with 'on' and followed by a capital letter (e.g. 'onComplete') becomes a Class instance event, assuming the value of the option is a function.
*/
setOptions: function(options){
this.options = $merge(this.options, options);
if (this.addEvent){
for (var option in this.options){
if ((/^on[A-Z]/).test(option) && $type(this.options[option]) == 'function') this.addEvent(option, this.options[option]);
}
}
return this;
}
});
/*
Script: Element.js
One of the most important items of MooTools, contains the dollar function, the dollars function, and an handful of cross-browser, time-saver methods to let you easily work with HTML Elements.
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 = new Native({
initialize: function(){
var params = Array.associate(arguments, {'document': 'document', 'properties': 'object', 'element': true});
var props = params.properties || {}, el = params.element, doc = params.document || document;
if (el == 'iframe') return new IFrame(props, doc);
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 = doc.createElement(el);
}
el = $(el);
return (!props || !el) ? el : el.set(props);
},
implement: function(properties){
HTMLElement.implement(properties);
for (var key in properties) Elements.prototype[(Array.prototype[key]) ? key + 'Elements' : key] = Elements.$multiply(key);
}
});
/*
Native: IFrame
Custom Native to create and easily work with IFrames.
*/
/*
Method: constructor
Creates an iframe and extends its window and document.
returns the raw element, if you want to work with the iframe use the "this" in the onload method you pass in.
*/
var IFrame = new Native({
name: 'IFrame',
initialize: function(){
var params = Array.associate(arguments, {'document': 'document', 'properties': 'object'});
var props = params.properties || {}, doc = params.document || document;
var iframe = $(document.createElement('iframe'));
iframe.name = props.name || 'iframe-' + iframe.$attributes.uid;
delete props.name;
var onload = props.onload || $empty;
delete props.onload;
iframe.onload = function(){
var frame = this.ownerDocument.window.frames[this.name];
new Window(frame);
new Document(frame.document);
onload.call(frame);
};
return $extend(iframe, this).set(props);
},
generics: false
});
/*
Native: 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 = new Native({
initialize: function(elements, nocheck){
elements = elements || [];
var length = elements.length;
if (nocheck || !length) return $extend(elements, this);
var uniques = {};
var returned = [];
for (var i = 0; i < length; i++){
var el = $(elements[i]);
if (!el || uniques[el.$attributes.uid]) continue;
uniques[el.$attributes.uid] = true;
returned.push(el);
}
return $extend(returned, this);
}
});
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;
};
};
/*
Native: Window
these methods are attached to the window[s] object.
*/
Window.implement({
/*
Function: $
Returns the element passed in with all the Element prototypes applied.
Arguments:
el - (mixed) A string containing the id of the DOM element desired or a reference to an actual DOM element.
Example:
>$('myElement') // gets a DOM element by id with all the Element prototypes applied.
>var div = document.getElementById('myElement');
>$(div) //returns an Element also with all the mootools extensions applied.
You'll use this when you aren't sure if a variable is an actual element or an id, as
well as just shorthand for document.getElementById().
Returns:
a DOM element or false (if no id was found).
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.
*/
$: function(el){
if (!el) return null;
if (el.htmlElement) return Garbage.collect(el);
var type = $type(el);
if (type == 'string'){
el = this.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);
},
/*
Function: $$
Selects, 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.
Arguments:
HTML Collections, arrays of elements, arrays of strings as element ids, elements, strings as selectors.
Any number of the above as arguments are accepted.
Note:
if you load , $$ will also accept CSS Selectors, otherwise the only selectors supported are tag names.
Example:
>$$('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).
>$$(myelement, myelement2, 'a', ['myid', myid2, 'myid3'], document.getElementsByTagName('div'));
Returns a collection of the element referenced as myelement, the element referenced as myelement2, all of the link tags on the page,
the element with the id 'myid', followed by the elements with the ids of 'myid2' and 'myid3', and finally all the div elements on the page.
NOTE: If an element is not found, nothing will be included into the array (not even *null*).
Returns:
array - array of all the dom elements matched, extended with <$>. Returns as .
*/
$$: 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 = this.document.getElements(selector, true);
default: elements.extend(selector);
}
}
return new Elements(elements);
}
});
/*
Native: Element
Custom class to allow all of its methods to be used with any DOM element via the dollar function <$>.
*/
Native.implement([Element, Document], {
/*
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 is also available for the Document instances.
This method gets replaced when is included. enhances getElement so that it maches with CSS selectors.
*/
getElement: function(tag, nocash){
var element = this.getElementsByTagName(tag)[0] || null;
return (nocash) ? element : $(element);
},
/*
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.
This method is also available for the Document instances.
*/
getElements: function(tag, nocash){
var elements = this.getElementsByTagName(tag);
return (nocash) ? elements : $$(elements);
}
});
Element.Setters = new Hash({
attributes: function(properties){
this.setProperties(properties);
}
});
Element.Setters.properties = Element.Setters.attributes;
Element.implement({
/*
Method: getElementById
Targets an element with the specified id found inside the Element. Does not overwrite document.getElementById.
Arguments:
id - (string) the id of the element to find.
Returns:
(mixed) The element you find or null if none found.
*/
getElementById: function(id, nocash){
var el = this.ownerDocument.getElementById(id);
if (!el) return null;
for (var parent = el.parentNode; parent != this; parent = parent.parentNode){
if (!parent) return null;
}
return (nocash) ? el : $(el);
},
/*
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 = [];
Array.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.hasClass(className) ? this.removeClass(className) : this.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 = {};
Array.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
};
Native.implement([Element, Window, Document], {
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.Style.js
Contains useful Element methods to get/set styles in a fashionable way.
License:
MIT-style license.
*/
/*
Native: Element
Custom Native to allow all of its methods to be used with any DOM element via the dollar function <$>.
*/
Element.Setters.styles = function(styles){
this.setStyles(styles);
};
Element.implement({
/*
Method: setStyle
Sets a CSS property to the Element.
Syntax:
>myElement.setStyle(property, value);
Arguments:
property - (string) The property to set.
value - (mixed) The value to which to set it. For numeric values that require "px" you can pass an number.
Returns:
(element) This element.
Example:
[javascript]
$('myElement').setStyle('width', '300px'); //the width is now 300px
//or
$('myElement').setStyle('width', 300); //the width is now 300px
[/javascript]
Note:
All number values will automatically be rounded to the nearest whole number.
*/
setStyle: function(property, value){
switch (property){
case 'opacity': return this.setOpacity(parseFloat(value));
case 'float': property = (Client.Engine.ie) ? 'styleFloat' : 'cssFloat';
}
property = property.camelCase();
if ($type(value) != 'string'){
var map = (Element.Styles.All[property] || '@').split(' ');
value = $splat(value).map(function(val, i){
if (!map[i]) return '';
return ($type(val) == 'number') ? map[i].replace('@', Math.round(val)) : val;
}).join(' ');
} else if (value == Number(value) + ''){
value = Math.round(value);
}
this.style[property] = value;
return this;
},
/*
Method: setStyles
Applies a collection of styles to the Element.
Syntax:
>myElement.setStyles(styles);
Arguments:
styles - (mixed) An object, or string, containing all the styles to apply.
Returns:
(element) This element.
Example:
[javascript]
$('myElement').setStyles({
border: '1px solid #000',
width: 300,
height: 400
});
//or
$('myElement').setStyles('border: 1px solid #000; width: 300px; height: 400px;'); // See the Note
[/javascript]
Note:
When styles is a CSS string, all the CSS styles are overridden.
See Also:
*/
setStyles: function(styles){
switch ($type(styles)){
case 'object': for (var style in styles) this.setStyle(style, styles[style]); break;
case 'string': this.style.cssText = styles;
}
return this;
},
/*
Method: setOpacity
Sets the opacity of the Element, and sets also visibility == "hidden" if opacity == 0, and visibility = "visible" if opacity > 0.
Syntax:
>Element.setOpacity(opacity);
Arguments:
opacity - (float) A values from 0.0 to 1.0, where 1.0 is visible and 0.0 is hidden.
Returns:
(element) This element.
Example:
[javascript]
$('myElement').setOpacity(0.5) //make it 50% transparent
[/javascript]
*/
setOpacity: function(opacity){
if (opacity == 0){
if (this.style.visibility != 'hidden') this.style.visibility = 'hidden';
} else {
if (this.style.visibility != 'visible') this.style.visibility = 'visible';
}
if (!this.currentStyle || !this.currentStyle.hasLayout) this.style.zoom = 1;
if (Client.Engine.ie) this.style.filter = (opacity == 1) ? '' : 'alpha(opacity=' + opacity * 100 + ')';
this.style.opacity = this.$attributes.opacity = opacity;
return this;
},
/*
Method: getStyle
Returns the style of the Element given the property passed in.
Syntax:
>var style = myElement.getStyle(property);
Arguments:
property - (string) The css style property you want to retrieve.
Returns:
(string) The style value.
Example:
[javascript]
$('myElement').getStyle('width'); //returns "400px"
//but you can also use
$('myElement').getStyle('width').toInt(); //returns 400
[/javascript]
*/
getStyle: function(property){
property = property.camelCase();
if (property == 'opacity') return this.$attributes.opacity;
var result = this.style[property];
if (!$chk(result)){
result = [];
for (var style in Element.Styles.Short){
if (property != style) continue;
for (var s in Element.Styles.Short[style]) result.push(this.getStyle(s));
return (result.every(function(item){
return item == result[0];
})) ? result[0] : result.join(' ');
}
result = (this.currentStyle) ? this.currentStyle[property] : this.ownerDocument.window.getComputedStyle(this, null).getPropertyValue([property.hyphenate()]);
}
if (result){
result = String(result);
var color = result.match(/rgba?\([\d\s,]+\)/);
if (color) result = result.replace(color[0], color[0].rgbToHex());
}
return (Client.Engine.ie) ? Element.$fixStyle(property, result, this) : result;
},
/*
Method: getStyles
Returns an object of styles of the Element for each argument passed in.
Syntax:
>var styles = myElement.getStyles(property[, property2[, property3[, ...]]]);
Arguments:
properties - (strings) Any number of style properties.
Returns:
(object) An key/value object with the CSS styles as computed by the browser.
Example:
[javascript]
$('myElement').getStyles('width', 'height', 'padding'); //returns {width: "10px", height: "10px", padding: "10px 0px 10px 0px"}
[/javascript]
See Also:
*/
getStyles: function(){
var result = {};
Array.each(arguments, function(key){
result[key] = this.getStyle(key);
}, this);
return result;
}
});
Element.$fixStyle = function(property, result, element){
if ($chk(parseInt(result))) return result;
if (['height', 'width'].contains(property)){
var values = (property == 'width') ? ['left', 'right'] : ['top', 'bottom'];
var size = 0;
values.each(function(value){
size += element.getStyle('border-' + value + '-width').toInt() + element.getStyle('padding-' + value).toInt();
});
return element['offset' + property.capitalize()] - size + 'px';
} else if (property.test(/border(.+)Width|margin|padding/)){
return '0px';
}
return result;
};
Element.Styles = {
All: {
'width': '@px', 'height': '@px', 'left': '@px', 'top': '@px', 'bottom': '@px', 'right': '@px',
'backgroundColor': 'rgb(@, @, @)', 'backgroundPosition': '@px @px', 'color': 'rgb(@, @, @)',
'fontSize': '@px', 'letterSpacing': '@px', 'lineHeight': '@px',
'margin': '@px @px @px @px', 'padding': '@px @px @px @px', 'border': '@px @ rgb(@, @, @) @px @ rgb(@, @, @) @px @ rgb(@, @, @)',
'borderWidth': '@px @px @px @px', 'borderStyle': '@ @ @ @', 'borderColor': 'rgb(@, @, @) rgb(@, @, @) rgb(@, @, @) rgb(@, @, @)',
'zIndex' : '@', 'zoom': '@', 'fontWeight': '@',
'textIndent': '@px', 'opacity': '@'
},
Short: {'margin': {}, 'padding': {}, 'border': {}, 'borderWidth': {}, 'borderStyle': {}, 'borderColor': {}}
};
['Top', 'Right', 'Bottom', 'Left'].each(function(direction){
var Short = Element.Styles.Short;
var All = Element.Styles.All;
['margin', 'padding'].each(function(style){
var sd = style + direction;
Short[style][sd] = All[sd] = '@px';
});
var bd = 'border' + direction;
Short.border[bd] = All[bd] = '@px @ rgb(@, @, @)';
var bdw = bd + 'Width', bds = bd + 'Style', bdc = bd + 'Color';
Short[bd] = {};
Short.borderWidth[bdw] = Short[bd][bdw] = '@px';
Short.borderStyle[bds] = Short[bd][bds] = '@';
Short.borderColor[bdc] = Short[bd][bdc] = 'rgb(@, @, @)';
});
/*
Script: Element.Event.js
Contains the Event Class, Element methods to deal with Element events, and custom Events.
License:
MIT-style license.
*/
/*
Class: Event
Cross browser Class to manage Events.
Syntax:
>var myEvent = new Event([event[, win]]);
Arguments:
event - (event, optional) An Event that needs to be extended.
win - (win, optional) The context of the event.
Properties:
shift - (boolean) True if the user pressed the shift
control - (boolean) True if the user pressed the control
alt - (boolean) True if the user pressed the alt
meta - (boolean) True if the user pressed the meta key
wheel - (number) The amount of third button scrolling
code - (number) The keycode of the key pressed
page.x - (number) The x position of the mouse, relative to the full window
page.y - (number) The y position of the mouse, relative to the full window
client.x - (number) The x position of the mouse, relative to the viewport
client.y - (number) The y position of the mouse, relative to the viewport
key - (string) The key pressed as a lowercase string. key also returns 'enter', 'up', 'down', 'left', 'right', 'space', 'backspace', 'delete', 'esc'.
target - (element) The event target, not extended with <$> for performance reasons.
relatedTarget - (element) The event related target, not extended with <$> for performance reasons.
Example:
[javascript]
$('myLink').addEvent('keydown', function(event){
// event is already the Event class, if you use el.onkeydown you have to write e = new Event(e);
alert(event.key); //returns the lowercase letter pressed
alert(event.shift); //returns true if the key pressed is shift
if (event.key == 's' && event.control) alert('document saved');
});
[/javascript]
Note:
Accessing event.page / event.client requires an XHTML doctype.
*/
var Event = new Class({
initialize: function(event, win){
if (event && event.$extended) return event;
this.$extended = true;
event = event || (win || window).event;
this.event = event;
this.type = event.type;
this.target = event.target || event.srcElement;
if (this.target.nodeType == 3) this.target = this.target.parentNode;
this.shift = event.shiftKey;
this.control = event.ctrlKey;
this.alt = event.altKey;
this.meta = event.metaKey;
if (['DOMMouseScroll', 'mousewheel'].contains(this.type)){
this.wheel = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
} else if (this.type.contains('key')){
this.code = event.which || event.keyCode;
for (var name in Event.Keys){
if (Event.Keys[name] == this.code){
this.key = name;
break;
}
}
if (this.type == 'keydown'){
var fKey = this.code - 111;
if (fKey > 0 && fKey < 13) this.key = 'f' + fKey;
}
this.key = this.key || String.fromCharCode(this.code).toLowerCase();
} else if (this.type.test(/(click|mouse|menu)/)){
this.page = {
'x': event.pageX || event.clientX + win.document.documentElement.scrollLeft,
'y': event.pageY || event.clientY + win.document.documentElement.scrollTop
};
this.client = {
'x': event.pageX ? event.pageX - win.pageXOffset : event.clientX,
'y': event.pageY ? event.pageY - win.pageYOffset : event.clientY
};
this.rightClick = (event.which == 3) || (event.button == 2);
switch (this.type){
case 'mouseover': this.relatedTarget = event.relatedTarget || event.fromElement; break;
case 'mouseout': this.relatedTarget = event.relatedTarget || event.toElement;
}
if (this.fixRelatedTarget.create({'bind': this, 'attempt': Client.Engine.gecko})() === false) this.relatedTarget = this.target;
}
return this;
},
/*
Method: stop
Stop an Event from propagating and also executes preventDefault.
Syntax:
>myEvent.stop();
Returns:
(class) This Event instance.
Example:
HTML:
[html]
Visit Google.com
[/html]
[javascript]
$('myAnchor').addEvent('click', function(event){
event.stop(); // prevent the user from leaving the site.
this.setText("Where do you think you're going?"); //'this' is Element that fire's the Event.
(function(){
this.setText("Instead visit the Blog.").setProperty('href', 'http://blog.mootools.net');
}).delay(500, this);
});
[/javascript]
Note:
Returning false within the function can also stop the propagation of the Event.
See Also:
, , ,
*/
stop: function(){
return this.stopPropagation().preventDefault();
},
/*
Method: stopPropagation
Cross browser method to stop the propagation of an event (will not allow the event to bubble up through the DOM).
Syntax:
>myEvent.stopPropagation();
Returns:
(class) This Event object.
Example:
HTML:
[html]
[/html]
[javascript]
$('myElement').addEvent('click', function(){
alert('click');
return false; // equivalent to stopPropagation.
});
$('myChild').addEvent('click', function(event){
event.stopPropagation(); // this will prevent the event to bubble up, and fire the parent's click event.
});
[/javascript]
See Also:
,
*/
stopPropagation: function(){
if (this.event.stopPropagation) this.event.stopPropagation();
else this.event.cancelBubble = true;
return this;
},
/*
Method: preventDefault
Cross browser method to prevent the default action of the event.
Syntax:
>myEvent.preventDefault();
Returns:
(class) This Event object.
Example:
HTML:
[html]
[/html]
[javascript]
$('myCheckbox').addEvent('click', function(event){
event.preventDefault(); // will not allow the checkbox to be "checked"
});
[/javascript]
See Also:
,
*/
preventDefault: function(){
if (this.event.preventDefault) this.event.preventDefault();
else this.event.returnValue = false;
return this;
},
fixRelatedTarget: function(){
var rel = this.relatedTarget;
if (rel && rel.nodeType == 3) this.relatedTarget = rel.parentNode;
}
});
/*
Property: Keys
You can add additional Event keys codes this way:
Example:
[javascript]
Event.Keys.whatever = 80;
$('myInput').addEvent('keydown', function(event){
if (event.key == 'whatever') alert('whatever key clicked');
});
[/javascript]
*/
Event.Keys = new Hash({
'enter': 13,
'up': 38,
'down': 40,
'left': 37,
'right': 39,
'esc': 27,
'space': 32,
'backspace': 8,
'tab': 9,
'delete': 46
});
/*
Native: Element
Custom Native to allow all of its methods to be used with any DOM element via the dollar function <$>.
These methods are also available on window and document.
*/
Element.Setters.events = function(events){
this.addEvents(events);
};
Native.implement([Element, Window, Document], {
/*
Method: addEvent
Attaches an event listener to a DOM element.
Syntax:
>myElement.addEvent(type, fn[, nativeType]);
Arguments:
type - (string) The event name to monitor ('click', 'load', etc) without the prefix 'on'.
fn - (funtion) The function to execute.
Returns:
(element) This Element.
Example:
HTML:
[html]
.
See Also:
*/
addEvent: function(type, fn){
this.$events = this.$events || {};
if (!this.$events[type]) this.$events[type] = {'keys': [], 'values': []};
if (this.$events[type].keys.contains(fn)) return this;
this.$events[type].keys.push(fn);
var realType = type;
var custom = Element.Events[type];
var map = fn;
if (custom){
if (custom.add) custom.add.call(this, fn);
if (custom.map){
map = function(event){
if (custom.map.call(this, event)) return fn.call(this, event);
return false;
};
}
if (custom.type) realType = custom.type;
}
var defn = fn;
var nativeEvent = Element.$events[realType] || 0;
if (nativeEvent){
if (nativeEvent == 2){
var self = this;
var doc = this.ownerDocument || this;
defn = function(event){
event = new Event(event, doc.window);
if (map.call(self, event) === false) event.stop();
};
}
this.addListener(realType, defn);
}
this.$events[type].values.push(defn);
return this;
},
/*
Method: removeEvent
Works as Element.addEvent, but instead removes the previously added event listener.
Syntax:
>myElement.removeEvent(type, fn);
Arguments:
type - (string) The event name.
fn - (funtion) The function to remove.
Returns:
(element) This Element.
Examples:
Standard usage:
[javascript]
var destroy = function(){ alert('Boom: ' + this.id); } // this is the Element
$('myElement').addEvent('click', destroy);
// later in the code
$('myElement').removeEvent('click', destroy);
[/javascript]
Example with bind:
[javascript]
var destroy = function(){ alert('Boom: ' + this.id); } // this is the Element
var destroy2 = destroy.bind($('anotherElement'));
$('myElement').addEvent('click', destroy2); // this is now another Element
// later in the code
$('myElement').removeEvent('click', destroy); // DOES NOT WORK
$('myElement').removeEvent('click', destroy.bind($('anotherElement')); // DOES ALSO NOT WORK
$('myElement').removeEvent('click', destroy2); // Finally, this works
[/javascript]
Note:
When the function was added using or a new reference
was created and you can not use removeEvent with the original function.
*/
removeEvent: function(type, fn){
if (!this.$events || !this.$events[type]) return this;
var pos = this.$events[type].keys.indexOf(fn);
if (pos == -1) return this;
var key = this.$events[type].keys.splice(pos, 1)[0];
var value = this.$events[type].values.splice(pos, 1)[0];
var custom = Element.Events[type];
if (custom){
if (custom.remove) custom.remove.call(this, fn);
if (custom.type) type = custom.type;
}
return (Element.$events[type]) ? this.removeListener(type, value) : this;
},
/*
Method: addEvents
As , but accepts an object and add multiple events at once.
Syntax:
>myElement.addEvents(events);
Arguments:
events - (object) An object with key/value representing: key the event name, and value the function that is called when the Event occurs.
Returns:
(element) This Element.
Example:
[javascript]
$('myElement').addEvents({
'mouseover': function(){
alert('mouse over');
},
'click': function(){
alert('clicked');
}
});
[/javascript]
See Also:
*/
addEvents: function(events){
for (var event in events) this.addEvent(event, events[event]);
return this;
},
/*
Method: removeEvents
Removes all events of a certain type from an Element. If no argument is passed in, removes all events.
Syntax:
>myElements.removeEvents([type]);
Arguments:
type - (string, optional) The event name (e.g. 'click'). If null, removes all events.
Returns:
(element) This Element.
Example:
[javascript]
var myElement = $('myElement');
myElement.addEvents({
'mouseover': function(){
alert('mouse over');
},
'click': function(){
alert('clicked');
}
});
myElement.addEvent('click': function(){ alert('clicked again'); });
myElement.addEvent('click': function(){ alert('clicked and again :('); });
// addEvent will keep appending each function. Unfortunately for the visitors, that'll be three alerts they'll receive.
myElement.removeEvents('click'); //ahhh saved the visitor's finger.
[/javascript]
See Also:
*/
removeEvents: function(type){
if (!this.$events) return this;
if (!type){
for (var evType in this.$events) this.removeEvents(evType);
this.$events = null;
} else if (this.$events[type]){
while (this.$events[type].keys[0]) this.removeEvent(type, this.$events[type].keys[0]);
this.$events[type] = null;
}
return this;
},
/*
Method: fireEvent
Executes all events of the specified type present in the Element.
Syntax:
>myElement.fireEvent(type[, args[, delay]]);
Arguments:
type - (string) The event name (e.g. 'click')
args - (mixed, optional) Array or single object, arguments to pass to the function. If more than one argument, must be an array.
delay - (number, optional) Delay (in ms) to wait to execute the event.
Returns:
(element) This Element.
Example:
[javascript]
$('myElement').fireEvent('click', $('anElement'), 1000); // Fires all the added 'click' events and passes the element 'anElement' after 1 sec.
[/javascript]
Note:
This will not fire the DOM Event (this concerns all inline events ie. onmousedown="..").
*/
fireEvent: function(type, args, delay){
if (this.$events && this.$events[type]){
this.$events[type].keys.each(function(fn){
fn.create({'bind': this, 'delay': delay, 'arguments': args})();
}, this);
}
return this;
},
/*
Method: cloneEvents
Clones all events from an Element to this Element.
Syntax:
>myElement.cloneEvents(from[, type]);
Arguments:
from - (element) Copy all events from this Element.
type - (string, optional) Copies only events of this type. If null, copies all events.
Returns:
(element) This Element.
Example:
[javascript]
var myElement = $('myElement');
var myClone = myElement.clone().cloneEvents(myElement); //clones the element and its events
[/javascript]
*/
cloneEvents: function(from, type){
if (!from.$events) return this;
if (!type){
for (var evType in from.$events) this.cloneEvents(from, evType);
} else if (from.$events[type]){
from.$events[type].keys.each(function(fn){
this.addEvent(type, fn);
}, this);
}
return this;
}
});
Element.$events = {
'click': 2, 'dblclick': 2, 'mouseup': 2, 'mousedown': 2, //mouse buttons
'mousewheel': 2, 'DOMMouseScroll': 2, //mouse wheel
'mouseover': 2, 'mouseout': 2, 'mousemove': 2, //mouse movement
'keydown': 2, 'keypress': 2, 'keyup': 2, //keys
'contextmenu': 2, 'submit': 2, //misc
'load': 1, 'unload': 1, 'beforeunload': 1, 'resize': 1, 'move': 1, 'DOMContentLoaded': 1, 'readystatechange': 1, //window
'focus': 1, 'blur': 1, 'change': 1, 'reset': 1, 'select': 1, //forms elements
'error': 1, 'abort': 1, 'scroll': 1 //misc
};
/* Section: Custom Events */
Element.Events = new Hash({
/*
Event: mouseenter
In addition to the standard javascript events (load, mouseover, mouseout, click, etc.) contains two custom events this event fires when the mouse enters the area of the dom Element and will not be fired again if the mouse crosses over children of the Element (unlike mouseover).
Example:
[javascript]
$('myElement').addEvent('mouseenter', myFunction);
[/javascript]
See Also:
*/
'mouseenter': {
type: 'mouseover',
map: function(event){
var related = event.relatedTarget;
return (related && related != this && !this.hasChild(related));
}
},
/*
Event: mouseleave
This event fires when the mouse exits the area of the dom Element; will not be fired again if the mouse crosses over children of the Element (unlike mouseout).
Example:
[javascript]
$('myElement').addEvent('mouseleave', myFunction);
[/javascript]
See Also:
*/
'mouseleave': {
type: 'mouseout',
map: function(event){
var related = event.relatedTarget;
return (related && related != this && !this.hasChild(related));
}
},
'mousewheel': {
type: (Client.Engine.gecko) ? 'DOMMouseScroll' : 'mousewheel'
}
});
/*
Script: Element.Form.js
Contains Element methods for working with forms and their elements.
License:
MIT-style license.
*/
/*
Native: Element
Custom Native to allow all of its methods to be used with any DOM element via the dollar function <$>.
*/
Element.implement({
/*
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 = [];
Array.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)) && !['search', '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(this.ownerDocument.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]
Click me.
[/html]
[javascript]
$('myElement').addEvent('click', function(){ alert('clicked!'); });
[/javascript]
Note:
You can stop the Event by returning false in the listener or calling