clean up Ox.$

source/Ox/js/DOM.js

@@ -19,7 +19,7 @@ Ox.canvas = function() {
         image = isImage ? arguments[0] : {
             width: arguments[0], height: arguments[1]
         };
-    c.context = (c.canvas = Ox.element('<canvas>').attr({
+    c.context = (c.canvas = Ox.$('<canvas>').attr({
         width: image.width, height: image.height
     })[0]).getContext('2d');
     isImage && c.context.drawImage(image, 0, 0);
@@ -31,8 +31,8 @@ Ox.canvas = function() {
 
 /*@
 Ox.documentReady <function> Calls a callback function once the DOM is ready
-    (callback) -> <boolean> If true, the document was ready
+    (callback) -> <b> If true, the document was ready
-    callback <function> Callback function
+    callback <f> Callback function
 @*/
 Ox.documentReady = (function() {
     var callbacks = [];
@@ -55,7 +55,7 @@ Ox.documentReady = (function() {
 }());
 
 /*@
-Ox.element <f> Generic HTML element, mimics jQuery
+Ox.$ <f> Generic HTML element, mimics jQuery
     (str) -> <o> Element object
     str <s> Tagname ('<tagname>') or selector ('tagname', '.classname', '#id')
     > Ox.element("<div>").addClass("red").hasClass("red")
@@ -70,6 +70,8 @@ Ox.element <f> Generic HTML element, mimics jQuery
     "red"
     > Ox.element("<div>").html("red").html()
     "red"
+    > Ox.element("<div>").html("red").empty().html()
+    ""
 @*/
 Ox.$ = Ox.element = function(val) {
     // fixme: remove click and mousedown,
@@ -89,25 +91,21 @@ Ox.$ = Ox.element = function(val) {
             className <s> Class name
         @*/
         addClass: function(str) {
-            /* fixme:
+            this[0].className = Ox.unique(((
-            this[0].className = Ox.unique(
+                this[0].className ? this[0].className + ' ' : ''
-                this[0].className.split(' ').push(className)
+            ) + Ox.clean(str)).split(' ')).join(' ');
-            ).join(' ');
-            */
-            this[0].className = this[0].className
-                ? Ox.unique(
-                    (this[0].className + ' ' + str).split(' ')
-                ).join(' ')
-                : str;
             return this;
         },
         /*@
         append <f> Appends another element to this element
             (element) -> <o> This element
-            element <o> Another element
+            element <o|[o]> One or more elements
         @*/
-        append: function(element) {
+        append: function() {
-            this[0].appendChild(element[0]);
+            var that = this;
+            Ox.toArray(arguments[0]).forEach(function(element) {
+                that[0].appendChild(element[0]);                
+            });
             return this;
         },
         /*@
@@ -121,9 +119,9 @@ Ox.$ = Ox.element = function(val) {
         },
         /*@
         attr <f> Gets or sets an attribute
-            (key)          -> <s> Value
+            (key) -> <s> Value
-            (key, value)   -> <o> This element
+            (key, value) -> <o> This element
-            ({key, value}) -> <o> This element
+            ({key: value, key1: value1, ...}) -> <o> This element
             key   <str> Attribute name
             value <str> Attribute value
         @*/
@@ -139,40 +137,27 @@ Ox.$ = Ox.element = function(val) {
             }
             return ret;
         },
-        bind: function(events) {
-            var that = this;
-            Ox.forEach(Ox.makeObject(arguments), function(callback, event) {
-                that[0]['on' + event] = callback;
-            });
-            return this;
-        },
-        // FIXME: should be "one"
-        bindOnce: function(events) {
-            var that = this;
-            Ox.forEach(Ox.makeObject(arguments), function(callback, event) {
-                that[0]['on' + event] = function() {
-                    that.unbind(event);
-                    callback();
-                };
-            });
-            return this;
-        },
         /*@
-        click <f> Binds a function to the click event
+        bind <f> Binds a callback to an event
-            (callback) -> <o> This element
+            (event, callback) -> <o> This element
+            ({event0: callback0, event1: callback1, ...}) -> <o> This element
+            event <s> Event name
             callback <f> Callback function
-                event <o> The DOM event
+                e <o> Event properties
         @*/
-        click: function(callback) {
+        bind: function() {
-            this[0].onclick = callback;
+            var that = this;
+            Ox.forEach(Ox.makeObject(arguments), function(callback, event) {
+                that[0].addEventListener(event, callback);
+            });
             return this;
         },
         /*@
         css <f> Gets or sets a CSS attribute
-            (key)          -> <s> Value
+            (key) -> <s> Value
-            (key, value)   -> <o> This element
+            (key, value) -> <o> This element
-            ({key, value}) -> <o> This element
+            ({key0: value0, key1: value1, ...}) -> <o> This element
-            key   <str> Attribute name
+            key <str> Attribute name
             value <str> Attribute value
         @*/
         css: function() {
@@ -187,26 +172,38 @@ Ox.$ = Ox.element = function(val) {
             }
             return ret;
         },
+        /*@
+        empty <f> Empties the inner HTML
+            () -> <o> This element
+        @*/
         empty: function() {
             return this.html('');
         },
         /*@
-        hasClass <f> Returns true if the element has a given class
+        hasClass <f> Returns true if this element has a given class
-            (className) -> <b> True if the element has the class
+            (className) -> <b> True if this element has the class
             className <s> Class name
         @*/
         hasClass: function(str) {
             return this[0].className.split(' ').indexOf(str) > -1;
         },
+        /*@
+        height <f> Returns the height of this element
+            () -> <n> Height in px
+        @*/
         height: function() {
             return this[0].offsetHeight;
         },
+        /*@
+        hide <f> Hides this element
+            () -> <o> This element
+        @*/
         hide: function() {
             return this.css({display: 'none'});
         },
         /*@
         html <f> Gets or sets the inner HTML
-            ()     -> <s> The inner HTML
+            () -> <s> The inner HTML
             (html) -> <o> This element
             html <s> The inner HTML
         @*/
@@ -221,15 +218,27 @@ Ox.$ = Ox.element = function(val) {
             return ret;
         },
         /*@
-        mousedown <f> Binds a function to the mousedown event
+        one <f> Binds a callback to an event and unbinds it on first invocation
-            (callback) -> <o> This element
+            (event, callback) -> <o> This element
+            ({event0: callback0, event1: callback1, ...}) -> <o> This element
+            event <s> Event name
             callback <f> Callback function
-                event <o> The DOM event
+                e <o> Event properties
         @*/
-        mousedown: function(callback) {
+        one: function(events) {
-            this[0].onmousedown = callback;
+            var that = this;
+            Ox.forEach(Ox.makeObject(arguments), function(callback, event) {
+                that.bind(event, function f() {
+                    that.unbind(event, f);
+                    callback();
+                });
+            });
             return this;
         },
+        /*@
+        remove <f> Removes this element from the DOM
+            () -> <o> This element
+        @*/
         remove: function() {
             this[0].parentNode.removeChild(this[0]);
             return this;
@@ -237,10 +246,13 @@ Ox.$ = Ox.element = function(val) {
         /*@
         removeAttr <f> Removes an attribute
             (key) -> <o> This element
+            ([key0, key1, ...]) -> <o> This element
             key <s> The attribute
         @*/
-        removeAttr: function(key) {
+        removeAttr: function() {
-            this[0].removeAttribute(key);
+            Ox.toArray(arguments[0]).forEach(function(key) {
+                this[0].removeAttribute(key);
+            });
             return this;
         },
         /*@
@@ -249,20 +261,46 @@ Ox.$ = Ox.element = function(val) {
             className <s> Class name
         @*/
         removeClass: function(str) {
-            this[0].className = Ox.filter(
+            var arr = Ox.clean(str).split(' ');
-                this[0].className.split(' '), function(className) {
+            this[0].className = this[0].className.split(' ').filter(
-                    return className != str;
+                function(className) {
+                    return arr.indexOf(className) == -1;
                 }
             ).join(' ');
             return this;
         },
+        /*@
+        show <f> Show this element
+            () -> This element
+        @*/
         show: function() {
             return this.css({display: 'block'});
         },
-        unbind: function(event) {
+        /*@
-            this[0]['on' + event] = null;
+        unbind <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
+        @*/
+        unbind: function(event, callback) {
+            var that = this;
+            Ox.forEach(Ox.makeObject(arguments), function(callback, event) {
+                if (callback) {
+                    that[0].removeEventListener(event, callback);
+                } else {
+                    that[0]['on' + event] = null;
+                }
+            });
             return this;
         },
+        /*@
+        val <f> Gets or sets the value property of this element
+            () -> <s> Value
+            (value) -> <o> This element
+            value <s> Value
+        @*/
         val: function() {
             var ret;
             if (arguments.length == 0) {
@@ -273,6 +311,10 @@ Ox.$ = Ox.element = function(val) {
             }
             return ret;
         },
+        /*@
+        width <f> Returns the width of this element
+            () -> <n> Width in px
+        @*/
         width: function() {
             return this[0].offsetWidth;            
         }