---
layout: default
title: Lista completa de términos
---

<style>
#search-input {
  width: 100%;
  padding: 10px 14px;
  font-size: 1em;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 0.75em;
  box-sizing: border-box;
}
#filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 1em;
}
.filter-btn {
  font-size: 0.78em;
  padding: 3px 10px;
  border: 1px solid #ccc;
  border-radius: 20px;
  background: #fff;
  color: #333;
  cursor: pointer;
  white-space: nowrap;
}
.filter-btn.active {
  background: #333;
  color: #fff;
  border-color: #333;
}
#search-stats {
  font-size: 0.85em;
  color: #888;
  margin-bottom: 0.5em;
  min-height: 1.2em;
}
#search-results {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
  max-height: 65vh;
  overflow-y: auto;
}
.result-item {
  border-bottom: 1px solid #f0f0f0;
}
.result-item:last-child {
  border-bottom: none;
}
.result-item a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  text-decoration: none;
  color: inherit;
}
.result-item a:hover {
  background: #f9f9f9;
}
.result-term {
  font-weight: 500;
}
.result-term mark {
  background: #fff3b0;
  font-weight: 700;
}
.result-author {
  font-size: 0.78em;
  color: #888;
  background: #f3f3f3;
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
#loading-msg {
  color: #888;
  font-size: 0.9em;
  margin: 1em 0;
}
#progress-bar-wrap {
  background: #eee;
  border-radius: 4px;
  height: 4px;
  margin: 0.5em 0 1em;
  overflow: hidden;
}
#progress-bar {
  background: #333;
  height: 4px;
  width: 0%;
  transition: width 0.2s;
}
</style>

<p style="color:#666; font-size:0.95em; margin-bottom:1.2em;">
  Busca términos en todo el glosario por palabra o por cronista.
</p>

<input type="text" id="search-input" placeholder="Escribe un término o nombre de cronista…" autocomplete="off" disabled />

<div id="filter-bar"></div>
<div id="search-stats"></div>

<div id="loading-msg">Cargando índice de términos…</div>
<div id="progress-bar-wrap" style="display:none">
  <div id="progress-bar"></div>
</div>

<ul id="search-results"></ul>

