abtmtr-v4/views/projects/item/normalize/scripts/generator.js

const generator = document.getElementById("generator");

generator.innerHTML = `<h2>Generator</h2>
<fieldset>
  <legend>Sizes</legend>
  <label for="g_base-scale">Base scale:
    <input
      id="g_base-scale"
      type="number"
      style="width: 8ch"
      value="16"
      min="8"
    />
  </label><br />
  <label for="g_document-width">Document width:
    <input
      id="g_document-width"
      type="number"
      style="width: 8ch"
      value="50"
      min="1"
    />
  </label>
</fieldset>
<fieldset>
  <legend>Base color</legend>
  <label for="g_base-color_hue">Page hue:
    <input
    id="g_base-color_hue"
    type="range"
    min="0"
    max="360"
    value="0"
    step="30"
    />
  </label><br />
  <label for="g_base-color_sat">Page saturation:
    <input
    id="g_base-color_sat"
    type="range"
    min="0"
    max="100"
    value="100"
    step="10"
    />
  </label>
</fieldset>
<fieldset>
  <legend>Fonts</legend>
  <label for="g_font-family">Page font:
    <input
      id="g_font-family"
      type="text"
      style="width: 10em"
      value="sans-serif"
    />
  </label><br />
  <label for="g_font-weight">Font weight:
    <input
      id="g_font-weight"
      type="range"
      min="100"
      max="900"
      step="100"
      value="400"
    />
  </label><br />
  <hr />
  <label for="g_header-font-family">Header font:
    <input
      id="g_header-font-family"
      type="text"
      style="width: 10em"
      value="sans-serif"
    />
  </label><br />
  <label for="g_header-font-weight">Header font weight:
    <input
      id="g_header-font-weight"
      type="range"
      min="100"
      max="900"
      step="100"
      value="600"
    />
  </label>
</fieldset>
<fieldset>
  <legend>Border style</legend>
  <label for="g_border-width">Width:
    <input
      id="g_border-width"
      type="number"
      style="width: 8ch"
      value="1"
      min="0"
    />
  </label><br />
  <label for="g_border-style">Style:
    <input
      id="g_border-style"
      type="text"
      style="width: 10em"
      value="solid"
    />
  </label><br />
  <label for="g_border-radius">Radius:
    <input
      id="g_border-radius"
      type="number"
      style="width: 8ch"
      value="0"
      min="0"
    />
  </label>
</fieldset>
<iframe id="go_view"></iframe>
<pre id="go_code"></pre>`;

const generatorFields = {
  baseScale: document.getElementById("g_base-scale"),
  documentWidth: document.getElementById("g_document-width"),

  baseColor: {
    hue: document.getElementById("g_base-color_hue"),
    sat: document.getElementById("g_base-color_sat"),
  },

  fontFamily: document.getElementById("g_font-family"),
  fontWeight: document.getElementById("g_font-weight"),
  headerFontFamily: document.getElementById("g_header-font-family"),
  headerFontWeight: document.getElementById("g_header-font-weight"),

  borderWidth: document.getElementById("g_border-width"),
  borderStyle: document.getElementById("g_border-style"),
  borderRadius: document.getElementById("g_border-radius"),
};

const generatorOutputs = {
  view: document.getElementById("go_view"),
  code: document.getElementById("go_code"),
}

generatorFields.baseScale.addEventListener('change', preview);
generatorFields.documentWidth.addEventListener('change', preview);
generatorFields.baseColor.hue.addEventListener('input', preview);
generatorFields.baseColor.sat.addEventListener('input', preview);
generatorFields.fontFamily.addEventListener('change', preview);
generatorFields.fontWeight.addEventListener('input', preview);
generatorFields.headerFontFamily.addEventListener('change', preview);
generatorFields.headerFontWeight.addEventListener('input', preview);
generatorFields.borderWidth.addEventListener('change', preview);
generatorFields.borderStyle.addEventListener('change', preview);
generatorFields.borderRadius.addEventListener('change', preview);

function generateNormalizeCode() {
  return `:root {
    --base-scale: ${generatorFields.baseScale.value}px;
    --document-width: ${generatorFields.documentWidth.value}em;

    --base-color: ${generatorFields.baseColor.hue.value}, ${generatorFields.baseColor.sat.value}%;

    --font-family: ${generatorFields.fontFamily.value};
    --font-weight: ${generatorFields.fontWeight.value};
    --header-font-family: ${generatorFields.headerFontFamily.value};
    --header-font-weight: ${generatorFields.headerFontWeight.value};

    --border-width: calc(${generatorFields.borderWidth.value}em / 16);
    --border-style: ${generatorFields.borderStyle.value};
    --border-radius: calc(${generatorFields.borderRadius.value}em / 16);
  }`
}

generatorOutputs.view.srcdoc = `<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Normalize Style</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="/styles/normal.css" />
    <style id="csshere"></style>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a test.</p>
    <button>Wee snaw</button>
  </body>
</html>`;

function preview() {
  const css = generateNormalizeCode();
  
  generatorOutputs.view.contentDocument.getElementById("csshere").innerHTML = css;
  generatorOutputs.code.textContent = `<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Normalize Style</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="/styles/normal.css" />
    <style>${css}</style>
  </head>
  <body>
  </body>
</html>`;
}

generatorOutputs.view.addEventListener("load", preview);