mirror of
https://github.com/nlohmann/json.git
synced 2026-11-03 19:29:22 +00:00
Niels Lohmann
f64464daf1
The single features/json_view.md page grew to ~600 lines covering eight
topics. Split it into features/json_view/ with an overview page and
pages for ownership and lifetime, differences from basic_json, reading
values, generic code, editing, and images.
The new differences page collects what was spread over several sections
("What is the same", "What is different", "Duplicate keys", and notes in
the conversion and serialization sections) under one summary table, and
adds the parts of the basic_json interface a view does not have. The
other pages now link to it instead of restating the rules.
Internal links across the documentation point to the new pages.
Signed-off-by: Niels Lohmann <mail@nlohmann.me>
79 lines
3.3 KiB
JavaScript
79 lines
3.3 KiB
JavaScript
/* figures: jsonview -- stepper for the edit frames on features/json_view/index.md.
|
||
Without JS the frames (.nj-jsonview-step) show one below the other; with JS one frame at a time, with
|
||
previous/next and one button per step. Never advances on its own. */
|
||
(function () {
|
||
"use strict";
|
||
|
||
function njJsonviewInit(root) {
|
||
if (root.classList.contains("is-enhanced")) return;
|
||
var steps = Array.prototype.slice.call(root.querySelectorAll(".nj-jsonview-step"));
|
||
if (steps.length < 2) return;
|
||
var current = 0;
|
||
|
||
var bar = document.createElement("div");
|
||
bar.className = "nj-jsonview-controls";
|
||
bar.setAttribute("role", "group");
|
||
bar.setAttribute("aria-label", "Edit steps");
|
||
|
||
function button(label, aria, onClick) {
|
||
var b = document.createElement("button");
|
||
b.type = "button";
|
||
b.textContent = label;
|
||
b.setAttribute("aria-label", aria);
|
||
b.addEventListener("click", onClick);
|
||
bar.appendChild(b);
|
||
return b;
|
||
}
|
||
|
||
var prev = button("‹ Back", "Previous step", function () { show(current - 1, true); });
|
||
var dots = steps.map(function (s, i) {
|
||
return button(String(i + 1), "Step " + (i + 1) + ": " + (s.getAttribute("data-label") || ""), function () { show(i, true); });
|
||
});
|
||
var next = button("Next ›", "Next step", function () { show(current + 1, true); });
|
||
var status = document.createElement("span");
|
||
status.className = "nj-jsonview-status";
|
||
status.setAttribute("aria-live", "polite");
|
||
bar.appendChild(status);
|
||
|
||
function show(i, focusKeep) {
|
||
current = Math.max(0, Math.min(steps.length - 1, i));
|
||
steps.forEach(function (s, k) {
|
||
s.classList.toggle("is-current", k === current);
|
||
s.setAttribute("aria-hidden", k === current ? "false" : "true");
|
||
});
|
||
dots.forEach(function (d, k) {
|
||
if (k === current) d.setAttribute("aria-current", "step"); else d.removeAttribute("aria-current");
|
||
});
|
||
prev.disabled = current === 0;
|
||
next.disabled = current === steps.length - 1;
|
||
status.textContent = "Step " + (current + 1) + " of " + steps.length;
|
||
if (focusKeep && document.activeElement && document.activeElement.disabled) {
|
||
(current === 0 ? next : prev).focus();
|
||
}
|
||
}
|
||
|
||
root.addEventListener("keydown", function (e) {
|
||
if (e.target.tagName !== "BUTTON") return;
|
||
if (e.key === "ArrowRight") { show(current + 1, true); e.preventDefault(); }
|
||
else if (e.key === "ArrowLeft") { show(current - 1, true); e.preventDefault(); }
|
||
});
|
||
|
||
root.insertBefore(bar, root.firstChild);
|
||
root.classList.add("is-enhanced");
|
||
show(0, false);
|
||
}
|
||
|
||
function njJsonviewAll() {
|
||
var roots = document.querySelectorAll("[data-nj-jsonview-steps]");
|
||
for (var i = 0; i < roots.length; i++) njJsonviewInit(roots[i]);
|
||
}
|
||
|
||
if (typeof document$ !== "undefined" && document$ && typeof document$.subscribe === "function") {
|
||
document$.subscribe(njJsonviewAll);
|
||
} else if (document.readyState === "loading") {
|
||
document.addEventListener("DOMContentLoaded", njJsonviewAll);
|
||
} else {
|
||
njJsonviewAll();
|
||
}
|
||
})();
|