whatsapp-api-mockup/js/main.js

/* WAM · main.js — dueño D (núcleo).
   Bootstrap: carga el estado, aplica tema, renderiza chat y editor,
   y enlaza la delegación de clics del chat, el composer, la reproducción
   de la demo y la toolbar. Único script con ejecución al cargar. */
window.WAM = window.WAM || {};
(function () {
  "use strict";

  function porId(id) {
    return document.getElementById(id);
  }

  function al(id, evento, manejador) {
    var el = porId(id);
    if (el) el.addEventListener(evento, manejador);
  }

  /* ————————————————— botón "Reproducir demo" ————————————————— */

  function pintarBotonDemo() {
    var btn = porId("btn-reproducir");
    if (!btn) return;
    var span = btn.querySelector("span");
    if (!span) return;
    if (!span.dataset.etiqueta) span.dataset.etiqueta = span.textContent;
    span.textContent = WAM.demoActiva() ? "■ Detener" : span.dataset.etiqueta;
  }

  function alReproducir() {
    if (WAM.demoActiva()) WAM.detenerDemo();
    else WAM.reproducirDemo();
    pintarBotonDemo();
  }

  /* ————————————————— toolbar ————————————————— */

  function alTema() {
    WAM.estado.tema = WAM.estado.tema === "oscuro" ? "claro" : "oscuro";
    WAM.guardar();
    WAM.setTema(WAM.estado.tema);
  }

  function alPresentacion() {
    document.body.classList.toggle("presentacion");
    var btn = porId("btn-presentacion");
    if (btn) {
      btn.setAttribute("aria-pressed",
        document.body.classList.contains("presentacion") ? "true" : "false");
    }
  }

  function reRenderTotal() {
    WAM.setTema(WAM.estado.tema);
    WAM.render();
    WAM.renderEditor();
    pintarBotonDemo();
  }

  function alExportar() {
    if (typeof WAM.exportarJSON === "function") WAM.exportarJSON();
  }

  function alImportar() {
    var archivo = porId("importar-archivo");
    if (archivo) archivo.click();
  }

  function alArchivoImport(e) {
    var input = e.currentTarget;
    var archivo = input.files && input.files[0];
    input.value = ""; /* permite reimportar el mismo archivo */
    if (!archivo || typeof WAM.importarJSON !== "function") return;
    WAM.detenerDemo();
    var promesa = WAM.importarJSON(archivo);
    if (promesa && typeof promesa.then === "function") {
      promesa.then(reRenderTotal, reRenderTotal);
    } else {
      reRenderTotal();
    }
  }

  function alReset() {
    WAM.detenerDemo();
    WAM.resetear();
    reRenderTotal();
  }

  /* ————————————————— chat: delegación de clics (contrato B→D) ————————————————— */

  function alClicChat(e) {
    var objetivo = e.target;
    var el = (objetivo && objetivo.closest) ? objetivo.closest("[data-flujo]") : null;
    if (!el) return;
    e.preventDefault(); /* protege frente a botones montados sobre <a href="#"> */
    var ds = el.dataset || {};
    if (ds.fila !== undefined) return; /* filas del sheet: se atienden en #pantalla */

    var indice = parseInt(el.getAttribute("data-flujo"), 10);
    var msg = (!isNaN(indice) && WAM.estado && WAM.estado.mensajes) ? WAM.estado.mensajes[indice] : null;
    var plano = ds.btn === undefined && ds.sec === undefined &&
      ds.fila === undefined && ds.card === undefined;

    if (plano && msg && msg.tipo === "list") {
      if (typeof WAM.abrirSheet === "function") WAM.abrirSheet(indice);
      return;
    }

    var flujo = WAM.resolverFlujo(el);
    if (flujo && flujo.texto) WAM.flujo(flujo.texto, flujo.respuestas);
  }

  /* Opciones del sheet de lista (vive en #pantalla, fuera de #chat-cuerpo). */
  function alClicPantalla(e) {
    var objetivo = e.target;
    var fila = (objetivo && objetivo.closest) ? objetivo.closest("[data-fila]") : null;
    if (!fila) return;
    var hoja = porId("sheet");
    if (!hoja || !hoja.contains(fila)) return;
    e.preventDefault();
    var flujo = WAM.resolverFlujo(fila);
    if (typeof WAM.cerrarSheet === "function") WAM.cerrarSheet();
    if (flujo && flujo.texto) WAM.flujo(flujo.texto, flujo.respuestas);
  }

  /* ————————————————— composer ————————————————— */

  function alComposer(e) {
    e.preventDefault();
    var input = porId("composer-input");
    var texto = input ? input.value : "";
    WAM.enviarLibre(texto);
    if (input) {
      input.value = "";
      input.focus();
    }
  }

  /* ————————————————— bootstrap ————————————————— */

  WAM.init = function () {
    WAM.estado = WAM.cargar();
    WAM.setTema(WAM.estado.tema);
    WAM.render();
    WAM.renderEditor();

    WAM.onDemoChange = pintarBotonDemo;
    al("chat-cuerpo", "click", alClicChat);
    al("pantalla", "click", alClicPantalla);
    al("composer", "submit", alComposer);
    al("btn-reproducir", "click", alReproducir);
    al("btn-tema", "click", alTema);
    al("btn-presentacion", "click", alPresentacion);
    al("btn-exportar", "click", alExportar);
    al("btn-importar", "click", alImportar);
    al("importar-archivo", "change", alArchivoImport);
    al("btn-reset", "click", alReset);
    pintarBotonDemo();
  };

  WAM.init();
})();