Different tree state URL encoding
This commit is contained in:
@@ -0,0 +1,142 @@
|
||||
{
|
||||
"schema": 1,
|
||||
"nodes": [
|
||||
"visibility:category:plants",
|
||||
"visibility:category:plants>visibility:type:flower",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:feature:83",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:feature:84",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:feature:85",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:feature:86",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:feature:87",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:feature:88",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:feature:89",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:feature:90",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:feature:91",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:53",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:54",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:55",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:56",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:57",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:58",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:59",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:60",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:61",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:62",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:63",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:64",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:65",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:66",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:67",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:68",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:69",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:70",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:71",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:72",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:73",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:74",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:75",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:76",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:77",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:78",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:79",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:80",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:81",
|
||||
"visibility:category:plants>visibility:type:flower>visibility:type:daylily>visibility:feature:82",
|
||||
"visibility:category:plants>visibility:type:tree",
|
||||
"visibility:category:plants>visibility:type:tree>visibility:feature:92",
|
||||
"visibility:category:plants>visibility:type:tree>visibility:feature:93",
|
||||
"visibility:category:plants>visibility:type:tree>visibility:feature:94",
|
||||
"visibility:category:plants>visibility:type:tree>visibility:feature:95",
|
||||
"visibility:category:plants>visibility:type:tree>visibility:feature:96",
|
||||
"visibility:category:plants>visibility:type:tree>visibility:feature:97",
|
||||
"visibility:category:plants>visibility:type:tree>visibility:feature:98",
|
||||
"visibility:category:plants>visibility:type:tree>visibility:feature:99",
|
||||
"visibility:category:plants>visibility:type:tree>visibility:feature:100",
|
||||
"visibility:category:plants>visibility:type:tree>visibility:feature:101",
|
||||
"visibility:category:plants>visibility:type:tree>visibility:feature:102",
|
||||
"visibility:category:plants>visibility:type:tree>visibility:feature:103",
|
||||
"visibility:category:plants>visibility:type:tree>visibility:feature:114",
|
||||
"visibility:category:plants>visibility:type:tree>visibility:feature:115",
|
||||
"visibility:category:plants>visibility:type:tree>visibility:feature:116",
|
||||
"visibility:category:plants>visibility:type:tree>visibility:feature:117",
|
||||
"visibility:category:plants>visibility:type:bush",
|
||||
"visibility:category:plants>visibility:type:bush>visibility:feature:109",
|
||||
"visibility:category:plants>visibility:type:bush>visibility:feature:110",
|
||||
"visibility:category:plants>visibility:type:bush>visibility:feature:111",
|
||||
"visibility:category:plants>visibility:type:bush>visibility:feature:112",
|
||||
"visibility:category:plants>visibility:type:bush>visibility:feature:113",
|
||||
"visibility:category:plants>visibility:type:bush>visibility:group:juniper-trees",
|
||||
"visibility:category:plants>visibility:type:bush>visibility:group:juniper-trees>visibility:feature:104",
|
||||
"visibility:category:plants>visibility:type:bush>visibility:group:juniper-trees>visibility:feature:105",
|
||||
"visibility:category:plants>visibility:type:bush>visibility:group:juniper-trees>visibility:feature:106",
|
||||
"visibility:category:plants>visibility:type:bush>visibility:group:juniper-trees>visibility:feature:107",
|
||||
"visibility:category:plants>visibility:type:bush>visibility:group:juniper-trees>visibility:feature:108",
|
||||
"visibility:category:structures",
|
||||
"visibility:category:structures>visibility:type:fence",
|
||||
"visibility:category:structures>visibility:type:fence>visibility:feature:1",
|
||||
"visibility:category:structures>visibility:type:flowerBed",
|
||||
"visibility:category:structures>visibility:type:flowerBed>visibility:feature:48",
|
||||
"visibility:category:structures>visibility:type:flowerBed>visibility:feature:49",
|
||||
"visibility:category:structures>visibility:type:flowerBed>visibility:feature:50",
|
||||
"visibility:category:structures>visibility:type:flowerBed>visibility:feature:51",
|
||||
"visibility:category:structures>visibility:type:flowerBed>visibility:feature:52",
|
||||
"visibility:category:structures>visibility:group:buildings",
|
||||
"visibility:category:structures>visibility:group:buildings>visibility:feature:40",
|
||||
"visibility:category:structures>visibility:group:buildings>visibility:feature:41",
|
||||
"visibility:category:structures>visibility:group:buildings>visibility:group:house-parts",
|
||||
"visibility:category:structures>visibility:group:buildings>visibility:group:house-parts>visibility:feature:42",
|
||||
"visibility:category:structures>visibility:group:buildings>visibility:group:house-parts>visibility:feature:43",
|
||||
"visibility:category:structures>visibility:group:paved-surfaces",
|
||||
"visibility:category:structures>visibility:group:paved-surfaces>visibility:feature:44",
|
||||
"visibility:category:structures>visibility:group:paved-surfaces>visibility:feature:45",
|
||||
"visibility:category:structures>visibility:group:paved-surfaces>visibility:feature:46",
|
||||
"visibility:category:structures>visibility:group:paved-surfaces>visibility:feature:47",
|
||||
"visibility:category:infrastructure",
|
||||
"visibility:category:infrastructure>visibility:type:sprinkler",
|
||||
"visibility:category:infrastructure>visibility:type:sprinkler>visibility:feature:118",
|
||||
"visibility:category:infrastructure>visibility:type:sprinkler>visibility:feature:119",
|
||||
"visibility:category:reference",
|
||||
"visibility:category:reference>visibility:type:lotBoundary",
|
||||
"visibility:category:reference>visibility:type:lotBoundary>visibility:feature:0",
|
||||
"visibility:category:reference>visibility:group:yard-grid",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:2",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:3",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:4",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:5",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:6",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:7",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:8",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:9",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:10",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:11",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:12",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:13",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:14",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:15",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:16",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:17",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:18",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:19",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:20",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:21",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:22",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:23",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:24",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:25",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:26",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:27",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:28",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:29",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:30",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:31",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:32",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:33",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:34",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:35",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:36",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:37",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:38",
|
||||
"visibility:category:reference>visibility:group:yard-grid>visibility:feature:39"
|
||||
]
|
||||
}
|
||||
+29
-4
@@ -1,5 +1,5 @@
|
||||
import { yardGeoJSON } from "./data/yard.js";
|
||||
import { CheckboxTree } from "../vendor/checkbox-tree/checkbox-tree.js";
|
||||
import { CheckboxTree, loadManifest } from "../vendor/checkbox-tree/checkbox-tree.js";
|
||||
import { resolveFeatureLinks, resolveFeatureStyle } from "./lib/feature-types.js";
|
||||
|
||||
const TILE_MAX_NATIVE_ZOOM = 19;
|
||||
@@ -51,7 +51,7 @@ let selectedFeatureIndexes = new Set(yardGeoJSON.features.map((_, index) => inde
|
||||
let yardLayer = null;
|
||||
const timelineButtons = new Map();
|
||||
|
||||
initializeVisibilityTree();
|
||||
await initializeVisibilityTree();
|
||||
renderYardForDate(selectedTimelineDate);
|
||||
addTimelineControl();
|
||||
map.fitBounds(getGeoJSONBounds(yardGeoJSON).pad(0.2), { maxZoom: MAP_MAX_ZOOM });
|
||||
@@ -129,19 +129,44 @@ function filterFeatureCollection(collection, date, visibleIndexes) {
|
||||
};
|
||||
}
|
||||
|
||||
function initializeVisibilityTree() {
|
||||
const tree = new CheckboxTree(document.getElementById("visibility-tree"), {
|
||||
async function initializeVisibilityTree() {
|
||||
const container = document.getElementById("visibility-tree");
|
||||
const manifest = loadManifest(
|
||||
await fetch("./src/data/visibility-tree-manifest.json").then((response) => response.json()),
|
||||
);
|
||||
const tree = new CheckboxTree(container, {
|
||||
initiallyCollapsed: true,
|
||||
initiallySelected: true,
|
||||
storageKey: "a-plot-of-plants:visibility:v1",
|
||||
manifest,
|
||||
onSelectionChange: ({ selectedNodes }) => {
|
||||
selectedFeatureIndexes = getSelectedFeatureIndexes(selectedNodes);
|
||||
renderYardForDate(selectedTimelineDate);
|
||||
pushTreeState(tree);
|
||||
},
|
||||
});
|
||||
|
||||
tree.setData(buildVisibilityNodes(yardGeoJSON));
|
||||
selectedFeatureIndexes = getSelectedFeatureIndexes(tree.getSelectedNodes());
|
||||
|
||||
container.addEventListener("click", (event) => {
|
||||
if (event.target.closest(".checkbox-tree__toggle")) {
|
||||
pushTreeState(tree);
|
||||
}
|
||||
});
|
||||
window.addEventListener("popstate", () => {
|
||||
tree.restoreStateFromLocation();
|
||||
selectedFeatureIndexes = getSelectedFeatureIndexes(tree.getSelectedNodes());
|
||||
renderYardForDate(selectedTimelineDate);
|
||||
});
|
||||
}
|
||||
|
||||
function pushTreeState(tree) {
|
||||
const url = new URL(window.location.href);
|
||||
url.hash = tree.serializeStateToFragment();
|
||||
if (url.href !== window.location.href) {
|
||||
history.pushState(null, "", url);
|
||||
}
|
||||
}
|
||||
|
||||
function getSelectedFeatureIndexes(nodes) {
|
||||
|
||||
Reference in New Issue
Block a user