Adding in new debug functionality

Author: kallewesterling

production/skilljar-theme-v3.0/debug.mjs

@@ -1,4 +1,4 @@
-import { Q, A, el } from "./utils.mjs";
+import { A, el } from "./utils.mjs";
 import { setStyle } from "./styling.mjs";
 import { CG } from "./CG.mjs";
 import { pageHandlers } from "./router.mjs";
@@ -8,24 +8,31 @@ import { logger } from "./logger.mjs";
 // static imports
 import { config } from "../data/config.mjs";
 
-/**
- * Update all links on the page to use either the production or staging domain.
- * @param {boolean} useTestDomain - If true, update links to use the staging domain; otherwise, use the production domain.
- * @returns {void}
- * @example
- * // Update links to use the staging domain
- * updateLinks(true);
- *
- * // Update links to use the production domain
- * updateLinks(false);
- */
+// ── DEBUG_FLAGS ─────────────────────────────────────────────────────────────
+const FLAGS_KEY = "DEBUG_FLAGS";
+const DEFAULT_FLAGS = {
+  disabled: false,
+  logging: false,
+  expose: false,
+  useTestDomain: false,
+};
+
+function getFlags() {
+  try {
+    return { ...DEFAULT_FLAGS, ...JSON.parse(localStorage.getItem(FLAGS_KEY) || "{}") };
+  } catch {
+    return { ...DEFAULT_FLAGS };
+  }
+}
+
+function setFlag(key, value) {
+  localStorage.setItem(FLAGS_KEY, JSON.stringify({ ...getFlags(), [key]: value }));
+}
+
+// ── domain swapper ──────────────────────────────────────────────────────────
 function updateLinks(useTestDomain) {
   A(
-    'a[href*="' +
-    config.domains.prod.url +
-    '"], a[href*="' +
-    config.domains.stage.url +
-    '"]'
+    `a[href*="${config.domains.prod.url}"], a[href*="${config.domains.stage.url}"]`
   ).forEach((link) => {
     const url = new URL(link.href);
     if (useTestDomain && url.hostname === config.domains.prod.url) {
@@ -37,106 +44,263 @@ function updateLinks(useTestDomain) {
   });
 }
 
-/**
- * Adds a debug heading with environment information and a staging toggle.
- * @returns {void}
- */
-export function debugHeading() {
-  // adding a dropdown info circle
-  const infoCircle = el(
-    "div",
-    { class: "align-vertical info-circle-wrapper" },
-    [el("div", { class: "info-circle", text: "I" })]
-  );
-  CG.dom.headerRight.insertBefore(infoCircle, CG.dom.headerRight.firstChild);
-
-  let dropdownOptions = [
-    el("span", {
-      text: "Handler: " + pageHandlers.find(({ test }) => test).handler.name,
-    }),
-    el("input", {
-      type: "checkbox",
-      id: "cg-baseurl-staging",
-      checked: CG.env.isStaging ? true : false,
-    }),
-
-    // Add course edit link
-    CG.state.course.id
-      ? el("a", { href: CG.state.course.edit, text: "Edit Course" })
-      : null,
+// ── global exposure ─────────────────────────────────────────────────────────
+const GLOBALS = { logger, animateCompletion, shoot, el, setStyle, CG };
 
-    // Add path edit link
-    CG.state.course.path.id && CG.state.domain
-      ? el("a", { href: CG.state.course.path.edit, text: "Edit Path" })
-      : null,
-  ]
-    .filter(Boolean)
-    .map((html) => el("li", {}, [html]));
-
-  const dropdownMenu = el(
-    "ul",
-    { class: "info-circle-menu", hidden: true },
-    dropdownOptions
-  );
+function exposeGlobals()   { Object.assign(window, GLOBALS); }
+function unexposeGlobals() { Object.keys(GLOBALS).forEach((k) => delete window[k]); }
 
-  CG.dom.headerRight.parentElement.insertBefore(
-    dropdownMenu,
-    CG.dom.headerRight.parentElement.firstChild
-  );
+// ── floating debug FAB ──────────────────────────────────────────────────────
+function buildDebugFab() {
+  const styleEl = document.createElement("style");
+  styleEl.textContent = `
+    #cg-debug-fab {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      z-index: 99999;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      padding: 0;
+      border: none;
+      border-radius: 50%;
+      background: #6226fb;
+      color: #ffffff;
+      font-size: 14px;
+      font-weight: 800;
+      font-family: Gellix, system-ui, sans-serif;
+      letter-spacing: 0;
+      cursor: pointer;
+      box-shadow: 0 2px 10px rgba(98, 38, 251, 0.40);
+      transition: transform 0.12s ease, box-shadow 0.12s ease;
+    }
+    #cg-debug-fab:hover {
+      transform: scale(1.1);
+      box-shadow: 0 4px 16px rgba(98, 38, 251, 0.55);
+    }
+    #cg-debug-panel {
+      position: fixed;
+      bottom: 64px;
+      right: 20px;
+      z-index: 99998;
+      width: 232px;
+      background: #ffffff;
+      border: 1px solid #e2e8f0;
+      border-radius: 12px;
+      overflow: hidden;
+      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06);
+      color: #1e293b;
+      font-family: Gellix, system-ui, sans-serif;
+      font-size: 13px;
+    }
+    #cg-debug-panel[hidden] { display: none; }
+    .cg-dbg-hd {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 12px 9px;
+      border-bottom: 1px solid #f1f5f9;
+    }
+    .cg-dbg-title {
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      color: #64748b;
+    }
+    .cg-dbg-close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      padding: 0;
+      border: none;
+      border-radius: 4px;
+      background: none;
+      color: #94a3b8;
+      font-size: 16px;
+      line-height: 1;
+      cursor: pointer;
+    }
+    .cg-dbg-close:hover { background: #f1f5f9; color: #1e293b; }
+    .cg-dbg-section {
+      padding: 6px 0;
+      border-bottom: 1px solid #f1f5f9;
+    }
+    .cg-dbg-section:last-child { border-bottom: none; }
+    .cg-dbg-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 5px 12px;
+      cursor: pointer;
+      user-select: none;
+    }
+    .cg-dbg-row:hover { background: #f8fafc; }
+    .cg-dbg-row input[type="checkbox"] {
+      flex-shrink: 0;
+      width: 13px;
+      height: 13px;
+      margin: 0;
+      accent-color: #6226fb;
+      cursor: pointer;
+    }
+    .cg-dbg-row-lbl { font-size: 12px; }
+    .cg-dbg-note {
+      padding: 1px 12px 5px 33px;
+      font-size: 10px;
+      color: #94a3b8;
+      line-height: 1.4;
+    }
+    .cg-dbg-info {
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+      padding: 8px 12px 6px;
+    }
+    .cg-dbg-kv { font-size: 11px; color: #94a3b8; }
+    .cg-dbg-kv strong { color: #475569; font-weight: 600; }
+    .cg-dbg-links {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      padding: 4px 12px 8px;
+    }
+    .cg-dbg-links a { font-size: 12px; color: #6226fb; text-decoration: none; }
+    .cg-dbg-links a:hover { text-decoration: underline; }
+  `;
+  document.head.appendChild(styleEl);
 
-  const trigger = Q(".info-circle-wrapper");
-  const dropdown = Q(".info-circle-menu");
+  const flags = getFlags();
+  const handler = pageHandlers.find(({ test }) => test)?.handler.name ?? "unknown";
+  const envLabel = CG.env.isStaging ? "staging" : CG.env.isAdmin ? "admin" : "prod";
 
-  trigger.addEventListener("click", () => {
-    const x = trigger.getBoundingClientRect().x;
+  function makeToggle(label, flagKey, note, onChange) {
+    const id = `cg-dbg-${flagKey}`;
+    const checkbox = el("input", { type: "checkbox", id });
+    checkbox.checked = flags[flagKey];
+    checkbox.addEventListener("change", () => {
+      setFlag(flagKey, checkbox.checked);
+      onChange?.(checkbox.checked);
+    });
+    const row = el("label", { className: "cg-dbg-row", for: id }, [
+      checkbox,
+      el("span", { className: "cg-dbg-row-lbl", textContent: label }),
+    ]);
+    return note
+      ? [row, el("div", { className: "cg-dbg-note", textContent: note })]
+      : [row];
+  }
 
-    const dropdownWidth = 200;
-    const alignmentFactor = 0.7;
+  const editLinks = [
+    CG.state.course?.id
+      ? el("a", { href: CG.state.course.edit, textContent: "Edit Course", target: "_blank" })
+      : null,
+    CG.state.course?.path?.id && CG.state.domain
+      ? el("a", { href: CG.state.course.path.edit, textContent: "Edit Path", target: "_blank" })
+      : null,
+  ].filter(Boolean);
 
-    const left = x - dropdownWidth * alignmentFactor;
+  const panel = el("div", { id: "cg-debug-panel" }, [
+    el("div", { className: "cg-dbg-hd" }, [
+      el("span", { className: "cg-dbg-title", textContent: "CG Debug" }),
+      el("button", { className: "cg-dbg-close", textContent: "×", aria: { label: "Close" } }),
+    ]),
+    el("div", { className: "cg-dbg-section" }, [
+      ...makeToggle("Disable debug", "disabled", "Takes effect on next page load"),
+      ...makeToggle("Enable logging", "logging", null, (on) => {
+        if (on) console.info("[CG] Logging enabled — reload for full output");
+      }),
+      ...makeToggle("Expose globals", "expose", "logger, el, CG, shoot, …", (on) =>
+        on ? exposeGlobals() : unexposeGlobals()
+      ),
+      ...makeToggle("Use test domain", "useTestDomain", null, updateLinks),
+    ]),
+    el("div", { className: "cg-dbg-section" }, [
+      el("div", { className: "cg-dbg-info" }, [
+        el("div", { className: "cg-dbg-kv" }, [
+          el("strong", { textContent: "Handler: " }),
+          document.createTextNode(handler),
+        ]),
+        el("div", { className: "cg-dbg-kv" }, [
+          el("strong", { textContent: "Env: " }),
+          document.createTextNode(envLabel),
+        ]),
+      ]),
+      ...(editLinks.length ? [el("div", { className: "cg-dbg-links" }, editLinks)] : []),
+    ]),
+  ]);
+  panel.hidden = true;
 
-    dropdown.style.left = `${left}px`;
+  panel.querySelector(".cg-dbg-close").addEventListener("click", () => {
+    panel.hidden = true;
+  });
 
-    dropdown.hidden = !dropdown.hidden;
+  const fab = el("button", {
+    id: "cg-debug-fab",
+    textContent: "D",
+    aria: { label: "Open debug panel" },
+  });
+  fab.addEventListener("click", (e) => {
+    e.stopPropagation();
+    panel.hidden = !panel.hidden;
   });
 
-  const checkbox = Q("#cg-baseurl-staging");
+  document.body.append(fab, panel);
 
-  // initial state update if needed
-  updateLinks(checkbox.checked);
+  // apply initial domain state
+  updateLinks(flags.useTestDomain);
 
-  // toggle behavior
-  checkbox.addEventListener("change", function () {
-    updateLinks(this.checked);
+  // close on outside click or Escape
+  document.addEventListener(
+    "click",
+    (e) => {
+      if (!panel.hidden && !panel.contains(e.target) && e.target !== fab) {
+        panel.hidden = true;
+      }
+    },
+    { capture: true }
+  );
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && !panel.hidden) panel.hidden = true;
   });
 }
 
-/*
- * Sets up logging based on the environment. Logging is enabled by default for staging and admin users, but can be toggled via localStorage.
- * This function also logs the current environment and state for debugging purposes.
- * It checks the environment variables to determine if logging should be enabled and stores this preference in localStorage.
- * Finally, it logs the current environment and state using the logger instance.
+/**
+ * Adds a debug heading with environment information and a staging toggle.
+ * @deprecated Use setupDebug() — the floating FAB supersedes this.
+ * @returns {void}
+ */
+export function debugHeading() {}
+
+/**
+ * Sets up debug tooling. Reads and initialises DEBUG_FLAGS in localStorage,
+ * builds the floating debug FAB, and (unless disabled) wires up logging,
+ * global exposure, and environment logging.
+ * @returns {void}
  */
 export function setupDebug() {
-  // setup logging based on environment - enabled for staging and admin users by default, but can be toggled
-  if ((CG.env.isStaging || CG.env.isAdmin) && !localStorage.getItem("cg-logger-enabled")) {
-    localStorage.setItem("cg-logger-enabled", "true");
-  } else if (!localStorage.getItem("cg-logger-enabled")) {
-    localStorage.setItem("cg-logger-enabled", "false");
+  // first visit: seed flags based on environment
+  if (localStorage.getItem(FLAGS_KEY) === null) {
+    const auto = CG.env.isStaging || CG.env.isAdmin;
+    localStorage.setItem(
+      FLAGS_KEY,
+      JSON.stringify({ ...DEFAULT_FLAGS, logging: auto, expose: auto })
+    );
   }
 
-  // log environment info + state
+  buildDebugFab();
+
+  const flags = getFlags();
+  if (flags.disabled) return;
+
   logger.info("Environment", CG.env);
   logger.info("State", CG.state);
   logger.info("Page", CG.page);
 
-  if (CG.env.isStaging || CG.env.isAdmin) {
-    // Expose logger and animateCompletion to the global scope for debugging and external triggers
-    window.logger = logger;
-    window.animateCompletion = animateCompletion;
-    window.shoot = shoot;
-    window.el = el;
-    window.setStyle = setStyle;
-    window.CG = CG; // Expose CG for easier debugging access to state and environment
-  }
-}
+  if (flags.expose) exposeGlobals();
+}