diff options
context:
space:
mode:
Diffstat (limited to 'assets/cgit.js')
-rw-r--r--assets/cgit.js98
1 file changed, 4 insertions, 94 deletions
diff --git a/assets/cgit.js b/assets/cgit.js
index 34927d0..636ad33 100644
--- a/assets/cgit.js
+++ b/assets/cgit.js
@@ -2,11 +2,11 @@
* 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
+ * below mirror the constants there and the two have to move together. Two
* 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.
+ * and the highlight laid over the source line a URL fragment names. Each
+ * piece is wrapped in a function of its own so that nothing is left behind
+ * in the global scope.
*/
(function () {
@@ -167,93 +167,3 @@ 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);
-
-})();