diff --git a/source/Ox/js/DOM.js b/source/Ox/js/DOM.js index cf5bea3d..d272232d 100644 --- a/source/Ox/js/DOM.js +++ b/source/Ox/js/DOM.js @@ -48,24 +48,24 @@ Ox.$ = Ox.element = function(value) { return this; }, /*@ - append Appends another element to this element + append Appends one or more elements to this element (element) -> This element element One or more elements @*/ append: function() { var that = this; - Ox.makeArray(arguments[0]).forEach(function(element) { - that[0].appendChild(element[0]); + Ox.makeArray(arguments[0]).forEach(function($element) { + that[0].appendChild($element[0]); }); return this; }, /*@ - appendTo appends this element object to another element object + appendTo Appends this element object to another element object (element) -> This element element Another element @*/ - appendTo: function(element) { - element[0].appendChild(this[0]); + appendTo: function($element) { + $element[0].appendChild(this[0]); return this; }, /*@ @@ -79,19 +79,29 @@ Ox.$ = Ox.element = function(value) { attr: function() { var ret, that = this; if (arguments.length == 1 && Ox.isString(arguments[0])) { - ret = this[0].getAttribute(arguments[0]); + ret = this[0].getAttribute + ? this[0].getAttribute(arguments[0]) + : null; + // fixme: why exactly is this needed? if (ret === null) { ret = void 0; } } else { Ox.forEach(Ox.makeObject(arguments), function(value, key) { - that[0].setAttribute(key, value); + that[0].setAttribute && that[0].setAttribute(key, value); }); ret = this; } return ret; }, /*@ + children Returns the children of this element + () -> <[o]> Children + @*/ + children: function() { + return Ox.slice(this[0].childNodes); + }, + /*@ css Gets or sets a CSS attribute (key) -> Value (key, value) -> This element @@ -119,6 +129,14 @@ Ox.$ = Ox.element = function(value) { return this.html(''); }, /*@ + find Find descendant elements + ([selector]) -> Elements + selector CSS selector + @*/ + find: function(string) { + return Ox.slice(this[0].querySelectorAll(string || '*')); + }, + /*@ hasClass Returns true if this element has a given class (className) -> True if this element has the class className Class name @@ -157,6 +175,66 @@ Ox.$ = Ox.element = function(value) { return ret; }, /*@ + insertAfter Inserts this element after another element + (element) -> This element + element Another element + @*/ + insertAfter: function($element) { + $element[0].parentNode.insertBefore(this[0], $element[0].nextSibling); + return this; + }, + /*@ + insertBefore Inserts this element before another element + (element) -> This element + element Another element + @*/ + insertBefore: function($element) { + $element[0].parentNode.insertBefore(this[0], $element[0]); + return this; + }, + /*@ + next Returns the sibling after this element + () -> Next element + @*/ + next: function() { + return this[0].nextSibling; + }, + /*@ + nextAll Returns all siblings after this element + () -> <[o]> Next elements + @*/ + nextAll: function() { + var sibling = this[0], + siblings = []; + while (true) { + var sibling = sibling.nextSibling; + if (!sibling) { + break; + } + siblings.push(sibling); + } + return siblings; + }, + /*@ + off Unbinds a callback from an event + (event) -> This element (unbinds all callbacks) + (event, callback) -> This element + ({event0: callback0, event1: callback1, ...}) -> This element + event Event name + callback Callback function + @*/ + off: function(event, callback) { + var that = this; + Ox.forEach(Ox.makeObject(arguments), function(callback, event) { + if (callback) { + that[0].removeEventListener(event, callback, false); + } else { + that[0]['on' + event] = null; + } + }); + return this; + }, + /*@ on Binds a callback to an event (event, callback) -> This element ({event0: callback0, event1: callback1, ...}) -> This element @@ -180,35 +258,85 @@ Ox.$ = Ox.element = function(value) { e Event properties @*/ one: function(events) { - var that = this; + var args = Ox.slice(arguments), + that = this; Ox.forEach(Ox.makeObject(arguments), function(callback, event) { that.on(event, function fn() { that.off(event, fn); - callback(); + return callback.apply(that, args); }); }); return this; }, /*@ - off Unbinds a callback from an event - (event) -> This element (unbinds all callbacks) - (event, callback) -> This element - ({event0: callback0, event1: callback1, ...}) -> This element - event Event name - callback Callback function + parent Returns the parent of this element + () -> Parent element @*/ - off: function(event, callback) { - var that = this; - Ox.forEach(Ox.makeObject(arguments), function(callback, event) { - if (callback) { - that[0].removeEventListener(event, callback, false); - } else { - that[0]['on' + event] = null; + parent: function() { + return this[0].parentNode; + }, + /*@ + parents Returns all ancestors of this element + () -> <[o]> Ancestor elements + @*/ + parents: function() { + var parent = this[0], + parents = []; + while (true) { + var parent = parent.parentNode; + if (!parent) { + break; } + parents.unshift(parent); + } + return parents; + }, + /*@ + prepend Prepends one or more elements to this element + (element) -> This element + element One or more elements + @*/ + prepend: function() { + var parent = this[0].parentNode; + Ox.makeArray(arguments[0]).reverse().forEach(function($element) { + parent.insertBefore($element[0], parent.firstChild); }); return this; }, /*@ + prependTo Prepends this element object to another element object + (element) -> This element + element Another element + @*/ + prependTo: function($element) { + var element = $element[0]; + element.insertBefore(this[0], element.firstChild); + return this; + }, + /*@ + prev Returns the sibling before this element + () -> Next element + @*/ + prev: function() { + return this[0].previousSibling; + }, + /*@ + prevAll Returns all siblings before this element + () -> <[o]> Next elements + @*/ + prevAll: function() { + var sibling = this[0], + siblings = []; + while (true) { + var sibling = sibling.previousSibling; + if (!sibling) { + break; + } + siblings.unshift(sibling); + } + return siblings; + }, + /*@ remove Removes this element from the DOM () -> This element @*/