Ox.$: add children, find, insertAfter, insertBefore, next, nextAll, parent, parents, prepend, prependTo, prev, and prevAll, fix attr and one

source/Ox/js/DOM.js

@@ -48,24 +48,24 @@ Ox.$ = Ox.element = function(value) {
             return this;
         },
         /*@
-        append <f> Appends another element to this element
+        append <f> Appends one or more elements to this element
             (element) -> <o> This element
             element <o|[o]> One or more elements
         @*/
         append: function() {
             var that = this;
-            Ox.makeArray(arguments[0]).forEach(function(element) {
+            Ox.makeArray(arguments[0]).forEach(function($element) {
-                that[0].appendChild(element[0]);                
+                that[0].appendChild($element[0]);                
             });
             return this;
         },
         /*@
-        appendTo <f> appends this element object to another element object
+        appendTo <f> Appends this element object to another element object
             (element) -> <o> This element
             element <o> Another element
         @*/
-        appendTo: function(element) {
+        appendTo: function($element) {
-            element[0].appendChild(this[0]);
+            $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 <f> Returns the children of this element
+            () -> <[o]> Children
+        @*/
+        children: function() {
+            return Ox.slice(this[0].childNodes);
+        },
+        /*@
         css <f> Gets or sets a CSS attribute
             (key) -> <s> Value
             (key, value) -> <o> This element
@@ -119,6 +129,14 @@ Ox.$ = Ox.element = function(value) {
             return this.html('');
         },
         /*@
+        find <f> Find descendant elements
+            ([selector]) -> <a> Elements
+            selector <s|'*'> CSS selector
+        @*/
+        find: function(string) {
+            return Ox.slice(this[0].querySelectorAll(string || '*'));
+        },
+        /*@
         hasClass <f> Returns true if this element has a given class
             (className) -> <b> True if this element has the class
             className <s> Class name
@@ -157,6 +175,66 @@ Ox.$ = Ox.element = function(value) {
             return ret;
         },
         /*@
+        insertAfter <f> Inserts this element after another element
+            (element) -> <o> This element
+            element <o> Another element
+        @*/
+        insertAfter: function($element) {
+            $element[0].parentNode.insertBefore(this[0], $element[0].nextSibling);
+            return this;
+        },
+        /*@
+        insertBefore <f> Inserts this element before another element
+            (element) -> <o> This element
+            element <o> Another element
+        @*/
+        insertBefore: function($element) {
+            $element[0].parentNode.insertBefore(this[0], $element[0]);
+            return this;
+        },
+        /*@
+        next <f> Returns the sibling after this element
+            () -> <o> Next element
+        @*/
+        next: function() {
+            return this[0].nextSibling;
+        },
+        /*@
+        nextAll <f> 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 <f> Unbinds a callback from an event
+            (event) -> <o> This element (unbinds all callbacks)
+            (event, callback) -> <o> This element
+            ({event0: callback0, event1: callback1, ...}) -> <o> This element
+            event <s> Event name
+            callback <f> 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 <f> Binds a callback to an event
             (event, callback) -> <o> This element
             ({event0: callback0, event1: callback1, ...}) -> <o> This element
@@ -180,35 +258,85 @@ Ox.$ = Ox.element = function(value) {
                 e <o> 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 <f> Unbinds a callback from an event
+        parent <f> Returns the parent of this element
-            (event) -> <o> This element (unbinds all callbacks)
+            () -> <o> Parent element
-            (event, callback) -> <o> This element
-            ({event0: callback0, event1: callback1, ...}) -> <o> This element
-            event <s> Event name
-            callback <f> Callback function
         @*/
-        off: function(event, callback) {
+        parent: function() {
-            var that = this;
+            return this[0].parentNode;
-            Ox.forEach(Ox.makeObject(arguments), function(callback, event) {
+        },
-                if (callback) {
+        /*@
-                    that[0].removeEventListener(event, callback, false);
+        parents <f> Returns all ancestors of this element
-                } else {
+            () -> <[o]> Ancestor elements
-                    that[0]['on' + event] = null;
+        @*/
+        parents: function() {
+            var parent = this[0],
+                parents = [];
+            while (true) {
+                var parent = parent.parentNode;
+                if (!parent) {
+                    break;
                 }
+                parents.unshift(parent);
+            }
+            return parents;
+        },
+        /*@
+        prepend <f> Prepends one or more elements to this element
+            (element) -> <o> This element
+            element <o|[o]> 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 <f> Prepends this element object to another element object
+            (element) -> <o> This element
+            element <o> Another element
+        @*/
+        prependTo: function($element) {
+            var element = $element[0];
+            element.insertBefore(this[0], element.firstChild);
+            return this;
+        },
+        /*@
+        prev <f> Returns the sibling before this element
+            () -> <o> Next element
+        @*/
+        prev: function() {
+            return this[0].previousSibling;
+        },
+        /*@
+        prevAll <f> 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 <f> Removes this element from the DOM
             () -> <o> This element
         @*/