mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-03 19:45:44 -05:00
5266 lines
153 KiB
JavaScript
5266 lines
153 KiB
JavaScript
/**
|
|
* Bootstrap JavaScript Library
|
|
* (c) 2006 - 2010 Juerg Lehni, http://scratchdisk.com/
|
|
*
|
|
* Bootstrap is released under the MIT license
|
|
* http://bootstrap-js.net/
|
|
*
|
|
* Inspirations:
|
|
* http://dean.edwards.name/weblog/2006/03/base/
|
|
* http://dev.helma.org/Wiki/JavaScript+Inheritance+Sugar/
|
|
* http://prototypejs.org/
|
|
* http://mootools.net/
|
|
*
|
|
* Some code in this file is based on Mootools.net and adapted to the
|
|
* architecture of Bootstrap, with added changes in design and architecture
|
|
* where deemeded necessary.
|
|
* See http://www.bootstrap-js.net/wiki/MootoolsDifferences
|
|
*/
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Base
|
|
|
|
new function() { // Bootstrap scope
|
|
// Fix __proto__ for browsers where it is not implemented (IE and Opera).
|
|
// Do this before anything else, for "var i in" to work without filtering.
|
|
var fix = !this.__proto__ && [Function, Number, Boolean, String, Array, Date, RegExp];
|
|
if (fix)
|
|
for (var i in fix)
|
|
fix[i].prototype.__proto__ = fix[i].prototype;
|
|
|
|
/**
|
|
* Private function that checks if an object contains a given property.
|
|
* Naming it 'has' causes problems on Opera when defining
|
|
* Object.prototype.has, as the local version then seems to be overriden
|
|
* by that. Giving it a idfferent name fixes it.
|
|
*/
|
|
function has(obj, name) {
|
|
return (!fix || name != '__proto__') && obj.hasOwnProperty(name);
|
|
}
|
|
|
|
// Support a mixed environment of some ECMAScript 5 features present,
|
|
// along with __defineGetter/Setter__ functions, as found in browsers today.
|
|
var _define = Object.defineProperty, _describe = Object.getOwnPropertyDescriptor;
|
|
|
|
function define(obj, name, desc) {
|
|
if (_define)
|
|
try {
|
|
// Fix Safari bug of redefining properties even if they are
|
|
// configurable
|
|
delete obj[name];
|
|
return _define(obj, name, desc);
|
|
} catch (e) {}
|
|
if ((desc.get || desc.set) && obj.__defineGetter__) {
|
|
if (desc.get) obj.__defineGetter__(name, desc.get);
|
|
if (desc.set) obj.__defineSetter__(name, desc.set);
|
|
} else {
|
|
obj[name] = desc.value;
|
|
}
|
|
return obj;
|
|
}
|
|
|
|
function describe(obj, name) {
|
|
if (_describe)
|
|
try { return _describe(obj, name); } catch (e) {}
|
|
var get = obj.__lookupGetter__ && obj.__lookupGetter__(name);
|
|
return get
|
|
? { enumerable: true, configurable: true, get: get, set: obj.__lookupSetter__(name) }
|
|
: has(obj, name)
|
|
? { enumerable: true, configurable: true, writable: true, value: obj[name] }
|
|
: null;
|
|
}
|
|
|
|
/**
|
|
* Private function that injects functions from src into dest, overriding
|
|
* (and inherinting from) base. if allowProto is set, the name "prototype"
|
|
* is inherited too. This is false for static fields, as prototype there
|
|
* points to the classes' prototype.
|
|
*/
|
|
function inject(dest, src, enumerable, base, generics) {
|
|
/**
|
|
* Private function that injects one field with given name
|
|
*/
|
|
function field(name, val, dontCheck, generics) {
|
|
// This does even work for prop: 0, as it will just be looked up
|
|
// again through describe...
|
|
if (!val)
|
|
val = (val = describe(src, name)) && (val.get ? val : val.value);
|
|
var type = typeof val, func = type == 'function', res = val,
|
|
prev = dest[name], bean;
|
|
// Make generics first, as we might jump out bellow in the
|
|
// val !== (src.__proto__ || Object.prototype)[name] check,
|
|
// e.g. when explicitely reinjecting Array.prototype methods
|
|
// to produce generics of them.
|
|
if (generics && func && (!src.preserve || !generics[name])) generics[name] = function(bind) {
|
|
// Do not call Array.slice generic here, as on Safari,
|
|
// this seems to confuse scopes (calling another
|
|
// generic from generic-producing code).
|
|
return bind && dest[name].apply(bind,
|
|
Array.prototype.slice.call(arguments, 1));
|
|
}
|
|
// TODO: On proper JS implementation, dontCheck is always set
|
|
// Add this with a compile switch here!
|
|
if ((dontCheck || val !== undefined && has(src, name)) && (!prev || !src.preserve)) {
|
|
if (func) {
|
|
if (prev && /\bthis\.base\b/.test(val)) {
|
|
var fromBase = base && base[name] == prev;
|
|
res = (function() {
|
|
// Look up the base function each time if we can,
|
|
// to reflect changes to the base class after
|
|
// inheritance.
|
|
var tmp = describe(this, 'base');
|
|
define(this, 'base', { value: fromBase ? base[name] : prev, configurable: true });
|
|
try { return val.apply(this, arguments); }
|
|
finally { tmp ? define(this, 'base', tmp) : delete this.base; }
|
|
}).pretend(val);
|
|
}
|
|
// Only set produce bean properties when getters are
|
|
// specified. This does not produce properties for setter-
|
|
// only properties which makes sense and also avoids double-
|
|
// injection for beans with both getters and setters.
|
|
if (src.beans && (bean = name.match(/^(get|is)(([A-Z])(.*))$/)))
|
|
try {
|
|
field(bean[3].toLowerCase() + bean[4], {
|
|
get: src['get' + bean[2]] || src['is' + bean[2]],
|
|
set: src['set' + bean[2]]
|
|
}, true);
|
|
} catch (e) {}
|
|
}
|
|
// No need to look up getter if this is a function already.
|
|
// This also prevents _collection from becoming a getter, as
|
|
// DomElements is a constructor function and has both get / set
|
|
// generics for DomElement#get / #set.
|
|
if (!res || func || !res.get && !res.set)
|
|
res = { value: res, writable: true };
|
|
// Only set/change configurable and enumerable if this field is
|
|
// configurable
|
|
if ((describe(dest, name) || { configurable: true }).configurable) {
|
|
res.configurable = true;
|
|
res.enumerable = enumerable;
|
|
}
|
|
define(dest, name, res);
|
|
}
|
|
}
|
|
// Iterate through all definitions in src with an iteator function
|
|
// that checks if the field is a function that needs to be wrapped for
|
|
// calls of base. This is only needed if the function in base is
|
|
// different from the one in src, and if the one in src is actually
|
|
// calling base through base. the string of the function is parsed
|
|
// for base to detect calls.
|
|
// dest[name] then is set to either src[name] or the wrapped function.
|
|
if (src) {
|
|
for (var name in src)
|
|
if (has(src, name) && !/^(statics|generics|preserve|beans|prototype|__proto__|toString|valueOf)$/.test(name))
|
|
field(name, null, true, generics);
|
|
// IE (and some other browsers?) never enumerate these, even
|
|
// if they are simply set on an object. Force their creation.
|
|
// Do not create generics for these, and check them for not
|
|
// being defined (by passing undefined for dontCheck).
|
|
field('toString');
|
|
field('valueOf');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Private function that creates a constructor to extend the given object.
|
|
* When this constructor is called through new, a new object is craeted
|
|
* that inherits all from obj.
|
|
*/
|
|
function extend(obj) {
|
|
// Create the constructor for the new prototype that calls initialize
|
|
// if it is defined.
|
|
function ctor(dont) {
|
|
// Fix __proto__
|
|
if (fix) define(this, '__proto__', { value: obj });
|
|
// Call the constructor function, if defined and we're not inheriting
|
|
// in which case ctor.dont would be set, see further bellow.
|
|
if (this.initialize && dont !== ctor.dont)
|
|
return this.initialize.apply(this, arguments);
|
|
}
|
|
ctor.prototype = obj;
|
|
// Add a toString function that delegates to initialize if possible
|
|
ctor.toString = function() {
|
|
return (this.prototype.initialize || function() {}).toString();
|
|
}
|
|
return ctor;
|
|
}
|
|
|
|
// Now we can use the private inject to add methods to the Function.prototype
|
|
inject(Function.prototype, {
|
|
inject: function(src/*, ... */) {
|
|
if (src) {
|
|
var proto = this.prototype, base = proto.__proto__ && proto.__proto__.constructor;
|
|
// When called from extend, a third argument is passed, pointing
|
|
// to the base class (the constructor).
|
|
// this variable is needed for inheriting static fields and proper
|
|
// lookups of base on each call (see bellow)
|
|
inject(proto, src, false, base && base.prototype, src.generics && this);
|
|
// Define new static fields as enumerable, and inherit from base.
|
|
// enumerable is necessary so they can be copied over from base,
|
|
// and it does not disturb to be enumerable in the constructor.
|
|
inject(this, src.statics, true, base);
|
|
}
|
|
// If there are more than one argument, loop through them and call
|
|
// inject again. Do not simple inline the above code in one loop,
|
|
// since each of the passed objects might override this.inject.
|
|
for (var i = 1, l = arguments.length; i < l; i++)
|
|
this.inject(arguments[i]);
|
|
return this;
|
|
},
|
|
|
|
extend: function(src/* , ... */) {
|
|
// The new prototype extends the constructor on which extend is called.
|
|
// Fix constructor
|
|
// TODO: Consider using Object.create instead of using this.dont if
|
|
// available?
|
|
var proto = new this(this.dont), ctor = extend(proto);
|
|
define(proto, 'constructor', { value: ctor, writable: true, configurable: true });
|
|
// An object to be passed as the first parameter in constructors
|
|
// when initialize should not be called. This needs to be a property
|
|
// of the created constructor, so that if .extend is called on native
|
|
// constructors or constructors not created through .extend,
|
|
// this.dont will be undefined and no value will be passed to the
|
|
// constructor that would not know what to do with it.
|
|
ctor.dont = {};
|
|
// Copy over static fields, as prototype-like inheritance
|
|
// is not possible for static fields. Mark them as enumerable
|
|
// so they can be copied over again.
|
|
// TODO: This needs fixing for versioning on the server!
|
|
inject(ctor, this, true);
|
|
// Inject all the definitions in src
|
|
// Use the new inject instead of the one in ctor, in case it was
|
|
// overriden.
|
|
// Needed when overriding static inject as in HtmlElements.js.
|
|
// Only inject if there's something to actually inject.
|
|
return arguments.length ? this.inject.apply(ctor, arguments) : ctor;
|
|
},
|
|
|
|
pretend: function(fn) {
|
|
// Redirect toString to the one from the original function
|
|
// to "hide" the wrapper function
|
|
this.toString = function() {
|
|
return fn.toString();
|
|
}
|
|
this.valueOf = function() {
|
|
return fn.valueOf();
|
|
}
|
|
return this;
|
|
}
|
|
});
|
|
|
|
function each(obj, iter, bind) {
|
|
return obj ? (typeof obj.length == 'number'
|
|
? Array : Hash).prototype.each.call(obj, iter, bind) : bind;
|
|
}
|
|
|
|
// Let's not touch Object.prototype
|
|
Base = Object.extend({
|
|
/**
|
|
* Returns true if the object contains a property with the given name,
|
|
* false otherwise.
|
|
* Just like in .each, objects only contained in the prototype(s) are
|
|
* filtered.
|
|
*/
|
|
has: function(name) {
|
|
return has(this, name);
|
|
},
|
|
|
|
each: function(iter, bind) {
|
|
return each(this, iter, bind);
|
|
},
|
|
|
|
/**
|
|
* Injects the fields from the given object, adding base functionality
|
|
*/
|
|
inject: function(/* src, ... */) {
|
|
for (var i = 0, l = arguments.length; i < l; i++)
|
|
inject(this, arguments[i]);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Returns a new object that inherits all properties from "this", through
|
|
* proper JS inheritance, not copying.
|
|
* Optionally, src and hide parameters can be passed to fill in the
|
|
* newly created object just like in inject(), to copy the behavior
|
|
* of Function.prototype.extend.
|
|
*/
|
|
extend: function(/* src, ... */) {
|
|
// Notice the "new" here: the private extend returns a constructor
|
|
// as it's used for Function.prototype.extend as well. But when
|
|
// extending objects, we want to return a new object that inherits
|
|
// from "this". In that case, the constructor is never used again,
|
|
// its just created to create a new object with the proper
|
|
// inheritance set and is garbage collected right after.
|
|
var res = new (extend(this));
|
|
return res.inject.apply(res, arguments);
|
|
},
|
|
|
|
statics: {
|
|
// Expose some local privates as Base generics.
|
|
has: has,
|
|
each: each,
|
|
define: define,
|
|
describe: describe,
|
|
|
|
type: function(obj) {
|
|
// Handle elements, as needed by DomNode.js
|
|
return (obj || obj === 0) && (
|
|
obj._type || obj.nodeName && (
|
|
obj.nodeType == 1 && 'element' ||
|
|
obj.nodeType == 3 && 'textnode' ||
|
|
obj.nodeType == 9 && 'document')
|
|
// TODO: Find better way to identify windows and use
|
|
// the same cod ein DomNode$getConstructor
|
|
|| obj.location && obj.frames && obj.history && 'window'
|
|
|| typeof obj) || null;
|
|
},
|
|
|
|
check: function(obj) {
|
|
return !!(obj || obj === 0);
|
|
},
|
|
|
|
/**
|
|
* Returns the first argument that is defined.
|
|
* Null is counted as defined too, since !== undefined is used for
|
|
* comparisons. In this it differs from Mootools!
|
|
*/
|
|
pick: function() {
|
|
for (var i = 0, l = arguments.length; i < l; i++)
|
|
if (arguments[i] !== undefined)
|
|
return arguments[i];
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* Converts the argument to an iterator function. If none is
|
|
* specified, the identity function is returned.
|
|
* This supports normal functions, which are returned unmodified,
|
|
* and values to compare to. Wherever this function is used in the
|
|
* Enumerable functions, a value, a Function or null may be passed.
|
|
*/
|
|
iterator: function(iter) {
|
|
return !iter
|
|
? function(val) { return val }
|
|
: typeof iter != 'function'
|
|
? function(val) { return val == iter }
|
|
: iter;
|
|
/*
|
|
// For RegExp support, used this:
|
|
else switch (Base.type(iter)) {
|
|
case 'function': return iter;
|
|
case 'regexp': return function(val) { return iter.test(val) };
|
|
default: return function(val) { return val == iter };
|
|
}
|
|
*/
|
|
},
|
|
|
|
/**
|
|
* A special constant, to be thrown by closures passed to each()
|
|
*
|
|
* $continue / Base.next is not implemented, as the same
|
|
* functionality can achieved by using return in the closure.
|
|
* In prototype, the implementation of $continue also leads to a huge
|
|
* speed decrease, as the closure is wrapped in another closure that
|
|
* does nothing else than handling $continue.
|
|
*/
|
|
stop: {}
|
|
}
|
|
}, {
|
|
generics: true,
|
|
|
|
debug: function() {
|
|
return /^(string|number|function|regexp)$/.test(Base.type(this)) ? this
|
|
: Base.each(this, function(val, key) { this.push(key + ': ' + val); }, []).join(', ');
|
|
/*
|
|
switch (Base.type(this)) {
|
|
case 'string': case 'number': case 'regexp':
|
|
return this;
|
|
case 'function':
|
|
return 'function ' + (this.name || '');
|
|
}
|
|
var buf = [];
|
|
for (var key in this)
|
|
if (Base.has(this, key))
|
|
buf.push(key + ': ' + Base.debug(this[key]));
|
|
return buf.join(', ');
|
|
*/
|
|
},
|
|
|
|
/**
|
|
* Creates a new object of the same type and copies over all
|
|
* name / value pairs from this object.
|
|
*/
|
|
clone: function() {
|
|
return Base.each(this, function(val, i) {
|
|
this[i] = val;
|
|
}, new this.constructor());
|
|
},
|
|
|
|
toQueryString: function() {
|
|
return Base.each(this, function(val, key) {
|
|
this.push(key + '=' + encodeURIComponent(val));
|
|
}, []).join('&');
|
|
}
|
|
});
|
|
}
|
|
|
|
$each = Base.each;
|
|
$type = Base.type;
|
|
$check = Base.check;
|
|
$pick = Base.pick;
|
|
$stop = $break = Base.stop;
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Enumerable
|
|
|
|
/**
|
|
* The Enumerable interface. To add enumerable functionality to any prototype,
|
|
* just use Constructor.inject(Enumerable);
|
|
* This adds the function .each() that can handle both arrays (detected through
|
|
* .length) and dictionaries (if it's not an array, enumerating with for-in).
|
|
*/
|
|
|
|
// TODO: Base.each is used mostly so functions can be generalized.
|
|
// But that's not enough, since find and others are still called
|
|
// on this.
|
|
Enumerable = {
|
|
generics: true,
|
|
// Make sure it's not overriding native functions when injecting into Array
|
|
preserve: true,
|
|
|
|
/**
|
|
* Searches the list for the first element where the passed iterator
|
|
* does not return null and returns an object containing key, value and
|
|
* iterator result for the given entry. This is used in find and remove.
|
|
* If no iterator is passed, the value is used directly.
|
|
*/
|
|
findEntry: function(iter, bind) {
|
|
var that = this, iter = Base.iterator(iter), ret = null;
|
|
Base.each(this, function(val, key) {
|
|
var res = iter.call(bind, val, key, that);
|
|
if (res) {
|
|
ret = { key: key, value: val, result: res };
|
|
throw Base.stop;
|
|
}
|
|
});
|
|
return ret;
|
|
},
|
|
|
|
/**
|
|
* Calls the passed iterator for each element and returns the first
|
|
* result of the iterator calls that is not null.
|
|
* If no iterator is passed, the value is used directly.
|
|
*/
|
|
find: function(iter, bind) {
|
|
var entry = this.findEntry(iter, bind);
|
|
return entry && entry.result;
|
|
},
|
|
|
|
contains: function(iter) {
|
|
return !!this.findEntry(iter);
|
|
},
|
|
|
|
remove: function(iter, bind) {
|
|
var entry = this.findEntry(iter, bind);
|
|
if (entry) {
|
|
delete this[entry.key];
|
|
return entry.value;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Collects all elements for which the condition of the passed iterator
|
|
* or regular expression is true.
|
|
* This is compatible with JS 1.5's Array#filter
|
|
*/
|
|
filter: function(iter, bind) {
|
|
var that = this;
|
|
return Base.each(this, function(val, i) {
|
|
if (iter.call(bind, val, i, that))
|
|
this[this.length] = val;
|
|
}, []);
|
|
},
|
|
|
|
/**
|
|
* Maps the result of the given iterator applied to each of the
|
|
* elements to an array and returns it.
|
|
* If no iterator is passed, the value is used directly.
|
|
* This is compatible with JS 1.5's Array#map
|
|
*/
|
|
map: function(iter, bind) {
|
|
var that = this;
|
|
return Base.each(this, function(val, i) {
|
|
this[this.length] = iter.call(bind, val, i, that);
|
|
}, []);
|
|
},
|
|
|
|
/**
|
|
* Returns true if the condition defined by the passed iterator is true
|
|
* for all elements, false otherwise.
|
|
* If no iterator is passed, the value is used directly.
|
|
* This is compatible with JS 1.5's Array#every
|
|
*/
|
|
every: function(iter, bind) {
|
|
var that = this;
|
|
return this.find(function(val, i) {
|
|
// as "this" is not used for anything else, use it for bind,
|
|
// so that lookups on the object are faster (according to
|
|
// benchmarking)
|
|
return !iter.call(this, val, i, that);
|
|
}, bind || null) == null;
|
|
// See #some for explanation of || null
|
|
},
|
|
|
|
/**
|
|
* Returns true if the condition defined by the passed iterator is true
|
|
* for one or more of the elements, false otherwise.
|
|
* If no iterator is passed, the value is used directly.
|
|
* This is compatible with JS 1.5's Array#some
|
|
*/
|
|
some: function(iter, bind) {
|
|
// Passing null instead of undefined causes bind not to be set to
|
|
// this, as we want the same behavior here as the native Array#some.
|
|
return this.find(iter, bind || null) != null;
|
|
},
|
|
|
|
/**
|
|
* Collects the result of the given iterator applied to each of the
|
|
* elements to an array and returns it.
|
|
* The difference to map is that it does not add null / undefined values.
|
|
*/
|
|
collect: function(iter, bind) {
|
|
var that = this, iter = Base.iterator(iter);
|
|
return Base.each(this, function(val, i) {
|
|
val = iter.call(bind, val, i, that);
|
|
if (val != null)
|
|
this[this.length] = val;
|
|
}, []);
|
|
},
|
|
|
|
/**
|
|
* Returns the maximum value of the result of the passed iterator
|
|
* applied to each element.
|
|
* If no iterator is passed, the value is used directly.
|
|
*/
|
|
max: function(iter, bind) {
|
|
var that = this, iter = Base.iterator(iter);
|
|
return Base.each(this, function(val, i) {
|
|
val = iter.call(bind, val, i, that);
|
|
if (val >= (this.max || val)) this.max = val;
|
|
}, {}).max;
|
|
},
|
|
|
|
/**
|
|
* Returns the minimum value of the result of the passed iterator
|
|
* applied to each element.
|
|
* If no iterator is passed, the value is used directly.
|
|
*/
|
|
min: function(iter, bind) {
|
|
var that = this, iter = Base.iterator(iter);
|
|
return Base.each(this, function(val, i) {
|
|
val = iter.call(bind, val, i, that);
|
|
if (val <= (this.min || val)) this.min = val;
|
|
}, {}).min;
|
|
},
|
|
|
|
/**
|
|
* Collects the values of the given property of each of the elements
|
|
* in an array and returns it.
|
|
*/
|
|
pluck: function(prop) {
|
|
return this.map(function(val) {
|
|
return val[prop];
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Sorts the elements depending on the outcome of the passed iterator
|
|
* and returns the sorted list in an array.
|
|
* Inspired by Prototype.js
|
|
*/
|
|
sortBy: function(iter, bind) {
|
|
var that = this, iter = Base.iterator(iter);
|
|
// TODO: Does not work as generics
|
|
return this.map(function(val, i) {
|
|
return { value: val, compare: iter.call(bind, val, i, that) };
|
|
}, bind).sort(function(left, right) {
|
|
var a = left.compare, b = right.compare;
|
|
return a < b ? -1 : a > b ? 1 : 0;
|
|
}).pluck('value');
|
|
},
|
|
|
|
/**
|
|
* Converts the Enumerable to a normal array.
|
|
*/
|
|
toArray: function() {
|
|
return this.map(function(value) {
|
|
return value;
|
|
});
|
|
}
|
|
};
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Hash
|
|
|
|
/**
|
|
* As Object only defines each and two other basic functions to avoid name
|
|
* clashes in all other prototypes, define a second prototype called Hash,
|
|
* which basically does the same but fully implements Enumberable.
|
|
* Also note the difference to Prototype.js, where Hash does not iterate
|
|
* in the same way. Instead of creating a new key / value pair object for
|
|
* each element and passing the numerical index of it in the iteration as a
|
|
* second argument, use the key as the index, and the value as the first
|
|
* element. This is much simpler and faster, and I have not yet found out the
|
|
* advantage of how Prototype handles it.
|
|
*/
|
|
Hash = Base.extend(Enumerable, {
|
|
generics: true,
|
|
|
|
/**
|
|
* Constructs a new Hash. The constructor takes a variable amount of
|
|
* argument objects of which the fields are all merged into the hash.
|
|
*/
|
|
initialize: function(arg) {
|
|
// If the first argument is a string, assume pairs of key/value arguments,
|
|
// to be set on the hash.
|
|
if (typeof arg == 'string') {
|
|
for (var i = 0, l = arguments.length; i < l; i += 2)
|
|
this[arguments[i]] = arguments[i + 1];
|
|
} else {
|
|
this.append.apply(this, arguments);
|
|
}
|
|
// Explicitly return object as it is used in Hash.create's return statement
|
|
return this;
|
|
},
|
|
|
|
each: function(iter, bind) {
|
|
// Do not use Object.keys for iteration as iterators might modify
|
|
// the object we're iterating over, making the hasOwnProperty still
|
|
// necessary.
|
|
// If is used, we can fully rely on hasOwnProperty,
|
|
// as even for , define(this, '__proto__', {}) is used.
|
|
var bind = bind || this, iter = Base.iterator(iter);
|
|
try {
|
|
for (var i in this)
|
|
if (this.hasOwnProperty(i))
|
|
iter.call(bind, this[i], i, this);
|
|
} catch (e) {
|
|
if (e !== Base.stop) throw e;
|
|
}
|
|
return bind;
|
|
},
|
|
|
|
/**
|
|
* append is faster and more low level than merge, completely based on
|
|
* for-in and Base.has, and not relying on any .each function, so can
|
|
* be used early in the bootstrapping process.
|
|
*/
|
|
append: function() {
|
|
for (var i = 0, l = arguments.length; i < l; i++) {
|
|
var obj = arguments[i];
|
|
for (var key in obj)
|
|
if (Base.has(obj, key))
|
|
this[key] = obj[key];
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Deep merges with the given enumerable object and returns the modifed hash.
|
|
* Recursively calls merge or clone on value pairs if they are dictionaries.
|
|
*/
|
|
merge: function() {
|
|
// Allways use Base.each() as we don't know wether the passed object
|
|
// really inherits from Base.
|
|
// Do not rely on .each / .forEach, so merge can be used in low level
|
|
// operations such as insertion of such functions as well. Just use
|
|
// the Base.has generic to filter out parent values.
|
|
return Array.each(arguments, function(obj) {
|
|
Base.each(obj, function(val, key) {
|
|
this[key] = Base.type(this[key]) == 'object'
|
|
? Hash.prototype.merge.call(this[key], val)
|
|
: Base.type(val) == 'object' ? Base.clone(val) : val;
|
|
}, this);
|
|
}, this);
|
|
},
|
|
|
|
/**
|
|
* Returns the keys of all elements in an array.
|
|
*/
|
|
getKeys: function() {
|
|
return Hash.getKeys(this);
|
|
},
|
|
|
|
/**
|
|
* Does the same as toArray(), but renamed to go together with getKeys()
|
|
*/
|
|
getValues: Enumerable.toArray,
|
|
|
|
getSize: function() {
|
|
return this.each(function() {
|
|
this.size++;
|
|
}, { size: 0 }).size;
|
|
},
|
|
|
|
statics: {
|
|
/**
|
|
* Converts the passed object to a hash.
|
|
* Warning: Does not create a new instance if it is a hash already!
|
|
*/
|
|
create: function(obj) {
|
|
return arguments.length == 1 && obj.constructor == Hash
|
|
? obj : Hash.prototype.initialize.apply(new Hash(), arguments);
|
|
},
|
|
|
|
/**
|
|
* Returns the keys of all elements in an array.
|
|
* Uses the native Object.keys if available.
|
|
*/
|
|
getKeys: Object.keys || function(obj) {
|
|
return Hash.map(function(val, key) {
|
|
return key;
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
// Short-cut to Hash.create
|
|
$H = Hash.create;
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Array
|
|
|
|
// Define standard methods that might not be present and only get injected
|
|
// if they don't exist because of preserve: true
|
|
Array.inject({
|
|
generics: true,
|
|
preserve: true,
|
|
// tell Base.type what to return for arrays.
|
|
_type: 'array',
|
|
|
|
forEach: function(iter, bind) {
|
|
for (var i = 0, l = this.length; i < l; i++)
|
|
iter.call(bind, this[i], i, this);
|
|
},
|
|
|
|
indexOf: function(obj, i) {
|
|
i = i || 0;
|
|
if (i < 0) i = Math.max(0, this.length + i);
|
|
for (var l = this.length; i < l; i++)
|
|
if (this[i] == obj) return i;
|
|
return -1;
|
|
},
|
|
|
|
lastIndexOf: function(obj, i) {
|
|
i = i != null ? i : this.length - 1;
|
|
if (i < 0) i = Math.max(0, this.length + i);
|
|
for (; i >= 0; i--)
|
|
if (this[i] == obj) return i;
|
|
return -1;
|
|
},
|
|
|
|
filter: function(iter, bind) {
|
|
var res = [];
|
|
for (var i = 0, l = this.length; i < l; i++) {
|
|
var val = this[i];
|
|
if (iter.call(bind, val, i, this))
|
|
res[res.length] = val;
|
|
}
|
|
return res;
|
|
},
|
|
|
|
map: function(iter, bind) {
|
|
var res = new Array(this.length);
|
|
for (var i = 0, l = this.length; i < l; i++)
|
|
res[i] = iter.call(bind, this[i], i, this);
|
|
return res;
|
|
},
|
|
|
|
every: function(iter, bind) {
|
|
for (var i = 0, l = this.length; i < l; i++)
|
|
if (!iter.call(bind, this[i], i, this))
|
|
return false;
|
|
return true;
|
|
},
|
|
|
|
some: function(iter, bind) {
|
|
for (var i = 0, l = this.length; i < l; i++)
|
|
if (iter.call(bind, this[i], i, this))
|
|
return true;
|
|
return false;
|
|
},
|
|
|
|
reduce: function(fn, value) {
|
|
var i = 0;
|
|
if (arguments.length < 2 && this.length) value = this[i++];
|
|
for (var l = this.length; i < l; i++)
|
|
value = fn.call(null, value, this[i], i, this);
|
|
return value;
|
|
}
|
|
}, Enumerable, {
|
|
// TODO: this.each / this.findEntry / this.indexOf breaks many generics!
|
|
generics: true,
|
|
beans: true,
|
|
|
|
each: function(iter, bind) {
|
|
try {
|
|
Array.prototype.forEach.call(this, Base.iterator(iter), bind = bind || this);
|
|
} catch (e) {
|
|
if (e !== Base.stop) throw e;
|
|
}
|
|
return bind;
|
|
},
|
|
|
|
collect: function(iter, bind) {
|
|
var that = this;
|
|
return this.each(function(val, i) {
|
|
if ((val = iter.call(bind, val, i, that)) != null)
|
|
this[this.length] = val;
|
|
}, []);
|
|
},
|
|
|
|
findEntry: function(iter, bind) {
|
|
// Use the faster indexOf in case we're not using iterator functions.
|
|
if (typeof iter != 'function') {
|
|
var i = this.indexOf(iter);
|
|
// Return the same result as if Enumerable.findEntry was used
|
|
// and the iter object was converter to an iterator.
|
|
return i == -1 ? null : { key: i, value: iter, result: iter };
|
|
}
|
|
// Do not use this.base, as we might call this on non-arrays
|
|
return Enumerable.findEntry.call(this, iter, bind);
|
|
},
|
|
|
|
remove: function(iter, bind) {
|
|
var entry = this.findEntry(iter, bind);
|
|
if (entry) {
|
|
this.splice(entry.key, 1);
|
|
return entry.value;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Overrides the definition in Enumerable.toArray with a more efficient
|
|
* version.
|
|
*/
|
|
toArray: function() {
|
|
return Array.prototype.slice.call(this);
|
|
},
|
|
|
|
/**
|
|
* Clones the array.
|
|
*/
|
|
clone: function() {
|
|
return this.toArray();
|
|
},
|
|
|
|
/**
|
|
* Clears the array.
|
|
*/
|
|
clear: function() {
|
|
this.length = 0;
|
|
},
|
|
|
|
/**
|
|
* Returns a compacted version of the array containing only
|
|
* elements that are not null.
|
|
*/
|
|
compact: function() {
|
|
return this.filter(function(value) {
|
|
return value != null;
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Appends the items of the passed array to this array.
|
|
*/
|
|
append: function(items) {
|
|
// It would be nice if calling push with the items of the array
|
|
// as arguments would work, but it does not for non-arrays:
|
|
// this.push.apply(this, items);
|
|
// this.length is explicitely altered, so non-array sub-prototypes
|
|
// can use it too.
|
|
for (var i = 0, l = items.length; i < l; i++)
|
|
this[this.length++] = items[i];
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Creates a hash object containing the array's values associated to the
|
|
* given keys as defined by obj.
|
|
* This is based on mootools' associate, but extended by the possibility
|
|
* to not pass an obj, or pass a function:
|
|
* - If obj is an array, its values are the new keys.
|
|
* - If obj is a hash object, mootools behavior is assumed.
|
|
* - If obj is not defined, it is set to the array itself, resulting in
|
|
* a hash with key and value set to the same (the initial array entry).
|
|
* - If obj is a function, it's passed to this.map(), and the resulting
|
|
* array is used for the key values.
|
|
*/
|
|
associate: function(obj) {
|
|
if (!obj)
|
|
obj = this;
|
|
else if (typeof obj == 'function')
|
|
obj = this.map(obj);
|
|
if (obj.length != null) {
|
|
var that = this;
|
|
return Base.each(obj, function(name, index) {
|
|
this[name] = that[index];
|
|
if (index == that.length)
|
|
throw Base.stop;
|
|
}, {});
|
|
} else {
|
|
// Produce a new bare object since we're deleting from it.
|
|
obj = Hash.append({}, obj);
|
|
// Use Base.each since this is also used for generics
|
|
return Array.each(this, function(val) {
|
|
var type = Base.type(val);
|
|
// Use Base.each since it's a bare object for speed reasons
|
|
// on the browser.
|
|
Base.each(obj, function(hint, name) {
|
|
if (hint == 'any' || type == hint) {
|
|
this[name] = val;
|
|
delete obj[name];
|
|
throw Base.stop;
|
|
}
|
|
}, this);
|
|
}, {});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* adds all elements in the passed array, if they are not contained
|
|
* in the array already.
|
|
*/
|
|
/* TODO: needed? Call unite instead? or union?
|
|
include: function(obj) {
|
|
return Base.each(obj, function(val) {
|
|
if (this.indexOf(val) == -1) this.push(val);
|
|
}, this);
|
|
},
|
|
*/
|
|
|
|
/**
|
|
* Flattens multi-dimensional array structures by breaking down each
|
|
* sub-array into the main array.
|
|
*/
|
|
flatten: function() {
|
|
// Make it generics friendly through Array.each
|
|
return Array.each(this, function(val) {
|
|
if (val != null && val.flatten) this.append(val.flatten());
|
|
else this.push(val);
|
|
}, []);
|
|
},
|
|
|
|
/**
|
|
* Swaps two elements of the object at the given indices, and returns
|
|
* the value that is placed at the first index.
|
|
*/
|
|
swap: function(i, j) {
|
|
var tmp = this[j];
|
|
this[j] = this[i];
|
|
this[i] = tmp;
|
|
return tmp;
|
|
},
|
|
|
|
/**
|
|
* Returns a copy of the array containing the elements in
|
|
* shuffled sequence.
|
|
*/
|
|
shuffle: function() {
|
|
var res = this.clone();
|
|
var i = this.length;
|
|
while (i--) res.swap(i, Math.rand(i + 1));
|
|
return res;
|
|
},
|
|
|
|
pick: function() {
|
|
return this[Math.rand(this.length)];
|
|
},
|
|
|
|
/**
|
|
* Returns the first element of the array.
|
|
*/
|
|
getFirst: function() {
|
|
return this[0];
|
|
},
|
|
|
|
/**
|
|
* Returns the last element of the array.
|
|
*/
|
|
getLast: function() {
|
|
return this[this.length - 1];
|
|
}
|
|
}, new function() {
|
|
// Merge sutract / combine in one function through a producer:
|
|
function combine(subtract) {
|
|
return function(items) {
|
|
var res = new this.constructor();
|
|
for (var i = this.length - 1; i >= 0; i--)
|
|
if (subtract == !Array.find(items, this[i]))
|
|
res.push(this[i]);
|
|
return res;
|
|
}
|
|
}
|
|
|
|
return {
|
|
/**
|
|
* Returns a new array containing all objects from this array that are
|
|
* not contained in items.
|
|
*/
|
|
subtract: combine(true),
|
|
|
|
/**
|
|
* Returns a new array containing all objects contained in both arrays.
|
|
*/
|
|
intersect: combine(false)
|
|
}
|
|
});
|
|
|
|
// Now add code that makes Array.extend() a possibilitiy:
|
|
Array.inject(new function() {
|
|
// Fields that are hidden in Array.prototype are explicitely copied over,
|
|
// so that they can be inherited in extend() below, and generics are created
|
|
// for them too.
|
|
var proto = Array.prototype, fields = ['push','pop','shift','unshift','sort',
|
|
'reverse','join','slice','splice','forEach','indexOf','lastIndexOf',
|
|
'filter','map','every','some','reduce','concat'].each(function(name) {
|
|
this[name] = proto[name];
|
|
}, { generics: true, preserve: true });
|
|
|
|
// Make sure there are generics for all of them. Again this is not dangerous
|
|
// because we'rew using preserve: true
|
|
Array.inject(fields);
|
|
|
|
// Now add the fields to be injected into sub-prototypes from Array.
|
|
// See Array.extend for more explanation.
|
|
Hash.append(fields, proto, {
|
|
/**
|
|
* Clears the array.
|
|
* For non-array sub-prototypes, setting this.length = 0 does not clear
|
|
* the array. Exlicit delete is needed. For sub-prototypes.
|
|
*/
|
|
clear: function() {
|
|
for (var i = 0, l = this.length; i < l; i++)
|
|
delete this[i];
|
|
this.length = 0;
|
|
},
|
|
|
|
// Safari breaks native concat on sub classes of arrays. Simulate it here.
|
|
// TODO: Test if newer versions are find with this.
|
|
concat: function(list) {
|
|
return Browser.WEBKIT
|
|
? new Array(this.length + list.length).append(this).append(list)
|
|
: Array.concat(this, list);
|
|
},
|
|
|
|
// The native toString does not work for classes inheriting from Array.
|
|
// but luckily join does the same and works.
|
|
toString: proto.join,
|
|
|
|
// length is set so instances of array have it set to 0 to begin with.
|
|
// (any length modifying operation on them like #push will then
|
|
// define / modify the length field in the insance).
|
|
length: 0
|
|
});
|
|
|
|
return {
|
|
statics: {
|
|
/**
|
|
* Creates an array from the past object.
|
|
*/
|
|
create: function(obj) {
|
|
if (obj == null)
|
|
return [];
|
|
if (obj.toArray)
|
|
return obj.toArray();
|
|
if (typeof obj.length == 'number')
|
|
return Array.prototype.slice.call(obj);
|
|
return [obj];
|
|
},
|
|
|
|
/**
|
|
* Makes sure the passed object is an array and converts it to one
|
|
* if not through Array.create.
|
|
*/
|
|
convert: function(obj) {
|
|
return Base.type(obj) == 'array' ? obj : Array.create(obj);
|
|
},
|
|
|
|
extend: function(src) {
|
|
// On IE browsers, we cannot directly inherit from Array
|
|
// by setting ctor.prototype = new Array(), as setting of #length
|
|
// on such instances is ignored.
|
|
// Simulate extending of Array, by actually extending Base and
|
|
// injecting the Array fields, which explicitely contain the
|
|
// native functions too (see bellow).
|
|
// Notice: since fields as the preserve flag set, the
|
|
// Array#clone() will not override the Base#clone method,
|
|
// so derived arrays will successfully clone themselves.
|
|
var ret = Base.extend(fields, src);
|
|
// The subclass can use the normal extend again:
|
|
ret.extend = Function.extend;
|
|
return ret;
|
|
}
|
|
}
|
|
};
|
|
});
|
|
|
|
// Short-cut to Array.create
|
|
$A = Array.create;
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Function
|
|
|
|
Function.inject(new function() {
|
|
|
|
function timer(set) {
|
|
return function(delay, bind, args) {
|
|
// It's a bit of a shame we can't use the ES5 bind() here easily:
|
|
var func = this.wrap(bind, args);
|
|
// If delay is not defined, execute right away and return the result
|
|
// of the function. This is used in fireEvent.
|
|
if (delay === undefined)
|
|
return func();
|
|
var timer = set(func, delay);
|
|
func.clear = function() {
|
|
clearTimeout(timer);
|
|
clearInterval(timer);
|
|
};
|
|
return func;
|
|
};
|
|
}
|
|
|
|
return {
|
|
generics: true,
|
|
preserve: true,
|
|
|
|
delay: timer(setTimeout),
|
|
periodic: timer(setInterval),
|
|
|
|
bind: function(bind) {
|
|
var that = this, slice = Array.prototype.slice,
|
|
args = arguments.length > 1 ? slice.call(arguments, 1) : null;
|
|
return function() {
|
|
return that.apply(bind, args ? arguments.length > 0
|
|
? args.concat(slice.call(arguments)) : args : arguments);
|
|
}
|
|
},
|
|
|
|
wrap: function(bind, args) {
|
|
var that = this;
|
|
return function() {
|
|
return that.apply(bind, args || arguments);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Number
|
|
|
|
Number.inject({
|
|
// tell Base.type that number objects are numbers too.
|
|
_type: 'number',
|
|
|
|
limit: function(min, max) {
|
|
return Math.min(max, Math.max(min, this));
|
|
},
|
|
|
|
times: function(func, bind) {
|
|
for (var i = 0; i < this; i++)
|
|
func.call(bind, i);
|
|
return bind || this;
|
|
},
|
|
|
|
toInt: function(base) {
|
|
return parseInt(this, base || 10);
|
|
},
|
|
|
|
toFloat: function() {
|
|
return parseFloat(this);
|
|
},
|
|
|
|
toPaddedString: function(length, base, prefix) {
|
|
var str = this.toString(base || 10);
|
|
return (prefix || '0').times(length - str.length) + str;
|
|
}
|
|
});
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// String
|
|
|
|
String.inject({
|
|
_type: 'string',
|
|
|
|
test: function(exp, param) {
|
|
return new RegExp(exp, param || '').test(this);
|
|
},
|
|
|
|
/**
|
|
* Splits the string into an array of words. This can also be used on any
|
|
* String through $A as defined in Array.js, to work similarly to $w in Ruby
|
|
*/
|
|
toArray: function() {
|
|
return this ? this.split(/\s+/) : [];
|
|
},
|
|
|
|
toInt: Number.prototype.toInt,
|
|
|
|
toFloat: Number.prototype.toFloat,
|
|
|
|
camelize: function(separator) {
|
|
return this.replace(separator ? new RegExp('[' + separator + '](\\w)', 'g') : /-(\w)/g, function(all, chr) {
|
|
return chr.toUpperCase();
|
|
});
|
|
},
|
|
|
|
uncamelize: function(separator) {
|
|
separator = separator || ' ';
|
|
return this.replace(/[a-z][A-Z0-9]|[0-9][a-zA-Z]|[A-Z]{2}[a-z]/g, function(match) {
|
|
return match.charAt(0) + separator + match.substring(1);
|
|
});
|
|
},
|
|
|
|
hyphenate: function(separator) {
|
|
return this.uncamelize(separator || '-').toLowerCase();
|
|
},
|
|
|
|
capitalize: function() {
|
|
return this.replace(/\b[a-z]/g, function(match) {
|
|
return match.toUpperCase();
|
|
});
|
|
},
|
|
|
|
// TODO: Is this a good name? Does it need to be improved? (lighter.js relies on it).
|
|
escapeRegExp: function() {
|
|
return this.replace(/([-.*+?^${}()|[\]\/\\])/g, '\\$1');
|
|
},
|
|
|
|
/**
|
|
* Trims away characters matching a given regular expression at the beginning
|
|
* and end of the strnig. If no expression is given, \s is used to match white
|
|
* space.
|
|
*/
|
|
trim: function(exp) {
|
|
exp = exp ? '[' + exp + ']' : '\\s';
|
|
return this.replace(new RegExp('^' + exp + '+|' + exp + '+$', 'g'), '');
|
|
},
|
|
|
|
clean: function() {
|
|
return this.replace(/\s{2,}/g, ' ').trim();
|
|
},
|
|
|
|
contains: function(string, sep) {
|
|
return (sep ? (sep + this + sep).indexOf(sep + string + sep) : this.indexOf(string)) != -1;
|
|
},
|
|
|
|
times: function(count) {
|
|
// Nice trick from Prototype:
|
|
return count < 1 ? '' : new Array(count + 1).join(this);
|
|
},
|
|
|
|
isHtml: function() {
|
|
// From jQuery:
|
|
return /^[^<]*(<(.|\s)+>)[^>]*$/.test(this);
|
|
}
|
|
});
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// RegExp
|
|
|
|
RegExp.inject({
|
|
// Tell Base.type what to return for regexps.
|
|
_type: 'regexp'
|
|
});
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Date
|
|
|
|
Date.inject({
|
|
statics: {
|
|
SECOND: 1000,
|
|
MINUTE: 60000,
|
|
HOUR: 3600000,
|
|
DAY: 86400000,
|
|
WEEK: 604800000, // 7 * DAY
|
|
MONTH: 2592000000, // 30 * DAY
|
|
YEAR: 31536000000, // 365 * DAY
|
|
|
|
now: Date.now || function() {
|
|
return +new Date();
|
|
}
|
|
}
|
|
});
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Math
|
|
|
|
/**
|
|
* Returns a random integer number first <= x < second, if two arguments are
|
|
* passed or 0 <= x < first, if there is donly one.
|
|
*/
|
|
Math.rand = function(first, second) {
|
|
return second == undefined
|
|
? Math.rand(0, first)
|
|
: Math.floor(Math.random() * (second - first) + first);
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Color
|
|
|
|
Array.inject({
|
|
hexToRgb: function(toArray) {
|
|
if (this.length >= 3) {
|
|
var rgb = [];
|
|
for (var i = 0; i < 3; i++)
|
|
rgb.push((this[i].length == 1 ? this[i] + this[i] : this[i]).toInt(16));
|
|
return toArray ? rgb : 'rgb(' + rgb.join(',') + ')';
|
|
}
|
|
},
|
|
|
|
rgbToHex: function(toArray) {
|
|
if (this.length >= 3) {
|
|
if (this.length == 4 && this[3] == 0 && !toArray) 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 toArray ? hex : '#' + hex.join('');
|
|
}
|
|
},
|
|
|
|
rgbToHsb: function() {
|
|
var r = this[0], g = this[1], b = this[2];
|
|
var hue, saturation, brightness;
|
|
var max = Math.max(r, g, b), min = Math.min(r, g, b);
|
|
var delta = max - min;
|
|
brightness = max / 255;
|
|
saturation = (max != 0) ? delta / max : 0;
|
|
if (saturation == 0) {
|
|
hue = 0;
|
|
} else {
|
|
var rr = (max - r) / delta;
|
|
var gr = (max - g) / delta;
|
|
var br = (max - b) / delta;
|
|
if (r == max) hue = br - gr;
|
|
else if (g == max) hue = 2 + rr - br;
|
|
else hue = 4 + gr - rr;
|
|
hue /= 6;
|
|
if (hue < 0) hue++;
|
|
}
|
|
return [Math.round(hue * 360), Math.round(saturation * 100), Math.round(brightness * 100)];
|
|
},
|
|
|
|
hsbToRgb: function() {
|
|
var br = Math.round(this[2] / 100 * 255);
|
|
if (this[1] == 0) {
|
|
return [br, br, br];
|
|
} else {
|
|
var hue = this[0] % 360;
|
|
var f = hue % 60;
|
|
var p = Math.round((this[2] * (100 - this[1])) / 10000 * 255);
|
|
var q = Math.round((this[2] * (6000 - this[1] * f)) / 600000 * 255);
|
|
var t = Math.round((this[2] * (6000 - this[1] * (60 - f))) / 600000 * 255);
|
|
switch (Math.floor(hue / 60)) {
|
|
case 0: return [br, t, p];
|
|
case 1: return [q, br, p];
|
|
case 2: return [p, br, t];
|
|
case 3: return [p, q, br];
|
|
case 4: return [t, p, br];
|
|
case 5: return [br, p, q];
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
String.inject({
|
|
hexToRgb: function(toArray) {
|
|
var hex = this.match(/^#?(\w{1,2})(\w{1,2})(\w{1,2})$/);
|
|
return hex && hex.slice(1).hexToRgb(toArray);
|
|
},
|
|
|
|
rgbToHex: function(toArray) {
|
|
var rgb = this.match(/\d{1,3}/g);
|
|
return rgb && rgb.rgbToHex(toArray);
|
|
}
|
|
});
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Json
|
|
|
|
Json = function(JSON) {
|
|
var special = { '\b': '\\b', '\t': '\\t', '\n': '\\n', '\f': '\\f', '\r': '\\r', '"' : '\\"', "'" : "\\'", '\\': '\\\\' };
|
|
// Support the native Json object if it is there, fall back on JS version.
|
|
return {
|
|
encode: JSON
|
|
? function(obj, properties) {
|
|
// Unfortunately IE does not natively support __proto__, so
|
|
// we need to filter it out from Json
|
|
return JSON.stringify(obj, properties || Browser.TRIDENT && function(key, value) {
|
|
return key == '__proto__' ? undefined : value;
|
|
});
|
|
}
|
|
: function(obj, properties) {
|
|
if (Base.type(properties) == 'array') {
|
|
// Convert properties to a lookup table:
|
|
properties = properties.each(function(val) {
|
|
this[val] = true;
|
|
}, {});
|
|
}
|
|
switch (Base.type(obj)) {
|
|
case 'string':
|
|
return '"' + obj.replace(/[\x00-\x1f\\"]/g, function(chr) {
|
|
return special[chr] || '\\u' + chr.charCodeAt(0).toPaddedString(4, 16);
|
|
}) + '"';
|
|
case 'array':
|
|
return '[' + obj.collect(function(val) {
|
|
return Json.encode(val, properties);
|
|
}) + ']';
|
|
case 'object':
|
|
// Treat hash just like object
|
|
case 'hash':
|
|
return '{' + Hash.collect(obj, function(val, key) {
|
|
if (!properties || properties[key]) {
|
|
val = Json.encode(val, properties);
|
|
if (val !== undefined)
|
|
return Json.encode(key) + ':' + val;
|
|
}
|
|
}) + '}';
|
|
// Filter out functions, they are not part of JSON
|
|
case 'function':
|
|
return undefined;
|
|
default:
|
|
return obj + '';
|
|
}
|
|
return null;
|
|
},
|
|
|
|
decode: JSON
|
|
? function(str, secure) {
|
|
try {
|
|
// No need for security checks when using native JSON.
|
|
return JSON.parse(str);
|
|
} catch (e) {
|
|
return null;
|
|
}
|
|
}
|
|
: function(str, secure) {
|
|
try {
|
|
// Make sure the incoming data is actual JSON
|
|
// Logic borrowed from http://json.org/json2.js
|
|
// Make sure leading/trailing whitespace is removed (IE can't handle it)
|
|
return Base.type(str) == 'string' && (str = str.trim()) &&
|
|
(!secure || /^[\],:{}\s]*$/.test(
|
|
str.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, "@")
|
|
.replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, "]")
|
|
.replace(/(?:^|:|,)(?:\s*\[)+/g, "")))
|
|
? (new Function('return ' + str))() : null;
|
|
} catch (e) {
|
|
return null;
|
|
}
|
|
}
|
|
};
|
|
}(this.JSON);
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Browser
|
|
|
|
Browser = new function() {
|
|
var name = window.orientation != undefined ? 'ipod'
|
|
: (navigator.platform.match(/mac|win|linux|nix/i) || ['other'])[0].toLowerCase();
|
|
var fields = {
|
|
PLATFORM: name,
|
|
XPATH: !!document.evaluate,
|
|
QUERY: !!document.querySelector
|
|
};
|
|
// Add platform name directly in uppercase too
|
|
fields[name.toUpperCase()] = true;
|
|
|
|
function getVersion(prefix, min, max) {
|
|
var ver = (new RegExp(prefix + '([\\d.]+)', 'i').exec(navigator.userAgent) || [0, '0'])[1].split('.');
|
|
return (ver.slice(0, min).join('') + '.' + ver.slice(min, max || ver.length).join('')).toFloat();
|
|
}
|
|
|
|
var engines = {
|
|
presto: function() {
|
|
// Opera < v.10 does not report Presto versions, so use Opera versions
|
|
// there instead. As presto starts at 22.15 the range of the value
|
|
// does not clash and we can compare, e.g. Browser.VERSION < 10.
|
|
// Also, Opera 8 reports "...Opera 8...", while 9 reports "...Opera/9..."
|
|
return !window.opera ? false : getVersion('Presto/', 2) || getVersion('Opera[/ ]', 1);
|
|
},
|
|
|
|
trident: function() {
|
|
return !window.ActiveXObject ? false : getVersion('MSIE ', 1);
|
|
},
|
|
|
|
webkit: function() {
|
|
return navigator.taintEnabled ? false : getVersion('WebKit/', 1, 2);
|
|
},
|
|
|
|
gecko: function() {
|
|
return !document.getBoxObjectFor && window.mozInnerScreenX == null ? false : getVersion('rv:', 2);
|
|
}
|
|
};
|
|
|
|
for (var engine in engines) {
|
|
var version = engines[engine]();
|
|
if (version) {
|
|
fields.ENGINE = engine;
|
|
fields.VERSION = version;
|
|
engine = engine.toUpperCase();
|
|
fields[engine] = true;
|
|
fields[(engine + version).replace(/\./g, '')] = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Add console loggin on most browsers as good as we can.
|
|
fields.log = function() {
|
|
// IE does not seem to join with ' ' and has problems with apply
|
|
if (!Browser.TRIDENT && window.console && console.log)
|
|
console.log.apply(console, arguments);
|
|
else
|
|
(window.console && console.log
|
|
|| window.opera && opera.postError
|
|
|| alert)(Array.join(arguments, ' '));
|
|
}
|
|
|
|
return fields;
|
|
};
|
|
|
|
// DomElement
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// DomNodes
|
|
|
|
/**
|
|
* DomNodes extends inject so that each of the functions
|
|
* defined bellow are executed on the whole set of nodes, and the
|
|
* returned values are collected in an array and converted to a DomNodes
|
|
* array again, if it contains only nodes.
|
|
*/
|
|
DomNodes = Array.extend(new function() {
|
|
var unique = 0;
|
|
return {
|
|
initialize: function(nodes) {
|
|
// Define this collections's unique ID. Nodes that are added to it
|
|
// get that field set too, in order to detect multiple additions of
|
|
// nodes in one go. Notice that this does not work when nodes
|
|
// are added to another collection, then again to this one.
|
|
// But for Dom Query functions, this is enough.
|
|
this._unique = unique++;
|
|
// Do not use nodes.push to detect arrays, as we're passing pseudo
|
|
// arrays here too (e.g. childNodes). But the native Option defines
|
|
// .length too, so rule that out by checking nodeType as well.
|
|
this.append(nodes && nodes.length != null && !nodes.nodeType
|
|
? nodes : arguments);
|
|
},
|
|
|
|
/**
|
|
* Only #push wraps the added node in a DomNode. splice and unshift
|
|
* are NOT overridden to do the same.
|
|
*/
|
|
push: function() {
|
|
this.append(arguments);
|
|
return this.length;
|
|
},
|
|
|
|
append: function(items) {
|
|
for (var i = 0, l = items.length; i < l; i++) {
|
|
var el = items[i];
|
|
// Try _wrapper first, for faster performance
|
|
if ((el = el && (el._wrapper || DomNode.wrap(el))) && el._unique != this._unique) {
|
|
el._unique = this._unique;
|
|
this[this.length++] = el;
|
|
}
|
|
}
|
|
return this;
|
|
},
|
|
|
|
toNode: function() {
|
|
// return the DomNodes array itself. See inserters comments further bellow
|
|
return this;
|
|
},
|
|
|
|
statics: {
|
|
inject: function(src/*, ... */) {
|
|
// For each function that is injected into DomNodes, create a
|
|
// new function that iterates that calls the function on each of
|
|
// the collection's nodes.
|
|
// src can either be a function to be called, or a object literal.
|
|
var proto = this.prototype;
|
|
this.base(Base.each(src || {}, function(val, key) {
|
|
if (typeof val == 'function') {
|
|
var func = val, prev = proto[key];
|
|
var count = func.length, prevCount = prev && prev.length;
|
|
val = function() {
|
|
var args = arguments, values;
|
|
// If there was a previous implementation under this name
|
|
// and the arguments match better, use that one instead.
|
|
// The strategy is very basic: If the same amount of arguments
|
|
// are provided as the previous one accepts, or if more arguments
|
|
// are provided than the new function can handle and the previous
|
|
// implementation expects more, use the previous one instead.
|
|
if (prev && args.length == prevCount
|
|
|| (args.length > count && args.length <= prevCount))
|
|
return prev.apply(this, args);
|
|
this.each(function(obj) {
|
|
// Try to use original method if it's there, in order
|
|
// to support base, as this will be the wrapper that
|
|
// sets it
|
|
var ret = (obj[key] || func).apply(obj, args);
|
|
// Only collect return values if defined and not
|
|
// returning 'this'.
|
|
if (ret !== undefined && ret != obj) {
|
|
values = values || (DomNode.isNode(ret)
|
|
? new obj._collection() : []);
|
|
values.push(ret);
|
|
}
|
|
});
|
|
return values || this;
|
|
}
|
|
}
|
|
this[key] = val;
|
|
}, {}));
|
|
for (var i = 1, l = arguments.length; i < l; i++)
|
|
this.inject(arguments[i]);
|
|
return this;
|
|
}
|
|
}
|
|
};
|
|
});
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// DomNode
|
|
|
|
DomNode = Base.extend(new function() {
|
|
var nodes = [];
|
|
// LUTs for tags and class based constructors. Bootstrap can automatically
|
|
// use sub-prototype of DomNode for any given wrapped node based on
|
|
// its className Attribute. The sub-prototype only needs to define _class
|
|
var tags = {}, classes = {}, classCheck, unique = 0;
|
|
|
|
// Garbage collection - uncache nodes/purge listeners on orphaned nodes
|
|
// so we don't hold a reference and cause the browser to retain them.
|
|
function dispose(force) {
|
|
for (var i = nodes.length - 1; i >= 0; i--) {
|
|
var el = nodes[i];
|
|
if (force || (!el || el != window && el != document &&
|
|
(!el.parentNode || !el.offsetParent))) {
|
|
if (el) {
|
|
var obj = el._wrapper;
|
|
if (obj && obj.finalize) obj.finalize();
|
|
el._wrapper = el._unique = null;
|
|
}
|
|
if (!force) nodes.splice(i, 1);
|
|
}
|
|
}
|
|
}
|
|
// TODO: this seems to cause problems. Turn off for now.
|
|
// dispose.periodic(30000);
|
|
|
|
// Private inject function for DomNode. It adds support for
|
|
// _methods and _properties declarations, which forward calls and define
|
|
// getter / setters for fields of the native DOM node.
|
|
function inject(src) {
|
|
// Forward method calls. Returns result if any, otherwise reference
|
|
// to this.
|
|
src = src || {};
|
|
(src._methods || []).each(function(name) {
|
|
src[name] = function(arg) {
|
|
// .apply seems to not be present on native dom functions on
|
|
// Safari. Just pass on the first argument and call directly.
|
|
var ret = this.$[name] && this.$[name](arg);
|
|
return ret === undefined ? this : ret;
|
|
}
|
|
});
|
|
// Define getter / setters
|
|
(src._properties || []).each(function(name) {
|
|
// get/setProperty() expects lowercase property name.
|
|
var part = name.capitalize(), prop = name.toLowerCase();
|
|
src['get' + part] = function() {
|
|
return this.getProperty(prop);
|
|
}
|
|
src['set' + part] = function(value) {
|
|
return this.setProperty(prop, value);
|
|
}
|
|
});
|
|
delete src._methods;
|
|
delete src._properties;
|
|
return Function.inject.call(this, src);
|
|
}
|
|
|
|
function getConstructor(el) {
|
|
// Use DomNode as as the default, HtmlElement for anything with
|
|
// className !== undefined and special constructors based on tag names.
|
|
// tags stores both upper-case and lower-case references for higher
|
|
// speed.
|
|
// classCheck only exists if HtmlElement was extended with prototypes
|
|
// defining _class. In this case, classCheck is a regular expression that
|
|
// checks className for the occurence of any of the prototype mapped
|
|
// classes, and returns the first occurence, which is then used to
|
|
// decide for constructor. This allows using e.g. "window hidden" for
|
|
// an element that should map to a window prototype.
|
|
var match;
|
|
// Check classCheck first, since it can override the _tag setting
|
|
return classCheck && el.className && (match = el.className.match(classCheck)) && match[2] && classes[match[2]] ||
|
|
// Check _tag settings for extended HtmlElement prototypes bound to tagNames, e.g. HtmlForm, etc.
|
|
el.tagName && tags[el.tagName] ||
|
|
// Html elements
|
|
el.className !== undefined && HtmlElement ||
|
|
// Elements
|
|
el.nodeType == 1 && DomElement ||
|
|
// TextNodes
|
|
el.nodeType == 3 && DomTextNode ||
|
|
// Documents
|
|
el.nodeType == 9 && (el.documentElement.nodeName.toLowerCase() == 'html' && HtmlDocument || DomDocument) ||
|
|
// Windows
|
|
el.location && el.frames && el.history && DomWindow ||
|
|
// Everything else
|
|
DomNode;
|
|
}
|
|
|
|
var dont = {};
|
|
|
|
return {
|
|
beans: true,
|
|
// Tells Base.type the type to return when encountering an node.
|
|
_type: 'node',
|
|
_collection: DomNodes,
|
|
// Tell extend to automatically call this.base in overridden initialize
|
|
// methods of DomNodes
|
|
// See extend bellow for more information about this.
|
|
_initialize: true,
|
|
|
|
initialize: function(el, props, doc) {
|
|
if (!el) return null;
|
|
// Support node creating constructors on subclasses of DomNode
|
|
// that define prototype._tag and can take one argument, which
|
|
// defines the properties to be set:
|
|
if (this._tag && Base.type(el) == 'object') {
|
|
props = el;
|
|
el = this._tag;
|
|
}
|
|
// doc is only used when producing an node from a string.
|
|
if (typeof(el) == 'string') {
|
|
// Call the internal element creation helper. This does not fully
|
|
// set props, only the one needed for the IE workaround.
|
|
// Set(props) is called further bellow.
|
|
el = DomElement.create(el, props, doc);
|
|
} else if (el._wrapper) {
|
|
// Does the DomNode wrapper for this node already exist?
|
|
return el._wrapper;
|
|
}
|
|
if (props === dont) {
|
|
props = null;
|
|
} else {
|
|
// Check if we're using the right constructor, if not, construct
|
|
// with the right one:
|
|
var ctor = getConstructor(el);
|
|
if (ctor != this.constructor)
|
|
return new ctor(el, props);
|
|
}
|
|
// Store a reference to the native node.
|
|
this.$ = el;
|
|
// Store a reference in the native node to the wrapper.
|
|
// Needs to be cleaned up by garbage collection. See above.
|
|
// Not all nodes allow setting of values. E.g. on IE, textnodes don't
|
|
// For now we just ingore them and do not store the wrapper.
|
|
try {
|
|
el._wrapper = this;
|
|
nodes[nodes.length] = el;
|
|
} catch (e) {} // Ignore error
|
|
if (props) this.set(props);
|
|
},
|
|
|
|
statics: {
|
|
inject: function(src/*, ... */) {
|
|
if (src) {
|
|
// Produce generic-versions for each of the injected
|
|
// non-static methods, so that they function on native
|
|
// methods instead of wrapped ones. This means
|
|
// DomNode.getProperty(el, name) can be called on non
|
|
// wrapped nodes.
|
|
var proto = this.prototype, that = this;
|
|
src.statics = Base.each(src, function(val, name) {
|
|
if (typeof val == 'function' && !this[name] && !that[name]) {
|
|
// We need to be fast, so assume a maximum of two
|
|
// params instead of using Function#apply.
|
|
this[name] = function(el, param1, param2) {
|
|
if (el) try {
|
|
// Use the ugly but fast trick of setting
|
|
// $ on the prototype and call throught
|
|
// that, then erase again.
|
|
proto.$ = el.$ || el;
|
|
return proto[name](param1, param2);
|
|
} finally {
|
|
delete proto.$;
|
|
}
|
|
}
|
|
}
|
|
}, src.statics || {});
|
|
inject.call(this, src);
|
|
// Remove toString, as we do not want it to be multiplied in
|
|
// _collection (it would not return a string but an array then).
|
|
delete src.toString;
|
|
// Now, after src was processed in #inject, inject not only
|
|
// into this, but also into DomNodes where the functions
|
|
// are "multiplied" for each of the nodes of the collection.
|
|
proto._collection.inject(src);
|
|
}
|
|
for (var i = 1, l = arguments.length; i < l; i++)
|
|
this.inject(arguments[i]);
|
|
return this;
|
|
},
|
|
|
|
extend: function(src) {
|
|
// Do not pass src to base, as we weed to fix #inject first.
|
|
var ret = this.base();
|
|
// If initialize is defined, explicitely calls this.base(el, props)
|
|
// here. This is a specialy DomNode extension that does not
|
|
// require the user to call this.base(), since it is used for _class
|
|
// stuff often.
|
|
var init = src.initialize;
|
|
if (init) src.initialize = function(el, props) {
|
|
var ret = this._initialize && this.base(el, props);
|
|
if (ret) return ret;
|
|
init.apply(this, arguments);
|
|
}
|
|
inject.call(ret, src);
|
|
// Undo overriding of the inject method above for subclasses that
|
|
// do not define a different _collection value, as only injecting
|
|
// into DomNode (not subclasses) shall also inject into DomNodes!
|
|
// Reseting before does not work, as it would be overridden
|
|
// during static inheritance again.
|
|
if (ret.prototype._collection == this.prototype._collection)
|
|
ret.inject = inject;
|
|
// When extending DomNode with a tag name field specified, this
|
|
// prototype will be used when wrapping nodes of that type.
|
|
// If this is a prototype for a certain tag name, store it in the LUT.
|
|
if (src) {
|
|
// tags stores both upper-case and lower-case references
|
|
// for higher speed in getConstructor, since tagName can
|
|
// be used for direct lookup, regardless of its case.
|
|
if (src._tag)
|
|
tags[src._tag.toLowerCase()] = tags[src._tag.toUpperCase()] = ret;
|
|
// classCheck is null until a sub-prototype defines _class
|
|
if (src._class) {
|
|
classes[src._class] = ret;
|
|
// Create a regular expression that allows detection of
|
|
// the first prototype mapped className. This needs to
|
|
// contain all defined classes. See getConstructor
|
|
// e.g.: /(^|\s)(post-it|window)(\s|$)/
|
|
classCheck = new RegExp('(^|\\s)(' + Base.each(classes, function(val, name) {
|
|
this.push(name);
|
|
}, []).join('|') + ')(\\s|$)');
|
|
// If the prototype defines an initialize method, and it
|
|
// does not want to be lazily loaded, force wrapping of
|
|
// these nodes on domready, so that initialize will be
|
|
// directly called and further dom manipulation can be done.
|
|
if (!src._lazy && src.initialize) Browser.document.addEvent('domready', function() {
|
|
this.getElements('.' + src._class);
|
|
});
|
|
}
|
|
}
|
|
return ret;
|
|
},
|
|
|
|
/**
|
|
* Wraps the passed node in a DomNode wrapper.
|
|
* It returns existing wrappers through el._wrapper, if defined.
|
|
*/
|
|
wrap: function(el) {
|
|
return el ? typeof el == 'string' // selector?
|
|
? DomElement.get(el)
|
|
// Make sure we're using the right constructor.
|
|
: el._wrapper || el._collection && el || new (getConstructor(el))(el, dont)
|
|
: null;
|
|
},
|
|
|
|
/**
|
|
* Unwraps a wrapped node and returns its native dom node, or
|
|
* the node itself if it is already native.
|
|
*/
|
|
unwrap: function(el) {
|
|
return el && el.$ || el;
|
|
},
|
|
|
|
unique: function(el) {
|
|
if (!el._unique) {
|
|
nodes.push(el);
|
|
el._unique = ++unique;
|
|
}
|
|
},
|
|
|
|
isNode: function(obj) {
|
|
return /^(element|node|textnode|document)$/.test(
|
|
typeof obj == 'string' ? obj : Base.type(obj));
|
|
},
|
|
|
|
dispose: function() {
|
|
dispose(true);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Use the modified inject function from above which injects both into DomNode
|
|
// and DomNodes.
|
|
DomNode.inject(new function() {
|
|
// Dom / Html to JS property mappings, as used by getProperty, setProperty
|
|
// and removeProperty.
|
|
var bools = ['compact', 'nowrap', 'ismap', 'declare', 'noshade', 'checked',
|
|
'disabled', 'readonly', 'multiple', 'selected', 'noresize', 'defer'
|
|
].associate();
|
|
var properties = Hash.append({ // props
|
|
text: Browser.TRIDENT || Browser.WEBKIT && Browser.VERSION < 420 || Browser.PRESTO && Browser.VERSION < 9
|
|
? function(node) {
|
|
return node.$.innerText !== undefined ? 'innerText' : 'nodeValue'
|
|
} : 'textContent',
|
|
// Make sure that setting both class and className uses this.$.className instead of setAttribute
|
|
html: 'innerHTML', 'class': 'className', className: 'className', 'for': 'htmlFor'
|
|
}, [ // camels and other values that need to be accessed directly, not through getAttribute
|
|
'value', 'accessKey', 'cellPadding', 'cellSpacing', 'colSpan',
|
|
'frameBorder', 'maxLength', 'readOnly', 'rowSpan', 'tabIndex',
|
|
'selectedIndex', 'useMap', 'width', 'height'
|
|
].associate(function(name) {
|
|
return name.toLowerCase();
|
|
}), bools);
|
|
|
|
// Values to manually copy over when cloning with content
|
|
var clones = { input: 'checked', option: 'selected', textarea: Browser.WEBKIT && Browser.VERSION < 420 ? 'innerHTML' : 'value' };
|
|
|
|
// handle() handles both get and set calls for any given property name.
|
|
// prefix is either set or get, and is used for lookup of getter / setter
|
|
// methods. get/setProperty is used as a fallback.
|
|
// See DomElement#get/set
|
|
function handle(that, prefix, name, value) {
|
|
var ctor = that.__proto__.constructor;
|
|
// handle caches getter and setter functions for given property names.
|
|
// Store the handlers in the constructor of each prototype, so caching
|
|
// between different sub-prototypes that might redefine getter/setters
|
|
// does not get mixed up:
|
|
var handlers = ctor.handlers = ctor.handlers || { get: {}, set: {} };
|
|
var list = handlers[prefix];
|
|
// First see if there is a getter / setter for the given property
|
|
var fn = name == 'events' && prefix == 'set' ? that.addEvents : list[name];
|
|
if (fn === undefined)
|
|
fn = list[name] = that[prefix + name.capitalize()] || null;
|
|
// If the passed value is an array, use it as the argument
|
|
// list for the call.
|
|
return fn
|
|
? fn[Base.type(value) == 'array' ? 'apply' : 'call'](that, value)
|
|
: that[prefix + 'Property'](name, value);
|
|
}
|
|
|
|
// A helper for calling toNode and returning results.
|
|
function toNodes(elements) {
|
|
// Support passing things as argument lists, without the first wrapping array
|
|
// Do not reset elements, since this causes a circular reference on Opera
|
|
// where arguments inherits from array and therefore is returned umodified
|
|
// by Array.create, and where setting elements to a new value modifies
|
|
// this arguments list directly.
|
|
var els = Base.type(elements) == 'array' ? elements : Array.create(arguments);
|
|
// Find out if elements are created, or if they were already passed.
|
|
// The convention is to return the newly created elements if they are not
|
|
// elements already, otherwise return this.
|
|
var created = els.find(function(el) {
|
|
return !DomNode.isNode(el);
|
|
});
|
|
// toNode can either return a single DomElement or a DomElements array.
|
|
var result = els.toNode(this.getDocument());
|
|
return {
|
|
// Make sure we always return an array of the resulted elements as well,
|
|
// for simpler handling in inserters below
|
|
array: result ? (Base.type(result) == 'array' ? result : [result]) : [],
|
|
// Result might be a single element or an array, depending on what the
|
|
// user passed. This is to be returned back. Only define it if the elements
|
|
// were created.
|
|
result: created && result
|
|
};
|
|
}
|
|
|
|
var fields = {
|
|
beans: true,
|
|
_properties: ['text'],
|
|
|
|
set: function(name, value) {
|
|
switch (Base.type(name)) {
|
|
case 'string':
|
|
return handle(this, 'set', name, value);
|
|
case 'object':
|
|
return Base.each(name, function(value, key) {
|
|
handle(this, 'set', key, value);
|
|
}, this);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
get: function(name) {
|
|
return handle(this, 'get', name);
|
|
},
|
|
|
|
getDocument: function() {
|
|
return DomNode.wrap(this.$.ownerDocument);
|
|
},
|
|
|
|
getWindow: function() {
|
|
return this.getDocument().getWindow();
|
|
},
|
|
|
|
getPreviousNode: function() {
|
|
return DomNode.wrap(this.$.previousSibling);
|
|
},
|
|
|
|
getNextNode: function() {
|
|
return DomNode.wrap(this.$.nextSibling);
|
|
},
|
|
|
|
getFirstNode: function() {
|
|
return DomNode.wrap(this.$.firstChild);
|
|
},
|
|
|
|
getLastNode: function() {
|
|
return DomNode.wrap(this.$.lastChild);
|
|
},
|
|
|
|
getParentNode: function() {
|
|
return DomNode.wrap(this.$.parentNode);
|
|
},
|
|
|
|
// Returns all the Element's children including text nodes
|
|
getChildNodes: function() {
|
|
return new DomNodes(this.$.childNodes);
|
|
},
|
|
|
|
hasChildNodes: function() {
|
|
return this.$.hasChildNodes();
|
|
},
|
|
|
|
appendChild: function(el) {
|
|
if (el = DomNode.wrap(el)) {
|
|
// Fix a bug on Mac IE when inserting Option elements to Select
|
|
// elements, where the text on these objects is lost after insertion
|
|
// -> inserters.before does the same.
|
|
// This appears to still be needed on IE7.
|
|
var text = Browser.TRIDENT && el.$.text;
|
|
if (text) el.$.text = '';
|
|
this.$.appendChild(el.$);
|
|
if (text) el.$.text = text;
|
|
}
|
|
return this;
|
|
},
|
|
|
|
appendChildren: function() {
|
|
return Array.flatten(arguments).each(function(el) {
|
|
this.appendChild($(DomNode.wrap(el)));
|
|
}, this);
|
|
},
|
|
|
|
appendText: function(text) {
|
|
return this.injectBottom(this.getDocument().createTextNode(text));
|
|
},
|
|
|
|
prependText: function(text) {
|
|
return this.injectTop(this.getDocument().createTextNode(text));
|
|
},
|
|
|
|
remove: function() {
|
|
if (this.$.parentNode)
|
|
this.$.parentNode.removeChild(this.$);
|
|
return this;
|
|
},
|
|
|
|
removeChild: function(el) {
|
|
el = DomNode.wrap(el);
|
|
this.$.removeChild(el.$);
|
|
return el;
|
|
},
|
|
|
|
removeChildren: function() {
|
|
var nodes = this.getChildNodes();
|
|
nodes.remove();
|
|
return nodes;
|
|
},
|
|
|
|
replaceWith: function(el) {
|
|
if (this.$.parentNode) {
|
|
// Use toNodes to support on the fly creation of one or more
|
|
// elements to replace with:
|
|
el = toNodes.apply(this, arguments);
|
|
var els = el.array;
|
|
// Replace the first item of the array and insert all the others
|
|
// afterwards, if there are more than one:
|
|
if (els.length > 0)
|
|
this.$.parentNode.replaceChild(els[0].$, this.$);
|
|
for (var i = els.length - 1; i > 0; i--)
|
|
els[i].insertAfter(els[0]);
|
|
return el.result;
|
|
}
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* Wraps the passed elements around the current one.
|
|
* Elements are converted through toNodes
|
|
*
|
|
* Inspired by: jQuery
|
|
*/
|
|
wrap: function() {
|
|
var el = this.injectBefore.apply(this, arguments), last;
|
|
do {
|
|
last = el;
|
|
el = el.getFirst();
|
|
} while(el);
|
|
last.appendChild(this);
|
|
return last;
|
|
},
|
|
|
|
clone: function(contents) {
|
|
var clone = this.$.cloneNode(!!contents);
|
|
function clean(left, right) {
|
|
if (Browser.TRIDENT) {
|
|
left.clearAttributes();
|
|
left.mergeAttributes(right);
|
|
left.removeAttribute('_wrapper');
|
|
left.removeAttribute('_unique');
|
|
if (left.options)
|
|
for (var l = left.options, r = right.options, i = l.length; i--;)
|
|
l[i].selected = r[i].selected;
|
|
}
|
|
var name = clones[right.tagName.toLowerCase()];
|
|
if (name && right[name])
|
|
left[name] = right[name];
|
|
if (contents)
|
|
for (var l = left.childNodes, r = right.childNodes, i = l.length; i--;)
|
|
clean(l[i], r[i]);
|
|
}
|
|
clean(clone, this.$);
|
|
return DomNode.wrap(clone);
|
|
},
|
|
|
|
hasProperty: function(name) {
|
|
var key = properties[name];
|
|
// Support key branching through functions, as needed by 'text' on IE
|
|
key = key && typeof key == 'function' ? key(this) : key;
|
|
return key ? this.$[key] !== undefined : this.$.hasAttribute(name);
|
|
},
|
|
|
|
getProperty: function(name) {
|
|
var key = properties[name], value;
|
|
// Support key branching through functions, as needed by 'text' on IE
|
|
key = key && typeof key == 'function' ? key(this) : key;
|
|
var value = key ? this.$[key] : this.$.getAttribute(name);
|
|
return bools[name] ? !!value : value;
|
|
},
|
|
|
|
setProperty: function(name, value) {
|
|
var key = properties[name], defined = value !== undefined;
|
|
key = key && typeof key == 'function' ? key(this) : key;
|
|
if (key && bools[name]) value = value || !defined ? true : false;
|
|
else if (!defined) return this.removeProperty(name);
|
|
key ? this.$[key] = value : this.$.setAttribute(name, value);
|
|
return this;
|
|
},
|
|
|
|
removeProperty: function(name) {
|
|
var key = properties[name], bool = key && bools[name];
|
|
key = key && typeof key == 'function' ? key(this) : key;
|
|
key ? this.$[key] = bool ? false : '' : this.$.removeAttribute(name);
|
|
return this;
|
|
},
|
|
|
|
getProperties: function() {
|
|
var props = {};
|
|
for (var i = 0; i < arguments.length; i++)
|
|
props[arguments[i]] = this.getProperty(arguments[i]);
|
|
return props;
|
|
},
|
|
|
|
setProperties: function(src) {
|
|
return Base.each(src, function(value, name) {
|
|
this.setProperty(name, value);
|
|
}, this);
|
|
},
|
|
|
|
removeProperties: function() {
|
|
return Array.each(arguments, this.removeProperty, this);
|
|
}
|
|
};
|
|
|
|
// Inserters are only used internally and can assume the source and dest
|
|
// elements to be wrapped elements.
|
|
var inserters = {
|
|
/**
|
|
* Inserts the source element before the dest element in the DOM.
|
|
*/
|
|
before: function(source, dest) {
|
|
if (source && dest && dest.$.parentNode) {
|
|
// Fix a bug on Mac IE when inserting Option elements to Select
|
|
// elements, where the text on these objects is lost after insertion.
|
|
// -> DomNode#appendChild does the same.
|
|
var text = Browser.TRIDENT && dest.$.text;
|
|
if (text) dest.$.text = '';
|
|
dest.$.parentNode.insertBefore(source.$, dest.$);
|
|
if (text) dest.$.text = text;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Inserts the source element after the dest element in the DOM.
|
|
*/
|
|
after: function(source, dest) {
|
|
if (source && dest && dest.$.parentNode) {
|
|
var next = dest.$.nextSibling;
|
|
// Do not use the native methods since these do not include the
|
|
// workaround for legacy browsers above. Once that part is
|
|
// deprecated, we can change strategy here. Might be bit faster.
|
|
if (next) source.insertBefore(next);
|
|
else dest.getParent().appendChild(source);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Inserts the source element at the bottom of the dest element's children.
|
|
*/
|
|
bottom: function(source, dest) {
|
|
if (source && dest)
|
|
dest.appendChild(source);
|
|
},
|
|
|
|
/**
|
|
* Inserts the source element at the top of the dest element's children.
|
|
*/
|
|
top: function(source, dest) {
|
|
if (source && dest) {
|
|
var first = dest.$.firstChild;
|
|
if (first) source.insertBefore(first);
|
|
else dest.appendChild(source);
|
|
}
|
|
}
|
|
};
|
|
|
|
inserters.inside = inserters.bottom;
|
|
|
|
// Now add the inserters
|
|
// Important: The inseters return this if the object passed is already an
|
|
// element. But if it is a string or an array that is converted to an element,
|
|
// the newly created element is returned instead.
|
|
|
|
Base.each(inserters, function(inserter, name) {
|
|
var part = name.capitalize();
|
|
// #insert* acts like the dom #insert* functions, inserting this element
|
|
// into the passed element(s).
|
|
fields['insert' + part] = function(el) {
|
|
el = toNodes.apply(this, arguments);
|
|
// Clone the object for every index other than the first
|
|
// as we're inserting into multiple times.
|
|
for (var i = 0, list = el.array, l = list.length; i < l; i++)
|
|
inserter(i == 0 ? this : this.clone(true), list[i]);
|
|
return el.result || this;
|
|
}
|
|
|
|
// #inject* does the reverse of #insert*, it injects the passed element(s)
|
|
// into this element.
|
|
fields['inject' + part] = function(el) {
|
|
el = toNodes.apply(this, arguments);
|
|
for (var i = 0, list = el.array, l = list.length; i < l; i++)
|
|
inserter(list[i], this);
|
|
return el.result || this;
|
|
}
|
|
});
|
|
|
|
return fields;
|
|
});
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// DomElements
|
|
|
|
DomElements = DomNodes.extend();
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// DomElement
|
|
|
|
DomElement = DomNode.extend({
|
|
beans: true,
|
|
// Tells Base.type the type to return when encountering an element.
|
|
_type: 'element',
|
|
_collection: DomElements,
|
|
|
|
statics: {
|
|
/**
|
|
* Returns the first element matching the given selector, within root
|
|
* or Browser.document, if root is not specified.
|
|
*/
|
|
get: function(selector, root) {
|
|
// Do not use this for DomElement since $ is a link to DomElement.get
|
|
return (root && DomNode.wrap(root) || Browser.document).getElement(selector);
|
|
},
|
|
|
|
/**
|
|
* Returns all elements matching the given selector, within root
|
|
* or Browser.document, if root is not specified.
|
|
*/
|
|
getAll: function(selector, root) {
|
|
// Do not use this for DomElement since $$ is a link to DomElement.getAll
|
|
return (root && DomNode.wrap(root) || Browser.document).getElements(selector);
|
|
},
|
|
|
|
/**
|
|
* This is only a helper method that's used both in DomDocument and DomElement.
|
|
* It does not fully set props, only the values needed for a IE workaround.
|
|
* It also returns an unwrapped object, that needs to further initalization
|
|
* and setting of props.
|
|
* This is needed to avoid production of two objects to match the proper
|
|
* prototype when using new HtmlElement(name, props).
|
|
*/
|
|
create: function(tag, props, doc) {
|
|
if (Browser.TRIDENT && props) {
|
|
['name', 'type', 'checked'].each(function(key) {
|
|
if (props[key]) {
|
|
tag += ' ' + key + '="' + props[key] + '"';
|
|
if (key != 'checked')
|
|
delete props[key];
|
|
}
|
|
});
|
|
tag = '<' + tag + '>';
|
|
}
|
|
return (DomElement.unwrap(doc) || document).createElement(tag);
|
|
},
|
|
|
|
isAncestor: function(el, parent) {
|
|
// Handle el.ownerDocumet == parent specially for efficiency and
|
|
// also since documents don't define neither contains nor
|
|
// compareDocumentPosition
|
|
return !el ? false : el.ownerDocument == parent ? true
|
|
: Browser.WEBKIT && Browser.VERSION < 420
|
|
? Array.contains(parent.getElementsByTagName(el.tagName), el)
|
|
: parent.contains
|
|
? parent != el && parent.contains(el)
|
|
: !!(parent.compareDocumentPosition(el) & 16)
|
|
}
|
|
}
|
|
});
|
|
|
|
DomElement.inject(new function() {
|
|
// A helper for walking the DOM, skipping text nodes
|
|
function walk(el, walk, start, match, all) {
|
|
var elements = all && new el._collection();
|
|
el = el.$[start || walk];
|
|
while (el) {
|
|
if (el.nodeType == 1 && (!match || DomElement.match(el, match))) {
|
|
if (!all) return DomNode.wrap(el);
|
|
elements.push(el);
|
|
}
|
|
el = el[walk];
|
|
}
|
|
return elements;
|
|
}
|
|
|
|
return {
|
|
beans: true,
|
|
_properties: ['id'],
|
|
|
|
getTag: function() {
|
|
return (this.$.tagName || '').toLowerCase();
|
|
},
|
|
|
|
getPrevious: function(match) {
|
|
return walk(this, 'previousSibling', null, match);
|
|
},
|
|
|
|
getAllPrevious: function(match) {
|
|
return walk(this, 'previousSibling', null, match, true);
|
|
},
|
|
|
|
getNext: function(match) {
|
|
return walk(this, 'nextSibling', null, match);
|
|
},
|
|
|
|
getAllNext: function(match) {
|
|
return walk(this, 'nextSibling', null, match, true);
|
|
},
|
|
|
|
getFirst: function(match) {
|
|
return walk(this, 'nextSibling', 'firstChild', match);
|
|
},
|
|
|
|
getLast: function(match) {
|
|
return walk(this, 'previousSibling', 'lastChild', match);
|
|
},
|
|
|
|
hasChild: function(match) {
|
|
return DomNode.isNode(match)
|
|
? DomElement.isAncestor(DomElement.unwrap(match), this.$)
|
|
: !!this.getFirst(match);
|
|
},
|
|
|
|
getParent: function(match) {
|
|
return walk(this, 'parentNode', null, match);
|
|
},
|
|
|
|
getParents: function(match) {
|
|
return walk(this, 'parentNode', null, match, true);
|
|
},
|
|
|
|
hasParent: function(match) {
|
|
return DomNode.isNode(match)
|
|
? DomElement.isAncestor(this.$, DomElement.unwrap(match))
|
|
: !!this.getParent(match);
|
|
},
|
|
|
|
// Returns all the Element's children excluding text nodes
|
|
getChildren: function(match) {
|
|
return walk(this, 'nextSibling', 'firstChild', match, true);
|
|
},
|
|
|
|
hasChildren: function(match) {
|
|
return !!this.getChildren(match).length;
|
|
},
|
|
|
|
toString: function() {
|
|
return (this.$.tagName || this._type).toLowerCase() +
|
|
(this.$.id ? '#' + this.$.id : '');
|
|
},
|
|
|
|
toNode: function() {
|
|
return this;
|
|
}
|
|
};
|
|
});
|
|
|
|
$ = DomElement.get;
|
|
$$ = DomElement.getAll;
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// DomTextNode
|
|
|
|
DomTextNode = DomNode.extend({
|
|
_type: 'textnode'
|
|
});
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// DomDocument
|
|
|
|
DomDocument = DomElement.extend({
|
|
beans: true,
|
|
_type: 'document',
|
|
|
|
initialize: function() {
|
|
if(Browser.TRIDENT && Browser.VERSION < 7)
|
|
try {
|
|
// Fix background flickering on IE.
|
|
this.$.execCommand('BackgroundImageCache', false, true);
|
|
} catch (e) {}
|
|
},
|
|
|
|
createElement: function(tag, props) {
|
|
// Call DomElement.create, the internal creation helper. This does not
|
|
// fully set props, only the one needed for the IE workaround.
|
|
// set(props) is called after for all the others.
|
|
return DomNode.wrap(DomElement.create(tag, props, this.$)).set(props);
|
|
},
|
|
|
|
createTextNode: function(text) {
|
|
return $(this.$.createTextNode(text));
|
|
},
|
|
|
|
getDocument: function() {
|
|
return this;
|
|
},
|
|
|
|
getWindow: function() {
|
|
return DomNode.wrap(this.$.defaultView || this.$.parentWindow);
|
|
},
|
|
|
|
open: function() {
|
|
this.$.open();
|
|
},
|
|
|
|
close: function() {
|
|
this.$.close();
|
|
},
|
|
|
|
write: function(markup) {
|
|
this.$.write(markup);
|
|
},
|
|
|
|
writeln: function(markup) {
|
|
this.$.writeln(markup);
|
|
}
|
|
});
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// DomWindow
|
|
|
|
// Let Window point to DomWindow for now, so new Window(...) can be called.
|
|
// This makese for nicer code, but might have to change in the future.
|
|
Window = DomWindow = DomElement.extend({
|
|
beans: true,
|
|
_type: 'window',
|
|
// Don't automatically call this.base in overridden initialize methods
|
|
_initialize: false,
|
|
_methods: ['close', 'alert', 'prompt', 'confirm', 'blur', 'focus', 'reload'],
|
|
|
|
getDocument: function() {
|
|
return DomNode.wrap(this.$.document);
|
|
},
|
|
|
|
getWindow: function() {
|
|
return this;
|
|
},
|
|
|
|
// TODO: add get/setStatus, get/setLocation, and find way to deal with
|
|
// referencing of native fields at the end of initialize.
|
|
|
|
/**
|
|
* A constructor for DomWindow that is based on window.open and extends it
|
|
* to allow more options in the third parameter.
|
|
*
|
|
* If param is a string, the standard window.open is executed.
|
|
* If param is an object, additional parameters maybe be defined, such as
|
|
* param.confirm, param.focus, etc. Also, if param.width & height are
|
|
* defined, The window is centered on screen.
|
|
*/
|
|
initialize: function(param) {
|
|
var win;
|
|
// Are we wrapping a window?
|
|
if (param.location && param.frames && param.history) {
|
|
// Do not return yet as we need to add some properties further down
|
|
win = this.base(param) || this;
|
|
} else {
|
|
// If param a string, convert to param object, using its value for url.
|
|
if (typeof param == 'string')
|
|
param = { url: param };
|
|
// Convert boolean values to 0 / 1:
|
|
(['toolbar','menubar','location','status','resizable','scrollbars']).each(function(key) {
|
|
param[key] = param[key] ? 1 : 0;
|
|
});
|
|
// Center window if left / top is not defined, but dimensions are:
|
|
if (param.width && param.height) {
|
|
if (param.left == null) param.left = Math.round(
|
|
Math.max(0, (screen.width - param.width) / 2));
|
|
if (param.top == null) param.top = Math.round(
|
|
Math.max(0, (screen.height - param.height) / 2 - 40));
|
|
}
|
|
// Now convert paramets to string.
|
|
var str = Base.each(param, function(val, key) {
|
|
// Filter out non-standard param names and convert boolean values to 0 / 1 simply by adding 0 to it
|
|
if (!/^(focus|confirm|url|name)$/.test(key))
|
|
this.push(key + '=' + (val + 0));
|
|
}, []).join();
|
|
win = this.base(window.open(param.url, param.name.replace(/\s+|\.+|-+/gi, ''), str)) || this;
|
|
if (win && param.focus)
|
|
win.focus();
|
|
}
|
|
// Copy over default windows properties before returning
|
|
return ['location', 'frames', 'history'].each(function(key) {
|
|
this[key] = this.$[key];
|
|
}, win);
|
|
}
|
|
});
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Dimension
|
|
|
|
// TODO: Consider splitting this into Position and Dimension, or naming it
|
|
// Measure instead
|
|
DomElement.inject(new function() {
|
|
function cumulate(name, parent, iter) {
|
|
var left = name + 'Left', top = name + 'Top';
|
|
return function(that) {
|
|
var cur, next = that, x = 0, y = 0;
|
|
do {
|
|
cur = next;
|
|
x += cur.$[left] || 0;
|
|
y += cur.$[top] || 0;
|
|
} while((next = DomNode.wrap(cur.$[parent])) && (!iter || iter(cur, next)))
|
|
return { x: x, y: y };
|
|
}
|
|
}
|
|
|
|
function bounds(fields, offset) {
|
|
// Pass one of these:
|
|
// (left, top, width, height, clip)
|
|
// ([left, top, width, height, clip])
|
|
// ({ left: , top: , width: , height: , clip: })
|
|
// Do not set bounds, as arguments would then be modified, which we're
|
|
// referencing here:
|
|
return function(values) {
|
|
var vals = /^(object|array)$/.test(Base.type(values)) ? values : arguments;
|
|
if (offset) {
|
|
if (vals.x) vals.left = vals.x;
|
|
if (vals.y) vals.top = vals.y;
|
|
}
|
|
var i = 0;
|
|
return fields.each(function(name) {
|
|
var val = vals.length ? vals[i++] : vals[name];
|
|
if (val != null) this.setStyle(name, val);
|
|
}, this);
|
|
}
|
|
}
|
|
|
|
function body(that) {
|
|
return that.getTag() == 'body';
|
|
}
|
|
|
|
var getAbsolute = cumulate('offset', 'offsetParent', Browser.WEBKIT ? function(cur, next) {
|
|
// Safari returns margins on body which is incorrect if the
|
|
// child is absolutely positioned.
|
|
return next.$ != document.body || cur.getStyle('position') != 'absolute';
|
|
} : null, true);
|
|
|
|
var getPositioned = cumulate('offset', 'offsetParent', function(cur, next) {
|
|
return next.$ != document.body && !/^(relative|absolute)$/.test(next.getStyle('position'));
|
|
});
|
|
|
|
var getScrollOffset = cumulate('scroll', 'parentNode');
|
|
|
|
var fields = {
|
|
beans: true,
|
|
|
|
getSize: function() {
|
|
return body(this)
|
|
? this.getWindow().getSize()
|
|
: { width: this.$.offsetWidth, height: this.$.offsetHeight };
|
|
},
|
|
|
|
/**
|
|
* relative can either be a boolean value, indicating positioned (true)
|
|
* or absolute (false) offsets, or it can be an element in relation to
|
|
* which the offset is returned.
|
|
*/
|
|
getOffset: function(relative) {
|
|
if (body(this))
|
|
return this.getWindow().getOffset();
|
|
if (relative && !DomNode.isNode(relative))
|
|
return getPositioned(this);
|
|
var off = getAbsolute(this);
|
|
if (relative) {
|
|
var rel = getAbsolute(DomNode.wrap(relative));
|
|
off = { x: off.x - rel.x, y: off.y - rel.y };
|
|
}
|
|
return off;
|
|
},
|
|
|
|
getScrollOffset: function() {
|
|
return body(this)
|
|
? this.getWindow().getScrollOffset()
|
|
: getScrollOffset(this);
|
|
},
|
|
|
|
getScrollSize: function() {
|
|
return body(this)
|
|
? this.getWindow().getScrollSize()
|
|
: { width: this.$.scrollWidth, height: this.$.scrollHeight };
|
|
},
|
|
|
|
getBounds: function(relative) {
|
|
if (body(this))
|
|
return this.getWindow().getBounds();
|
|
var off = this.getOffset(relative), el = this.$;
|
|
return {
|
|
left: off.x,
|
|
top: off.y,
|
|
right: off.x + el.offsetWidth,
|
|
bottom: off.y + el.offsetHeight,
|
|
width: el.offsetWidth,
|
|
height: el.offsetHeight
|
|
};
|
|
},
|
|
|
|
setBounds: bounds(['left', 'top', 'width', 'height', 'clip'], true),
|
|
|
|
setOffset: bounds(['left', 'top'], true),
|
|
|
|
setSize: bounds(['width', 'height', 'clip']),
|
|
|
|
setScrollOffset: function(x, y) {
|
|
if (body(this)) {
|
|
this.getWindow().setScrollOffset(x, y);
|
|
} else {
|
|
// Convert { x: y: } to x / y
|
|
var off = typeof x == 'object' ? x : { x: x, y: y };
|
|
this.$.scrollLeft = off.x;
|
|
this.$.scrollTop = off.y;
|
|
}
|
|
return this;
|
|
},
|
|
|
|
scrollTo: function(x, y) {
|
|
// Redirect to setScrollOffset, wich is there for symetry with getScrolloffset
|
|
// Do not simply point to the same function, since setScrollOffset is overridden
|
|
// for DomDocument and DomWindow.
|
|
return this.setScrollOffset(x, y);
|
|
},
|
|
|
|
contains: function(pos) {
|
|
var bounds = this.getBounds();
|
|
return pos.x >= bounds.left && pos.x < bounds.right &&
|
|
pos.y >= bounds.top && pos.y < bounds.bottom;
|
|
},
|
|
|
|
/**
|
|
* Tests wether element is within the window bounds and thus visible.
|
|
* Also returns false if display style is set to none.
|
|
* @fully specifies wether to test for full or partial visibility.
|
|
*/
|
|
isVisible: function(fully) {
|
|
var win = this.getWindow(), top = win.getScrollOffset().y,
|
|
bottom = top + win.getSize().height, bounds = this.getBounds();
|
|
return (bounds.height > 0 || bounds.width > 0) // visible
|
|
&& (bounds.top >= top && bounds.bottom <= bottom // fully
|
|
|| (fully && bounds.top <= top && bounds.bottom >= bottom) // fully & bigger than screen
|
|
|| !fully && (bounds.top <= top && bounds.bottom >= top // partly top
|
|
|| bounds.top <= bottom && bounds.bottom >= bottom)); // partly bottom
|
|
}
|
|
};
|
|
|
|
// Dimension getters and setters:
|
|
['left', 'top', 'right', 'bottom', 'width', 'height'].each(function(name) {
|
|
var part = name.capitalize();
|
|
fields['get' + part] = function() {
|
|
return this.$['offset' + part];
|
|
};
|
|
fields['set' + part] = function(value) {
|
|
// Check for isNaN since it might be values like 'auto' too:
|
|
this.$.style[name] = isNaN(value) ? value : value + 'px';
|
|
};
|
|
});
|
|
|
|
return fields;
|
|
});
|
|
|
|
// Inject dimension methods into both DomDocument and Window.
|
|
// Use the bind object in each to do so:
|
|
[DomDocument, DomWindow].each(function(ctor) {
|
|
ctor.inject(this);
|
|
}, {
|
|
beans: true,
|
|
|
|
getSize: function() {
|
|
if (Browser.PRESTO || Browser.WEBKIT) {
|
|
var win = this.getWindow().$;
|
|
return { width: win.innerWidth, height: win.innerHeight };
|
|
}
|
|
var doc = this.getCompatElement();
|
|
return { width: doc.clientWidth, height: doc.clientHeight };
|
|
},
|
|
|
|
getScrollOffset: function() {
|
|
var win = this.getWindow().$, doc = this.getCompatElement();
|
|
return { x: win.pageXOffset || doc.scrollLeft, y: win.pageYOffset || doc.scrollTop };
|
|
},
|
|
|
|
getScrollSize: function() {
|
|
var doc = this.getCompatElement(), min = this.getSize();
|
|
return { width: Math.max(doc.scrollWidth, min.width), height: Math.max(doc.scrollHeight, min.height) };
|
|
},
|
|
|
|
getOffset: function() {
|
|
return { x: 0, y: 0 };
|
|
},
|
|
|
|
getBounds: function() {
|
|
var size = this.getSize();
|
|
return {
|
|
left: 0, top: 0,
|
|
right: size.width, bottom: size.height,
|
|
width: size.width, height: size.height
|
|
};
|
|
},
|
|
|
|
setScrollOffset: function(x, y) {
|
|
// Convert { x: y: } to x / y
|
|
var off = typeof x == 'object' ? x : { x: x, y: y };
|
|
this.getWindow().$.scrollTo(off.x, off.y);
|
|
return this;
|
|
},
|
|
|
|
getElementAt: function(pos, exclude) {
|
|
var el = this.getDocument().getElement('body');
|
|
while (true) {
|
|
var max = -1;
|
|
var ch = el.getFirst();
|
|
while (ch) {
|
|
if (ch.contains(pos) && ch != exclude) {
|
|
var z = ch.$.style.zIndex.toInt() || 0;
|
|
if (z >= max) {
|
|
el = ch;
|
|
max = z;
|
|
}
|
|
}
|
|
ch = ch.getNext();
|
|
}
|
|
if (max < 0) break;
|
|
}
|
|
return el;
|
|
},
|
|
|
|
getCompatElement: function() {
|
|
var doc = this.getDocument();
|
|
return doc.getElement(!doc.$.compatMode
|
|
|| doc.$.compatMode == 'CSS1Compat' ? 'html' : 'body').$;
|
|
}
|
|
});
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// DomEvent
|
|
|
|
// Name it DomEvent instead of Event, as Event is a native prototype.
|
|
DomEvent = Base.extend(new function() {
|
|
// MACIE does not accept numbers for keys, so use strings:
|
|
var keys = {
|
|
'8': 'backspace',
|
|
'13': 'enter',
|
|
'27': 'escape',
|
|
'32': 'space',
|
|
'37': 'left',
|
|
'38': 'up',
|
|
'39': 'right',
|
|
'40': 'down',
|
|
'46': 'delete'
|
|
};
|
|
|
|
function hover(name, type) {
|
|
return {
|
|
type: type,
|
|
listener: function(event) {
|
|
if (event.relatedTarget != this && !this.hasChild(event.relatedTarget))
|
|
this.fireEvent(name, [event]);
|
|
}
|
|
}
|
|
}
|
|
|
|
return {
|
|
initialize: function(event) {
|
|
this.event = event = event || window.event;
|
|
this.type = event.type;
|
|
this.target = DomNode.wrap(event.target || event.srcElement);
|
|
if (this.target && this.target.$.nodeType == 3)
|
|
this.target = this.target.getParentNode(); // Safari
|
|
this.shift = event.shiftKey;
|
|
this.control = event.ctrlKey;
|
|
this.alt = event.altKey;
|
|
this.meta = event.metaKey;
|
|
if (/^(mousewheel|DOMMouseScroll)$/.test(this.type)) {
|
|
this.wheel = event.wheelDelta ?
|
|
event.wheelDelta / (window.opera ? -120 : 120) :
|
|
- (event.detail || 0) / 3;
|
|
} else if (/^key/.test(this.type)) {
|
|
this.code = event.which || event.keyCode;
|
|
this.key = keys[this.code] || String.fromCharCode(this.code).toLowerCase();
|
|
} else if (/^mouse|^click$/.test(this.type)) {
|
|
this.page = {
|
|
x: event.pageX || event.clientX + document.documentElement.scrollLeft,
|
|
y: event.pageY || event.clientY + document.documentElement.scrollTop
|
|
};
|
|
this.client = {
|
|
x: event.pageX ? event.pageX - window.pageXOffset : event.clientX,
|
|
y: event.pageY ? event.pageY - window.pageYOffset : event.clientY
|
|
};
|
|
// TODO: Calculate only if Dimension.js is defined! Add conditional macro?
|
|
var offset = this.target.getOffset();
|
|
this.offset = {
|
|
x: this.page.x - offset.x,
|
|
y: this.page.y - offset.y
|
|
}
|
|
this.rightClick = event.which == 3 || event.button == 2;
|
|
if (/^mouse(over|out)$/.test(this.type))
|
|
this.relatedTarget = DomNode.wrap(event.relatedTarget ||
|
|
this.type == 'mouseout' ? event.toElement : event.fromElement);
|
|
}
|
|
},
|
|
|
|
stop: function() {
|
|
this.stopPropagation();
|
|
this.preventDefault();
|
|
return this;
|
|
},
|
|
|
|
stopPropagation: function() {
|
|
if (this.event.stopPropagation) this.event.stopPropagation();
|
|
else this.event.cancelBubble = true;
|
|
// Needed for dragging
|
|
this.stopped = true;
|
|
return this;
|
|
},
|
|
|
|
preventDefault: function() {
|
|
if (this.event.preventDefault) this.event.preventDefault();
|
|
else this.event.returnValue = false;
|
|
return this;
|
|
},
|
|
|
|
statics: {
|
|
events: new Hash({
|
|
mouseenter: hover('mouseenter', 'mouseover'),
|
|
|
|
mouseleave: hover('mouseleave', 'mouseout'),
|
|
|
|
mousewheel: { type: Browser.GECKO ? 'DOMMouseScroll' : 'mousewheel' },
|
|
|
|
domready: function(func) {
|
|
var win = this.getWindow(), doc = this.getDocument();
|
|
if (Browser.loaded) {
|
|
func.call(this);
|
|
} else if (!doc.onDomReady) {
|
|
// Only install it once, since fireEvent calls all the
|
|
// handlers.
|
|
doc.onDomReady = function() {
|
|
if (!Browser.loaded) {
|
|
Browser.loaded = true;
|
|
doc.fireEvent('domready');
|
|
win.fireEvent('domready');
|
|
}
|
|
}
|
|
if (Browser.TRIDENT) {
|
|
// From: http://www.hedgerwow.com/360/dhtml/ie-dom-ondocumentready.html
|
|
var temp = doc.createElement('div');
|
|
// Do not call immediatelly. Call it right after the event handler
|
|
// is actually installed, through delay 0.
|
|
(function() {
|
|
try {
|
|
// This throws an error when the dom is not ready, except for framesets,
|
|
// where the second line is needed and will throw an error when not ready.
|
|
temp.$.doScroll('left');
|
|
temp.insertBottom(DomElement.get('body')).setHtml('temp').remove();
|
|
doc.onDomReady();
|
|
} catch (e) {
|
|
arguments.callee.delay(50);
|
|
}
|
|
}).delay(0);
|
|
} else if (Browser.WEBKIT && Browser.VERSION < 525) {
|
|
(function() {
|
|
/^(loaded|complete)$/.test(doc.$.readyState)
|
|
? doc.onDomReady() : arguments.callee.delay(50);
|
|
})();
|
|
} else {
|
|
win.addEvent('load', doc.onDomReady);
|
|
doc.addEvent('DOMContentLoaded', doc.onDomReady);
|
|
}
|
|
}
|
|
}
|
|
}),
|
|
|
|
add: function(events) {
|
|
this.events.append(events);
|
|
}
|
|
}
|
|
};
|
|
});
|
|
|
|
DomElement.inject(new function() {
|
|
// Function that fires / triggers an event. The difference is taht
|
|
// to trigger fake events, one need to call the 'bound' object, whereas
|
|
// to fire the response, one calls 'func'. Bootstrap supports calling both
|
|
// and callEvent produces the closure for each case.
|
|
// In most cases, this calls the same function, but e.g. to initiate
|
|
// a dragstart, we need to trigger it.
|
|
function callEvent(fire) {
|
|
return function(type, args, delay) {
|
|
var entries = (this.events || {})[type];
|
|
if (entries) {
|
|
// Make sure we pass already wrapped events through
|
|
var event = args && args[0];
|
|
if (event)
|
|
args[0] = event.event ? event : new DomEvent(event);
|
|
entries.each(function(entry) {
|
|
entry[fire ? 'func' : 'bound'].delay(delay, this, args);
|
|
}, this);
|
|
}
|
|
// Return true if event was fired, false otherwise
|
|
return !!entries;
|
|
}
|
|
}
|
|
|
|
return {
|
|
addEvent: function(type, func) {
|
|
this.events = this.events || {};
|
|
var entries = this.events[type] = this.events[type] || [];
|
|
if (func && !entries.find(function(entry) { return entry.func == func })) {
|
|
// See if we have a pseudo event here.
|
|
var listener = func, name = type, pseudo = DomEvent.events[type];
|
|
if (pseudo) {
|
|
if (typeof pseudo == 'function') pseudo = pseudo.call(this, func);
|
|
listener = pseudo && pseudo.listener || listener;
|
|
// name should contain the name of the native handler that should
|
|
// be remove in removeEvent. It's ok for this to be empty.
|
|
name = pseudo && pseudo.type;
|
|
}
|
|
// Wrap the event handler in another function that checks if an event
|
|
// object was passed or globally set. The DomEvent contstructor
|
|
// handles window.event as well.
|
|
var that = this, bound = function(event) {
|
|
if (event || window.event)
|
|
event = event && event.event ? event : new DomEvent(event);
|
|
if (listener.call(that, event) === false && event)
|
|
event.stop();
|
|
};
|
|
if (name) {
|
|
if (this.$.addEventListener) {
|
|
this.$.addEventListener(name, bound, false);
|
|
} else if (this.$.attachEvent) {
|
|
this.$.attachEvent('on' + name, bound);
|
|
}
|
|
}
|
|
// Func is the one to be called through fireEvent. see dragstart
|
|
// Also store a refrence to name here, as this might have changed too.
|
|
entries.push({ func: func, name: name, bound: bound });
|
|
}
|
|
return this;
|
|
},
|
|
|
|
removeEvent: function(type, func) {
|
|
var entries = (this.events || {})[type], entry;
|
|
if (func && entries) {
|
|
if (entry = entries.remove(function(entry) { return entry.func == func })) {
|
|
var name = entry.name, pseudo = DomEvent.events[type];
|
|
if (pseudo && pseudo.remove) pseudo.remove.call(this, func);
|
|
if (name) {
|
|
if (this.$.removeEventListener) {
|
|
this.$.removeEventListener(name, entry.bound, false);
|
|
} else if (this.$.detachEvent) {
|
|
this.$.detachEvent('on' + name, entry.bound);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return this;
|
|
},
|
|
|
|
addEvents: function(events) {
|
|
return Base.each(events || [], function(fn, type) {
|
|
this.addEvent(type, fn);
|
|
}, this);
|
|
},
|
|
|
|
removeEvents: function(type) {
|
|
if (this.events) {
|
|
if (type) {
|
|
(this.events[type] || []).each(function(fn) {
|
|
this.removeEvent(type, fn);
|
|
}, this);
|
|
delete this.events[type];
|
|
} else {
|
|
Base.each(this.events, function(ev, type) {
|
|
this.removeEvents(type);
|
|
}, this);
|
|
this.events = null;
|
|
}
|
|
}
|
|
return this;
|
|
},
|
|
|
|
fireEvent: callEvent(true),
|
|
|
|
triggerEvent: callEvent(false),
|
|
|
|
finalize: function() {
|
|
this.removeEvents();
|
|
}
|
|
};
|
|
});
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Drag
|
|
|
|
// Fake dragstart, drag and dragend events, all in a self contained inject scope.
|
|
|
|
DomEvent.add(new function() {
|
|
var object, last;
|
|
|
|
function dragStart(event) {
|
|
if (object != this) {
|
|
event.type = 'dragstart';
|
|
last = event.page;
|
|
this.fireEvent('dragstart', [event]);
|
|
// dragstart might stop the event, check here
|
|
if (!event.stopped) {
|
|
event.stop();
|
|
var doc = this.getDocument();
|
|
doc.addEvent('mousemove', drag);
|
|
doc.addEvent('mouseup', dragEnd);
|
|
object = this;
|
|
}
|
|
}
|
|
}
|
|
|
|
function drag(event) {
|
|
event.type = 'drag';
|
|
event.delta = {
|
|
x: event.page.x - last.x,
|
|
y: event.page.y - last.y
|
|
}
|
|
last = event.page;
|
|
object.fireEvent('drag', [event]);
|
|
event.preventDefault();
|
|
}
|
|
|
|
function dragEnd(event) {
|
|
if (object) {
|
|
event.type = 'dragend';
|
|
object.fireEvent('dragend', [event]);
|
|
event.preventDefault();
|
|
var doc = object.getDocument();
|
|
doc.removeEvent('mousemove', drag);
|
|
doc.removeEvent('mouseup', dragEnd);
|
|
object = null;
|
|
}
|
|
}
|
|
|
|
return {
|
|
dragstart: {
|
|
type: 'mousedown',
|
|
listener: dragStart
|
|
},
|
|
|
|
drag: {
|
|
type: 'mousedown',
|
|
listener: dragStart
|
|
},
|
|
|
|
dragend: {}
|
|
};
|
|
});
|
|
|
|
// Dom Selectors
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Selectors
|
|
|
|
DomElement.inject(new function() {
|
|
// Method indices:
|
|
var XPATH= 0, FILTER = 1;
|
|
|
|
var methods = [{ // XPATH
|
|
getParam: function(items, separator, context, params) {
|
|
var str = context.namespaceURI ? 'xhtml:' + params.tag : params.tag;
|
|
if (separator && (separator = DomElement.separators[separator]))
|
|
str = separator[XPATH] + str;
|
|
for (var i = params.pseudos.length; i--;) {
|
|
var pseudo = params.pseudos[i];
|
|
str += pseudo.handler[XPATH](pseudo.argument);
|
|
}
|
|
if (params.id) str += '[@id="' + params.id + '"]';
|
|
for (var i = params.classes.length; i--;)
|
|
str += '[contains(concat(" ", @class, " "), " ' + params.classes[i] + ' ")]';
|
|
for (var i = params.attributes.length; i--;) {
|
|
var attribute = params.attributes[i];
|
|
var operator = DomElement.operators[attribute[1]];
|
|
if (operator) str += operator[XPATH](attribute[0], attribute[2]);
|
|
else str += '[@' + attribute[0] + ']';
|
|
}
|
|
items.push(str);
|
|
return items;
|
|
},
|
|
|
|
getElements: function(items, elements, context) {
|
|
function resolver(prefix) {
|
|
return prefix == 'xhtml' ? 'http://www.w3.org/1999/xhtml' : false;
|
|
}
|
|
var res = (context.ownerDocument || context).evaluate('.//' + items.join(''), context,
|
|
resolver, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
|
|
for (var i = 0, l = res.snapshotLength; i < l; i++)
|
|
elements.push(res.snapshotItem(i));
|
|
}
|
|
}, { // FILTER
|
|
getParam: function(items, separator, context, params, data) {
|
|
var found = [];
|
|
var tag = params.tag;
|
|
if (separator && (separator = DomElement.separators[separator])) {
|
|
separator = separator[FILTER];
|
|
var uniques = {};
|
|
function add(item) {
|
|
if (!item._unique)
|
|
DomNode.unique(item);
|
|
if (!uniques[item._unique] && match(item, params, data)) {
|
|
uniques[item._unique] = true;
|
|
found.push(item);
|
|
return true;
|
|
}
|
|
}
|
|
for (var i = 0, l = items.length; i < l; i++)
|
|
separator(items[i], params, add);
|
|
if (params.clearTag)
|
|
params.tag = params.clearTag = null;
|
|
return found;
|
|
}
|
|
if (params.id) {
|
|
// First try getElementById. If that does not return the right
|
|
// object, retrieve tags first and then filter by id.
|
|
var el = (context.ownerDocument || context).getElementById(params.id);
|
|
// Clear as it is already filtered by getElementById
|
|
params.id = null;
|
|
return el && DomElement.isAncestor(el, context)
|
|
&& match(el, params, data) ? [el] : null;
|
|
} else {
|
|
if (!items.length) {
|
|
items = context.getElementsByTagName(tag);
|
|
// Clear as it is already filtered by getElementsByTagName
|
|
params.tag = null;
|
|
}
|
|
for (var i = 0, l = items.length; i < l; i++)
|
|
if (match(items[i], params, data))
|
|
found.push(items[i]);
|
|
}
|
|
return found;
|
|
},
|
|
|
|
getElements: function(items, elements, context) {
|
|
elements.append(items);
|
|
}
|
|
}];
|
|
|
|
function parse(selector) {
|
|
var params = { tag: '*', id: null, classes: [], attributes: [], pseudos: [] };
|
|
selector.replace(/:([^:(]+)*(?:\((["']?)(.*?)\2\))?|\[([\w-]+)(?:([!*^$~|]?=)(["']?)(.*?)\6)?\]|\.[\w-]+|#[\w-]+|\w+|\*/g, function(part) {
|
|
switch (part.charAt(0)) {
|
|
case '.': params.classes.push(part.slice(1)); break;
|
|
case '#': params.id = part.slice(1); break;
|
|
case '[': params.attributes.push([arguments[4], arguments[5], arguments[7]]); break;
|
|
case ':':
|
|
var handler = DomElement.pseudos[arguments[1]];
|
|
if (!handler) {
|
|
params.attributes.push([arguments[1], arguments[3] ? '=' : '', arguments[3]]);
|
|
break;
|
|
}
|
|
params.pseudos.push({
|
|
name: arguments[1],
|
|
argument: handler && handler.parser
|
|
? (handler.parser.apply ? handler.parser(arguments[3]) : handler.parser)
|
|
: arguments[3],
|
|
handler: handler.handler || handler
|
|
});
|
|
break;
|
|
default: params.tag = part;
|
|
}
|
|
return '';
|
|
});
|
|
return params;
|
|
}
|
|
|
|
function match(el, params, data) {
|
|
if (params.id && params.id != el.id)
|
|
return false;
|
|
|
|
if (params.tag && params.tag != '*' && params.tag != (el.tagName || '').toLowerCase())
|
|
return false;
|
|
|
|
for (var i = params.classes.length; i--;)
|
|
if (!el.className || !el.className.contains(params.classes[i], ' '))
|
|
return false;
|
|
|
|
var proto = DomElement.prototype;
|
|
for (var i = params.attributes.length; i--;) {
|
|
var attribute = params.attributes[i];
|
|
// Use a hack to call DomElement.prototype.getProperty on
|
|
// unwrapped elements very quickly: Set $ on
|
|
// DomElement.prototype, then call getProperty on it.
|
|
// This is much faster than the DomElement.getProperty generic.
|
|
proto.$ = el; // Point to the native elment for the call
|
|
var val = proto.getProperty(attribute[0]);
|
|
if (!val) return false;
|
|
var operator = DomElement.operators[attribute[1]];
|
|
operator = operator && operator[FILTER];
|
|
if (operator && (!val || !operator(val, attribute[2])))
|
|
return false;
|
|
}
|
|
|
|
for (var i = params.pseudos.length; i--;) {
|
|
var pseudo = params.pseudos[i];
|
|
if (!pseudo.handler[FILTER](el, pseudo.argument, data))
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
function filter(items, selector, context, elements, data) {
|
|
// XPATH does not properly match selected attributes in option elements
|
|
// Force filter code when the selectors contain "option["
|
|
// Also, use FILTER when filtering a previously filled list of items,
|
|
// as used by getParents()
|
|
var method = methods[!Browser.XPATH || items.length ||
|
|
typeof selector == 'string' && selector.contains('option[')
|
|
? FILTER : XPATH];
|
|
var separators = [];
|
|
selector = selector.trim().replace(/\s*([+>~\s])[a-zA-Z#.*\s]/g, function(match) {
|
|
if (match.charAt(2)) match = match.trim();
|
|
separators.push(match.charAt(0));
|
|
return ':)' + match.charAt(1);
|
|
}).split(':)');
|
|
for (var i = 0, l = selector.length; i < l; i++) {
|
|
var params = parse(selector[i]);
|
|
if (!params) return elements; // TODO: correct?
|
|
var next = method.getParam(items, separators[i - 1], context, params, data);
|
|
if (!next) break;
|
|
items = next;
|
|
}
|
|
method.getElements(items, elements, context);
|
|
return elements;
|
|
}
|
|
|
|
return {
|
|
beans: true,
|
|
|
|
getElements: function(selectors, nowrap) {
|
|
var elements = nowrap ? [] : new this._collection();
|
|
selectors = !selectors ? ['*'] : typeof selectors == 'string'
|
|
? selectors.split(',')
|
|
: selectors.length != null ? selectors : [selectors];
|
|
for (var i = 0, l = selectors.length; i < l; i++) {
|
|
var selector = selectors[i];
|
|
if (Base.type(selector) == 'element') elements.push(selector);
|
|
else filter([], selector, this.$, elements, {});
|
|
}
|
|
return elements;
|
|
},
|
|
|
|
getElement: function(selector) {
|
|
var el, type = Base.type(selector), match;
|
|
// Try fetching by id first, if no success, assume a real selector.
|
|
// Note that '#' is not needed, a string that could be an id (a-zA-Z_-)
|
|
// is enough for trying getElementById first.
|
|
// So $() can also work like Mootools' $()
|
|
if (type == 'window') {
|
|
el = selector;
|
|
} else {
|
|
if (type == 'string' && (match = selector.match(/^#?([\w-]+)$/)))
|
|
el = this.getDocument().$.getElementById(match[1]);
|
|
// TODO!
|
|
else if (DomNode.isNode(type))
|
|
el = DomElement.unwrap(selector);
|
|
// If el was fetched by id above, but is not a child of this or is this,
|
|
// use the real selector.
|
|
if (el && el != this.$ && !DomElement.isAncestor(el, this.$))
|
|
el = null;
|
|
// TODO: Is there a way to only fetch the first in getElements,
|
|
// with an optional third parameter?
|
|
if (!el)
|
|
el = this.getElements(selector, true)[0];
|
|
}
|
|
return DomNode.wrap(el);
|
|
},
|
|
|
|
hasElement: function(selector) {
|
|
return !!this.getElement(selector);
|
|
},
|
|
|
|
match: function(selector) {
|
|
return !selector || match(this.$, parse(selector), {});
|
|
},
|
|
|
|
filter: function(elements, selector) {
|
|
return filter(elements, selector, this.$, new this._collection(), {});
|
|
},
|
|
|
|
statics: {
|
|
match: function(el, selector) {
|
|
return !selector || match(DomElement.unwrap(el), parse(selector), {});
|
|
}
|
|
}
|
|
};
|
|
});
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Separators
|
|
|
|
DomElement.separators = {
|
|
'~': [
|
|
// XPATH
|
|
'/following-sibling::',
|
|
// FILTER
|
|
function(item, params, add) {
|
|
while (item = item.nextSibling)
|
|
if (item.nodeType == 1 && add(item))
|
|
break;
|
|
}
|
|
],
|
|
|
|
'+': [
|
|
// XPATH
|
|
'/following-sibling::*[1]/self::',
|
|
// FILTER
|
|
function(item, params, add) {
|
|
while (item = item.nextSibling) {
|
|
if (item.nodeType == 1) {
|
|
add(item);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
],
|
|
|
|
'>': [
|
|
// XPATH
|
|
'/',
|
|
// FILTER
|
|
function(item, params, add) {
|
|
var children = item.childNodes;
|
|
for (var i = 0, l = children.length; i < l; i++)
|
|
if (children[i].nodeType == 1)
|
|
add(children[i]);
|
|
}
|
|
],
|
|
|
|
' ': [
|
|
// XPATH
|
|
'//',
|
|
// FILTER
|
|
function(item, params, add) {
|
|
var children = item.getElementsByTagName(params.tag);
|
|
params.clearTag = true;
|
|
for (var i = 0, l = children.length; i < l; i++)
|
|
add(children[i]);
|
|
}
|
|
]
|
|
};
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Operators
|
|
|
|
DomElement.operators = new function() {
|
|
// Producer for the group of contains based operators: *=, |=, ~=. See bellow.
|
|
function contains(sep) {
|
|
return [
|
|
// XPATH
|
|
function(a, v) {
|
|
return '[contains(' + (sep ? 'concat("' + sep + '", @' + a + ', "' + sep + '")' : '@' + a) + ', "' + sep + v + sep + '")]';
|
|
},
|
|
// FILTER
|
|
function(a, v) {
|
|
return a.contains(v, sep);
|
|
}
|
|
]
|
|
}
|
|
|
|
return {
|
|
'=': [
|
|
// XPATH
|
|
function(a, v) {
|
|
return '[@' + a + '="' + v + '"]';
|
|
},
|
|
// FILTER
|
|
function(a, v) {
|
|
return a == v;
|
|
}
|
|
],
|
|
|
|
'^=': [
|
|
// XPATH
|
|
function(a, v) {
|
|
return '[starts-with(@' + a + ', "' + v + '")]';
|
|
},
|
|
// FILTER
|
|
function(a, v) {
|
|
return a.substring(0, v.length) == v;
|
|
}
|
|
],
|
|
|
|
'$=': [
|
|
// XPATH
|
|
function(a, v) {
|
|
return '[substring(@' + a + ', string-length(@' + a + ') - ' + v.length + ' + 1) = "' + v + '"]';
|
|
},
|
|
// FILTER
|
|
function(a, v) {
|
|
return a.substring(a.length - v.length) == v;
|
|
}
|
|
],
|
|
|
|
'!=': [
|
|
// XPATH
|
|
function(a, v) {
|
|
return '[@' + a + '!="' + v + '"]';
|
|
},
|
|
// FILTER
|
|
function(a, v) {
|
|
return a != v;
|
|
}
|
|
],
|
|
|
|
'*=': contains(''),
|
|
|
|
'|=': contains('-'),
|
|
|
|
'~=': contains(' ')
|
|
};
|
|
};
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Pseudos
|
|
|
|
DomElement.pseudos = new function() {
|
|
// Handler for the nth-child group of pseudo operators.
|
|
var nthChild = [
|
|
// XPATH
|
|
function(argument) {
|
|
switch (argument.special) {
|
|
case 'n': return '[count(preceding-sibling::*) mod ' + argument.a + ' = ' + argument.b + ']';
|
|
case 'first': return '[count(preceding-sibling::*) = 0]';
|
|
case 'last': return '[count(following-sibling::*) = 0]';
|
|
case 'only': return '[not(preceding-sibling::* or following-sibling::*)]';
|
|
case 'index': return '[count(preceding-sibling::*) = ' + argument.a + ']';
|
|
}
|
|
},
|
|
// FILTER
|
|
function(el, argument, data) {
|
|
var count = 0;
|
|
switch (argument.special) {
|
|
case 'n':
|
|
data.indices = data.indices || {};
|
|
if (!data.indices[el._unique]) {
|
|
var children = el.parentNode.childNodes;
|
|
for (var i = 0, l = children.length; i < l; i++) {
|
|
var child = children[i];
|
|
if (child.nodeType == 1) {
|
|
if (!child._unique)
|
|
DomNode.unique(item);
|
|
data.indices[child._unique] = count++;
|
|
}
|
|
}
|
|
}
|
|
return data.indices[el._unique] % argument.a == argument.b;
|
|
case 'first':
|
|
while (el = el.previousSibling)
|
|
if (el.nodeType == 1)
|
|
return false;
|
|
return true;
|
|
case 'last':
|
|
while (el = el.nextSibling)
|
|
if (el.nodeType == 1)
|
|
return false;
|
|
return true;
|
|
case 'only':
|
|
var prev = el;
|
|
while(prev = prev.previousSibling)
|
|
if (prev.nodeType == 1)
|
|
return false;
|
|
var next = el;
|
|
while (next = next.nextSibling)
|
|
if (next.nodeType == 1)
|
|
return false;
|
|
return true;
|
|
case 'index':
|
|
while (el = el.previousSibling)
|
|
if (el.nodeType == 1 && ++count > argument.a)
|
|
return false;
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
];
|
|
|
|
// Producer for both case-sensitive and caseless versions of the contains
|
|
// pseudo operator.
|
|
function contains(caseless) {
|
|
// abc for lowercase translation.
|
|
var abc = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
|
return [
|
|
// XPATH
|
|
function(argument) {
|
|
return '[contains(' + (caseless ? 'translate(text(), "' + abc
|
|
+ '", "' + abc.toLowerCase() + '")' : 'text()') + ', "'
|
|
+ (caseless && argument ? argument.toLowerCase() : argument) + '")]';
|
|
},
|
|
// FILTER
|
|
function(el, argument) {
|
|
if (caseless && argument) argument = argument.toLowerCase();
|
|
var nodes = el.childNodes;
|
|
for (var i = nodes.length - 1; i >= 0; i--) {
|
|
var child = nodes[i];
|
|
if (child.nodeName && child.nodeType == 3 &&
|
|
(caseless ? child.nodeValue.toLowerCase() : child.nodeValue).contains(argument))
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
];
|
|
}
|
|
|
|
return {
|
|
'nth-child': {
|
|
parser: function(argument) {
|
|
var match = argument ? argument.match(/^([+-]?\d*)?([a-z]+)?([+-]?\d*)?$/) : [null, 1, 'n', 0];
|
|
if (!match) return null;
|
|
var i = parseInt(match[1]),
|
|
a = isNaN(i) ? 1 : i,
|
|
special = match[2],
|
|
b = parseInt(match[3]) || 0;
|
|
if (a != 0) {
|
|
b--;
|
|
while (b < 1) b += a;
|
|
while (b >= a) b -= a;
|
|
} else {
|
|
a = b;
|
|
special = 'index';
|
|
}
|
|
switch (special) {
|
|
case 'n': return { a: a, b: b, special: 'n' };
|
|
case 'odd': return { a: 2, b: 0, special: 'n' };
|
|
case 'even': return { a: 2, b: 1, special: 'n' };
|
|
case 'first': return { special: 'first' };
|
|
case 'last': return { special: 'last' };
|
|
case 'only': return { special: 'only' };
|
|
default: return { a: a - 1, special: 'index' };
|
|
}
|
|
},
|
|
handler: nthChild
|
|
},
|
|
|
|
// Short-cut to nth-child(even) / nth-child(2n)
|
|
'even': {
|
|
parser: { a: 2, b: 1, special: 'n' },
|
|
handler: nthChild
|
|
},
|
|
|
|
// Short-cut to nth-child(odd) / nth-child(2n+1)
|
|
'odd': {
|
|
parser: { a: 2, b: 0, special: 'n' },
|
|
handler: nthChild
|
|
},
|
|
|
|
'first-child': {
|
|
parser: { special: 'first' },
|
|
handler: nthChild
|
|
},
|
|
|
|
'last-child': {
|
|
parser: { special: 'last' },
|
|
handler: nthChild
|
|
},
|
|
|
|
'only-child': {
|
|
parser: { special: 'only' },
|
|
handler: nthChild
|
|
},
|
|
|
|
'enabled': [
|
|
// XPATH
|
|
function() {
|
|
return '[not(@disabled)]';
|
|
},
|
|
// FILTER
|
|
function(el) {
|
|
return !el.disabled;
|
|
}
|
|
],
|
|
|
|
'empty': [
|
|
// XPATH
|
|
function() {
|
|
return '[not(node())]';
|
|
},
|
|
// FILTER
|
|
function(el) {
|
|
return !(el.innerText || el.textContent || '').length;
|
|
}
|
|
],
|
|
|
|
'contains': contains(false),
|
|
|
|
// Extension of contains for case insensitive compare. This is very
|
|
// helpfull for on-site searches.
|
|
'contains-caseless': contains(true)
|
|
};
|
|
};
|
|
|
|
// Html
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// HtmlElements
|
|
|
|
HtmlElements = DomElements.extend();
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// HtmlElement
|
|
|
|
HtmlElement = DomElement.extend({
|
|
_collection: HtmlElements
|
|
});
|
|
|
|
// Use the modified inject function from above which injects both into HtmlElement
|
|
// and HtmlElements.
|
|
HtmlElement.inject({
|
|
beans: true,
|
|
_properties: ['html'],
|
|
|
|
getClass: function() {
|
|
return this.$.className;
|
|
},
|
|
|
|
setClass: function(cls) {
|
|
this.$.className = cls;
|
|
},
|
|
|
|
modifyClass: function(name, add) {
|
|
if (!this.hasClass(name) ^ !add) // xor
|
|
this.$.className = (add ? this.$.className + ' ' + name :
|
|
this.$.className.replace(name, '')).clean();
|
|
return this;
|
|
},
|
|
|
|
addClass: function(name) {
|
|
return this.modifyClass(name, true);
|
|
},
|
|
|
|
removeClass: function(name) {
|
|
return this.modifyClass(name, false);
|
|
},
|
|
|
|
toggleClass: function(name) {
|
|
return this.modifyClass(name, !this.hasClass(name));
|
|
},
|
|
|
|
hasClass: function(name) {
|
|
return this.$.className.contains(name, ' ');
|
|
}
|
|
});
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// toNode conversion for Array and String
|
|
|
|
Array.inject({
|
|
toNode: function(doc) {
|
|
doc = DomNode.wrap(doc || document);
|
|
// ['div', { margin: 10 }, [ // Children
|
|
// 'span', { html: 'hello ' },
|
|
// '<span>world</span>'
|
|
// ]]
|
|
var elements = new HtmlElements();
|
|
for (var i = 0; i < this.length;) {
|
|
var value = this[i++], element = null, type = Base.type(value);
|
|
if (type == 'string') {
|
|
// If the string is html, convert it through String#toNode.
|
|
// Otherwise assume it's a tag name, and look see the following
|
|
// value is a properties hash. Use these to create the element:
|
|
var props = /^(object|hash)$/.test(Base.type(this[i])) && this[i++];
|
|
element = value.isHtml()
|
|
? value.toNode(doc).set(props)
|
|
: doc.createElement(value, props);
|
|
// See if it has children defined, and add them through Array#toNode
|
|
if (Base.type(this[i]) == 'array')
|
|
element.injectBottom(this[i++].toNode(doc));
|
|
} else if (DomNode.isNode(type)) {
|
|
// Raw nodes / elements
|
|
element = value;
|
|
} else if (value && value.toNode) {
|
|
// Anything else
|
|
element = value.toNode(doc);
|
|
}
|
|
// Append arrays and push single elements.
|
|
if (element)
|
|
elements[Base.type(element) == 'array' ? 'append' : 'push'](element);
|
|
}
|
|
// Unbox if there's only one element in the array
|
|
return elements.length == 1 ? elements[0] : elements;
|
|
}
|
|
});
|
|
|
|
String.inject({
|
|
toNode: function(doc) {
|
|
var doc = doc || document, elements;
|
|
// See if it contains tags. If so, produce nodes, otherwise execute
|
|
// the string as a selector
|
|
if (this.isHtml()) {
|
|
// Html code. Conversion to HtmlElements ported from jQuery
|
|
// Trim whitespace, otherwise indexOf won't work as expected
|
|
var str = this.trim().toLowerCase();
|
|
// doc can be native or wrapped:
|
|
var div = DomElement.unwrap(doc).createElement('div');
|
|
|
|
var wrap =
|
|
// option or optgroup
|
|
!str.indexOf('<opt') &&
|
|
[1, '<select>', '</select>'] ||
|
|
!str.indexOf('<leg') &&
|
|
[1, '<fieldset>', '</fieldset>'] ||
|
|
(!str.indexOf('<thead') || !str.indexOf('<tbody') || !str.indexOf('<tfoot') || !str.indexOf('<colg')) &&
|
|
[1, '<table>', '</table>'] ||
|
|
!str.indexOf('<tr') &&
|
|
[2, '<table><tbody>', '</tbody></table>'] ||
|
|
// <thead> matched above
|
|
(!str.indexOf('<td') || !str.indexOf('<th')) &&
|
|
[3, '<table><tbody><tr>', '</tr></tbody></table>'] ||
|
|
!str.indexOf('<col') &&
|
|
[2, '<table><colgroup>', '</colgroup></table>'] ||
|
|
[0,'',''];
|
|
|
|
// Go to html and back, then peel off extra wrappers
|
|
div.innerHTML = wrap[1] + this + wrap[2];
|
|
// Move to the right depth
|
|
while (wrap[0]--)
|
|
div = div.firstChild;
|
|
// Remove IE's autoinserted <tbody> from table fragments
|
|
if (Browser.TRIDENT) {
|
|
var els = [];
|
|
if (!str.indexOf('<table') && str.indexOf('<tbody') < 0) {
|
|
// String was a <table>, *may* have spurious <tbody>
|
|
els = div.firstChild && div.firstChild.childNodes;
|
|
} else if (wrap[1] == '<table>' && str.indexOf('<tbody') < 0) {
|
|
// String was a bare <thead> or <tfoot>
|
|
els = div.childNodes;
|
|
}
|
|
for (var i = els.length - 1; i >= 0 ; --i) {
|
|
var el = els[i];
|
|
if (el.nodeName.toLowerCase() == 'tbody' && !el.childNodes.length)
|
|
el.parentNode.removeChild(el);
|
|
}
|
|
}
|
|
elements = new HtmlElements(div.childNodes);
|
|
} else {
|
|
// Simply execute string as dom selector.
|
|
// Make sure doc is wrapped.
|
|
elements = DomNode.wrap(doc).getElements(this);
|
|
}
|
|
// Unbox if there's only one element in the array
|
|
return elements.length == 1 ? elements[0] : elements;
|
|
}
|
|
});
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// HtmlDocument
|
|
|
|
HtmlDocument = DomDocument.extend({
|
|
// Use HtmlElements collection instead of DomElements for HtmlDocuments
|
|
_collection: HtmlElements
|
|
});
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Style
|
|
|
|
HtmlElement.inject(new function() {
|
|
var styles = {
|
|
all: {
|
|
width: '@px', height: '@px', left: '@px', top: '@px', right: '@px', bottom: '@px',
|
|
color: 'rgb(@, @, @)', backgroundColor: 'rgb(@, @, @)', backgroundPosition: '@px @px',
|
|
fontSize: '@px', letterSpacing: '@px', lineHeight: '@px', textIndent: '@px',
|
|
margin: '@px @px @px @px', padding: '@px @px @px @px',
|
|
border: '@px @ rgb(@, @, @) @px @ rgb(@, @, @) @px @ rgb(@, @, @) @px @ rgb(@, @, @)',
|
|
borderWidth: '@px @px @px @px', borderStyle: '@ @ @ @',
|
|
borderColor: 'rgb(@, @, @) rgb(@, @, @) rgb(@, @, @) rgb(@, @, @)',
|
|
clip: 'rect(@px, @px, @px, @px)', opacity: '@'
|
|
},
|
|
part: {
|
|
'border': {}, 'borderWidth': {}, 'borderStyle': {}, 'borderColor': {},
|
|
'margin': {}, 'padding': {}
|
|
}
|
|
};
|
|
|
|
['Top', 'Right', 'Bottom', 'Left'].each(function(dir) {
|
|
['margin', 'padding'].each(function(style) {
|
|
var sd = style + dir;
|
|
styles.part[style][sd] = styles.all[sd] = '@px';
|
|
});
|
|
var bd = 'border' + dir;
|
|
styles.part.border[bd] = styles.all[bd] = '@px @ rgb(@, @, @)';
|
|
var bdw = bd + 'Width', bds = bd + 'Style', bdc = bd + 'Color';
|
|
styles.part[bd] = {};
|
|
styles.part.borderWidth[bdw] = styles.part[bd][bdw] = '@px';
|
|
styles.part.borderStyle[bds] = styles.part[bd][bds] = '@';
|
|
styles.part.borderColor[bdc] = styles.part[bd][bdc] = 'rgb(@, @, @)';
|
|
});
|
|
|
|
// Now pre-split all style.all settings at ' ', instead of each time
|
|
// in setStyles
|
|
Base.each(styles.all, function(val, name) {
|
|
this[name] = val.split(' ');
|
|
});
|
|
|
|
var fields = {
|
|
beans: true,
|
|
|
|
getComputedStyle: function(name) {
|
|
if (this.$.currentStyle) return this.$.currentStyle[name.camelize()];
|
|
var style = this.getWindow().$.getComputedStyle(this.$, null);
|
|
return style ? style.getPropertyValue(name.hyphenate()) : null;
|
|
},
|
|
|
|
getStyle: function(name) {
|
|
if (name === undefined) return this.getStyles();
|
|
if (name == 'opacity') {
|
|
var op = this.opacity;
|
|
return op || op == 0 ? op : this.getVisibility() ? 1 : 0;
|
|
}
|
|
var el = this.$;
|
|
name = name.camelize();
|
|
var style = el.style[name];
|
|
if (!Base.check(style)) {
|
|
if (styles.part[name]) {
|
|
style = Hash.map(styles.part[name], function(val, key) {
|
|
return this.getStyle(key);
|
|
}, this);
|
|
return style.every(function(val) {
|
|
return val == style[0];
|
|
}) ? style[0] : style.join(' ');
|
|
}
|
|
style = this.getComputedStyle(name);
|
|
}
|
|
if (name == 'visibility')
|
|
return /^(visible|inherit(|ed))$/.test(style);
|
|
var color = style && style.match(/rgb[a]?\([\d\s,]+\)/);
|
|
if (color) return style.replace(color[0], color[0].rgbToHex());
|
|
if (Browser.PRESTO || Browser.TRIDENT && isNaN(parseInt(style))) {
|
|
// Fix IE / Opera style that falsly include border and padding:
|
|
if (/^(width|height)$/.test(name)) {
|
|
var size = 0;
|
|
(name == 'width' ? ['left', 'right'] : ['top', 'bottom']).each(function(val) {
|
|
size += this.getStyle('border-' + val + '-width').toInt() + this.getStyle('padding-' + val).toInt();
|
|
}, this);
|
|
// TODO: Should 'scroll' be used instead, as 'offset' also includes the scroll bars?
|
|
return this.$['offset' + name.capitalize()] - size + 'px';
|
|
}
|
|
if (Browser.PRESTO && /px/.test(style)) return style;
|
|
if (/border(.+)[wW]idth|margin|padding/.test(name)) return '0px';
|
|
}
|
|
return style;
|
|
},
|
|
|
|
setStyle: function(name, value) {
|
|
if (value === undefined) return this.setStyles(name);
|
|
var el = this.$;
|
|
switch (name) {
|
|
case 'float':
|
|
name = Browser.TRIDENT ? 'styleFloat' : 'cssFloat';
|
|
break;
|
|
case 'clip':
|
|
// Setting clip to true sets it to the current bounds
|
|
// TODO: Calculate only if Dimension.js is defined? add conditional macro?
|
|
if (value == true)
|
|
value = [0, el.offsetWidth, el.offsetHeight, 0];
|
|
break;
|
|
default:
|
|
name = name.camelize();
|
|
}
|
|
var type = Base.type(value);
|
|
if (value != undefined && type != 'string') {
|
|
var parts = styles.all[name] || ['@'], index = 0;
|
|
// Flatten arrays, e.g. for borderColor where it might be an
|
|
// array of four color arrays.
|
|
value = (type == 'array' ? value.flatten() : [value]).map(function(val) {
|
|
var part = parts[index++];
|
|
if (!part)
|
|
throw Base.stop;
|
|
return Base.type(val) == 'number' ? part.replace('@', name == 'opacity' ? val : Math.round(val)) : val;
|
|
}).join(' ');
|
|
}
|
|
switch (name) {
|
|
case 'visibility':
|
|
// Convert 0 to false, 1 to true before converting to visible / hidden
|
|
if (!isNaN(value)) value = !!value.toInt() + '';
|
|
// Convert true -> visible, false -> hidden, everything else remains unchanged
|
|
value = value == 'true' && 'visible' || value == 'false' && 'hidden' || value;
|
|
break;
|
|
case 'opacity':
|
|
// Set opacity to 1 if it's 0 and set visibility to 0 instead,
|
|
// to fix a problem on Firefox on Mac, where antialiasing is affected
|
|
// otherwise... TODO: Find better solution?
|
|
this.opacity = value = parseFloat(value);
|
|
this.setStyle('visibility', !!value);
|
|
if (!value) value = 1;
|
|
if (!el.currentStyle || !el.currentStyle.hasLayout) el.style.zoom = 1;
|
|
if (Browser.TRIDENT) el.style.filter = value > 0 && value < 1 ? 'alpha(opacity=' + value * 100 + ')' : '';
|
|
el.style.opacity = value;
|
|
return this;
|
|
}
|
|
el.style[name] = value;
|
|
return this;
|
|
},
|
|
|
|
getStyles: function() {
|
|
return arguments.length ? Array.each(arguments, function(name) {
|
|
this[name] = that.getStyle(name);
|
|
}, {}) : this.$.style.cssText;
|
|
},
|
|
|
|
setStyles: function(styles) {
|
|
switch (Base.type(styles)) {
|
|
case 'object':
|
|
Base.each(styles, function(style, name) {
|
|
// only set styles that have a defined value (null !== undefined)
|
|
if (style !== undefined)
|
|
this.setStyle(name, style);
|
|
}, this);
|
|
break;
|
|
case 'string':
|
|
this.$.style.cssText = styles;
|
|
}
|
|
return this;
|
|
}
|
|
};
|
|
|
|
// Create getters and setters for some often used css properties:
|
|
// TODO: Add more?
|
|
['opacity', 'color', 'background', 'visibility', 'clip', 'zIndex',
|
|
'border', 'margin', 'padding', 'display'].each(function(name) {
|
|
var part = name.capitalize();
|
|
fields['get' + part] = function() {
|
|
return this.getStyle(name);
|
|
};
|
|
fields['set' + part] = function(value) {
|
|
// pass mutliple params as array
|
|
return this.setStyle(name, arguments.length > 1
|
|
? Array.create(arguments) : value);
|
|
};
|
|
});
|
|
|
|
return fields;
|
|
});
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// HtmlForm
|
|
|
|
// HtmlForm related functions, but available in all elements:
|
|
|
|
HtmlElement.inject({
|
|
beans: true,
|
|
|
|
getFormElements: function() {
|
|
return this.getElements(['input', 'select', 'textarea']);
|
|
},
|
|
|
|
getValue: function(name) {
|
|
var el = this.getElement(name);
|
|
return el && el.getValue && el.getValue();
|
|
},
|
|
|
|
setValue: function(name, val) {
|
|
var el = this.getElement(name);
|
|
// On Safari, using injectBottom here causes problems with transmission of
|
|
// some of the form values sometimes. Injecting at the top seems to solve
|
|
// this.
|
|
if (!el) el = this.injectTop('input', { type: 'hidden', id: name, name: name });
|
|
return el.setValue(val);
|
|
},
|
|
|
|
getValues: function() {
|
|
return this.getFormElements().each(function(el) {
|
|
var name = el.getName(), value = el.getValue();
|
|
if (name && value !== undefined && !el.getDisabled())
|
|
this[name] = value;
|
|
}, new Hash());
|
|
},
|
|
|
|
setValues: function(values) {
|
|
return Base.each(values, function(val, name) {
|
|
this.setValue(name, val);
|
|
}, this);
|
|
},
|
|
|
|
toQueryString: function() {
|
|
return Base.toQueryString(this.getValues());
|
|
}
|
|
});
|
|
|
|
HtmlForm = HtmlElement.extend({
|
|
beans: true,
|
|
_tag: 'form',
|
|
_properties: ['action', 'method', 'target'],
|
|
_methods: ['submit'],
|
|
|
|
blur: function() {
|
|
return this.getFormElements().each(function(el) {
|
|
el.blur();
|
|
}, this);
|
|
},
|
|
|
|
enable: function(enable) {
|
|
return this.getFormElements().each(function(el) {
|
|
el.enable(enable);
|
|
}, this);
|
|
}
|
|
});
|
|
|
|
HtmlFormElement = HtmlElement.extend({
|
|
beans: true,
|
|
_properties: ['name', 'disabled'],
|
|
_methods: ['focus', 'blur'],
|
|
|
|
enable: function(enable) {
|
|
var disabled = !enable && enable !== undefined;
|
|
if (disabled) this.$.blur();
|
|
this.$.disabled = disabled;
|
|
return this;
|
|
}
|
|
});
|
|
|
|
HtmlInput = HtmlFormElement.extend({
|
|
beans: true,
|
|
_tag: 'input',
|
|
_properties: ['type', 'checked', 'defaultChecked', 'readOnly', 'maxLength'],
|
|
_methods: ['click'],
|
|
|
|
getValue: function() {
|
|
if (this.$.checked && /^(checkbox|radio)$/.test(this.$.type) ||
|
|
/^(hidden|text|password|button|search)$/.test(this.$.type))
|
|
return this.$.value;
|
|
},
|
|
|
|
// TODO: Decide if setValue for checkboxes / radios should actually change
|
|
// the value or set checked if the values match! Maybe a new function is
|
|
// needed that does that, e.g. set / getCurrent
|
|
setValue: function(val) {
|
|
if (/^(checkbox|radio)$/.test(this.$.type)) this.$.checked = this.$.value == val;
|
|
// Fix IE bug where string values set to null appear as 'null' instead of ''
|
|
else this.$.value = val != null ? val : '';
|
|
return this;
|
|
}
|
|
});
|
|
|
|
HtmlTextArea = HtmlFormElement.extend({
|
|
beans: true,
|
|
_tag: 'textarea',
|
|
_properties: ['value']
|
|
});
|
|
|
|
HtmlSelect = HtmlFormElement.extend({
|
|
beans: true,
|
|
_tag: 'select',
|
|
_properties: ['type', 'selectedIndex'],
|
|
|
|
getOptions: function() {
|
|
return this.getElements('option');
|
|
},
|
|
|
|
getSelected: function() {
|
|
return this.getElements('option[selected]');
|
|
},
|
|
|
|
setSelected: function(values) {
|
|
this.$.selectedIndex = -1;
|
|
if (values) {
|
|
Array.each(values.length != null ? values : [values], function(val) {
|
|
val = DomElement.unwrap(val);
|
|
if (val != null)
|
|
this.getElements('option[value="' + (val.value || val) + '"]').setProperty('selected', true);
|
|
}, this);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
getValue: function() {
|
|
return this.getSelected().getProperty('value');
|
|
},
|
|
|
|
setValue: function(values) {
|
|
return this.setSelected(values);
|
|
}
|
|
});
|
|
|
|
HtmlOption = HtmlFormElement.extend({
|
|
beans: true,
|
|
_tag: 'option',
|
|
_properties: ['text', 'value', 'selected', 'defaultSelected', 'index']
|
|
});
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Selection
|
|
|
|
HtmlFormElement.inject({
|
|
setSelection: function(start, end) {
|
|
var sel = end == undefined ? start : { start: start, end: end };
|
|
this.focus();
|
|
if(this.$.setSelectionRange) {
|
|
this.$.setSelectionRange(sel.start, sel.end);
|
|
} else {
|
|
var value = this.getValue();
|
|
var len = value.substring(sel.start, sel.end).replace(/\r/g, '').length;
|
|
var pos = value.substring(0, sel.start).replace(/\r/g, '').length;
|
|
var range = this.$.createTextRange();
|
|
range.collapse(true);
|
|
range.moveEnd('character', pos + len);
|
|
range.moveStart('character', pos);
|
|
range.select();
|
|
}
|
|
return this;
|
|
},
|
|
|
|
getSelection: function() {
|
|
if (this.$.selectionStart !== undefined) {
|
|
return { start: this.$.selectionStart, end: this.$.selectionEnd };
|
|
} else {
|
|
this.focus();
|
|
var pos = { start: 0, end: 0 };
|
|
var range = this.getDocument().$.selection.createRange();
|
|
var dup = range.duplicate();
|
|
if (this.$.type == 'text') {
|
|
pos.start = 0 - dup.moveStart('character', -100000);
|
|
pos.end = pos.start + range.text.length;
|
|
} else {
|
|
var value = this.getValue();
|
|
dup.moveToElementText(this.$);
|
|
dup.setEndPoint('StartToEnd', range);
|
|
pos.end = value.length - dup.text.length;
|
|
dup.setEndPoint('StartToStart', range);
|
|
pos.start = value.length - dup.text.length;
|
|
}
|
|
return pos;
|
|
}
|
|
},
|
|
|
|
getSelectedText: function() {
|
|
var range = this.getSelection();
|
|
return this.getValue().substring(range.start, range.end);
|
|
},
|
|
|
|
replaceSelectedText: function(value, select) {
|
|
var range = this.getSelection(), current = this.getValue();
|
|
// Fix Firefox scroll bug, see http://userscripts.org/scripts/review/9452, #insertAtCaret()
|
|
var top = this.$.scrollTop, height = this.$.scrollHeight;
|
|
this.setValue(current.substring(0, range.start) + value + current.substring(range.end, current.length));
|
|
if(top != null)
|
|
this.$.scrollTop = top + this.$.scrollHeight - height;
|
|
return select || select == undefined
|
|
? this.setSelection(range.start, range.start + value.length)
|
|
: this.setCaret(range.start + value.length);
|
|
},
|
|
|
|
getCaret: function() {
|
|
return this.getSelection().start;
|
|
},
|
|
|
|
setCaret: function(pos) {
|
|
return this.setSelection(pos, pos);
|
|
}
|
|
});
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// HtmlImage
|
|
|
|
HtmlImage = HtmlElement.extend({
|
|
beans: true,
|
|
_tag: 'img',
|
|
_properties: ['src', 'alt', 'title']
|
|
});
|
|
|
|
// Globals
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Globals
|
|
|
|
// Sort out garbage collection at the same time
|
|
$document = Browser.document = DomNode.wrap(document);
|
|
$window = Browser.window = DomNode.wrap(window).addEvent('unload', DomNode.dispose);
|
|
|
|
// Remote
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Callback
|
|
|
|
/**
|
|
* Chain interface
|
|
*/
|
|
Chain = {
|
|
chain: function(fn) {
|
|
(this._chain = this._chain || []).push(fn);
|
|
return this;
|
|
},
|
|
|
|
callChain: function() {
|
|
if (this._chain && this._chain.length)
|
|
this._chain.shift().apply(this, arguments);
|
|
return this;
|
|
},
|
|
|
|
clearChain: function() {
|
|
this._chain = [];
|
|
return this;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Callback interface
|
|
*/
|
|
Callback = {
|
|
addEvent: function(type, fn) {
|
|
var ref = this.events = this.events || {};
|
|
ref = ref[type] = ref[type] || [];
|
|
// We need to pass an iterator function to find, as otherwise fn
|
|
// is used as an iterator.
|
|
if (!ref.find(function(val) { return val == fn })) ref.push(fn);
|
|
return this;
|
|
},
|
|
|
|
addEvents: function(events) {
|
|
return Base.each((events || []), function(fn, type) {
|
|
this.addEvent(type, fn);
|
|
}, this);
|
|
},
|
|
|
|
fireEvent: function(type, args, delay) {
|
|
return (this.events && this.events[type] || []).each(function(fn) {
|
|
fn.delay(delay, this, args);
|
|
}, this);
|
|
},
|
|
|
|
removeEvent: function(type, fn) {
|
|
if (this.events && this.events[type])
|
|
this.events[type].remove(function(val) { return fn == val; });
|
|
return this;
|
|
},
|
|
|
|
setOptions: function(opts) {
|
|
// Keep copying this.options, as it might be defined in the prototype
|
|
return (this.options = Hash.create(this.options, opts)).each(function(val, i) {
|
|
if (typeof val == 'function' && (i = i.match(/^on([A-Z]\w*)/)))
|
|
this.addEvent(i[1].toLowerCase(), val);
|
|
}, this);
|
|
},
|
|
|
|
statics: {
|
|
inject: function(/* ... */) {
|
|
var proto = this.prototype, options = proto.options;
|
|
this.base.apply(this, arguments);
|
|
if (proto.options != options)
|
|
proto.options = Hash.merge({}, options, proto.options);
|
|
return this;
|
|
}
|
|
}
|
|
};
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Request
|
|
|
|
// options:
|
|
// data
|
|
// headers
|
|
// method
|
|
// async
|
|
// link
|
|
// urlEncoded
|
|
// encoding
|
|
// evalScripts
|
|
// evalResponse
|
|
// emulation
|
|
// type (json, html, xml)
|
|
// secure
|
|
// update
|
|
// filter
|
|
|
|
Request = Base.extend(Chain, Callback, new function() {
|
|
var unique = 0;
|
|
|
|
function createRequest(that) {
|
|
if (!that.transport)
|
|
that.transport = window.XMLHttpRequest && new XMLHttpRequest()
|
|
|| Browser.TRIDENT && new ActiveXObject('Microsoft.XMLHTTP');
|
|
}
|
|
|
|
function createFrame(that) {
|
|
var id = 'request_' + unique++, load = that.onFrameLoad.bind(that);
|
|
// IE Fix: Setting load event on iframes does not work, use onreadystatechange
|
|
var div = DomElement.get('body').injectBottom('div', {
|
|
styles: {
|
|
position: 'absolute', width: 0, height: 0, top: 0, marginLeft: '-10000px'
|
|
}
|
|
}, [
|
|
'iframe', {
|
|
name: id, id: id, events: { load: load, readystatechange: load }
|
|
}
|
|
]
|
|
);
|
|
that.frame = {
|
|
id: id, div: div,
|
|
iframe: window.frames[id] || document.getElementById(id),
|
|
element: DomElement.get(id)
|
|
};
|
|
// Opera fix: force the iframe to be valid
|
|
div.offsetWidth;
|
|
}
|
|
|
|
return {
|
|
options: {
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'Accept': 'text/javascript, text/html, application/xml, text/xml, */*'
|
|
},
|
|
method: 'post',
|
|
async: true,
|
|
urlEncoded: true,
|
|
encoding: 'utf-8',
|
|
emulation: true,
|
|
secure: false
|
|
},
|
|
|
|
initialize: function(/* url: 'string', options: 'object', handler: 'function' */) {
|
|
var params = Array.associate(arguments, { url: 'string', options: 'object', handler: 'function' });
|
|
this.setOptions(params.options);
|
|
// If a handler is passed, it is used to recieve both success and
|
|
// failure events. Only the success event will recieve a result
|
|
// argument though.
|
|
if (params.handler)
|
|
this.addEvent('complete', params.handler);
|
|
// Always set type to html if updating elements
|
|
if (this.options.update)
|
|
this.options.type = 'html';
|
|
this.headers = new Hash(this.options.headers);
|
|
if (this.options.type == 'json') {
|
|
this.setHeader('Accept', 'application/json');
|
|
this.setHeader('X-Request', 'JSON');
|
|
}
|
|
if (this.options.urlEncoded && /^(post|put)$/.test(this.options.method)) {
|
|
this.setHeader('Content-Type', 'application/x-www-form-urlencoded' +
|
|
(this.options.encoding ? '; charset=' + this.options.encoding : ''));
|
|
}
|
|
this.headers.append(this.options.headers);
|
|
},
|
|
|
|
onStateChange: function() {
|
|
if (this.transport.readyState == 4 && this.running) {
|
|
this.running = false;
|
|
this.status = 0;
|
|
try {
|
|
this.status = this.transport.status;
|
|
delete this.transport.onreadystatechange;
|
|
} catch (e) {}
|
|
if (!this.status || this.status >= 200 && this.status < 300) {
|
|
this.success(this.transport.responseText, this.transport.responseXML);
|
|
} else {
|
|
this.fireEvent('complete').fireEvent('failure');
|
|
}
|
|
}
|
|
},
|
|
|
|
onFrameLoad: function() {
|
|
var frame = this.frame && this.frame.iframe, loc = frame && frame.location,
|
|
doc = frame && (frame.contentDocument || frame.contentWindow || frame).document;
|
|
if (this.running && frame && loc && (!loc.href || loc.href.indexOf(this.url) != -1)
|
|
&& /^(loaded|complete|undefined)$/.test(doc.readyState)) {
|
|
this.running = false;
|
|
// Try fetching value from the first tetarea in the document first,
|
|
// since that's the convention to send data with iframes now, just
|
|
// like in dojo.
|
|
var html = this.options.type == 'html', area = !html
|
|
&& doc.getElementsByTagName('textarea')[0];
|
|
var text = doc && (area && area.value || doc.body
|
|
&& (html && doc.body.innerHTML || doc.body.textContent
|
|
|| doc.body.innerText)) || '';
|
|
// Clear src
|
|
this.frame.element.setProperty('src', '');
|
|
// TODO: Add support for xml?
|
|
this.success(text);
|
|
// We need the iframe to stay around for a little while,
|
|
// otherwise it appears to load endlessly. Insert it back in
|
|
// and use delay to remove it again. This even works if
|
|
// success above changes the whole html and would remove the
|
|
// iframe, as it can happen during editing. Since we remove
|
|
// it before already, it is untouched by this.
|
|
if (!this.options.link) {
|
|
var div = this.frame.div;
|
|
div.insertBottom(DomElement.get('body'));
|
|
div.remove.delay(5000, div);
|
|
this.frame = null;
|
|
}
|
|
}
|
|
},
|
|
|
|
success: function(text, xml) {
|
|
var args;
|
|
switch (this.options.type) {
|
|
case 'html':
|
|
var match = text.match(/<body[^>]*>([\u0000-\uffff]*?)<\/body>/i);
|
|
var stripped = this.stripScripts(match ? match[1] : text);
|
|
if (this.options.update)
|
|
DomElement.get(this.options.update).setHtml(stripped.html);
|
|
if (this.options.evalScripts)
|
|
this.executeScript(stripped.script);
|
|
args = [ stripped.html, text ];
|
|
break;
|
|
case 'json':
|
|
args = [ Json.decode(text, this.options.secure), text ];
|
|
break;
|
|
default: // xml?
|
|
args = [ this.processScripts(text), xml ]
|
|
}
|
|
this.fireEvent('complete', args)
|
|
.fireEvent('success', args)
|
|
.callChain();
|
|
},
|
|
|
|
stripScripts: function(html) {
|
|
var script = '';
|
|
html = html.replace(/<script[^>]*>([\u0000-\uffff]*?)<\/script>/gi, function() {
|
|
script += arguments[1] + '\n';
|
|
return '';
|
|
});
|
|
return { html: html, script: script };
|
|
},
|
|
|
|
processScripts: function(text) {
|
|
if (this.options.evalResponse || (/(ecma|java)script/).test(this.getHeader('Content-type'))) {
|
|
this.executeScript(text);
|
|
return text;
|
|
} else {
|
|
// Strip scripts from text and execute bellow
|
|
var stripped = this.stripScripts(text);
|
|
if (this.options.evalScripts)
|
|
this.executeScript(stripped.script);
|
|
return stripped.html;
|
|
}
|
|
},
|
|
|
|
executeScript: function(script) {
|
|
if (window.execScript) {
|
|
window.execScript(script);
|
|
} else {
|
|
DomElement.get('head').injectBottom('script', {
|
|
type: 'text/javascript', text: script
|
|
}).remove();
|
|
}
|
|
},
|
|
|
|
setHeader: function(name, value) {
|
|
this.headers[name] = value;
|
|
return this;
|
|
},
|
|
|
|
getHeader: function(name) {
|
|
try {
|
|
if (this.transport)
|
|
return this.transport.getResponseHeader(name);
|
|
} catch (e) {}
|
|
return null;
|
|
},
|
|
|
|
send: function() {
|
|
var params = Array.associate(arguments, { url: 'string', options: 'object', handler: 'function' });
|
|
var opts = params.options ? Hash.merge(params.options, this.options) : this.options;
|
|
if (params.handler)
|
|
this.addEvent('complete', function() {
|
|
params.handler.apply(this, arguments);
|
|
this.removeEvent('complete', arguments.callee);
|
|
});
|
|
if (this.running) {
|
|
switch (opts.link) {
|
|
case 'cancel':
|
|
this.cancel();
|
|
break;
|
|
case 'chain':
|
|
this.chain(this.send.wrap(this, arguments));
|
|
default:
|
|
return this;
|
|
}
|
|
}
|
|
var data = opts.data || '';
|
|
var url = params.url || opts.url;
|
|
switch (Base.type(data)) {
|
|
case 'element':
|
|
data = DomNode.wrap(data);
|
|
// No need to post using forms if there are no files
|
|
if (data.getTag() != 'form' || !data.hasElement('input[type=file]'))
|
|
data = data.toQueryString();
|
|
break;
|
|
case 'object':
|
|
data = Base.toQueryString(data);
|
|
break;
|
|
default:
|
|
data = data.toString();
|
|
}
|
|
var string = typeof data == 'string', method = opts.method;
|
|
if (opts.emulation && /^(put|delete)$/.test(method)) {
|
|
if (string) data += '&_method=' + method;
|
|
else data.setValue('_method', method);
|
|
method = 'post';
|
|
}
|
|
if (string && !this.options.iframe) {
|
|
createRequest(this);
|
|
if (!this.transport) {
|
|
if (!this.frame)
|
|
createFrame(this);
|
|
// No support for POST when using iframes. We could fake
|
|
// it through a hidden form that's produced on the fly,
|
|
// parse data and url for query values, but that's going a bit
|
|
// far for legacy support.
|
|
method = 'get';
|
|
}
|
|
} else if (!this.frame) {
|
|
createFrame(this);
|
|
}
|
|
if (string && data && method == 'get') {
|
|
url += (url.contains('?') ? '&' : '?') + data;
|
|
data = null;
|
|
}
|
|
this.running = true;
|
|
this.url = url;
|
|
// Check frame first, as this is never reused.
|
|
if (this.frame) {
|
|
// Are we sending the request by submitting a form or simply
|
|
// setting the src?
|
|
var form = !string && data;
|
|
if (form) {
|
|
form.set({
|
|
target: this.frame.id, action: url, method: method,
|
|
enctype: /* TODO: opts.urlEncoded || */ method == 'get'
|
|
? 'application/x-www-form-urlencoded'
|
|
: 'multipart/form-data',
|
|
'accept-charset': opts.encoding || ''
|
|
}).submit();
|
|
} else {
|
|
this.frame.element.setProperty('src', url);
|
|
}
|
|
} else if (this.transport) {
|
|
try {
|
|
this.transport.open(method.toUpperCase(), url, opts.async);
|
|
this.transport.onreadystatechange = this.onStateChange.bind(this);
|
|
new Hash(this.headers, opts.headers).each(function(header, name) {
|
|
try{
|
|
this.transport.setRequestHeader(name, header);
|
|
} catch (e) {
|
|
this.fireEvent('exception', [e, name, header]);
|
|
}
|
|
}, this);
|
|
this.fireEvent('request');
|
|
this.transport.send(data);
|
|
if (!opts.async)
|
|
this.onStateChange();
|
|
} catch (e) {
|
|
this.fireEvent('failure', [e]);
|
|
}
|
|
}
|
|
return this;
|
|
},
|
|
|
|
cancel: function() {
|
|
if (this.running) {
|
|
this.running = false;
|
|
if (this.transport) {
|
|
this.transport.abort();
|
|
this.transport.onreadystatechange = null;
|
|
this.transport = null;
|
|
} else if (this.frame) {
|
|
this.frame.div.remove();
|
|
this.frame = null;
|
|
}
|
|
this.fireEvent('cancel');
|
|
}
|
|
return this;
|
|
}
|
|
};
|
|
});
|
|
|
|
HtmlForm.inject({
|
|
send: function(url) {
|
|
if (!this.sender)
|
|
this.sender = new Request({ link: 'cancel' });
|
|
this.sender.send({
|
|
url: url || this.getProperty('action'),
|
|
data: this, method: this.getProperty('method') || 'post'
|
|
});
|
|
}
|
|
});
|
|
|
|
HtmlElement.inject({
|
|
load: function() {
|
|
if (!this.loader)
|
|
this.loader = new Request({ link: 'cancel', update: this, method: 'get' });
|
|
this.loader.send(Array.associate(arguments, { data: 'object', url: 'string' }));
|
|
return this;
|
|
}
|
|
});
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Asset
|
|
|
|
Asset = new function() {
|
|
// Clones props and remove all handlers:
|
|
function getProperties(props) {
|
|
return props ? Hash.create(props).each(function(val, key) {
|
|
if (/^on/.test(key)) delete this[key];
|
|
}) : {};
|
|
}
|
|
|
|
/*
|
|
Trial at syncronized loading for multiple script assets
|
|
but how to return the full set of assets, since they are created serially?
|
|
function createMultiple(type, sources, options, sync) {
|
|
var props = getProperties(options), count = 0;
|
|
options = options || {};
|
|
var assets = new HtmlElements();
|
|
function load(src) {
|
|
props.onLoad = function() {
|
|
if (options.onProgress)
|
|
options.onProgress.call(this, src);
|
|
if (++count == sources.length && options.onComplete)
|
|
options.onComplete.call(this);
|
|
}
|
|
assets.push(Asset[type](src, props));
|
|
}
|
|
if (sync) {
|
|
var progress = options.onProgress;
|
|
options.onProgress = function(src) {
|
|
if (progress)
|
|
progress.call(this, src);
|
|
var next = sources[count + 1];
|
|
if (next)
|
|
load(next);
|
|
};
|
|
load(sources[0]);
|
|
} else {
|
|
sources.each(load);
|
|
}
|
|
return assets;
|
|
}
|
|
*/
|
|
function createMultiple(type, sources, options) {
|
|
var props = getProperties(options), count = 0;
|
|
options = options || {};
|
|
return sources.each(function(src) {
|
|
props.onLoad = function() {
|
|
if (options.onProgress)
|
|
options.onProgress(src);
|
|
if (++count == sources.length && options.onComplete)
|
|
options.onComplete();
|
|
}
|
|
this.push(Asset[type](src, props));
|
|
}, new HtmlElements());
|
|
}
|
|
|
|
return {
|
|
script: function(src, props) {
|
|
var script = DomElement.get('head').injectBottom('script', Hash.merge({
|
|
events: {
|
|
// props.onLoad can be null
|
|
load: props.onLoad && function() {
|
|
// We receive this event more than once on Opera, filter
|
|
// out here...
|
|
if (!this.loaded) {
|
|
this.loaded = true;
|
|
props.onLoad.call(this);
|
|
}
|
|
},
|
|
readystatechange: function() {
|
|
if (/loaded|complete/.test(this.$.readyState))
|
|
this.fireEvent('load');
|
|
}
|
|
},
|
|
src: src
|
|
}, getProperties(props)));
|
|
// On Safari < 3, execute a Request for the same resource at
|
|
// the same time. The resource will only be loaded once, and the
|
|
// Request will recieve a notification, while the script does not.
|
|
if (Browser.WEBKIT && Browser.VERSION < 420)
|
|
new Request({ url: src, method: 'get' }).addEvent('success', function() {
|
|
script.fireEvent('load', [], 1);
|
|
}).send();
|
|
return script;
|
|
},
|
|
|
|
stylesheet: function(src, props) {
|
|
return new HtmlElement('link', new Hash({
|
|
rel: 'stylesheet', media: 'screen', type: 'text/css', href: src
|
|
}, props)).insertInside(DomElement.get('head'));
|
|
},
|
|
|
|
image: function(src, props) {
|
|
props = props || {};
|
|
var image = new Image();
|
|
image.src = src;
|
|
var element = new HtmlElement('img', { src: src });
|
|
['load', 'abort', 'error'].each(function(type) {
|
|
var name = 'on' + type.capitalize();
|
|
if (props[name]) element.addEvent(type, function() {
|
|
this.removeEvent(type, arguments.callee);
|
|
props[name].call(this);
|
|
});
|
|
});
|
|
if (image.width && image.height)
|
|
element.fireEvent('load', [], 1);
|
|
return element.setProperties(getProperties(props));
|
|
},
|
|
|
|
scripts: function(sources, options) {
|
|
return createMultiple('script', sources, options);
|
|
},
|
|
|
|
stylesheets: function(sources, options) {
|
|
return createMultiple('stylesheet', sources, options);
|
|
},
|
|
|
|
images: function(sources, options) {
|
|
return createMultiple('image', sources, options);
|
|
}
|
|
}
|
|
};
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Cookie
|
|
|
|
Cookie = {
|
|
set: function(name, value, expires, path) {
|
|
document.cookie = name + '=' + encodeURIComponent(value) + (expires ? ';expires=' +
|
|
expires.toGMTString() : '') + ';path=' + (path || '/');
|
|
},
|
|
get: function(name) {
|
|
var res = document.cookie.match('(?:^|;)\\s*' + name + '=([^;]*)');
|
|
if (res) return decodeURIComponent(res[1]);
|
|
},
|
|
|
|
remove: function(name) {
|
|
this.set(name, '', -1);
|
|
}
|
|
};
|
|
|
|
// Effects
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Fx
|
|
|
|
// Mootools uses #setNow to define the current value and #increase to set them
|
|
// Bootstrap relies instead on #update that recieves a value to set and #get
|
|
// to retrieve the current value. Any class extending Fx needs to define these.
|
|
|
|
Fx = Base.extend(Chain, Callback, {
|
|
options: {
|
|
fps: 50,
|
|
unit: false,
|
|
duration: 500,
|
|
wait: true,
|
|
transition: function(p) {
|
|
return -(Math.cos(Math.PI * p) - 1) / 2;
|
|
}
|
|
},
|
|
|
|
initialize: function(element, options) {
|
|
this.element = DomElement.get(element);
|
|
this.setOptions(options);
|
|
},
|
|
|
|
step: function() {
|
|
var time = Date.now();
|
|
if (time < this.time + this.options.duration) {
|
|
this.delta = this.options.transition((time - this.time) / this.options.duration);
|
|
this.update(this.get());
|
|
} else {
|
|
this.stop(true);
|
|
this.update(this.to);
|
|
this.fireEvent('complete', [this.element]).callChain();
|
|
}
|
|
},
|
|
|
|
set: function(to) {
|
|
this.update(to);
|
|
this.fireEvent('set', [this.element]);
|
|
return this;
|
|
},
|
|
|
|
get: function() {
|
|
return this.compute(this.from, this.to);
|
|
},
|
|
|
|
compute: function(from, to) {
|
|
return (to - from) * this.delta + from;
|
|
},
|
|
|
|
start: function(from, to) {
|
|
if (!this.options.wait) this.stop();
|
|
else if (this.timer) return this;
|
|
this.from = from;
|
|
this.to = to;
|
|
this.time = Date.now();
|
|
// Fx.Elements allows effects to be run in slave mode.
|
|
if (!this.slave) {
|
|
this.timer = this.step.periodic(Math.round(1000 / this.options.fps), this);
|
|
this.fireEvent('start', [this.element]);
|
|
}
|
|
// Make the first step now:
|
|
this.step();
|
|
return this;
|
|
},
|
|
|
|
stop: function(end) {
|
|
if (this.timer) {
|
|
this.timer = this.timer.clear();
|
|
if (!end) this.fireEvent('cancel', [this.element]).clearChain();
|
|
}
|
|
return this;
|
|
}
|
|
});
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Fx.Scroll
|
|
|
|
Fx.Scroll = Fx.extend({
|
|
options: {
|
|
offset: { x: 0, y: 0 },
|
|
wheelStops: true
|
|
},
|
|
|
|
initialize: function(element, options) {
|
|
this.base(element, options);
|
|
if (this.options.wheelStops) {
|
|
var stop = this.stop.bind(this), stopper = this.element;
|
|
this.addEvent('start', function() {
|
|
stopper.addEvent('mousewheel', stop);
|
|
}, true);
|
|
this.addEvent('complete', function() {
|
|
stopper.removeEvent('mousewheel', stop);
|
|
}, true);
|
|
}
|
|
},
|
|
|
|
update: function(x, y) {
|
|
var now = Array.flatten(arguments);
|
|
this.element.setScrollOffset(now[0], now[1]);
|
|
},
|
|
|
|
get: function() {
|
|
var now = [];
|
|
for (var i = 0; i < 2; i++)
|
|
now.push(this.compute(this.from[i], this.to[i]));
|
|
return now;
|
|
},
|
|
|
|
start: function(x, y) {
|
|
var offsetSize = this.element.getSize(),
|
|
scrollSize = this.element.getScrollSize(),
|
|
scroll = this.element.getScrollOffset(),
|
|
values = { x: x, y: y };
|
|
var lookup = { x: 'width', y: 'height' };
|
|
for (var i in values) {
|
|
var s = lookup[i];
|
|
var max = scrollSize[s] - offsetSize[s];
|
|
if (Base.check(values[i]))
|
|
values[i] = Base.type(values[i]) == 'number'
|
|
? values[i].limit(0, max) : max;
|
|
else values[i] = scroll[i];
|
|
values[i] += this.options.offset[i];
|
|
}
|
|
return this.base([scroll.x, scroll.y], [values.x, values.y]);
|
|
},
|
|
|
|
toTop: function() {
|
|
return this.start(false, 0);
|
|
},
|
|
|
|
toLeft: function() {
|
|
return this.start(0, false);
|
|
},
|
|
|
|
toRight: function() {
|
|
return this.start('right', false);
|
|
},
|
|
|
|
toBottom: function() {
|
|
return this.start(false, 'bottom');
|
|
},
|
|
|
|
toElement: function(el) {
|
|
var offset = DomElement.get(el).getOffset();
|
|
return this.start(offset.x, offset.y);
|
|
}
|
|
});
|
|
|
|
Fx.SmoothScroll = Fx.Scroll.extend({
|
|
initialize: function(options, context) {
|
|
context = DomElement.get(context || document);
|
|
var doc = context.getDocument(), win = context.getWindow();
|
|
this.base(doc, options);
|
|
var links = this.options.links ? $$(this.options.links) : $$('a', context);
|
|
var loc = win.location.href.match(/^[^#]*/)[0] + '#';
|
|
links.each(function(link) {
|
|
if (link.$.href.indexOf(loc) != 0) return;
|
|
var hash = link.$.href.substring(loc.length);
|
|
var anchor = hash && DomElement.get('#' + hash, context);
|
|
if (anchor) {
|
|
link.addEvent('click', function(event) {
|
|
this.toElement(anchor);
|
|
var props = anchor.getProperties('name', 'id');
|
|
anchor.removeProperties('name', 'id');
|
|
win.location.hash = hash;
|
|
anchor.setProperties(props);
|
|
event.stop();
|
|
}.bind(this));
|
|
}
|
|
}, this);
|
|
}
|
|
});
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Fx.CSS
|
|
|
|
Fx.CSS = new function() {
|
|
|
|
var parsers = new Hash({
|
|
color: {
|
|
match: function(value) {
|
|
if (value.match(/^#[0-9a-f]{3,6}$/i)) return value.hexToRgb(true);
|
|
return ((value = value.match(/(\d+),\s*(\d+),\s*(\d+)/))) ? [value[1], value[2], value[3]] : false;
|
|
},
|
|
|
|
compute: function(from, to, fx) {
|
|
return from.map(function(value, i) {
|
|
return Math.round(fx.compute(value, to[i]));
|
|
});
|
|
},
|
|
|
|
get: function(value) {
|
|
return value.map(Number);
|
|
}
|
|
},
|
|
|
|
number: {
|
|
match: function(value) {
|
|
return parseFloat(value);
|
|
},
|
|
|
|
compute: function(from, to, fx) {
|
|
return fx.compute(from, to);
|
|
},
|
|
|
|
get: function(value, unit) {
|
|
return (unit) ? value + unit : value;
|
|
}
|
|
}
|
|
});
|
|
|
|
return {
|
|
start: function(element, property, values) {
|
|
values = Array.convert(values);
|
|
// If only one value is specified, use the current state as the
|
|
// starting point.
|
|
if (!Base.check(values[1]))
|
|
values = [ element.getStyle(property), values[0] ];
|
|
var parsed = values.map(Fx.CSS.set);
|
|
return { from: parsed[0], to: parsed[1] };
|
|
},
|
|
|
|
set: function(value) {
|
|
// Array.create splits strings at white spaces through String#toArray
|
|
return Array.convert(value).map(function(val) {
|
|
val = val + '';
|
|
var res = parsers.find(function(parser, key) {
|
|
var value = parser.match(val);
|
|
if (Base.check(value)) return { value: value, parser: parser };
|
|
}) || {
|
|
value: val,
|
|
parser: {
|
|
compute: function(from, to) {
|
|
return to;
|
|
}
|
|
}
|
|
};
|
|
return res;
|
|
});
|
|
},
|
|
|
|
compute: function(from, to, fx) {
|
|
return from.map(function(obj, i) {
|
|
return {
|
|
value: obj.parser.compute(obj.value, to[i].value, fx),
|
|
parser: obj.parser
|
|
};
|
|
});
|
|
},
|
|
|
|
get: function(now, unit) {
|
|
return now.reduce(function(prev, cur) {
|
|
var get = cur.parser.get;
|
|
return prev.concat(get ? get(cur.value, unit) : cur.value);
|
|
}, []);
|
|
}
|
|
}
|
|
};
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Fx.Style
|
|
|
|
Fx.Style = Fx.extend({
|
|
initialize: function(element, property, options) {
|
|
this.base(element, options);
|
|
this.property = property;
|
|
},
|
|
|
|
hide: function() {
|
|
return this.set(0);
|
|
},
|
|
|
|
get: function() {
|
|
return Fx.CSS.compute(this.from, this.to, this);
|
|
},
|
|
|
|
set: function(to) {
|
|
return this.base(Fx.CSS.set(to));
|
|
},
|
|
|
|
start: function(from, to) {
|
|
if (this.timer && this.options.wait) return this;
|
|
var parsed = Fx.CSS.start(this.element, this.property, [from, to]);
|
|
return this.base(parsed.from, parsed.to);
|
|
},
|
|
|
|
update: function(val) {
|
|
this.element.setStyle(this.property, Fx.CSS.get(val, this.options.unit));
|
|
}
|
|
});
|
|
|
|
HtmlElement.inject({
|
|
effect: function(prop, opts) {
|
|
return new Fx.Style(this, prop, opts);
|
|
}
|
|
});
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Fx.Style
|
|
|
|
Fx.Styles = Fx.extend({
|
|
get: function() {
|
|
var that = this;
|
|
return Base.each(this.from, function(from, key) {
|
|
this[key] = Fx.CSS.compute(from, that.to[key], that);
|
|
}, {});
|
|
},
|
|
|
|
set: function(to) {
|
|
return this.base(Base.each(to, function(val, key) {
|
|
this[key] = Fx.CSS.set(val);
|
|
}, {}));
|
|
},
|
|
|
|
start: function(obj) {
|
|
if (this.timer && this.options.wait) return this;
|
|
var from = {}, to = {};
|
|
Base.each(obj, function(val, key) {
|
|
var parsed = Fx.CSS.start(this.element, key, val);
|
|
from[key] = parsed.from;
|
|
to[key] = parsed.to;
|
|
}, this);
|
|
return this.base(from, to);
|
|
},
|
|
|
|
update: function(val) {
|
|
Base.each(val, function(val, key) {
|
|
this.element.setStyle(key, Fx.CSS.get(val, this.options.unit));
|
|
}, this);
|
|
}
|
|
|
|
});
|
|
|
|
HtmlElement.inject({
|
|
effects: function(opts) {
|
|
return new Fx.Styles(this, opts);
|
|
}
|
|
});
|
|
|
|
Fx.Elements = Fx.extend({
|
|
initialize: function(elements, options) {
|
|
this.base(null, options);
|
|
this.elements = DomElement.getAll(elements);
|
|
},
|
|
|
|
start: function(obj) {
|
|
if (this.timer && this.options.wait) return this;
|
|
this.effects = {};
|
|
|
|
function start(that, key, val) {
|
|
var fx = that.effects[key] = new Fx.Styles(that.elements[key], that.options);
|
|
// Tell Fx we're in slave mode
|
|
fx.slave = true;
|
|
fx.start(val);
|
|
}
|
|
|
|
Base.each(obj, function(val, key) {
|
|
if (key == '*') {
|
|
// Wildcard for effects to be applied to all elements
|
|
this.elements.each(function(el, key) {
|
|
start(this, key, val);
|
|
}, this);
|
|
} else if (isNaN(parseInt(key))) {
|
|
// A selector, for elements to be added, if they are not there
|
|
// already.
|
|
var els = DomElement.getAll(key);
|
|
this.elements.append(els);
|
|
els.each(function(el) {
|
|
start(this, this.elements.indexOf(el), val);
|
|
}, this);
|
|
} else {
|
|
// A normal array index in the passed elements array
|
|
start(this, key, val);
|
|
}
|
|
}, this);
|
|
return this.base();
|
|
},
|
|
|
|
set: function(to) {
|
|
// do nothing, since update() handles slaves
|
|
},
|
|
|
|
update: function(to) {
|
|
Base.each(this.effects, function(fx) {
|
|
fx.step();
|
|
});
|
|
}
|
|
});
|
|
|
|
Fx.Transitions = new Base().inject({
|
|
// Override the Fx.Transitions' inject function so that each function that
|
|
// is injected recieved #In, #Out and #InOut as additional methods.
|
|
inject: function(src) {
|
|
// Walk through all passed functions and add the additional functions.
|
|
return this.base(Base.each(src, function(func, name) {
|
|
func.In = func;
|
|
|
|
func.Out = function(pos) {
|
|
return 1 - func(1 - pos);
|
|
}
|
|
|
|
func.InOut = function(pos) {
|
|
return pos <= 0.5 ? func(2 * pos) / 2 : (2 - func(2 * (1 - pos))) / 2;
|
|
}
|
|
}));
|
|
},
|
|
|
|
Linear: function(p) {
|
|
return p;
|
|
}
|
|
});
|
|
|
|
Fx.Transitions.inject({
|
|
Pow: function(p, x) {
|
|
return Math.pow(p, x[0] || 6);
|
|
},
|
|
|
|
Expo: function(p) {
|
|
return Math.pow(2, 8 * (p - 1));
|
|
},
|
|
|
|
Circ: function(p) {
|
|
return 1 - Math.sin(Math.acos(p));
|
|
},
|
|
|
|
Sine: function(p) {
|
|
return 1 - Math.sin((1 - p) * Math.PI / 2);
|
|
},
|
|
|
|
Back: function(p, x) {
|
|
x = x[0] || 1.618;
|
|
return Math.pow(p, 2) * ((x + 1) * p - x);
|
|
},
|
|
|
|
Bounce: function(p) {
|
|
var value;
|
|
for (var a = 0, b = 1; 1; a += b, b /= 2) {
|
|
if (p >= (7 - 4 * a) / 11) {
|
|
value = - Math.pow((11 - 6 * a - 11 * p) / 4, 2) + b * b;
|
|
break;
|
|
}
|
|
}
|
|
return value;
|
|
},
|
|
|
|
Elastic: function(p, x) {
|
|
return Math.pow(2, 10 * --p) * Math.cos(20 * p * Math.PI * (x[0] || 1) / 3);
|
|
}
|
|
|
|
});
|
|
|
|
Fx.Transitions.inject(['Quad', 'Cubic', 'Quart', 'Quint'].each(function(name, i) {
|
|
this[name] = function(p) {
|
|
return Math.pow(p, i + 2);
|
|
}
|
|
}, {}));
|
|
|