@internetarchive/collection-browser 3.0.0 → 3.0.1-webdev-7936.0

package/dist/src/tiles/list/tile-list.js

@@ -5,7 +5,7 @@ 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 } from '@lit/localize';
+import { msg, str } from '@lit/localize';
 import DOMPurify from 'dompurify';
 import { suppressedCollections } from '../../models';
 import { BaseTileComponent } from '../base-tile-component';
@@ -37,82 +37,92 @@ let TileList = class TileList extends BaseTileComponent {
         this.collectionLinks = [];
     }
     render() {
-        return html `
-      <div id="list-line" class="${this.classSize}">
+        return html `
+      <div id="list-line" class="${this.classSize}">
         ${this.classSize === 'mobile'
             ? this.mobileTemplate
-            : this.desktopTemplate}
-      </div>
+            : this.desktopTemplate}
+      </div>
     `;
     }
     /**
      * Templates
      */
     get mobileTemplate() {
-        return html `
-      <div id="list-line-top">
-        <div id="list-line-left">${this.imageBlockTemplate}</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>
+        return html `
+      <div id="list-line-top">
+        <div id="list-line-left">${this.imageBlockTemplate}</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>
     `;
     }
     get desktopTemplate() {
-        return html `
-      <div id="list-line-left">${this.imageBlockTemplate}</div>
-      <div id="list-line-right">
-        <div id="title-line">
-          <div id="title">${this.titleTemplate}</div>
-          ${this.iconRightTemplate}
-        </div>
-        ${this.detailsTemplate}
-      </div>
+        return html `
+      <div id="list-line-left">${this.imageBlockTemplate}</div>
+      <div id="list-line-right">
+        <div id="title-line">
+          <div id="title">${this.titleTemplate}</div>
+          ${this.iconRightTemplate}
+        </div>
+        ${this.detailsTemplate}
+      </div>
     `;
     }
     get imageBlockTemplate() {
+        var _a;
         if (!this.model)
             return nothing;
         const isCollection = this.model.mediatype === 'collection';
         const href = this.displayValueProvider.itemPageUrl(this.model.identifier, isCollection);
-        return html `<a 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>
+        return html `<a
+      id="image-link"
+      title=${msg(str `View ${(_a = this.model) === null || _a === void 0 ? void 0 : _a.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> `;
     }
     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}
+        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
     get iconRightTemplate() {
-        return html `
-      <a id="icon-right" href=${this.mediatypeURL}>
-        <tile-mediatype-icon .model=${this.model}> </tile-mediatype-icon>
-      </a>
+        var _a;
+        return html `
+      <a
+        id="icon-right"
+        href=${this.mediatypeURL}
+        title=${msg(str `See more: ${(_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype}`)}
+      >
+        <tile-mediatype-icon .model=${this.model}> </tile-mediatype-icon>
+      </a>
     `;
     }
     get titleTemplate() {
@@ -123,8 +133,8 @@ let TileList = class TileList extends BaseTileComponent {
         // If the model has a server-specified href, use it
         // Otherwise construct a details link using the identifier
         return ((_b = this.model) === null || _b === void 0 ? void 0 : _b.href)
-            ? html `<a href="${this.baseNavigationUrl}${this.model.href}"
-          >${(_c = this.model.title) !== null && _c !== void 0 ? _c : this.model.identifier}</a
+            ? html `<a href="${this.baseNavigationUrl}${this.model.href}"
+          >${(_c = this.model.title) !== null && _c !== void 0 ? _c : this.model.identifier}</a
         >`
             : this.detailsLink(this.model.identifier, this.model.title, this.model.mediatype === 'collection');
     }
@@ -142,11 +152,11 @@ let TileList = class TileList extends BaseTileComponent {
         if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.source)) {
             return nothing;
         }
-        return html `
-      <div id="source" class="metadata">
-        ${this.labelTemplate(msg('Source'))}
-        ${this.searchLink('source', this.model.source)}
-      </div>
+        return html `
+      <div id="source" class="metadata">
+        ${this.labelTemplate(msg('Source'))}
+        ${this.searchLink('source', this.model.source)}
+      </div>
     `;
     }
     get volumeTemplate() {
@@ -161,23 +171,23 @@ let TileList = class TileList extends BaseTileComponent {
         var _a, _b, _c;
         // "Archivist since" if account
         if (((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'account') {
-            return html `
-        <div id="creator" class="metadata">
-          <span class="label"
-            >${(_b = this.displayValueProvider.accountLabel) !== null && _b !== void 0 ? _b : nothing}</span
-          >
-        </div>
+            return html `
+        <div id="creator" class="metadata">
+          <span class="label"
+            >${(_b = this.displayValueProvider.accountLabel) !== null && _b !== void 0 ? _b : nothing}</span
+          >
+        </div>
       `;
         }
         // "Creator" if not account tile
         if (!((_c = this.model) === null || _c === void 0 ? void 0 : _c.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>
+        return html `
+      <div id="creator" class="metadata">
+        ${this.labelTemplate(msg('By'))}
+        ${join(map(this.model.creators, id => this.searchLink('creator', id)), ', ')}
+      </div>
     `;
     }
     get datePublishedTemplate() {
@@ -229,22 +239,22 @@ let TileList = class TileList extends BaseTileComponent {
         if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.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>
+        return html `
+      <div id="topics" class="metadata">
+        ${this.labelTemplate(msg('Topics'))}
+        ${join(map(this.model.subjects, id => this.searchLink('subject', id)), ', ')}
+      </div>
     `;
     }
     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>
+        return html `
+      <div id="collections" class="metadata">
+        ${this.labelTemplate(msg('Collections'))}
+        ${join(this.collectionLinks, ', ')}
+      </div>
     `;
     }
     get descriptionTemplate() {
@@ -258,23 +268,23 @@ let TileList = class TileList extends BaseTileComponent {
         if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.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>
+        return html `
+      <review-block
+        viewsize="list"
+        title=${ifDefined(reviewtitle)}
+        body=${ifDefined(reviewbody)}
+        starRating=${ifDefined(stars)}
+      >
+      </review-block>
     `;
     }
     get textSnippetsTemplate() {
         var _a;
         if (!this.hasSnippets)
             return nothing;
-        return html `<text-snippet-block
-      viewsize="list"
-      .snippets=${(_a = this.model) === null || _a === void 0 ? void 0 : _a.snippets}
+        return html `<text-snippet-block
+      viewsize="list"
+      .snippets=${(_a = this.model) === null || _a === void 0 ? void 0 : _a.snippets}
     ></text-snippet-block>`;
     }
     get hasSnippets() {
@@ -285,12 +295,12 @@ let TileList = class TileList extends BaseTileComponent {
         var _a;
         if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.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>
+        return html `
+      <ul class="capture-dates">
+        ${map(this.model.captureDates, date => html `<li>
+              ${this.displayValueProvider.webArchivesCaptureLink(this.model.title, date)}
+            </li>`)}
+      </ul>
     `;
     }
     // Utility functions
@@ -298,10 +308,10 @@ let TileList = class TileList extends BaseTileComponent {
     metadataTemplate(text, label = '', id) {
         if (!text)
             return nothing;
-        return html `
-      <div id=${ifDefined(id)} class="metadata">
-        ${this.labelTemplate(label)} ${text}
-      </div>
+        return html `
+      <div id=${ifDefined(id)} class="metadata">
+        ${this.labelTemplate(label)} ${text}
+      </div>
     `;
     }
     labelTemplate(label) {
@@ -316,11 +326,11 @@ let TileList = class TileList extends BaseTileComponent {
         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
+        return html `<a
+      href="${this.baseNavigationUrl}/search?query=${query}"
+      rel="nofollow"
+    >
+      ${DOMPurify.sanitize(searchTerm)}</a
     >`;
     }
     detailsLink(identifier, text, isCollection = false) {
@@ -411,190 +421,190 @@ let TileList = class TileList extends BaseTileComponent {
         return 'long';
     }
     static get styles() {
-        return 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;
-      }
+        return 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;
+      }
     `;
     }
 };