@layoutaid/core/dist/index.mjs

Dev tool that adds visual layout aid for integrating web pages

function columns(config) {
  const { count = 14, color = "rgba(85, 189, 234, 0.6)", persist = true } = config;
  const styleToApply = (
    /* css */
    `.layoutaid-columns {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        height: 100%;
        z-index: 10000;
        pointer-events: none;
        display: grid;
        grid-template-columns: repeat(${count}, minmax(0, 1fr));
        visibility: hidden;
        outline: none!important;
    }
    .layoutaid-columns * {
        outline: none!important;
    }
    .layoutaid-columns.active {
        visibility: visible;
    }
    .layoutaid-columns div {
        width: 100%;
        border-left: solid 1px ${color};
        color: ${color};
        outline: none;
        pointer-events: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 16px;
        padding-bottom: 16px;
        justify-content: space-between;
        outline: none!important;
    }
    .layoutaid-columns div:first-child {
        border-left: none;
    }
    .layoutaid-columns div:last-child {
        border-right: none;
    }`
  );
  const stylesheet = document.createElement("style");
  stylesheet.textContent = styleToApply;
  document.head.appendChild(stylesheet);
  const debugCols = document.createElement("div");
  debugCols.classList.add("layoutaid-columns");
  for (let i = 0; i < count; i++) {
    const el = document.createElement("div");
    el.innerHTML = `<span>${i + 1}</span><span>${i + 1}</span>`;
    debugCols.appendChild(el);
  }
  document.body.appendChild(debugCols);
  if (persist && sessionStorage.getItem("debugColsActive") === "true") {
    debugCols.classList.add("active");
  }
  document.addEventListener("keydown", (e) => {
    if (e.key.toLowerCase() === "g" && (e.ctrlKey || e.shiftKey)) {
      debugCols.classList.toggle("active");
      sessionStorage.setItem("debugColsActive", debugCols.classList.contains("active").toString());
    }
  });
  const hotKey = navigator.userAgent.includes("Mac OS X") ? "^" : "\u21E7";
  console.log(
    `%c\u{1F6E0}\uFE0F Vite layout aid columns enabled. Use ${hotKey}+g for grid.%c`,
    "background: #22b34b; color:white; padding: 6px 8px; border-radius: 4px;",
    ""
  );
}

function outline(config) {
  const { color = "red", persist = true } = config;
  const styleToApply = (
    /* css */
    `.layoutaid-debug-outline *:not(.layoutaid-outline-exclude):not(.layoutaid-outline-exclude *):not(.layoutaid-outline-exclude) { outline: 1px solid ${color}; }`
  );
  const stylesheet = document.createElement("style");
  stylesheet.textContent = styleToApply;
  document.head.appendChild(stylesheet);
  if (persist && sessionStorage.getItem("debugOutlineActive") === "true") {
    document.body.classList.add("layoutaid-debug-outline");
  }
  document.addEventListener("keydown", (e) => {
    if (e.key.toLowerCase() === "o" && (e.ctrlKey || e.shiftKey)) {
      document.body.classList.toggle("layoutaid-debug-outline");
      if (persist) {
        sessionStorage.setItem("debugOutlineActive", document.body.classList.contains("layoutaid-debug-outline").toString());
      }
    }
  });
  const hotKey = navigator.userAgent.includes("Mac OS X") ? "^" : "\u21E7";
  console.log(
    `%c\u{1F6E0}\uFE0F Devtool outlines enabled. Use ${hotKey}+O to toggle outlines.%c`,
    "background: #3A7EDD; color:white; padding: 6px 8px; border-radius: 4px;",
    ""
  );
}

export { columns, outline };