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

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

@@ -1,278 +0,0 @@
-import { css, html, nothing } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import DOMPurify from 'dompurify';
-import type { SortParam } from '@internetarchive/search-service';
-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 '../tile-mediatype-icon';
-
-@customElement('tile-list-compact')
-export class TileListCompact 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;
-   */
-
-  render() {
-    const hasActions = this.tileActions.length > 0;
-    const lineClasses = classMap({
-      mobile: this.classSize === 'mobile',
-      desktop: this.classSize === 'desktop',
-      'has-actions': hasActions,
-    });
-
-    return html`
-      <div id="list-line" class=${lineClasses}>
-        <image-block
-          .model=${this.model}
-          .baseImageUrl=${this.baseImageUrl}
-          .isCompactTile=${true}
-          .isListTile=${true}
-          .viewSize=${this.classSize}
-          .loggedIn=${this.loggedIn}
-          .suppressBlurring=${this.suppressBlurring}
-        >
-        </image-block>
-        ${hasActions
-          ? html`<div id="actions">
-              ${this.renderTileActions('list-compact')}
-            </div>`
-          : nothing}
-        <a href=${this.href} id="title"
-          >${DOMPurify.sanitize(this.model?.title ?? '')}</a
-        >
-        <div id="creator">
-          ${this.model?.mediatype === 'account'
-            ? this.displayValueProvider.accountLabel
-            : this.creator}
-        </div>
-        <div id="date">
-          ${this.getFormattedDate(this.date, this.dateFormatSize)}
-        </div>
-        <div id="icon">
-          <tile-mediatype-icon .model=${this.model}> </tile-mediatype-icon>
-        </div>
-        <div id="views">${formatCount(this.views ?? 0, this.formatSize)}</div>
-      </div>
-    `;
-  }
-
-  private get href(): string | typeof nothing {
-    if (!this.model?.identifier || this.baseNavigationUrl == null)
-      return nothing;
-
-    // Use the server-specified href if available.
-    // Otherwise, construct a details page URL from the item identifier.
-    if (this.model.href) {
-      return `${this.baseNavigationUrl}${this.model.href}`;
-    }
-
-    return this.displayValueProvider.itemPageUrl(
-      this.model.identifier,
-      this.model.mediatype === 'collection',
-    );
-  }
-
-  private get creator(): string | typeof nothing {
-    return this.displayValueProvider.firstCreatorMatchingFilter ?? nothing;
-  }
-
-  /*
-   * TODO: fix field names to match model in src/collection-browser.ts
-   * private get dateSortSelector()
-   * @see src/models.ts
-   */
-  private get date(): Date | undefined {
-    // Note on 'publicdate' vs. 'date':
-    // The search engine metadata uses 'publicdate' as the key for the date the item
-    // was created on archive.org, which in the UI is referred to as "Date Archived".
-    // In contrast, the search engine metadata uses 'date' to refer to the actual
-    // publication date of the underlying media ("Date Published" in the UI).
-    // Refer to the full metadata schema for more info.
-    switch (this.effectiveSort?.field) {
-      case 'publicdate':
-        return this.model?.dateArchived;
-      case 'reviewdate':
-        return this.model?.dateReviewed;
-      case 'addeddate':
-        return this.model?.dateAdded;
-      default:
-        return this.model?.datePublished;
-    }
-  }
-
-  private get views(): number | undefined {
-    return this.effectiveSort?.field === 'week'
-      ? this.model?.weeklyViewCount // weekly views
-      : this.model?.viewCount; // all-time views
-  }
-
-  /**
-   * 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 dateFormatSize(): DateFormat {
-    // 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.
-    if (
-      (!this.isSortedByDate || this.effectiveSort?.field === 'date') && // Any sort except dates that aren't published date
-      isFirstMillisecondOfUTCYear(this.model?.datePublished)
-    ) {
-      return 'year-only';
-    }
-    return this.formatSize;
-  }
-
-  private get formatSize(): NumberFormat {
-    if (
-      this.mobileBreakpoint &&
-      this.currentWidth &&
-      this.currentWidth < this.mobileBreakpoint
-    ) {
-      return 'short';
-    }
-    return 'long';
-  }
-
-  private get isSortedByDate(): boolean {
-    return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(
-      this.effectiveSort?.field as string,
-    );
-  }
-
-  static get styles() {
-    return [
-      tileActionStyles,
-      css`
-        html {
-          font-size: unset;
-        }
-
-        div {
-          font-size: 14px;
-        }
-
-        #list-line {
-          display: grid;
-          column-gap: 10px;
-          border-top: 1px solid #ddd;
-          align-items: center;
-          line-height: 20px;
-          padding-top: 5px;
-          margin-bottom: -5px;
-        }
-
-        #list-line.mobile {
-          grid-template-columns: 36px 3fr 2fr 68px 35px;
-        }
-
-        #list-line.desktop {
-          grid-template-columns: 51px 3fr 2fr 95px 30px 115px;
-        }
-
-        /*
-         * When tile actions are present, insert an extra column for them
-         * between the thumbnail and the title.
-         */
-        #list-line.mobile.has-actions {
-          grid-template-columns:
-            36px var(--tileActionColumnWidth, 90px)
-            3fr 2fr 68px 35px;
-        }
-
-        #list-line.desktop.has-actions {
-          grid-template-columns:
-            51px var(--tileActionColumnWidth, 100px)
-            3fr 2fr 95px 30px 115px;
-        }
-
-        #actions {
-          /* The flex container inside is what holds the action buttons */
-          display: flex;
-        }
-
-        #list-line:hover #title {
-          text-decoration: underline;
-        }
-
-        #title {
-          text-decoration: none;
-        }
-
-        #title:link {
-          color: var(--ia-theme-link-color, #4b64ff);
-        }
-
-        #title,
-        #creator {
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-        }
-
-        #icon {
-          margin-left: 2px;
-        }
-
-        #views {
-          text-align: right;
-          padding-right: 8px;
-        }
-
-        .mobile #views {
-          display: none;
-        }
-
-        .mobile tile-mediatype-icon {
-          --iconHeight: 14px;
-          --iconWidth: 14px;
-        }
-
-        .desktop #icon {
-          --iconHeight: 20px;
-          --iconWidth: 20px;
-        }
-
-        item-image {
-          --imgHeight: 100%;
-          --imgWidth: 100%;
-        }
-      `,
-    ];
-  }
-}