132 lines
4.1 KiB
JavaScript
132 lines
4.1 KiB
JavaScript
// DOM Helpers - Utilidades vanilla JS para reemplazar jQuery
|
|
(function(global){
|
|
'use strict';
|
|
|
|
// Helper para selección de elementos (similar a jQuery $)
|
|
const $ = function(selector, context) {
|
|
context = context || document;
|
|
if (typeof selector === 'string') {
|
|
const elements = context.querySelectorAll(selector);
|
|
return elements.length === 1 ? elements[0] : Array.from(elements);
|
|
}
|
|
return selector; // Si ya es un elemento, devolverlo
|
|
};
|
|
|
|
// Selector único
|
|
const $1 = function(selector, context) {
|
|
context = context || document;
|
|
return context.querySelector(selector);
|
|
};
|
|
|
|
// Selector múltiple
|
|
const $$ = function(selector, context) {
|
|
context = context || document;
|
|
return Array.from(context.querySelectorAll(selector));
|
|
};
|
|
|
|
// Helper para delegación de eventos
|
|
const delegate = function(selector, eventType, childSelector, handler) {
|
|
const elements = typeof selector === 'string' ? $$(selector) : [selector];
|
|
elements.forEach(element => {
|
|
element.addEventListener(eventType, function(e) {
|
|
const target = e.target.closest(childSelector);
|
|
if (target && element.contains(target)) {
|
|
handler.call(target, e);
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
// Helper para agregar evento a múltiples elementos
|
|
const on = function(elements, eventType, handler) {
|
|
if (typeof elements === 'string') {
|
|
elements = $$(elements);
|
|
} else if (!Array.isArray(elements)) {
|
|
elements = [elements];
|
|
}
|
|
elements.forEach(el => el.addEventListener(eventType, handler));
|
|
};
|
|
|
|
// Helper para obtener/setear valor de input
|
|
const val = function(element, value) {
|
|
if (typeof element === 'string') element = $1(element);
|
|
if (!element) return value === undefined ? '' : null;
|
|
if (value === undefined) return element.value || '';
|
|
element.value = value;
|
|
return element;
|
|
};
|
|
|
|
// Helper para obtener/setear texto
|
|
const text = function(element, value) {
|
|
if (typeof element === 'string') element = $1(element);
|
|
if (!element) return value === undefined ? '' : null;
|
|
if (value === undefined) return element.textContent || '';
|
|
element.textContent = value;
|
|
return element;
|
|
};
|
|
|
|
// Helper para obtener/setear HTML
|
|
const html = function(element, value) {
|
|
if (typeof element === 'string') element = $1(element);
|
|
if (!element) return value === undefined ? '' : null;
|
|
if (value === undefined) return element.innerHTML || '';
|
|
element.innerHTML = value;
|
|
return element;
|
|
};
|
|
|
|
// Helper para obtener/setear atributos data
|
|
const data = function(element, key, value) {
|
|
if (typeof element === 'string') element = $1(element);
|
|
if (!element) return value === undefined ? null : null;
|
|
if (value === undefined) return element.dataset[key];
|
|
element.dataset[key] = value;
|
|
return element;
|
|
};
|
|
|
|
// Helper para encontrar elemento hijo
|
|
const find = function(element, selector) {
|
|
if (typeof element === 'string') element = $1(element);
|
|
return element ? element.querySelector(selector) : null;
|
|
};
|
|
|
|
// Helper para encontrar elementos hijos
|
|
const findAll = function(element, selector) {
|
|
if (typeof element === 'string') element = $1(element);
|
|
return element ? Array.from(element.querySelectorAll(selector)) : [];
|
|
};
|
|
|
|
// Helper para encontrar ancestro más cercano
|
|
const closest = function(element, selector) {
|
|
if (typeof element === 'string') element = $1(element);
|
|
return element ? element.closest(selector) : null;
|
|
};
|
|
|
|
// Helper para habilitar/deshabilitar elementos
|
|
const prop = function(element, property, value) {
|
|
if (typeof element === 'string') element = $1(element);
|
|
if (!element) return value === undefined ? null : null;
|
|
if (value === undefined) return element[property];
|
|
element[property] = value;
|
|
return element;
|
|
};
|
|
|
|
// Exportar helpers globalmente
|
|
global.DOM = {
|
|
$: $,
|
|
$1: $1,
|
|
$$: $$,
|
|
delegate: delegate,
|
|
on: on,
|
|
val: val,
|
|
text: text,
|
|
html: html,
|
|
data: data,
|
|
find: find,
|
|
findAll: findAll,
|
|
closest: closest,
|
|
prop: prop
|
|
};
|
|
|
|
try { console.log('[DOM Helpers] Inicializado'); } catch {}
|
|
})(window);
|