roxanne.dev.lekh/static/js/dark.js

// darkmode.js: Javascript library for controlling page appearance, toggling between regular white and 'dark mode'
// Author: Said Achmiz
// Date: 2020-03-20
// When:  Time-stamp: "2020-03-23 09:36:20 gwern"
// license: PD

/* Experimental 'dark mode': Mac OS (Safari) lets users specify via an OS widget 'dark'/'light' to make everything appear */
/* bright-white or darker (eg for darker at evening to avoid straining eyes & disrupting circadian rhyhms); this then is */
/* exposed by Safari as a CSS variable which can be selected on. This is also currently supported by Firefox weakly as an */
/* about:config variable. Hypothetically, iOS in the future might use its camera or the clock to set 'dark mode' */
/* automatically. https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme */
/* https://webkit.org/blog/8718/new-webkit-features-in-safari-12-1/ */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

/* Because many users do not have access to a browser/OS which explicitly supports dark mode, cannot modify the browser/OS setting without undesired side-effects, wish to opt in only for specific websites, or simply forget that they turned on dark mode & dislike it, we make dark mode controllable by providing a widget at the top of the page. */

/* For gwern.net, the default white-black */
/* scheme is 'light', and it can be flipped to a 'dark' scheme fairly easily by inverting it; the main visual problem is */
/* that blockquotes appear to become much harder to see & image-focus.js doesn't work well without additional tweaks. */
/* Known bugs: images get inverted on zoom or hover; invert filters are slow, leading to 'janky' slow rendering on scrolling. */

/****************/
/* MISC HELPERS */
/****************/

/*      Given an HTML string, creates an element from that HTML, adds it to
        #ui-elements-container (creating the latter if it does not exist), and
        returns the created element.
        */
function addUIElement(element_html) {
        var ui_elements_container = document.querySelector("#ui-elements-container");
        if (!ui_elements_container) {
                ui_elements_container = document.createElement("div");
                ui_elements_container.id = "ui-elements-container";
                document.querySelector("body").appendChild(ui_elements_container);
        }

        ui_elements_container.insertAdjacentHTML("beforeend", element_html);
        return ui_elements_container.lastElementChild;
}

if (typeof window.GW == "undefined")
        window.GW = { };
GW.temp = { };

if (GW.mediaQueries == null)
    GW.mediaQueries = { };
GW.mediaQueries.mobileNarrow = matchMedia("(max-width: 520px)");
GW.mediaQueries.mobileWide = matchMedia("(max-width: 900px)");
GW.mediaQueries.mobileMax = matchMedia("(max-width: 960px)");
GW.mediaQueries.hover = matchMedia("only screen and (hover: hover) and (pointer: fine)");
GW.mediaQueries.systemDarkModeActive = matchMedia("(prefers-color-scheme: dark)");

GW.modeOptions = [
    [ 'auto', 'Auto', 'Set light or dark mode automatically, according to system-wide setting' ],
    [ 'light', 'Light', 'Light mode at all times' ],
    [ 'dark', 'Dark', 'Dark mode at all times' ]
];
GW.modeStyles = `
    :root {
        --GW-blockquote-background-color: #ddd
    }
    body::before,
    body > * {
        filter: invert(90%)
    }
    body::before {
        content: '';
        width: 100vw;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        background-color: #fff;
        z-index: -1
    }
    img,
    video {
        filter: invert(100%);
    }
    #markdownBody, #mode-selector button {
        text-shadow: 0 0 0 #000
    }
    article > :not(#TOC) a:link {
        text-shadow:
                 0      0 #777,
             .03em      0 #fff,
            -.03em      0 #fff,
                 0  .03em #fff,
                 0 -.03em #fff,
             .06em      0 #fff,
            -.06em      0 #fff,
             .09em      0 #fff,
            -.09em      0 #fff,
             .12em      0 #fff,
            -.12em      0 #fff,
             .15em      0 #fff,
            -.15em      0 #fff
    }
    article > :not(#TOC) blockquote a:link {
        text-shadow:
                 0      0 #777,
             .03em      0 var(--GW-blockquote-background-color),
            -.03em      0 var(--GW-blockquote-background-color),
                 0  .03em var(--GW-blockquote-background-color),
                 0 -.03em var(--GW-blockquote-background-color),
             .06em      0 var(--GW-blockquote-background-color),
            -.06em      0 var(--GW-blockquote-background-color),
             .09em      0 var(--GW-blockquote-background-color),
            -.09em      0 var(--GW-blockquote-background-color),
             .12em      0 var(--GW-blockquote-background-color),
            -.12em      0 var(--GW-blockquote-background-color),
             .15em      0 var(--GW-blockquote-background-color),
            -.15em      0 var(--GW-blockquote-background-color)
    }
    #logo img {
        filter: none;
    }
    #mode-selector {
        opacity: 0.6;
    }
    #mode-selector:hover {
        background-color: #fff;
    }
`;

