rantii/js/utils/template.js

/**
 * @fileoverview Template Utilities for Rantii
 * @author retoor <retoor@molodetz.nl>
 * @description HTML template creation and manipulation helpers
 * @keywords template, html, dom, element, create
 */

function createElement(tag, attributes = {}, children = []) {
    const element = document.createElement(tag);

    Object.entries(attributes).forEach(([key, value]) => {
        if (key === 'className') {
            element.className = value;
        } else if (key === 'dataset') {
            Object.entries(value).forEach(([dataKey, dataValue]) => {
                element.dataset[dataKey] = dataValue;
            });
        } else if (key.startsWith('on') && typeof value === 'function') {
            const eventName = key.substring(2).toLowerCase();
            element.addEventListener(eventName, value);
        } else if (key === 'style' && typeof value === 'object') {
            Object.assign(element.style, value);
        } else {
            element.setAttribute(key, value);
        }
    });

    children.forEach(child => {
        if (typeof child === 'string') {
            element.appendChild(document.createTextNode(child));
        } else if (child instanceof Node) {
            element.appendChild(child);
        }
    });

    return element;
}

function html(strings, ...values) {
    const template = document.createElement('template');
    template.innerHTML = strings.reduce((result, string, i) => {
        const value = values[i - 1];
        if (value instanceof Node) {
            return result + '<!--node-->' + string;
        }
        if (Array.isArray(value)) {
            return result + value.map(v => v instanceof Node ? '<!--node-->' : String(v)).join('') + string;
        }
        return result + (value !== undefined ? String(value) : '') + string;
    });
    return template.content.cloneNode(true);
}

function createFragment(htmlString) {
    const template = document.createElement('template');
    template.innerHTML = htmlString.trim();
    return template.content.cloneNode(true);
}

function clearElement(element) {
    while (element.firstChild) {
        element.removeChild(element.firstChild);
    }
}

function replaceContent(element, newContent) {
    clearElement(element);
    if (typeof newContent === 'string') {
        element.innerHTML = newContent;
    } else if (newContent instanceof Node) {
        element.appendChild(newContent);
    }
}

function insertBefore(newElement, referenceElement) {
    referenceElement.parentNode.insertBefore(newElement, referenceElement);
}

function insertAfter(newElement, referenceElement) {
    referenceElement.parentNode.insertBefore(newElement, referenceElement.nextSibling);
}

function removeElement(element) {
    if (element && element.parentNode) {
        element.parentNode.removeChild(element);
    }
}

function toggleClass(element, className, force) {
    if (force !== undefined) {
        element.classList.toggle(className, force);
    } else {
        element.classList.toggle(className);
    }
}

function addClass(element, ...classNames) {
    element.classList.add(...classNames);
}

function removeClass(element, ...classNames) {
    element.classList.remove(...classNames);
}

function hasClass(element, className) {
    return element.classList.contains(className);
}

function setAttributes(element, attributes) {
    Object.entries(attributes).forEach(([key, value]) => {
        if (value === null || value === undefined) {
            element.removeAttribute(key);
        } else {
            element.setAttribute(key, value);
        }
    });
}

function getDataAttributes(element) {
    return { ...element.dataset };
}

function show(element) {
    element.style.display = '';
    element.removeAttribute('hidden');
}

function hide(element) {
    element.style.display = 'none';
}

function isVisible(element) {
    return element.offsetParent !== null;
}

export {
    createElement,
    html,
    createFragment,
    clearElement,
    replaceContent,
    insertBefore,
    insertAfter,
    removeElement,
    toggleClass,
    addClass,
    removeClass,
    hasClass,
    setAttributes,
    getDataAttributes,
    show,
    hide,
    isVisible
};