@internetarchive/collection-browser 4.9.0 → 4.9.1-webdev-9670.1

package/dist/src/utils/grid-zoom.js

@@ -0,0 +1,109 @@
+/**
+ * The column counts the tile grid can snap to when pinch-zoom is enabled,
+ * from the biggest tiles to the densest thumbnail mosaic.
+ */
+export const GRID_ZOOM_COLUMNS = [1, 2, 3, 4, 6, 8, 12];
+/** The column gap (in px) used at each zoom level, indexed like `GRID_ZOOM_COLUMNS`. */
+const GRID_ZOOM_GAPS = [17, 17, 14, 12, 8, 5, 2];
+/** Levels at or beyond this many columns use the tiles' minimal layout. */
+const MINIMAL_LAYOUT_COLUMNS = 6;
+/** Levels at or beyond this many columns show only thumbnails. */
+const THUMBNAIL_ONLY_COLUMNS = 8;
+/** How far past the biggest or smallest level a gesture can stretch before snapping. */
+const MAX_OVERSHOOT = 1.15;
+export const GRID_ZOOM_STORAGE_KEY = 'ia-collection-browser-grid-zoom';
+export const MIN_ZOOM_LEVEL = 0;
+export const MAX_ZOOM_LEVEL = GRID_ZOOM_COLUMNS.length - 1;
+/** Returns the index of the zoom level whose column count is closest to `columns`. */
+export function nearestZoomLevel(columns) {
+    let best = 0;
+    let bestDistance = Infinity;
+    GRID_ZOOM_COLUMNS.forEach((levelColumns, level) => {
+        const distance = Math.abs(Math.log(levelColumns / columns));
+        if (distance < bestDistance) {
+            best = level;
+            bestDistance = distance;
+        }
+    });
+    return best;
+}
+export function clampZoomLevel(level) {
+    return Math.min(MAX_ZOOM_LEVEL, Math.max(MIN_ZOOM_LEVEL, Math.round(level)));
+}
+/**
+ * Clamps a gesture scale so the tiles can't be stretched past the biggest or
+ * smallest level (with a little give so the limit feels soft).
+ * A scale above 1 means bigger tiles, so fewer columns.
+ */
+export function clampGestureScale(startColumns, scale) {
+    const maxScale = (startColumns / GRID_ZOOM_COLUMNS[MIN_ZOOM_LEVEL]) * MAX_OVERSHOOT;
+    const minScale = startColumns / GRID_ZOOM_COLUMNS[MAX_ZOOM_LEVEL] / MAX_OVERSHOOT;
+    return Math.min(maxScale, Math.max(minScale, scale));
+}
+/** The level a gesture of the given scale should settle on. */
+export function zoomLevelForScale(startColumns, scale) {
+    return nearestZoomLevel(startColumns / scale);
+}
+/** Reads a persisted zoom level (stored as a column count), if there is a valid one. */
+export function loadStoredZoomLevel() {
+    try {
+        const stored = Number(localStorage.getItem(GRID_ZOOM_STORAGE_KEY));
+        if (!stored)
+            return undefined;
+        return nearestZoomLevel(stored);
+    }
+    catch {
+        return undefined;
+    }
+}
+export function storeZoomLevel(level) {
+    try {
+        if (level === undefined) {
+            localStorage.removeItem(GRID_ZOOM_STORAGE_KEY);
+        }
+        else {
+            localStorage.setItem(GRID_ZOOM_STORAGE_KEY, String(GRID_ZOOM_COLUMNS[level]));
+        }
+    }
+    catch {
+        // Storage can be unavailable (private windows, blocked site data).
+    }
+}
+/**
+ * The inline CSS variables that give the infinite scroller `level`'s layout.
+ * `gridWidth` is the scroller's width in px, which sets the thumbnail size
+ * at the levels that show only thumbnails.
+ */
+export function zoomLevelStyles(level, gridWidth) {
+    const columns = GRID_ZOOM_COLUMNS[level];
+    const gap = GRID_ZOOM_GAPS[level];
+    // Sized so that exactly `columns` tracks fit (the hair subtracted keeps
+    // rounding from dropping a column).
+    const minWidth = `calc((100% - ${(columns - 1) * gap}px) / ${columns} - 0.5px)`;
+    const styles = {
+        '--infiniteScrollerCellMinWidth': minWidth,
+        '--infiniteScrollerColGap': `${gap}px`,
+        '--infiniteScrollerRowGap': `${gap}px`,
+        '--infiniteScrollerCellMinHeight': '0px',
+    };
+    if (columns >= THUMBNAIL_ONLY_COLUMNS && gridWidth > 0) {
+        const tileWidth = Math.floor((gridWidth - (columns - 1) * gap) / columns);
+        styles['--imgBlockHeight'] = `${tileWidth}px`;
+        styles['--imgHeight'] = `${tileWidth}px`;
+    }
+    else {
+        styles['--infiniteScrollerCellMinHeight'] =
+            columns >= 6 ? '12rem' : '22.5rem';
+    }
+    return styles;
+}
+/** The tile layout to use at `level`: dense levels drop details, the densest show only thumbnails. */
+export function zoomLayoutType(level) {
+    const columns = GRID_ZOOM_COLUMNS[level];
+    if (columns >= THUMBNAIL_ONLY_COLUMNS)
+        return 'thumbnail-only';
+    if (columns >= MINIMAL_LAYOUT_COLUMNS)
+        return 'minimal';
+    return undefined;
+}
+//# sourceMappingURL=grid-zoom.js.map

