Ox.$: various bugfixes and enhancements
This commit is contained in:
parent
ef127e1db4
commit
66a4fcb9f9
1 changed files with 68 additions and 40 deletions
|
@ -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 {
|
||||||
|
|
Loading…
Reference in a new issue