index : cgit

/*
 * The client side script that cgit serves with every page. Its main job is
 * to refresh the relative ages that cgit_print_age renders in
 * source/ui-shared.c, so the thresholds, suffixes and class names tabulated
 * below mirror the constants there and the two have to move together. Three
 * smaller pieces follow, the selects that reload the page when they change,
 * the highlight laid over the source line a URL fragment names, and the
 * colour theme toggle. Each piece is wrapped in a function of its own so
 * that nothing is left behind in the global scope.
 */

(function () {

// Written the way SECONDS_PER_* are derived in source/cgit.h, so that the
// bucket a browser picks is the bucket cgit_print_age already picked on the
// server. A month is a twelfth of a year rather than thirty days, which is
// the definition the server uses.
var MINUTE = 60;
var HOUR   = 60 * MINUTE;
var DAY    = 24 * HOUR;
var WEEK   = 7 * DAY;
var YEAR   = 365 * DAY;
var MONTH  = YEAR / 12;

// The five arrays are indexed together by the bucket an age falls into. The
// search in render_age can stop one place past the last class, so the arrays
// it reads there repeat their final entry. Each limit is twice the next unit
// up, matching the thresholds cgit_print_age compares against.
var age_classes  = [ "age-mins", "age-hours", "age-days", "age-weeks", "age-months", "age-years" ];
var age_suffix   = [ "min.",     "hours",     "days",     "weeks",     "months",     "years",     "years" ];
var age_unit     = [ MINUTE,     HOUR,        DAY,        WEEK,        MONTH,        YEAR,        YEAR ];
var age_limit    = [ 2 * HOUR,   2 * DAY,     2 * WEEK,   2 * MONTH,   2 * YEAR,     2 * YEAR ];
var update_delay = [ 10,         5 * MINUTE,  30 * MINUTE, DAY,        DAY,          DAY,         DAY ];

function render_age(element, age) {
	var text, bucket;

	for (bucket = 0; bucket < age_classes.length; bucket++)
		if (age < age_limit[bucket])
			break;

	text = Math.round(age / age_unit[bucket]) + " " + age_suffix[bucket];

	// Every age on the page is measured again on each pass, so most of
	// them are already reading correctly and writing to them would cost a
	// repaint for nothing.
	if (element.textContent != text) {
		element.textContent = text;
		// An age past the last limit is still counted in years, but
		// there is no class beyond age-years to put on it.
		if (bucket == age_classes.length)
			bucket--;
		if (element.className != age_classes[bucket])
			element.className = age_classes[bucket];
	}
}

/*
 * Measures every age on the page against the clock and books the next pass.
 * There is no point coming back before the coarsest unit on the page could
 * change, so a page already counted in hours is left alone for minutes and
 * one counted in years for a day.
 */
function refresh_ages() {
	var bucket, elements, i, age;
	var delay = 24 * 3600;
	var now = Math.round(new Date().getTime() / 1000);

	for (bucket = 0; bucket < age_classes.length; bucket++) {
		elements = document.getElementsByClassName(age_classes[bucket]);

		if (elements.length && update_delay[bucket] < delay)
			delay = update_delay[bucket];

		for (i = 0; i < elements.length; i++) {
			age = now - elements[i].getAttribute("data-ut");

			// A commit dated ahead of the viewer's clock would
			// otherwise show a negative age, and ui-shared.c
			// clamps it the same way.
			if (age < 0)
				age = 0;

			render_age(elements[i], age);
		}
	}

	window.setTimeout(refresh_ages, delay * 1000);
}

document.addEventListener("DOMContentLoaded", function () {
	// Nothing here depends on layout, so the first pass can run as soon
	// as the document is parsed.
	refresh_ages();
}, false);

})();

/*
 * Selects marked data-autosubmit reload the page with the new setting. They
 * are wired up from here rather than with an inline onchange handler because
 * a strict Content-Security-Policy blocks those, and a reader without
 * scripting still has the noscript reload button the forms carry.
 */

(function () {

document.addEventListener("DOMContentLoaded", function () {
	var i, selects = document.querySelectorAll("select[data-autosubmit]");

	for (i = 0; i < selects.length; i++)
		selects[i].addEventListener("change", function () {
			this.form.submit();
		});
}, false);

})();

