@internetarchive/collection-browser 4.8.0 → 4.8.1-alpha-webdev9189.1

package/src/tiles/models.ts

@@ -1,21 +0,0 @@
-/**
- * What type of simplified tile layout to use.
- *  - `default`: Do not apply any layout simplifications.
- *  - `stats-only`: Only show the tile stats row, but not text snippets.
- *  - `snippets-only`: Only show the text snippets row (if snippets exist), but not tile stats.
- *  - `minimal`: Show neither tile stats nor the text snippets.
- */
-export type LayoutType = 'default' | 'stats-only' | 'snippets-only' | 'minimal';
-
-/**
- * Describes an action button to render on a tile.
- * Styling is controlled via the CSS custom properties documented in
- * `src/styles/tile-action-styles.ts`.
- */
-export interface TileAction {
-  /** Unique identifier for this action, included in the `tileActionClicked` event */
-  id: string;
-
-  /** Visible label text displayed on the button */
-  label: string;
-}

package/src/tiles/overlay/icon-overlay.ts

@@ -1,57 +0,0 @@
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  nothing,
-  TemplateResult,
-} from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { TILE_OVERLAY_ICONS, TileOverlayType } from '../../models';
-
-@customElement('icon-overlay')
-export class IconOverlay extends LitElement {
-  @property({ type: String }) type?: TileOverlayType;
-
-  render() {
-    return html`<div class="icon-overlay">${this.iconTemplate}</div>`;
-  }
-
-  private get iconTemplate(): TemplateResult | typeof nothing {
-    if (!this.type) return nothing;
-    return html`${TILE_OVERLAY_ICONS[this.type] ?? nothing}`;
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 100%;
-        z-index: 2;
-        background-color: rgb(255, 254, 203);
-        display: flex;
-        justify-content: center;
-        border: 1px solid #2c2c2c;
-      }
-
-      .icon-overlay {
-        height: 20px;
-        width: 20px;
-        padding: 2px;
-        padding: 2px;
-      }
-
-      :host(.list-detail) .icon-overlay {
-        height: 20px;
-        width: 20px;
-      }
-      :host(.list-compact) .icon-overlay {
-        height: 15px;
-        width: 15px;
-      }
-    `;
-  }
-}

package/src/tiles/overlay/text-overlay.ts

@@ -1,79 +0,0 @@
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  nothing,
-  TemplateResult,
-} from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import {
-  TILE_OVERLAY_ICONS,
-  TILE_OVERLAY_TEXT,
-  TileOverlayType,
-} from '../../models';
-
-@customElement('text-overlay')
-export class TextOverlay extends LitElement {
-  @property({ type: String }) type?: TileOverlayType;
-
-  render() {
-    return html`
-      <div class="overlay no-preview">
-        <div class="icon-overlay">${this.iconTemplate}</div>
-        <p class="text-overlay">${this.textTemplate}</p>
-      </div>
-    `;
-  }
-
-  private get iconTemplate(): TemplateResult | typeof nothing {
-    if (!this.type) return nothing;
-    return html`${TILE_OVERLAY_ICONS[this.type] ?? nothing}`;
-  }
-
-  private get textTemplate(): TemplateResult | typeof nothing {
-    if (!this.type) return nothing;
-    return html`${TILE_OVERLAY_TEXT[this.type] ?? nothing}`;
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        align-items: center;
-        display: flex;
-      }
-
-      .overlay {
-        border: 1px solid #2c2c2c;
-        border-radius: 1px;
-        position: absolute;
-        right: 0;
-        left: 0;
-        top: 50%;
-        transform: translate(0px, -50%);
-        width: auto;
-        height: auto;
-        padding: 5px;
-        background-color: #fffecb;
-        display: flex;
-        align-items: center;
-        border-radius: 1px;
-      }
-
-      .icon-overlay {
-        width: 40px;
-        height: 40px;
-        display: inherit;
-      }
-      .text-overlay {
-        margin: 0;
-        vertical-align: bottom;
-        padding-left: 5px;
-        text-align: center;
-        color: #2c2c2c;
-        font-size: 1.4rem;
-        line-height: 2rem;
-      }
-    `;
-  }
-}

package/src/tiles/review-block.ts

