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

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

@@ -1,718 +0,0 @@
-import { css, html, nothing, PropertyValues, TemplateResult } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { join } from 'lit/directives/join.js';
-import { map } from 'lit/directives/map.js';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { customElement, property, state } from 'lit/decorators.js';
-import { msg, str } from '@lit/localize';
-import DOMPurify from 'dompurify';
-
-import type { SortParam } from '@internetarchive/search-service';
-import { suppressedCollections } from '../../models';
-import type { CollectionTitles } from '../../data-source/models';
-import { BaseTileComponent } from '../base-tile-component';
-
-import { formatCount, NumberFormat } from '../../utils/format-count';
-import type { DateFormat } from '../../utils/format-date';
-import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
-import { tileActionStyles } from '../../styles/tile-action-styles';
-
-import '../image-block';
-import '../review-block';
-import '../text-snippet-block';
-import '../tile-mediatype-icon';
-
-@customElement('tile-list')
-export class TileList extends BaseTileComponent {
-  /*
-   * Reactive properties inherited from BaseTileComponent:
-   *  - model?: TileModel;
-   *  - tileActions: TileAction[] = [];
-   *  - currentWidth?: number;
-   *  - currentHeight?: number;
-   *  - baseNavigationUrl?: string;
-   *  - baseImageUrl?: string;
-   *  - collectionPagePath?: string;
-   *  - sortParam: SortParam | null = null;
-   *  - defaultSortParam: SortParam | null = null;
-   *  - creatorFilter?: string;
-   *  - mobileBreakpoint?: number;
-   *  - loggedIn = false;
-   *  - suppressBlurring = false;
-   *  - useLocalTime = false;
-   */
-
-  @property({ type: Object })
-  collectionTitles?: CollectionTitles;
-
-  @state() private collectionLinks: (TemplateResult | typeof nothing)[] = [];
-
-  render() {
-    return html`
-      <div id="list-line" class="${this.classSize}">
-        ${this.classSize === 'mobile'
-          ? this.mobileTemplate
-          : this.desktopTemplate}
-      </div>
-    `;
-  }
-
-  /**
-   * Templates
-   */
-  private get mobileTemplate() {
-    return html`
-      <div id="list-line-top">
-        <div id="list-line-left">
-          ${this.imageBlockTemplate} ${this.renderTileActions('list-detail')}
-        </div>
-        <div id="list-line-right">
-          <div id="title-line">
-            <div id="title">${this.titleTemplate}</div>
-            ${this.iconRightTemplate}
-          </div>
-        </div>
-      </div>
-      <div id="list-line-bottom">${this.detailsTemplate}</div>
-    `;
-  }
-
-  private get desktopTemplate() {
-    return html`
-      <div id="list-line-left">
-        ${this.imageBlockTemplate} ${this.renderTileActions('list-detail')}
-      </div>
-      <div id="list-line-right">
-        <div id="title-line">
-          <div id="title">${this.titleTemplate}</div>
-          ${this.iconRightTemplate}
-        </div>
-        ${this.detailsTemplate}
-      </div>
-    `;
-  }
-
-  private get imageBlockTemplate() {
-    if (!this.model) return nothing;
-
-    const isCollection = this.model.mediatype === 'collection';
-    const href = this.displayValueProvider.itemPageUrl(
-      this.model.identifier,
-      isCollection,
-    );
-
-    return html`<a
-      id="image-link"
-      title=${msg(str`View ${this.model?.title}`)}
-      href=${href}
-    >
-      <image-block
-        .model=${this.model}
-        .baseImageUrl=${this.baseImageUrl}
-        .isCompactTile=${false}
-        .isListTile=${true}
-        .viewSize=${this.classSize}
-        .loggedIn=${this.loggedIn}
-        .suppressBlurring=${this.suppressBlurring}
-      >
-      </image-block>
-    </a> `;
-  }
-
-  private get detailsTemplate() {
-    return html`
-      ${this.itemLineTemplate} ${this.creatorTemplate}
-      <div id="dates-line">
-        ${this.datePublishedTemplate} ${this.dateSortByTemplate}
-        ${this.webArchivesCaptureDatesTemplate}
-      </div>
-      <div id="views-line">
-        ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}
-      </div>
-      ${this.topicsTemplate} ${this.collectionsTemplate}
-      ${this.descriptionTemplate} ${this.textSnippetsTemplate}
-      ${this.reviewBlockTemplate}
-    `;
-  }
-
-  // Data templates
-  private get iconRightTemplate() {
-    return html`
-      <a
-        id="icon-right"
-        href=${this.mediatypeURL}
-        title=${msg(str`See more: ${this.model?.mediatype}`)}
-      >
-        <tile-mediatype-icon .model=${this.model}> </tile-mediatype-icon>
-      </a>
-    `;
-  }
-
-  private get titleTemplate() {
-    if (!this.model?.title) {
-      return nothing;
-    }
-
-    // If the model has a server-specified href, use it
-    // Otherwise construct a details link using the identifier
-    return this.model?.href
-      ? html`<a href="${this.baseNavigationUrl}${this.model.href}"
-          >${this.model.title ?? this.model.identifier}</a
-        >`
-      : this.detailsLink(
-          this.model.identifier,
-          this.model.title,
-          this.model.mediatype === 'collection',
-        );
-  }
-
-  private get itemLineTemplate() {
-    const source = this.sourceTemplate;
-    const volume = this.volumeTemplate;
-    const issue = this.issueTemplate;
-    if (!source && !volume && !issue) {
-      return nothing;
-    }
-    return html` <div id="item-line">${source} ${volume} ${issue}</div> `;
-  }
-
-  private get sourceTemplate() {
-    if (!this.model?.source) {
-      return nothing;
-    }
-    return html`
-      <div id="source" class="metadata">
-        ${this.labelTemplate(msg('Source'))}
-        ${this.searchLink('source', this.model.source)}
-      </div>
-    `;
-  }
-
-  private get volumeTemplate() {
-    return this.metadataTemplate(this.model?.volume, msg('Volume'));
-  }
-
-  private get issueTemplate() {
-    return this.metadataTemplate(this.model?.issue, msg('Issue'));
-  }
-
-  private get creatorTemplate() {
-    // "Archivist since" if account
-    if (this.model?.mediatype === 'account') {
-      return html`
-        <div id="creator" class="metadata">
-          <span class="label"
-            >${this.displayValueProvider.accountLabel ?? nothing}</span
-          >
-        </div>
-      `;
-    }
-    // "Creator" if not account tile
-    if (!this.model?.creators || this.model.creators.length === 0) {
-      return nothing;
-    }
-    return html`
-      <div id="creator" class="metadata">
-        ${this.labelTemplate(msg('By'))}
-        ${join(
-          map(this.model.creators, id => this.searchLink('creator', id)),
-          ', ',
-        )}
-      </div>
-    `;
-  }
-
-  private get datePublishedTemplate() {
-    // If we're showing a date published of Jan 1 at midnight, only show the year.
-    // This is because items with only a year for their publication date are normalized to
-    // Jan 1 at midnight timestamps in the search engine documents.
-    const date: Date | undefined = this.model?.datePublished;
-    let format: DateFormat = 'long';
-    if (isFirstMillisecondOfUTCYear(date)) {
-      format = 'year-only';
-    }
-
-    return this.metadataTemplate(
-      this.getFormattedDate(date, format),
-      msg('Published'),
-    );
-  }
-
-  // Show date label/value when sorted by date type
-  // Except datePublished which is always shown
-  private get dateSortByTemplate() {
-    if (
-      this.effectiveSort &&
-      (this.effectiveSort.field === 'addeddate' ||
-        this.effectiveSort.field === 'reviewdate' ||
-        this.effectiveSort.field === 'publicdate')
-    ) {
-      return this.metadataTemplate(
-        this.getFormattedDate(this.date, 'long'),
-        this.displayValueProvider.dateLabel,
-      );
-    }
-    return nothing;
-  }
-
-  private get viewsTemplate() {
-    const isWeeklySort = this.effectiveSort?.field === 'week';
-    const viewCount = isWeeklySort
-      ? this.model?.weeklyViewCount // weekly views
-      : this.model?.viewCount; // all-time views
-    if (viewCount == null) return nothing;
-
-    // when its a search-tile, we don't have any stats to show
-    if (this.model?.mediatype === 'search') {
-      return this.metadataTemplate('(Favorited search query)', '');
-    }
-
-    return this.metadataTemplate(
-      `${formatCount(viewCount, this.formatSize)}`,
-      this.displayValueProvider.viewsLabel,
-    );
-  }
-
-  private get ratingTemplate() {
-    return this.metadataTemplate(this.model?.averageRating, msg('Avg Rating'));
-  }
-
-  private get reviewsTemplate() {
-    return this.metadataTemplate(this.model?.commentCount, msg('Reviews'));
-  }
-
-  private get topicsTemplate() {
-    if (!this.model?.subjects || this.model.subjects.length === 0) {
-      return nothing;
-    }
-    return html`
-      <div id="topics" class="metadata">
-        ${this.labelTemplate(msg('Topics'))}
-        ${join(
-          map(this.model.subjects, id => this.searchLink('subject', id)),
-          ', ',
-        )}
-      </div>
-    `;
-  }
-
-  private get collectionsTemplate() {
-    if (!this.collectionLinks || this.collectionLinks.length === 0) {
-      return nothing;
-    }
-    return html`
-      <div id="collections" class="metadata">
-        ${this.labelTemplate(msg('Collections'))}
-        ${join(this.collectionLinks, ', ')}
-      </div>
-    `;
-  }
-
-  private get descriptionTemplate() {
-    return this.metadataTemplate(
-      // Sanitize away any HTML tags and convert line breaks to spaces.
-      unsafeHTML(
-        DOMPurify.sanitize(this.model?.description?.replace(/\n/g, ' ') ?? ''),
-      ),
-      '',
-      'description',
-    );
-  }
-
-  private get reviewBlockTemplate(): TemplateResult | typeof nothing {
-    if (!this.model?.review) return nothing;
-
-    const { reviewtitle, reviewbody, stars } = this.model.review;
-    return html`
-      <review-block
-        viewsize="list"
-        title=${ifDefined(reviewtitle)}
-        body=${ifDefined(reviewbody)}
-        starRating=${ifDefined(stars)}
-      >
-      </review-block>
-    `;
-  }
-
-  private get textSnippetsTemplate(): TemplateResult | typeof nothing {
-    if (!this.hasSnippets) return nothing;
-
-    return html`<text-snippet-block
-      viewsize="list"
-      .snippets=${this.model?.snippets}
-    ></text-snippet-block>`;
-  }
-
-  private get hasSnippets(): boolean {
-    return !!this.model?.snippets?.length;
-  }
-
-  private get webArchivesCaptureDatesTemplate():
-    | TemplateResult
-    | typeof nothing {
-    if (!this.model?.captureDates || !this.model.title) return nothing;
-
-    return html`
-      <ul class="capture-dates">
-        ${map(
-          this.model.captureDates,
-          date =>
-            html`<li>
-              ${this.displayValueProvider.webArchivesCaptureLink(
-                this.model!.title,
-                date,
-              )}
-            </li>`,
-        )}
-      </ul>
-    `;
-  }
-
-  // Utility functions
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private metadataTemplate(text: any, label = '', id?: string) {
-    if (!text) return nothing;
-    return html`
-      <div id=${ifDefined(id)} class="metadata">
-        ${this.labelTemplate(label)} ${text}
-      </div>
-    `;
-  }
-
-  private labelTemplate(label: string) {
-    return html` ${label
-      ? html`<span class="label">${label}: </span>`
-      : nothing}`;
-  }
-
-  private searchLink(field: string, searchTerm: string) {
-    if (!field || !searchTerm) {
-      return nothing;
-    }
-    const query = encodeURIComponent(`${field}:"${searchTerm}"`);
-    // No whitespace after closing tag
-    // Note: single ' for href='' to wrap " in query var gets changed back by yarn format
-    return html`<a
-      href="${this.baseNavigationUrl}/search?query=${query}"
-      rel="nofollow"
-    >
-      ${DOMPurify.sanitize(searchTerm)}</a
-    >`;
-  }
-
-  private detailsLink(
-    identifier?: string,
-    text?: string,
-    isCollection = false,
-  ): TemplateResult | typeof nothing {
-    if (!identifier) return nothing;
-
-    const linkText = text ?? identifier;
-    const linkHref = this.displayValueProvider.itemPageUrl(
-      identifier,
-      isCollection,
-    );
-
-    return html`<a href=${linkHref}> ${DOMPurify.sanitize(linkText)} </a>`;
-  }
-
-  /** The URL of this item's mediatype collection, if defined. */
-  private get mediatypeURL(): string | typeof nothing {
-    // NB: baseNavigationUrl can be an empty string
-    if (this.baseNavigationUrl === undefined || !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.displayValueProvider.itemPageUrl(
-          this.model.mediatype,
-          true,
-        );
-    }
-  }
-
-  protected updated(changed: PropertyValues): void {
-    if (changed.has('model') || changed.has('collectionTitles')) {
-      this.buildCollectionLinks();
-    }
-  }
-
-  private async buildCollectionLinks() {
-    if (!this.model?.collections || this.model.collections.length === 0) {
-      return;
-    }
-
-    // Note: quirk of Lit: need to replace collectionLinks array,
-    // otherwise it will not re-render. Can't simply alter the array.
-    this.collectionLinks = [];
-    const newCollectionLinks: (TemplateResult | typeof nothing)[] = [];
-    for (const collection of this.model.collections) {
-      // Don't include favorites or collections that are meant to be suppressed
-      if (
-        !suppressedCollections[collection] &&
-        !collection.startsWith('fav-')
-      ) {
-        newCollectionLinks.push(
-          this.detailsLink(
-            collection,
-            this.collectionTitles?.get(collection) ?? collection,
-            true,
-          ),
-        );
-      }
-    }
-    this.collectionLinks = newCollectionLinks;
-  }
-
-  /*
-   * TODO: fix field names to match model in src/collection-browser.ts
-   * private get dateSortSelector()
-   * @see src/models.ts
-   */
-  private get date(): Date | undefined {
-    switch (this.effectiveSort?.field) {
-      case 'date':
-        return this.model?.datePublished;
-      case 'reviewdate':
-        return this.model?.dateReviewed;
-      case 'addeddate':
-        return this.model?.dateAdded;
-      default:
-        return this.model?.dateArchived; // publicdate
-    }
-  }
-
-  /**
-   * Returns the active sort param if one is set, or the default sort param otherwise.
-   */
-  private get effectiveSort(): SortParam | null {
-    return this.sortParam ?? this.defaultSortParam;
-  }
-
-  private get classSize(): string {
-    if (
-      this.mobileBreakpoint &&
-      this.currentWidth &&
-      this.currentWidth < this.mobileBreakpoint
-    ) {
-      return 'mobile';
-    }
-    return 'desktop';
-  }
-
-  private get formatSize(): NumberFormat {
-    if (
-      this.mobileBreakpoint &&
-      this.currentWidth &&
-      this.currentWidth < this.mobileBreakpoint
-    ) {
-      return 'short';
-    }
-    return 'long';
-  }
-
-  static get styles() {
-    return [
-      tileActionStyles,
-      css`
-        html {
-          font-size: unset;
-        }
-
-        div {
-          font-size: 14px;
-        }
-
-        div a {
-          text-decoration: none;
-        }
-
-        div a:link {
-          color: var(--ia-theme-link-color, #4b64ff);
-        }
-
-        .label {
-          font-weight: bold;
-        }
-
-        #list-line.mobile {
-          --infiniteScrollerRowGap: 20px;
-          --infiniteScrollerRowHeight: auto;
-        }
-
-        #list-line.desktop {
-          --infiniteScrollerRowGap: 30px;
-          --infiniteScrollerRowHeight: auto;
-        }
-
-        /* fields */
-        #icon-right {
-          width: 20px;
-          padding-top: 5px;
-          --iconHeight: 20px;
-          --iconWidth: 20px;
-          --iconTextAlign: right;
-          margin-top: -8px;
-          text-align: right;
-        }
-
-        #title {
-          color: #4b64ff;
-          text-decoration: none;
-          font-size: 22px;
-          font-weight: bold;
-          /* align top of text with image */
-          line-height: 25px;
-          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 {
-          line-height: 20px;
-        }
-
-        #description,
-        #creator,
-        #topics,
-        #source {
-          text-align: left;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          -webkit-box-orient: vertical;
-          display: -webkit-box;
-          word-break: break-word;
-          -webkit-line-clamp: 3; /* number of lines to show */
-          line-clamp: 3;
-
-          /*
-         * Safari doesn't always respect the line-clamping rules above,
-         * so we add this to ensure these fields still get truncated
-         */
-          max-height: 60px;
-        }
-
-        #collections {
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 3;
-          overflow: hidden;
-          overflow-wrap: anywhere;
-        }
-
-        #collections > a {
-          display: inline-block;
-        }
-
-        #icon {
-          padding-top: 5px;
-        }
-
-        #description {
-          padding-top: 10px;
-        }
-
-        /* Top level container */
-        #list-line {
-          display: flex;
-        }
-
-        #list-line.mobile {
-          flex-direction: column;
-        }
-
-        #list-line.desktop {
-          column-gap: 10px;
-        }
-
-        #list-line-top {
-          display: flex;
-          column-gap: 7px;
-        }
-
-        #list-line-bottom {
-          padding-top: 4px;
-        }
-
-        #list-line-right,
-        #list-line-top,
-        #list-line-bottom {
-          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;
-        }
-
-        /* Lines containing multiple div as row */
-        #item-line,
-        #dates-line,
-        #views-line,
-        #title-line {
-          display: flex;
-          flex-direction: row;
-          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;
-        }
-
-        .capture-dates {
-          margin: 0;
-          padding: 0;
-          list-style-type: none;
-        }
-
-        .capture-dates a:link {
-          text-decoration: none;
-          color: var(--ia-theme-link-color, #4b64ff);
-        }
-        .capture-dates a:hover {
-          text-decoration: underline;
-        }
-
-        /*
-       * Tile-list (extended) action row sits under the thumbnail in the left
-       * column. The image-block above already has its own bottom padding via
-       * the parent's row-gap, so we don't need extra spacing here.
-       */
-        .tile-actions.list-detail {
-          width: 100%;
-        }
-      `,
-    ];
-  }
-}