@internetarchive/collection-browser 0.2.4 → 0.2.6-alpha2

package/src/empty-placeholder.ts

@@ -0,0 +1,70 @@
+import { css, html, LitElement, CSSResultGroup } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import noSearchTermIcon from './assets/img/icons/no-search-term';
+import noSearchResultIcon from './assets/img/icons/no-search-result';
+
+@customElement('empty-placeholder')
+export class EmptyPlaceholder extends LitElement {
+  @property({ type: String }) placeholderType?: string;
+
+  @property({ type: Boolean }) mobileView?: false;
+
+  render() {
+    return html`
+      ${this.placeholderType === 'no-search-term'
+        ? this.noSearchTermTemplate
+        : this.noSearchResultTemplate}
+    `;
+  }
+
+  private get noSearchResultTemplate() {
+    return html`<div
+      class="placeholder no-result ${this.mobileView ? 'mobile' : 'desktop'}"
+    >
+      <h2 class="title">
+        Your search did not match any items in the Archive. Try different
+        keywords or a more general search.
+      </h2>
+      <div>${noSearchResultIcon}</div>
+    </div>`;
+  }
+
+  private get noSearchTermTemplate() {
+    return html`<div
+      class="placeholder no-term ${this.mobileView ? 'mobile' : 'desktop'}"
+    >
+      <h2 class="title">
+        To being searching, enter a search term in the box above and hit "Go".
+      </h2>
+      <div>${noSearchTermIcon}</div>
+    </div>`;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        text-align: center;
+        width: 100%;
+      }
+
+      .placeholder {
+        display: block;
+      }
+
+      .desktop svg {
+        max-height: 40rem;
+      }
+      .desktop .title {
+        margin: 4rem 0;
+      }
+
+      .mobile svg {
+        max-height: 20rem;
+      }
+      .mobile .title {
+        margin: 2rem 0.5;
+      }
+    `;
+  }
+}

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

@@ -2,10 +2,7 @@ import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { TileModel } from '../../models';
 
-import { accountIcon } from './icons/account';
-import { favoriteFilledIcon } from './icons/favorite-filled';
-import { reviewsIcon } from './icons/reviews';
-import { uploadIcon } from './icons/upload';
+import './tile-stats';
 
 @customElement('account-tile')
 export class AccountTile extends LitElement {
@@ -13,44 +10,32 @@ export class AccountTile extends LitElement {
 
   render() {
     return html`
-      <div class="outer-holder">
-        <div class="inner-holder">
-          <div id="header-holder">
-            <div id="title-holder">
-              <h1 class="truncated">${this.model?.identifier}</h1>
-            </div>
-            <div id="avatar-holder">
-              <div
-                id="avatar"
-                style="background-image: url('https://archive.org/services/img/${this
-                  .model?.identifier}')"
-              ></div>
-            </div>
-          </div>
-          <div id="year-holder">
-            <div id="archivist-since">
-              <h3>Archivist Since</h3>
-            </div>
-            <div id="year-holder">
-              <h3>${this.model?.dateAdded?.getFullYear()}</h3>
-            </div>
-          </div>
-          <div id="status-holder">
-            <div id="patron-icon">${accountIcon}</div>
-            <div class="stat-icon">
-              ${uploadIcon}
-              <h3>${this.model?.itemCount}</h3>
-            </div>
-            <div class="stat-icon">
-              ${favoriteFilledIcon}
-              <h3>${this.model?.favCount}</h3>
-            </div>
-            <div class="stat-icon">
-              ${reviewsIcon}
-              <h3>${this.model?.commentCount}</h3>
-            </div>
+      <div class="account-tile-main">
+        <div id="title">
+          <h1 class="truncated">${this.model?.identifier}</h1>
+        </div>
+
+        <div class="account-info">
+          <div id="avatar-info">
+            <img
+              id="avatar"
+              alt="patron-avatar"
+              src="https://archive.org/services/img/${this.model?.identifier}"
+            />
           </div>
+
+          <span id="archivist-since">
+            Archivist since ${this.model?.dateAdded?.getFullYear()}
+          </span>
         </div>