package/dist/src/utils/grid-zoom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-zoom.js","sourceRoot":"","sources":["../../../src/utils/grid-zoom.ts"],"names":[],"mappings":"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","sourcesContent":["import type { LayoutType } from '../tiles/models';\n\n/**\n * The column counts the tile grid can snap to when pinch-zoom is enabled,\n * from the biggest tiles to the densest thumbnail mosaic.\n */\nexport const GRID_ZOOM_COLUMNS = [1, 2, 3, 4, 6, 8, 12] as const;\n\n/** The column gap (in px) used at each zoom level, indexed like `GRID_ZOOM_COLUMNS`. */\nconst GRID_ZOOM_GAPS = [17, 17, 14, 12, 8, 5, 2] as const;\n\n/** Levels at or beyond this many columns use the tiles' minimal layout. */\nconst MINIMAL_LAYOUT_COLUMNS = 6;\n\n/** Levels at or beyond this many columns show only thumbnails. */\nconst THUMBNAIL_ONLY_COLUMNS = 8;\n\n/** How far past the biggest or smallest level a gesture can stretch before snapping. */\nconst MAX_OVERSHOOT = 1.15;\n\nexport const GRID_ZOOM_STORAGE_KEY = 'ia-collection-browser-grid-zoom';\n\nexport const MIN_ZOOM_LEVEL = 0;\nexport const MAX_ZOOM_LEVEL = GRID_ZOOM_COLUMNS.length - 1;\n\n/** Returns the index of the zoom level whose column count is closest to `columns`. */\nexport function nearestZoomLevel(columns: number): number {\n  let best = 0;\n  let bestDistance = Infinity;\n  GRID_ZOOM_COLUMNS.forEach((levelColumns, level) => {\n    const distance = Math.abs(Math.log(levelColumns / columns));\n    if (distance < bestDistance) {\n      best = level;\n      bestDistance = distance;\n    }\n  });\n  return best;\n}\n\nexport function clampZoomLevel(level: number): number {\n  return Math.min(MAX_ZOOM_LEVEL, Math.max(MIN_ZOOM_LEVEL, Math.round(level)));\n}\n\n/**\n * Clamps a gesture scale so the tiles can't be stretched past the biggest or\n * smallest level (with a little give so the limit feels soft).\n * A scale above 1 means bigger tiles, so fewer columns.\n */\nexport function clampGestureScale(startColumns: number, scale: number): number {\n  const maxScale =\n    (startColumns / GRID_ZOOM_COLUMNS[MIN_ZOOM_LEVEL]) * MAX_OVERSHOOT;\n  const minScale =\n    startColumns / GRID_ZOOM_COLUMNS[MAX_ZOOM_LEVEL] / MAX_OVERSHOOT;\n  return Math.min(maxScale, Math.max(minScale, scale));\n}\n\n/** The level a gesture of the given scale should settle on. */\nexport function zoomLevelForScale(startColumns: number, scale: number): number {\n  return nearestZoomLevel(startColumns / scale);\n}\n\n/** Reads a persisted zoom level (stored as a column count), if there is a valid one. */\nexport function loadStoredZoomLevel(): number | undefined {\n  try {\n    const stored = Number(localStorage.getItem(GRID_ZOOM_STORAGE_KEY));\n    if (!stored) return undefined;\n    return nearestZoomLevel(stored);\n  } catch {\n    return undefined;\n  }\n}\n\nexport function storeZoomLevel(level: number | undefined): void {\n  try {\n    if (level === undefined) {\n      localStorage.removeItem(GRID_ZOOM_STORAGE_KEY);\n    } else {\n      localStorage.setItem(\n        GRID_ZOOM_STORAGE_KEY,\n        String(GRID_ZOOM_COLUMNS[level]),\n      );\n    }\n  } catch {\n    // Storage can be unavailable (private windows, blocked site data).\n  }\n}\n\n/**\n * The inline CSS variables that give the infinite scroller `level`'s layout.\n * `gridWidth` is the scroller's width in px, which sets the thumbnail size\n * at the levels that show only thumbnails.\n */\nexport function zoomLevelStyles(\n  level: number,\n  gridWidth: number,\n): Record<string, string> {\n  const columns = GRID_ZOOM_COLUMNS[level];\n  const gap = GRID_ZOOM_GAPS[level];\n  // Sized so that exactly `columns` tracks fit (the hair subtracted keeps\n  // rounding from dropping a column).\n  const minWidth = `calc((100% - ${(columns - 1) * gap}px) / ${columns} - 0.5px)`;\n  const styles: Record<string, string> = {\n    '--infiniteScrollerCellMinWidth': minWidth,\n    '--infiniteScrollerColGap': `${gap}px`,\n    '--infiniteScrollerRowGap': `${gap}px`,\n    '--infiniteScrollerCellMinHeight': '0px',\n  };\n  if (columns >= THUMBNAIL_ONLY_COLUMNS && gridWidth > 0) {\n    const tileWidth = Math.floor((gridWidth - (columns - 1) * gap) / columns);\n    styles['--imgBlockHeight'] = `${tileWidth}px`;\n    styles['--imgHeight'] = `${tileWidth}px`;\n  } else {\n    styles['--infiniteScrollerCellMinHeight'] =\n      columns >= 6 ? '12rem' : '22.5rem';\n  }\n  return styles;\n}\n\n/** The tile layout to use at `level`: dense levels drop details, the densest show only thumbnails. */\nexport function zoomLayoutType(level: number): LayoutType | undefined {\n  const columns = GRID_ZOOM_COLUMNS[level];\n  if (columns >= THUMBNAIL_ONLY_COLUMNS) return 'thumbnail-only';\n  if (columns >= MINIMAL_LAYOUT_COLUMNS) return 'minimal';\n  return undefined;\n}\n"]}

package/dist/src/utils/log.d.ts

@@ -1,7 +1,4 @@
 /**
  * console.log() utility -- production ignores 'log()' JS calls; dev invokes 'console.log()'
  */
-export declare const log: {
-    (...data: any[]): void;
-    (message?: any, ...optionalParams: any[]): void;
-};
+export declare const log: (...data: any[]) => void;

package/package.json

@@ -3,7 +3,11 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "4.9.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/internetarchive/iaux-collection-browser.git"
+  },
+  "version": "4.9.1-webdev-9670.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "files": [