/****************/
/* DEBUG OUTPUT */
/****************/

function GWLog (string) {
    if (GW.loggingEnabled || localStorage.getItem("logging-enabled") == "true")
        console.log(string);
}

/***********/
/* HELPERS */
/***********/

/*  Run the given function immediately if the page is already loaded, or add
    a listener to run it as soon as the page loads.
    */
function doWhenPageLoaded(f) {
    if (document.readyState == "complete")
        f();
    else
        window.addEventListener("load", f);
}

/*  Adds an event listener to a button (or other clickable element), attaching
    it to both "click" and "keyup" events (for use with keyboard navigation).
    Optionally also attaches the listener to the 'mousedown' event, making the
    element activate on mouse down instead of mouse up.
    */
Element.prototype.addActivateEvent = function(func, includeMouseDown) {
    let ael = this.activateEventListener = (event) => { if (event.button === 0 || event.key === ' ') func(event) };
    if (includeMouseDown) this.addEventListener("mousedown", ael);
    this.addEventListener("click", ael);
    this.addEventListener("keyup", ael);
}

/*  Adds a scroll event listener to the page.
    */
function addScrollListener(fn, name) {
    let wrapper = (event) => {
        requestAnimationFrame(() => {
            fn(event);
            document.addEventListener("scroll", wrapper, { once: true, passive: true });
        });
    }
    document.addEventListener("scroll", wrapper, { once: true, passive: true });

    // Retain a reference to the scroll listener, if a name is provided.
    if (typeof name != "undefined")
        GW[name] = wrapper;
}

/************************/
/* ACTIVE MEDIA QUERIES */
/************************/

/*  This function provides two slightly different versions of its functionality,
    depending on how many arguments it gets.

    If one function is given (in addition to the media query and its name), it
    is called whenever the media query changes (in either direction).

    If two functions are given (in addition to the media query and its name),
    then the first function is called whenever the media query starts matching,
    and the second function is called whenever the media query stops matching.

    If you want to call a function for a change in one direction only, pass an
    empty closure (NOT null!) as one of the function arguments.

    There is also an optional fifth argument. This should be a function to be
    called when the active media query is canceled.
    */
function doWhenMatchMedia(mediaQuery, name, ifMatchesOrAlwaysDo, otherwiseDo = null, whenCanceledDo = null) {
    if (typeof GW.mediaQueryResponders == "undefined")
        GW.mediaQueryResponders = { };

    let mediaQueryResponder = (event, canceling = false) => {
        if (canceling) {
            GWLog(`Canceling media query “${name}”`);

            if (whenCanceledDo != null)
                whenCanceledDo(mediaQuery);
        } else {
            let matches = (typeof event == "undefined") ? mediaQuery.matches : event.matches;

            GWLog(`Media query “${name}” triggered (matches: ${matches ? "YES" : "NO"})`);

            if (otherwiseDo == null || matches) ifMatchesOrAlwaysDo(mediaQuery);
            else otherwiseDo(mediaQuery);
        }
    };
    mediaQueryResponder();
    mediaQuery.addListener(mediaQueryResponder);

    GW.mediaQueryResponders[name] = mediaQueryResponder;
}

