@abreen/tada 1.11.3 → 1.13.4

package/src/slides/index.ts

@@ -0,0 +1,481 @@
+interface TraceToolbarState {
+  hidden: boolean;
+  ariaHidden: string | null;
+}
+
+type PresentationMode = 'normal' | 'fullscreen';
+
+interface SlidesPresentDetail {
+  slideIndex?: number;
+}
+
+function isInteractive(
+  view: Window & typeof globalThis,
+  target: EventTarget | null,
+): boolean {
+  if (!(target instanceof view.Node)) {
+    return false;
+  }
+
+  const element =
+    target instanceof view.Element ? target : target.parentElement;
+  return Boolean(
+    element?.closest(
+      'a, button, input, select, textarea, summary, label, [role="button"], [contenteditable=""], [contenteditable="true"], .question-a-body',
+    ),
+  );
+}
+
+function updateActiveSlide(
+  slides: HTMLElement[],
+  activeIndex: number,
+  isPresenting: boolean,
+): void {
+  for (const [index, slide] of slides.entries()) {
+    slide.classList.toggle('is-active', isPresenting && index === activeIndex);
+  }
+}
+
+function isTraceReady(widget: HTMLElement): boolean {
+  return (
+    widget.querySelector('.trace-line-active') !== null ||
+    widget.querySelector('.trace-diagram > *') !== null
+  );
+}
+
+export default function mountSlides(window: Window): void | (() => void) {
+  const { document } = window;
+  const view = document.defaultView;
+  const presentButton = document.querySelector(
+    '[data-slides-present]',
+  ) as HTMLButtonElement | null;
+  const fullscreenCheckbox = document.querySelector(
+    '[data-slides-fullscreen]',
+  ) as HTMLInputElement | null;
+  const rootScopeButton = presentButton ?? fullscreenCheckbox;
+  const scopedRoot = rootScopeButton
+    ?.closest('main')
+    ?.querySelector('[data-slides-root]');
+  const root = (scopedRoot ??
+    document.querySelector('[data-slides-root]')) as HTMLElement | null;
+
+  if (!view || !root) {
+    return;
+  }
+
+  const domView = view;
+  const domDocument = document as Document & {
+    fullscreenElement?: Element | null;
+    exitFullscreen?: () => Promise<void>;
+  };
+  const fullscreenTarget = document.documentElement as HTMLElement & {
+    requestFullscreen?: () => Promise<void>;
+  };
+  const slidesRoot = root;
+  const slides = Array.from(
+    slidesRoot.querySelectorAll('[data-slide-index]'),
+  ) as HTMLElement[];
+  if (slides.length === 0) {
+    return;
+  }
+
+  if (presentButton) {
+    presentButton.disabled = false;
+  }
+  if (fullscreenCheckbox) {
+    fullscreenCheckbox.disabled = false;
+  }
+
+  const overlay = document.createElement('div');
+  overlay.className = 'slides-toolbar';
+  overlay.hidden = true;
+  overlay.dataset.slidesOverlay = '';
+
+  const closeButton = document.createElement('button');
+  closeButton.type = 'button';
+  closeButton.textContent = 'Close';
+  closeButton.dataset.slidesClose = '';
+
+  overlay.append(closeButton);
+  document.body.appendChild(overlay);
+
+  let isPresenting = false;
+  let activeIndex = -1;
+  let presentationMode: PresentationMode | null = null;
+  let isToolbarPinnedVisible = false;
+
+  const toolbarStates = new WeakMap<HTMLElement, TraceToolbarState>();
+  const slideTabIndexes = new WeakMap<HTMLElement, string | null>();
+
+  function hidePresentationCursor(): void {
+    document.body.classList.add('is-presentation-cursor-hidden');
+  }
+
+  function showPresentationCursor(): void {
+    document.body.classList.remove('is-presentation-cursor-hidden');
+  }
+
+  function hidePresentationControls(resetPinned = true): void {
+    if (resetPinned) {
+      isToolbarPinnedVisible = false;
+    }
+    overlay.hidden = true;
+  }
+
+  function showPresentationControls(): void {
+    if (!isPresenting || presentationMode === 'fullscreen') {
+      return;
+    }
+
+    overlay.hidden = false;
+  }
+
+  function pinPresentationControlsVisible(): void {
+    if (!isPresenting || presentationMode === 'fullscreen') {
+      return;
+    }
+
+    isToolbarPinnedVisible = true;
+    overlay.hidden = false;
+  }
+
+  function getToolbarRevealBottom(): number {
+    const wasHidden = overlay.hidden;
+    if (wasHidden) {
+      overlay.hidden = false;
+    }
+
+    const bottom = closeButton.getBoundingClientRect().bottom;
+
+    if (wasHidden && !isToolbarPinnedVisible) {
+      overlay.hidden = true;
+    }
+
+    return bottom;
+  }
+
+  function setTraceToolbarVisibility(hidden: boolean): void {
+    const toolbars = slidesRoot.querySelectorAll('.trace-toolbar');
+    for (const toolbar of toolbars) {
+      const element = toolbar as HTMLElement;
+
+      if (hidden) {
+        if (!toolbarStates.has(element)) {
+          toolbarStates.set(element, {
+            hidden: element.hidden,
+            ariaHidden: element.getAttribute('aria-hidden'),
+          });
+        }
+        element.hidden = true;
+        element.setAttribute('aria-hidden', 'true');
+        continue;
+      }
+
+      const previous = toolbarStates.get(element);
+      element.hidden = previous?.hidden ?? false;
+      if (previous?.ariaHidden == null) {
+        element.removeAttribute('aria-hidden');
+      } else {
+        element.setAttribute('aria-hidden', previous.ariaHidden);
+      }
+    }
+  }
+
+  function setActiveSlide(index: number): void {
+    activeIndex = Math.max(0, Math.min(index, slides.length - 1));
+    updateActiveSlide(slides, activeIndex, isPresenting);
+  }
+
+  function focusSlide(slide: HTMLElement | undefined): void {
+    if (!slide) {
+      return;
+    }
+
+    if (!slideTabIndexes.has(slide)) {
+      slideTabIndexes.set(slide, slide.getAttribute('tabindex'));
+    }
+    slide.tabIndex = -1;
+    slide.focus();
+  }
+
+  function restoreSlideFocusability(): void {
+    for (const slide of slides) {
+      const prior = slideTabIndexes.get(slide);
+      if (prior === undefined) {
+        continue;
+      }
+      if (prior == null) {
+        slide.removeAttribute('tabindex');
+      } else {
+        slide.setAttribute('tabindex', prior);
+      }
+    }
+  }
+
+  function exitPresentation(): void {
+    if (!isPresenting) {
+      return;
+    }
+
+    const shouldExitFullscreen =
+      presentationMode === 'fullscreen' &&
+      domDocument.fullscreenElement != null &&
+      typeof domDocument.exitFullscreen === 'function';
+
+    isPresenting = false;
+    activeIndex = -1;
+    presentationMode = null;
+    hidePresentationControls();
+    showPresentationCursor();
+    document.body.classList.remove('is-presenting');
+    updateActiveSlide(slides, activeIndex, isPresenting);
+    restoreSlideFocusability();
+    setTraceToolbarVisibility(false);
+
+    if (shouldExitFullscreen) {
+      void domDocument.exitFullscreen?.();
+    }
+  }
+
+  function resetReadyTraces(): void {
+    const widgets = slidesRoot.querySelectorAll(
+      '.trace-widget:not(.trace-disabled)',
+    );
+
+    for (const widget of widgets) {
+      const widgetEl = widget as HTMLElement;
+      if (!isTraceReady(widgetEl)) {
+        continue;
+      }
+
+      const firstButton = widgetEl.querySelector(
+        '.trace-first:not([disabled])',
+      ) as HTMLButtonElement | null;
+
+      firstButton?.click();
+    }
+  }
+
+  function enterPresentation(mode: PresentationMode, slideIndex = 0): void {
+    isPresenting = true;
+    presentationMode = mode;
+    hidePresentationControls();
+    showPresentationCursor();
+    document.body.classList.add('is-presenting');
+    setTraceToolbarVisibility(true);
+    resetReadyTraces();
+    setActiveSlide(slideIndex);
+    focusSlide(slides[activeIndex]);
+  }
+
+  function driveTrace(delta: 1 | -1): boolean {
+    if (activeIndex < 0) {
+      return false;
+    }
+
+    const slide = slides[activeIndex];
+    const selector =
+      delta === 1
+        ? '.trace-next:not([disabled])'
+        : '.trace-prev:not([disabled])';
+    const widgets = slide.querySelectorAll(
+      '.trace-widget:not(.trace-disabled)',
+    );
+
+    for (const widget of widgets) {
+      const widgetEl = widget as HTMLElement;
+      if (!isTraceReady(widgetEl)) {
+        continue;
+      }
+
+      const button = widgetEl.querySelector(
+        selector,
+      ) as HTMLButtonElement | null;
+      if (!button) {
+        continue;
+      }
+
+      button.click();
+      return true;
+    }
+
+    return false;
+  }
+
+  function move(delta: 1 | -1): void {
+    if (!isPresenting) {
+      return;
+    }
+
+    hidePresentationCursor();
+
+    if (delta === -1) {
+      hidePresentationControls();
+    }
+
+    if (driveTrace(delta)) {
+      if (delta === 1) {
+        hidePresentationControls();
+      }
+      return;
+    }
+
+    if (delta === 1 && activeIndex >= slides.length - 1) {
+      pinPresentationControlsVisible();
+      return;
+    }
+
+    if (delta === 1) {
+      hidePresentationControls();
+    }
+
+    setActiveSlide(activeIndex + delta);
+    focusSlide(slides[activeIndex]);
+  }
+
+  async function handlePresentFullscreenClick(slideIndex = 0): Promise<void> {
+    enterPresentation('fullscreen', slideIndex);
+
+    if (typeof fullscreenTarget.requestFullscreen !== 'function') {
+      presentationMode = 'normal';
+      return;
+    }
+
+    try {
+      await fullscreenTarget.requestFullscreen();
+    } catch {
+      presentationMode = 'normal';
+    }
+  }
+
+  function startPresentation(slideIndex = 0): void {
+    if (fullscreenCheckbox?.checked === true) {
+      void handlePresentFullscreenClick(slideIndex);
+      return;
+    }
+
+    enterPresentation('normal', slideIndex);
+  }
+
+  function handlePresentClick(): void {
+    startPresentation(0);
+  }
+
+  function handleCloseClick(): void {
+    exitPresentation();
+  }
+
+  function handleFullscreenChange(): void {
+    if (
+      isPresenting &&
+      presentationMode === 'fullscreen' &&
+      domDocument.fullscreenElement == null
+    ) {
+      exitPresentation();
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (!isPresenting) {
+      return;
+    }
+
+    if (
+      (event.key === 'ArrowRight' ||
+        event.key === 'ArrowLeft' ||
+        event.key === ' ' ||
+        event.key === 'Spacebar') &&
+      isInteractive(domView, document.activeElement)
+    ) {
+      return;
+    }
+
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      move(1);
+    } else if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      move(-1);
+    } else if (event.key === ' ' || event.key === 'Spacebar') {
+      event.preventDefault();
+      move(1);
+    } else if (event.key === 'Escape') {
+      event.preventDefault();
+      exitPresentation();
+    }
+  }
+
+  function handleSlideClick(event: MouseEvent): void {
+    if (!isPresenting || isInteractive(domView, event.target)) {
+      return;
+    }
+
+    const activeSlide = slides[activeIndex];
+    if (!activeSlide) {
+      return;
+    }
+
+    if (
+      !(event.target instanceof domView.Node) ||
+      !activeSlide.contains(event.target)
+    ) {
+      return;
+    }
+
+    move(1);
+  }
+
+  function handleMouseMove(event: MouseEvent): void {
+    if (!isPresenting) {
+      return;
+    }
+
+    showPresentationCursor();
+
+    if (presentationMode === 'fullscreen') {
+      return;
+    }
+
+    if (isToolbarPinnedVisible) {
+      showPresentationControls();
+      return;
+    }
+
+    if (event.clientY <= getToolbarRevealBottom()) {
+      showPresentationControls();
+    } else {
+      hidePresentationControls(false);
+    }
+  }
+
+  function handleSlidesPresent(event: Event): void {
+    const detail = (event as CustomEvent<SlidesPresentDetail>).detail ?? {};
+    const slideIndex =
+      typeof detail.slideIndex === 'number' &&
+      Number.isFinite(detail.slideIndex)
+        ? detail.slideIndex
+        : 0;
+
+    startPresentation(slideIndex);
+  }
+
+  presentButton?.addEventListener('click', handlePresentClick);
+  closeButton.addEventListener('click', handleCloseClick);
+  document.addEventListener('fullscreenchange', handleFullscreenChange);
+  window.addEventListener('keydown', handleKeydown);
+  window.addEventListener('mousemove', handleMouseMove);
+  slidesRoot.addEventListener('click', handleSlideClick);
+  slidesRoot.addEventListener('tada:slides-present', handleSlidesPresent);
+
+  return () => {
+    exitPresentation();
+    presentButton?.removeEventListener('click', handlePresentClick);
+    closeButton.removeEventListener('click', handleCloseClick);
+    document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    window.removeEventListener('keydown', handleKeydown);
+    window.removeEventListener('mousemove', handleMouseMove);
+    slidesRoot.removeEventListener('click', handleSlideClick);
+    slidesRoot.removeEventListener('tada:slides-present', handleSlidesPresent);
+    overlay.remove();
+  };
+}

