crearGaleriaMemes = function(datos) { const contenedor = html`

Memeteca mundialista

Explora nuestra selección de memes surgidos durante el Mundial 2026. Puedes buscar por palabras clave o filtrar por bloque, tema y etiqueta. Haz clic en una imagen para ampliarla y consultar su contexto.

`; const buscador = contenedor.querySelector("#buscar"); const filtroBloque = contenedor.querySelector("#filtroBloque"); const filtroTema = contenedor.querySelector("#filtroTema"); const filtroEtiqueta = contenedor.querySelector("#filtroEtiqueta"); const grid = contenedor.querySelector(".memeteca-grid"); const resumen = contenedor.querySelector(".memeteca-resumen"); const modal = contenedor.querySelector(".memeteca-modal"); const modalImagen = modal.querySelector("img"); const modalInfo = modal.querySelector(".memeteca-modal-info"); const cerrar = modal.querySelector(".memeteca-cerrar"); let tarjetaActiva = null; const textoSeguro = valor => valor === null || valor === undefined ? "" : String(valor); const llenarFiltro = (elemento, valores) => { const valoresUnicos = [ ...new Set( valores .map(textoSeguro) .map(valor => valor.trim()) .filter(Boolean) ) ]; valoresUnicos .sort((a, b) => a.localeCompare( b, "es", { sensitivity: "base" } ) ) .forEach(valor => { const opcion = document.createElement("option"); opcion.value = valor; opcion.textContent = valor; elemento.appendChild(opcion); }); }; llenarFiltro( filtroBloque, datos.map(meme => meme.bloque) ); llenarFiltro( filtroTema, datos.map(meme => meme.tema) ); llenarFiltro( filtroEtiqueta, datos.flatMap(meme => Array.isArray(meme.etiquetas) ? meme.etiquetas : [] ) ); function abrirModal(meme, tarjeta) { tarjetaActiva = tarjeta; modalImagen.src = meme.archivo; modalImagen.alt = textoSeguro(meme.titulo) || "Imagen del meme"; modalInfo.replaceChildren(); const titulo = document.createElement("h2"); titulo.textContent = `${textoSeguro(meme.id)} · ${textoSeguro(meme.titulo)}`; const contexto = document.createElement("p"); contexto.textContent = textoSeguro(meme.contexto) || "Sin contexto registrado."; const metadatos = document.createElement("div"); metadatos.className = "memeteca-meta"; const bloque = document.createElement("p"); bloque.textContent = `Bloque: ${textoSeguro(meme.bloque) || "—"}`; const tema = document.createElement("p"); tema.textContent = `Tema: ${textoSeguro(meme.tema) || "—"}`; const etiquetas = document.createElement("p"); etiquetas.textContent = `Etiquetas: ${ Array.isArray(meme.etiquetas) && meme.etiquetas.length ? meme.etiquetas.join(", ") : "—" }`; const nota = document.createElement("p"); nota.textContent = `Nota documental: ${ textoSeguro(meme.nota) || "—" }`; metadatos.append( bloque, tema, etiquetas, nota ); modalInfo.append( titulo, contexto, metadatos ); modal.hidden = false; modal.classList.add("activo"); modal.setAttribute( "aria-hidden", "false" ); cerrar.focus(); } function cerrarModal() { modal.classList.remove("activo"); modal.setAttribute( "aria-hidden", "true" ); modal.hidden = true; modalImagen.removeAttribute("src"); const tarjetaAnterior = tarjetaActiva; tarjetaActiva = null; if ( tarjetaAnterior && tarjetaAnterior.isConnected ) { tarjetaAnterior.focus(); } } function renderizar() { const texto = buscador.value .trim() .toLocaleLowerCase("es"); const resultados = datos.filter(meme => { const contenidoBuscable = [ meme.id, meme.titulo, meme.bloque, meme.tema, meme.contexto, meme.nota, ...( Array.isArray(meme.etiquetas) ? meme.etiquetas : [] ) ] .map(textoSeguro) .join(" ") .toLocaleLowerCase("es"); const coincideTexto = !texto || contenidoBuscable.includes(texto); const coincideBloque = !filtroBloque.value || textoSeguro(meme.bloque) === filtroBloque.value; const coincideTema = !filtroTema.value || textoSeguro(meme.tema) === filtroTema.value; const coincideEtiqueta = !filtroEtiqueta.value || ( Array.isArray(meme.etiquetas) && meme.etiquetas.includes( filtroEtiqueta.value ) ); return ( coincideTexto && coincideBloque && coincideTema && coincideEtiqueta ); }); resumen.textContent = `${resultados.length} ${ resultados.length === 1 ? "meme encontrado" : "memes encontrados" }`; grid.replaceChildren(); if (resultados.length === 0) { const mensaje = document.createElement("p"); mensaje.textContent = "No hay memes que coincidan con la búsqueda."; grid.appendChild(mensaje); return; } resultados.forEach(meme => { const card = document.createElement("article"); card.className = "memeteca-card"; card.tabIndex = 0; card.setAttribute( "role", "button" ); card.setAttribute( "aria-label", `Abrir ${textoSeguro(meme.titulo)}` ); const imagen = document.createElement("img"); imagen.src = meme.archivo; imagen.alt = textoSeguro(meme.titulo) || "Imagen del meme"; imagen.loading = "lazy"; const contenido = document.createElement("div"); contenido.className = "memeteca-card-contenido"; const titulo = document.createElement("h3"); titulo.textContent = `${textoSeguro(meme.id)} · ${textoSeguro(meme.titulo)}`; const contexto = document.createElement("p"); contexto.textContent = textoSeguro(meme.contexto); const meta = document.createElement("div"); meta.className = "memeteca-meta"; meta.textContent = `${textoSeguro(meme.bloque) || "Sin bloque"} · ` + `${textoSeguro(meme.tema) || "Sin tema"}`; contenido.append( titulo, contexto, meta ); card.append( imagen, contenido ); card.addEventListener( "click", () => { abrirModal(meme, card); } ); card.addEventListener( "keydown", evento => { if ( evento.key === "Enter" || evento.key === " " ) { evento.preventDefault(); abrirModal(meme, card); } } ); grid.appendChild(card); }); } buscador.addEventListener( "input", renderizar ); filtroBloque.addEventListener( "change", renderizar ); filtroTema.addEventListener( "change", renderizar ); filtroEtiqueta.addEventListener( "change", renderizar ); cerrar.addEventListener( "click", cerrarModal ); modal.addEventListener( "click", evento => { if (evento.target === modal) { cerrarModal(); } } ); contenedor.addEventListener( "keydown", evento => { if ( evento.key === "Escape" && !modal.hidden ) { cerrarModal(); } } ); renderizar(); return contenedor; }