113 lines
4.7 KiB
HTML
113 lines
4.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Checkbox Tree Demo</title>
|
|
<link rel="stylesheet" href="../src/checkbox-tree.css">
|
|
<style>
|
|
body { max-width: 40rem; margin: 2rem auto; padding: 0 1rem; font-family: system-ui, sans-serif; }
|
|
#selection { padding: 0.75rem; background: #f3f3f3; }
|
|
#share-status { min-height: 1.5em; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Checkbox Tree</h1>
|
|
<p>A representative sample of countries, U.S. states, and North Dakota counties.</p>
|
|
<div id="tree"></div>
|
|
<p><button id="share" type="button">Copy shareable URL</button></p>
|
|
<p id="share-status" role="status"></p>
|
|
<h2>Selected places</h2>
|
|
<pre id="selection">[]</pre>
|
|
<script type="module">
|
|
import { CheckboxTree, loadManifest } from "../src/checkbox-tree.js";
|
|
|
|
const output = document.querySelector("#selection");
|
|
const manifest = loadManifest(await fetch("./manifest.json").then(response => response.json()));
|
|
const tree = new CheckboxTree(document.querySelector("#tree"), {
|
|
initiallySelected: true,
|
|
manifest,
|
|
stateEncoding: "tiered",
|
|
onSelectionChange({ selectedIds }) {
|
|
output.textContent = JSON.stringify(selectedIds, null, 2);
|
|
},
|
|
});
|
|
|
|
tree.setData([
|
|
{ id: "country:argentina", label: "Argentina" },
|
|
{ id: "country:australia", label: "Australia" },
|
|
{ id: "country:brazil", label: "Brazil" },
|
|
{ id: "country:canada", label: "Canada" },
|
|
{ id: "country:france", label: "France" },
|
|
{ id: "country:germany", label: "Germany" },
|
|
{ id: "country:india", label: "India" },
|
|
{ id: "country:japan", label: "Japan" },
|
|
{ id: "country:mexico", label: "Mexico" },
|
|
{ id: "country:united-kingdom", label: "United Kingdom" },
|
|
{
|
|
id: "country:usa",
|
|
label: "United States of America (USA)",
|
|
children: [
|
|
{ id: "state:california", label: "California" },
|
|
{ id: "state:florida", label: "Florida" },
|
|
{ id: "state:illinois", label: "Illinois" },
|
|
{ id: "state:minnesota", label: "Minnesota" },
|
|
{ id: "state:montana", label: "Montana" },
|
|
{
|
|
id: "state:north-dakota",
|
|
label: "North Dakota",
|
|
children: [
|
|
{ id: "county:adams-nd", label: "Adams County" },
|
|
{ id: "county:barnes-nd", label: "Barnes County" },
|
|
{ id: "county:burleigh-nd", label: "Burleigh County" },
|
|
{ id: "county:cass-nd", label: "Cass County" },
|
|
{ id: "county:grand-forks-nd", label: "Grand Forks County" },
|
|
{ id: "county:mckenzie-nd", label: "McKenzie County" },
|
|
{ id: "county:morton-nd", label: "Morton County" },
|
|
{ id: "county:ramsey-nd", label: "Ramsey County" },
|
|
{ id: "county:stark-nd", label: "Stark County" },
|
|
{ id: "county:ward-nd", label: "Ward County" },
|
|
],
|
|
},
|
|
{ id: "state:new-york", label: "New York" },
|
|
{ id: "state:south-dakota", label: "South Dakota" },
|
|
{ id: "state:texas", label: "Texas" },
|
|
{ id: "state:washington", label: "Washington" },
|
|
],
|
|
},
|
|
{ id: "country:south-africa", label: "South Africa" },
|
|
]);
|
|
output.textContent = JSON.stringify(tree.getSelectedIds(), null, 2);
|
|
|
|
function updateUrl() {
|
|
const url = new URL(window.location.href);
|
|
url.hash = tree.serializeStateToFragment();
|
|
if (url.href !== window.location.href) history.pushState(null, "", url);
|
|
}
|
|
|
|
document.querySelector("#tree").addEventListener("change", updateUrl);
|
|
document.querySelector("#tree").addEventListener("click", event => {
|
|
if (event.target.closest('.checkbox-tree__toggle')) updateUrl();
|
|
});
|
|
|
|
window.addEventListener("popstate", () => {
|
|
tree.restoreStateFromLocation();
|
|
output.textContent = JSON.stringify(tree.getSelectedIds(), null, 2);
|
|
document.querySelector("#share-status").textContent = "";
|
|
});
|
|
|
|
document.querySelector("#share").addEventListener("click", async () => {
|
|
const url = new URL(window.location.href);
|
|
url.hash = tree.serializeStateToFragment();
|
|
const status = document.querySelector("#share-status");
|
|
try {
|
|
await navigator.clipboard.writeText(url.href);
|
|
status.textContent = "Shareable URL copied.";
|
|
} catch {
|
|
status.textContent = `Share this URL: ${url.href}`;
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|