utm-builder/app.js

/* UTM Builder UI. © 2026 CyberMax. All rights reserved. */
(function () {
  "use strict";
  var U = window.UtmCore;
  var el = function (id) { return document.getElementById(id); };
  var KEY = "cybermax-utm:v1:";
  function load(k, d) { try { var v = localStorage.getItem(KEY + k); return v ? JSON.parse(v) : d; } catch (e) { return d; } }
  function save(k, v) { try { localStorage.setItem(KEY + k, JSON.stringify(v)); } catch (e) { /* ignore */ } }
  function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]; }); }
  var toastT;
  function toast(m) { var t = el("toast"); t.textContent = m; t.classList.add("show"); clearTimeout(toastT); toastT = setTimeout(function () { t.classList.remove("show"); }, 1600); }
  function copy(text, msg) {
    var done = function () { toast(msg || "Copied"); };
    if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(text).then(done, function () { fallback(text); done(); });
    else { fallback(text); done(); }
  }
  function fallback(text) { var ta = document.createElement("textarea"); ta.value = text; document.body.appendChild(ta); ta.select(); try { document.execCommand("copy"); } catch (e) { /* ignore */ } ta.remove(); }
  function download(name, text, type) {
    var a = document.createElement("a");
    a.href = URL.createObjectURL(new Blob([text], { type: type }));
    a.download = name; document.body.appendChild(a); a.click(); a.remove();
    setTimeout(function () { URL.revokeObjectURL(a.href); }, 1000);
  }

  // ---------- tabs ----------
  function showTab(name) {
    document.querySelectorAll(".tab").forEach(function (t) { t.setAttribute("aria-selected", String(t.dataset.tab === name)); });
    document.querySelectorAll(".panel").forEach(function (p) { p.hidden = p.id !== "panel-" + name; });
    if (name === "history") renderHistory();
  }
  document.querySelectorAll(".tab").forEach(function (t) { t.onclick = function () { showTab(t.dataset.tab); }; });

  // ---------- builder ----------
  var fields = ["url"].concat(U.KEYS);
  function params() { var p = {}; U.KEYS.forEach(function (k) { p[k] = el("f-" + k).value; }); return p; }
  function opts() { return { lower: el("o-lower").checked, space: el("o-space").value }; }
  var current = "";

  var presets = el("presets");
  Object.keys(U.PRESETS).forEach(function (name) {
    var b = document.createElement("button");
    b.type = "button"; b.className = "chip"; b.textContent = name;
    b.onclick = function () {
      var p = U.PRESETS[name];
      for (var k in p) el("f-" + k).value = p[k];
      presets.querySelectorAll(".chip").forEach(function (c) { c.classList.toggle("on", c === b); });
      update();
    };
    presets.appendChild(b);
  });

  function update() {
    var r = U.build(el("f-url").value, params(), opts());
    var out = el("out");
    if (r.error || !r.tagged) {
      current = "";
      out.textContent = el("f-url").value.trim() ? (r.error || "Add a source, medium and campaign.") : "Fill in the URL, source, medium and campaign.";
    } else {
      current = r.url;
      out.textContent = r.url;
    }
    el("warn").innerHTML = (r.warnings || []).filter(function () { return !!current; }).map(function (w) { return "⚠ " + esc(w); }).join("<br>");
    el("btn-copy").disabled = !current;
    el("btn-qr").disabled = !current;
    var open = el("btn-open");
    if (current) { open.href = current; open.removeAttribute("aria-disabled"); } else { open.removeAttribute("href"); open.setAttribute("aria-disabled", "true"); }
    drawQr(current);
    var state = {}; fields.forEach(function (f) { state[f] = el("f-" + f).value; });
    state.lower = el("o-lower").checked; state.space = el("o-space").value;
    save("form", state);
  }

  function drawQr(text) {
    var c = el("qr"), ctx = c.getContext("2d");
    ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, c.width, c.height);
    if (!text) {
      ctx.fillStyle = "#9aa4b6"; ctx.font = "14px system-ui, sans-serif"; ctx.textAlign = "center";
      ctx.fillText("QR code appears here", c.width / 2, c.height / 2);
      return;
    }
    try {
      var qr = window.qrcode(0, "M");
      qr.addData(text); qr.make();
      var n = qr.getModuleCount(), quiet = 4, size = Math.floor(c.width / (n + quiet * 2));
      var off = Math.floor((c.width - size * n) / 2);
      ctx.fillStyle = "#000";
      for (var r = 0; r < n; r++) for (var col = 0; col < n; col++) if (qr.isDark(r, col)) ctx.fillRect(off + col * size, off + r * size, size, size);
    } catch (e) {
      ctx.fillStyle = "#b25e00"; ctx.font = "13px system-ui, sans-serif"; ctx.textAlign = "center";
      ctx.fillText("Link too long for a QR code", c.width / 2, c.height / 2);
    }
  }
  function qrPng() {
    // Re-render at 1024px for print quality.
    var qr = window.qrcode(0, "M"); qr.addData(current); qr.make();
    var n = qr.getModuleCount(), cell = Math.floor(1024 / (n + 8)), size = cell * (n + 8);
    var c = document.createElement("canvas"); c.width = c.height = size;
    var ctx = c.getContext("2d"); ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, size, size); ctx.fillStyle = "#000";
    for (var r = 0; r < n; r++) for (var col = 0; col < n; col++) if (qr.isDark(r, col)) ctx.fillRect((col + 4) * cell, (r + 4) * cell, cell, cell);
    var a = document.createElement("a"); a.href = c.toDataURL("image/png");
    var camp = (el("f-utm_campaign").value || "link").toLowerCase().replace(/[^a-z0-9_-]+/g, "-");
    a.download = "qr-" + camp + ".png"; document.body.appendChild(a); a.click(); a.remove();
  }

  fields.forEach(function (f) { el("f-" + f).addEventListener("input", update); });
  el("o-lower").addEventListener("change", update);
  el("o-space").addEventListener("change", update);
  el("btn-copy").onclick = function () { if (!current) return; copy(current, "Link copied"); addHistory(current); };
  el("btn-qr").onclick = function () { if (current) qrPng(); };
  el("btn-reset").onclick = function () { fields.forEach(function (f) { el("f-" + f).value = ""; }); presets.querySelectorAll(".chip").forEach(function (c) { c.classList.remove("on"); }); update(); el("f-url").focus(); };

  // ---------- bulk ----------
  var bulkRows = [];
  el("btn-bulk").onclick = function () {
    bulkRows = U.bulk(el("bulk-in").value, params(), opts());
    var tb = el("bulk-table").querySelector("tbody");
    tb.innerHTML = bulkRows.map(function (r, i) {
      return "<tr><td class='num'>" + (i + 1) + "</td><td style='word-break:break-all'>" + esc(r.url || r.input) + "</td><td>" +
        (r.error ? "<span style='color:var(--warn)'>" + esc(r.error) + "</span>" : esc(r.warnings.filter(function (w) { return !/^Added https/.test(w); }).slice(0, 2).join(" "))) + "</td></tr>";
    }).join("");
    el("bulk-table").hidden = !bulkRows.length;
    var okN = bulkRows.filter(function (r) { return !r.error; }).length;
    el("btn-bulk-copy").disabled = el("btn-bulk-csv").disabled = !okN;
    toast(bulkRows.length ? okN + " of " + bulkRows.length + " links built" : "Paste some URLs first");
  };
  el("btn-bulk-copy").onclick = function () { copy(bulkRows.filter(function (r) { return !r.error; }).map(function (r) { return r.url; }).join("\n"), "All links copied"); };
  el("btn-bulk-csv").onclick = function () { download("utm-links.csv", U.toCsv(bulkRows), "text/csv"); };

  // ---------- decode ----------
  var decoded = null;
  el("dec-in").addEventListener("input", function () {
    var v = el("dec-in").value.trim(), tb = el("dec-table").querySelector("tbody");
    decoded = v ? U.parse(v) : null;
    if (!decoded || decoded.error) { tb.innerHTML = v ? "<tr><td>" + esc(decoded.error) + "</td></tr>" : ""; el("dec-clean").textContent = ""; return; }
    var keys = Object.keys(decoded.utm);
    tb.innerHTML = keys.length ? keys.map(function (k) { return "<tr><th>" + esc(k) + "</th><td>" + esc(decoded.utm[k]) + "</td></tr>"; }).join("")
      : "<tr><td>No UTM parameters in this link.</td></tr>";
    el("dec-clean").textContent = decoded.clean;
  });
  el("btn-dec-edit").onclick = function () {
    if (!decoded || decoded.error) return;
    el("f-url").value = decoded.clean;
    U.KEYS.forEach(function (k) { el("f-" + k).value = decoded.utm[k] || ""; });
    showTab("single"); update();
  };

  // ---------- history ----------
  function addHistory(url) {
    var h = load("history", []).filter(function (x) { return x.url !== url; });
    h.unshift({ url: url, at: new Date().toISOString().slice(0, 16).replace("T", " ") });
    save("history", h.slice(0, (window.CMXPro && CMXPro.isPro()) ? 500 : 25)); // Pro (pro.js): 500
  }
  function renderHistory() {
    var h = load("history", []), tb = el("hist-table").querySelector("tbody");
    tb.innerHTML = h.length ? h.map(function (x, i) {
      return "<tr><td style='white-space:nowrap;color:var(--muted)'>" + esc(x.at) + "</td><td style='word-break:break-all'>" + esc(x.url) + "</td><td><button class='chip' data-i='" + i + "'>Copy</button></td></tr>";
    }).join("") : "<tr><td>Links you copy will appear here.</td></tr>";
    tb.querySelectorAll("button").forEach(function (b) { b.onclick = function () { copy(h[+b.dataset.i].url, "Link copied"); }; });
  }
  el("btn-hist-clear").onclick = function () { save("history", []); renderHistory(); };

  // ---------- restore ----------
  var st = load("form", null);
  if (st) {
    fields.forEach(function (f) { if (st[f]) el("f-" + f).value = st[f]; });
    el("o-lower").checked = st.lower !== false;
    if (st.space) el("o-space").value = st.space;
  }
  update();
  window.UtmApp = { update: update, current: function () { return current; } };
  if ("serviceWorker" in navigator && location.protocol === "https:") navigator.serviceWorker.register("sw.js").catch(function () {});
})();