+
+        <tile-stats
+          .mediatype=${this.model?.mediatype}
+          .itemCount=${this.model?.itemCount}
+          .favCount=${this.model?.favCount}
+          .commentCount=${this.model?.commentCount}
+        >
+        </tile-stats>
       </div>
     `;
   }
@@ -63,41 +48,45 @@ export class AccountTile extends LitElement {
         margin: 0;
       }
 
-      h3 {
+      span {
         font-size: 14px;
-        font-weight: bold;
         color: #2c2c2c;
         margin: 0px;
       }
 
-      .outer-holder {
+      .account-tile-main {
         background-color: #fcf5e6;
         border: 1px #2c2c2c;
         border-radius: 4px;
         box-shadow: 1px 1px 2px 0px;
         height: 100%;
         display: flex;
+        flex-direction: column;
         text-align: center;
         width: 100%;
       }
 
-      .inner-holder {
-        padding: 5px;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
+      .account-info {
+        flex-grow: 1;
       }
 
-      #header-holder {
-        flex: 1;
+      #title {
+        padding: 5px 5px 0px 5px;
+        flex-shrink: 0;
+        height: 40px;
       }
 
-      #title-holder {
-        height: 40px;
-        margin-bottom: 5px;
+      .account-tile-main:hover > #title > .truncated {
+        text-decoration: underline;
+      }
+
+      /** this is a workaround for Safari 15 where the hover effects are not working */
+      #title:hover > .truncated {
+        text-decoration: underline;
       }
 
-      #avatar-holder {
+      #avatar-info {
+        margin-top: 5px;
         margin-bottom: 5px;
         display: flex;
         align-items: center;
@@ -112,27 +101,11 @@ export class AccountTile extends LitElement {
         box-shadow: 1px 1px 2px #888888;
       }
 
-      #year-holder {
+      #archivist-since {
         margin-bottom: 5px;
         height: 40px;
       }
 
-      #year-holder {
-        margin: 0px;
-      }
-
-      #status-holder {
-        height: 25px;
-        display: flex;
-        justify-content: space-evenly;
-        line-height: initial;
-      }
-
-      #patron-icon {
-        height: 25px;
-        width: 25px;
-      }
-
       .truncated {
         flex: 1;
         min-width: 0; /* Important for long words! */
@@ -142,15 +115,9 @@ export class AccountTile extends LitElement {
         display: -webkit-box;
         -webkit-box-orient: vertical;
         word-wrap: break-word;
-        word-break: break-all;
         line-height: 2rem;
         text-align: center;
       }
-
-      .stat-icon {
-        height: 10px;
-        width: 10px;
-      }
     `;
   }
 }

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

@@ -1,16 +1,13 @@
 /* eslint-disable import/no-duplicates */
 import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { TileModel } from '../../models';
-import { formatCount } from '../../utils/format-count';
-
-import { favoriteFilledIcon } from './icons/favorite-filled';
-import { reviewsIcon } from './icons/reviews';
-import viewsIcon from './icons/views';
 
 import '../mediatype-icon';
 import '../item-image';
