hematite 0.0.1

data/assets/js/AnimationUtil.mjs

@@ -0,0 +1,72 @@
+import AsyncUtil from "./AsyncUtil.mjs";
+
+const DEFAULT_DURATION = 500;
+
+/// Get the transition style property for a given [duration].
+function getTransitionStyleStr_(duration) {
+    return [
+        `height ${duration}ms ease`,
+        `transform ${duration}ms ease`,
+        `margin ${duration}ms ease`,
+    ].join(', ');
+}
+
+/// Vertically collapse, then hide, [elem].
+/// Animation [duration] is in milliseconds and optional.
+/// Ultimately, [elem].display.
+///
+/// Clients should not rely on [elem].style for otherwise
+/// styling [elem].
+async function collapseOutVert(elem, duration) {
+    duration ??= DEFAULT_DURATION;
+
+    elem.style.height = `${elem.clientHeight}px`;
+    elem.style.transition = getTransitionStyleStr_(duration);
+    elem.style.display = getComputedStyle(elem).display;
+
+    await AsyncUtil.nextAnimationFrame();
+
+    elem.style.height = 0;
+    elem.style.margin = 0;
+    await AsyncUtil.waitMillis(duration);
+    elem.style.display = `none`;
+
+    elem.style.height = ``;
+    elem.style.transition = ``;
+    elem.style.margin = ``;
+}
+
+/// Vertically expand [elem]
+async function expandInVert(elem, duration) {
+    duration ??= DEFAULT_DURATION;
+    elem.style.display = ``;
+    elem.style.transition = getTransitionStyleStr_(duration);
+
+    // Determine the true size of the element
+    elem.style.height = ``;
+    elem.style.margin = 0;
+    elem.style.opacity = 0;
+    elem.style.position = 'absolute';
+    elem.style.visibility = 'hidden';
+
+    // Allow the browser to lay out the element.
+    await AsyncUtil.nextAnimationFrame();
+
+    let finalHeight = elem.clientHeight;
+    elem.style.height = 0;
+
+    await AsyncUtil.nextAnimationFrame();
+
+    elem.style.visibility = '';
+    elem.style.position = '';
+    elem.style.opacity = '';
+    elem.style.height = `${finalHeight}px`;
+    elem.style.margin = '';
+
+    await AsyncUtil.waitMillis(duration);
+
+    elem.style.height = ``;
+    elem.style.transition = ``;
+}
+
+export default { collapseOutVert, expandInVert };

data/assets/js/AsyncUtil.mjs

@@ -0,0 +1,18 @@
+
+const AsyncUtil = {
+    /// Resolves on the next animation frame
+    nextAnimationFrame() {
+        return new Promise(resolve => {
+            requestAnimationFrame(() => resolve());
+        });
+    },
+
+    /// Resolve in [duration] milliseconds
+    waitMillis(duration) {
+        return new Promise(resolve => {
+            setTimeout(() => resolve(), duration);
+        });
+    },
+};
+
+export default AsyncUtil;

data/assets/js/DateUtil.mjs