@@ -1,130 +0,0 @@
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  nothing,
-  TemplateResult,
-} from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { msg } from '@lit/localize';
-import { favoriteFilledIcon } from '../assets/img/icons/favorite-filled';
-import { favoriteUnfilledIcon } from '../assets/img/icons/favorite-unfilled';
-import { srOnlyStyle } from '../styles/sr-only';
-
-@customElement('review-block')
-export class ReviewBlock extends LitElement {
-  @property({ type: String }) title = '';
-
-  @property({ type: String }) body = '';
-
-  @property({ type: Number }) starRating = 0;
-
-  @property({ type: String }) viewSize = 'desktop';
-
-  render() {
-    if (!this.title && !this.body && !this.starRating) return nothing;
-
-    return html`
-      <div class="review-container">
-        <div class="snippet-view ${this.viewSize}">
-          ${this.starsTemplate}
-          <p class="review-title">${this.title}</p>
-          <p class="review-body">${this.body}</p>
-        </div>
-      </div>
-    `;
-  }
-
-  private get starsTemplate(): TemplateResult | typeof nothing {
-    if (this.starRating <= 0) return nothing;
-
-    const numFilledStars = Math.min(5, this.starRating);
-    const numUnfilledStars = Math.min(5, 5 - this.starRating);
-    return html`
-      <div class="star-rating">
-        <span class="sr-only">${this.starRating} ${msg('out of 5 stars')}</span>
-        ${Array(numFilledStars).fill(this.filledStarTemplate)}
-        ${Array(numUnfilledStars).fill(this.unfilledStarTemplate)}
-      </div>
-    `;
-  }
-
-  private get filledStarTemplate(): TemplateResult {
-    return html`<span aria-hidden="true">${favoriteFilledIcon}</span>`;
-  }
-
-  private get unfilledStarTemplate(): TemplateResult {
-    return html`
-      <span class="unfilled-star" aria-hidden="true">
-        ${favoriteUnfilledIcon}
-      </span>
-    `;
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      srOnlyStyle,
-      css`
-        .review-container {
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-          width: calc(100% - 10px);
-          border: 1px solid #ccc;
-          margin-top: var(--containerTopMargin, 10px);
-          margin-left: var(--containerLeftMargin, 0px);
-          padding: 5px;
-          box-sizing: border-box;
-        }
-
-        .review-title,
-        .review-body {
-          display: -webkit-box;
-          font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-          overflow: hidden;
-          overflow-wrap: break-word;
-          word-break: break-word;
-          -webkit-line-clamp: var(--maxLines, 3);
-          -webkit-box-orient: vertical;
-          margin: 0;
-        }
-
-        .review-title {
-          font-size: 1.4rem;
-          line-height: 2rem;
-          max-height: 6rem;
-        }
-
-        .review-title > a[href] {
-          color: inherit;
-          text-decoration: none;
-        }
-
-        .review-title > a[href]:hover {
-          text-decoration: underline;
-        }
-
-        .review-body {
-          font-size: 1rem;
-          line-height: 1.4rem;
-          max-height: 4.2rem;
-        }
-
-        .star-rating svg {
-          width: 10px;
-          height: 10px;
-        }
-
-        .unfilled-star {
-          fill: #ccc;
-        }
-
-        .list {
-          margin: 0;
-          padding-left: 5px;
-        }
-      `,
-    ];
-  }
-}

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

@@ -1,132 +0,0 @@
-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="container">
-        <div class="snippet-view ${this.viewSize}">
-          ${this.ellipsisJoinedSnippets}
-        </div>
-      </div>
-    `;
-  }
-
-  /**
-   * 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(/{{{(.+?)}}}/gs);
-      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: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        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 {
-        display: -webkit-box;
-        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-        font-size: 14px;
-        overflow: hidden;
-        overflow-wrap: break-word;
-        -webkit-line-clamp: var(--maxLines, 3);
-        -webkit-box-orient: vertical;
-        margin-left: 5px;
-      }
-
-      .grid {
-        font-size: 1.2rem;
-        line-height: 1.5rem;
-      }
-
-      .list {
-        margin: 0;
-        padding-left: 15px;
-        font-size: 1.4rem;
-        line-height: 2rem;
-
-        /*
-         * Safari doesn't always respect the line-clamping rules,
-         * so we add this to ensure these fields still get truncated.
-         */
-        max-height: 6rem;
-      }
-
-      mark {
-        /* blue, 20% transparency */
-        background-color: #0000ff33;
-        color: inherit;
-      }
-    `;
-  }
-}