<script>
(function () {
  var BASE = "https://glosascroniquenses.github.io";
  var GLOSARIO = BASE + "/Glosario/";
  var terms = [];
  var activeAuthor = null;

  /* ── Utilidades ── */
  function esc(s) {
    return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
  }
  function highlight(text, q) {
    if (!q) return text;
    return text.replace(new RegExp("(" + esc(q) + ")", "gi"),
      '<mark>$1</mark>');
  }

  /* ── 1. Leer el índice de Glosario para obtener los cronistas ── */
  fetch(GLOSARIO)
    .then(function (r) { return r.text(); })
    .then(function (html) {
      var doc = new DOMParser().parseFromString(html, "text/html");
      /* Los enlaces a cronistas tienen href como /Glosario/autores/cronistaXX/ */
      var cronistaLinks = Array.from(
        doc.querySelectorAll('a[href*="/Glosario/autores/cronista"]')
      ).filter(function (a) {
        return /\/Glosario\/autores\/cronista\d+\/?$/.test(a.getAttribute("href"));
      });

      /* Deduplicar por href */
      var seen = {};
      var cronistas = [];
      cronistaLinks.forEach(function (a) {
        var href = a.getAttribute("href").replace(/\/$/, "") + "/";
        if (!seen[href]) {
          seen[href] = true;
          /* Nombre del cronista: texto del enlace, puede venir del h1 próximo */
          var name = a.closest("h1, h2, h3") 
            ? a.closest("h1, h2, h3").textContent.trim()
            : a.textContent.trim();
          if (name) cronistas.push({ name: name, url: BASE + href });
        }
      });

      if (cronistas.length === 0) {
        document.getElementById("loading-msg").textContent =
          "No se pudieron detectar los cronistas. Recarga la página.";
        return;
      }

      /* ── 2. Buscar términos en cada página de cronista ── */
      document.getElementById("progress-bar-wrap").style.display = "block";
      var done = 0;
      var total = cronistas.length;

      var promises = cronistas.map(function (cronista) {
        return fetch(cronista.url)
          .then(function (r) { return r.text(); })
          .then(function (html2) {
            var doc2 = new DOMParser().parseFromString(html2, "text/html");

            /* El nombre canónico del cronista está en el h1 de la página */
            var h1 = doc2.querySelector("h1");
            var authorName = h1 ? h1.textContent.trim() : cronista.name;

            /* Los términos son enlaces locales (#anchor) que aparecen
               ANTES de las secciones ## (h2). Están en párrafos sueltos
               o listas, con href="#algo". Los enlaces de navegación del
               sitio son absolutos, así que no interfieren. */
            var anchors = Array.from(
              doc2.querySelectorAll('a[href^="#"]')
            );

            anchors.forEach(function (a) {
              var termText = a.textContent.trim();
              var anchor   = a.getAttribute("href"); /* "#termino" */
              if (!termText || anchor === "#") return;
              terms.push({
                term   : termText,
                author : authorName,
                url    : cronista.url + anchor
              });
            });
          })
          .catch(function () { /* página no accesible, se ignora */ })
          .finally(function () {
            done++;
            document.getElementById("progress-bar").style.width =
              Math.round((done / total) * 100) + "%";
            if (done === total) onIndexReady();
          });
      });
    })
    .catch(function () {
      document.getElementById("loading-msg").textContent =
        "No se pudo cargar el glosario. Comprueba tu conexión y recarga.";
    });

  /* ── 3. Índice listo ── */
  function onIndexReady() {
    document.getElementById("loading-msg").style.display  = "none";
    document.getElementById("progress-bar-wrap").style.display = "none";
    document.getElementById("search-input").disabled = false;
    document.getElementById("search-input").focus();
    buildFilters();
    renderResults();
    document.getElementById("search-input").addEventListener("input", renderResults);
  }

  /* ── 4. Filtros por cronista ── */
  function buildFilters() {
    var bar     = document.getElementById("filter-bar");
    var authors = Array.from(new Set(terms.map(function (t) { return t.author; }))).sort();
    bar.appendChild(makeBtn("Todos", null));
    authors.forEach(function (a) {
      /* Mostrar solo el primer apellido para ahorrar espacio */
      bar.appendChild(makeBtn(a.split(" ").slice(-1)[0], a));
    });
  }

  function makeBtn(label, author) {
    var btn = document.createElement("button");
    btn.textContent = label;
    btn.title       = author || "Todos los cronistas";
    btn.className   = "filter-btn" + (author === activeAuthor ? " active" : "");
    btn.dataset.author = author || "__all__";
    btn.addEventListener("click", function () {
      activeAuthor = author;
      document.querySelectorAll(".filter-btn").forEach(function (b) {
        var isMe = (activeAuthor === null && b.dataset.author === "__all__")
                || b.dataset.author === activeAuthor;
        b.classList.toggle("active", isMe);
      });
      renderResults();
    });
    return btn;
  }

  /* ── 5. Renderizar resultados ── */
  function renderResults() {
    var q    = document.getElementById("search-input").value.trim();
    var qLow = q.toLowerCase();
    var list = terms;

    if (activeAuthor) {
      list = list.filter(function (t) { return t.author === activeAuthor; });
    }
    if (qLow) {
      list = list.filter(function (t) {
        return t.term.toLowerCase().includes(qLow)
            || t.author.toLowerCase().includes(qLow);
      });
    }

    var statsEl = document.getElementById("search-stats");
    statsEl.textContent = list.length + " resultado"
      + (list.length !== 1 ? "s" : "")
      + (q ? ' para "' + q + '"' : "")
      + (activeAuthor ? " · " + activeAuthor : "");

    var ul = document.getElementById("search-results");
    ul.innerHTML = "";

    if (list.length === 0) {
      ul.innerHTML = '<li style="padding:1.5em;text-align:center;color:#999;">No se encontraron términos.</li>';
      return;
    }

    var frag = document.createDocumentFragment();
    list.slice(0, 300).forEach(function (t) {
      var li = document.createElement("li");
      li.className = "result-item";

      var a = document.createElement("a");
      a.href = t.url;

      var termSpan = document.createElement("span");
      termSpan.className = "result-term";
      termSpan.innerHTML = highlight(t.term, q);

      var authSpan = document.createElement("span");
      authSpan.className   = "result-author";
      authSpan.textContent = t.author;

      a.appendChild(termSpan);
      a.appendChild(authSpan);
      li.appendChild(a);
      frag.appendChild(li);
    });
    ul.appendChild(frag);
  }
})();
</script>