@@ -0,0 +1,123 @@
+---
+---
+
+const MS_PER_DAY = 24 * 60 * 60 * 1000;
+const MS_PER_WEEK = MS_PER_DAY * 7;
+
+var DateUtil = {
+    MS_PER_DAY,
+    MS_PER_WEEK,
+
+    /// Returns [true] iff [date] is today.
+    dateIsToday(date) {
+        let now = new Date();
+
+        return DateUtil.datesAreOnSameDay(now, date);
+    },
+
+    /// Returns [true] iff [a] and [b] refer to the same day.
+    datesAreOnSameDay(a, b) {
+        return a.getDate() == b.getDate()
+            && a.getFullYear() == b.getFullYear()
+            && a.getMonth() == b.getMonth();
+    },
+
+    /// Returns a copy of [date] that points to the next day.
+    nextDay(date) {
+        return new Date(date.getTime() + MS_PER_DAY);
+    },
+
+    prevDay(date) {
+        return new Date(date.getTime() - MS_PER_DAY);
+    },
+
+    /// Returns a copy of [date] that points to the next week.
+    nextWeek(date) {
+        return new Date(date.getTime() + MS_PER_WEEK);
+    },
+
+    prevWeek(date) {
+        return new Date(date.getTime() - MS_PER_WEEK);
+    },
+
+    /// Return a copy of [date] that points to the next month.
+    nextMonth(date) {
+        let res = new Date(date);
+
+        if (res.getMonth() == 11) {
+            res.setYear(res.getYear() + 1);
+            res.setMonth(0);
+        }
+        else {
+            res.setMonth(res.getMonth() + 1);
+        }
+
+        return res;
+    },
+
+    prevMonth(date) {
+        let res = new Date(date);
+
+        if (res.getMonth() == 0) {
+            res.setYear(res.getYear() - 1);
+            res.setMonth(11);
+        }
+        else {
+            res.setMonth(res.getMonth() - 1);
+        }
+
+        return res;
+    },
+
+    /// Returns a Date on the beginning of the week containing [date].
+    beginningOfWeek(date) {
+        let dayOfWeek = date.getDay();
+
+        return new Date(date.getTime() - MS_PER_DAY * dayOfWeek);
+    },
+
+    beginningOfMonth(date) {
+        let dayOfMonth = date.getDate() - 1;
+
+        return new Date(date.getTime() - MS_PER_DAY * dayOfMonth);
+    },
+
+    /// Iterator of days in the range from [start] up to [stop]
+    /// inclusive.
+    *daysInRange(start, stop) {
+        let current = start;
+
+        for (; current < stop; current = DateUtil.nextDay(current)) {
+            yield current;
+        }
+    },
+
+    /// Slightly more intelligent date parsing than new Date(string).
+    parse(text) {
+        // Remove -th, -rd, -ero suffexes
+        text = text.replaceAll(/(\d)(?:rd|th|ero)/g,
+                (fullMatch, group0) => group0);
+        console.log("Parsing", text);
+
+        return new Date(text);
+    },
+
+    /// Returns true iff the given object is a date object.
+    isDate(obj) {
+        return typeof (obj) == "object" && obj.__proto__ == (new Date()).__proto__;
+    },
+
+    /// Converts the given date to a preferences-based localized string
+    toString(date, dateOptions) {
+        dateOptions ??= {{ site.hematite.date_format | default: nil | jsonify }};
+        // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
+        // for other formatting options.
+        dateOptions ??= {
+            weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
+        };
+
+        return date.toLocaleString(undefined, dateOptions);
+    },
+};
+
+export default DateUtil;

data/assets/js/PageAlert.mjs

