@internetarchive/bookreader 5.0.0-115 → 5.0.0-117

package/src/util/dom.js

@@ -0,0 +1,88 @@
+// @ts-check
+import { clamp } from '../BookReader/utils.js';
+
+/**
+ * Walks up the DOM tree starting at (but not including) the given element,
+ * returning the nearest ancestor that can actually scroll its overflow.
+ * @param {Element} el
+ * @return {Element | null}
+ */
+export function findScrollableAncestor(el) {
+  let current = el.parentElement;
+  while (current) {
+    const style = getComputedStyle(current);
+    const canScrollY = (style.overflowY === 'auto' || style.overflowY === 'scroll') && current.scrollHeight > current.clientHeight;
+    const canScrollX = (style.overflowX === 'auto' || style.overflowX === 'scroll') && current.scrollWidth > current.clientWidth;
+    if (canScrollY || canScrollX) return current;
+    current = current.parentElement;
+  }
+  return null;
+}
+
+/**
+ * Computes the scroll offset for a single axis needed to align an element
+ * within a container, per the same semantics as scrollIntoView's block/inline.
+ * @param {number} elStart
+ * @param {number} elEnd
+ * @param {number} containerStart
+ * @param {number} containerEnd
+ * @param {number} currentScroll
+ * @param {'start' | 'center' | 'end' | 'nearest'} align
+ * @return {number}
+ */
+function computeAxisScroll(elStart, elEnd, containerStart, containerEnd, currentScroll, align) {
+  let delta = 0;
+  switch (align) {
+  case 'start':
+    delta = elStart - containerStart;
+    break;
+  case 'end':
+    delta = elEnd - containerEnd;
+    break;
+  case 'center':
+    delta = (elStart + elEnd) / 2 - (containerStart + containerEnd) / 2;
+    break;
+  case 'nearest':
+  default:
+    if (elStart < containerStart) delta = elStart - containerStart;
+    else if (elEnd > containerEnd) delta = elEnd - containerEnd;
+    break;
+  }
+  return currentScroll + delta;
+}
+
+/**
+ * Scrolls the given element into view within a single scroll container.
+ *
+ * Unlike the native `Element.scrollIntoView`, this never walks up and scrolls
+ * every scrollable ancestor in turn (which can otherwise unexpectedly move
+ * the whole page) — it only ever adjusts the scroll position of one
+ * container: either the one explicitly passed in, or the nearest scrollable
+ * ancestor found via {@link findScrollableAncestor}.
+ * @param {Element} el
+ * @param {object} [options]
+ * @param {'auto' | 'smooth'} [options.behavior]
+ * @param {'start' | 'center' | 'end' | 'nearest'} [options.block]
+ * @param {'start' | 'center' | 'end' | 'nearest'} [options.inline]
+ * @param {Element} [options.scrollContainer] The scrollable element whose
+ *   scroll position should be adjusted. Defaults to `findScrollableAncestor(el)`.
+ */
+export function singleScrollIntoView(el, options) {
+  const { block = 'start', inline = 'nearest', behavior = 'auto', scrollContainer = findScrollableAncestor(el) } = options || {};
+  if (!scrollContainer) {
+    el.scrollIntoView({ block, inline, behavior });
+    return;
+  }
+
+  const containerRect = scrollContainer.getBoundingClientRect();
+  const elRect = el.getBoundingClientRect();
+
+  const top = computeAxisScroll(elRect.top, elRect.bottom, containerRect.top, containerRect.bottom, scrollContainer.scrollTop, block);
+  const left = computeAxisScroll(elRect.left, elRect.right, containerRect.left, containerRect.right, scrollContainer.scrollLeft, inline);
+
+  scrollContainer.scrollTo({
+    top: clamp(top, 0, scrollContainer.scrollHeight - scrollContainer.clientHeight),
+    left: clamp(left, 0, scrollContainer.scrollWidth - scrollContainer.clientWidth),
+    behavior,
+  });
+}

package/src/util/generators.js

@@ -0,0 +1,89 @@
+// @ts-check
+
+/**
+ * @template T
+ * Get the i-th element of an iterable
+ * @param {Iterable<T>} iterable
+ * @param {number} index
+ */
+export function genAt(iterable, index) {
+  let i = 0;
+  for (const x of iterable) {
+    if (i == index) return x;
+    i++;
+  }
+  return undefined;
+}
+
+/**
+ * @template T
+ * Generator version of filter
+ * @param {Iterable<T>} iterable
+ * @param {function(T): boolean} fn
+ */
+export function* genFilter(iterable, fn) {
+  for (const x of iterable) {
+    if (fn(x)) yield x;
+  }
+}
+
+/**
+ * @template TFrom, TTo
+ * Generator version of map
+ * @param {Iterable<TFrom>} gen
+ * @param {function(TFrom): TTo} fn
+ * @returns {Iterable<TTo>}
+ */
+export function* genMap(gen, fn) {
+  for (const x of gen) yield fn(x);
+}
+
+/**
+ * @template T
+ * Generator that provides a sliding window of 3 elements,
+ * prev, current, and next.
+ * @param {Iterable<T>} gen
+ * @returns {Iterable<[T | undefined, T, T | undefined]>}
+ */
+export function* lookAroundWindow(gen) {
+  let prev = undefined;
+  let cur = undefined;
+  let next = undefined;
+  for (const x of gen) {
+    if (typeof cur !== 'undefined') {
+      next = x;
+      yield [prev, cur, next];
+    }
+    prev = cur;
+    cur = x;
+    next = undefined;
+  }
+
+  if (typeof cur !== 'undefined') {
+    yield [prev, cur, next];
+  }
+}
+
+/**
+ * @template T1, T2
+ * Lazy zip implementation to avoid importing lodash
+ * Expects iterators to be of the same length
+ * @param {Iterable<T1>} gen1
+ * @param {Iterable<T2>} gen2
+ * @returns {Iterable<[T1, T2]>}
+ */
+export function* zip(gen1, gen2) {
+  const it1 = gen1[Symbol.iterator]();
+  const it2 = gen2[Symbol.iterator]();
+  while (true) {
+    const r1 = it1.next();
+    const r2 = it2.next();
+    if (r1.done && r2.done) {
+      return;
+    }
+    if (r1.done || r2.done) {
+      throw new Error('zip: one of the iterators is done');
+    }
+    yield [r1.value, r2.value];
+  }
+}