@internetarchive/collection-browser 0.0.1-alpha.1

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

@@ -0,0 +1,254 @@
+import { css, CSSResultGroup, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { TileModel } from '../../models';
+import { formatCount } from '../../utils/format-count';
+
+import '../../mediatype-icon';
+
+import { favoriteFilledIcon } from './icons/favorite-filled';
+import { reviewsIcon } from './icons/reviews';
+import viewsIcon from './icons/views';
+
+@customElement('item-tile')
+export class ItemTile extends LitElement {
+  @property({ type: Object }) model?: TileModel;
+
+  get renderItemImageView() {
+    const imgSrcUrl = `https://archive.org/services/img/${this.model?.identifier}`;
+    const containsDeemphasize = this.model?.collection.includes('deemphasize');
+    return !containsDeemphasize
+      ? html`<div
+          id="item-image"
+          style="background-image:url(${imgSrcUrl})"
+        ></div>`
+      : html`<div id="item-image-box">
+          <div
+            id="item-image-deemphasize"
+            style="background-image:url(${imgSrcUrl})"
+          ></div>
+          <div class="tile-action no-preview">Content may be inappropriate</div>
+        </div>`;
+  }
+
+  render() {
+    const itemTitle = this.model?.title || '';
+    const itemCreator = this.model?.creator || '-';
+
+    return html`
+      <div id="container">
+        <div id="title-image-container">
+          <p id="item-title" title=${itemTitle}>
+            ${this.model?.title}
+          </p>
+          <div id="item-image-container">
+            ${this.renderItemImageView}
+          </div>
+          <div class="item-creator">
+            <span id="text-by">By:</span>
+            <span>${itemCreator}</span>
+          </div>
+        </div>
+        <div id="item-stats-container">
+          <div id="stats-holder">
+            <div class="col">
+              <mediatype-icon mediatype="${
+                this.model?.mediatype
+              }" showText="true">
+            </div>
+            <div class="col">
+              ${viewsIcon}
+              <p class="status-text">${formatCount(
+                this.model?.viewCount,
+                'short',
+                'short'
+              )}</p>
+            </div>
+            <div class="col">
+              ${favoriteFilledIcon}
+              <p class="status-text">${formatCount(
+                this.model?.itemCount,
+                'short',
+                'short'
+              )}</p>
+            </div>
+            <div class="col">
+              ${reviewsIcon}
+              <p class="status-text">${formatCount(
+                this.model?.favCount,
+                'short',
+                'short'
+              )}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    const cornerRadiusCss = css`var(--collectionTileCornerRadius, 4px)`;
+
+    return css`
+      #container {
+        background-color: #ffffff;
+        border-radius: ${cornerRadiusCss};
+        box-shadow: 1px 1px 2px 0px;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      #title-image-container {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        padding: 0.5rem;
+      }
+
+      #item-title {
+        font-weight: bold;
+        color: #000000;
+        font-size: 1.6rem;
+        text-align: center;
+        margin-top: 0rem;
+        margin-bottom: 0.5rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        line-height: 2rem;
+        height: 4rem;
+      }
+
+      #item-image-container {
+        display: flex;
+        justify-content: center;
+        flex: 1;
+      }
+
+      #item-image {
+        width: 16rem;
+        height: 16rem;
+        border-radius: 0.8rem;
+        overflow: hidden;
+        box-shadow: 1px 1px 2px 0px;
+        object-fit: cover;
+        background-position: center;
+        background-size: cover;
+      }
+
+      #item-image-box {
+        width: 16rem;
+        height: 16rem;
+        border-radius: 0.8rem;
+        overflow: hidden;
+        box-shadow: 1px 1px 2px 0px;
+        border: 5px solid #0000000;
+        position: relative;
+        display: flex;
+      }
+
+      #item-image-deemphasize {
+        width: 16rem;
+        height: 16rem;
+        object-fit: cover;
+        background-position: center;
+        background-size: cover;
+        filter: blur(15px);
+        position: absolute;
+        z-index: 1;
+      }
+
+      .tile-action {
+        border: 2px solid currentColor;
+        border-radius: 1px;
+        padding: 5px;
+        font-weight: 500;
+        width: auto;
+        position: absolute;
+        z-index: 2;
+        display: flex;
+        top: 5.5rem;
+      }
+
+      .no-preview {
+        background-color: #fffecb;
+        color: #000000;
+        font-size: 1.4rem;
+        line-height: 2rem;
+        text-align: center;
+      }
+
+      .hidden {
+        display: none;
+      }
+
+      #container:hover > #title-image-container > .item-title {
+        text-decoration: underline;
+      }
+
+      /** this is a workaround for Safari 15 where the hover effects are not working */
+      #title-image-container:hover > #item-title {
+        text-decoration: underline;
+      }
+
+      #container:hover > #item-title {
+        background-color: #fcfcfc;
+      }
+
+      /**  creator **/
+      .item-creator {
+        color: #000000;
+        display: -webkit-box;
+        font-size: 1.4rem;
+        height: 3rem;
+        margin: 0px;
+        overflow: hidden;
+        padding: 0.5rem;
+        text-align: center;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+
+      #text-by {
+        font-weight: bold;
+      }
+
+      #item-stats-container {
+        align-items: center;
+        display: flex;
+        height: 5.5rem;
+        padding-left: 1rem;
+        padding-right: 0.5rem;
+      }
+
+      #stats-holder {
+        align-items: center;
+        display: flex;
+        flex: 1;
+        justify-content: space-evenly;
+        text-align: center;
+        width: 100%;
+      }
+
+      svg {
+        height: 10px;
+        width: 10px;
+      }
+
+      .status-text {
+        font-size: 14px;
+        color: #2c2c2c;
+        margin: auto;
+        display: block;
+        text-align: center;
+      }
+
+      .col {
+        width: 25%;
+      }
+    `;
+  }
+}

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

@@ -0,0 +1,227 @@
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { SortParam } from '@internetarchive/search-service';
+import DOMPurify from 'dompurify';
+// import * as HtmlSanitizer from '@jitbit/htmlsanitizer';
+// import sanitizeHtml from 'sanitize-html';
+// - error
+// import DOMPurify from 'dompurify';
+// - no types
+import { CollectionDisplayMode, TileModel } from '../../models';
+import { formatCount, NumberFormat } from '../../utils/format-count';
+import { formatDate, DateFormat } from '../../utils/format-date';
+import '../../mediatype-icon';
+
+/*
+at 750 creator, title trimmed
+at 530
+*/
+
+@customElement('tile-list')
+export class TileList extends LitElement {
+  @property({ type: Object }) model?: TileModel;
+
+  @property({ type: String }) baseNavigationUrl?: string;
+
+  @property({ type: Number }) currentWidth?: number;
+
+  @property({ type: Number }) currentHeight?: number;
+
+  @property({ type: Object }) sortParam?: SortParam;
+
+  @property({ type: String }) displayMode: CollectionDisplayMode =
+    'list-compact';
+
+  // private HtmlSanitizer = HtmlSanitizer();
+
+  render() {
+    return html`
+      <div id="list-line" class="${this.classSize}">
+        <div id="views">
+          ${formatCount(this.model?.viewCount ?? 0, this.formatSize)}
+        </div>
+        <div id="title">${this.model?.title}</div>
+        <div id="date">${formatDate(this.date, this.formatSize)}</div>
+        <div id="creator">${this.model?.creator}</div>
+        <div id="icon">
+          <mediatype-icon .mediatype=${this.model?.mediatype}></mediatype-icon>
+        </div>
+      </div>
+      ${this.displayMode === 'list-detail' ? this.detail() : html``}
+    `;
+  }
+
+  private detail() {
+    const descriptionHtml = this.description();
+    const topicHtml = this.topic();
+    const sourceHtml = this.source();
+
+    if (descriptionHtml || topicHtml || sourceHtml) {
+      return html`
+        <div id="list-detail" class="${this.classSize}">
+          <div></div>
+          <div id="details">${descriptionHtml} ${topicHtml} ${sourceHtml}</div>
+          <div></div>
+        </div>
+      `;
+    }
+    return html``;
+  }
+
+  private description() {
+    if (this.model?.description) {
+      const description = DOMPurify.sanitize(`${this.model?.description}`);
+      return html` <div id="description">${description}</div> `;
+    }
+    return html``;
+  }
+
+  private topic() {
+    if (this.model?.subject) {
+      return html` <div id="topic">Topic: ${this.model?.subject}</div> `;
+    }
+    return html``;
+  }
+
+  private source() {
+    if (this.model?.source) {
+      return html` <div id="source">Source: ${this.model?.source}</div> `;
+    }
+    return html``;
+  }
+
+  /*
+   * 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.sortParam?.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
+    }
+  }
+
+  private get classSize(): string {
+    return (this.currentWidth ?? 531) < 530 ? 'mobile' : 'desktop';
+  }
+
+  private get formatSize(): DateFormat | NumberFormat {
+    return (this.currentWidth ?? 531) < 530 ? 'short' : 'long';
+  }
+
+  static get styles() {
+    return css`
+      .mobile div {
+        font-size: 11px;
+      }
+      .desktop div {
+        font-size: 14px;
+      }
+
+      /* fields */
+
+      #title {
+        color: #4b64ff;
+        text-decoration: none;
+      }
+
+      #title,
+      #creator,
+      #topic,
+      #source {
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+
+      #title,
+      #creator {
+        white-space: nowrap;
+      }
+
+      #views,
+      #date {
+        text-align: right;
+      }
+
+      #views,
+      #details {
+        color: #767676;
+      }
+
+      #icon {
+        padding-right: 6px;
+      }
+
+      .desktop #description,
+      .desktop #topic,
+      .desktop #source {
+        font-size: 12px;
+      }
+
+      .mobile #description,
+      .mobile #topic,
+      .mobile #source {
+        font-size: 11px;
+      }
+
+      #description {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        display: -webkit-box;
+        word-break: break-word;
+        -webkit-line-clamp: 3; /* number of lines to show */
+        line-clamp: 3;
+        -webkit-box-orient: vertical;
+        text-align: left;
+      }
+
+      /* list-line */
+
+      #list-line {
+        display: grid;
+        column-gap: 10px;
+        line-height: 1.42857143;
+        border-top: 1px solid #ddd !important;
+        padding-top: 5px;
+        align-items: center;
+      }
+
+      #list-line.mobile {
+        grid-template-columns: 33px 3fr 30px 2fr 29.5px;
+      }
+      #list-line.desktop {
+        grid-template-columns: 60px 3fr 90px 2fr 29.5px;
+      }
+
+      #list-line:hover #title {
+        text-decoration: underline;
+      }
+
+      /* list-detail */
+
+      #list-detail {
+        display: grid;
+        column-gap: 10px;
+        line-height: 1.42857143;
+        align-items: center;
+      }
+
+      #list-detail.mobile {
+        grid-template-columns: 33px auto 29.5px;
+      }
+
+      #list-detail.desktop {
+        grid-template-columns: 60px auto 29.5px;
+      }
+    `;
+  }
+}

package/src/tiles/loading-tile.ts

@@ -0,0 +1,70 @@
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('loading-tile')
+export class LoadingTile extends LitElement {
+  render() {
+    return html` <div id="container"></div> `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        height: 100%;
+      }
+
+      #container {
+        background: linear-gradient(
+          to right,
+          rgba(25, 69, 154, 0.1),
+          rgb(105, 161, 234, 0.2)
+        );
+        background-size: 400% 400%;
+
+        -webkit-animation: AnimationName 4s ease infinite;
+        -moz-animation: AnimationName 4s ease infinite;
+        animation: AnimationName 4s ease infinite;
+
+        display: block;
+        height: 100%;
+      }
+
+      @-webkit-keyframes AnimationName {
+        0% {
+          background-position: 0% 50%;
+        }
+        50% {
+          background-position: 100% 50%;
+        }
+        100% {
+          background-position: 0% 50%;
+        }
+      }
+
+      @-moz-keyframes AnimationName {
+        0% {
+          background-position: 0% 50%;
+        }
+        50% {
+          background-position: 100% 50%;
+        }
+        100% {
+          background-position: 0% 50%;
+        }
+      }
+
+      @keyframes AnimationName {
+        0% {
+          background-position: 0% 50%;
+        }
+        50% {
+          background-position: 100% 50%;
+        }
+        100% {
+          background-position: 0% 50%;
+        }
+      }
+    `;
+  }
+}

