145 lines
3.6 KiB
JavaScript
145 lines
3.6 KiB
JavaScript
// This small library is meant to be a lightweight replacement of jQuery basic functions.
|
|
|
|
window.$ = document.querySelectorAll.bind(document);
|
|
Node.prototype.on = window.on = function (eventNames, fn) {
|
|
let events = eventNames.split(' ')
|
|
for (let i = 0; i < events.length; ++i) {
|
|
let name = events[i];
|
|
this.addEventListener(name, fn);
|
|
}
|
|
return this;
|
|
};
|
|
NodeList.prototype.__proto__ = Array.prototype;
|
|
NodeList.prototype.on = NodeList.prototype.addEventListener = function (eventNames, fn) {
|
|
this.forEach(function (elem, i) {
|
|
elem.on(eventNames, fn);
|
|
});
|
|
return this;
|
|
}
|
|
NodeList.prototype.addClass = function(className) {
|
|
this.forEach(function (elem, i) {
|
|
elem.classList.add(className);
|
|
});
|
|
return this;
|
|
}
|
|
Element.prototype.addClass = function(className) {
|
|
this.classList.add(className);
|
|
return this;
|
|
}
|
|
NodeList.prototype.removeClass = function(className) {
|
|
this.forEach(function (elem, i) {
|
|
elem.classList.remove(className);
|
|
});
|
|
return this;
|
|
}
|
|
Element.prototype.removeClass = function(className) {
|
|
this.classList.remove(className);
|
|
return this;
|
|
}
|
|
NodeList.prototype.toggleClass = function(className) {
|
|
this.forEach(function (elem, i) {
|
|
elem.classList.toggle(className);
|
|
});
|
|
return this;
|
|
}
|
|
Element.prototype.toggleClass = function(className) {
|
|
this.classList.toggle(className);
|
|
return this;
|
|
}
|
|
NodeList.prototype.hasClass = function(className) {
|
|
return this.item(0).classList.contains(className);
|
|
}
|
|
Element.prototype.hasClass = function(className) {
|
|
this.classList.contains(className);
|
|
}
|
|
Node.prototype.offset = function() {
|
|
let _x = 0;
|
|
let _y = 0;
|
|
let el = this;
|
|
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
|
|
_x += el.offsetLeft - el.scrollLeft;
|
|
_y += el.offsetTop - el.scrollTop;
|
|
el = el.offsetParent;
|
|
}
|
|
return { top: _y, left: _x };
|
|
}
|
|
NodeList.prototype.offset = function() {
|
|
this.item(0).offset();
|
|
}
|
|
Element.prototype.attr = function (key) {
|
|
return this.attributes[key].value;
|
|
}
|
|
NodeList.prototype.attr = function(key) {
|
|
this.item(0).attr(key);
|
|
}
|
|
Element.prototype.data = function (key) {
|
|
return this.attributes[`data-${key}`].value
|
|
}
|
|
NodeList.prototype.data = function(key) {
|
|
this.item(0).data(key);
|
|
}
|
|
NodeList.prototype.show = function() {
|
|
this.item(0).show();
|
|
return this;
|
|
}
|
|
Element.prototype.show = function() {
|
|
this.style.display = 'block';
|
|
}
|
|
NodeList.prototype.hide = function() {
|
|
this.item(0).hide();
|
|
return this;
|
|
}
|
|
Element.prototype.hide = function() {
|
|
this.style.display = 'none';
|
|
}
|
|
NodeList.prototype.text = function(txt) {
|
|
this.item(0).text(txt);
|
|
}
|
|
Element.prototype.text = function(txt) {
|
|
if (typeof(txt) === 'undefined') {
|
|
return this.textContent;
|
|
} else {
|
|
this.textContent = txt;
|
|
}
|
|
}
|
|
NodeList.prototype.item = function (i) {
|
|
return this[+i || 0];
|
|
};
|
|
NodeList.prototype.find = function(selector) {
|
|
let result = [];
|
|
this.forEach(function (elem, i) {
|
|
let partial = elem.find(selector);
|
|
result = result.concat([...partial]);
|
|
});
|
|
return Reflect.construct(Array, result, NodeList);
|
|
}
|
|
Element.prototype.find = function(selector) {
|
|
return this.querySelectorAll(':scope ' + selector);
|
|
}
|
|
|
|
NodeList.prototype.clear = function() {
|
|
this.forEach(function (elem, i) {
|
|
elem.clear();
|
|
});
|
|
return this;
|
|
}
|
|
Element.prototype.clear = function() {
|
|
this.innerHTML = '';
|
|
return this;
|
|
}
|
|
|
|
/*
|
|
TODO - conflicts with from.val(), rename one of the two
|
|
NodeList.prototype.val = function(value) {
|
|
this.item(0).val(value);
|
|
}
|
|
Element.prototype.val = function(value) {
|
|
// TODO - check that "this" has the "value" property
|
|
if (typeof(value) === 'undefined') {
|
|
return this.value;
|
|
} else {
|
|
this.value = value;
|
|
}
|
|
}
|
|
*/
|