/*  Deactivates and discards an active media query, after calling the function
    that was passed as the whenCanceledDo parameter when the media query was
    added.
    */
function cancelDoWhenMatchMedia(name) {
    GW.mediaQueryResponders[name](null, true);

    for ([ key, mediaQuery ] of Object.entries(GW.mediaQueries))
        mediaQuery.removeListener(GW.mediaQueryResponders[name]);

    GW.mediaQueryResponders[name] = null;
}

/******************/
/* MODE SELECTION */
/******************/

function injectModeSelector() {
    GWLog("injectModeSelector");

    // Get saved mode setting (or default).
    let currentMode = localStorage.getItem("selected-mode") || 'auto';

    // Inject the mode selector widget and activate buttons.
    let modeSelector = addUIElement(
        "<div id='mode-selector'>" +
        String.prototype.concat.apply("", GW.modeOptions.map(modeOption => {
            let [ name, label, desc ] = modeOption;
            let selected = (name == currentMode ? ' selected' : '');
            let disabled = (name == currentMode ? ' disabled' : '');
            return `<button type='button' class='select-mode-${name}${selected}'${disabled} tabindex='-1' data-name='${name}' title='${desc}'>${label}</button>`})) +
        "</div>");

    modeSelector.querySelectorAll("button").forEach(button => {
        button.addActivateEvent(GW.modeSelectButtonClicked = (event) => {
            GWLog("GW.modeSelectButtonClicked");

            // Determine which setting was chosen (i.e., which button was clicked).
            let selectedMode = event.target.dataset.name;

            // Save the new setting.
            if (selectedMode == "auto") localStorage.removeItem("selected-mode");
            else localStorage.setItem("selected-mode", selectedMode);

            // Actually change the mode.
            setMode(selectedMode);
        });
    });

    document.querySelector("head").insertAdjacentHTML("beforeend", `<style id='mode-selector-styles'>
    #mode-selector {
        position: absolute;
        right: 3px;
        top: 4px;
        display: flex;
        background-color: #fff;
        padding: 0.125em 0.25em;
        border: 3px solid transparent;
        opacity: 0.3;
        transition:
            opacity 2s ease;
    }
    #mode-selector.hidden {
        opacity: 0;
    }
    #mode-selector:hover {
        transition: none;
        opacity: 1.0;
        border: 3px double #aaa;
    }
    #mode-selector button {
        -moz-appearance: none;
        appearance: none;
        border: none;
        background-color: transparent;
        padding: 0.5em;
        margin: 0;
        line-height: 1;
        font-family: Lucida Sans Unicode, Source Sans Pro, Helvetica, Trebuchet MS, sans-serif;
        font-size: 0.75rem;
        text-align: center;
        color: #777;
        position: relative;
    }
    #mode-selector button:hover,
    #mode-selector button.selected {
        box-shadow:
            0 2px 0 6px #fff inset,
            0 1px 0 6px currentColor inset;
    }
    #mode-selector button:not(:disabled):hover {
        color: #000;
        cursor: pointer;
    }
    #mode-selector button:not(:disabled):active {
        transform: translateY(2px);
        box-shadow:
            0 0px 0 6px #fff inset,
            0 -1px 0 6px currentColor inset;
    }
    #mode-selector button.active:not(:hover)::after {
        content: "";
        position: absolute;
        bottom: 0.25em;
        left: 0;
        right: 0;
        border-bottom: 1px dotted currentColor;
        width: calc(100% - 12px);
        margin: auto;
    }
    </style>`);

    document.querySelector("head").insertAdjacentHTML("beforeend", `<style id='mode-styles'></style>`);

    setMode(currentMode);

    // We pre-query the relevant elements, so we don’t have to run queryAll on
    // every firing of the scroll listener.
    GW.scrollState = {
        "lastScrollTop":                    window.pageYOffset || document.documentElement.scrollTop,
        "unbrokenDownScrollDistance":       0,
        "unbrokenUpScrollDistance":         0,
        "modeSelector":                     document.querySelectorAll("#mode-selector"),
    };
    addScrollListener(updateModeSelectorVisibility, "updateModeSelectorVisibilityScrollListener");
    GW.scrollState.modeSelector[0].addEventListener("mouseover", () => { showModeSelector(); });
    doWhenMatchMedia(GW.mediaQueries.systemDarkModeActive, "updateModeSelectorStateForSystemDarkMode", () => { updateModeSelectorState(); });
}