+import './tile-stats';
 
 @customElement('item-tile')
 export class ItemTile extends LitElement {
@@ -19,182 +16,112 @@ export class ItemTile extends LitElement {
   @property({ type: String }) baseImageUrl?: string;
 
   render() {
-    const itemTitle = this.model?.title || nothing;
+    const itemTitle = this.model?.title;
     const itemCreator = this.model?.creator;
     return html`
-      <div id="container">
-        <div id="title-image-container">
-          <h1 id="item-title" title=${itemTitle}>${itemTitle}</h1>
-          <div id="item-image-container">
-            <item-image .model=${this.model} .baseImageUrl=${this.baseImageUrl}>
+      <div class="container">
+        <div class="item-info">
+          <div id="title">
+            <h1 class="truncated" title=${ifDefined(
+              itemTitle
+            )}>${itemTitle}</h1>
+          </div>
+
+          <div id="image">
+            <item-image
+              .model=${this.model}
+              .baseImageUrl=${this.baseImageUrl}>
             </item-image>
           </div>
-          <div class="item-creator">
-            <div class="truncated">
-              ${itemCreator
-                ? html`<span>by&nbsp;${itemCreator}</span>`
-                : nothing}
-            </div>
+          <div class="created-by truncated">
+            ${itemCreator ? html`<span>by&nbsp;${itemCreator}</span>` : nothing}
           </div>
         </div>
 
-        <div class="hr"></div>
-
-        <div id="item-stats-container">
-          <div id="stats-holder">
-            <div class="col">
-              <mediatype-icon
-                .mediatype=${this.model?.mediatype}
-                .collection=${this.model?.collections}
-                style="--iconHeight:25px; --iconWidth:25px;"
-              >
-              </mediatype-icon>
-            </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>
+        <tile-stats 
+          .mediatype=${this.model?.mediatype}
+          .viewCount=${this.model?.viewCount}
+          .favCount=${this.model?.favCount}
+          .commentCount=${this.model?.commentCount}>
+        </tile-stats>
         </div>
       </div>
     `;
   }
 
   static get styles(): CSSResultGroup {
-    const cornerRadiusCss = css`var(--collectionTileCornerRadius, 4px)`;
-
     return css`
-      #container {
+      .container {
         background-color: #ffffff;
-        border-radius: ${cornerRadiusCss};
+        border-radius: var(--collectionTileCornerRadius, 4px);
         box-shadow: 1px 1px 2px 0px;
         display: flex;
         flex-direction: column;
         height: 100%;
-        position: relative;
       }
 
-      #title-image-container {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        padding: 0.5rem 0.5rem 0 0.5rem;
+      .item-info {
+        padding: 5px 5px 0 5px;
+        flex-grow: 1;
       }
 
-      #item-title {
-        color: #2c2c2c;
-        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;
+      #title {
+        flex-shrink: 0;
       }
 
-      #item-image-container {
+      #image {
         display: flex;
         justify-content: center;
         flex: 1;
+        height: 16rem;
       }
 
       .hidden {
         display: none;
       }
 
-      #container:hover > #title-image-container > .item-title {
+      .container:hover > .item-info > #title > .truncated {
         text-decoration: underline;
       }
 
       /** this is a workaround for Safari 15 where the hover effects are not working */
-      #title-image-container:hover > #item-title {
+      #title:hover > .truncated {
         text-decoration: underline;
       }
 
-      #container:hover > #item-title {
-        background-color: #fcfcfc;
-      }
-
-      .item-creator {
+      .created-by {
         display: flex;
         justify-content: center;
         align-items: flex-end; /* Important to start text from bottom */
         height: 3rem;
         padding-top: 1rem;
+        margin-top: 5px;
       }
 
       .truncated {
         flex: 1;
-        min-width: 0; /* Important for long words! */
-      }
-
-      .truncated span {
-        font-size: 1.4rem;
         color: #2c2c2c;
-        -webkit-line-clamp: 2;
+        min-width: 0; /* Important for long words! */
+        text-align: center;
+        line-height: 2rem;
         text-overflow: ellipsis;
         overflow: hidden;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
         word-wrap: break-word;
-        line-height: 2rem;
-        text-align: center;
-      }
-
-      .hr {
-        border: 0.5px solid #ccc;
-      }
-
-      #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;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
       }
 
-      .status-text {
-        font-size: 14px;
-        color: #2c2c2c;
-        margin: auto;
-        display: block;
-        text-align: center;
+      .truncated span {
+        font-size: 1.4rem;
+        display: -webkit-box;
       }
 
-      .col {
-        width: 25%;
+      h1.truncated {
+        margin-top: 0rem;
+        margin-bottom: 0.5rem;
+        font-size: 1.6rem;
+        height: 4rem;
+        display: -webkit-box;
       }
     `;
   }

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

@@ -0,0 +1,132 @@
+import { css, CSSResultGroup, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { favoriteFilledIcon } from '../../assets/img/icons/favorite-filled';
+import { reviewsIcon } from '../../assets/img/icons/reviews';
+import { uploadIcon } from '../../assets/img/icons/upload';
+import { viewsIcon } from '../../assets/img/icons/views';
+
+import { formatCount } from '../../utils/format-count';
+
+@customElement('tile-stats')
+export class TileStats extends LitElement {
+  @property({ type: String }) mediatype?: string;
+
+  @property({ type: Number }) itemCount?: number;
+
+  @property({ type: Number }) viewCount?: number;
+
+  @property({ type: Number }) favCount?: number;
+
+  @property({ type: Number }) commentCount?: number;
+
+  render() {
+    return html`
+      <div class="item-stats">
+        <p class="sr-only">
+          ${this.mediatype === 'account' ? 'Account Stats' : 'Item Stats'}
+        </p>
+        <ul id="stats-row">
+          <li class="col">
+            <p class="sr-only">Mediatype:</p>
+            <mediatype-icon .mediatype=${this.mediatype}></mediatype-icon>
+          </li>
+          <li class="col">
+            ${this.mediatype === 'account' ? uploadIcon : viewsIcon}
+            <p class="status-text">
+              <span class="sr-only">
+                ${this.mediatype === 'account' ? 'Uploads:' : 'Views:'}
+              </span>
+              ${formatCount(
+                this.mediatype === 'account' ? this.itemCount : this.viewCount,
+                'short',
+                'short'
+              )}
+            </p>
+          </li>
+          <li class="col">
+            ${favoriteFilledIcon}
+            <p class="status-text">
+              <span class="sr-only">Favorites:</span>
+              ${formatCount(this.favCount, 'short', 'short')}
+            </p>
+          </li>
+          <li class="col">
+            ${reviewsIcon}
+            <p class="status-text">
+              <span class="sr-only">Reviews:</span>
+              ${formatCount(this.commentCount, 'short', 'short')}
+            </p>
+          </li>
+        </ul>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      mediatype-icon {
+        --iconHeight: 25px;
+        --iconWidth: 25px;
+      }
+
+      ul {
+        all: unset; // unset all property values
+        list-style-type: none; // remove default list-style
+      }
+
+      li {
+        list-style-type: none; // remove default list-style
+      }
+
+      .item-stats {
+        height: 35px;
+      }
+
+      #stats-row {
+        border-top: 1px solid #bbb;
+        align-items: center;
+        display: flex;
+        flex: 1;
+        justify-content: space-evenly;
+        text-align: center;
+        width: 100%;
+        padding-top: 5px;
+        padding-bottom: 5px;
+      }
+
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+      }
+
+      .col {
+        width: 25%;
+        height: 25px;
+      }
+
+      svg {
+        height: 10px;
+        width: 10px;
+        display: block;
+        margin: auto;
+      }
+
+      .status-text {
+        font-size: 14px;
+        height: 15px;
+        color: #2c2c2c;
+        line-height: 20px;
+        margin: auto;
+        display: block;
+        text-align: center;
+      }
+    `;
+  }
+}

package/src/tiles/mediatype-icon.ts

@@ -50,6 +50,10 @@ export class MediatypeIcon extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
+      #icon {
+        height: var(--iconHeight, 25px);
+      }
+
       .status-text {
         font-size: 14px;
         color: #2c2c2c;

package/test/collection-browser.test.ts

@@ -12,6 +12,9 @@ describe('Collection Browser', () => {
       html`<collection-browser></collection-browser>`
     );
 
+    el.baseQuery = 'hello';
+    await el.updateComplete;
+
     const facets = el.shadowRoot?.querySelector('collection-facets');
     const sortBar = el.shadowRoot?.querySelector('sort-filter-bar');
     const infiniteScroller = el.shadowRoot?.querySelector('infinite-scroller');

package/test/empty-placeholder.test.ts

@@ -0,0 +1,35 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import { EmptyPlaceholder } from '../src/empty-placeholder';
+import '../src/empty-placeholder';
+
+describe('Empty Placeholder', () => {
+  it('should render with no-search-term placeholder', async () => {
+    const el = await fixture<EmptyPlaceholder>(
+      html`<empty-placeholder></empty-placeholder>`
+    );
+
+    el.placeholderType = 'no-search-term';
+    await el.updateComplete;
+
+    const notSearchTerm = el.shadowRoot?.querySelector('.no-term');
+    const infiniteScroller = el.shadowRoot?.querySelector('infinite-scroller');
+
+    expect(notSearchTerm).to.exist;
+    expect(infiniteScroller).to.not.exist;
+  });
+
+  it('should render with no-search-result placeholder', async () => {
+    const el = await fixture<EmptyPlaceholder>(
+      html`<empty-placeholder></empty-placeholder>`
+    );
+
+    el.placeholderType = 'no-search-result';
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.no-result')).to.exist;
+    expect(el.shadowRoot?.querySelector('.no-term')).to.not.exist;
+    expect(el.shadowRoot?.querySelector('collection-facets')).to.not.exist;
+  });
+});