/** * @fileoverview Template Utilities for Rantii * @author retoor * @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 + '' + string; } if (Array.isArray(value)) { return result + value.map(v => v instanceof 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 };