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