@internetarchive/collection-browser 0.0.1-alpha.13 → 0.0.1-alpha.16

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

@@ -0,0 +1,73 @@
+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;
+        padding-right: 6px;
+      }
+      #views svg {
+        height: 18px;
+      }
+
+      #list-line-header {
+        display: grid;
+        column-gap: 10px;
+        align-items: center;
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+
+      #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

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { SortParam } from '@internetarchive/search-service';
 import DOMPurify from 'dompurify';
@@ -22,7 +22,7 @@ export class TileListCompact extends LitElement {
   render() {
     return html`
       <div id="list-line" class="${this.classSize}">
-        <div id="thumb">${this.img()}</div>
+        <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>
@@ -36,15 +36,15 @@ export class TileListCompact extends LitElement {
     `;
   }
 
-  private img() {
-    if (this.model?.identifier) {
-      return html` <img
-        src="${this.baseNavigationUrl}/services/img/${this.model.identifier}"
-        alt="${this.model.identifier}"
-        class=${this.model?.mediatype}
-      />`;
+  private get imageTemplate() {
+    if (!this.model?.identifier) {
+      return nothing;
     }
-    return html``;
+    return html` <img
+      src="${this.baseNavigationUrl}/services/img/${this.model.identifier}"
+      alt="${this.model.identifier}"
+      class="${this.model?.mediatype}"
+    />`;
   }
 
   /*
@@ -160,7 +160,7 @@ export class TileListCompact extends LitElement {
       #list-line {
         display: grid;
         column-gap: 10px;
-        border-top: 1px solid #ddd !important;
+        border-top: 1px solid #ddd;
         align-items: center;
         line-height: 20px;
       }
@@ -195,7 +195,7 @@ export class TileListCompact extends LitElement {
         flex-shrink: 1;
         flex-basis: 0;
       }
-      */
+    */
 
       #list-line:hover #title {
         text-decoration: underline;

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

@@ -1,5 +1,5 @@
 /* eslint-disable lit/no-invalid-html */
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { SortParam } from '@internetarchive/search-service';
 import DOMPurify from 'dompurify';
@@ -24,12 +24,12 @@ export class TileList extends LitElement {
     return html`
       <div id="list-line" class="${this.classSize}">
         <div id="list-line-left">
-          <div id="thumb">${this.img()}</div>
-          ${this.iconLeft()}
+          <div id="thumb">${this.imgTemplate}</div>
+          ${this.iconLeftTemplate}
         </div>
         <div id="list-line-right">
           <div id="title">${DOMPurify.sanitize(this.model?.title ?? '')}</div>
-          ${this.itemLine()} ${this.creator()}
+          ${this.itemLineTemplate} ${this.creatorTemplate}
           <div id="date">
             <span class="label">Published:</span> ${formatDate(
               this.date,
@@ -37,17 +37,17 @@ export class TileList extends LitElement {
             )}
           </div>
           <div id="views-line">
-            ${this.views()} ${this.rating()} ${this.reviews()}
+            ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}
           </div>
-          ${this.topics()} ${this.description()}
+          ${this.topicsTemplate} ${this.descriptionTemplate}
         </div>
       </div>
     `;
   }
 
-  private img() {
+  private get imgTemplate() {
     if (!this.model?.identifier) {
-      return html``;
+      return nothing;
     }
     return html` <img
       src="${this.baseNavigationUrl}/services/img/${this.model.identifier}"
@@ -56,9 +56,9 @@ export class TileList extends LitElement {
     />`;
   }
 
-  private iconLeft() {
+  private get iconLeftTemplate() {
     if (this.classSize !== 'desktop') {
-      return html``;
+      return nothing;
     }
     return html`
       <div id="icon-left">
@@ -68,9 +68,9 @@ export class TileList extends LitElement {
     `;
   }
 
-  private creator() {
+  private get creatorTemplate() {
     if (!this.model?.creator) {
-      return html``;
+      return nothing;
     }
     return html`
       <div id="creator">
@@ -80,15 +80,15 @@ export class TileList extends LitElement {
     `;
   }
 
-  private itemLine() {
-    const source = this.source();
+  private get itemLineTemplate() {
+    const source = this.sourceTemplate;
     if (!source) {
-      return html``;
+      return nothing;
     }
     return html` <div id="item-line">${source}</div> `;
   }
 
-  private views() {
+  private get viewsTemplate() {
     return html`
       <div id="views">
         <span class="label">Views: </span>
@@ -97,9 +97,9 @@ export class TileList extends LitElement {
     `;
   }
 
-  private rating() {
+  private get ratingTemplate() {
     if (!this.model?.averageRating) {
-      return html``;
+      return nothing;
     }
     return html`
       <div id="reviews">
@@ -109,9 +109,9 @@ export class TileList extends LitElement {
     `;
   }
 
-  private reviews() {
+  private get reviewsTemplate() {
     if (!this.model?.commentCount) {
-      return html``;
+      return nothing;
     }
     return html`
       <div id="reviews">
@@ -121,39 +121,41 @@ export class TileList extends LitElement {
     `;
   }
 
-  private description() {
+  private get descriptionTemplate() {
     if (!this.model?.description) {
-      return html``;
+      return nothing;
     }
     const description = DOMPurify.sanitize(`${this.model?.description}`);
-    return html`<div id="description">${description}</div>`;
+    return html` <div id="description">${description}</div> `;
   }
 
-  private topics() {
+  private get topicsTemplate() {
     if (!this.model?.subject) {
-      return html``;
+      return nothing;
     }
-    return html` <div id="topics">
-      <span class="label">Topics: </span>
-      ${DOMPurify.sanitize(this.model?.subject)}
-    </div>`;
+    return html`
+      <div id="topics">
+        <span class="label">Topics: </span>
+        ${DOMPurify.sanitize(this.model?.subject)}
+      </div>
+    `;
   }
 
-  private source() {
-    if (this.model?.source) {
-      return html`<div id="source">
-        <span class="label">Source: </span>${this.searchLink(
-          'source',
-          this.model.source
-        )}
-      </div>`;
+  private get sourceTemplate() {
+    if (!this.model?.source) {
+      return nothing;
     }
-    return html``;
+    return html`
+      <div id="source">
+        <span class="label">Source: </span>
+        ${this.searchLink('source', this.model.source)}
+      </div>
+    `;
   }
 
   private searchLink(field: string, searchTerm: string) {
     if (!field || !searchTerm) {
-      return html``;
+      return nothing;
     }
     const query = encodeURIComponent(`${field}:"${searchTerm}"`);
     // eslint-disable-next-line lit/no-invalid-html

package/src/tiles/tile-dispatcher.ts

@@ -12,6 +12,7 @@ import './grid/item-tile';
 import './grid/account-tile';
 import './list/tile-list';
 import './list/tile-list-compact';
+import './list/tile-list-compact-header';
 
 @customElement('tile-dispatcher')
 export class TileDispatcher
@@ -39,19 +40,39 @@ export class TileDispatcher
   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>
+        ${this.displayMode === 'list-header'
+          ? this.headerTemplate
+          : this.tileTemplate}
       </div>
     `;
   }
 
+  private get headerTemplate() {
+    const { currentWidth, sortParam } = this;
+    return html`
+      <tile-list-compact-header
+        class="header"
+        .currentWidth=${currentWidth}
+        .sortParam=${sortParam}
+      >
+      </tile-list-compact-header>
+    `;
+  }
+
+  private get tileTemplate() {
+    return html`
+      ${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>
+    `;
+  }
+
   handleResize(entry: ResizeObserverEntry): void {
     this.currentWidth = entry.contentRect.width;
     this.currentHeight = entry.contentRect.height;
@@ -111,9 +132,9 @@ export class TileDispatcher
           default:
             return html`<item-tile
               .model=${model}
-              .baseNavigationUrl=${this.baseNavigationUrl}
-              .currentWidth=${this.currentWidth}
-              .currentHeight=${this.currentHeight}
+              .baseNavigationUrl=${baseNavigationUrl}
+              .currentWidth=${currentWidth}
+              .currentHeight=${currentHeight}
             ></item-tile>`;
         }
       case 'list-compact':