@internetarchive/collection-browser 0.4.4-alpha.1 → 0.4.4

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

@@ -90,7 +90,13 @@ export class TileList extends LitElement {
   }
 
   private get imageBlockTemplate() {
-    return html`
+    if (!this.model) return nothing;
+
+    return html`<a
+      href="${this.baseNavigationUrl}/details/${encodeURI(
+        this.model.identifier
+      )}"
+    >
       <image-block
         .model=${this.model}
         .baseImageUrl=${this.baseImageUrl}
@@ -100,7 +106,7 @@ export class TileList extends LitElement {
         .loggedIn=${this.loggedIn}
       >
       </image-block>
-    `;
+    </a> `;
   }
 
   private get detailsTemplate() {
@@ -120,13 +126,13 @@ export class TileList extends LitElement {
   // Data templates
   private get iconRightTemplate() {
     return html`
-      <div id="icon-right">
+      <a id="icon-right" href=${this.mediatypeURL} target="_blank">
         <mediatype-icon
           .mediatype=${this.model?.mediatype}
           .collections=${this.model?.collections}
         >
         </mediatype-icon>
-      </div>
+      </a>
     `;
   }
 
@@ -331,6 +337,23 @@ export class TileList extends LitElement {
     >`;
   }
 
+  /** The URL of this item's mediatype collection, if defined. */
+  private get mediatypeURL(): string | typeof nothing {
+    if (!this.baseNavigationUrl || !this.model?.mediatype) return nothing;
+
+    // Need special handling for certain mediatypes that don't have a top-level collection page
+    switch (this.model.mediatype) {
+      case 'collection':
+        return `${this.baseNavigationUrl}/search?query=mediatype:collection&sort=-downloads`;
+      case 'account':
+        return nothing;
+      default:
+        return `${this.baseNavigationUrl}/details/${encodeURI(
+          this.model.mediatype
+        )}`;
+    }
+  }
+
   protected updated(changed: PropertyValues): void {
     if (changed.has('model')) {
       this.fetchCollectionNames();
@@ -459,6 +482,12 @@ export class TileList extends LitElement {
         margin-top: -4px;
         padding-bottom: 2px;
         flex-grow: 1;
+
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 3;
+        overflow: hidden;
+        overflow-wrap: anywhere;
       }
 
       .metadata {
@@ -479,6 +508,14 @@ export class TileList extends LitElement {
         line-clamp: 3;
       }
 
+      #collections {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 3;
+        overflow: hidden;
+        overflow-wrap: anywhere;
+      }
+
       #icon {
         padding-top: 5px;
       }
@@ -515,6 +552,18 @@ export class TileList extends LitElement {
         width: 100%;
       }
 
+      /*
+       * If the container becomes very tiny, don't let the thumbnail side take
+       * up too much space. Shouldn't make a difference on ordinary viewport sizes.
+       */
+      #list-line-left {
+        max-width: 25%;
+
+        display: flex;
+        flex-direction: column;
+        row-gap: 5px;
+      }
+
       div a:hover {
         text-decoration: underline;
       }
@@ -526,7 +575,20 @@ export class TileList extends LitElement {
       #title-line {
         display: flex;
         flex-direction: row;
-        gap: 10px;
+        column-gap: 10px;
+      }
+
+      /*
+       * With the exception of the title line, allow these to wrap if
+       * the space becomes too small to accommodate them together.
+       * 
+       * The title line is excluded because it contains the mediatype icon
+       * which we don't want to wrap.
+       */
+      #item-line,
+      #dates-line,
+      #views-line {
+        flex-wrap: wrap;
       }
     `;
   }

package/src/tiles/text-snippet-block.ts

@@ -85,11 +85,12 @@ export class TextSnippetBlock extends LitElement {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
-        width: 100%;
+        width: calc(100% - 10px);
         border-left: 5px solid #194880;
         margin-top: var(--containerTopMargin, 10px);
         margin-left: var(--containerLeftMargin, 0px);
         border-radius: 3px;
+        box-sizing: border-box;
       }
 
       .snippet-view {
@@ -101,17 +102,16 @@ export class TextSnippetBlock extends LitElement {
         -webkit-line-clamp: var(--maxLines, 3);
         -webkit-box-orient: vertical;
         margin-left: 5px;
-        margin-right: 10px;
       }
 
       .grid {
-        margin: 0px 15px 0px 5px;
         font-size: 1.2rem;
         line-height: 1.5rem;
       }
 
       .list {
-        padding-left: 20px;
+        margin: 0;
+        padding-left: 15px;
         font-size: 1.4rem;
         line-height: 2rem;
       }

package/src/tiles/tile-dispatcher.ts

@@ -11,14 +11,24 @@ import type { TileDisplayMode, TileModel } from '../models';
 import './grid/collection-tile';
 import './grid/item-tile';
 import './grid/account-tile';
+import './hover/tile-hover-pane';
 import './list/tile-list';
 import './list/tile-list-compact';
 import './list/tile-list-compact-header';
+import type { TileHoverPane } from './hover/tile-hover-pane';
+import {
+  HoverPaneController,
+  HoverPaneControllerInterface,
+  HoverPaneProperties,
+  HoverPaneProviderInterface,
+} from './hover/hover-pane-controller';
 
 @customElement('tile-dispatcher')
 export class TileDispatcher
   extends LitElement
-  implements SharedResizeObserverResizeHandlerInterface
+  implements
+    SharedResizeObserverResizeHandlerInterface,
+    HoverPaneProviderInterface
 {
   @property({ type: String }) tileDisplayMode?: TileDisplayMode;
 
@@ -37,24 +47,57 @@ export class TileDispatcher
 
   @property({ type: Object }) sortParam: SortParam | null = null;
 
-  @query('#container') private container!: HTMLDivElement;
-
   @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;
+
+  private hoverPaneController?: HoverPaneControllerInterface;
+
+  @query('#container')
+  private container!: HTMLDivElement;
+
+  @query('tile-hover-pane')
+  private hoverPane?: TileHoverPane;
+
+  /** Maps each display mode to whether hover panes should appear in that mode */
+  private static readonly HOVER_PANE_DISPLAY_MODES: Record<
+    TileDisplayMode,
+    boolean
+  > = {
+    grid: true,
+    'list-compact': true,
+    'list-detail': false,
+    'list-header': false,
+  };
+
   render() {
+    const isGridMode = this.tileDisplayMode === 'grid';
+    const hoverPaneTemplate =
+      this.hoverPaneController?.getTemplate() ?? nothing;
     return html`
-      <div id="container">
+      <div id="container" class=${isGridMode ? 'hoverable' : nothing}>
         ${this.tileDisplayMode === 'list-header'
           ? this.headerTemplate
           : this.tileTemplate}
+        ${hoverPaneTemplate}
       </div>
     `;
   }
 
+  protected firstUpdated(): void {
+    if (this.shouldPrepareHoverPane) {
+      this.hoverPaneController = new HoverPaneController(this, {
+        mobileBreakpoint: this.mobileBreakpoint,
+        enableLongPress: false,
+      });
+    }
+  }
+
   private get headerTemplate() {
     const { currentWidth, sortParam, mobileBreakpoint } = this;
     return html`
@@ -80,7 +123,9 @@ export class TileDispatcher
     return html`
       <a
         href="${this.baseNavigationUrl}/details/${this.model?.identifier}"
-        title=${ifDefined(this.model?.title)}
+        title=${this.shouldPrepareHoverPane
+          ? nothing // Don't show title tooltips when we have the tile info popups
+          : ifDefined(this.model?.title)}
         @click=${() =>
           this.dispatchEvent(
             new CustomEvent('resultSelected', { detail: this.model })
@@ -91,6 +136,28 @@ export class TileDispatcher
     `;
   }
 
+  /**
+   * Whether hover pane behavior should be prepared for this tile
+   * (e.g., whether mouse listeners should be attached, etc.)
+   */
+  private get shouldPrepareHoverPane(): boolean {
+    return (
+      this.enableHoverPane &&
+      !!this.tileDisplayMode &&
+      TileDispatcher.HOVER_PANE_DISPLAY_MODES[this.tileDisplayMode]
+    );
+  }
+
+  /** @inheritdoc */
+  getHoverPane(): TileHoverPane | undefined {
+    return this.hoverPane;
+  }
+
+  /** @inheritdoc */
+  getHoverPaneProps(): HoverPaneProperties {
+    return this;
+  }
+
   handleResize(entry: ResizeObserverEntry): void {
     this.currentWidth = entry.contentRect.width;
     this.currentHeight = entry.contentRect.height;
@@ -222,11 +289,14 @@ export class TileDispatcher
       }
 
       #container {
+        position: relative;
         height: 100%;
+        border-radius: 4px;
       }
 
-      #delete-button {
-        float: right;
+      #container.hoverable:hover {
+        box-shadow: 0 0 6px 2px rgba(8, 8, 32, 0.8);
+        transition: box-shadow 0.1s ease;
       }
 
       a {
@@ -234,12 +304,30 @@ export class TileDispatcher
         height: 100%;
         color: unset;
         text-decoration: none;
+        transition: transform 0.05s ease;
       }
 
       a :first-child {
         display: block;
         height: 100%;
       }
+
+      #touch-backdrop {
+        position: fixed;
+        width: 100vw;
+        height: 100vh;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        background: transparent;
+      }
+
+      tile-hover-pane {
+        position: absolute;
+        top: 0;
+        left: -9999px;
+        z-index: 2;
+      }
     `;
   }
 }

package/test/collection-browser.test.ts

@@ -318,100 +318,6 @@ describe('Collection Browser', () => {
     });
   });
 
-  it('fires a separate date histogram query when year facets are applied', async () => {
-    const searchService = new MockSearchService();
-    const selectedFacets: SelectedFacets = {
-      subject: {},
-      lending: {},
-      mediatype: {},
-      language: {},
-      creator: {},
-      collection: {},
-      year: {
-        '2000': {
-          key: '2000',
-          state: 'selected',
-          count: 123,
-        },
-      },
-    };
-
-    const el = await fixture<CollectionBrowser>(
-      html`<collection-browser .searchService=${searchService}>
-      </collection-browser>`
-    );
-
-    el.baseQuery = 'collection:foo';
-    el.showHistogramDatePicker = true;
-    el.selectedFacets = selectedFacets;
-    await el.updateComplete;
-
-    expect(
-      searchService.searchParams?.aggregations?.simpleParams
-    ).to.deep.equal(['year']); // Explicitly requests year aggregations
-    expect(searchService.searchParams?.query).to.equal(
-      'collection:foo' // No date clause on query
-    );
-  });
-
-  it('fires a separate date histogram query when a date range is applied', async () => {
-    const searchService = new MockSearchService();
-
-    const el = await fixture<CollectionBrowser>(
-      html`<collection-browser .searchService=${searchService}>
-      </collection-browser>`
-    );
-
-    el.baseQuery = 'collection:foo';
-    el.showHistogramDatePicker = true;
-    el.minSelectedDate = '1995';
-    el.maxSelectedDate = '2005';
-    await el.updateComplete;
-
-    expect(
-      searchService.searchParams?.aggregations?.simpleParams
-    ).to.deep.equal(['year']); // Explicitly requests year aggregations
-    expect(searchService.searchParams?.query).to.equal(
-      'collection:foo' // No date clause on query
-    );
-  });
-
-  it('does not fire a separate date histogram query when no date filters are applied', async () => {
-    const searchService = new MockSearchService();
-
-    const el = await fixture<CollectionBrowser>(
-      html`<collection-browser .searchService=${searchService}>
-      </collection-browser>`
-    );
-
-    el.baseQuery = 'collection:foo';
-    el.showHistogramDatePicker = true;
-    await el.updateComplete;
-
-    expect(searchService.searchParams?.aggregations?.simpleParams).to.satisfy(
-      (aggTypes: string[]) => !aggTypes || !aggTypes.includes('year') // Not requesting year aggregations explicitly
-    );
-  });
-
-  it('does not fire a separate date histogram query when date picker is disabled', async () => {
-    const searchService = new MockSearchService();
-
-    const el = await fixture<CollectionBrowser>(
-      html`<collection-browser .searchService=${searchService}>
-      </collection-browser>`
-    );
-
-    el.baseQuery = 'collection:foo';
-    el.showHistogramDatePicker = false;
-    el.minSelectedDate = '1995';
-    el.maxSelectedDate = '2005';
-    await el.updateComplete;
-
-    expect(searchService.searchParams?.aggregations?.simpleParams).to.satisfy(
-      (aggTypes: string[]) => !aggTypes || !aggTypes.includes('year') // Not requesting year aggregations explicitly
-    );
-  });
-
   it('fails gracefully if no search service provided', async () => {
     const el = await fixture<CollectionBrowser>(
       html`<collection-browser></collection-browser>`
@@ -845,7 +751,12 @@ describe('Collection Browser', () => {
       </collection-browser>`
     );
 
-    // Infinite scroller won't exist unless there's a base query
+    // Infinite scroller won't exist unless there's a base query.
+    // First ensure that we don't throw errors when it doesn't exist.
+    await el.goToPage(1);
+
+    // And make sure it correctly calls scrollToCell when the
+    // infinite scroller does exist.
     el.baseQuery = 'collection:foo';
     await el.updateComplete;
 
@@ -858,12 +769,7 @@ describe('Collection Browser', () => {
     const spy = sinon.spy();
     infiniteScroller.scrollToCell = spy;
 
-    el.goToPage(1);
-
-    // Give it a second to scroll
-    await new Promise(res => {
-      setTimeout(res, 1000);
-    });
+    await el.goToPage(1);
 
     expect(spy.callCount).to.equal(1);
 

package/test/sort-filter-bar/sort-filter-bar.test.ts

@@ -229,3 +229,92 @@ describe('Sort/filter bar letter behavior', () => {
     expect(el.selectedCreatorFilter).to.equal('C');
   });
 });
+
+describe('Sort/filter bar mobile view', () => {
+  let origWindowSize: { width: number; height: number };
+  before(() => {
+    origWindowSize = { width: window.innerWidth, height: window.innerHeight };
+    window.resizeTo(500, 600);
+  });
+
+  after(() => {
+    window.resizeTo(origWindowSize.width, origWindowSize.height);
+  });
+
+  it('renders in mobile view', async () => {
+    const el = await fixture<SortFilterBar>(html`
+      <sort-filter-bar></sort-filter-bar>
+    `);
+
+    const mobileSortSelector = el.shadowRoot?.querySelector(
+      '#mobile-sort-selector'
+    );
+    const desktopSortSelector = el.shadowRoot?.querySelector(
+      '#desktop-sort-selector'
+    );
+
+    expect(mobileSortSelector?.classList?.contains('visible')).to.be.true;
+    expect(desktopSortSelector?.classList?.contains('hidden')).to.be.true;
+  });
+
+  it('changes selected sort in mobile view', async () => {
+    const el = await fixture<SortFilterBar>(html`
+      <sort-filter-bar></sort-filter-bar>
+    `);
+
+    const mobileSortSelector = el.shadowRoot?.querySelector(
+      '#mobile-sort-selector'
+    ) as HTMLSelectElement;
+    expect(mobileSortSelector).to.exist;
+
+    mobileSortSelector.value = 'title';
+    mobileSortSelector.dispatchEvent(new Event('change'));
+    await el.updateComplete;
+
+    expect(el.selectedSort).to.equal('title');
+  });
+
+  it('clears title filter when sort changed from title in mobile view', async () => {
+    const el = await fixture<SortFilterBar>(html`
+      <sort-filter-bar></sort-filter-bar>
+    `);
+
+    el.selectedSort = 'title' as SortField;
+    el.selectedTitleFilter = 'A';
+    await el.updateComplete;
+
+    const mobileSortSelector = el.shadowRoot?.querySelector(
+      '#mobile-sort-selector'
+    ) as HTMLSelectElement;
+    expect(mobileSortSelector).to.exist;
+
+    mobileSortSelector.value = 'relevance';
+    mobileSortSelector.dispatchEvent(new Event('change'));
+    await el.updateComplete;
+
+    expect(el.selectedSort).to.equal('relevance');
+    expect(el.selectedTitleFilter).to.be.null;
+  });
+
+  it('clears creator filter when sort changed from creator in mobile view', async () => {
+    const el = await fixture<SortFilterBar>(html`
+      <sort-filter-bar></sort-filter-bar>
+    `);
+
+    el.selectedSort = 'creator' as SortField;
+    el.selectedCreatorFilter = 'A';
+    await el.updateComplete;
+
+    const mobileSortSelector = el.shadowRoot?.querySelector(
+      '#mobile-sort-selector'
+    ) as HTMLSelectElement;
+    expect(mobileSortSelector).to.exist;
+
+    mobileSortSelector.value = 'relevance';
+    mobileSortSelector.dispatchEvent(new Event('change'));
+    await el.updateComplete;
+
+    expect(el.selectedSort).to.equal('relevance');
+    expect(el.selectedCreatorFilter).to.be.null;
+  });
+});

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

@@ -45,7 +45,7 @@ describe('Account Tile', () => {
     const el = await fixture<AccountTile>(html`
       <account-tile
         .model=${{
-          dateAdded: new Date('2022-01-01'),
+          dateAdded: new Date('2022-02-02'),
         }}
       >
       </account-tile>