@internetarchive/collection-browser 1.5.0 → 1.5.1

package/src/tiles/tile-dispatcher.ts

@@ -1,4 +1,4 @@
-import { css, html, LitElement, nothing, PropertyValues } from 'lit';
+import { css, html, nothing, PropertyValues } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import type {
@@ -6,8 +6,7 @@ import type {
   SharedResizeObserverResizeHandlerInterface,
 } from '@internetarchive/shared-resize-observer';
 import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
-import type { SortParam } from '@internetarchive/search-service';
-import type { TileDisplayMode, TileModel } from '../models';
+import type { TileDisplayMode } from '../models';
 import './grid/collection-tile';
 import './grid/item-tile';
 import './grid/account-tile';
@@ -16,6 +15,7 @@ import './list/tile-list';
 import './list/tile-list-compact';
 import './list/tile-list-compact-header';
 import type { TileHoverPane } from './hover/tile-hover-pane';
+import { BaseTileComponent } from './base-tile-component';
 import {
   HoverPaneController,
   HoverPaneControllerInterface,
@@ -25,39 +25,35 @@ import {
 
 @customElement('tile-dispatcher')
 export class TileDispatcher
-  extends LitElement
+  extends BaseTileComponent
   implements
     SharedResizeObserverResizeHandlerInterface,
     HoverPaneProviderInterface
 {
-  @property({ type: String }) tileDisplayMode?: TileDisplayMode;
-
-  @property({ type: Object }) model?: TileModel;
-
-  @property({ type: String }) baseNavigationUrl?: string;
-
-  @property({ type: Number }) currentWidth?: number;
+  /*
+   * Reactive properties inherited from BaseTileComponent:
+   *  - model?: TileModel;
+   *  - currentWidth?: number;
+   *  - currentHeight?: number;
+   *  - baseNavigationUrl?: string;
+   *  - baseImageUrl?: string;
+   *  - collectionPagePath?: string;
+   *  - sortParam: SortParam | null = null;
+   *  - creatorFilter?: string;
+   *  - mobileBreakpoint?: number;
+   *  - loggedIn = false;
+   */
 
-  @property({ type: Number }) currentHeight?: number;
+  @property({ type: String }) tileDisplayMode?: TileDisplayMode;
 
   @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;
 
   @property({ type: Object })
   collectionNameCache?: CollectionNameCacheInterface;
 
-  @property({ type: Object }) sortParam: SortParam | null = null;
-
-  @property({ type: Number }) mobileBreakpoint?: number;
-
-  @property({ type: String }) baseImageUrl?: string;
-
-  @property({ type: Boolean }) loggedIn = false;
-
   /** Whether this tile should include a hover pane at all (for applicable tile modes) */
   @property({ type: Boolean }) enableHoverPane = false;
 
-  @property({ type: String }) collectionPagePath: string = '/details/';
-
   private hoverPaneController?: HoverPaneControllerInterface;
 
   @query('#container')
@@ -149,9 +145,10 @@ export class TileDispatcher
       return `${this.baseNavigationUrl}${this.model.href}`;
     }
 
-    const isCollection = this.model.mediatype === 'collection';
-    const basePath = isCollection ? this.collectionPagePath : '/details/';
-    return `${this.baseNavigationUrl}${basePath}${this.model.identifier}`;
+    return this.displayValueProvider.itemPageUrl(
+      this.model.identifier,
+      this.model.mediatype === 'collection'
+    );
   }
 
   /**
@@ -226,10 +223,12 @@ export class TileDispatcher
   private get tile() {
     const {
       model,
+      collectionPagePath,
       baseNavigationUrl,
       currentWidth,
       currentHeight,
       sortParam,
+      creatorFilter,
       mobileBreakpoint,
     } = this;
 
@@ -241,9 +240,11 @@ export class TileDispatcher
           case 'collection':
             return html`<collection-tile
               .model=${model}
+              .collectionPagePath=${collectionPagePath}
               .baseImageUrl=${this.baseImageUrl}
               .currentWidth=${currentWidth}
               .currentHeight=${currentHeight}
+              .creatorFilter=${creatorFilter}
               ?showInfoButton=${!this.isHoverEnabled}
               @infoButtonPressed=${this.tileInfoButtonPressed}
             >
@@ -251,9 +252,11 @@ export class TileDispatcher
           case 'account':
             return html`<account-tile
               .model=${model}
+              .collectionPagePath=${collectionPagePath}
               .baseImageUrl=${this.baseImageUrl}
               .currentWidth=${currentWidth}
               .currentHeight=${currentHeight}
+              .creatorFilter=${creatorFilter}
               ?showInfoButton=${!this.isHoverEnabled}
               @infoButtonPressed=${this.tileInfoButtonPressed}
             >
@@ -261,11 +264,13 @@ export class TileDispatcher
           default:
             return html`<item-tile
               .model=${model}
+              .collectionPagePath=${collectionPagePath}
               .currentWidth=${this.currentWidth}
               .currentHeight=${this.currentHeight}
               .collectionNameCache=${this.collectionNameCache}
               .baseImageUrl=${this.baseImageUrl}
               .sortParam=${sortParam}
+              .creatorFilter=${creatorFilter}
               .loggedIn=${this.loggedIn}
               ?showInfoButton=${!this.isHoverEnabled}
               @infoButtonPressed=${this.tileInfoButtonPressed}
@@ -275,11 +280,12 @@ export class TileDispatcher
       case 'list-compact':
         return html`<tile-list-compact
           .model=${model}
-          .collectionPagePath=${this.collectionPagePath}
+          .collectionPagePath=${collectionPagePath}
           .currentWidth=${currentWidth}
           .currentHeight=${currentHeight}
           .baseNavigationUrl=${baseNavigationUrl}
           .sortParam=${sortParam}
+          .creatorFilter=${creatorFilter}
           .mobileBreakpoint=${mobileBreakpoint}
           .baseImageUrl=${this.baseImageUrl}
           .loggedIn=${this.loggedIn}
@@ -288,12 +294,13 @@ export class TileDispatcher
       case 'list-detail':
         return html`<tile-list
           .model=${model}
-          .collectionPagePath=${this.collectionPagePath}
+          .collectionPagePath=${collectionPagePath}
           .collectionNameCache=${this.collectionNameCache}
           .currentWidth=${currentWidth}
           .currentHeight=${currentHeight}
           .baseNavigationUrl=${baseNavigationUrl}
           .sortParam=${sortParam}
+          .creatorFilter=${creatorFilter}
           .mobileBreakpoint=${mobileBreakpoint}
           .baseImageUrl=${this.baseImageUrl}
           .loggedIn=${this.loggedIn}

package/src/tiles/tile-display-value-provider.ts

@@ -0,0 +1,106 @@
+import { nothing } from 'lit';
+import { msg, str } from '@lit/localize';
+import type { SortParam } from '@internetarchive/search-service';
+import type { TileModel } from '../models';
+
+/**
+ * A class encapsulating shared logic for converting model values into display values
+ * across different types of tiles.
+ */
+export class TileDisplayValueProvider {
+  private model?: TileModel;
+
+  private baseNavigationUrl?: string;
+
+  private collectionPagePath?: string;
+
+  private sortParam?: SortParam;
+
+  private creatorFilter?: string;
+
+  constructor(
+    options: {
+      model?: TileModel;
+      baseNavigationUrl?: string;
+      collectionPagePath?: string;
+      sortParam?: SortParam;
+      creatorFilter?: string;
+    } = {}
+  ) {
+    this.model = options.model;
+    this.baseNavigationUrl = options.baseNavigationUrl;
+    this.collectionPagePath = options.collectionPagePath ?? '/details/';
+    this.sortParam = options.sortParam;
+    this.creatorFilter = options.creatorFilter;
+  }
+
+  /**
+   * Examines the creator(s) for the given tile model, returning
+   * the first creator whose name matches the provided filter
+   * (or simply the first creator overall if no filter is provided).
+   */
+  get firstCreatorMatchingFilter(): string | undefined {
+    let matchingCreator;
+
+    // If we're filtering by creator initial and have multiple creators, we want
+    // to surface the first creator who matches the filter.
+    if (this.creatorFilter && this.model?.creators.length) {
+      const firstLetter = this.creatorFilter; // This is just to satisfy tsc
+      matchingCreator = this.model.creators.find(creator =>
+        // Decompose combining characters first, so that e.g., filtering on E matches É too.
+        // Then remove anything that isn't strictly alphabetic, since our filters currently
+        // only handle A-Z. The first such letter (if one exists) is what needs to match.
+        creator
+          .normalize('NFD')
+          .replace(/[^A-Z]+/gi, '')
+          .toUpperCase()
+          .startsWith(firstLetter)
+      );
+    }
+
+    return matchingCreator ?? this.model?.creator;
+  }
+
+  /**
+   * The label indicating what year an account item was created.
+   * E.g., "Archivist since 2015"
+   */
+  get accountLabel(): string {
+    return this.model?.dateAdded
+      ? msg(str`Archivist since ${this.model.dateAdded.getFullYear()}`)
+      : '';
+  }
+
+  /**
+   * The readable label for the current sort if it is a type of date sort,
+   * or the empty string otherwise.
+   */
+  get dateLabel(): string {
+    switch (this.sortParam?.field) {
+      case 'publicdate':
+        return msg('Archived');
+      case 'reviewdate':
+        return msg('Reviewed');
+      case 'addeddate':
+        return msg('Added');
+      case 'date':
+        return msg('Published');
+      default:
+        return '';
+    }
+  }
+
+  /**
+   * Produces a URL pointing at the item page for the given identifier,
+   * using the current base URL and the correct path based on whether the
+   * item is specified to be a collection (default false).
+   */
+  itemPageUrl(
+    identifier: string,
+    isCollection = false
+  ): string | typeof nothing {
+    if (!identifier || this.baseNavigationUrl == null) return nothing;
+    const basePath = isCollection ? this.collectionPagePath : '/details/';
+    return `${this.baseNavigationUrl}${basePath}${identifier}`;
+  }
+}

package/test/collection-browser.test.ts

@@ -973,7 +973,7 @@ describe('Collection Browser', () => {
     await el.updateComplete;
     await el.initialSearchComplete;
     await el.updateComplete;
-    await nextTick();
+    await aTimeout(50);
 
     const infiniteScroller = el.shadowRoot?.querySelector('infinite-scroller');
     expect(infiniteScroller).to.exist;

package/test/tiles/grid/item-tile.test.ts

@@ -297,6 +297,21 @@ describe('Item Tile', () => {
     expect(dateSortedBy?.textContent?.trim()).to.equal('reviewed Jan 01, 2013');
   });
 
+  it('should show the first creator matching the letter filter, if defined', async () => {
+    const model: Partial<TileModel> = {
+      creator: 'foo',
+      creators: ['foo', 'bar', 'baz'],
+    };
+
+    const el = await fixture<ItemTile>(html`
+      <item-tile .model=${model} .creatorFilter=${'B'}> </item-tile>
+    `);
+
+    const creator = el.shadowRoot?.querySelector('.created-by');
+    expect(creator).to.exist;
+    expect(creator?.textContent?.trim()).to.match(/by\s+bar/);
+  });
+
   it('should render with snippet block when it has snippets', async () => {
     const el = await fixture<ItemTile>(html`
       <item-tile .model=${{ snippets: ['some {{{snippet}}} text'] }}>

package/test/tiles/list/tile-list-compact.test.ts

@@ -210,4 +210,20 @@ describe('List Tile Compact', () => {
     expect(dateColumn).to.exist;
     expect(dateColumn?.textContent?.trim()).to.equal('Jan 01, 2013');
   });
+
+  it('should show the first creator matching the letter filter, if defined', async () => {
+    const model: Partial<TileModel> = {
+      creator: 'foo',
+      creators: ['foo', 'bar', 'baz'],
+    };
+
+    const el = await fixture<TileListCompact>(html`
+      <tile-list-compact .model=${model} .creatorFilter=${'B'}>
+      </tile-list-compact>
+    `);
+
+    const creator = el.shadowRoot?.getElementById('creator');
+    expect(creator).to.exist;
+    expect(creator?.textContent?.trim()).to.equal('bar');
+  });
 });

package/test/tiles/list/tile-list.test.ts

@@ -87,6 +87,7 @@ describe('List Tile', () => {
     const el = await fixture<TileList>(html`
       <tile-list
         .model=${{ collections: ['deemphasize', 'community', 'foo'] }}
+        .baseNavigationUrl=${'base'}
         .collectionNameCache=${collectionNameCache}
       >
       </tile-list>
@@ -98,7 +99,7 @@ describe('List Tile', () => {
     const collectionLinks = collectionsRow?.querySelectorAll('a[href]');
     expect(collectionLinks?.length).to.equal(1);
     expect(collectionLinks?.item(0).getAttribute('href')).to.equal(
-      '/details/foo'
+      'base/details/foo'
     );
   });
 
@@ -107,6 +108,7 @@ describe('List Tile', () => {
     const el = await fixture<TileList>(html`
       <tile-list
         .model=${{ collections: ['fav-foo', 'bar'] }}
+        .baseNavigationUrl=${'base'}
         .collectionNameCache=${collectionNameCache}
       >
       </tile-list>
@@ -118,7 +120,7 @@ describe('List Tile', () => {
     const collectionLinks = collectionsRow?.querySelectorAll('a[href]');
     expect(collectionLinks?.length).to.equal(1);
     expect(collectionLinks?.item(0).getAttribute('href')).to.equal(
-      '/details/bar'
+      'base/details/bar'
     );
   });
 

package/test/tiles/tile-display-value-provider.test.ts

@@ -0,0 +1,172 @@
+import { expect } from '@open-wc/testing';
+import { nothing } from 'lit';
+import { TileDisplayValueProvider } from '../../src/tiles/tile-display-value-provider';
+import type { TileModel } from '../../src/models';
+
+describe('Tile Display Value Provider', () => {
+  describe('basic construction', () => {
+    it('constructs w/ no options', () => {
+      const provider = new TileDisplayValueProvider();
+      expect(provider).to.exist;
+    });
+
+    it('constructs w/ options', () => {
+      const provider = new TileDisplayValueProvider({
+        model: {} as TileModel,
+        baseNavigationUrl: 'foo',
+        collectionPagePath: 'bar',
+        sortParam: { field: 'baz', direction: 'asc' },
+        creatorFilter: 'X',
+      });
+      expect(provider).to.exist;
+    });
+  });
+
+  describe('firstCreatorMatchingFilter', () => {
+    it('provides undefined creator when no model set', () => {
+      const provider = new TileDisplayValueProvider();
+      expect(provider.firstCreatorMatchingFilter).to.be.undefined;
+    });
+
+    it('provides creator from model with no filter', () => {
+      const provider = new TileDisplayValueProvider({
+        model: { creator: 'foo', creators: ['foo', 'bar', 'baz'] } as TileModel,
+      });
+
+      expect(provider.firstCreatorMatchingFilter).to.equal('foo');
+    });
+
+    it('provides first creator matching filter when present', () => {
+      const provider = new TileDisplayValueProvider({
+        model: { creator: 'foo', creators: ['foo', 'bar', 'baz'] } as TileModel,
+        creatorFilter: 'B',
+      });
+
+      expect(provider.firstCreatorMatchingFilter).to.equal('bar');
+    });
+
+    it('matches letters with diacritics', () => {
+      const provider = new TileDisplayValueProvider({
+        model: {
+          creator: 'foo',
+          creators: ['foo', 'émile', 'ernest'],
+        } as TileModel,
+        creatorFilter: 'E',
+      });
+
+      expect(provider.firstCreatorMatchingFilter).to.equal('émile');
+    });
+
+    it('ignores non-alphabetical characters when matching', () => {
+      const provider = new TileDisplayValueProvider({
+        model: {
+          creator: 'foo',
+          creators: ['foo', '"(bar)"', 'baz'],
+        } as TileModel,
+        creatorFilter: 'B',
+      });
+
+      expect(provider.firstCreatorMatchingFilter).to.equal('"(bar)"');
+    });
+  });
+
+  describe('accountLabel', () => {
+    it('provides empty account label when no model', () => {
+      const provider = new TileDisplayValueProvider();
+      expect(provider.accountLabel).to.equal('');
+    });
+
+    it('provides empty account label when no date added', () => {
+      const provider = new TileDisplayValueProvider({ model: {} as TileModel });
+      expect(provider.accountLabel).to.equal('');
+    });
+
+    it('provides Archivist label from date added', () => {
+      const provider = new TileDisplayValueProvider({
+        model: { dateAdded: new Date(2010, 1, 2) } as TileModel,
+      });
+
+      expect(provider.accountLabel).to.equal('Archivist since 2010');
+    });
+  });
+
+  describe('dateLabel', () => {
+    it('provides empty date label when no sort param', () => {
+      const provider = new TileDisplayValueProvider();
+      expect(provider.dateLabel).to.equal('');
+    });
+
+    it('provides empty date label when sorting by non-date', () => {
+      const provider = new TileDisplayValueProvider({
+        sortParam: { field: 'downloads', direction: 'desc' },
+      });
+      expect(provider.dateLabel).to.equal('');
+    });
+
+    it('provides correct date label for publicdate', () => {
+      const provider = new TileDisplayValueProvider({
+        sortParam: { field: 'publicdate', direction: 'asc' },
+      });
+
+      expect(provider.dateLabel).to.equal('Archived');
+    });
+
+    it('provides correct date label for reviewdate', () => {
+      const provider = new TileDisplayValueProvider({
+        sortParam: { field: 'reviewdate', direction: 'asc' },
+      });
+
+      expect(provider.dateLabel).to.equal('Reviewed');
+    });
+
+    it('provides correct date label for addeddate', () => {
+      const provider = new TileDisplayValueProvider({
+        sortParam: { field: 'addeddate', direction: 'asc' },
+      });
+
+      expect(provider.dateLabel).to.equal('Added');
+    });
+
+    it('provides correct date label for published date', () => {
+      const provider = new TileDisplayValueProvider({
+        sortParam: { field: 'date', direction: 'asc' },
+      });
+
+      expect(provider.dateLabel).to.equal('Published');
+    });
+  });
+
+  describe('itemPageUrl', () => {
+    it('provides nothing when no base url set', () => {
+      const provider = new TileDisplayValueProvider();
+      expect(provider.itemPageUrl('foo')).to.equal(nothing);
+    });
+
+    it('provides nothing when identifier is empty', () => {
+      const provider = new TileDisplayValueProvider({
+        baseNavigationUrl: 'foo',
+      });
+      expect(provider.itemPageUrl('')).to.equal(nothing);
+    });
+
+    it('builds correct url from base and identifier', () => {
+      const provider = new TileDisplayValueProvider({
+        baseNavigationUrl: 'base',
+      });
+      expect(provider.itemPageUrl('foo')).to.equal('base/details/foo');
+    });
+
+    it('allows base url to be empty', () => {
+      const provider = new TileDisplayValueProvider({ baseNavigationUrl: '' });
+      expect(provider.itemPageUrl('foo')).to.equal('/details/foo');
+    });
+
+    it('uses provided collection base path for collections', () => {
+      const provider = new TileDisplayValueProvider({
+        baseNavigationUrl: 'base',
+        collectionPagePath: '/collection/',
+      });
+      expect(provider.itemPageUrl('foo', true)).to.equal('base/collection/foo');
+    });
+  });
+});

package/dist/src/tiles/list/account-label.d.ts

@@ -1 +0,0 @@
-export declare function accountLabel(date: Date | undefined): string;

package/dist/src/tiles/list/account-label.js

@@ -1,7 +0,0 @@
-export function accountLabel(date) {
-    if (!date) {
-        return '';
-    }
-    return `Archivist since ${date.getFullYear()}`;
-}
-//# sourceMappingURL=account-label.js.map

package/dist/src/tiles/list/account-label.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"account-label.js","sourceRoot":"","sources":["../../../../src/tiles/list/account-label.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,YAAY,CAAC,IAAsB;IACjD,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,EAAE,CAAC;KACX;IACD,OAAO,mBAAmB,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;AACjD,CAAC","sourcesContent":["export function accountLabel(date: Date | undefined): string {\n  if (!date) {\n    return '';\n  }\n  return `Archivist since ${date.getFullYear()}`;\n}\n"]}

package/dist/src/tiles/list/date-label.d.ts

@@ -1 +0,0 @@
-export declare function dateLabel(sortField: string | undefined): string;

package/dist/src/tiles/list/date-label.js

@@ -1,13 +0,0 @@
-export function dateLabel(sortField) {
-    switch (sortField) {
-        case 'publicdate':
-            return 'Archived';
-        case 'reviewdate':
-            return 'Reviewed';
-        case 'addeddate':
-            return 'Added';
-        default:
-            return 'Published';
-    }
-}
-//# sourceMappingURL=date-label.js.map

package/dist/src/tiles/list/date-label.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"date-label.js","sourceRoot":"","sources":["../../../../src/tiles/list/date-label.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,SAAS,CAAC,SAA6B;IACrD,QAAQ,SAAS,EAAE;QACjB,KAAK,YAAY;YACf,OAAO,UAAU,CAAC;QACpB,KAAK,YAAY;YACf,OAAO,UAAU,CAAC;QACpB,KAAK,WAAW;YACd,OAAO,OAAO,CAAC;QACjB;YACE,OAAO,WAAW,CAAC;KACtB;AACH,CAAC","sourcesContent":["export function dateLabel(sortField: string | undefined): string {\n  switch (sortField) {\n    case 'publicdate':\n      return 'Archived';\n    case 'reviewdate':\n      return 'Reviewed';\n    case 'addeddate':\n      return 'Added';\n    default:\n      return 'Published';\n  }\n}\n"]}

package/src/tiles/list/account-label.ts

@@ -1,6 +0,0 @@
-export function accountLabel(date: Date | undefined): string {
-  if (!date) {
-    return '';
-  }
-  return `Archivist since ${date.getFullYear()}`;
-}

package/src/tiles/list/date-label.ts

@@ -1,12 +0,0 @@
-export function dateLabel(sortField: string | undefined): string {
-  switch (sortField) {
-    case 'publicdate':
-      return 'Archived';
-    case 'reviewdate':
-      return 'Reviewed';
-    case 'addeddate':
-      return 'Added';
-    default:
-      return 'Published';
-  }
-}