/*  Show/hide the mode selector in response to scrolling.

    Called by the ‘updateModeSelectorVisibilityScrollListener’ scroll listener.
    */
function updateModeSelectorVisibility(event) {
    GWLog("updateModeSelectorVisibility");

    let newScrollTop = window.pageYOffset || document.documentElement.scrollTop;
    GW.scrollState.unbrokenDownScrollDistance = (newScrollTop > GW.scrollState.lastScrollTop) ?
                                                        (GW.scrollState.unbrokenDownScrollDistance + newScrollTop - GW.scrollState.lastScrollTop) :
                                                        0;
    GW.scrollState.unbrokenUpScrollDistance = (newScrollTop < GW.scrollState.lastScrollTop) ?
                                                     (GW.scrollState.unbrokenUpScrollDistance + GW.scrollState.lastScrollTop - newScrollTop) :
                                                     0;
    GW.scrollState.lastScrollTop = newScrollTop;

    // Hide mode selector when scrolling a full page down.
    if (GW.scrollState.unbrokenDownScrollDistance > window.innerHeight) {
        hideModeSelector();
    }

    // On desktop, show mode selector when scrolling to top of page,
    // or a full page up.
    // On mobile, show mode selector on ANY scroll up.
    if (GW.mediaQueries.mobileNarrow.matches) {
        if (GW.scrollState.unbrokenUpScrollDistance > 0 || GW.scrollState.lastScrollTop <= 0)
            showModeSelector();
    } else if (   GW.scrollState.unbrokenUpScrollDistance > window.innerHeight
               || GW.scrollState.lastScrollTop == 0) {
        showModeSelector();
    }
}

function hideModeSelector() {
    GWLog("hideModeSelector");

    GW.scrollState.modeSelector[0].classList.add("hidden");
}

function showModeSelector() {
    GWLog("showModeSelector");

    GW.scrollState.modeSelector[0].classList.remove("hidden");
}

/*  Update the states of the mode selector buttons.
    */
function updateModeSelectorState() {
    // Get saved mode setting (or default).
    let currentMode = localStorage.getItem("selected-mode") || 'auto';

    // Clear current buttons state.
    let modeSelector = document.querySelector("#mode-selector");
    modeSelector.childNodes.forEach(button => {
        button.classList.remove("active", "selected");
        button.disabled = false;
    });

    // Set the correct button to be selected.
    modeSelector.querySelectorAll(`.select-mode-${currentMode}`).forEach(button => {
        button.classList.add("selected");
        button.disabled = true;
    });

    // Ensure the right button (light or dark) has the “currently active”
    // indicator, if the current mode is ‘auto’.
    if (currentMode == "auto") {
        if (GW.mediaQueries.systemDarkModeActive.matches)
            modeSelector.querySelector(".select-mode-dark").classList.add("active");
        else
            modeSelector.querySelector(".select-mode-light").classList.add("active");
    }
}

/*  Set specified color mode (auto, light, dark).
    */
function setMode(modeOption) {
    GWLog("setMode");

    // Inject the appropriate styles.
    let modeStyles = document.querySelector("#mode-styles");
    if (modeOption == 'auto') {
        modeStyles.innerHTML = `@media (prefers-color-scheme:dark) {${GW.modeStyles}}`;
    } else if (modeOption == 'dark') {
        modeStyles.innerHTML = GW.modeStyles;
    } else {
        modeStyles.innerHTML = "";
    }

    // Update selector state.
    updateModeSelectorState();
}

/******************/
/* INITIALIZATION */
/******************/

doWhenPageLoaded(() => {
    injectModeSelector();
});