package/src/slides/style.scss

@@ -0,0 +1,104 @@
+@use '../mixins' as *;
+
+.slide-deck,
+.slide {
+  display: block;
+}
+
+body.is-presenting {
+  --slides-scale: clamp(150%, 3.6vmin, 250%);
+
+  overflow: hidden;
+}
+
+body.is-presenting.is-presentation-cursor-hidden,
+body.is-presenting.is-presentation-cursor-hidden * {
+  cursor: none !important;
+}
+
+body.is-presenting header,
+body.is-presenting .title-and-info,
+body.is-presenting nav.toc,
+body.is-presenting footer,
+body.is-presenting .slides-header,
+body.is-presenting .trace-toolbar {
+  display: none;
+}
+
+@media (hover: none) {
+  .slides-header {
+    display: none;
+  }
+}
+
+body.is-presenting [data-slides-close] {
+  position: fixed;
+  top: var(--gap);
+  right: var(--gap);
+  z-index: 1001;
+}
+
+@media print {
+  [data-slides-close] {
+    display: none;
+  }
+}
+
+body.is-presenting .slide-deck {
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+  background: var(--bg-color);
+}
+
+body.is-presenting .slide {
+  @include user-select(none);
+
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 1000;
+  box-sizing: border-box;
+  display: none;
+  width: min(100vw, calc(100vh * 4 / 3));
+  height: min(100vh, calc(100vw * 3 / 4));
+  padding: calc(3 * var(--gap));
+  overflow: auto;
+  font-size: var(--slides-scale);
+  letter-spacing: 0.2px;
+  outline: none;
+  background: var(--bg-color);
+  transform: translate(-50%, -50%);
+
+  > :first-child {
+    margin-top: 0;
+  }
+
+  > h2:first-child {
+    text-align: center;
+
+    a.heading-anchor {
+      color: var(--theme-color-text);
+    }
+  }
+}
+
+body.is-presenting .slide.is-active {
+  display: block;
+}
+
+body.is-presenting .slide.is-active:has(> .trace-widget) {
+  display: flex;
+  flex-direction: column;
+}
+
+body.is-presenting .slide:has(> .trace-widget) > .trace-widget {
+  flex: 1 1 auto;
+  min-height: 0;
+  font-size: 66.6%;
+}
+
+body.is-presenting .slide:has(> .trace-widget) > .trace-widget > .trace-body {
+  height: 100%;
+  min-height: 0;
+}

