chore: import upstream snapshot with attribution
This commit is contained in:
wehub-resource-sync
@@ -0,0 +1,664 @@
|
||||
<!-- Copyright 2026 Anthropic PBC · SPDX-License-Identifier: Apache-2.0 -->
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Acme — flags.production.json</title>
|
||||
<style>
|
||||
:root {
|
||||
--ivory: #FAF9F5;
|
||||
--slate: #141413;
|
||||
--clay: #D97757;
|
||||
--clay-d: #B85C3E;
|
||||
--oat: #E3DACC;
|
||||
--olive: #788C5D;
|
||||
--gray-50: #F0EEE6;
|
||||
--gray-200: #D1CFC5;
|
||||
--gray-500: #87867F;
|
||||
--gray-800: #3D3D3A;
|
||||
--white: #ffffff;
|
||||
--serif: ui-serif, Georgia, "Times New Roman", serif;
|
||||
--sans: system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body {
|
||||
margin: 0;
|
||||
background: var(--ivory);
|
||||
color: var(--slate);
|
||||
font-family: var(--sans);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.wrap {
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
padding: 48px 32px 64px;
|
||||
}
|
||||
|
||||
/* ---------- header ---------- */
|
||||
header { margin-bottom: 28px; }
|
||||
.eyebrow {
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gray-500);
|
||||
}
|
||||
h1 {
|
||||
font-family: var(--serif);
|
||||
font-weight: 500;
|
||||
font-size: 30px;
|
||||
letter-spacing: -0.01em;
|
||||
margin: 6px 0 4px;
|
||||
}
|
||||
.sub {
|
||||
color: var(--gray-500);
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
/* ---------- layout ---------- */
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 320px;
|
||||
gap: 24px;
|
||||
align-items: start;
|
||||
}
|
||||
@media (max-width: 880px) {
|
||||
.layout { grid-template-columns: 1fr; }
|
||||
.sidebar { position: static !important; }
|
||||
}
|
||||
|
||||
/* ---------- warning banner ---------- */
|
||||
.banner {
|
||||
grid-column: 1 / -1;
|
||||
display: none;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
border: 1.5px solid #E8C2AE;
|
||||
background: #F8E9E0;
|
||||
color: var(--clay-d);
|
||||
border-radius: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.banner.show { display: flex; }
|
||||
.banner .glyph { font-size: 13px; line-height: 1; transform: translateY(1px); }
|
||||
|
||||
/* ---------- groups / panels ---------- */
|
||||
.form-col { display: flex; flex-direction: column; gap: 16px; }
|
||||
.group {
|
||||
background: var(--white);
|
||||
border: 1.5px solid var(--gray-200);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.group-head {
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gray-500);
|
||||
padding: 12px 18px 11px;
|
||||
border-bottom: 1.5px solid var(--gray-50);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.group-head .name { color: var(--gray-800); }
|
||||
.group-head .meta { letter-spacing: 0.04em; }
|
||||
|
||||
/* ---------- flag rows ---------- */
|
||||
.flag {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
padding: 14px 18px;
|
||||
border-bottom: 1px solid var(--gray-50);
|
||||
border-left: 3px solid transparent;
|
||||
transition: border-left-color 140ms ease, background 140ms ease;
|
||||
}
|
||||
.flag:last-child { border-bottom: none; }
|
||||
.flag.warn {
|
||||
border-left-color: var(--clay);
|
||||
background: #FBF3EE;
|
||||
}
|
||||
|
||||
.flag-info { flex: 1; min-width: 0; }
|
||||
.flag-key {
|
||||
font-family: var(--mono);
|
||||
font-size: 13px;
|
||||
color: var(--gray-800);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.dot {
|
||||
display: none;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--clay);
|
||||
flex: none;
|
||||
}
|
||||
.flag.changed .dot { display: inline-block; }
|
||||
.rollout {
|
||||
font-family: var(--mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--gray-500);
|
||||
background: var(--gray-50);
|
||||
border: 1px solid var(--gray-200);
|
||||
border-radius: 999px;
|
||||
padding: 1px 7px 2px;
|
||||
}
|
||||
.flag-desc {
|
||||
color: var(--gray-500);
|
||||
font-size: 12.5px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.req-chip {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 5px;
|
||||
margin-top: 7px;
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
color: var(--gray-500);
|
||||
background: var(--gray-50);
|
||||
border: 1px solid var(--gray-200);
|
||||
border-radius: 999px;
|
||||
padding: 2px 9px 3px;
|
||||
}
|
||||
.req-chip .warn-glyph { display: none; }
|
||||
.flag.warn .req-chip {
|
||||
color: var(--clay-d);
|
||||
background: #F8E1D5;
|
||||
border-color: #E8C2AE;
|
||||
}
|
||||
.flag.warn .req-chip .warn-glyph { display: inline; }
|
||||
|
||||
/* ---------- toggle switch ---------- */
|
||||
.toggle {
|
||||
position: relative;
|
||||
flex: none;
|
||||
width: 38px;
|
||||
height: 22px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
.toggle input {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.toggle .track {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--gray-200);
|
||||
border-radius: 999px;
|
||||
transition: background 160ms ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
.toggle .track::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: var(--white);
|
||||
box-shadow: 0 1px 2px rgba(20,20,19,0.18);
|
||||
transition: transform 160ms ease;
|
||||
}
|
||||
.toggle input:checked + .track { background: var(--olive); }
|
||||
.toggle input:checked + .track::after { transform: translateX(16px); }
|
||||
.toggle input:focus-visible + .track {
|
||||
outline: 2px solid var(--slate);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ---------- sidebar ---------- */
|
||||
.sidebar {
|
||||
position: sticky;
|
||||
top: 24px;
|
||||
background: var(--white);
|
||||
border: 1.5px solid var(--gray-200);
|
||||
border-radius: 12px;
|
||||
padding: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
.side-label {
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gray-500);
|
||||
}
|
||||
.side-count {
|
||||
font-family: var(--serif);
|
||||
font-weight: 500;
|
||||
font-size: 19px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.side-count .warn-n { color: var(--clay-d); }
|
||||
.side-count .sep { color: var(--gray-200); margin: 0 4px; }
|
||||
.diff {
|
||||
margin: 0;
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
line-height: 1.7;
|
||||
background: var(--gray-50);
|
||||
border: 1px solid var(--gray-200);
|
||||
border-radius: 8px;
|
||||
padding: 12px 14px;
|
||||
overflow-x: auto;
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
white-space: pre;
|
||||
}
|
||||
.diff .minus { color: var(--gray-500); }
|
||||
.diff .plus { color: var(--olive); }
|
||||
.diff .empty { color: var(--gray-500); }
|
||||
|
||||
.btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
padding: 9px 16px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
|
||||
}
|
||||
.btn.primary {
|
||||
background: var(--slate);
|
||||
color: var(--ivory);
|
||||
}
|
||||
.btn.primary:hover:not(:disabled) { background: var(--gray-800); }
|
||||
.btn.primary:disabled {
|
||||
background: var(--gray-200);
|
||||
color: var(--gray-500);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.btn.primary.copied { background: var(--olive); }
|
||||
.btn.ghost {
|
||||
background: transparent;
|
||||
color: var(--gray-800);
|
||||
border: 1.5px solid var(--gray-200);
|
||||
}
|
||||
.btn.ghost:hover { border-color: var(--gray-500); }
|
||||
.btn.ghost.copied { border-color: var(--olive); color: var(--olive); }
|
||||
.btn-stack { display: flex; flex-direction: column; gap: 8px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
|
||||
<header>
|
||||
<div class="eyebrow">Acme / editor / feature-flags</div>
|
||||
<h1>flags.production.json</h1>
|
||||
<p class="sub">A form-based editor for the production feature-flag config.
|
||||
Toggle flags, fix dependency warnings as they surface, then copy out
|
||||
only the lines that changed.</p>
|
||||
</header>
|
||||
|
||||
<div class="layout">
|
||||
<div class="banner" id="banner">
|
||||
<span class="glyph">⚠</span>
|
||||
<span id="bannerText">1 flag is enabled without its prerequisite</span>
|
||||
</div>
|
||||
|
||||
<div class="form-col" id="formCol"><!-- groups injected --></div>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div>
|
||||
<div class="side-label">Pending changes</div>
|
||||
<div class="side-count" id="sideCount">0 changed</div>
|
||||
</div>
|
||||
<pre class="diff" id="diff"><span class="empty">// no changes yet</span></pre>
|
||||
<div class="btn-stack">
|
||||
<button class="btn primary" id="copyDiff" disabled>Copy diff</button>
|
||||
<button class="btn ghost" id="copyJson">Copy full JSON</button>
|
||||
<button class="btn ghost" id="reset">Reset</button>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// data — the production flag set, as it exists right now
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const GROUPS = [
|
||||
{
|
||||
id: "onboarding",
|
||||
label: "Onboarding",
|
||||
flags: [
|
||||
{ key: "onboarding.checklist_v2",
|
||||
desc: "New three-step setup checklist replacing the modal tour.",
|
||||
on: true },
|
||||
{ key: "onboarding.invite_nudge",
|
||||
desc: "Nudge owners to invite teammates after creating their first project.",
|
||||
on: true },
|
||||
{ key: "onboarding.workspace_templates",
|
||||
desc: "Offer prebuilt workspace templates during signup.",
|
||||
on: false, requires: "onboarding.checklist_v2" },
|
||||
{ key: "onboarding.skip_email_verify",
|
||||
desc: "Let SSO-domain users in before email verification completes.",
|
||||
on: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "sync",
|
||||
label: "Sync engine",
|
||||
flags: [
|
||||
{ key: "sync.delta_compression",
|
||||
desc: "Send field-level deltas instead of full document snapshots.",
|
||||
on: true },
|
||||
{ key: "sync.offline_queue_v2",
|
||||
desc: "Persist offline edits to IndexedDB and replay on reconnect.",
|
||||
on: false, requires: "sync.delta_compression" },
|
||||
{ key: "sync.presence_cursors",
|
||||
desc: "Show live collaborator cursors in board and doc views.",
|
||||
on: true },
|
||||
{ key: "sync.conflict_banner",
|
||||
desc: "Surface a merge banner instead of silently last-write-wins.",
|
||||
on: false, requires: "sync.offline_queue_v2" },
|
||||
{ key: "sync.binary_ws_frames",
|
||||
desc: "Switch the realtime channel to binary WebSocket frames.",
|
||||
on: false, rollout: 10 }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "billing",
|
||||
label: "Billing",
|
||||
flags: [
|
||||
{ key: "billing.usage_meter",
|
||||
desc: "Show per-seat usage meter on the workspace billing page.",
|
||||
on: false },
|
||||
{ key: "billing.annual_discount_banner",
|
||||
desc: "Promote the annual-plan discount in the upgrade flow.",
|
||||
on: true },
|
||||
{ key: "billing.proration_preview",
|
||||
desc: "Preview the prorated charge before confirming a plan change.",
|
||||
on: false, requires: "billing.usage_meter" },
|
||||
{ key: "billing.dunning_emails_v3",
|
||||
desc: "Use the rewritten dunning sequence with a 14-day grace window.",
|
||||
on: true, rollout: 25 }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "internal",
|
||||
label: "Internal",
|
||||
flags: [
|
||||
{ key: "internal.shadow_traffic",
|
||||
desc: "Mirror 1% of API traffic to the staging cluster for diffing.",
|
||||
on: false },
|
||||
{ key: "internal.query_tracing",
|
||||
desc: "Attach OpenTelemetry spans to every Postgres query.",
|
||||
on: true },
|
||||
{ key: "internal.kill_switch_ui",
|
||||
desc: "Expose the emergency kill-switch panel in the admin console.",
|
||||
on: true, requires: "internal.query_tracing" }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// flat lookup, plus a frozen copy of initial state
|
||||
const FLAGS = {};
|
||||
const INITIAL = {};
|
||||
GROUPS.forEach(g => g.flags.forEach(f => {
|
||||
FLAGS[f.key] = f;
|
||||
INITIAL[f.key] = f.on;
|
||||
}));
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// render the form once; state lives in the checkboxes
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const formCol = document.getElementById("formCol");
|
||||
const banner = document.getElementById("banner");
|
||||
const bannerTxt = document.getElementById("bannerText");
|
||||
const sideCount = document.getElementById("sideCount");
|
||||
const diffEl = document.getElementById("diff");
|
||||
const copyDiffBtn = document.getElementById("copyDiff");
|
||||
const copyJsonBtn = document.getElementById("copyJson");
|
||||
const resetBtn = document.getElementById("reset");
|
||||
|
||||
function esc(s) {
|
||||
return String(s).replace(/[&<>"]/g, c =>
|
||||
({ "&": "&", "<": "<", ">": ">", '"': """ }[c]));
|
||||
}
|
||||
|
||||
function buildForm() {
|
||||
formCol.innerHTML = "";
|
||||
for (const g of GROUPS) {
|
||||
const panel = document.createElement("section");
|
||||
panel.className = "group";
|
||||
panel.dataset.group = g.id;
|
||||
|
||||
const head = document.createElement("div");
|
||||
head.className = "group-head";
|
||||
head.innerHTML =
|
||||
'<span class="name">' + esc(g.label) + '</span>' +
|
||||
'<span class="meta" data-meta></span>';
|
||||
panel.appendChild(head);
|
||||
|
||||
for (const f of g.flags) {
|
||||
const row = document.createElement("div");
|
||||
row.className = "flag";
|
||||
row.dataset.key = f.key;
|
||||
|
||||
const rolloutBadge = (typeof f.rollout === "number")
|
||||
? '<span class="rollout">' + f.rollout + '%</span>'
|
||||
: "";
|
||||
|
||||
const reqChip = f.requires
|
||||
? '<div class="req-chip"><span class="warn-glyph">⚠</span>' +
|
||||
'<span>requires ' + esc(f.requires) + '</span></div>'
|
||||
: "";
|
||||
|
||||
row.innerHTML =
|
||||
'<label class="toggle">' +
|
||||
'<input type="checkbox" data-key="' + esc(f.key) + '"' +
|
||||
(f.on ? " checked" : "") +
|
||||
' aria-label="' + esc(f.key) + '">' +
|
||||
'<span class="track"></span>' +
|
||||
'</label>' +
|
||||
'<div class="flag-info">' +
|
||||
'<div class="flag-key"><span class="dot"></span>' +
|
||||
'<span>' + esc(f.key) + '</span>' + rolloutBadge +
|
||||
'</div>' +
|
||||
'<div class="flag-desc">' + esc(f.desc) + '</div>' +
|
||||
reqChip +
|
||||
'</div>';
|
||||
|
||||
panel.appendChild(row);
|
||||
}
|
||||
formCol.appendChild(panel);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// state helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function currentState() {
|
||||
const state = {};
|
||||
formCol.querySelectorAll("input[type=checkbox]").forEach(cb => {
|
||||
state[cb.dataset.key] = cb.checked;
|
||||
});
|
||||
return state;
|
||||
}
|
||||
|
||||
function computeDiff(state) {
|
||||
const lines = [];
|
||||
for (const g of GROUPS) {
|
||||
for (const f of g.flags) {
|
||||
if (state[f.key] !== INITIAL[f.key]) {
|
||||
lines.push({ key: f.key, from: INITIAL[f.key], to: state[f.key] });
|
||||
}
|
||||
}
|
||||
}
|
||||
return lines;
|
||||
}
|
||||
|
||||
function diffText(lines) {
|
||||
return lines.map(l =>
|
||||
'- "' + l.key + '": ' + l.from + '\n' +
|
||||
'+ "' + l.key + '": ' + l.to
|
||||
).join("\n");
|
||||
}
|
||||
|
||||
function fullJson(state) {
|
||||
// grouped, ordered, pretty-printed — what you'd actually paste into the file
|
||||
let out = "{\n";
|
||||
GROUPS.forEach((g, gi) => {
|
||||
g.flags.forEach((f, fi) => {
|
||||
const last = gi === GROUPS.length - 1 && fi === g.flags.length - 1;
|
||||
out += ' "' + f.key + '": ' + state[f.key] + (last ? "" : ",") + "\n";
|
||||
});
|
||||
});
|
||||
out += "}";
|
||||
return out;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// the live update pass
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function update() {
|
||||
const state = currentState();
|
||||
let warnCount = 0;
|
||||
|
||||
// per-row decorations
|
||||
for (const g of GROUPS) {
|
||||
let onCount = 0;
|
||||
for (const f of g.flags) {
|
||||
const row = formCol.querySelector('.flag[data-key="' + CSS.escape(f.key) + '"]');
|
||||
const on = state[f.key];
|
||||
if (on) onCount++;
|
||||
|
||||
const changed = on !== INITIAL[f.key];
|
||||
row.classList.toggle("changed", changed);
|
||||
|
||||
let warn = false;
|
||||
if (f.requires && on && !state[f.requires]) warn = true;
|
||||
row.classList.toggle("warn", warn);
|
||||
if (warn) warnCount++;
|
||||
}
|
||||
const meta = formCol.querySelector(
|
||||
'.group[data-group="' + g.id + '"] [data-meta]');
|
||||
meta.textContent = g.flags.length + " flags, " + onCount + " on";
|
||||
}
|
||||
|
||||
// diff + sidebar
|
||||
const lines = computeDiff(state);
|
||||
if (lines.length === 0) {
|
||||
diffEl.innerHTML = '<span class="empty">// no changes yet</span>';
|
||||
copyDiffBtn.disabled = true;
|
||||
} else {
|
||||
diffEl.innerHTML = lines.map(l =>
|
||||
'<span class="minus">- "' + esc(l.key) + '": ' + l.from + '</span>\n' +
|
||||
'<span class="plus">+ "' + esc(l.key) + '": ' + l.to + '</span>'
|
||||
).join("\n");
|
||||
copyDiffBtn.disabled = false;
|
||||
}
|
||||
|
||||
sideCount.innerHTML =
|
||||
lines.length + " changed" +
|
||||
'<span class="sep">·</span>' +
|
||||
'<span class="' + (warnCount ? "warn-n" : "") + '">' +
|
||||
warnCount + " warning" + (warnCount === 1 ? "" : "s") +
|
||||
"</span>";
|
||||
|
||||
// banner
|
||||
if (warnCount > 0) {
|
||||
bannerTxt.textContent =
|
||||
warnCount === 1
|
||||
? "1 flag is enabled without its prerequisite"
|
||||
: warnCount + " flags are enabled without their prerequisites";
|
||||
banner.classList.add("show");
|
||||
} else {
|
||||
banner.classList.remove("show");
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// clipboard + buttons
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function flash(btn, label) {
|
||||
const orig = btn.textContent;
|
||||
btn.textContent = label;
|
||||
btn.classList.add("copied");
|
||||
btn.disabled = true;
|
||||
setTimeout(() => {
|
||||
btn.textContent = orig;
|
||||
btn.classList.remove("copied");
|
||||
btn.disabled = false;
|
||||
update(); // restore disabled state on copyDiff if needed
|
||||
}, 1200);
|
||||
}
|
||||
|
||||
function writeClipboard(text) {
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
return navigator.clipboard.writeText(text);
|
||||
}
|
||||
// fallback for file:// contexts without clipboard permission
|
||||
const ta = document.createElement("textarea");
|
||||
ta.value = text;
|
||||
ta.style.position = "fixed";
|
||||
ta.style.left = "-9999px";
|
||||
document.body.appendChild(ta);
|
||||
ta.select();
|
||||
try { document.execCommand("copy"); } catch (e) { /* ignore */ }
|
||||
document.body.removeChild(ta);
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
copyDiffBtn.addEventListener("click", () => {
|
||||
const lines = computeDiff(currentState());
|
||||
if (!lines.length) return;
|
||||
writeClipboard(diffText(lines)).then(() => flash(copyDiffBtn, "Copied ✓"));
|
||||
});
|
||||
|
||||
copyJsonBtn.addEventListener("click", () => {
|
||||
writeClipboard(fullJson(currentState())).then(() => flash(copyJsonBtn, "Copied ✓"));
|
||||
});
|
||||
|
||||
resetBtn.addEventListener("click", () => {
|
||||
formCol.querySelectorAll("input[type=checkbox]").forEach(cb => {
|
||||
cb.checked = INITIAL[cb.dataset.key];
|
||||
});
|
||||
update();
|
||||
});
|
||||
|
||||
formCol.addEventListener("change", e => {
|
||||
if (e.target.matches("input[type=checkbox]")) update();
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// boot
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
buildForm();
|
||||
update();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user