@@ -0,0 +1,143 @@
+/// Builds an alert message that appears at the bottom of the page.
+
+const PAGE_ALERT_DEFAULT_TIMEOUT = 5000; // ms
+const PAGE_ALERT_FAST_TIMEOUT = 250;
+const PAGE_ALERT_DIALOG_CLSS = "pageAlert";
+const PAGE_ALERT_DIALOG_HIDDEN_CLSS = "hidden";
+
+class PageAlertBuilder {
+    constructor() {
+        this.text_ = "";
+        this.timeout_ = PAGE_ALERT_DEFAULT_TIMEOUT;
+    }
+
+    /// Sets the alert's text to [text]
+    withText(text) {
+        this.text_ = text;
+
+        return this;
+    }
+
+    /// Destroys the alert after [timeout] ms instead of the
+    /// default.
+    withTimeout(timeout) {
+        this.timeout_ = timeout;
+
+        return this;
+    }
+
+    /// Keep the dialog open after its initial appearance.
+    withoutTimeout() {
+        this.timeout_ = -1;
+
+        return this;
+    }
+
+    /// Don't show the announcement to the user. Useful for accessibility-
+    ///related announcements.
+    invisible() {
+        this.invisible_ = true;
+
+        return this;
+    }
+
+    /// Build, but don't yet show the alert. Returns an object
+    /// with [show] and [destroy] methods.
+    build() {
+        let destroyTimeout = -1;
+        let dialog = document.createElement("div");
+        let messageArea = document.createElement("div");
+
+        dialog.classList.add(PAGE_ALERT_DIALOG_CLSS);
+        dialog.setAttribute('role', 'alert');
+
+        messageArea.innerText = this.text_;
+        dialog.appendChild(messageArea);
+
+        if (this.invisible_) {
+            dialog.classList.add(PAGE_ALERT_DIALOG_HIDDEN_CLSS);
+            dialog.style.opacity = 0;
+            dialog.style.pointerEvents = 'none';
+            console.log("PageAlert-invisible", this.text_);
+        }
+
+        /// Removes the dialog.
+        let destroying = false;
+        let destroy = () => {
+            if (destroying) {
+                return;
+            }
+
+            // Fade out.
+            dialog.classList.add("closing");
+            destroying = true;
+
+            requestAnimationFrame(() => {
+                let animDurationStr = getComputedStyle(dialog).getPropertyValue("animation-duration");
+                let destroyAnimationDuration;
+
+                // Get the duration in milliseconds.
+                let secMatches = /^(\d+\.?\d*)s$/.exec(animDurationStr);
+                let millisMatches = /^(\d+)ms$/.exec(animDurationStr);
+
+                if (secMatches) {
+                    destroyAnimationDuration = parseFloat(secMatches[1]) * 1000;
+                }
+                else if (millisMatches) {
+                    destroyAnimationDuration = parseInt(millisMatches[1]);
+                }
+
+                // If we weren't able to get a reasonable value
+                if (isNaN(destroyAnimationDuration)) {
+                    console.warn(
+                        `${animDurationStr} doesn't seem to be a value in milliseconds or seconds. ` +
+                        `Exit animations for alerts may be disabled`
+                    );
+                    destroyAnimationDuration = 0;
+                }
+
+                setTimeout(() => {
+                    dialog.remove();
+                    dialog = null;
+                    destroying = false;
+
+                    if (destroyTimeout !== -1) {
+                        clearTimeout(destroyTimeout);
+                        destroyTimeout = -1;
+                    }
+                }, destroyAnimationDuration);
+            });
+        };
+
+        return {
+            show: () => {
+                document.body.appendChild(dialog);
+
+                if (this.timeout_ != -1) {
+                    destroyTimeout = setTimeout(() => {
+                        destroy();
+                    }, this.timeout_);
+                }
+            },
+            destroy,
+        };
+    }
+}
+
+var PageAlert = {
+    builder() {
+        return new PageAlertBuilder();
+    }
+};
+
+/// Short method for creating an invisible alert with [text].
+function announceForAccessibility(text) {
+    return PageAlert.builder()
+                    .withText(text)
+                    .invisible()
+                    .withTimeout(PAGE_ALERT_FAST_TIMEOUT)
+                    .build().show();
+}
+
+export { PageAlert, announceForAccessibility };
+export default PageAlert;

data/assets/js/UrlHelper.mjs

@@ -0,0 +1,118 @@
+
+import { assertEq } from "./assertions.mjs";
+
+var UrlHelper = {
+    /// Get arguments in [url].
+    ///
+    /// [url] defaults to the current page's URL.
+    /// (e.g. { foo: 5, bar: 2 } from https://localhost/?foo=5,bar=2).
+    getPageArgs(url) {
+        url ??= location.href;
+
+        let argSepIndex = url.lastIndexOf('?');
+        let hashLoc = url.lastIndexOf('#');
+        if (argSepIndex == -1) {
+            return null;
+        }
+
+        // Remove the hash
+        if (hashLoc > argSepIndex) {
+            url = url.substring(0, hashLoc);
+        }
+
+        let argsSegment = url.substring(argSepIndex + 1);
+        let args = argsSegment.split(',');
+        let result = {};
+
+        for (const part of args) {
+            let assignIdx = part.indexOf('=');
+
+            if (assignIdx == -1) {
+                result[part] = true;
+            }
+            else {
+                let key = part.substring(0, assignIdx);
+                let val = part.substring(assignIdx + 1);
+                result[key] = unescape(val);
+            }
+        }
+
+        return result;
+    },
+
+    /// Gets the hash (e.g. #foobar from bob.com#foobar?t=5)
+    /// for [url] or the current page (if [url] is not given).
+    ///
+    /// Return value includes the '#' symbol.
+    getPageHash(url) {
+        url ??= location.href;
+
+        let hashLoc = url.lastIndexOf('#');
+        let argsStart = url.lastIndexOf('?');
+
+        if (hashLoc == -1) {
+            return null;
+        }
+
+        // If there's no '?' or the '?' is before the '#'...
+        if (argsStart == -1 || argsStart < hashLoc) {
+            argsStart = url.length;
+        }
+
+        return url.substring(hashLoc, argsStart);
+    },
+
+    /// Remove metadata encoded in the given URL and returns
+    /// it.
+    /// If [url] is undefined, uses the page's URL.
+    trimMetadata(url) {
+        url ??= location.href;
+
+        let hashLoc = url.lastIndexOf('#');
+        let argsStart = url.lastIndexOf('?');
+        let trimTo = Math.min(hashLoc, argsStart);
+
+        if (trimTo == -1) {
+            return url;
+        }
+
+        return url.substring(0, trimTo);
+    }
+};
+
+assertEq("getPageArgs with no args",
+    UrlHelper.getPageArgs("https://example.com/foo/bar"),
+    null
+);
+
+assertEq("getPageArgs with one arg",
+    UrlHelper.getPageArgs("https://example.com/foo?test=3").test,
+    "3"
+);
+
+assertEq("getPageArgs for page with multiple args and hash",
+    UrlHelper.getPageArgs("example.com/#testing?a=5,b=6,asdf=8").b,
+    "6"
+);
+
+assertEq("getPageHash for no hash page",
+    UrlHelper.getPageHash("https://example.com/"),
+    null
+);
+
+assertEq("getPageHash for page with no args, but a hash",
+    UrlHelper.getPageHash("https://www.example.org/foo#header"),
+    "#header"
+);
+
+assertEq("getPageHash for page with args and hash",
+    UrlHelper.getPageHash("example.com/?a=5,b=6,asdf=8#testing"),
+    "#testing"
+);
+
+assertEq("Trimming metadata",
+    UrlHelper.trimMetadata("https://example.com/?a=1#no"),
+    "https://example.com/"
+);
+
+export default UrlHelper;

