@internetarchive/collection-browser 4.5.1 → 4.6.0

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/src/tiles/grid/collection-tile.ts

@@ -0,0 +1,184 @@
+import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { msg } from '@lit/localize';
+import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
+import { formatUnitSize } from '../../utils/format-unit-size';
+import { baseTileStyles } from './styles/tile-grid-shared-styles';
+import { BaseTileComponent } from '../base-tile-component';
+import { LayoutType } from '../models';
+import '../image-block';
+
+@customElement('collection-tile')
+export class CollectionTile extends BaseTileComponent {
+  /*
+   * 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;
+   *  - suppressBlurring = false;
+   *  - useLocalTime = false;
+   */
+
+  @property({ type: Boolean }) showInfoButton = false;
+
+  @property({ type: String }) layoutType: LayoutType = 'default';
+
+  render() {
+    const containerClasses = classMap({
+      container: true,
+      minimal: this.layoutType === 'minimal',
+    });
+
+    return html`
+      <div class=${containerClasses}>
+        ${this.infoButtonTemplate}
+        <div class="tile-details">
+          <div class="item-info">
+            ${this.getImageBlockTemplate} ${this.getTitleTemplate}
+          </div>
+        </div>
+
+        ${this.getTileStatsTemplate}
+      </div>
+    `;
+  }
+
+  private get getImageBlockTemplate(): TemplateResult {
+    return html`
+      <image-block
+        .model=${this.model}
+        .baseImageUrl=${this.baseImageUrl}
+        .viewSize=${'grid'}
+        .suppressBlurring=${this.suppressBlurring}
+      >
+      </image-block>
+    `;
+  }
+
+  private get getTitleTemplate() {
+    return html`<div id="title">
+      <h3 class="truncated">${this.model?.title}</h3>
+    </div>`;
+  }
+
+  private get getTileStatsTemplate() {
+    return html`
+      <div id="item-stats">
+        <div id="item-mediatype">${collectionIcon}</div>
+
+        <div id="stats-row">
+          ${this.getItemsTemplate} ${this.getSizeTemplate}
+        </div>
+      </div>
+    `;
+  }
+
+  private get getItemsTemplate() {
+    const collectionItems = this.model?.itemCount?.toLocaleString();
+
+    return html`<span id="item-count"
+      >${collectionItems} item${Number(collectionItems) !== 1 ? 's' : ''}</span
+    >`;
+  }
+
+  private get getSizeTemplate() {
+    const collectionSize = this.model?.collectionSize ?? 0;
+
+    return collectionSize
+      ? html`<span id="item-size">${formatUnitSize(collectionSize, 1)}</span>`
+      : ``;
+  }
+
+  private get infoButtonTemplate(): TemplateResult | typeof nothing {
+    // &#9432; is an information icon
+    return this.showInfoButton
+      ? html`<button class="info-button" @click=${this.infoButtonPressed}>
+          &#9432;
+          <span class="sr-only">${msg('More info')}</span>
+        </button>`
+      : nothing;
+  }
+
+  private infoButtonPressed(e: PointerEvent) {
+    e.preventDefault();
+    const event = new CustomEvent<{ x: number; y: number }>(
+      'infoButtonPressed',
+      { detail: { x: e.clientX, y: e.clientY } },
+    );
+    this.dispatchEvent(event);
+  }
+
+  static get styles(): CSSResultGroup {
+    const tileBorderColor = css`var(--tileBorderColor, #555555)`;
+    const tileBackgroundColor = css`var(--tileBackgroundColor, #666666)`;
+    const whiteColor = css`#fff`;
+
+    return [
+      baseTileStyles,
+      css`
+        .container {
+          background-color: ${tileBackgroundColor};
+          border: 1px solid ${tileBorderColor};
+        }
+
+        .item-info {
+          flex-grow: initial;
+        }
+
+        h4.truncated,
+        h3.truncated {
+          color: ${whiteColor};
+        }
+
+        #item-mediatype svg {
+          filter: invert(100%);
+          height: 2.5rem;
+          align-items: baseline;
+        }
+
+        .container:hover > #title {
+          text-decoration: underline;
+        }
+
+        /* this is a workaround for Safari 15 where the hover effects are not working */
+        image-block:hover > #title {
+          text-decoration: underline;
+        }
+
+        #item-stats {
+          display: flex;
+          padding: 0 5px 5px;
+          align-items: center;
+        }
+
+        #stats-row {
+          display: flex;
+          align-items: baseline;
+          color: ${whiteColor};
+          flex-direction: column;
+          margin-left: 10px;
+        }
+
+        .minimal #item-stats {
+          display: none;
+        }
+
+        .minimal .truncated {
+          -webkit-line-clamp: initial;
+        }
+
+        .minimal .item-info {
+          padding-bottom: 5px;
+        }
+      `,
+    ];
+  }
+}

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/src/tiles/grid/item-tile.ts

