Deshacer con demo activa, avisos obsoletos, hoja de opciones y foco en hojas
- Deshacer/rehacer guardan y reponen «wam-demo-activa» con cada instantánea
({estado, activa}); «Actualizar» pide un segundo clic si el contenido cambió
de cuenta o de número de mensajes respecto a la demo guardada.
- WAM.puntoDeshacer cierra los avisos con acción: su «Deshacer» ya no
desharía el cambio que anuncian.
- «Todas las opciones» replica botonAccion: URL bloqueada o no válida se
pinta como fila inerte (aria-disabled, sin data-opcion) en el grupo de
enlaces.
- Hojas inferiores: enfocan la primera fila (o la X), retienen Tab dentro del
panel y devuelven el foco al cerrar (origen, fila repintada o
#chat-cuerpo); no roban el foco durante «Reproducir demo».
- Tests e2e de regresión en tests/e2e/regresiones.spec.mjs.
Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
urieljareth
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
1176003b42
commit
875ae9ad67
+48
-2
@@ -30,6 +30,8 @@
|
||||
|
||||
var ESCRIBIENDO = false;
|
||||
var HOJA_ID = ""; /* id del mensaje cuya hoja está abierta ("" = ninguna) */
|
||||
var ORIGEN_HOJA = null; /* elemento que tenía el foco al abrir la hoja */
|
||||
var FOCO_EN_HOJA = false; /* la hoja movió el foco a su interior al abrirse */
|
||||
|
||||
/* Solo esquemas seguros en href (defensa en profundidad para JSON importados). */
|
||||
function urlSegura(u) {
|
||||
@@ -785,7 +787,7 @@
|
||||
|
||||
/* Hoja inferior iOS genérica (B la crea/destruye) en #pantalla.
|
||||
alClic: manejador opcional de presentación para las filas. */
|
||||
function montarHoja(titulo, contenido, pie, alClic) {
|
||||
function montarHoja(titulo, contenido, pie, alClic, opts) {
|
||||
var pantalla = byId("pantalla");
|
||||
if (!pantalla) return null;
|
||||
WAM.cerrarSheet();
|
||||
@@ -799,6 +801,28 @@
|
||||
'<div class="sheet-opciones" id="sheet-opciones">' + contenido + "</div>" +
|
||||
(pie ? '<div class="sheet-pie">' + esc(pie) + "</div>" : "") + "</div>";
|
||||
pantalla.appendChild(hoja);
|
||||
/* Foco (diálogo modal): se guarda el origen, se enfoca la primera fila
|
||||
activa (o la X) y Tab / Mayús+Tab quedan dentro del panel. Durante
|
||||
«Reproducir demo» (o con opts.sinFoco) no se roba el foco. */
|
||||
ORIGEN_HOJA = document.activeElement && document.activeElement !== document.body ? document.activeElement : null;
|
||||
var enDemo = typeof WAM.demoActiva === "function" && WAM.demoActiva();
|
||||
if (!enDemo && !(opts && opts.sinFoco)) {
|
||||
var primera = hoja.querySelector('.sheet-fila:not([aria-disabled="true"]):not(span)') || hoja.querySelector(".sheet-cerrar");
|
||||
if (primera) { try { primera.focus({ preventScroll: true }); } catch (e) { primera.focus(); } }
|
||||
FOCO_EN_HOJA = !!primera;
|
||||
}
|
||||
hoja.addEventListener("keydown", function (e) {
|
||||
if (e.key !== "Tab") return;
|
||||
var panel = hoja.querySelector(".sheet-panel");
|
||||
var focos = panel ? Array.prototype.filter.call(panel.querySelectorAll("a[href], button:not([disabled])"), function (x) {
|
||||
return !x.hidden;
|
||||
}) : [];
|
||||
if (!focos.length) return;
|
||||
var ini = focos[0], fin = focos[focos.length - 1], act = document.activeElement;
|
||||
var dentro = panel.contains(act);
|
||||
if (e.shiftKey && (act === ini || !dentro)) { e.preventDefault(); fin.focus(); }
|
||||
else if (!e.shiftKey && (act === fin || !dentro)) { e.preventDefault(); ini.focus(); }
|
||||
});
|
||||
hoja.addEventListener("click", function (e) {
|
||||
var t = e.target;
|
||||
if (!t || !t.closest) return;
|
||||
@@ -864,7 +888,11 @@
|
||||
if (url) {
|
||||
enlaces += '<a class="sheet-fila sheet-fila-btn" href="' + esc(url) + '" target="_blank" rel="noopener noreferrer">' +
|
||||
icono(tipoIconoUrl(url)) + etiqueta + "</a>";
|
||||
} else if (vacio(b.url)) {
|
||||
} else if (!vacio(b.url) || b.urlBloqueada) {
|
||||
/* Igual que botonAccion: URL no permitida o bloqueada → fila inerte */
|
||||
enlaces += '<span class="sheet-fila sheet-fila-btn qr-btn-inactiva" aria-disabled="true">' +
|
||||
icono("url") + etiqueta + "</span>";
|
||||
} else {
|
||||
var usado = li && li.querySelector('[data-btn="' + j + '"].usado');
|
||||
respuestas += '<button type="button" class="sheet-fila sheet-fila-btn' + (usado ? " usado" : "") + '" data-opcion="' + j + '"' +
|
||||
(usado ? ' aria-disabled="true"' : "") + ">" + icono("responder") + etiqueta + "</button>";
|
||||
@@ -889,7 +917,25 @@
|
||||
|
||||
WAM.cerrarSheet = function () {
|
||||
var hoja = byId("sheet");
|
||||
var idHoja = HOJA_ID;
|
||||
var origen = ORIGEN_HOJA;
|
||||
var movido = FOCO_EN_HOJA;
|
||||
ORIGEN_HOJA = null;
|
||||
FOCO_EN_HOJA = false;
|
||||
var act = document.activeElement;
|
||||
/* Safari no enfoca los botones al hacer clic: el foco cae en body */
|
||||
var focoDentro = !!hoja && (hoja.contains(act) || (movido && (!act || act === document.body)));
|
||||
if (hoja && hoja.parentNode) hoja.parentNode.removeChild(hoja);
|
||||
HOJA_ID = "";
|
||||
if (!focoDentro) return;
|
||||
/* Devolver el foco: al origen si sigue en el DOM; si hubo re-render, al
|
||||
mismo control en la fila nueva del mensaje; si no, a la conversación. */
|
||||
var destino = origen && origen.isConnected ? origen : null;
|
||||
if (!destino && idHoja) {
|
||||
var filaNueva = filaDe({ id: idHoja });
|
||||
if (filaNueva) destino = filaNueva.querySelector("[data-ver-todas], [data-flujo]:not([data-btn]):not([data-card])");
|
||||
}
|
||||
if (!destino) destino = byId("chat-cuerpo");
|
||||
if (destino) { try { destino.focus({ preventScroll: true }); } catch (e) { destino.focus(); } }
|
||||
};
|
||||
})();
|
||||
|
||||
@@ -128,9 +128,32 @@
|
||||
/* ------------------------------------------------------------------
|
||||
Historial deshacer / rehacer
|
||||
------------------------------------------------------------------ */
|
||||
/* Cada instantánea guarda también qué demo guardada estaba en uso
|
||||
(«wam-demo-activa»): al deshacer o rehacer se repone, para que
|
||||
«Actualizar» nunca escriba el contenido de otra demo en su hueco. */
|
||||
function instantanea() {
|
||||
return { estado: clonar(WAM.estado), activa: lsGet(CLAVE_ACTIVA) };
|
||||
}
|
||||
|
||||
function reponerActiva(id) {
|
||||
if (id) lsSet(CLAVE_ACTIVA, id); else lsDel(CLAVE_ACTIVA);
|
||||
}
|
||||
|
||||
/* Un cambio nuevo deja obsoletos los avisos con acción («Deshacer» /
|
||||
«Rehacer»): su botón ya no desharía lo que anuncian. */
|
||||
function cerrarAvisosConAccion() {
|
||||
var ts = document.querySelectorAll("#ed-toasts .ed-toast");
|
||||
for (var i = 0; i < ts.length; i++) {
|
||||
if (!ts[i].querySelector(".ed-toast-accion")) continue;
|
||||
if (typeof ts[i].__cerrar === "function") ts[i].__cerrar();
|
||||
else if (ts[i].parentNode) ts[i].parentNode.removeChild(ts[i]);
|
||||
}
|
||||
}
|
||||
|
||||
WAM.puntoDeshacer = function () {
|
||||
if (!WAM.estado) return;
|
||||
pilaDeshacer.push(clonar(WAM.estado));
|
||||
cerrarAvisosConAccion();
|
||||
pilaDeshacer.push(instantanea());
|
||||
if (pilaDeshacer.length > LIMITE_HISTORIAL) pilaDeshacer.shift();
|
||||
pilaRehacer = [];
|
||||
pintarBotonesHistorial();
|
||||
@@ -147,8 +170,10 @@
|
||||
|
||||
WAM.deshacer = function () {
|
||||
if (!pilaDeshacer.length) { toast("No hay nada que deshacer"); return false; }
|
||||
pilaRehacer.push(clonar(WAM.estado));
|
||||
sustituirEstado(conTemaActual(pilaDeshacer.pop()));
|
||||
var previo = pilaDeshacer.pop();
|
||||
pilaRehacer.push(instantanea());
|
||||
sustituirEstado(conTemaActual(previo.estado));
|
||||
reponerActiva(previo.activa);
|
||||
pintarBotonesHistorial();
|
||||
toast("Cambio deshecho", { accion: { texto: "Rehacer", fn: WAM.rehacer } });
|
||||
return true;
|
||||
@@ -156,8 +181,10 @@
|
||||
|
||||
WAM.rehacer = function () {
|
||||
if (!pilaRehacer.length) { toast("No hay nada que rehacer"); return false; }
|
||||
pilaDeshacer.push(clonar(WAM.estado));
|
||||
sustituirEstado(conTemaActual(pilaRehacer.pop()));
|
||||
var siguiente = pilaRehacer.pop();
|
||||
pilaDeshacer.push(instantanea());
|
||||
sustituirEstado(conTemaActual(siguiente.estado));
|
||||
reponerActiva(siguiente.activa);
|
||||
pintarBotonesHistorial();
|
||||
toast("Cambio rehecho");
|
||||
return true;
|
||||
@@ -372,6 +399,18 @@
|
||||
return entrada;
|
||||
}
|
||||
|
||||
/* ¿El estado actual cambió de cuenta o de número de mensajes respecto a
|
||||
lo guardado en el hueco «id»? */
|
||||
function cambioSustancial(id) {
|
||||
var guardada = null;
|
||||
try { guardada = JSON.parse(lsGet(PREFIJO_DEMO + id) || "null"); } catch (e) { guardada = null; }
|
||||
if (!guardada || typeof guardada !== "object") return false;
|
||||
var nomG = (guardada.cuenta && guardada.cuenta.nombre) || "";
|
||||
var nomA = (WAM.estado && WAM.estado.cuenta && WAM.estado.cuenta.nombre) || "";
|
||||
var nG = Array.isArray(guardada.mensajes) ? guardada.mensajes.length : 0;
|
||||
return nomG !== nomA || nG !== nMensajes();
|
||||
}
|
||||
|
||||
function cargarDemo(id) {
|
||||
var bruto = lsGet(PREFIJO_DEMO + id);
|
||||
var datos = null;
|
||||
@@ -499,11 +538,21 @@
|
||||
var bGuardar = boton(activa ? "Actualizar" : "Guardar la actual", "wam-dlg-primario", function () {
|
||||
var nombre = String(inputNombre.value || "").trim() || nombreCuenta || "Mi demo";
|
||||
var misma = activa && activa.nombre === nombre;
|
||||
// Defensa: si lo que se va a escribir sobre una demo existente tiene
|
||||
// otra cuenta u otro número de mensajes, se pide un segundo clic.
|
||||
if (misma && bGuardar.getAttribute("data-confirmar") !== "1" && cambioSustancial(activa.id)) {
|
||||
bGuardar.setAttribute("data-confirmar", "1");
|
||||
bGuardar.textContent = "¿Sobrescribir «" + activa.nombre + "»?";
|
||||
toast("El contenido actual no se parece al de «" + activa.nombre + "» (otra cuenta u otro número de mensajes). Pulsa otra vez para sobrescribirla o cambia el nombre para guardarla como nueva.", { ms: 7000 });
|
||||
return;
|
||||
}
|
||||
bGuardar.removeAttribute("data-confirmar");
|
||||
var e = guardarDemoComo(nombre, misma ? activa.id : null);
|
||||
if (e) { toast("Demo «" + e.nombre + "» guardada"); pintarLista(); activa = demoActiva(); }
|
||||
});
|
||||
inputNombre.addEventListener("keydown", function (e) { if (e.key === "Enter") { e.preventDefault(); bGuardar.click(); } });
|
||||
inputNombre.addEventListener("input", function () {
|
||||
bGuardar.removeAttribute("data-confirmar");
|
||||
bGuardar.textContent = (activa && activa.nombre === String(inputNombre.value).trim()) ? "Actualizar" : "Guardar como nueva";
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user