package/src/style.scss

@@ -235,12 +235,17 @@ ul.styled-list {
 
 ul.styled-list {
   // Make bullet points slightly bigger
-  font-size: 1.2rem;
+  font-size: 1.2em;
+}
+
+ol li .styled-list-item {
+  font-size: 1em;
+  font-weight: var(--font-weight);
+  color: var(--fg-color);
 }
 
-ol li .styled-list-item,
 ul li .styled-list-item {
-  font-size: 1rem;
+  font-size: 0.8333em;
   font-weight: var(--font-weight);
   color: var(--fg-color);
 }

package/src/timezone/index.ts

@@ -45,6 +45,11 @@ export function normalizeHM(totalMinutes: number) {
   return [h, m] as const;
 }
 
+function getDayShift(totalMinutes: number) {
+  // Negative partial days like -30 minutes should still count as the previous day.
+  return Math.floor(totalMinutes / 1440);
+}
+
 function parseHHMM(hhmm: string) {
   const [h, m] = hhmm.split(':');
   if (h == null || m == null) {
@@ -85,26 +90,16 @@ function getOffsetMinutes(tz: string, date: Date): number {
   return (utcTs - date.getTime()) / 60000;
 }
 
-// Read lazily so tests can set __SITE_TIMEZONES__ before the first call.
-// Cache the result so mutations (like computeOffsets adding offsetMinutes)
-// persist across calls. The bundler inlines __SITE_TIMEZONES__ as a JSON
-// literal, so each raw access would create a fresh array.
-let _timezones: TimeZone[] | null = null;
 function getTimezones(): TimeZone[] {
-  if (_timezones === null) {
-    _timezones =
-      typeof __SITE_TIMEZONES__ !== 'undefined' ? __SITE_TIMEZONES__ : [];
-  }
-  return _timezones;
+  return __SITE_TIMEZONES__.map(tz => ({ ...tz }));
 }
 
-function getDefaultTimezone() {
-  const value = __SITE_DEFAULT_TIMEZONE__;
-  return getTimezones().find(tz => tz.value === value)!;
+function getDefaultTimezone(timezones: TimeZone[]): TimeZone {
+  return timezones.find(tz => tz.value === __SITE_DEFAULT_TIMEZONE__)!;
 }
 
-function computeOffsets(baseDate: Date) {
-  getTimezones().forEach(tz => {
+function computeOffsets(timezones: TimeZone[], baseDate: Date) {
+  timezones.forEach(tz => {
     tz.offsetMinutes = getOffsetMinutes(tz.value, baseDate);
   });
 }
@@ -143,14 +138,15 @@ function dominantPeriodStyle(
 }
 
 export default (window: Window) => {
-  const defaultTz = getDefaultTimezone();
+  const timezones = getTimezones();
+  const defaultTz = getDefaultTimezone(timezones);
   const resetTitle = `Reset time zone to ${defaultTz.abbreviation} (default)`;
 
   // determine initial time zone (from storage or default)
   let initialTz = defaultTz.value;
   try {
     const stored = window.localStorage.getItem(STORAGE_KEY);
-    if (stored && getTimezones().some(t => t.value === stored)) {
+    if (stored && timezones.some(t => t.value === stored)) {
       initialTz = stored;
     }
   } catch {
@@ -158,7 +154,7 @@ export default (window: Window) => {
   }
 
   const now = new Date();
-  computeOffsets(now);
+  computeOffsets(timezones, now);
   const defaultOffset = defaultTz.offsetMinutes ?? 0;
 
   // Snapshot the original AM/PM style from each <time> element's text
@@ -173,7 +169,7 @@ export default (window: Window) => {
   const pagePeriodStyle = dominantPeriodStyle(periodStyles);
 
   function updateTimes(targetTz: string) {
-    const target = getTimezones().find(t => t.value === targetTz) || defaultTz;
+    const target = timezones.find(t => t.value === targetTz) || defaultTz;
     const targetOffset = target.offsetMinutes ?? 0;
     const deltaMinutes = targetOffset - defaultOffset;
 
@@ -196,7 +192,7 @@ export default (window: Window) => {
 
       // raw (can be < 0 or > 1439)
       const rawMinutes = baseMinutes + deltaMinutes;
-      const dayShift = Math.floor(rawMinutes / 1440) - (rawMinutes < 0 ? 1 : 0);
+      const dayShift = getDayShift(rawMinutes);
       // Normalize after computing dayShift
       const [h, m] = normalizeHM(rawMinutes);
 

package/src/top/index.ts

@@ -1,4 +1,5 @@
 import { debounce, removeClass } from '../util';
+import { globals } from '../globals';
 
 /** Show the "Back to top" button once the user is past this scroll position */
 const SHOW_THRESHOLD_PX = 250;
@@ -30,10 +31,7 @@ export default (window: Window) => {
     e.preventDefault();
     const cleanUrl = window.location.pathname + window.location.search;
     if (window.location.hash) {
-      // Clear the hash via fragment navigation so :target clears and
-      // hashchange fires. location.hash = '' may leave a trailing '#';
-      // strip it with replaceState.
-      window.location.hash = '';
+      globals.setLocationHash(window, '');
       window.history.replaceState(null, '', cleanUrl);
     } else {
       window.history.replaceState(null, '', cleanUrl);