@@ -0,0 +1,347 @@
+import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { map } from 'lit/directives/map.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { msg } from '@lit/localize';
+
+import type { SortParam } from '@internetarchive/search-service';
+import type { DateFormat } from '../../utils/format-date';
+import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
+import { BaseTileComponent } from '../base-tile-component';
+import { baseTileStyles } from './styles/tile-grid-shared-styles';
+import { LayoutType } from '../models';
+
+import '../image-block';
+import '../review-block';
+import '../text-snippet-block';
+import '../item-image';
+import '../tile-mediatype-icon';
+import './tile-stats';
+
+@customElement('item-tile')
+export class ItemTile 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: Boolean }) showInfoButton = false;
+
+  @property({ type: Boolean }) showTvClips = false;
+
+  @property({ type: String }) layoutType: LayoutType = 'default';
+
+  render() {
+    const itemTitle = this.model?.title;
+    const containerClasses = classMap({
+      container: true,
+      simple: this.layoutType !== 'default',
+      'stats-only': this.layoutType === 'stats-only',
+      'snippets-only': this.layoutType === 'snippets-only',
+      minimal: this.layoutType === 'minimal',
+    });
+
+    return html`
+      <div class=${containerClasses}>
+        ${this.infoButtonTemplate}
+        <div class="tile-details">
+          <div class="item-info">
+            ${this.imageBlockTemplate}
+
+            <div id="title">
+              <h3 class="truncated" title=${ifDefined(itemTitle)}>
+                ${itemTitle}
+              </h3>
+            </div>
+
+            ${this.volumeIssueTemplate}
+            ${this.isSortedByDate
+              ? this.sortedDateInfoTemplate
+              : this.creatorTemplate}
+            ${this.webArchivesCaptureDatesTemplate} ${this.textSnippetsTemplate}
+            ${this.reviewBlockTemplate}
+          </div>
+
+          ${this.tileStatsTemplate}
+        </div>
+      </div>
+    `;
+  }
+
+  /**
+   * Templates
+   */
+  private get creatorTemplate(): TemplateResult | typeof nothing {
+    const displayedCreator =
+      this.displayValueProvider.firstCreatorMatchingFilter;
+    if (!displayedCreator) return nothing;
+
+    return html`
+      <div class="created-by">
+        <span class="truncated" title=${displayedCreator}>
+          by&nbsp;${displayedCreator}
+        </span>
+      </div>
+    `;
+  }
+
+  private get imageBlockTemplate(): TemplateResult {
+    return html`
+      <image-block
+        .model=${this.model}
+        .baseImageUrl=${this.baseImageUrl}
+        .loggedIn=${this.loggedIn}
+        .suppressBlurring=${this.suppressBlurring}
+        .isCompactTile=${false}
+        .isListTile=${false}
+        .viewSize=${'grid'}
+      >
+      </image-block>
+    `;
+  }
+
+  private get sortedDateInfoTemplate() {
+    let sortedValue;
+    let format: DateFormat = 'long';
+    switch (this.effectiveSort?.field) {
+      case 'date': {
+        const datePublished = this.model?.datePublished;
+        sortedValue = { field: 'published', value: datePublished };
+        if (isFirstMillisecondOfUTCYear(datePublished)) {
+          format = 'year-only';
+        }
+        break;
+      }
+      case 'reviewdate':
+        sortedValue = { field: 'reviewed', value: this.model?.dateReviewed };
+        break;
+      case 'addeddate':
+        sortedValue = { field: 'added', value: this.model?.dateAdded };
+        break;
+      case 'publicdate':
+        sortedValue = { field: 'archived', value: this.model?.dateArchived };
+        break;
+      default:
+        break;
+    }
+
+    if (!sortedValue?.value) {
+      return nothing;
+    }
+
+    const formattedDate = this.getFormattedDate(sortedValue.value, format);
+    return html`
+      <div class="date-sorted-by truncated">
+        <span>${sortedValue.field} ${formattedDate}</span>
+      </div>
+    `;
+  }
+
+  private get infoButtonTemplate(): TemplateResult | typeof nothing {
+    // &#9432; is an information icon
+    return this.showInfoButton
+      ? html`<button class="info-button" @click=${this.infoButtonPressed}>
+          &#9432;
+          <span class="sr-only">${msg('More info')}</span>
+        </button>`
+      : nothing;
+  }
+
+  private get reviewBlockTemplate(): TemplateResult | typeof nothing {
+    if (!this.model?.review) return nothing;
+
+    const { reviewtitle, reviewbody, stars } = this.model.review;
+    return html`
+      <review-block
+        viewsize="grid"
+        title=${ifDefined(reviewtitle)}
+        body=${ifDefined(reviewbody)}
+        starRating=${ifDefined(stars)}
+      >
+      </review-block>
+    `;
+  }
+
+  private get textSnippetsTemplate(): TemplateResult | typeof nothing {
+    if (!this.hasSnippets) return nothing;
+    if (['stats-only', 'minimal'].includes(this.layoutType)) {
+      return nothing;
+    }
+
+    return html`
+      <text-snippet-block viewsize="grid" .snippets=${this.model?.snippets}>
+      </text-snippet-block>
+    `;
+  }
+
+  private get volumeIssueTemplate(): TemplateResult | typeof nothing {
+    if (!this.model?.volume || !this.model?.issue) return nothing;
+
+    return html`
+      <div class="volume-issue">
+        <span class="truncated" title="volume|issue">
+          Volume&nbsp;${this.model?.volume}, Issue&nbsp;${this.model?.issue}
+        </span>
+      </div>
+    `;
+  }
+
+  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>
+    `;
+  }
+
+  /**
+   * Template for the stats row along the bottom of the tile.
+   */
+  private get tileStatsTemplate(): TemplateResult | typeof nothing {
+    if (['snippets-only', 'minimal'].includes(this.layoutType)) {
+      return nothing;
+    }
+
+    const effectiveSort = this.sortParam ?? this.defaultSortParam;
+    const [viewCount, viewLabel] =
+      effectiveSort?.field === 'week'
+        ? [this.model?.weeklyViewCount, 'weekly views']
+        : [this.model?.viewCount, 'all-time views'];
+
+    return html`
+      <tile-stats
+        .model=${this.model}
+        .mediatype=${this.model?.mediatype}
+        .viewCount=${viewCount}
+        .viewLabel=${viewLabel}
+        .favCount=${this.model?.favCount}
+        .commentCount=${this.model?.commentCount}
+        .tvClipCount=${this.model?.tvClipCount}
+        .showTvClips=${this.showTvClips}
+      >
+      </tile-stats>
+    `;
+  }
+
+  private get isSortedByDate(): boolean {
+    return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(
+      this.effectiveSort?.field as string,
+    );
+  }
+
+  /**
+   * 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 hasSnippets(): boolean {
+    return !!this.model?.snippets?.length;
+  }
+
+  private infoButtonPressed(e: PointerEvent): void {
+    e.preventDefault();
+    const event = new CustomEvent<{ x: number; y: number }>(
+      'infoButtonPressed',
+      { detail: { x: e.clientX, y: e.clientY } },
+    );
+    this.dispatchEvent(event);
+  }
+
+  /**
+   * CSS
+   */
+  static get styles(): CSSResultGroup {
+    const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;
+
+    return [
+      baseTileStyles,
+      css`
+        a:link {
+          text-decoration: none;
+          color: var(--ia-theme-link-color, #4b64ff);
+        }
+        a:hover {
+          text-decoration: underline;
+        }
+
+        .container {
+          border: 1px solid ${tileBorderColor};
+        }
+
+        .simple #title > .truncated {
+          -webkit-line-clamp: 2;
+        }
+
+        .simple .created-by > .truncated,
+        .simple .date-sorted-by > .truncated,
+        .simple .volume-issue > .truncated {
+          -webkit-line-clamp: 1;
+        }
+
+        .simple.snippets-only .item-info,
+        .simple.minimal .item-info {
+          padding-bottom: 5px;
+        }
+
+        .simple.snippets-only text-snippet-block {
+          margin-top: auto; /* Force the snippets to the bottom of the tile */
+        }
+
+        .capture-dates {
+          margin: 0;
+          padding: 0 5px;
+          list-style-type: none;
+        }
+
+        review-block,
+        text-snippet-block {
+          --containerLeftMargin: 5px;
+          --containerTopMargin: 5px;
+        }
+
+        /**
+         * iOS Safari long-press on tiles (to bring up hover pane)
+         * gets messy without this
+         */
+        @media screen and (pointer: coarse) and (hover: none) {
+          .container {
+            -webkit-touch-callout: none;
+          }
+
+          .truncated {
+            -webkit-touch-callout: default;
+          }
+        }
+      `,
+    ];
+  }
+}

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/src/tiles/grid/search-tile.ts

@@ -0,0 +1,90 @@
+import { css, CSSResultGroup, html, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { baseTileStyles } from './styles/tile-grid-shared-styles';
+import { BaseTileComponent } from '../base-tile-component';
+import '../image-block';
+
+@customElement('search-tile')
+export class SearchTile extends BaseTileComponent {
+  /*
+   * 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;
+   *  - suppressBlurring = false;
+   */
+
+  @property({ type: Boolean }) showInfoButton = false;
+
+  render() {
+    return html`
+      <div class="container">
+        <div class="tile-details">
+          <div class="item-info">
+            ${this.getImageBlockTemplate} ${this.getTitleTemplate}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private get getImageBlockTemplate(): TemplateResult {
+    return html`
+      <image-block
+        .model=${this.model}
+        .baseImageUrl=${this.baseImageUrl}
+        .viewSize=${'grid'}
+        .suppressBlurring=${this.suppressBlurring}
+      >
+      </image-block>
+    `;
+  }
+
+  private get getTitleTemplate() {
+    return html`<div id="title">
+      <h3 class="truncated">${this.model?.title}</h3>
+    </div>`;
+  }
+
+  static get styles(): CSSResultGroup {
+    const tileBorderColor = css`var(--tileBorderColor, #555555)`;
+    const tileBackgroundColor = css`var(--tileBackgroundColor, #666666)`;
+    const whiteColor = css`#fff`;
+
+    return [
+      baseTileStyles,
+      css`
+        .container {
+          background-color: ${tileBackgroundColor};
+          border: 1px solid ${tileBorderColor};
+        }
+
+        .item-info {
+          flex-grow: initial;
+        }
+
+        h4.truncated,
+        h3.truncated {
+          color: ${whiteColor};
+          -webkit-line-clamp: 4;
+        }
+
+        .container:hover > #title {
+          text-decoration: underline;
+        }
+
+        /* this is a workaround for Safari 15 where the hover effects are not working */
+        image-block:hover > #title {
+          text-decoration: underline;
+        }
+      `,
+    ];
+  }
+}