pairgoth/view-webapp/src/main/webapp/js/domhelper.js

// 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) {
  if (this.length === 0) return false;
  return this.item(0).classList.contains(className);
}
Element.prototype.hasClass = function(className) {
  return 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() {
  return this.item(0).offset();
}
Element.prototype.attr = function (key, value) {
  if (typeof(value) === 'undefined') {
    return this.attributes[key]?.value;
  } else {
    this.setAttribute(key, value);
    return this;
  }
}
NodeList.prototype.attr = function(key, value) {
  if (typeof(value) === 'undefined') {
    return this.item(0).attr(key);
  } else {
    this.forEach(elem => {
      elem.attr(key, value);
    });
    return this;
  }
}
Element.prototype.data = function (key, value) {
  if (typeof(value) === 'undefined') {
    return this.attributes[`data-${key}`]?.value
  } else {
    this.setAttribute(`data-${key}`, value);
    return this;
  }
}
NodeList.prototype.data = function(key, value) {
  if (typeof(value) === 'undefined') {
    return this.item(0).data(key);
  } else {
    this.forEach(elem => {
      elem.data(key, value);
    })
    return this;
  }
}
NodeList.prototype.show = function() {
  this.item(0).show();
  return this;
}
Element.prototype.show = function() {
  this.style.display = 'block';
  return this;
}
NodeList.prototype.hide = function() {
  this.item(0).hide();
  return this;
}
Element.prototype.hide = function() {
  this.style.display = 'none';
  return this;
}
NodeList.prototype.text = function(txt) {
  if (typeof(txt) === 'undefined') {
    return this.item(0).text();
  } else {
    this.forEach(elem => {
      elem.text(txt);
    });
    return this;
  }
}
Element.prototype.text = function(txt) {
  if (typeof(txt) === 'undefined') {
    return this.textContent;
  } else {
    this.textContent = txt;
    return this;
  }
}
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() {
  while (this.firstChild) this.removeChild(this.lastChild);
  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;
  }
}
*/

NodeList.prototype.focus = function() {
  let first = this.item(0);
  if (first) first.focus();
  return this;
}

Element.prototype.index = function(selector) {
  let i = 0;
  let child = this;
  while ((child = child.previousSibling) != null) {
    if (typeof(selector) === 'undefined' || child.nodeType === Node.ELEMENT_NODE && child.matches(selector)) {
      ++i;
    }
  }
  return i;
}

NodeList.prototype.filter = function(selector) {
  let result = [];
  this.forEach(elem => {
    if (elem.nodeType === Node.ELEMENT_NODE && elem.matches(selector)) {
      result.push(elem);
    }
  });
  return Reflect.construct(Array, result, NodeList);
}