@topsort/toppie-sdk/dist/debug.js

Toppie sdk is a JS library that allows to integrate Topsort auctions and analytics into your website.

function debug(data) {
  // Create a new div element if it doesn't exist
  let debugDiv = document.getElementById("debug-container");
  if (!debugDiv) {
    debugDiv = document.createElement("div");
    debugDiv.id = "debug-container";
    debugDiv.style.position = "fixed";
    debugDiv.style.top = "20px";
    debugDiv.style.right = "20px";
    debugDiv.style.padding = "10px";
    debugDiv.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
    debugDiv.style.color = "white";
    debugDiv.style.borderRadius = "5px";
    debugDiv.style.width = "500px";
    debugDiv.style.maxWidth = "500px";
    debugDiv.style.maxHeight = "90vh";
    debugDiv.style.overflow = "auto";
    debugDiv.style.zIndex = "9999";

    // add a clear all logs button

    // add a hide debug-container button
    const header = document.createElement("div");
    header.id = "debug-header";
    header.style.display = "flex";
    header.style.justifyContent = "space-between";

    const title = document.createElement("div");
    title.innerHTML = "Debug";
    header.appendChild(title);

    const options = document.createElement("div");

    const clearLogs = document.createElement("button");
    clearLogs.innerHTML = "clear";
    clearLogs.onclick = () => {
      const logsContainer = document.getElementById("debug-logs");
      if (logsContainer) {
        logsContainer.innerHTML = "";
      }
    };
    options.appendChild(clearLogs);

    const hideDebugContainer = document.createElement("button");
    hideDebugContainer.innerHTML = "hide";
    hideDebugContainer.onclick = () => {
      const logsContainer = document.getElementById("debug-logs");
      if (logsContainer) {
        if (logsContainer.style.display === "none") {
          logsContainer.style.display = "block";
        } else {
          logsContainer.style.display = "none";
        }
      }
    };
    options.appendChild(hideDebugContainer);

    header.appendChild(options);
    debugDiv.appendChild(header);

    // add a hide debug-container button

    const logsContainer = document.createElement("div");
    logsContainer.id = "debug-logs";
    debugDiv.appendChild(logsContainer);

    document.body.appendChild(debugDiv);
  }

  const logsContainer = document.getElementById("debug-logs");
  if (!logsContainer) {
    return;
  }

  // Create a new details element for the debug data
  const details = document.createElement("details");
  details.style.marginBottom = "5px";
  details.setAttribute("open", "");
  details.style.borderBottom = "1px solid rgba(255, 255, 255, 0.2)";
  details.style.paddingBottom = "5px";

  // Create summary element
  const summary = document.createElement("summary");
  const timestamp = new Date().toLocaleTimeString();
  summary.textContent = `(${timestamp})`;
  summary.style.cursor = "pointer";
  details.appendChild(summary);

  // Create content div
  const content = document.createElement("div");
  content.style.marginTop = "5px";
  content.style.paddingLeft = "10px";

  // Format the data as JSON with proper indentation
  let formattedData;
  try {
    formattedData = JSON.stringify(data, null, 2);
  } catch (e) {
    formattedData = data;
  }
  content.textContent = formattedData;
  details.appendChild(content);

  // Add the new entry to the debug container
  logsContainer.appendChild(details);
}
window.__toppie_devtools__ = {};
window.__toppie_devtools__.debug = debug;