data/assets/js/assertions.mjs

@@ -0,0 +1,9 @@
+
+/// Throws an error with [description] if [a] !== [b]
+function assertEq(description, a, b) {
+    if (a !== b) {
+        throw new Error(`Assertion failed (${a} != ${b}): ${description}`);
+    }
+}
+
+export { assertEq };

data/assets/js/dropdownExpander.mjs

@@ -0,0 +1,78 @@
+import UrlHelper from "./UrlHelper.mjs";
+
+/// Formats a page for printing
+/// For-printing formatting should be done in CSS, if possible.
+
+/// Expands all dropdowns on a page, returns a list of all
+/// dropdowns that were opened.
+function expandAllDropdowns() {
+    let expanded = [];
+
+    for (const dropdown of document.querySelectorAll("details:not([open])")) {
+        dropdown.setAttribute("open", true);
+        expanded.push(dropdown);
+    }
+
+    return expanded;
+}
+
+function expandOnPrint() {
+    let openedDropdowns = [];
+
+    addEventListener("beforeprint", () => {
+        openedDropdowns = expandAllDropdowns();
+    });
+
+    addEventListener("afterprint", () => {
+        for (const dropdown of openedDropdowns) {
+            dropdown.removeAttribute("open");
+        }
+    });
+}
+
+/// Expand all dropdowns containing [elem].
+/// [elem] can be either a Node or an Element.
+function expandContainingDropdowns(elem) {
+    let currentElem = elem;
+
+    // Walk up the DOM tree...
+    do {
+        // Open all containing details elements.
+        if (currentElem.tagName && currentElem.tagName.toLowerCase() == "details") {
+            currentElem.setAttribute("open", true);
+        }
+
+        currentElem = currentElem.parentElement;
+    }
+    while (currentElem);
+}
+
+function expandBasedOnURL() {
+    const doExpansion = (url) => {
+        // Determine the hash.
+        let hash = UrlHelper.getPageHash();
+        if (hash == null) {
+            return;
+        }
+
+        let targetElem = document.querySelector(hash);
+        let currentElem = targetElem;
+
+        expandContainingDropdowns(targetElem);
+
+        targetElem.focus();
+    };
+
+    doExpansion(location.href);
+    addEventListener("hashchange", ({ newURL }) => {
+        doExpansion(newURL);
+    });
+}
+
+function autoExpandDropdowns() {
+    expandOnPrint();
+    expandBasedOnURL();
+}
+
+export { autoExpandDropdowns, expandContainingDropdowns };
+export default autoExpandDropdowns;