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

244 lines
6.2 KiB
JavaScript
Raw Normal View History

2023-12-21 18:14:12 +00:00
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"
2023-12-22 00:36:57 +00:00
value="1"
min="0"
step="0.1"
2023-12-21 18:14:12 +00:00
/>
</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"
2023-12-21 19:07:04 +00:00
min="1"
2023-12-21 18:14:12 +00:00
/>
</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 {
2023-12-22 00:36:57 +00:00
--base-scale: ${generatorFields.baseScale.value}rem;
2023-12-21 18:14:12 +00:00
--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>
2023-12-21 18:38:10 +00:00
<fieldset>
<legend>Form</legend>
<label for="acc-width">Text:
<input
id="acc-width"
type="text"
style="width: 10em"
value="aggles paggles"
/>
</label><br />
<label for="acc-width">Number:
<input
id="acc-width"
type="number"
style="width: 8ch"
min="0"
value="0"
/>
</label><br />
<label for="acc-sat">Slider:
<input
id="acc-sat"
type="range"
min="0"
max="100"
value="50"
/>
</label><br />
<label for="acc-base" class="checkbox">Checkbox:
<input id="acc-base" type="checkbox" />
<span class="checkbox"></span>
</label>
</fieldset>
2023-12-21 18:14:12 +00:00
</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" />
2023-12-21 18:17:14 +00:00
<style>
${css}
</style>
2023-12-21 18:14:12 +00:00
</head>
<body>
</body>
</html>`;
}
generatorOutputs.view.addEventListener("load", preview);