/*
 * Washes a faded highlight over the source line a URL fragment names, either
 * a single line as in #n231 or a range as in #n5-n12. The line anchors live
 * in the number gutter, so the anchor is measured and a bar of the same
 * height is laid across the full width of the code. Without scripting the
 * CSS target rule still tints the line number itself.
 */

(function () {

var bar = null;

function place_bar() {
	var match, first, last, table;
	var table_box, first_box, last_box, top, bottom;

	if (bar) {
		bar.remove();
		bar = null;
	}
	match = /^#n(\d+)(?:-n?(\d+))?$/.exec(location.hash);
	if (!match)
		return;
	first = document.getElementById("n" + match[1]);
	if (!first)
		return;
	last = (match[2] && document.getElementById("n" + match[2])) || first;
	table = first.closest("table");
	if (!table)
		return;
	table_box = table.getBoundingClientRect();
	first_box = first.getBoundingClientRect();
	last_box = last.getBoundingClientRect();
	top = Math.min(first_box.top, last_box.top) - table_box.top;
	bottom = Math.max(first_box.bottom, last_box.bottom) - table_box.top;
	bar = document.createElement("div");
	bar.className = "line-hl";
	bar.style.top = top + "px";
	bar.style.height = (bottom - top) + "px";
	table.appendChild(bar);

	// A browser only scrolls to a fragment that names a real id, which a
	// range never does, so bring the start of one into view here.
	if (match[2])
		first.scrollIntoView({ block: "center" });
}

document.addEventListener("DOMContentLoaded", place_bar, false);
window.addEventListener("hashchange", place_bar, false);

})();

/*
 * The colour theme toggle, which cycles from auto through light to dark and
 * remembers the choice. Auto sets no override at all, leaving the page to
 * follow the system preference the way the stylesheet does on its own.
 */

(function () {

var STORAGE_KEY = "cgit-theme";
var ORDER = [ "auto", "light", "dark" ];
var ICONS = {
	auto:  '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 3a9 9 0 0 0 0 18z" fill="currentColor" stroke="none"/></svg>',
	light: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><path d="M12 1v3M12 20v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M1 12h3M20 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"/></svg>',
	dark:  '<svg viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z"/></svg>'
};

/*
 * Local storage throws instead of answering when the browser has storage
 * switched off for the site, and a colour preference is not worth breaking
 * the page over, so both of these swallow the failure and the reader is left
 * on the automatic theme.
 */
function saved() {
	try {
		return localStorage.getItem(STORAGE_KEY);
	} catch (e) {
		return null;
	}
}

function persist(theme) {
	try {
		localStorage.setItem(STORAGE_KEY, theme);
	} catch (e) { }
}

function apply(theme, button) {
	var html = document.documentElement;

	if (theme === "auto")
		html.removeAttribute("data-theme");
	else
		html.setAttribute("data-theme", theme);

	// The browser paints the page canvas and the scrollbars from
	// color-scheme rather than from the stylesheet, so it has to be told
	// the choice as well.
	html.style.colorScheme = (theme === "auto") ? "" : theme;

	if (button) {
		button.innerHTML = ICONS[theme];
		button.title = "Colour theme: " + theme;
	}
}

var theme = saved();
if (ORDER.indexOf(theme) < 0)
	theme = "auto";

// This runs while the file is being parsed rather than on DOMContentLoaded.
// The script is fetched from the head and so runs before the body exists,
// which lands the choice ahead of the first paint and stops the page showing
// the other theme for a moment. The marker goes on the same element for the
// same reason, since div#cgit has not been parsed yet, and cgit-js reserves
// the toggle's column so that revealing the button below does not shift the
// header sideways.
apply(theme, null);
document.documentElement.classList.add("cgit-js");

document.addEventListener("DOMContentLoaded", function () {
	var root = document.getElementById("cgit");
	if (!root)
		return;
	var button = root.querySelector(".theme-toggle");
	if (!button)
		return;

	apply(theme, button);
	// The button is served hidden so that a reader without scripting is
	// never shown a control that cannot do anything.
	button.hidden = false;
	button.addEventListener("click", function () {
		theme = ORDER[(ORDER.indexOf(theme) + 1) % ORDER.length];
		persist(theme);
		apply(theme, button);
	});
}, false);

})();