glance/internal/glance/static/js/templating.js

export function elem(tag = "div") {
    return document.createElement(tag);
}

export function fragment(...children) {
    const f = document.createDocumentFragment();
    if (children) f.append(...children);
    return f;
}

export function text(str = "") {
    return document.createTextNode(str);
}

export function repeat(n, fn) {
    const elems = Array(n);

    for (let i = 0; i < n; i++)
        elems[i] = fn(i);

    return elems;
}

export function find(selector) {
    return document.querySelector(selector);
}

export function findAll(selector) {
    return document.querySelectorAll(selector);
}

const ep = HTMLElement.prototype;
const fp = DocumentFragment.prototype;
const tp = Text.prototype;

ep.classes = function(...classes) {
    this.classList.add(...classes);
    return this;
}

ep.find = function(selector) {
    return this.querySelector(selector);
}

ep.findAll = function(selector) {
    return this.querySelectorAll(selector);
}

ep.classesIf = function(cond, ...classes) {
    cond ? this.classList.add(...classes) : this.classList.remove(...classes);
    return this;
}

ep.hide = function() {
    this.style.display = "none";
    return this;
}

ep.show = function() {
    this.style.removeProperty("display");
    return this;
}

ep.showIf = function(cond) {
    cond ? this.show() : this.hide();
    return this;
}

ep.isHidden = function() {
    return this.style.display === "none";
}

ep.clearClasses = function(...classes) {
    classes.length ? this.classList.remove(...classes) : this.className = "";
    return this;
}

ep.hasClass = function(className) {
    return this.classList.contains(className);
}

ep.attr = function(name, value) {
    this.setAttribute(name, value);
    return this;
}

ep.attrs = function(attrs) {
    for (const [name, value] of Object.entries(attrs))
        this.setAttribute(name, value);
    return this;
}

ep.tap = function(fn) {
    fn(this);
    return this;
}

ep.text = function(text) {
    this.innerText = text;
    return this;
}

ep.html = function(html) {
    this.innerHTML = html;
    return this;
}

ep.appendTo = function(parent) {
    parent.appendChild(this);
    return this;
}

ep.swap = function(element) {
    this.replaceWith(element);
    return element;
}

ep.on = function(event, callback, options) {
    if (typeof event === "string") {
        this.addEventListener(event, callback, options);
        return this;
    }

    for (let i = 0; i < event.length; i++)
        this.addEventListener(event[i], callback, options);

    return this;
}

const epAppend = ep.append;
ep.append = function(...children) {
    epAppend.apply(this, children);
    return this;
}

ep.duplicate = function(n) {
    const elems = Array(n);

    for (let i = 0; i < n; i++)
        elems[i] = this.cloneNode(true);

    return elems;
}

ep.styles = function(s) {
    Object.assign(this.style, s);
    return this;
}

const epAnimate = ep.animate;
ep.animate = function(anim, callback) {
    const a = epAnimate.call(this, anim.keyframes, anim.options);
    if (callback) a.onfinish = () => callback(this, a);
    return this;
}

ep.animateUpdate = function(update, exit, entrance) {
    this.animate(exit, () => {
        update(this);
        this.animate(entrance);
    });

    return this;
}

ep.styleVar = function(name, value) {
    this.style.setProperty(`--${name}`, value);
    return this;
}

ep.component = function (methods) {
    this.component = methods;
    return this;
}

const fpAppend = fp.append;
fp.append = function(...children) {
    fpAppend.apply(this, children);
    return this;
}

fp.appendTo = function(parent) {
    parent.appendChild(this);
    return this;
}

tp.text = function(text) {
    this.nodeValue = text;
    return this;
}