from: replace jQuery
addClass(classNames = '') {
this.each((el) => {
classNames.split(' ').forEach((className) => {
el.classList.add(className);
});
});
return this;
}// Usage
$utils('ul li').addClass('myClass yourClass');append(html) {
this.each((el) => {
if (typeof html === 'string') {
el.insertAdjacentHTML('beforeend', html);
} else {
el.appendChild(html);
}
});
return this;
}attr(name, value) {
if (value === undefined) {
if (!this.element) {
return '';
}
return this.element.getAttribute(name);
}
this.each((el) => {
el.setAttribute(name, value);
});
return this;
}children() {
return new Utils(this.element.children);
}closest(selector) {
if (!this.element) {
return this;
}
const matchesSelector =
this.element.matches ||
this.element.webkitMatchesSelector ||
this.element.mozMatchesSelector ||
this.element.msMatchesSelector;
while (this.element) {
if (matchesSelector.call(this.element, selector)) {
return new Utils(this.element);
}
this.element = this.element.parentElement;
}
return this;
}css(css, value) {
if (value !== undefined) {
this.each((el) => {
Utils.setCss(el, css, value);
});
return this;
}
if (typeof css === 'object') {
for (const property in css) {
if (Object.prototype.hasOwnProperty.call(css, property)) {
this.each((el) => {
Utils.setCss(el, property, css[property]);
});
}
}
return this;
}
const cssProp = Utils.camelCase(css);
const property = Utils.styleSupport(cssProp);
return getComputedStyle(this.element)[property];
}data(name, value) {
return this.attr(`data-${name}`, value);
}each(func) {
if (!this.elements) {
return this;
}
if (this.elements.length !== undefined) {
[].slice.call(this.elements).forEach((el, index) => {
func.call(el, el, index);
});
} else {
func.call(this.element, this.element, 0);
}
return this;
}empty() {
this.each((el) => {
el.innerHTML = '';
});
return this;
}eq(index) {
return new Utils(this.elements[index]);
}find(selector) {
return new Utils(Utils.getSelector(selector, this.element));
}first() {
if (this.elements && this.elements.length !== undefined) {
return new Utils(this.elements[0]);
}
return new Utils(this.elements);
}get() {
return this.elements;
}hasClass(className) {
if (!this.element) {
return false;
}
return this.element.classList.contains(className);
}height() {
if (!this.element) {
return 0;
}
const style = window.getComputedStyle(this.element, null);
return parseFloat(style.height.replace('px', ''));
}html(html) {
if (html === undefined) {
if (!this.element) {
return '';
}
return this.element.innerHTML;
}
this.each((el) => {
el.innerHTML = html;
});
return this;
}index() {
if (!this.element) return -1;
let i = 0;
do {
i++;
} while ((this.element = this.element.previousElementSibling));
return i;
}is(el) {
if (typeof el === 'string') {
return (
this.element.matches ||
this.element.matchesSelector ||
this.element.msMatchesSelector ||
this.element.mozMatchesSelector ||
this.element.webkitMatchesSelector ||
this.element.oMatchesSelector
).call(this.element, el);
}
return this.element === (el.element || el);
}next() {
if (!this.element) {
return this;
}
return new Utils(this.element.nextElementSibling);
}nextAll(filter) {
if (!this.element) {
return this;
}
const sibs = [];
let nextElem = this.element.parentNode.firstChild;
do {
if (nextElem.nodeType === 3) continue; // ignore text nodes
if (nextElem === this.element) continue; // ignore this.element of target
if (nextElem === this.element.nextElementSibling) {
if (!filter || filter(this.element)) {
sibs.push(nextElem);
this.element = nextElem;
}
}
} while ((nextElem = nextElem.nextSibling));
return new Utils(sibs);
}off(event) {
if (!this.elements) {
return this;
}
Object.keys(Utils.eventListeners).forEach((eventName) => {
if (Utils.isEventMatched(event, eventName)) {
Utils.eventListeners[eventName].forEach((listener) => {
this.each((el) => {
el.removeEventListener(
eventName.split('.')[0],
listener
);
});
});
}
});
return this;
}offset() {
if (!this.element) {
return {
left: 0,
top: 0,
};
}
const box = this.element.getBoundingClientRect();
return {
top:
box.top +
window.pageYOffset -
document.documentElement.clientTop,
left:
box.left +
window.pageXOffset -
document.documentElement.clientLeft,
};
}offsetParent() {
if (!this.element) {
return this;
}
return new Utils(this.element.offsetParent);
}on(events, listener) {
if (!this.elements) {
return this;
}
events.split(' ').forEach((event) => {
if (!Array.isArray(Utils.eventListeners[event])) {
Utils.eventListeners[event] = [];
}
Utils.eventListeners[event].push(listener);
this.each((el) => {
el.addEventListener(event.split('.')[0], listener);
});
});
return this;
}one(event, listener) {
this.each((el) => {
new Utils(el).on(event, () => {
new Utils(el).off(event);
listener(event);
});
});
return this;
}outerHeight(margin) {
if (!this.element) {
return 0;
}
if (margin !== undefined) {
let height = this.element.offsetHeight;
const style = getComputedStyle(this.element);
height +=
parseInt(style.marginTop, 10) +
parseInt(style.marginBottom, 10);
return height;
}
return this.element.offsetHeight;
}outerWidth(margin) {
if (!this.element) {
return 0;
}
if (margin !== undefined) {
let width = this.element.offsetWidth;
const style = window.getComputedStyle(this.element);
width +=
parseInt(style.marginLeft, 10) +
parseInt(style.marginRight, 10);
return width;
}
return this.element.offsetWidth;
}parent() {
return new Utils(this.element.parentElement);
}parentsUntil(selector, filter) {
if (!this.element) {
return this;
}
const result = [];
const matchesSelector =
this.element.matches ||
this.element.webkitMatchesSelector ||
this.element.mozMatchesSelector ||
this.element.msMatchesSelector;
// match start from parent
let el = this.element.parentElement;
while (el && !matchesSelector.call(el, selector)) {
if (!filter) {
result.push(el);
} else if (matchesSelector.call(el, filter)) {
result.push(el);
}
el = el.parentElement;
}
return new Utils(result);
}position() {
return {
left: this.element.offsetLeft,
top: this.element.offsetTop,
};
}prepend(html) {
this.each((el) => {
if (typeof html === 'string') {
el.insertAdjacentHTML('afterbegin', html);
} else {
el.insertBefore(html, el.firstChild);
}
});
return this;
}prev() {
if (!this.element) {
return this;
}
return new Utils(this.element.previousElementSibling);
}prevAll(filter) {
if (!this.element) {
return this;
}
const sibs = [];
while ((this.element = this.element.previousSibling)) {
if (this.element.nodeType === 3) {
continue; // ignore text nodes
}
if (!filter || filter(this.element)) sibs.push(this.element);
}
return new Utils(sibs);
}remove() {
this.each((el) => {
el.parentNode.removeChild(el);
});
return this;
}removeAttr(attributes) {
const attrs = attributes.split(' ');
this.each((el) => {
attrs.forEach((attr) => el.removeAttribute(attr));
});
return this;
}removeClass(classNames) {
this.each((el) => {
// IE doesn't support multiple arguments
classNames.split(' ').forEach((className) => {
el.classList.remove(className);
});
});
return this;
}siblings() {
if (!this.element) {
return this;
}
const elements = Array.prototype.filter.call(
this.element.parentNode.children,
(child) => child !== this.element
);
return new Utils(elements);
}text(text) {
if (text === undefined) {
if (!this.element) {
return '';
}
return this.element.textContent;
}
this.each((el) => {
el.textContent = text;
});
return this;
}toggleClass(className) {
if (!this.element) {
return this;
}
this.element.classList.toggle(className);
}trigger(event, detail) {
if (!this.element) {
return this;
}
const eventName = event.split('.')[0];
const isNativeEvent =
typeof document.body[`on${eventName}`] !== 'undefined';
if (isNativeEvent) {
this.each((el) => {
el.dispatchEvent(new Event(eventName));
});
return this;
}
const customEvent = new CustomEvent(eventName, {
detail: detail || null,
});
this.each((el) => {
el.dispatchEvent(customEvent);
});
return this;
}unwrap() {
this.each((el) => {
const elParentNode = el.parentNode;
if (elParentNode !== document.body) {
elParentNode.parentNode.insertBefore(el, elParentNode);
elParentNode.parentNode.removeChild(elParentNode);
}
});
return this;
}val(value) {
if (!this.element) {
return '';
}
if (value === undefined) {
return this.element.value;
}
this.element.value = value;
}width() {
if (!this.element) {
return 0;
}
const style = window.getComputedStyle(this.element, null);
return parseFloat(style.width.replace('px', ''));
}wrap(className) {
this.each((el) => {
const wrapper = document.createElement('div');
wrapper.className = className;
el.parentNode.insertBefore(wrapper, el);
wrapper.appendChild(el);
});
return this;
}