https://cmpanguipulli.com/js/cms.js

1/**
2 * cms.js — Aplica el contenido editable (textos/imágenes) que el
3 * administrador define en el panel. Si la API no responde o no hay
4 * overrides, la página conserva su contenido por defecto del HTML.
5 *
6 * Marca elementos editables con:
7 *   data-cms="clave"                  -> reemplaza el texto
8 *   data-cms="clave" data-cms-tipo="html"  -> reemplaza innerHTML
9 *   data-cms="clave" data-cms-tipo="src"   -> reemplaza el src de una <img>
10 *   data-cms="clave" data-cms-tipo="bg"    -> reemplaza background-image
11 */
12(function () {
13  var page = (location.pathname.replace(/^\/+|\/+$/g, '').toLowerCase()) || 'index';
14
15  function apply(data) {
16    if (!data) return;
17    var nodes = document.querySelectorAll('[data-cms]');
18    for (var i = 0; i < nodes.length; i++) {
19      var el = nodes[i];
20      var item = data[el.getAttribute('data-cms')];
21      if (!item || item.valor == null || item.valor === '') continue;
22      var v = item.valor;
23      var t = el.getAttribute('data-cms-tipo') || (item.tipo === 'imagen' ? 'src' : 'text');
24      if (t === 'src')       el.setAttribute('src', v);
25      else if (t === 'bg') {
26        el.style.backgroundImage = "url('" + v + "')";
27        // Marca el elemento: permite ocultar el ícono de relleno vía CSS
28        el.classList.add('has-bg');
29      }
30      else if (t === 'html') el.innerHTML = v;
31      else                   el.textContent = v;
32    }
33  }
34
35  function load() {
36    fetch('/admin/api/contenido.php?page=' + encodeURIComponent(page))
37      .then(function (r) { return r.ok ? r.json() : null; })
38      .then(apply)
39      .catch(function () { /* sin conexión a la API: se usa el contenido por defecto */ });
40  }
41
42  if (document.readyState === 'loading') {
43    document.addEventListener('DOMContentLoaded', load);
44  } else {
45    load();
46  }
47})();