package/src/tiles/tile-dispatcher.ts

@@ -0,0 +1,160 @@
+import { css, html, LitElement, nothing, PropertyValues } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import {
+  SharedResizeObserverInterface,
+  SharedResizeObserverResizeHandlerInterface,
+} from '@internetarchive/shared-resize-observer';
+import { SortParam } from '@internetarchive/search-service';
+import type { CollectionDisplayMode, TileModel } from '../models';
+import './grid/collection-tile';
+import './grid/item-tile';
+import './grid/account-tile';
+import './list/tile-list';
+
+@customElement('tile-dispatcher')
+export class TileDispatcher
+  extends LitElement
+  implements SharedResizeObserverResizeHandlerInterface
+{
+  @property({ type: String }) displayMode: CollectionDisplayMode = 'grid';
+
+  @property({ type: Object }) model?: TileModel;
+
+  @property({ type: String }) baseNavigationUrl?: string;
+
+  @property({ type: Boolean }) showDeleteButton = false;
+
+  @property({ type: Number }) currentWidth?: number;
+
+  @property({ type: Number }) currentHeight?: number;
+
+  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;
+
+  @property({ type: Object }) sortParam?: SortParam;
+
+  @query('#container') private container!: HTMLDivElement;
+
+  render() {
+    return html`
+      <div id="container">
+        ${this.showDeleteButton
+          ? html`<button id="delete-button">X</button>`
+          : nothing}
+        <a
+          href="${this.baseNavigationUrl}/details/${this.model?.identifier}"
+          title=${ifDefined(this.model?.title)}
+        >
+          ${this.tile}
+        </a>
+      </div>
+    `;
+  }
+
+  handleResize(entry: ResizeObserverEntry): void {
+    this.currentWidth = entry.contentRect.width;
+    this.currentHeight = entry.contentRect.height;
+  }
+
+  disconnectedCallback(): void {
+    this.stopResizeObservation(this.resizeObserver);
+  }
+
+  private stopResizeObservation(observer?: SharedResizeObserverInterface) {
+    observer?.removeObserver({
+      handler: this,
+      target: this.container,
+    });
+  }
+
+  private startResizeObservation() {
+    this.stopResizeObservation(this.resizeObserver);
+    this.resizeObserver?.addObserver({
+      handler: this,
+      target: this.container,
+    });
+  }
+
+  updated(props: PropertyValues) {
+    if (props.has('resizeObserver')) {
+      const previousObserver = props.get(
+        'resizeObserver'
+      ) as SharedResizeObserverInterface;
+      this.stopResizeObservation(previousObserver);
+      this.startResizeObservation();
+    }
+  }
+
+  private get tile() {
+    const { model, baseNavigationUrl, currentWidth, currentHeight, sortParam } =
+      this;
+
+    if (!model) return nothing;
+
+    switch (this.displayMode) {
+      case 'grid':
+        switch (model.mediatype) {
+          case 'collection':
+            return html`<collection-tile
+              .model=${model}
+              .currentWidth=${currentWidth}
+              .currentHeight=${currentHeight}
+            >
+            </collection-tile>`;
+          case 'account':
+            return html`<account-tile
+              .model=${model}
+              .currentWidth=${currentWidth}
+              .currentHeight=${currentHeight}
+            ></account-tile>`;
+          default:
+            return html`<item-tile
+              .model=${model}
+              .currentWidth=${currentWidth}
+              .currentHeight=${currentHeight}
+            ></item-tile>`;
+        }
+      case 'list-compact':
+      case 'list-detail':
+        return html`<tile-list
+          .model=${model}
+          .currentWidth=${currentWidth}
+          .currentHeight=${currentHeight}
+          .baseNavigationUrl=${baseNavigationUrl}
+          .sortParam=${sortParam}
+          .displayMode=${this.displayMode}
+        ></tile-list>`;
+      default:
+        return nothing;
+    }
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        height: 100%;
+      }
+
+      #container {
+        height: 100%;
+      }
+
+      #delete-button {
+        float: right;
+      }
+
+      a {
+        display: block;
+        height: 100%;
+        color: unset;
+        text-decoration: none;
+      }
+
+      a :first-child {
+        display: block;
+        height: 100%;
+      }
+    `;
+  }
+}