Ox.$: various bugfixes and enhancements

This commit is contained in:
rolux 2014-09-22 14:11:55 +02:00
parent ef127e1db4
commit 66a4fcb9f9

View file

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