rastrillo / fiesta Public

Download this file

1	/* site.js: the landing page's own behaviour. Everything here enhances
2	markup that already works without it: the theme bar is hidden until
3	this runs, and the sample's panes all show and its forms reload the
4	page at the sample. The install line's Copy button is Fiesta's
5	copy.js, given the site's own words as attributes.
6
7	Theme. The three theme buttons swap the stylesheet the head wrote,
8	remember the choice in localStorage["fiesta-theme"], and mark the
9	pressed one. The scheme is fiesta.js's, through the scheme menu.
10
11	Sample. One pane shows at a time, chosen from the sidebar; the Menu
12	pane shows one course at a time, chosen from its tabs. Its two forms
13	never leave the page: a submit shows the form's own local message in
14	a status region instead. */
15	(function () {
16	"use strict";
17
18	var THEMES = { day: "/1/fiesta.css", plain: "/1/fiesta-plain.css", signal: "/1/fiesta-signal.css" };
19	// The three names, spelled out: a lookup in THEMES alone would take
20	// "constructor" or "__proto__", which every object inherits, as a
21	// theme, and mark none of the tabs for it.
22	function isTheme(t) {
23	return t === "day" || t === "plain" || t === "signal";
24	}
25	function stored() {
26	try { return localStorage.getItem("fiesta-theme"); } catch (e) { return null; }
27	}
28	function remember(theme) {
29	try { localStorage.setItem("fiesta-theme", theme); } catch (e) {}
30	}
31	// Every button says "true" or "false": a toggle button with no
32	// aria-pressed is announced as a plain button, not as one unpressed.
33	function markTheme(theme) {
34	document.querySelectorAll("[data-site-theme]").forEach(function (button) {
35	button.setAttribute("aria-pressed", button.getAttribute("data-site-theme") === theme ? "true" : "false");
36	});
37	}
38
39	var bar = document.querySelector(".site-themebar"), link = document.getElementById("site-theme");
40	if (bar && link) {
41	var theme = stored();
42	if (!isTheme(theme)) theme = "day";
43	markTheme(theme);
44	bar.hidden = false;
45	bar.addEventListener("click", function (e) {
46	var button = e.target.closest("[data-site-theme]");
47	if (!button) return;
48	var t = button.getAttribute("data-site-theme");
49	if (!isTheme(t)) return;
50	if (link.getAttribute("href") !== THEMES[t]) link.setAttribute("href", THEMES[t]);
51	remember(t);
52	markTheme(t);
53	});
54	}
55
56	var sample = document.getElementById("sample");
57	if (sample) {
58	// One group of choosers and the things they show, where each
59	// chooser links #id and the thing is the element with that id.
60	function group(links, things) {
61	function show(id) {
62	things.forEach(function (el) { el.hidden = el.id !== id; });
63	links.forEach(function (a) {
64	if (a.getAttribute("href") === "#" + id) a.setAttribute("aria-current", "page");
65	else a.removeAttribute("aria-current");
66	});
67	}
68	var current = null;
69	links.forEach(function (a) { if (a.hasAttribute("aria-current")) current = a; });
70	show((current || links[0]).getAttribute("href").slice(1));
71	links.forEach(function (a) {
72	a.addEventListener("click", function (e) {
73	e.preventDefault();
74	show(a.getAttribute("href").slice(1));
75	});
76	});
77	}
78	var side = Array.prototype.slice.call(sample.querySelectorAll('[rst-side-nav] a[href^="#pane-"]'));
79	var panes = Array.prototype.slice.call(sample.querySelectorAll(".site-pane"));
80	if (side.length && panes.length) group(side, panes);
81	var tabs = Array.prototype.slice.call(sample.querySelectorAll("[data-site-course]"));
82	var courses = Array.prototype.slice.call(sample.querySelectorAll(".site-course"));
83	if (tabs.length && courses.length) group(tabs, courses);
84
85	sample.addEventListener("submit", function (e) {
86	var form = e.target, done = form.getAttribute("data-site-done"), live = form.querySelector(".site-live");
87	if (!done || !live) return;
88	e.preventDefault();
89	live.textContent = "";
90	live.textContent = done;
91	});
92	}
93	})();
94