Merge remote-tracking branch 'upstream/dev' into theme_switcher

2025-04-29 18:55:30 +01:00
parent 62e9c32082
commit a68805b55d
116 changed files with 8020 additions and 3095 deletions
@@ -0,0 +1,33 @@
+export const easeOutQuint = 'cubic-bezier(0.22, 1, 0.36, 1)';
+
+export function directions(anim, opt, ...dirs) {
+    return dirs.map(dir => anim({ direction: dir, ...opt }));
+}
+
+export function slideFade({
+    direction = 'left',
+    fill = 'backwards',
+    duration = 200,
+    distance = '1rem',
+    easing = 'ease',
+    offset = 0,
+}) {
+    const axis = direction === 'left' || direction === 'right' ? 'X' : 'Y';
+    const negative = direction === 'left' || direction === 'up' ? '-' : '';
+    const amount = negative + distance;
+
+    return {
+        keyframes: [
+            {
+                offset: offset,
+                opacity: 0,
+                transform: `translate${axis}(${amount})`,
+            }
+        ],
+        options: {
+            duration: duration,
+            easing: easing,
+            fill: fill,
+        },
+    };
+}
@@ -0,0 +1,212 @@
+import { directions, easeOutQuint, slideFade } from "./animations.js";
+import { elem, repeat, text } from "./templating.js";
+
+const FULL_MONTH_SLOTS = 7*6;
+const WEEKDAY_ABBRS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+const MONTH_NAMES = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+const leftArrowSvg = `<svg stroke="var(--color-text-base)" fill="none" viewBox="0 0 24 24" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
+</svg>`;
+
+const rightArrowSvg = `<svg stroke="var(--color-text-base)" fill="none" viewBox="0 0 24 24" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+</svg>`;
+
+const undoArrowSvg = `<svg stroke="var(--color-text-base)" fill="none" viewBox="0 0 24 24" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
+</svg>`;
+
+const [datesExitLeft, datesExitRight] = directions(
+    slideFade, { distance: "2rem", duration: 120, offset: 1 },
+    "left", "right"
+);
+
+const [datesEntranceLeft, datesEntranceRight] = directions(
+    slideFade, { distance: "0.8rem", duration: 500, easing: easeOutQuint },
+    "left", "right"
+);
+
+const undoEntrance = slideFade({ direction: "left", distance: "100%", duration: 300 });
+
+export default function(element) {
+    element.swap(Calendar(
+        Number(element.dataset.firstDayOfWeek ?? 1)
+    ));
+}
+
+// TODO: when viewing the previous/next month, display the current date if it's within the spill-over days
+function Calendar(firstDay) {
+    let header, dates;
+    let advanceTimeTicker;
+    let now = new Date();
+    let activeDate;
+
+    const update = (newDate) => {
+        header.component.update(now, newDate);
+        dates.component.update(now, newDate);
+        activeDate = newDate;
+    };
+
+    const autoAdvanceNow = () => {
+        advanceTimeTicker = setTimeout(() => {
+            // TODO: don't auto advance if looking at a different month
+            update(now = new Date());
+            autoAdvanceNow();
+        }, msTillNextDay());
+    };
+
+    const adjacentMonth = (dir) => new Date(activeDate.getFullYear(), activeDate.getMonth() + dir, 1);
+    const nextClicked = () => update(adjacentMonth(1));
+    const prevClicked = () => update(adjacentMonth(-1));
+    const undoClicked = () => update(now);
+
+    const calendar = elem().classes("calendar").append(
+        header = Header(nextClicked, prevClicked, undoClicked),
+        dates = Dates(firstDay)
+    );
+
+    update(now);
+    autoAdvanceNow();
+
+    return calendar.component({
+        suspend: () => clearTimeout(advanceTimeTicker)
+    });
+}
+
+function Header(nextClicked, prevClicked, undoClicked) {
+    let month, monthNumber, year, undo;
+    const button = () => elem("button").classes("calendar-header-button");
+
+    const monthAndYear = elem().classes("size-h2", "color-highlight").append(
+        month = text(),
+        " ",
+        year = elem("span").classes("size-h3"),
+        undo = button()
+            .hide()
+            .classes("calendar-undo-button")
+            .attr("title", "Back to current month")
+            .on("click", undoClicked)
+            .html(undoArrowSvg)
+    );
+
+    const monthSwitcher = elem()
+        .classes("flex", "gap-7", "items-center")
+        .append(
+            button()
+                .attr("title", "Previous month")
+                .on("click", prevClicked)
+                .html(leftArrowSvg),
+            monthNumber = elem()
+                .classes("color-highlight")
+                .styles({ marginTop: "0.1rem" }),
+            button()
+                .attr("title", "Next month")
+                .on("click", nextClicked)
+                .html(rightArrowSvg),
+        );
+
+    return elem().classes("flex", "justify-between", "items-center").append(
+        monthAndYear,
+        monthSwitcher
+    ).component({
+        update: function (now, newDate) {
+            month.text(MONTH_NAMES[newDate.getMonth()]);
+            year.text(newDate.getFullYear());
+            const m = newDate.getMonth() + 1;
+            monthNumber.text((m < 10 ? "0" : "") + m);
+
+            if (!datesWithinSameMonth(now, newDate)) {
+                if (undo.isHidden()) undo.show().animate(undoEntrance);
+            } else {
+                undo.hide();
+            }
+
+            return this;
+        }
+    });
+}
+
+function Dates(firstDay) {
+    let dates, lastRenderedDate;
+
+    const updateFullMonth = function(now, newDate) {
+        const firstWeekday = new Date(newDate.getFullYear(), newDate.getMonth(), 1).getDay();
+        const previousMonthSpilloverDays = (firstWeekday - firstDay + 7) % 7 || 7;
+        const currentMonthDays = daysInMonth(newDate.getFullYear(), newDate.getMonth());
+        const nextMonthSpilloverDays = FULL_MONTH_SLOTS - (previousMonthSpilloverDays + currentMonthDays);
+        const previousMonthDays = daysInMonth(newDate.getFullYear(), newDate.getMonth() - 1)
+        const isCurrentMonth = datesWithinSameMonth(now, newDate);
+        const currentDate = now.getDate();
+
+        let children = dates.children;
+        let index = 0;
+
+        for (let i = 0; i < FULL_MONTH_SLOTS; i++) {
+            children[i].clearClasses("calendar-spillover-date", "calendar-current-date");
+        }
+
+        for (let i = 0; i < previousMonthSpilloverDays; i++, index++) {
+            children[index].classes("calendar-spillover-date").text(
+                previousMonthDays - previousMonthSpilloverDays + i + 1
+            )
+        }
+
+        for (let i = 1; i <= currentMonthDays; i++, index++) {
+            children[index]
+                .classesIf(isCurrentMonth && i === currentDate, "calendar-current-date")
+                .text(i);
+        }
+
+        for (let i = 0; i < nextMonthSpilloverDays; i++, index++) {
+            children[index].classes("calendar-spillover-date").text(i + 1);
+        }
+
+        lastRenderedDate = newDate;
+    };
+
+    const update = function(now, newDate) {
+        if (lastRenderedDate === undefined || datesWithinSameMonth(newDate, lastRenderedDate)) {
+            updateFullMonth(now, newDate);
+            return;
+        }
+
+        const next = newDate > lastRenderedDate;
+        dates.animateUpdate(
+            () => updateFullMonth(now, newDate),
+            next ? datesExitLeft : datesExitRight,
+            next ? datesEntranceRight : datesEntranceLeft,
+        );
+    }
+
+    return elem().append(
+        elem().classes("calendar-dates", "margin-top-15").append(
+            ...repeat(7, (i) => elem().classes("size-h6", "color-subdue").text(
+                WEEKDAY_ABBRS[(firstDay + i) % 7]
+            ))
+        ),
+
+        dates = elem().classes("calendar-dates", "margin-top-3").append(
+            ...elem().classes("calendar-date").duplicate(FULL_MONTH_SLOTS)
+        )
+    ).component({ update });
+}
+
+function datesWithinSameMonth(d1, d2) {
+    return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth();
+}
+
+function daysInMonth(year, month) {
+    return new Date(year, month + 1, 0).getDate();
+}
+
+function msTillNextDay(now) {
+    now = now || new Date();
+
+    return 86_400_000 - (
+      now.getMilliseconds() +
+      now.getSeconds() * 1000 +
+      now.getMinutes() * 60_000 +
+      now.getHours() * 3_600_000
+    );
+}
@@ -128,6 +128,7 @@ function setupSearchBoxes() {
    for (let i = 0; i < searchWidgets.length; i++) {
        const widget = searchWidgets[i];
        const defaultSearchUrl = widget.dataset.defaultSearchUrl;
+        const target = widget.dataset.target || "_blank";
        const newTab = widget.dataset.newTab === "true";
        const inputElement = widget.getElementsByClassName("search-input")[0];
        const bangElement = widget.getElementsByClassName("search-bang")[0];
@@ -167,7 +168,7 @@ function setupSearchBoxes() {
                const url = searchUrlTemplate.replace("!QUERY!", encodeURIComponent(query));

                if (newTab && !event.ctrlKey || !newTab && event.ctrlKey) {
-                    window.open(url, '_blank').focus();
+                    window.open(url, target).focus();
                } else {
                    window.location.href = url;
                }
@@ -308,7 +309,9 @@ function setupGroups() {

                for (let i = 0; i < titles.length; i++) {
                    titles[i].classList.remove("widget-group-title-current");
+                    titles[i].setAttribute("aria-selected", "false");
                    tabs[i].classList.remove("widget-group-content-current");
+                    tabs[i].setAttribute("aria-hidden", "true");
                }

                if (current < t) {
@@ -320,7 +323,9 @@ function setupGroups() {
                current = t;

                title.classList.add("widget-group-title-current");
+                title.setAttribute("aria-selected", "true");
                tabs[t].classList.add("widget-group-content-current");
+                tabs[t].setAttribute("aria-hidden", "false");
            });
        }
    }
@@ -463,7 +468,7 @@ function setupCollapsibleGrids() {

        let cardsPerRow;

-        const resolveCollapsibleItems = () => {
+        const resolveCollapsibleItems = () => requestAnimationFrame(() => {
            const hideItemsAfterIndex = cardsPerRow * collapseAfterRows;

            if (hideItemsAfterIndex >= gridElement.children.length) {
@@ -489,7 +494,7 @@ function setupCollapsibleGrids() {
                    child.style.removeProperty("animation-delay");
                }
            }
-        };
+        });

        const observer = new ResizeObserver(() => {
            if (!isElementVisible(gridElement)) {
@@ -649,6 +654,17 @@ function setupClocks() {
    updateClocks();
 }

+async function setupCalendars() {
+    const elems = document.getElementsByClassName("calendar");
+    if (elems.length == 0) return;
+
+    // TODO: implement prefetching, currently loads as a nasty waterfall of requests
+    const calendar = await import ('./calendar.js');
+
+    for (let i = 0; i < elems.length; i++)
+        calendar.default(elems[i]);
+}
+
 function setupTruncatedElementTitles() {
    const elements = document.querySelectorAll(".text-truncate, .single-line-titles .title, .text-truncate-2-lines, .text-truncate-3-lines");

@@ -658,7 +674,7 @@ function setupTruncatedElementTitles() {

    for (let i = 0; i < elements.length; i++) {
        const element = elements[i];
-        if (element.title === "") element.title = element.textContent;
+        if (element.getAttribute("title") === null) element.title = element.textContent;
    }
 }

@@ -768,6 +784,7 @@ async function setupPage() {
        setupThemeSwitcher();
        setupPopovers();
        setupClocks()
+        await setupCalendars();
        setupCarousels();
        setupSearchBoxes();
        setupCollapsibleLists();
@@ -778,6 +795,7 @@ async function setupPage() {
        setupLazyImages();
    } finally {
        pageElement.classList.add("content-ready");
+        pageElement.setAttribute("aria-busy", "false");

        for (let i = 0; i < contentReadyCallbacks.length; i++) {
            contentReadyCallbacks[i]();
@@ -25,7 +25,8 @@ frameElement.append(contentElement);
 containerElement.append(frameElement);
 document.body.append(containerElement);

-const observer = new ResizeObserver(repositionContainer);
+const queueRepositionContainer = () => requestAnimationFrame(repositionContainer);
+const observer = new ResizeObserver(queueRepositionContainer);

 function handleMouseEnter(event) {
    clearTogglePopoverTimeout();
@@ -97,14 +98,15 @@ function showPopover() {
    }

    contentElement.style.maxWidth = contentMaxWidth;
-    containerElement.style.display = "block";
    activeTarget.classList.add("popover-active");
    document.addEventListener("keydown", handleHidePopoverOnEscape);
-    window.addEventListener("resize", repositionContainer);
+    window.addEventListener("resize", queueRepositionContainer);
    observer.observe(containerElement);
 }

 function repositionContainer() {
+    containerElement.style.display = "block";
+
    const targetBounds = activeTarget.dataset.popoverAnchor !== undefined
        ? activeTarget.querySelector(activeTarget.dataset.popoverAnchor).getBoundingClientRect()
        : activeTarget.getBoundingClientRect();
@@ -156,7 +158,7 @@ function hidePopover() {
    activeTarget.classList.remove("popover-active");
    containerElement.style.display = "none";
    document.removeEventListener("keydown", handleHidePopoverOnEscape);
-    window.removeEventListener("resize", repositionContainer);
+    window.removeEventListener("resize", queueRepositionContainer);
    observer.unobserve(containerElement);

    if (cleanupOnHidePopover !== null) {
@@ -0,0 +1,190 @@
+export function elem(tag = "div") {
+    return document.createElement(tag);
+}
+
+export function fragment(...children) {
+    const f = document.createDocumentFragment();
+    if (children) f.append(...children);
+    return f;
+}
+
+export function text(str = "") {
+    return document.createTextNode(str);
+}
+
+export function repeat(n, fn) {
+    const elems = Array(n);
+
+    for (let i = 0; i < n; i++)
+        elems[i] = fn(i);
+
+    return elems;
+}
+
+export function find(selector) {
+    return document.querySelector(selector);
+}
+
+export function findAll(selector) {
+    return document.querySelectorAll(selector);
+}
+
+const ep = HTMLElement.prototype;
+const fp = DocumentFragment.prototype;
+const tp = Text.prototype;
+
+ep.classes = function(...classes) {
+    this.classList.add(...classes);
+    return this;
+}
+
+ep.find = function(selector) {
+    return this.querySelector(selector);
+}
+
+ep.findAll = function(selector) {
+    return this.querySelectorAll(selector);
+}
+
+ep.classesIf = function(cond, ...classes) {
+    cond ? this.classList.add(...classes) : this.classList.remove(...classes);
+    return this;
+}
+
+ep.hide = function() {
+    this.style.display = "none";
+    return this;
+}
+
+ep.show = function() {
+    this.style.removeProperty("display");
+    return this;
+}
+
+ep.showIf = function(cond) {
+    cond ? this.show() : this.hide();
+    return this;
+}
+
+ep.isHidden = function() {
+    return this.style.display === "none";
+}
+
+ep.clearClasses = function(...classes) {
+    classes.length ? this.classList.remove(...classes) : this.className = "";
+    return this;
+}
+
+ep.hasClass = function(className) {
+    return this.classList.contains(className);
+}
+
+ep.attr = function(name, value) {
+    this.setAttribute(name, value);
+    return this;
+}
+
+ep.attrs = function(attrs) {
+    for (const [name, value] of Object.entries(attrs))
+        this.setAttribute(name, value);
+    return this;
+}
+
+ep.tap = function(fn) {
+    fn(this);
+    return this;
+}
+
+ep.text = function(text) {
+    this.innerText = text;
+    return this;
+}
+
+ep.html = function(html) {
+    this.innerHTML = html;
+    return this;
+}
+
+ep.appendTo = function(parent) {
+    parent.appendChild(this);
+    return this;
+}
+
+ep.swap = function(element) {
+    this.replaceWith(element);
+    return element;
+}
+
+ep.on = function(event, callback, options) {
+    if (typeof event === "string") {
+        this.addEventListener(event, callback, options);
+        return this;
+    }
+
+    for (let i = 0; i < event.length; i++)
+        this.addEventListener(event[i], callback, options);
+
+    return this;
+}
+
+const epAppend = ep.append;
+ep.append = function(...children) {
+    epAppend.apply(this, children);
+    return this;
+}
+
+ep.duplicate = function(n) {
+    const elems = Array(n);
+
+    for (let i = 0; i < n; i++)
+        elems[i] = this.cloneNode(true);
+
+    return elems;
+}
+
+ep.styles = function(s) {
+    Object.assign(this.style, s);
+    return this;
+}
+
+const epAnimate = ep.animate;
+ep.animate = function(anim, callback) {
+    const a = epAnimate.call(this, anim.keyframes, anim.options);
+    if (callback) a.onfinish = () => callback(this, a);
+    return this;
+}
+
+ep.animateUpdate = function(update, exit, entrance) {
+    this.animate(exit, () => {
+        update(this);
+        this.animate(entrance);
+    });
+
+    return this;
+}
+
+ep.styleVar = function(name, value) {
+    this.style.setProperty(`--${name}`, value);
+    return this;
+}
+
+ep.component = function (methods) {
+    this.component = methods;
+    return this;
+}
+
+const fpAppend = fp.append;
+fp.append = function(...children) {
+    fpAppend.apply(this, children);
+    return this;
+}
+
+fp.appendTo = function(parent) {
+    parent.appendChild(this);
+    return this;
+}
+
+tp.text = function(text) {
+    this.nodeValue = text;
+    return this;
+}