From 66a4fcb9f9c575a91fa960c8738e2baf1b7c1a5d Mon Sep 17 00:00:00 2001 From: rolux Date: Mon, 22 Sep 2014 14:11:55 +0200 Subject: [PATCH] Ox.$: various bugfixes and enhancements --- source/Ox/js/DOM.js | 108 ++++++++++++++++++++++++++++---------------- 1 file changed, 68 insertions(+), 40 deletions(-) diff --git a/source/Ox/js/DOM.js b/source/Ox/js/DOM.js index 8a3ecd6c..3e9325d9 100644 --- a/source/Ox/js/DOM.js +++ b/source/Ox/js/DOM.js @@ -29,14 +29,15 @@ Ox.$ Generic HTML element, mimics jQuery @*/ Ox.$ = Ox.element = function $(value) { - var data = {}, + var elementData = {}, elements = Ox.isArray(value) ? value // array of elements : !Ox.isString(value) ? [value] // window, document or element : value[0] == '<' ? [document.createElement(value.slice(1, -1))] : Ox.slice(document.querySelectorAll(value)), mousewheelEvents = ['wheel', 'mousewheel'], originalMousewheelEvents = 'onwheel' in document ? ['wheel'] - : ['mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll']; + : ['mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'], + previousDisplay; function getElements($other) { return $other.forEach ? $other @@ -148,7 +149,10 @@ Ox.$ = Ox.element = function $(value) { args = Ox.makeObject(args); elements.forEach(function(element) { Ox.forEach(args, function(value, key) { - if (element.setAttribute) { + if ( + element.setAttribute + && !Ox.contains([false, null, void 0], value) + ) { element.setAttribute(key, value); } }); @@ -158,12 +162,16 @@ Ox.$ = Ox.element = function $(value) { }, /*@ children Returns the unique list of children of all elements - () -> <[h]> Children + ([selector]) -> <[h]> Children + selector CSS selector @*/ children: function children() { - return Ox.unique(Ox.flatten(elements.map(function(element) { - return element.childNodes; + var children = Ox.unique(Ox.flatten(elements.map(function(element) { + return Ox.slice(element.childNodes); }))); + return Ox.$(selector ? children.filter(function(child) { + return Ox.$(child).is(selector); + }) : children); }, /*@ css Gets or sets a CSS attribute for all elements @@ -178,9 +186,8 @@ Ox.$ = Ox.element = function $(value) { if (args.length == 1 && Ox.isString(args[0])) { return elements[0].style[args[0]]; } else { - args = Ox.makeObject(args); elements.forEach(function(element) { - Ox.forEach(args, function(value, key) { + Ox.forEach(Ox.makeObject(args), function(value, key) { element.style[key] = value; }); }); @@ -198,22 +205,32 @@ Ox.$ = Ox.element = function $(value) { @*/ data: function data() { if (arguments.length == 0) { - return data; + return elementData; } else if (arguments.length == 1 && Ox.isString(arguments[0])) { - return data[arguments[0]]; + return elementData[arguments[0]]; } else { Ox.forEach(Ox.makeObject(arguments), function(value, key) { - data[key] = value; + elementData[key] = value; }); return this; } }, /*@ - elements Returns all elements - () -> <[h]> All elements + elements All elements @*/ - elements: function elements() { - return elements; + elements: elements, + /*@ + eq Reduces the list of elements to the one at the given index + () -> This DOM object + @*/ + eq: function eq() { + var that = this; + Ox.loop(1, this.length, function(index) { + delete that[index]; + }); + this.elements = [this.elements[index]]; + this.length = 1; + return this; }, /*@ empty Empties the inner HTML of all elements @@ -243,10 +260,10 @@ Ox.$ = Ox.element = function $(value) { ([selector]) -> <[h]> Elements selector CSS selector @*/ - find: function find(string) { - return Ox.unique(elements.map(function(element) { - return element.querySelectorAll(string || '*'); - })); + find: function find(selector) { + return Ox.$(Ox.unique(Ox.flatten(elements.map(function(element) { + return Ox.slice(element.querySelectorAll(selector || '*')); + })))); }, /*@ forEach Loops over all elements @@ -279,6 +296,7 @@ Ox.$ = Ox.element = function $(value) { () -> This DOM object @*/ hide: function hide() { + previousDisplay = this.css('display'); return this.css({display: 'none'}); }, /*@ @@ -308,7 +326,7 @@ Ox.$ = Ox.element = function $(value) { object Another DOM object @*/ insertAfter: function insertAfter($other) { - var nextSibling = $element[0].nextSibling; + var nextSibling = $other[0].nextSibling; elements.forEach(function(element) { $other[0].parentNode.insertBefore(element, nextSibling); }) @@ -330,12 +348,14 @@ Ox.$ = Ox.element = function $(value) { (selector) -> True if the element matches the selector selector CSS selector @*/ - is: function is(string) { + is: function is(selector) { return elements.some(function(element) { - return Ox.contains( - (element.parentNode || document).querySelectorAll(string), - element - ); + var parent = element.parentNode; + if (!parent) { + parent = document.createElement('div'); + parent.appendChild(element); + } + return Ox.contains(parent.querySelectorAll(selector), element); }); }, /*@ @@ -355,9 +375,9 @@ Ox.$ = Ox.element = function $(value) { () -> <[h]> Siblings @*/ next: function next() { - return Ox.unique(Ox.filter(elements.map(function(element) { + return Ox.$(Ox.unique(Ox.filter(elements.map(function(element) { return element.nextSibling; - }))); + })))); }, /*@ nextAll Returns the unique list of siblings after all elements @@ -375,7 +395,7 @@ Ox.$ = Ox.element = function $(value) { siblings.push(sibling); } }); - return Ox.unique(siblings); + return Ox.$(Ox.unique(siblings)); }, /*@ off Unbinds a callback from an event @@ -438,13 +458,14 @@ Ox.$ = Ox.element = function $(value) { () -> <[h]> Parent elements @*/ parent: function parent() { - return Ox.unique(elements.map(function(element) { + return Ox.$(Ox.unique(Ox.compact(elements.map(function(element) { return element.parentNode; - })); + })))); }, /*@ parents Returns the unique list of all ancestors of all elements - () -> <[h]> Ancestor elements + ([selector]) -> <[h]> Ancestor elements + selector CSS selector @*/ parents: function parents() { var parents = []; @@ -458,7 +479,10 @@ Ox.$ = Ox.element = function $(value) { parents.unshift(parent); } }); - return Ox.unique(parents); + parents = Ox.unique(parents); + return Ox.$(selector ? parents.filter(function(parent) { + return Ox.$(parent).is(selector); + }) : parents); }, /*@ prepend Prepends one or more DOM objects to this DOM object @@ -496,9 +520,9 @@ Ox.$ = Ox.element = function $(value) { () -> <[h]> Siblings @*/ prev: function prev() { - return Ox.unique(Ox.filter(elements.map(function(element) { + return Ox.$(Ox.unique(Ox.filter(elements.map(function(element) { return element.previousSibling; - }))); + })))); }, /*@ prevAll Returns the unique list of siblings before all elements @@ -516,7 +540,7 @@ Ox.$ = Ox.element = function $(value) { siblings.unshift(sibling); } }); - return Ox.unique(siblings); + return Ox.$(Ox.unique(siblings)); }, /*@ reduce Applies `reduce` to all elements @@ -611,14 +635,15 @@ Ox.$ = Ox.element = function $(value) { () -> This DOM object @*/ show: function show() { - return this.css({display: 'block'}); + return this.css({display: previousDisplay || 'block'}); }, /*@ siblings Returns all siblings of all elements - () -> <[h]> Siblings + ([selector]) -> <[h]> Siblings + selector CSS selector @*/ siblings: function siblings() { - return Ox.unique(elements.map(function(element) { + var siblings = Ox.unique(elements.map(function(element) { return Ox.filter( element.parentNode.childNodes, function(sibling) { @@ -626,6 +651,9 @@ Ox.$ = Ox.element = function $(value) { } ); })); + return Ox.$(selector ? siblings.filter(function(sibling) { + return Ox.$(sibling).is(selector); + }) : siblings); }, /*@ some Tests if some elements satisfy a given condition @@ -645,8 +673,8 @@ Ox.$ = Ox.element = function $(value) { var text = ''; if (arguments.length == 0) { elements.forEach(function(element) { - text += Ox.isString(this.textContent) ? this.textContent - : this.innerText; + text += Ox.isString(element.textContent) + ? element.textContent : element.innerText; }); return text; } else {