@internetarchive/collection-browser 0.0.1-alpha.2 → 0.0.1-alpha.22

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

@@ -1,10 +1,9 @@
-import { localized, msg } from '@lit/localize';
+import { msg } from '@lit/localize';
 import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
 import { TileModel } from '../../models';
 
-@localized()
 @customElement('collection-tile')
 export class CollectionTile extends LitElement {
   @property({ type: Object }) model?: TileModel;

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

@@ -1,5 +1,8 @@
+/* eslint-disable import/no-duplicates */
 import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import '@internetarchive/collection-name-cache';
+import { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
 import { TileModel } from '../../models';
 import { formatCount } from '../../utils/format-count';
 
@@ -13,36 +16,61 @@ import viewsIcon from './icons/views';
 export class ItemTile extends LitElement {
   @property({ type: Object }) model?: TileModel;
 
+  @property({ type: String }) baseNavigationUrl?: string;
+
+  @property({ type: Object })
+  collectionNameCache?: CollectionNameCacheInterface;
+
   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"
+    const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${this.model?.identifier}`;
+
+    const containsDeemphasize = this.model?.collections.includes('deemphasize');
+    const itemImageBoxClass = containsDeemphasize ? 'item-image-box' : '';
+    const itemImageClass = `item-image ${
+      !containsDeemphasize ? 'default' : 'deemphasize'
+    }`;
+    const tileActionClass = `tile-action no-preview${
+      !containsDeemphasize ? ' hidden' : ''
+    }`;
+
+    return html`
+      <div class=${itemImageBoxClass}>
+        <div
+          class=${itemImageClass}
           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>`;
+        ></div>
+        <div class=${tileActionClass}>Content may be inappropriate</div>
+      </div>
+    `;
   }
 
   render() {
+    const collectionIdentifier = this.model?.collections[0];
+    const collectionUrl = `${this.baseNavigationUrl}/details/${collectionIdentifier}`;
+
+    const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${this.model?.collections[0]}`;
     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}
+        <a href=${collectionUrl}>
+          <div id="stealth-popup">
+            <div
+              id="collection-thumbnail"
+              style="background-image:url(${imgSrcUrl})"
+            ></div>
+            <div id="collection-title-text">
+              <async-collection-name
+                .collectionNameCache=${this.collectionNameCache}
+                .identifier=${collectionIdentifier}
+              ></async-collection-name>
+            </div>
           </div>
+        </a>
+        <div id="title-image-container">
+          <h1 id="item-title" title=${itemTitle}>${this.model?.title}</h1>
+          <div id="item-image-container">${this.renderItemImageView}</div>
           <div class="item-creator">
             <span id="text-by">By:</span>
             <span>${itemCreator}</span>
@@ -51,33 +79,29 @@ export class ItemTile extends LitElement {
         <div id="item-stats-container">
           <div id="stats-holder">
             <div class="col">
-              <mediatype-icon mediatype="${
-                this.model?.mediatype
-              }" showText="true">
+              <mediatype-icon
+                .mediatype=${this.model?.mediatype}
+                ?showText=${true}
+              >
+              </mediatype-icon>
             </div>
             <div class="col">
               ${viewsIcon}
-              <p class="status-text">${formatCount(
-                this.model?.viewCount,
-                'short',
-                'short'
-              )}</p>
+              <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>
+              <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>
+              <p class="status-text">
+                ${formatCount(this.model?.favCount, 'short', 'short')}
+              </p>
             </div>
           </div>
         </div>
@@ -96,6 +120,11 @@ export class ItemTile extends LitElement {
         display: flex;
         flex-direction: column;
         height: 100%;
+        position: relative;
+      }
+
+      mediatype-icon {
+        --iconHeight: 10px;
       }
 
       #title-image-container {
@@ -127,41 +156,39 @@ export class ItemTile extends LitElement {
         flex: 1;
       }
 
-      #item-image {
+      .item-image-box {
         width: 16rem;
         height: 16rem;
-        border-radius: 0.8rem;
         overflow: hidden;
+        position: relative;
         box-shadow: 1px 1px 2px 0px;
-        object-fit: cover;
-        background-position: center;
-        background-size: cover;
+        display: flex;
       }
 
-      #item-image-box {
+      .item-image {
         width: 16rem;
         height: 16rem;
-        border-radius: 0.8rem;
-        overflow: hidden;
-        box-shadow: 1px 1px 2px 0px;
-        border: 5px solid #0000000;
+        object-fit: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
         position: relative;
-        display: flex;
+        -webkit-appearance: none;
+        overflow: visible;
       }
 
-      #item-image-deemphasize {
-        width: 16rem;
-        height: 16rem;
-        object-fit: cover;
-        background-position: center;
+      .default {
+        background-size: contain;
+        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
+      }
+
+      .deemphasize {
         background-size: cover;
         filter: blur(15px);
-        position: absolute;
         z-index: 1;
       }
 
       .tile-action {
-        border: 2px solid currentColor;
+        border: 1px solid currentColor;
         border-radius: 1px;
         padding: 5px;
         font-weight: 500;
@@ -197,7 +224,6 @@ export class ItemTile extends LitElement {
         background-color: #fcfcfc;
       }
 
-      /**  creator **/
       .item-creator {
         color: #000000;
         display: -webkit-box;
@@ -249,6 +275,62 @@ export class ItemTile extends LitElement {
       .col {
         width: 25%;
       }
+
+      #container:hover #stealth-popup {
+        margin-top: -25px;
+        visibility: visible;
+        opacity: 1;
+      }
+
+      #stealth-popup {
+        transition: margin-top 0.3s ease, opacity 0.3s ease;
+        position: absolute;
+        visibility: hidden;
+        margin-left: -10px;
+        text-align: left;
+        display: flex;
+        padding: 5px;
+        width: 96%;
+        background: #f5f5f7 100%;
+        border: 1px #2c2c2c;
+        border-radius: ${cornerRadiusCss};
+        box-shadow: 1px 1px 2px 0px;
+      }
+
+      #collection-thumbnail {
+        display: flex;
+        transition: opacity 0.3s ease;
+        width: 3rem;
+        height: 3rem;
+        flex: 0 0 3rem;
+        border-radius: 8px;
+        border: 1px solid #ddd;
+        overflow: hidden;
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
+      }
+
+      #collection-title-text {
+        line-height: 1;
+        font-size: 16px;
+        font-weight: bold;
+        text-align: left;
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+        height: 3.5rem;
+        display: -webkit-box;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+
+      a {
+        color: #333;
+        text-decoration: none;
+        display: block;
+      }
     `;
   }
 }

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

@@ -0,0 +1,75 @@
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { SortParam } from '@internetarchive/search-service';
+import eyeIcon from '../../assets/img/icons/eye';
+import { TileModel } from '../../models';
+
+@customElement('tile-list-compact-header')
+export class TileListCompactHeader extends LitElement {
+  @property({ type: Object }) model?: TileModel;
+
+  @property({ type: Number }) currentWidth?: number;
+
+  @property({ type: Object }) sortParam?: SortParam;
+
+  render() {
+    return html`
+      <div id="list-line-header" class="${this.classSize}">
+        <div id="thumb"></div>
+        <div id="title">Title</div>
+        <div id="date">Date Archived</div>
+        <div id="creator">Creator</div>
+        <div id="views">${eyeIcon}</div>
+        <div id="icon"></div>
+      </div>
+    `;
+  }
+
+  private get classSize(): string {
+    return (this.currentWidth ?? 531) < 530 ? 'mobile' : 'desktop';
+  }
+
+  static get styles() {
+    return css`
+      html {
+        font-size: unset;
+      }
+
+      div {
+        font-size: 14px;
+        font-weight: bold;
+        line-height: 20px;
+      }
+
+      .mobile #views {
+        display: none;
+      }
+
+      #views {
+        text-align: right;
+        /* Lower icon to align with text baseline */
+        line-height: 14px;
+      }
+      #views svg {
+        height: 18px;
+      }
+
+      #list-line-header {
+        display: grid;
+        column-gap: 10px;
+        align-items: center;
+        padding-left: 1rem;
+        padding-right: 1rem;
+        padding-bottom: 2px;
+      }
+
+      #list-line-header.mobile {
+        grid-template-columns: 30px 3fr 29px 2fr 19px;
+      }
+
+      #list-line-header.desktop {
+        grid-template-columns: 51px 3fr 100px 2fr 60px 26px;
+      }
+    `;
+  }
+}

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

@@ -0,0 +1,209 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { SortParam } from '@internetarchive/search-service';
+import DOMPurify from 'dompurify';
+import { TileModel } from '../../models';
+import { formatCount, NumberFormat } from '../../utils/format-count';
+import { formatDate, DateFormat } from '../../utils/format-date';
+import '../../mediatype-icon';
+
+@customElement('tile-list-compact')
+export class TileListCompact 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;
+
+  render() {
+    return html`
+      <div id="list-line" class="${this.classSize}">
+        <div id="thumb">${this.imageTemplate}</div>
+        <div id="title">${DOMPurify.sanitize(this.model?.title ?? '')}</div>
+        <div id="date">${formatDate(this.date, this.formatSize)}</div>
+        <div id="creator">${DOMPurify.sanitize(this.model?.creator ?? '')}</div>
+        <div id="views">
+          ${formatCount(this.model?.viewCount ?? 0, this.formatSize)}
+        </div>
+        <div id="icon">
+          <mediatype-icon
+            .mediatype=${this.model?.mediatype}
+            style="--iconHeight: 20px; --iconWidth: 20px;"
+          >
+          </mediatype-icon>
+        </div>
+      </div>
+    `;
+  }
+
+  private get imageTemplate() {
+    if (!this.model?.identifier) {
+      return nothing;
+    }
+    return html` <img
+      src="${this.baseNavigationUrl}/services/img/${this.model.identifier}"
+      alt="${this.model.identifier}"
+      class="${this.model?.mediatype}"
+    />`;
+  }
+
+  /*
+   * 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`
+      html {
+        font-size: unset;
+      }
+
+      div {
+        font-size: 14px;
+      }
+
+      /* fields */
+
+      #thumb {
+        padding-left: 6px;
+      }
+
+      #thumb img {
+        object-fit: cover;
+        display: block;
+      }
+
+      .mobile #thumb img {
+        width: 30px;
+        height: 30px;
+      }
+
+      .desktop #thumb img {
+        width: 45px;
+        height: 45px;
+      }
+
+      #thumb img.collection {
+        border-radius: 8px;
+        -webkit-border-radius: 8px;
+        -moz-border-radius: 8px;
+      }
+
+      .mobile #thumb img.account {
+        border-radius: 15px;
+        -webkit-border-radius: 15px;
+        -moz-border-radius: 15px;
+      }
+
+      .desktop #thumb img.account {
+        border-radius: 22.5px;
+        -webkit-border-radius: 22.5px;
+        -moz-border-radius: 22.5px;
+      }
+
+      #title {
+        color: #4b64ff;
+        text-decoration: none;
+      }
+
+      #title,
+      #creator {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      #views {
+        text-align: right;
+      }
+
+      .mobile #views {
+        display: none;
+      }
+
+      #icon {
+        height: 20px;
+        padding-right: 6px;
+      }
+
+      .mobile #icon {
+        height: 14px;
+      }
+
+      .desktop #icon {
+        height: 20px;
+      }
+
+      /* list-line */
+
+      #list-line {
+        display: grid;
+        column-gap: 10px;
+        border-top: 1px solid #ddd;
+        align-items: center;
+        line-height: 20px;
+      }
+
+      #list-line.mobile {
+        grid-template-columns: 30px 3fr 29px 2fr 19px;
+        padding-top: 2px;
+        padding-bottom: 2px;
+      }
+
+      #list-line.desktop {
+        grid-template-columns: 51px 3fr 100px 2fr 60px 26px;
+        padding-top: 5px;
+        padding-bottom: 5px;
+      }
+
+      /*
+      #title {
+        flex-grow: 3;
+        flex-shrink: 3;
+        flex-basis: 0;
+      }
+
+      #creator {
+        flex-grow: 2;
+        flex-shrink: 2;
+        flex-basis: 0;
+      }
+
+      #date {
+        flex-grow: 1;
+        flex-shrink: 1;
+        flex-basis: 0;
+      }
+    */
+
+      #list-line:hover #title {
+        text-decoration: underline;
+      }
+    `;
+  }
+}