@internetarchive/collection-browser 0.2.19 → 0.2.20-alpha.0

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

@@ -0,0 +1,130 @@
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  TemplateResult,
+} from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { join } from 'lit/directives/join.js';
+
+@customElement('text-snippet-block')
+export class TextSnippetBlock extends LitElement {
+  @property({ type: Array }) snippets?: string[] = [];
+
+  @property({ type: String }) viewSize: string = 'desktop';
+
+  render() {
+    if (!this.snippets?.length) return html`${nothing}`;
+
+    return html`
+      <div class="${this.containerClasses}">${this.ellipsisJoinedSnippets}</div>
+
+      ${this.viewSize === 'grid'
+        ? html`<div class="separator"></div>`
+        : nothing}
+    `;
+  }
+
+  private get viewSizeClass() {
+    return this.viewSize === 'grid' ? 'grid' : 'list';
+  }
+
+  private get containerClasses() {
+    return `container ${this.viewSizeClass}`;
+  }
+
+  /**
+   * An array of HTML templates derived from the snippets, with ellipses inserted
+   * at the beginning, end, and between each pair of snippets.
+   */
+  private get ellipsisJoinedSnippets(): TemplateResult {
+    return html`
+      &hellip; ${join(this.snippetTemplates, html` &hellip; `)} &hellip;
+    `;
+  }
+
+  /**
+   * Returns an array of HTML span templates containing this item's snippets with all of
+   * their `{{{triple-brace-delimited}}}` matches replaced by `<mark>HTML mark tags</mark>`.
+   *
+   * This approach safely avoids the use of `unsafeHTML` and leaves any existing HTML tags
+   * in the snippets intact (as inert text), rather than stripping them away with DOMPurify.
+   *
+   * Note on `<em>` vs. `<mark>`:
+   * The old search page snippets had search keywords demarcated with `<em>` tags.
+   * The `<mark>` tag is semantically more accurate for this use case than `<em>`,
+   * but screen-reader behavior may be different. `<em>` will likely be read in a
+   * different tone, while `<mark>` is often read no differently than ordinary text
+   * in many screen-readers (though there are ways to work around this if needed).
+   */
+  private get snippetTemplates(): TemplateResult[] | undefined {
+    return this.snippets?.map(s => {
+      const matches = s.matchAll(/{{{(.+?)}}}/g);
+      const templates: TemplateResult[] = [];
+
+      // Convert each match into an HTML template that includes:
+      //  - Everything from the end of the previous match (or the beginning of the
+      //      string) up to the current match, as raw text.
+      //  - The current match (excluding the curly braces) wrapped in a `<mark>` tag.
+      let index = 0;
+      for (const match of matches) {
+        if (match.index != null) {
+          templates.push(html`
+            ${s.slice(index, match.index)}
+            <mark>${match[1]}</mark>
+          `);
+          index = match.index + match[0].length;
+        }
+      }
+
+      // Include any text from the last match to the end
+      templates.push(html`${s.slice(index)}`);
+
+      // Squash everything into a single span template
+      return html`<span>${templates}</span>`;
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .container {
+        display: -webkit-box;
+        font-family: 'Times New Roman', serif;
+        overflow: hidden;
+        overflow-wrap: break-word;
+        -webkit-line-clamp: var(--maxLines, 3);
+        -webkit-box-orient: vertical;
+      }
+
+      .separator {
+        /* Border line should extend to the edges of the tile */
+        margin: 0 -5px;
+        border-bottom: 1px solid #bbb;
+      }
+
+      .grid {
+        /* Bottom margin reduced by 1px to account for the separator */
+        margin: 0.5rem 0 0.4rem;
+        font-size: 1.2rem;
+        line-height: 1.5rem;
+      }
+
+      .list {
+        margin: 1rem 0 0;
+        padding: 0 0 0 1.5rem;
+        border-left: 0.5rem solid #194880;
+        border-radius: 3px;
+        font-size: 1.4rem;
+        line-height: 2rem;
+      }
+
+      mark {
+        /* blue, 20% transparency */
+        background-color: #0000ff33;
+        color: inherit;
+      }
+    `;
+  }
+}

package/src/utils/analytics-category-event.ts

@@ -0,0 +1,15 @@
+/**
+ * Analytics categories and events. Used when building actions in
+ */
+export const analyticsCategories = {
+  default: 'collection-browser',
+};
+
+export const analyticsActions = {
+  sortBy: 'sortBy',
+  sortByCreator: 'sortByCreator',
+  sortByTitle: 'sortByTitle',
+  displayMode: 'displayMode',
+  facetsChanged: 'facetsChanged', // group + value
+  histogramChanged: 'histogramChanged',
+};

package/test/text-snippet-block.test.ts

@@ -0,0 +1,69 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import type { TextSnippetBlock } from '../src/tiles/text-snippet-block';
+import '../src/tiles/text-snippet-block';
+
+describe('TextSnippetBlock component', () => {
+  it('should render initial component', async () => {
+    const el = await fixture<TextSnippetBlock>(
+      html`<text-snippet-block></text-snippet-block>`
+    );
+
+    // No content if no snippets
+    expect(el.shadowRoot?.children.length).to.equal(0);
+
+    // Content appears if there are snippets
+    el.snippets = ['text'];
+    await el.updateComplete;
+    const container = el.shadowRoot?.querySelector('.container');
+    expect(container).to.exist;
+  });
+
+  it('should render marked snippets', async () => {
+    const snippets = [
+      'some {{{snippet}}} text',
+      'some {{{other}}} {{{snippet}}} text',
+    ];
+
+    const el = await fixture<TextSnippetBlock>(
+      html`<text-snippet-block .snippets=${snippets}></text-snippet-block>`
+    );
+
+    const container = el.shadowRoot?.querySelector('.container');
+
+    // Has the correct number of snippets and highlights
+    expect(container?.children.length).to.equal(snippets.length);
+    expect(container?.querySelectorAll('mark').length).to.equal(3);
+  });
+
+  it('should render correctly in grid mode', async () => {
+    const el = await fixture<TextSnippetBlock>(
+      html`<text-snippet-block
+        viewsize="grid"
+        .snippets=${['text']}
+      ></text-snippet-block>`
+    );
+
+    const container = el.shadowRoot?.querySelector('.container');
+
+    // Applies the right container classes
+    expect(container?.classList.contains('grid')).to.be.true;
+    expect(container?.classList.contains('list')).to.be.false;
+  });
+
+  it('should render correctly in list mode', async () => {
+    const el = await fixture<TextSnippetBlock>(
+      html`<text-snippet-block
+        viewsize="list"
+        .snippets=${['text']}
+      ></text-snippet-block>`
+    );
+
+    const container = el.shadowRoot?.querySelector('.container');
+
+    // Applies the right container classes
+    expect(container?.classList.contains('list')).to.be.true;
+    expect(container?.classList.contains('grid')).to.be.false;
+  });
+});

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

@@ -113,4 +113,23 @@ describe('Item Tile', () => {
     expect(dateSortedBy).to.not.exist; // it should be exist because this is not related to date sort
     expect(createdBy).to.exist;
   });
+
+  it('should render with snippet block when it has snippets', async () => {
+    const el = await fixture<ItemTile>(html`
+      <item-tile .model=${{ snippets: ['some {{{snippet}}} text'] }}>
+      </item-tile>
+    `);
+
+    const snippetBlock = el.shadowRoot?.querySelector('text-snippet-block');
+
+    expect(snippetBlock).to.exist;
+  });
+
+  it('should not render snippet block when no snippets are present', async () => {
+    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);
+
+    const snippetBlock = el.shadowRoot?.querySelector('text-snippet-block');
+
+    expect(snippetBlock).to.not.exist;
+  });
 });

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

@@ -0,0 +1,51 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import type { TileList } from '../../../src/tiles/list/tile-list';
+
+import '../../../src/tiles/list/tile-list';
+
+describe('List Tile', () => {
+  it('should render initial component', async () => {
+    const el = await fixture<TileList>(html`<tile-list></tile-list>`);
+
+    const listContainer = el.shadowRoot?.querySelector('#list-line');
+    const itemTitle = el.shadowRoot?.querySelector('#title');
+    const imageBlock = el.shadowRoot?.querySelector('image-block');
+
+    expect(listContainer).to.exist;
+    expect(itemTitle).to.exist;
+    expect(imageBlock).to.exist;
+  });
+
+  it('should render with creator element but not dates', async () => {
+    const el = await fixture<TileList>(html`
+      <tile-list .model=${{ creators: ['someone'] }}></tile-list>
+    `);
+
+    const creator = el.shadowRoot?.querySelector('#creator');
+    const datesLine = el.shadowRoot?.querySelector('#dates-line');
+
+    expect(creator).to.exist;
+    expect(datesLine?.children.length).to.equal(0);
+  });
+
+  it('should render with snippet block when it has snippets', async () => {
+    const el = await fixture<TileList>(html`
+      <tile-list .model=${{ snippets: ['some {{{snippet}}} text'] }}>
+      </tile-list>
+    `);
+
+    const snippetBlock = el.shadowRoot?.querySelector('text-snippet-block');
+
+    expect(snippetBlock).to.exist;
+  });
+
+  it('should not render snippet block when no snippets are present', async () => {
+    const el = await fixture<TileList>(html`<tile-list></tile-list>`);
+
+    const snippetBlock = el.shadowRoot?.querySelector('text-snippet-block');
+
+    expect(snippetBlock).to.not.exist;
+  });
+});