/*
Script: Core.js
MooTools - My Object Oriented JavaScript Tools.
License:
MIT-style license.
Copyright:
Copyright (c) 2006-2007 Valerio Proietti,
Code & Documentation:
The MooTools production team .
Inspiration:
- Class implementation inspired by Base.js Copyright (c) 2006 Dean Edwards, GNU Lesser General Public License
- Some functionality inspired by Prototype.js Copyright (c) 2005-2007 Sam Stephenson, MIT License
*/
var MooTools = {
'version': '1.2dev',
'build': '1171'
};
var Native = function(options){
options = options || {};
var afterImplement = options.afterImplement || function(){};
var generics = options.generics;
generics = (generics !== false);
var legacy = options.legacy;
var initialize = options.initialize;
var protect = options.protect;
var name = options.name;
var object = initialize || legacy;
object.constructor = Native;
object.$family = {name: 'native'};
if (legacy && initialize) object.prototype = legacy.prototype;
object.prototype.constructor = object;
if (name){
var family = name.toLowerCase();
object.prototype.$family = {name: family};
Native.typize(object, family);
}
var add = function(obj, name, method, force){
if (!protect || force || !obj.prototype[name]) obj.prototype[name] = method;
if (generics) Native.genericize(obj, name, protect);
afterImplement.call(obj, name, method);
return obj;
};
object.implement = function(a1, a2, a3){
if (typeof a1 == 'string') return add(this, a1, a2, a3);
for (var p in a1) add(this, p, a1[p], a2);
return this;
};
object.alias = function(existing, property, force){
existing = this.prototype[existing];
if (existing) add(this, property, existing, force);
return this;
};
return object;
};
Native.implement = function(objects, properties){
for (var i = 0, l = objects.length; i < l; i++) objects[i].implement(properties);
};
Native.genericize = function(object, property, check){
if ((!check || !object[property]) && typeof object.prototype[property] == 'function') object[property] = function(){
var args = Array.prototype.slice.call(arguments);
return object.prototype[property].apply(args.shift(), args);
};
};
Native.typize = function(object, family){
if (!object.type) object.type = function(item){
return ($type(item) === family);
};
};
(function(objects){
for (var name in objects) Native.typize(objects[name], name.toLowerCase());
})({'Boolean': Boolean, 'Native': Native, 'Object': Object});
(function(objects){
for (var name in objects) new Native({name: name, initialize: objects[name], protect: true});
})({'String': String, 'Function': Function, 'Number': Number, 'Array': Array, 'RegExp': RegExp, 'Date': Date});
(function(object, methods){
for (var i = 0, l = methods.length; i < l; i++) Native.genericize(object, methods[i], true);
return arguments.callee;
})
(Array, ['pop', 'push', 'reverse', 'shift', 'sort', 'splice', 'unshift', 'concat', 'join', 'slice', 'toString', 'valueOf', 'indexOf', 'lastIndexOf'])
(String, ['charAt', 'charCodeAt', 'concat', 'indexOf', 'lastIndexOf', 'match', 'replace', 'search', 'slice', 'split', 'substr', 'substring', 'toLowerCase', 'toUpperCase', 'valueOf']);
/*
Function: $chk
Checks to see if a value exists or is 0. Useful for allowing 0.
Syntax:
>$chk(obj);
Arguments:
obj - (mixed) The object to inspect.
Returns:
(boolean) If the object passed in exists or is 0, returns true. Otherwise, returns false.
Example:
[javascript]
function myFunction(arg){
if($chk(arg)) alert('The object exists or is 0.');
else alert('The object is either null, undefined, false, or ""');
}
[/javascript]
*/
function $chk(obj){
return !!(obj || obj === 0);
};
/*
Function: $clear
Clears a Timeout or an Interval.
Syntax:
>$clear(timer);
Arguments:
timer - (number) The identifier of the setInterval (periodical) or setTimeout (delay) to clear.
Returns:
null
Example:
[javascript]
var myTimer = myFunction.delay(5000); //Wait 5 seconds and execute myFunction.
myTimer = $clear(myTimer); //Nevermind.
[/javascript]
See also:
,
*/
function $clear(timer){
clearTimeout(timer);
clearInterval(timer);
return null;
};
/*
Function: $defined
Checks to see if a value is defined.
Syntax:
>$defined(obj);
Arguments:
obj - (mixed) The object to inspect.
Returns:
(boolean) If the object passed is not null or undefined, returns true. Otherwise, returns false.
Example:
[javascript]
function myFunction(arg){
if($defined(arg)) alert('The object is defined.');
else alert('The object is null or undefined.');
}
[/javascript]
*/
function $defined(obj){
return (obj != undefined);
};
/*
Function: $empty
An empty function, that's it. Typically used for as a placeholder inside classes event methods.
Syntax:
>var emptyFn = $empty;
Example:
[javascript]
var myFunc = $empty;
[/javascript]
*/
function $empty(){};
function $arguments(i){
return function(){
return arguments[i];
};
};
function $lambda(value){
return (typeof value == 'function') ? value : function(){
return value;
};
};
/*
Function: $extend
Copies all the properties from the second object passed in to the first object passed in.
Syntax:
>$extend(original[, extended]);
Arguments:
original - (object) The object to be extended.
extended - (object, optional) The object whose properties will be copied to src.
Returns:
(object) The extended object.
Examples:
Normal Extension:
[javascript]
var firstObj = {
'name': 'John',
'lastName': 'Doe'
};
var secondObj = {
'age': '20',
'sex': 'male',
'lastName': 'Dorian'
};
$extend(firstObj, secondObj);
//firstObj is now: { 'name': 'John', 'lastName': 'Dorian', 'age': '20', 'sex': 'male' };
[/javascript]
*/
function $extend(original, extended){
for (var key in (extended || {})) original[key] = extended[key];
return original;
};
/*
Function: $merge
Merges any number of objects recursively without referencing them or their sub-objects.
Syntax:
>var merged = $merge(obj1, obj2[, obj3[, ...]]);
Arguments:
(objects) Any number of objects.
Returns:
(object) The object that is created as a result of merging all the objects passed in.
Example:
[javascript]
var obj1 = {a: 0, b: 1};
var obj2 = {c: 2, d: 3};
var obj3 = {a: 4, d: 5};
var merged = $merge(obj1, obj2, obj3); //returns {a: 4, b: 1, c: 2, d: 5}, (obj1, obj2, and obj3 are unaltered)
var nestedObj1 = {a: {b: 1, c: 1}};
var nestedObj2 = {a: {b: 2}};
var nested = $merge(nestedObj1, nestedObj2); //returns: {a: {b: 2, c: 1}}
[/javascript]
*/
function $merge(){
var mix = {};
for (var i = 0, l = arguments.length; i < l; i++){
for (var key in arguments[i]){
var ap = arguments[i][key];
var mp = mix[key];
if (mp && $type(ap) == 'object' && $type(mp) == 'object') mix[key] = $merge(mp, ap);
else mix[key] = ap;
}
}
return mix;
};
/*
Function: $pick
Returns the first defined argument passed in, or null.
Syntax:
>var picked = $pick(var1[, var2[, var3[, ...]]]);
Arguments:
(mixed) Any number of variables.
Returns:
(mixed) The first variable that is defined. If all variables passed in are null or undefined, returns null.
Example:
[javascript]
function say(infoMessage, errorMessage){
alert($pick(errorMessage, infoMessage, 'There was no message supplied.'));
}
[/javascript]
*/
function $pick(){
for (var i = 0, l = arguments.length; i < l; i++){
if ($defined(arguments[i])) return arguments[i];
}
return null;
};
/*
Function: $random
Returns a random integer number between the two passed in values.
Syntax:
>var random = $random(min, max);
Arguments:
min - (number) The minimum value (inclusive).
max - (number) The maximum value (inclusive).
Returns:
(number) A random number between min and max.
Example:
[javascript]
alert($random(5, 20)); //alerts a random number between 5 and 20
[/javascript]
*/
function $random(min, max){
return Math.floor(Math.random() * (max - min + 1) + min);
};
/*
Function: $splat
Array-ifies the argument passed in if it is defined and not already an array.
Syntax:
>var splatted = $splat(obj);
Arguments:
obj - (mixed) Any type of variable.
Returns:
(array) If the variable passed in is an array, returns the array. Otherwise, returns an array with the only element being the variable passed in.
Examples:
[javascript]
$splat('hello'); //returns ['hello']
$splat(['a', 'b', 'c']); //returns ['a', 'b', 'c']
[/javascript]
*/
function $splat(obj){
var type = $type(obj);
return (type) ? ((type != 'array' && type != 'arguments') ? [obj] : obj) : [];
};
/*
Function: $time
Returns the current time as a timestamp.
Syntax:
>var time = $time();
Returns:
(number) - Current timestamp.
*/
var $time = Date.now || function(){
return new Date().getTime();
};
/*
Function: $try
Tries to execute a function. Returns false if it fails.
Syntax:
>$try(fn[, bind[, args]]);
Arguments:
fn - (function) The function to execute.
bind - (object, optional: defaults to the function passed in) The object to use as 'this' in the function. For more information see .
args - (mixed, optional) Single item or array of items as arguments to be passed to the function.
Returns:
(mixed) Standard return of the called function, or false on failure.
Example:
[javascript]
var result = $try(eval, window, 'some invalid javascript'); //false
[/javascript]
Note:
Warning: if the function passed can return false, there will be no way to know if it has been successfully executed or not.
*/
function $try(fn, bind, args){
try {
return fn.apply(bind, $splat(args));
} catch(e){
return false;
}
};
/*
Function: $type
Returns the type of object that matches the element passed in.
Syntax:
>$type(obj);
Arguments:
obj - (object) The object to inspect.
Returns:
'element' - (string) If object is a DOM element node.
'textnode' - (string) If object is a DOM text node.
'whitespace' - (string) If object is a DOM whitespace node.
'arguments' - (string) If object is an arguments object.
'array' - (string) If object is an array.
'object' - (string) If object is an object.
'string' - (string) If object is a string.
'number' - (string) If object is a number.
'boolean' - (string) If object is a boolean.
'function' - (string) If object is a function.
'regexp' - (string) If object is a regular expression.
'class' - (string) If object is a Class (created with new Class, or the extend of another class).
'collection' - (string) If object is a native htmlelements collection, such as childNodes, getElementsByTagName, etc.
'window' - (string) If object is the window object.
'document' - (string) If object is the document object.
false - (boolean) If object is undefined, null, NaN or none of the above.
Example:
[javascript]
var myString = 'hello';
$type(myString); //returns "string"
[/javascript]
*/
function $type(obj){
if (obj == undefined) return false;
if (obj.$family) return (obj.$family.name == 'number' && !isFinite(obj)) ? false : obj.$family.name;
if (obj.nodeName){
switch (obj.nodeType){
case 1: return 'element';
case 3: return (/\S/).test(obj.nodeValue) ? 'textnode' : 'whitespace';
}
} else if (typeof obj.length == 'number'){
return (obj.callee) ? 'arguments' : 'collection';
}
return typeof obj;
};
/*
Native: Hash
A Custom "Object" ({}) implementation which does not account for prototypes when setting, getting, iterating.
Useful because in Javascript we cannot use Object.prototype. You can now use Hash.prototype!
Syntax:
>var myHash = new Hash([object]);
Arguments:
object - (mixed) A hash or object to implement.
Returns:
(hash) A new Hash instance.
Example:
[javascript]
var myHash = new Hash({
aProperty: true,
aMethod: function(){
return true;
}
});
alert(myHash.has('aMethod')); //true
[/javascript]
*/
var Hash = new Native({
name: 'Hash',
initialize: function(object){
if ($type(object) == 'hash') return $merge(object);
for (var key in object){
if (!this[key]) this[key] = object[key];
}
return this;
}
});
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]
*/
forEach: function(fn, bind){
for (var key in this){
if (this.hasOwnProperty(key)) fn.call(bind, this[key], key, this);
}
}
});
Hash.alias('forEach', 'each');
/*
Function: $H
Shortcut for new Hash.
See Also:
*/
function $H(object){
return new Hash(object);
};
Array.implement({
/*
Method: each
Calls a function for each element in the array.
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]
See Also:
Note:
This method is only available for browsers without native support.
*/
forEach: function(fn, bind){
for (var i = 0, l = this.length; i < l; i++) fn.call(bind, this[i], i, this);
}
});
Array.alias('forEach', 'each');
/*
Function: $A
Creates a copy of an Array. Useful for applying the Array prototypes to iterable objects such as a DOM Node collection or the arguments object.
Syntax:
>var copiedArray = $A(iterable);
Arguments:
iterable - (array) The iterable to copy.
Returns:
(array) The new copied array.
Examples:
Apply Array to arguments:
[javascript]
function myFunction(){
$A(arguments).each(function(argument, index){
alert(argument);
});
}; //will alert all the arguments passed to the function myFunction.
[/javascript]
Copy an Array:
[javascript]
var anArray = [0, 1, 2, 3, 4];
var copiedArray = $A(anArray); //returns [0, 1, 2, 3, 4]
[/javascript]
*/
function $A(iterable){
if ($type(iterable) == 'collection'){
var array = [];
for (var i = 0, l = iterable.length; i < l; i++) array[i] = iterable[i];
return array;
}
return Array.prototype.slice.call(iterable);
};
/*
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);
((type == 'arguments' || type == 'collection' || type == 'array') ? Array : Hash).each(iterable, fn, bind);
};
/*
Script: Browser.js
Contains Browser Initialization, including Window and Document.
License:
MIT-style license.
*/
/*
Hash: Browser
Some browser properties are attached to the Browser Object for browser and platform detection.
Features:
Browser.Features.xpath - (boolean) True if the browser supports dom queries using xpath.
Browser.Features.xhr - (boolean) True if the browser supports native XMLHTTP object.
Engine:
Browser.Engine.trident - (boolean) True if the current browser is Internet Explorer (any).
Browser.Engine.trident4 - (boolean) True if the current browser is Internet Explorer 6.
Browser.Engine.trident5 - (boolean) True if the current browser is Internet Explorer 7.
Browser.Engine.gecko - (boolean) True if the current browser is Mozilla/Gecko.
Browser.Engine.webkit - (boolean) True if the current browser is Safari/Konqueror.
Browser.Engine.webkit419 - (boolean) True if the current browser is Safari2 / webkit till version 419.
Browser.Engine.webkit420 - (boolean) True if the current browser is Safari3 (Webkit SVN Build) / webkit over version 419.
Browser.Engine.presto - (boolean) True if the current browser is opera.
Browser.Engine.name - (string) The name of the engine.
Platform:
Browser.Platform.mac - (boolean) True if the platform is mac.
Browser.Platform.windows - (boolean) True if the platform is windows.
Browser.Platform.linux - (boolean) True if the platform is linux.
Browser.Platform.other - (boolean) True if the platform is neither mac, windows or linux.
Browser.Platform.name - (string) The name of the platform.
Note:
Engine detection is entirely feature-based.
*/
var Browser = new Hash({
Engine: {'name': 'unknown', 'version': ''},
Platform: {'name': (navigator.platform.match(/mac|win|linux|nix/i) || ['other'])[0].toLowerCase()},
Features: {'xhr': !!(window.XMLHttpRequest), 'xpath': !!(document.evaluate)}
});
if (window.opera) Browser.Engine.name = 'presto';
else if (window.ActiveXObject) Browser.Engine = {'name': 'trident', 'version': (Browser.Features.xhr) ? 5 : 4};
else if (!navigator.taintEnabled) Browser.Engine = {'name': 'webkit', 'version': (Browser.Features.xpath) ? 420 : 419};
else if (document.getBoxObjectFor != null) Browser.Engine.name = 'gecko';
Browser.Engine[Browser.Engine.name] = Browser.Engine[Browser.Engine.name + Browser.Engine.version] = true;
Browser.Platform[Browser.Platform.name] = true;
//global evaluation
function $exec(text){
if (window.execScript){
window.execScript(text);
} else {
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.text = text;
document.head.appendChild(script);
document.head.removeChild(script);
}
return text;
};
Native.UID = 0;
var Window = new Native({
name: 'Window',
legacy: window.Window,
initialize: function(win){
if (!win.Element){
win.Element = $empty;
if (Browser.Engine.webkit) win.document.createElement("iframe"); //fixes safari 2
win.Element.prototype = (Browser.Engine.webkit) ? window["[[DOMElement.prototype]]"] : {};
}
win.uid = Native.UID++;
return $extend(win, Window.Prototype);
},
afterImplement: function(property, value){
window[property] = Window.Prototype[property] = value;
}
});
Window.Prototype = {$family: {name: 'window'}};
new Window(window);
var Document = new Native({
name: 'Document',
legacy: window.Document,
initialize: function(doc){
doc.head = doc.getElementsByTagName('head')[0];
doc.html = doc.getElementsByTagName('html')[0];
doc.window = doc.defaultView || doc.parentWindow;
if (Browser.Engine.trident4) $try(function(){
doc.execCommand("BackgroundImageCache", false, true);
});
doc.uid = Native.UID++;
return $extend(doc, Document.Prototype);
},
afterImplement: function(property, value){
document[property] = Document.Prototype[property] = value;
}
});
Document.Prototype = {$family: {name: 'document'}};
new Document(document);
/*
Script: Array.js
Contains Array prototypes, <$each>.
License:
MIT-style license.
*/
/*
Native: Array
A collection of the Array Object prototype methods.
See Also:
*/
Array.implement({
/*
Method: every
Returns true if every element in the array satisfies the provided testing function.
This method is provided only for browsers without native support.
Syntax:
>var allPassed = myArray.every(fn[, bind]);
Arguments:
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, 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.
Returns:
(boolean) If every element in the array satisfies the provided testing function, returns true. Otherwise, returns false.
Example:
[javascript]
var areAllBigEnough = [10, 4, 25, 100].every(function(item, index){
return item > 20;
}); //areAllBigEnough = false
[/javascript]
See Also:
*/
every: function(fn, bind){
for (var i = 0, l = this.length; i < l; i++){
if (!fn.call(bind, this[i], i, this)) return false;
}
return true;
},
/*
Method: filter
Creates a new array with all of the elements of the array for which the provided filtering function returns true.
This method is provided only for browsers without native support.
Syntax:
>var filteredArray = myArray.filter(fn[, bind]);
Arguments:
fn - (function) The function to test each element of 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.
Returns:
(array) The new filtered array.
Example:
[javascript]
var biggerThanTwenty = [10, 3, 25, 100].filter(function(item, index){
return item > 20;
}); //biggerThanTwenty = [25, 100]
[/javascript]
See Also:
*/
filter: function(fn, bind){
var results = [];
for (var i = 0, l = this.length; i < l; i++){
if (fn.call(bind, this[i], i, this)) results.push(this[i]);
}
return results;
},
/*
Method: indexOf
Returns the index of the first element within the array equal to the specified value, or -1 if the value is not found.
This method is provided only for browsers without native support.
Syntax:
>var index = myArray.indexOf(item[, from]);
Returns:
(number) The index of the first element within the array equal to the specified value. If not found, returns -1.
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.
Example:
[javascript]
['apple', 'lemon', 'banana'].indexOf('lemon'); //returns 1
['apple', 'lemon'].indexOf('banana'); //returns -1
[/javascript]
See Also:
*/
indexOf: function(item, from){
var len = this.length;
for (var i = (from < 0) ? Math.max(0, len + from) : from || 0; i < len; i++){
if (this[i] === item) return i;
}
return -1;
},
/*
Method: map
Creates a new array with the results of calling a provided function on every element in the array.
This method is provided only for browsers without native support.
Syntax:
>var mappedArray = myArray.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(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.
Returns:
(array) The new mapped array.
Example:
[javascript]
var timesTwo = [1, 2, 3].map(function(item, index){
return item * 2;
}); //timesTwo = [2, 4, 6];
[/javascript]
See Also:
*/
map: function(fn, bind){
var results = [];
for (var i = 0, l = this.length; i < l; i++) results[i] = fn.call(bind, this[i], i, this);
return results;
},
/*
Method: some
Returns true if at least one element in the array satisfies the provided testing function.
This method is provided only for browsers without native support.
Syntax:
>var somePassed = myArray.some(fn[, bind]);
Returns:
(boolean) If at least one element in the array satisfies the provided testing function returns true. Otherwise, returns false.
Arguments:
fn - (function) The function to test for each element. 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]
var isAnyBigEnough = [10, 4, 25, 100].some(function(item, index){
return item > 20;
}); //isAnyBigEnough = true
[/javascript]
See Also:
*/
some: function(fn, bind){
for (var i = 0, l = this.length; i < l; i++){
if (fn.call(bind, this[i], i, this)) return true;
}
return false;
},
/*
Method: associate
Creates an object with key-value pairs based on the array of keywords passed in and the current content of the array.
Syntax:
>var associated = myArray.associate(obj);
Arguments:
obj - (array) Its items will be used as the keys of the object that will be created.
Returns:
(object) The new associated object.
Example:
[javascript]
var animals = ['Cow', 'Pig', 'Dog', 'Cat'];
var sounds = ['Moo', 'Oink', 'Woof', 'Miao'];
animals.associate(sounds);
//returns {'Cow': 'Moo', 'Pig': 'Oink', 'Dog': 'Woof', 'Cat': 'Miao'}
[/javascript]
*/
associate: function(keys){
var obj = {}, length = Math.min(this.length, keys.length);
for (var i = 0; i < length; i++) obj[keys[i]] = this[i];
return obj;
},
/*
Method: link
Accepts an object of key / function pairs to assign values.
Syntax:
>var result = Array.link(array, object);
Arguments:
object - (object) An object containing key / function pairs must be passed to be used as a template for associating values with the different keys.
Returns:
(object) The new associated object.
Example:
[javascript]
var el = document.createElement('div');
var arr2 = [100, 'Hello', {foo: 'bar'}, el, false];
arr2.link({myNumber: Number.type, myElement: Element.type, myObject: Object.type, myString: String.type, myBoolean: $defined});
//returns {myNumber: 100, myElement: el, myObject: {foo: 'bar'}, myString: 'Hello', myBoolean: false}
[/javascript]
*/
link: function(object){
var result = {};
for (var i = 0, l = this.length; i < l; i++){
for (var key in object){
if (object[key](this[i])){
result[key] = this[i];
delete object[key];
break;
}
}
}
return result;
},
/*
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--; 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: flatten
Flattens a multidimensional array into a single array.
Syntax:
>myArray.flatten();
Returns:
(array) A new flat array.
Example:
[javascript]
var myArray = [1,2,3,[4,5, [6,7]], [[[8]]]];
varnewArray = myArray.flatten(); //newArray is [1,2,3,4,5,6,7,8]
[/javascript]
*/
flatten: function(){
var array = [];
for (var i = 0, l = this.length; i < l; i++){
var type = $type(this[i]);
if (!type) continue;
array = array.concat((type == 'array' || type == 'collection' || type == 'arguments') ? Array.flatten(this[i]) : this[i]);
}
return array;
},
/*
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: function(properties){
for (var property in properties) this[property] = properties[property];
},
/*
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 = options.arguments;
args = $defined(args) ? $splat(args) : Array.slice(arguments, (options.event) ? 1 : 0);
if (options.event) args = [event || window.event].extend(args);
var returns = function(){
return self.apply(options.bind || null, 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); //result = 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).
Returns:
(function) The binded function.
Example:
[javascript]
function myFunction(){
this.setStyle('color', 'red');
//note that 'this' here refers to window, 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){
return this.create({'bind': bind, 'arguments': args});
},
/*
Method: bindWithEvent
Returns a function whose "this" is altered. It also makes "space" for an event.
This makes the method indicate for using in conjunction with and arguments.
Syntax:
>myFunction.bindWithEvent([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).
Returns:
(function) The binded function.
Example:
[javascript]
function myFunction(e, add){
this.setStyle('top', e.client.x + add);
//note that 'this' here refers to window, not an element
//we'll need to bind this function to the element we want to alter
};
$(myElement).addEvent('click', myFunction.bindWithEvent(myElement, 100);
//when clicked the element will move to the position of the mouse + 100;
[/javascript]
*/
bindWithEvent: function(bind, args){
return this.create({'bind': bind, 'event': true, 'arguments': args});
},
/*
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));
}
});
/*
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);
}
});
Number.alias('times', 'each');
//math on number.
(function(math){
var methods = {};
math.each(function(name){
if (!Number[name]) methods[name] = function(){
return Math[name].apply(null, [this].concat($A(arguments)));
};
});
Number.implement(methods);
})(['abs', 'acos', 'asin', 'atan', 'atan2', 'ceil', 'cos', 'exp', 'floor', 'log', 'max', 'min', 'pow', 'sin', 'sqrt', 'tan']);
/*
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;
},
stripScripts: function(evaluate){
var scripts = '';
var text = this.replace(/]*>([\s\S]*?)<\/script>/gi, function(){
scripts += arguments[1] + '\n';
return '';
});
if (evaluate && scripts) $exec(scripts);
return text;
}
});
/*
Script: Hash.js
Contains the Hash methods.
License:
MIT-style license.
*/
/*
Native: Hash
A Custom "Object" ({}) implementation which does not account for prototypes when setting, getting, iterating.
*/
Hash.implement({
/*
Method: has
Tests for the presence of a specified key in the Hash.
Syntax:
>var inHash = myHash.has(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.has('a'); //returns true
hash.has('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.
*/
has: Object.prototype.hasOwnProperty,
/*
Method: keyOf
Returns the key of the specified value. Synonymous with .
Syntax:
>var key = myHash.keyOf(item);
Arguments:
item - (mixed) The item to search for in the Hash.
Returns:
(mixed) If the Hash has a the specified item in it, returns the key of that item. Otherwise, returns false.
Example:
[javascript]
var hash = new Hash({'a': 'one', 'b': 'two', 'c': 3});
hash.keyOf('two'); //returns 'b'
hash.keyOf(3); //returns 'c'
hash.keyOf('four') //returns false
[/javascript]
Notes:
Testing for a Hash prototype will never return its key. Only the actual properties of the Hash will return their associated key.
*/
keyOf: function(value){
for (var key in this){
if (this.hasOwnProperty(key) && this[key] === value) return key;
}
return null;
},
/*
Method: hasValue
Tests for the presence of a specified value in the Hash.
Syntax:
>var inHash = myHash.hasvalue(value);
Arguments:
value - (mixed) The value to search for in the Hash.
Returns:
(boolean) If the Hash has the passed in value in any of the keys, returns true. Otherwise, returns false.
Example:
[javascript]
var hash = new Hash({'a': 'one', 'b': 'two', 'c': 'three'});
hash.hasValue('one'); //returns true
hash.hasValue('four'); //returns false
[/javascript]
*/
hasValue: function(value){
return (Hash.keyOf(this, value) !== null);
},
/*
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){
Hash.set(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){
Hash.include(this, 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.hasOwnProperty(key)) delete this[key];
return this;
},
/*
Method: get
Retrieves a value from the hash.
Syntax:
>myHash.get(key);
Arguments:
key - (string) The key to retrieve in the Hash.
Returns:
(mixed) Returns the value that corresponds to the key if found, or null if the key doesn't exist.
Example:
[javascript]
var hash = new Hash({
'name': 'John',
'lastName': 'Doe'
});
hash.get('name'); //returns 'John'
[/javascript]
*/
get: function(key){
return (this.hasOwnProperty(key)) ? this[key] : null;
},
/*
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.hasOwnProperty(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);
return 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){
var k = this[key];
if (!$defined(k)) 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;
},
/*
Method: getClean
Returns a a clean object from an Hash.
Syntax:
>myHash.getClean();
Returns:
(object) a clean objecy
Example:
[javascript]
var hash = new Hash({
'name': 'John',
'lastName': 'Doe'
});
hash = hash.getClean(); // hash doesnt contain Hash prototypes anymore
hash.each() //error!
[/javascript]
*/
getClean: function(){
var clean = {};
Hash.each(this, 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){
values.push(value);
});
return values;
},
/*
Method: toQueryString
Generates a query string from key/pair values in an object and URI encodes the values.
Syntax:
>var myHash = new Hash({...}); = myHash.toQueryString();
Arguments:
source - (object) The object to generate the query string from.
Returns:
(string) The query string.
Examples:
Using Hash generic:
[javascript]
Hash.toQueryString({apple: "red", lemon: "yellow"}); //returns "apple=red&lemon=yellow"
[/javascript]
Using Hash instance:
[javascript]
var myHash = new Hash({apple: "red", lemon: "yellow"});
myHash.toQueryString(); //returns "apple=red&lemon=yellow"
[/javascript]
*/
toQueryString: function(){
var queryString = [];
Hash.each(this, function(value, key){
$splat(value).each(function(val){
queryString.push(key + '=' + encodeURIComponent(val));
});
});
return queryString.join('&');
}
});
Hash.alias('keyOf', 'indexOf').alias('hasValue', 'contains').alias('remove', 'erase');
/*
Script: Class.js
Contains the Class implementations.
License:
MIT-style license.
*/
/*
Native: Class
The base Class object of the framework. Creates a new Class. The Class's initialize method will fire upon class instantiation unless <$empty> is passed to the Class constructor.
Syntax:
>var MyClass = new Class(properties);
Arguments:
properties - (object) The collection of properties that apply to the Class. Also accepts some special properties such as Extends, Implements, and initialize (see below).
properties (continued):
Extends - (class) That this class will extend.
Implements - (mixed) An object or an array of objects that the Class implements. Similar to Extends, but it simply overrides the properties. Useful when implementing a Class properties in multiple classes.
initialize - (function) The initialize function will be the constructor for this class when new instances are created.
Returns:
(class) The Class created.
Examples:
Class Example:
[javascript]
var Cat = new Class({
initialize: function(name){
this.name = name;
}
});
var myCat = new Cat('Micia');
alert(myCat.name); //alerts 'Micia'
var Cow = new Class({
initialize: function(){
alert('moooo');
});
});
var Effie = new Cow($empty); //will not alert 'moooo'
[/javascript]
Extends Example:
[javascript]
var Animal = new Class({
initialize: function(age){
this.age = age;
}
});
var Cat = new Class({Extends: Animal
initialize: function(name, age){
this.parent(age); //will call initalize of Animal
this.name = name;
}
});
var myCat = new Cat('Micia', 20);
alert(myCat.name); //alerts 'Micia'
alert(myCat.age); //alerts 20
[/javascript]
Implements Example:
[javascript]
var Animal = new Class({
initialize: function(age){
this.age = age;
}
});
var Cat = new Class({
Implements: Animal,
setName: function(name){
this.name = name
}
});
var myCat = new Cat(20);
myAnimal.setName('Micia');
alert(myAnimal.name); //alerts 'Micia'
[/javascript]
*/
var Class = new Native({
name: 'Class',
initialize: function(properties){
properties = properties || {};
var klass = function(){
for (var property in this){
if ($type(this[property]) == 'object') this[property] = $merge(this[property]);
}
['Implements', 'Extends'].each(function(Property){
if (!this[Property]) return;
Class[Property](this, this[Property]);
delete this[Property];
}, this);
this.constructor = klass;
var self = (arguments[0] !== $empty && this.initialize && $type(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;
if (this.options && this.options.initialize) this.options.initialize.call(this);
return self;
};
$extend(klass, this);
klass.constructor = Class;
klass.prototype = properties;
return klass;
}
});
Class.implement({
/*
Method: implement
Implements the passed in properties into the base Class prototypes, altering the base Class, unlike .
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(){
Class.Implements(this.prototype, Array.slice(arguments));
return this;
}
});
Class.Implements = function(self, klasses){
$splat(klasses).each(function(klass){
$extend(self, ($type(klass) == 'class') ? new klass($empty) : klass);
});
};
Class.Extends = function(self, klass){
klass = new klass($empty);
for (var property in klass){
var kp = klass[property];
var sp = self[property];
self[property] = (function(previous, current){
if ($defined(current) && 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 previous;
})(kp, sp);
}
};
/*
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:
(object) 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([any arguments]);
Arguments:
any arguments passed in will be passed to the "next" function
Returns:
(object) This Class instance.
Example:
[javascript]
var myChain = new Chain();
myChain.chain(
function(){ alert('do dishes'); },
function(){ alert('put away clean dishes'); }
);
myChain.callChain(); //alerts 'do dishes'
myChain.callChain(); //alerts 'put away clean dishes'
[/javascript]
*/
callChain: function(){
if (this.$chain && this.$chain.length) this.$chain.shift().apply(this, arguments);
return this;
},
/*
Method: clearChain
Clears the stack of a Chain instance.
Syntax:
>myClass.clearChain();
Returns:
(object) 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:
(object) 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:
(object) 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:
(object) 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]) return this;
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.
Returns:
(object) 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:
(object) 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) continue;
var fns = this.$events[e];
for (var i = fns.length; i--; 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:
(object) 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 property.
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(){
this.options = $merge.run([this.options].extend(arguments));
if (!this.addEvent) return this;
for (var option in this.options){
if ($type(this.options[option]) != 'function' || !(/^on[A-Z]/).test(option)) continue;
this.addEvent(option, this.options[option]);
delete 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.
*/
/*
Native: Element
Custom Native to allow all of its methods to be used with any DOM element via the dollar function <$>.
*/
/*
Method: constructor
Creates a new Element of the type passed in.
Syntax:
>var myEl = new Element(el[, props]);
Arguments:
el - (mixed) The tag name for the Element to be created or an Element so that it can be extended.
props - (object, optional) The properties to apply to the new Element.
props (continued):
The 'styles' and 'events' keys' values are used for and . All other properties are set as attributes of the element.
Returns:
(element) A new HTML Element.
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({
name: 'Element',
legacy: window.Element,
initialize: function(el){
var params = Array.link(arguments, {'document': Document.type, 'properties': Object.type});
var props = params.properties || {}, doc = params.document || document;
if ($type(el) == 'string'){
el = el.toLowerCase();
if (Browser.Engine.trident && props){
['name', 'type', 'checked'].each(function(attribute){
if (!props[attribute]) return;
el += ' ' + attribute + '="' + props[attribute] + '"';
if (attribute != 'checked') delete props[attribute];
});
el = '<' + el + '>';
}
el = doc.createElement(el);
}
el = $.element(el);
return (!props || !el) ? el : el.set(props);
},
afterImplement: function(key, value){
if (!Array[key]) Elements.implement(key, Elements.multi(key));
Element.Prototype[key] = value;
}
});
Element.Prototype = {$family: {name: 'element'}};
var TextNode = new Native({
name: 'TextNode',
initialize: function(text, doc){
return $extend((doc || document).createTextNode(text), this);
}
});
/*
Native: IFrame
Custom Native to create and easily work with IFrames.
*/
/*
Method: constructor
Creates an iframe HTML Element and extends its window and document with MooTools.
Syntax:
>var myIFrame = new IFrame([el][, props]);
Arguments:
el - (mixed, optional) The id for the Iframe to be converted, or the actual iframe element. If its not passed, a new iframe will be created.
props - (object, optional) The properties to be applied to the new IFrame.
props (continued):
onload - (function, optional) The function executed when the iframe loads and accepts every property/object accepted by .
Returns:
(element) A new iframe HTML Element.
Example:
[javascript]
var myIFrame = new IFrame({
src: 'http://mootools.net/',
onload: function(){
alert('my iframe finished loading');
},
styles: {
width: 800,
height: 600,
border: '1px solid #ccc'
},
events: {
mouseenter: function(){
alert('welcome aboard');
},
mouseleave: function(){
alert('oo noes');
}
}
});
[/javascript]
Notes:
- If the IFrame is from the same domain as the "host", its document and window will be extended with MooTools functionalities, allowing you to fully use MooTools within iframes.
- If the iframe already exists, and it has different id/name, the name will be made the same as the id.
- If the frame is from a different domain, its window and document will not be extended with MooTools methods.
*/
var IFrame = new Native({
name: 'IFrame',
generics: false,
initialize: function(){
Native.UID++;
var params = Array.link(arguments, {properties: Object.type, iframe: $defined});
var props = params.properties || {};
var iframe = $(params.iframe) || false;
var onload = props.onload || $empty;
delete props.onload;
props.id = props.name = $pick(props.id, props.name, iframe.id, iframe.name, 'IFrame_' + Native.UID);
((iframe = iframe || new Element('iframe'))).set(props);
var onFrameLoad = function(){
var host = $try(function(){
return iframe.contentWindow.location.host;
});
if (host && host == window.location.host){
iframe.window = iframe.contentWindow;
var win = new Window(iframe.window);
var doc = new Document(iframe.window.document);
$extend(win.Element.prototype, Element.Prototype);
}
onload.call(iframe.contentWindow);
};
(!window.frames[props.id]) ? iframe.addListener('load', onFrameLoad) : onFrameLoad();
return iframe;
}
});
/*
Native: Elements
The Elements class allows methods to work also on an array.
Syntax:
>var myElements = new Elements(elements[, options]);
Arguments:
elements - (mixed) An array of elements and/or strings representing element ids, or an HTMLCollection.
Returns:
(array) An extended array with the and methods.
Examples:
Set Every Paragraph's Color to Red:
[javascript];
$$('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');
[/javascript]
Create Elements From an Array:
[javascript]
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]
Notes:
- In MooTools, every DOM function, such as <$$> (and every other function that returns a collection of nodes) returns them as an Elements class.
- 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, options){
options = $extend({ddup: true, cash: true}, options);
elements = elements || [];
if (options.ddup || options.cash){
var uniques = {};
var returned = [];
for (var i = 0, l = elements.length; i < l; i++){
var el = $.element(elements[i], !options.cash);
if (options.ddup){
if (uniques[el.uid]) continue;
uniques[el.uid] = true;
}
returned.push(el);
}
elements = returned;
}
return (options.cash) ? $extend(elements, this) : elements;
}
});
Elements.implement({
filterBy: function(filter){
if (!filter) return this;
return new Elements(this.filter(($type(filter) == 'string') ? function(item){
return item.match(filter);
} : filter));
}
});
Elements.multi = 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.
Syntax:
>var myElement = $(el);
Arguments:
el - (mixed) A string containing the id of the DOM element desired or a reference to an actual DOM element.
Returns:
(mixed) A DOM element, or false if no ID was found.
Examples:
Get a DOM Element by ID:
[javascript]
var myElement = $('myElement');
[/javascript]
Extend an Element:
[javascript]
var div = document.getElementById('myElement');
div = $(div); //returns an Element also with all the mootools extensions applied.
[/javascript]
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().
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, notrash){
if (el && el.$attributes) return el;
var type = $type(el);
return ($[type]) ? $[type](el, notrash, this.document) : null;
},
/*
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.
Syntax:
>var myElements = $$(aTag[, anElement[, Elements[, ...]);
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.
Returns:
(array) - An array of all the DOM Elements matched, extended with <$>.
Examples:
Get Elements by Their Tags:
[javascript]
$$('a'); //returns all anchor Elements in the page
$$('a', 'b'); //returns anchor and bold tags on the page
[/javascript]
Using CSS Selectors When is Included:
[javascript]
$$('#myElement'); //returns an array containing only the element with the id 'myElement'
$$('#myElement a.myClass'); //returns an array of all anchor tags with the class "myClass" within the DOM element with id "myElement"
[/javascript]
Complex $$:
[javascript]
$$(myelement, myelement2, 'a', ['myid', myid2, 'myid3'], document.getElementsByTagName('div'));
[/javascript]
Notes:
- If you load , $$ will also accept CSS Selectors, otherwise the only selectors supported are tag names.
- If an element is not found, nothing will be included into the array (not even *null*)
*/
$$: function(selector){
if (arguments.length == 1 && typeof selector == 'string') return this.document.getElements(selector);
var elements = [];
var args = Array.flatten(arguments);
for (var i = 0, l = args.length; i < l; i++){
var item = args[i];
switch ($type(item)){
case 'element': item = [item]; break;
case 'string': item = this.document.getElements(item, true); break;
default: item = false;
}
if (item) elements.extend(item);
}
return new Elements(elements);
}
});
$.string = function(id, notrash, doc){
id = (doc || document).getElementById(id);
return (id) ? $.element(id, notrash) : null;
};
$.element = function(el, notrash){
el.uid = el.uid || [Native.UID++];
if (!notrash && Garbage.collect(el) && !el.$family) $extend(el, Element.Prototype);
return el;
};
$.textnode = function(el, notrash){
return (notrash || el.$family) ? el : $extend(el, TextNode.prototype);
};
$.window = $.document = $arguments(0);
/*
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, otherwise returns null.
Example:
[javascript]
var firstDiv = $(document.body).getElement('div');
[/javascript]
Notes:
- 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(selector, notrash){
return $(this.getElements(selector, true)[0] || null, notrash);
},
/*
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 allAnchors = $(document.body).getElements('a');
[/javascript]
Notes:
- 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(tags, nocash){
tags = tags.split(',');
var elements = [];
var ddup = (tags.length > 1);
tags.each(function(tag){
var partial = this.getElementsByTagName(tag.trim());
(ddup) ? elements.extend(partial) : elements = partial;
}, this);
return new Elements(elements, {ddup: ddup, cash: !nocash});
}
});
Element.Storage = {
get: function(uid){
return (this[uid] = this[uid] || {});
}
};
Element.Inserters = new Hash({
/*
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:
*/
before: function(context, element){
if (element.parentNode) element.parentNode.insertBefore(context, element);
},
/*
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:
,
*/
after: function(context, element){
if (!element.parentNode) return;
var next = element.nextSibling;
(next) ? element.parentNode.insertBefore(context, next) : element.parentNode.appendChild(context);
},
/*
Method: injectBottom
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:
*/
bottom: function(context, element){
element.appendChild(context);
},
/*
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:
*/
top: function(context, element){
var first = element.firstChild;
(first) ? element.insertBefore(context, first) : element.appendChild(context);
}
});
Element.Inserters.inside = Element.Inserters.bottom;
Element.implement({
/*
Method: getElementById
Targets an element with the specified id found inside the Element.
Syntax:
>var myElement = anElement.getElementById(id);
Arguments:
id - (string) The ID of the Element to find.
Returns:
(mixed) The Element found, otherwise null.
Example:
[javascript]
var myParent = $('myParent');
var myChild = myParent.getElementById('aChild');
[/javascript]
Note:
Does not overwrite document.getElementById.
*/
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 $.element(el, nocash);
},
/*
Method: set
This is a "dynamic arguments" method. The first argument can be one of the properties of the Hash.
Syntax:
>myElement.set(property[, value]);
Arguments:
property - (mixed) Accepts a string for setting the property and value, or an object with its keys/values representing properties for the Element.
value - (mixed, optional) The value to set for the given property.
Returns:
(element) This Element.
Examples:
With an Object:
[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]
With Property and Value:
[javascript]
var body = $(document.body).set('styles', { // property styles passes the object to
'font': '12px Arial',
'color': 'blue'
});
[/javascript]
Notes:
- All additional arguments are passed to the method of the Hash.
- If no matching property is found in , it falls back to settimg attributes of the element, making this method the perfect shortcut.
See Also:
, , ,
*/
set: function(prop, value){
switch ($type(prop)){
case 'object':
for (var p in prop) this.set(p, prop[p]);
break;
case 'string':
var property = Element.Properties.get(prop);
(property && property.set) ? property.set.apply(this, Array.slice(arguments, 1)) : this.setProperty(prop, value);
}
return this;
},
/*
Method: get
This is a "dynamic arguments" method. The first argument can be the one of the Element.Properties Hash get value.
Syntax:
>myElement.get(property);
Arguments:
property - (mixed) Accepts a string for getting the value of a certain property.
Returns:
(mixed) Whatever the result of the function in the Element.Properties Hash get value is, or the value of the corresponding attribute.
Examples:
Using Custom Getters:
[javascript]
var tag = $('myDiv').get('tag'); //returns 'div'
var coords = $('myDiv').getCoordinates; //returns the elements coordinates
[/javascript]
Fallback to Element Attributes:
[javascript]
var id = $('myDiv').get('id'); //returns 'myDiv'
var value = $('myInput').get('value'); //returns this input element's value
[/javascript]
Notes:
- If no matching property is found in Element.Properties, or if the Element.Properties property has not a getter, it falls back to gettimg attributes of the element.
See Also:
,
*/
get: function(prop){
var property = Element.Properties.get(prop);
return (property && property.get) ? property.get.apply(this, Array.slice(arguments, 1)) : this.getProperty(prop);
},
/*
Method: clear
This is a "dynamic arguments" method. The first argument can be one of the properties of the Hash.
Syntax:
>myElement.clear(property);
Arguments:
property - (mixed) Accepts a string representing the property to be cleared.
Returns:
(mixed) Whatever the result of the function in the Hash is.
Examples:
[javascript]
$('myDiv').clear('id'); //removes the id from myDiv
$('myDiv').clear('class'); //myDiv element no longer has any classNames set
[/javascript]
Note:
- If no matching property is found in , it falls back to removing the specified attribute of the element.
See Also:
,
*/
erase: function(prop){
var property = Element.Properties.get(prop);
(property && property.erase) ? property.erase.apply(this, Array.slice(arguments, 1)) : this.removeProperty(prop);
return this;
},
/*
Method: match
Tests this element to see if it matches the given tagName.
Syntax:
>myElement.match(tag);
Arguments:
tag - (string) The tagName to test against this element.
Returns:
(boolean) If the element has the specified tagName, returns true. Otherwise, returns false.
Example:
[javascript]
$('myDiv').match('div'); //true if myDiv is a div
[/javascript]
Note:
- This method is overwritten by a more powerful version when Selectors.js is included.
*/
match: function(tag){
return (!tag || Element.get(this, 'tag') == tag);
},
/*
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 id of an 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 myFirstElement = new Element('div', {id: 'myFirstElement'});
var mySecondElement = new Element('div', {id: 'mySecondElement'});
[/javascript]
Inject Inside:
[javascript]
myFirstElement.inject(mySecondElement);
[/javascript]
Result:
[html]
[/html]
Inject Before:
[javascript]
myFirstElement.inject(mySecondElement, 'before');
[/javascript]
Result:
[html]
[/html]
Inject After:
[javascript]
myFirstElement.inject(mySecondElement, 'after');
[/javascript]
Result:
[html]
[/html]
See Also:
,
*/
inject: function(el, where){
Element.Inserters.get(where || 'bottom')(this, $(el, true));
return this;
},
wraps: function(el, where){
el = $(el, true);
return this.replaces(el).grab(el);
},
/*
Method: grab
Works as , but in reverse.
Appends the Element at a particular place relative to the Element's children (specified by the second the paramter).
Syntax:
>myElement.grab(el[, where]);
Arguments:
el - (mixed) el can be the id of an element or an element.
where - (string, optional) The place to append this Element to (defaults to the bottom of the el's child nodes).
Returns:
(element) This Element.
Example:
[javascript]
var myFirstElement = new Element('div', {id: 'myFirstElement'});
var mySecondElement = new Element('div', {id: 'mySecondElement'});
myFirstElement.grab(mySecondElement);
[/javascript]
Result:
[html]
[/html]
Note:
grab supports only top and bottom.
See Also:
,
*/
grab: function(el, where){
Element.Inserters.get(where || 'bottom')($(el, true), this);
return this;
},
/*
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]
hey
[/html]
[javascript]
$('myElement').appendText('. howdy');
[/javascript]
Result:
[html]
hey. howdy
[/html]
*/
appendText: function(text, where){
return this.grab(new TextNode(text, this.ownerDocument), where);
},
/*
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]
$('myFirstElement').adopt('mySecondElement', 'myThirdElement', 'myFourthElement');
[/javascript]
Result:
[html]
[/html]
See Also:
*/
adopt: function(){
Array.flatten(arguments).each(function(element){
this.appendChild($(element, true));
}, this);
return this;
},
/*
Method: dispose
Removes the Element from the DOM.
Syntax:
>var removedElement = myElement.dispose();
Returns:
(element) This Element.
Example:
HTML:
[html]
[/html]
[javascript]
$('myElement').dispose() //bye bye
[/javascript]
Results:
[html]
[/html]
See Also:
*/
dispose: 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: defaults to true) When true the Element is cloned with childNodes.
Returns:
(element) The cloned Element.
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 temp = new Element('div').grab(this.cloneNode(contents !== false));
Array.each(temp.getElementsByTagName('*'), function(element){
if (element.id) element.removeAttribute('id');
});
return new Element('div').set('html', temp.innerHTML).getFirst();
},
/*
Method: replaces
the Element replaces an Element passed.
Syntax:
>myElement.replaces(el);
Arguments:
el - (mixed) A string id representing the Element to be injected in, or an Element reference.
Returns:
(element) This Element.
Example:
[javascript]
$('myNewElement').replaces($('myOldElement')); //$('myOldElement') is gone, and $('myNewElement') is in its place.
[/javascript]]
See Also:
*/
replaces: function(el){
el = $(el, true);
el.parentNode.replaceChild(this, el);
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 , 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);
},
/*
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(){
var elements = $A(this.getElementsByTagName('*'));
elements.each(function(element){
$try(Element.prototype.dispose, element);
});
Garbage.trash(elements);
$try(Element.prototype.set, this, ['html', '']);
return this;
},
/*
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().dispose());
return null;
},
/*
Method: toQueryString
Reads the children inputs of the Element and generates a query string, based on their values.
Syntax:
>var query = myElement.toQueryString();
Returns:
(string) A string representation of a Form element and its children.
Example:
[html]
[/html]
[/javascript]
$('myForm').toQueryString() //email=bob@bob.com&zipCode=90210\
[/javascript]
Note:
Used internally in .
*/
toQueryString: function(){
var queryString = [];
this.getElements('input, select, textarea', true).each(function(el){
var name = el.name, type = el.type, value = Element.get(el, 'value');
if (value === false || !name || el.disabled) return;
$splat(value).each(function(val){
queryString.push(name + '=' + encodeURIComponent(val));
});
});
return queryString.join('&');
},
getProperty: function(attribute){
var EA = Element.Attributes, key = EA.Props[attribute];
var value = (key) ? this[key] : this.getAttribute(attribute);
return (EA.Bools[attribute]) ? !!value : value;
},
/*
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 args = $A(arguments);
return args.map(function(attr){
return this.getProperty(attr);
}, this).associate(args);
},
/*
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(attribute, value){
var EA = Element.Attributes, key = EA.Props[attribute], hasValue = $defined(value);
if (key && EA.Bools[attribute]) value = (value || !hasValue) ? true : false;
else if (!hasValue) return this.removeProperty(attribute);
(key) ? this[key] = value : this.setAttribute(attribute, 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(attributes){
for (var attribute in attributes) this.setProperty(attribute, attributes[attribute]);
return this;
},
/*
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(attribute){
var EA = Element.Attributes, key = EA.Props[attribute], isBool = (key && EA.Bools[attribute]);
(key) ? this[key] = (isBool) ? false : '' : this.removeAttribute(attribute);
return this;
},
removeProperties: function(){
Array.each(arguments, this.removeProperty, this);
return this;
}
});
(function(){
var walk = function(element, walk, start, match, all, nocash){
var el = element[start || walk];
var elements = [];
while (el){
if (el.nodeType == 1 && Element.match(el, match)){
elements.push(el);
if (!all) break;
}
el = el[walk];
}
return (all) ? new Elements(elements, {ddup: false, cash: !nocash}) : $(elements[0], nocash);
};
Element.implement({
/*
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().dispose(); //get the previous DOM Element from mySecondElement and removes.
[/javascript]
Result:
[html]
[/html]
See Also:
*/
getPrevious: function(match, nocash){
return walk(this, 'previousSibling', null, match, false, nocash);
},
/*
Method: getAllNPrevious
like Element.getPrevious, but returns a collection of all the matched previousSiblings.
*/
getAllPrevious: function(match, nocash){
return walk(this, 'previousSibling', null, match, true, nocash);
},
/*
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(match, nocash){
return walk(this, 'nextSibling', null, match, false, nocash);
},
/*
Method: getAllNext
like Element.getNext, but returns a collection of all the matched nextSiblings.
*/
getAllNext: function(match, nocash){
return walk(this, 'nextSibling', null, match, true, nocash);
},
/*
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(match, nocash){
return walk(this, 'nextSibling', 'firstChild', match, false, nocash);
},
/*
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(match, nocash){
return walk(this, 'previousSibling', 'lastChild', match, false, nocash);
},
/*
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(match, nocash){
return walk(this, 'parentNode', null, match, false, nocash);
},
/*
Method: getParents
like Element.getParent, but returns a collection of all the matched parentNodes.
*/
getParents: function(match, nocash){
return walk(this, 'parentNode', null, match, true, nocash);
},
/*
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(match, nocash){
return walk(this, 'nextSibling', 'firstChild', match, true, nocash);
},
/*
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){
if (!(el = $(el, true))) return false;
return Element.getParents(el, this.get('tag'), true).contains(this);
}
});
})();
TextNode.implement({
inject: Element.prototype.inject,
dispose: Element.prototype.dispose
});
Element.alias('dispose', 'remove').alias('getLast', 'getLastChild');
Element.Properties = new Hash;
Element.Properties.style = {
set: function(style){
this.style.cssText = style;
},
get: function(){
return this.style.cssText;
},
erase: function(){
this.style.cssText = '';
}
};
/*
Element Property: value
Returns the value of the Element, if its tag is textarea, select or input. getValue called on a multiple select will return an array.
Get Syntax:
>var value = myElement.get('value');
Get Returns:
(mixed) Returns false if if tag is not a 'select', 'input', or 'textarea'. Otherwise returns the value of the Element.
Get Example:
HTML:
[html]
[/html]
Result:
[javascript]
var result = $('myForm').getElement('select').get('value'); // returns 'Saab'
[/javascript]
*/
Element.Properties.value = {get: function(){
switch (Element.get(this, 'tag')){
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 (['checkbox', 'radio'].contains(this.type) && !this.checked) return false;
default: return $pick(this.value, false);
}
}};
/*
Element Property: tag
Returns the tagName of the Element in lower case.
Get Syntax:
>var myTag = myElement.get('tag');
Get Returns:
(string) The tag name in lower case
Get Example:
HTML:
[html]
![]()
[/html]
[javascript]
var myTag = $('myImage').get('tag') // myTag = 'img';
[/javascript]
See Also:
*/
Element.Properties.tag = {get: function(){
return this.tagName.toLowerCase();
}};
/*
Element Property: html
Sets the innerHTML of the Element.
Set Syntax:
>myElement.set('html', [htmlString[, htmlString2[, htmlString3[, ..]]]);
Set Arguments:
Any number of string paramters with html.
Set Returns:
(element) This Element.
Set Example:
HTML:
[html]
[/html]
[javascript]
$('myElement').set('html', '', '');
[/javascript]
Result:
[html]
[/html]
See Also:
*/
Element.Properties.html = {set: function(){
return this.innerHTML = Array.flatten(arguments).join('');
}};
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;
},
retrieve: function(property, dflt){
var storage = Element.Storage.get(this.uid);
var prop = storage[property];
if ($defined(dflt) && !$defined(prop)) prop = storage[property] = dflt;
return $pick(prop);
},
store: function(property, value){
var storage = Element.Storage.get(this.uid);
storage[property] = value;
return this;
},
eliminate: function(property){
var storage = Element.Storage.get(this.uid);
delete storage[property];
return this;
}
});
Element.Attributes = new Hash({
Props: {'html': 'innerHTML', 'class': 'className', 'for': 'htmlFor', 'text': (Browser.Engine.trident) ? 'innerText' : 'textContent'},
Bools: ['compact', 'nowrap', 'ismap', 'declare', 'noshade', 'checked', 'disabled', 'readonly', 'multiple', 'selected', 'noresize', 'defer'],
Camels: ['value', 'accessKey', 'cellPadding', 'cellSpacing', 'colSpan', 'frameBorder', 'maxLength', 'readOnly', 'rowSpan', 'tabIndex', 'useMap']
});
(function(EA){
var EAB = EA.Bools, EAC = EA.Camels;
EA.Bools = EAB = EAB.associate(EAB);
Hash.extend(Hash.merge(EA.Props, EAB), EAC.associate(EAC.map(function(v){
return v.toLowerCase();
})));
EA.remove('Camels');
})(Element.Attributes);
var Garbage = {
Elements: {},
ignored: {'object': 1, 'embed': 1, 'OBJECT': 1, 'EMBED': 1},
collect: function(el){
if (el.$attributes) return true;
if (Garbage.ignored[el.tagName]) return false;
Garbage.Elements[el.uid] = el;
el.$attributes = {};
return true;
},
trash: function(elements){
for (var i = elements.length, el; i--; i) Garbage.kill(elements[i]);
},
kill: function(el){
if (!el || !el.$attributes) return;
delete Garbage.Elements[el.uid];
if (el.retrieve('events')) el.removeEvents();
for (var p in el.$attributes) el.$attributes[p] = null;
if (Browser.Engine.trident){
for (var d in Element.Prototype) el[d] = null;
}
el.$attributes = el.uid = null;
},
empty: function(){
for (var uid in Garbage.Elements) Garbage.kill(Garbage.Elements[uid]);
}
};
window.addListener('beforeunload', function(){
window.addListener('unload', Garbage.empty);
if (Browser.Engine.trident) window.addListener('unload', CollectGarbage);
});
/*
Script: Element.Event.js
Contains 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) An HTMLEvent Object.
win - (window, optional: defaults to window) 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 <$>.
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 Native({
name: 'Event',
initialize: function(event, win){
win = win || window;
event = event || win.event;
if (event.$extended) return event;
this.$extended = true;
var type = event.type;
var target = event.target || event.srcElement;
while (target && target.nodeType == 3) target = target.parentNode;
if (type.test(/DOMMouseScroll|mousewheel/)){
this.wheel = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
} else if (type.test(/key/)){
this.code = event.which || event.keyCode;
var key = Event.Keys.keyOf(this.code);
if (type == 'keydown'){
var fKey = this.code - 111;
if (fKey > 0 && fKey < 13) key = 'f' + fKey;
}
this.key = key || String.fromCharCode(this.code).toLowerCase();
} else if (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);
var related = null;
if (type.test(/over|out/)){
switch (type){
case 'mouseover': related = event.relatedTarget || event.fromElement; break;
case 'mouseout': related = event.relatedTarget || event.toElement;
}
if ((function(){
while (related && related.nodeType == 3) related = related.parentNode;
}).create({attempt: Browser.Engine.gecko})() === false) related = false;
}
}
return $extend(this, {
event: event,
type: type,
relatedTarget: related,
target: target,
shift: event.shiftKey,
control: event.ctrlKey,
alt: event.altKey,
meta: event.metaKey
});
}
});
/*
Hash: Event.Keys
You can add additional Event keys codes by adding properties to the Event.Keys Hash:
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
});
Event.implement({
/*
Method: stop
Stop an Event from propagating and also executes preventDefault.
Syntax:
>myEvent.stop();
Returns:
(object) 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.").set('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:
(object) 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:
(object) 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;
}
});
/*
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.Properties.events = {set: 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]
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 .
This method is also attached to Document and Window.
See Also:
*/
addEvent: function(type, fn){
var events = this.retrieve('events', {});
events[type] = events[type] || {'keys': [], 'values': []};
if (events[type].keys.contains(fn)) return this;
events[type].keys.push(fn);
var realType = type, custom = Element.Events.get(type), condition = fn, self = this;
if (custom){
if (custom.onAdd) custom.onAdd.call(this, fn);
if (custom.condition){
condition = function(event){
if (custom.condition.call(this, event)) return fn.call(this, event);
return false;
};
}
realType = custom.base || realType;
}
var defn = function(){
return fn.call(self);
};
var nativeEvent = Element.NativeEvents[realType] || 0;
if (nativeEvent){
if (nativeEvent == 2){
defn = function(event){
event = new Event(event, (self.ownerDocument || self).window);
if (condition.call(self, event) === false) event.stop();
};
}
this.addListener(realType, defn);
}
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.
This method is also attached to Document and Window.
*/
removeEvent: function(type, fn){
var events = this.retrieve('events');
if (!events || !events[type]) return this;
var pos = events[type].keys.indexOf(fn);
if (pos == -1) return this;
var key = events[type].keys.splice(pos, 1)[0];
var value = events[type].values.splice(pos, 1)[0];
var custom = Element.Events.get(type);
if (custom){
if (custom.onRemove) custom.onRemove.call(this, fn);
type = custom.base || type;
}
return (Element.NativeEvents[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:
Note:
This method is also attached to Document and Window.
*/
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:
Note:
This method is also attached to Document and Window.
*/
removeEvents: function(type){
var events = this.retrieve('events');
if (!events) return this;
if (!type){
for (var evType in events) this.removeEvents(evType);
events = null;
} else if (events[type]){
while (events[type].keys[0]) this.removeEvent(type, events[type].keys[0]);
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="..").
This method is also attached to Document and Window.
*/
fireEvent: function(type, args, delay){
var events = this.retrieve('events');
if (!events || !events[type]) return 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]
Note:
This method is also attached to Document and Window.
*/
cloneEvents: function(from, type){
from = $(from);
var fevents = from.retrieve('events');
if (!fevents) return this;
if (!type){
for (var evType in fevents) this.cloneEvents(from, evType);
} else if (fevents[type]){
fevents[type].keys.each(function(fn){
this.addEvent(type, fn);
}, this);
}
return this;
}
});
Element.NativeEvents = {
'click': 2, 'dblclick': 2, 'mouseup': 2, 'mousedown': 2, 'contextmenu': 2, //mouse buttons
'mousewheel': 2, 'DOMMouseScroll': 2, //mouse wheel
'mouseover': 2, 'mouseout': 2, 'mousemove': 2, 'selectstart': 2, 'selectend': 2, //mouse movement
'keydown': 2, 'keypress': 2, 'keyup': 2, //keyboard
'focus': 2, 'blur': 2, 'change': 2, 'reset': 2, 'select': 2, 'submit': 2, //form elements
'load': 1, 'unload': 1, 'beforeunload': 1, 'resize': 1, 'move': 1, 'DOMContentLoaded': 1, 'readystatechange': 1, //window
'error': 1, 'abort': 1, 'scroll': 1 //misc
};
/*
Hash: Element.Events
You can add additional custom events by adding properties (objects) to the Element.Events Hash
The Element.Events.yourproperty (object) can have:
base - (string, optional) the base event the custom event will listen to. Its not optional if condition is set.
condition - (function, optional)
the condition from which we determine if the custom event can be fired. Is bound to the element you add the event to.
the Event is passed in.
onAdd - (function, optional) the function that will get fired when the custom event is added. Is bound to the element you add the event to.
onRemove - (function, optional) the function that will get fired when the custom event is removed. Is bound to the element you add the event to.
Example:
[javascript]
Element.Events.shiftclick = {
base: 'click', //we set a base type
condition: function(event){ //and a function to perform additional checks.
return (event.shift == true); //this means the event is free to fire
}
}
$('myInput').addEvent('shiftclick', function(event){
log('the user clicked the left mouse button while holding the shift key');
});
[/javascript]
Note: there are different types of custom Events you can create:
- Custom Events with only base: they will just be a redirect to the base event.
- Custom Events with base and condition: they will be redirect to the base event, but only fired if the condition is met.
- Custom Events with onAdd and/or onRemove and any other of the above:
they will also perform additional functions when the event is added/removed.
Note:
if you use the condition option you NEED to specify a base type, unless you plan to overwrite a native event
(highly unrecommended: use only when you know exactly what you're doing).
*/
(function(){
var checkRelatedTarget = function(event){
var related = event.relatedTarget;
if (!related) return true;
return ($type(this) != 'document' && related != this && related.prefix != 'xul' && !this.hasChild(related));
};
Element.Events = new Hash({
/*
Event: mouseenter
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 the broken mouseover).
Example:
[javascript]
$('myElement').addEvent('mouseenter', myFunction);
[/javascript]
See Also:
*/
mouseenter: {
base: 'mouseover',
condition: checkRelatedTarget
},
/*
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 the broken mouseout).
Example:
[javascript]
$('myElement').addEvent('mouseleave', myFunction);
[/javascript]
See Also:
*/
mouseleave: {
base: 'mouseout',
condition: checkRelatedTarget
},
/*
Event: mousewheel
This event fires when the mouse wheel is rotated;
Example:
[javascript]
$('myElement').addEvent('mousewheel', myFunction);
[/javascript]
Note:
this custom event just redirects DOMMouseScroll (mozilla) to mousewheel (opera, internet explorer), making it crossbrowser.
See Also:
*/
'mousewheel': {
base: (Browser.Engine.gecko) ? 'DOMMouseScroll' : 'mousewheel'
}
});
})();
/*
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.Properties.styles = {set: function(styles){
this.setStyles(styles);
}};
Element.Properties.opacity = {
/*
Element Property: opacity
Sets / Gets the opacity of the Element, and sets also visibility == "hidden" if opacity == 0, and visibility = "visible" if opacity > 0.
Set Syntax:
>Element.set('opacity', opacity);
Set Arguments:
opacity - (float) A values from 0.0 to 1.0, where 1.0 is visible and 0.0 is hidden.
Set Returns:
(element) This element.
Set Example:
[javascript]
$('myElement').set('opacity', 0.5) //make it 50% transparent
[/javascript]
*/
set: 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 (Browser.Engine.trident) this.style.filter = (opacity == 1) ? '' : 'alpha(opacity=' + opacity * 100 + ')';
this.style.opacity = opacity;
this.store('opacity', opacity);
},
get: function(){
return this.retrieve('opacity', 1);
}
};
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.set('opacity', parseFloat(value));
case 'float': property = (Browser.Engine.trident) ? 'styleFloat' : 'cssFloat';
}
property = property.camelCase();
if ($type(value) != 'string'){
var map = (Element.Styles.get(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 == String(Number(value))){
value = Math.round(value);
}
this.style[property] = value;
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){
switch (property){
case 'opacity': return this.get('opacity');
case 'float': property = (Browser.Engine.trident) ? 'styleFloat' : 'cssFloat';
}
property = property.camelCase();
var result = this.style[property];
if (!$chk(result)){
result = [];
for (var style in Element.ShortStyles){
if (property != style) continue;
for (var s in Element.ShortStyles[style]) result.push(this.getStyle(s));
return result.join(' ');
}
if (this.currentStyle){
result = this.currentStyle[property];
} else {
if (property == 'cssFloat') property = 'float';
result = 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());
}
if (Browser.Engine.presto || (Browser.Engine.trident && !$chk(parseInt(result)))){
if (property.test(/^(height|width)$/)){
var values = (property == 'width') ? ['left', 'right'] : ['top', 'bottom'], size = 0;
values.each(function(value){
size += this.getStyle('border-' + value + '-width').toInt() + this.getStyle('padding-' + value).toInt();
}, this);
return this['offset' + property.capitalize()] - size + 'px';
}
if (Browser.Engine.presto && String(result).test('px')) return result;
if (property.test(/^(border(.+)Width|margin|padding)$/)) return '0px';
}
return result;
},
/*
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){
for (var style in styles) this.setStyle(style, styles[style]);
return this;
},
/*
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.Styles = new Hash({
'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', 'clip': 'rect(@px @px @px @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': '@'
});
Element.ShortStyles = {'margin': {}, 'padding': {}, 'border': {}, 'borderWidth': {}, 'borderStyle': {}, 'borderColor': {}};
['Top', 'Right', 'Bottom', 'Left'].each(function(direction){
var Short = Element.ShortStyles;
var All = Element.Styles;
['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] = All[bdw] = '@px';
Short.borderStyle[bds] = Short[bd][bds] = All[bds] = '@';
Short.borderColor[bdc] = Short[bd][bdc] = All[bdc] = 'rgb(@, @, @)';
});
/*
Script: Element.Dimensions.js
Contains Element methods to work with element size, scroll, or position in space.
Note:
The functions in this script require a XHTML doctype.
See Also:
License:
MIT-style license.
*/
/*
Native: Element
Custom class to allow all of its methods to be used with any DOM element via the dollar function <$>.
*/
Element.implement({
/*
Method: scrollTo
Scrolls the element to the specified coordinated (if the element has an overflow).
Syntax:
>myElement.scrollTo(x, y);
Arguments:
x - (integer) The x coordinate.
y - (integer) The y coordinate.
Example:
>$('myElement').scrollTo(0, 100)
See Also:
,
*/
scrollTo: function(x, y){
this.scrollLeft = x;
this.scrollTop = y;
},
/*
Method: getSize
Returns an Object representing the different size dimensions of the element.
Syntax:
>var size = myElement.getSize();
Returns:
(object) An object containing 'client', 'offset', and 'scroll' objects, each with x and y values.
[javascript]
{
'client': {'x': 135, 'y': 125}, //total visible size of the content of the element
'offset': {'x': 155, 'y': 145}, //total visible size of the element including borders, paddings, and scrollbars
'scroll': {'x': 135, 'y': 400} //total size of the element including hidden scrollable content
}
[/javascript]
Example:
[javascript]
var size = $('myElement').getSize();
alert('My element is ' + size.offset.x + 'px wide'); //alerts 'My element is 155px wide'
[/javascript]
See Also:
, , , , ,
*/
getSize: function(){
return {
'client': {'x': this.clientWidth, 'y': this.clientHeight},
'offset': {'x': this.offsetWidth, 'y': this.offsetHeight},
'scroll': {'x': this.scrollWidth, 'y': this.scrollHeight}
};
},
/*
Method: getScroll
Returns an Object representing the size/scroll values of the element.
Syntax:
>var size = myElement.getSize();
Returns:
(object) An object containing the x and y scroll positions of the element.
Example:
[javascript]
var scroll = $('myElement').getScroll();
alert('My element is scrolled down ' + scroll.y + 'px'); //alerts 'My element is scrolled down 20px'
[/javascript]
See Also:
, , , , ,
*/
getScroll: function(){
return {'x': this.scrollLeft, 'y': this.scrollTop};
},
/*
Method: getPosition
Returns the real offsets of the element.
Syntax:
>var position = myElement.getPosition(relative);
Arguments:
relative - (element, optional) if set, the position will be relative to this element, otherwise relative to the document.
Returns:
(object) An object with properties: x and y coordinates of the Element's position.
Example:
[javascript]
$('element').getPosition(); //returns {x: 100, y: 500};
[/javascript]
See Also:
*/
getPosition: function(relative){
if (this == (relative = relative || false)) return {x: 0, y: 0};
var doc = this.ownerDocument, win = doc.window, el = this, left = 0, top = 0;
while (el){
left += el.offsetLeft;
top += el.offsetTop;
el = el.offsetParent;
}
el = this;
var estatic = (Element.getStyle(this, 'position') == 'static');
while ((el = el.parentNode)){
var pstatic = false;
if (el == doc.body || el == doc.html){
el = win;
if (relative === true) relative = el;
if (relative === false) break;
} else {
pstatic = (Element.getStyle(el, 'position') == 'static');
if (relative === true && !pstatic) relative = el;
}
if (!Browser.Engine.presto && !estatic && pstatic) continue;
var scroll = (el == win) ? win.getScroll() : Element.getScroll(el);
left -= scroll.x;
top -= scroll.y;
if (el == relative) break;
}
var rpos = (relative === false || relative === true || relative === win) ? {x: 0, y: 0} : Element.getPosition($(relative, true));
return {x: left - rpos.x, y: top - rpos.y};
},
computePosition: function(obj, client){
if (client){
var el = this, doc = this.ownerDocument, win = doc.window;
while ((el = el.parentNode)){
if (el == doc.body) el = win;
else if (!Browser.Engine.presto && Element.getStyle(el, 'position') == 'static') continue;
var scroll = (el == win) ? win.getScroll() : Element.getScroll(el);
obj.x += scroll.x;
obj.y += scroll.y;
}
}
return {
left: obj.x - this.getStyle('margin-left').toInt(),
top: obj.y - this.getStyle('margin-top').toInt()
};
},
setPosition: function(obj, relative){
return this.setStyles(this.computePosition(obj, relative));
},
/*
Method: getTop
Returns the distance from the top of the window to the Element.
Syntax:
>var top = myElement.getTop(relative);
Arguments:
relative - (element, optional) if set, the position will be relative to this element, otherwise relative to the document.
Returns:
(integer) The top position of this Element.
Example:
[javascript]
$('myElement').getTop(); //returns 20
[/javascript]
See Also:
*/
getTop: function(relative){
return this.getPosition(relative).y;
},
/*
Method: getLeft
Returns the distance from the left of the window to the Element.
Syntax:
>var left = myElement.getLeft(relative);
Arguments:
relative - (element, optional) if set, the position will be relative to this element, otherwise relative to the document.
Returns:
(integer) The left position of this Element.
Example:
[javascript]
$('myElement').getLeft(); //returns 20
[/javascript]
See Also:
*/
getLeft: function(relative){
return this.getPosition(relative).x;
},
/*
Method: getCoordinates
Returns an object with width, height, left, right, top, and bottom, representing the values of the Element
Syntax:
>var coords = myElement.getCoordinates(relative);
Arguments:
relative - (element, optional) if set, the position will be relative to this element, otherwise relative to the document.
Returns:
(object) An object containing the Element's current: top, left, width, height, right, and bottom.
Example:
[javascript]
var myValues = $('myElement').getCoordinates();
[/javascript]
Returns:
[javascript]
{
top: 50,
left: 100,
width: 200,
height: 300,
right: 300,
bottom: 350
}
[/javascript]
See Also:
*/
getCoordinates: function(relative){
var position = this.getPosition(relative);
var obj = {'top': position.y, 'left': position.x, 'width': this.offsetWidth, 'height': this.offsetHeight};
obj.right = obj.left + obj.width;
obj.bottom = obj.top + obj.height;
return obj;
}
});
/*
Script: Window.DomReady.js
Contains the custom event domready, for window.
License:
MIT-style license.
*/
/*
Event: domready
Executes a function when the dom tree is loaded, without waiting for images. Only works when called from window.
Arguments:
fn - (function) The function to execute when the DOM is ready.
Example:
[javascript]
window.addEvent('domready', function(){
alert('the dom is ready');
});
[/javascript]
Credits:
(c) Dean Edwards/Matthias Miller/John Resig, remastered for MooTools.
*/
Element.Events.domready = {
onAdd: function(fn){
if ($type(this) == 'element') return;
if (Browser.loaded){
fn.call(this);
return;
}
var self = this;
var domReady = function(){
if (!arguments.callee.done){
arguments.callee.done = true;
fn.call(self);
};
return true;
};
var check = function(context){
if ((Browser.Engine.webkit ? ['loaded', 'complete'] : 'complete').contains(context.readyState)) return domReady();
return false;
};
if (this.document.readyState && Browser.Engine.webkit){
(function(){
if (!check(self.document)) arguments.callee.delay(50);
})();
} else if (this.document.readyState && Browser.Engine.trident){
var script = $('ie_domready');
if (!script){
var src = (this.location.protocol == 'https:') ? '//:' : 'javascript:void(0)';
this.document.write('