@internetarchive/collection-browser 0.1.8 → 0.2.0

package/package.json

@@ -3,18 +3,21 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {
-    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
-    "build": "tsc",
-    "prepare": "tsc && husky install",
+    "start": "yarn run prepare && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "prepare:ghpages": "rimraf ghpages && yarn run prepare && vite build",
+    "prepare": "rimraf dist && tsc && husky install",
     "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
     "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
     "circular": "madge --circular --extensions ts .",
     "test": "tsc && yarn run lint && yarn run circular && wtr --coverage",
-    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
+    "deploy": "yarn run deploy:run -e $(git branch --show-current)",
+    "deploy:run": "yarn run prepare:ghpages && touch ghpages/.nojekyll && yarn run deploy:gh",
+    "deploy:gh": "gh-pages -t -d ghpages -m \"Build for $(git log --pretty=format:\"%h %an %ai %s\" -n1) [skip ci]\""
   },
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -23,6 +26,7 @@
     "@internetarchive/field-parsers": "^0.1.3",
     "@internetarchive/histogram-date-range": "^0.1.6",
     "@internetarchive/infinite-scroller": "^0.1.2",
+    "@internetarchive/local-cache": "^0.2.1",
     "@internetarchive/search-service": "^0.3.4",
     "@internetarchive/shared-resize-observer": "^0.2.0",
     "@lit/localize": "^0.11.2",
@@ -31,7 +35,6 @@
     "typescript-cookie": "^1.0.3"
   },
   "devDependencies": {
-    "@internetarchive/local-cache": "^0.2.1",
     "@internetarchive/result-type": "^0.0.1",
     "@open-wc/eslint-config": "^7.0.0",
     "@open-wc/testing": "^3.0.3",
@@ -46,12 +49,15 @@
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-lit-a11y": "^2.2.0",
     "eslint-plugin-wc": "^1.3.2",
+    "gh-pages": "^4.0.0",
     "husky": "^7.0.0",
     "madge": "^5.0.1",
     "prettier": "^2.4.1",
+    "rimraf": "^3.0.2",
     "sinon": "^12.0.1",
     "tslib": "^2.3.1",
-    "typescript": "^4.4.4"
+    "typescript": "^4.4.4",
+    "vite": "^2.9.9"
   },
   "publishConfig": {
     "access": "public"

package/src/collection-browser.ts

@@ -162,6 +162,12 @@ export class CollectionBrowser
    */
   private endOfDataReached = false;
 
+  /**
+   * When page width resizes from desktop to mobile, set true to
+   * disable expand/collapse transition when loading.
+   */
+  private isResizeToMobile = false;
+
   private placeholderCellTemplate = html`<collection-browser-loading-tile></collection-browser-loading-tile>`;
 
   private tileModelAtCellIndex(index: number): TileModel | undefined {
@@ -241,31 +247,12 @@ export class CollectionBrowser
   render() {
     return html`
       <div id="content-container" class=${this.mobileView ? 'mobile' : ''}>
-        <div id="left-column" class="column">
+        <div
+          id="left-column"
+          class="column${this.isResizeToMobile ? ' preload' : ''}"
+        >
           <div id="mobile-header-container">
-            ${this.mobileView
-              ? html`
-                  <div id="mobile-filter-collapse">
-                    <h1
-                      @click=${() => {
-                        this.mobileFacetsVisible = !this.mobileFacetsVisible;
-                      }}
-                      @keyup=${() => {
-                        this.mobileFacetsVisible = !this.mobileFacetsVisible;
-                      }}
-                    >
-                      <span
-                        class="collapser ${this.mobileFacetsVisible
-                          ? 'open'
-                          : ''}"
-                      >
-                        ${chevronIcon}
-                      </span>
-                      Filters
-                    </h1>
-                  </div>
-                `
-              : nothing}
+            ${this.mobileView ? this.mobileFacetsTemplate : nothing}
             <div id="results-total">
               <span id="big-results-count"
                 >${this.totalResults !== undefined
@@ -382,6 +369,28 @@ export class CollectionBrowser
     return this.facetsLoading || this.fullYearAggregationLoading;
   }
 
+  private get mobileFacetsTemplate() {
+    return html`
+      <div id="mobile-filter-collapse">
+        <h1
+          @click=${() => {
+            this.isResizeToMobile = false;
+            this.mobileFacetsVisible = !this.mobileFacetsVisible;
+          }}
+          @keyup=${() => {
+            this.isResizeToMobile = false;
+            this.mobileFacetsVisible = !this.mobileFacetsVisible;
+          }}
+        >
+          <span class="collapser ${this.mobileFacetsVisible ? 'open' : ''}">
+            ${chevronIcon}
+          </span>
+          Filters
+        </h1>
+      </div>
+    `;
+  }
+
   private get facetsTemplate() {
     return html`
       ${this.facetsLoading ? this.loadingTemplate : nothing}
@@ -513,8 +522,13 @@ export class CollectionBrowser
   }
 
   handleResize(entry: ResizeObserverEntry): void {
+    const previousView = this.mobileView;
     if (entry.target === this.contentContainer) {
-      this.mobileView = entry.contentRect.width < 600;
+      this.mobileView = entry.contentRect.width < this.mobileBreakpoint;
+      // If changing from desktop to mobile disable transition
+      if (this.mobileView && !previousView) {
+        this.isResizeToMobile = true;
+      }
     }
   }
 
@@ -1101,6 +1115,18 @@ export class CollectionBrowser
       display: block;
     }
 
+    /**
+    * When page width resizes from desktop to mobile, use this class to
+    * disable expand/collapse transition when loading.
+    */
+    .preload * {
+      transition: none !important;
+      -webkit-transition: none !important;
+      -moz-transition: none !important;
+      -ms-transition: none !important;
+      -o-transition: none !important;
+    }
+
     #content-container {
       display: flex;
     }

package/src/styles/item-image-styles.ts

@@ -0,0 +1,97 @@
+import { css } from 'lit';
+
+/**
+ * Base item-image styles
+ */
+export const baseItemImageStyles = css`
+  .drop-shadow {
+    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
+    overflow: hidden;
+  }
+
+  .list-box {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    display: flex;
+    position: relative;
+  }
+
+  .contain {
+    object-fit: contain;
+  }
+
+  .cover {
+    object-fit: cover;
+  }
+
+  .blur {
+    filter: blur(15px);
+    width: 100%;
+    transform: scale(1.1);
+  }
+`;
+
+/**
+ * Waveform styles
+ */
+export const waveformGradientStyles = css`
+  .waveform {
+    mix-blend-mode: screen;
+  }
+
+  .waveform-grad0 {
+    background: linear-gradient(
+      hsl(340, 80%, 55%),
+      hsl(0, 80%, 33%) 35%,
+      hsl(0, 80%, 22%) 70%,
+      hsl(0, 0%, 0%)
+    );
+  }
+
+  .waveform-grad1 {
+    background: linear-gradient(
+      hsl(300, 80%, 55%),
+      hsl(330, 80%, 33%) 35%,
+      hsl(330, 80%, 22%) 70%,
+      hsl(0, 0%, 0%)
+    );
+  }
+
+  .waveform-grad2 {
+    background: linear-gradient(
+      hsl(200, 80%, 55%),
+      hsl(230, 80%, 33%) 35%,
+      hsl(230, 80%, 22%) 70%,
+      hsl(0, 0%, 0%)
+    );
+  }
+
+  .waveform-grad3 {
+    background: linear-gradient(
+      hsl(160, 80%, 55%),
+      hsl(190, 80%, 33%) 35%,
+      hsl(190, 80%, 22%) 70%,
+      hsl(0, 0%, 0%)
+    );
+  }
+
+  .waveform-grad4 {
+    background: linear-gradient(
+      hsl(250, 80%, 55%),
+      hsl(280, 80%, 33%) 35%,
+      hsl(280, 80%, 22%) 70%,
+      hsl(0, 0%, 0%)
+    );
+  }
+
+  .waveform-grad5 {
+    background: linear-gradient(
+      hsl(280, 80%, 55%),
+      hsl(310, 80%, 33%) 35%,
+      hsl(310, 80%, 22%) 70%,
+      hsl(0, 0%, 0%)
+    );
+  }
+`;

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

@@ -125,6 +125,7 @@ export class AccountTile extends LitElement {
         height: 25px;
         display: flex;
         justify-content: space-evenly;
+        line-height: initial;
       }
 
       #patron-icon {
@@ -141,6 +142,7 @@ 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;
       }

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

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-duplicates */
-import { css, CSSResultGroup, html, LitElement } from 'lit';
+import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import { TileModel } from '../../models';
@@ -19,20 +19,21 @@ export class ItemTile extends LitElement {
   @property({ type: String }) baseImageUrl?: string;
 
   render() {
-    const itemTitle = this.model?.title || '';
-    const itemCreator = this.model?.creator || '-';
-
+    const itemTitle = this.model?.title || nothing;
+    const itemCreator = this.model?.creator;
     return html`
       <div id="container">
         <div id="title-image-container">
-          <h1 id="item-title" title=${itemTitle}>${this.model?.title}</h1>
+          <h1 id="item-title" title=${itemTitle}>${itemTitle}</h1>
           <div id="item-image-container">
             <item-image .model=${this.model} .baseImageUrl=${this.baseImageUrl}>
             </item-image>
           </div>
           <div class="item-creator">
             <div class="truncated">
-              <span><strong>By:&nbsp;</strong>${itemCreator}</span>
+              ${itemCreator
+                ? html`<span>by&nbsp;${itemCreator}</span>`
+                : nothing}
             </div>
           </div>
         </div>

package/src/tiles/item-image.ts

@@ -1,9 +1,14 @@
-import { css, CSSResultGroup, html, nothing, LitElement } from 'lit';
+import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { restrictedIcon } from '../assets/img/icons/restricted';
+import { ClassInfo, classMap } from 'lit/directives/class-map.js';
+
 import { TileModel } from '../models';
 
+import {
+  baseItemImageStyles,
+  waveformGradientStyles,
+} from '../styles/item-image-styles';
+
 @customElement('item-image')
 export class ItemImage extends LitElement {
   @property({ type: Object }) model?: TileModel;
@@ -14,128 +19,38 @@ export class ItemImage extends LitElement {
 
   @property({ type: Boolean }) isCompactTile = false;
 
+  @property({ type: Boolean }) loggedIn = false;
+
   @state() private isWaveform = false;
 
-  @query('.item-image') private itemImageWaveform!: HTMLImageElement;
+  @query('img') private baseImage!: HTMLImageElement;
 
   render() {
     return html`
-      <div class=${ifDefined(this.imageBoxClass)}>
-        ${this.model?.mediatype === 'audio'
-          ? this.waveformTemplate
-          : this.itemImageTemplate}
-      </div>
-    `;
-  }
-
-  private get imageSrc() {
-    return `${this.baseImageUrl}/services/img/${this.model?.identifier}`;
-  }
-
-  // Templates
-  private get itemImageTemplate() {
-    return html`
-      ${this.isListTile ? this.listImageTemplate : this.tileImageTemplate}
-    `;
-  }
-
-  private get tileImageTemplate() {
-    return html`
-      <div
-        class=${this.imageClass}
-        style="background-image:url(${this.imageSrc})"
-      ></div>
-      ${this.tileActionTemplate}
-    `;
-  }
-
-  private get listImageTemplate() {
-    if (!this.model) {
-      return nothing;
-    }
-    return html`
-      <img src="${this.imageSrc}" alt="" class="${this.listImageClass}" />
-      ${this.restrictedIconTemplate}
-    `;
-  }
-
-  private get waveformTemplate() {
-    return html`
-      <div class=${this.boxWaveformClass}>
+      <div class=${classMap(this.itemBaseClass)}>
         <img
-          class=${this.itemImageWaveformClass}
+          class=${classMap(this.itemImageClass)}
           src="${this.imageSrc}"
-          alt="${ifDefined(this.model?.title)}"
-          @load=${this.onLoadItemImageCheck}
+          alt=""
+          @load=${this.onLoad}
         />
       </div>
     `;
   }
 
-  private get restrictedIconTemplate() {
-    if (!this.model?.contentWarning) {
-      return nothing;
-    }
-    return html` ${restrictedIcon} `;
-  }
-
-  private get tileActionTemplate() {
-    if (!this.model?.contentWarning) {
-      return nothing;
-    }
-    return html`
-      <div class="tile-action no-preview">Content may be inappropriate</div>
-    `;
-  }
-
-  private onLoadItemImageCheck() {
-    const aspectRatio =
-      this.itemImageWaveform.naturalWidth /
-      this.itemImageWaveform.naturalHeight;
-    if (aspectRatio === 4) {
-      this.isWaveform = true;
-    }
-  }
-
-  // Classes
-  private get imageClass() {
-    return `item-image ${
-      this.model?.contentWarning ? 'deemphasize' : 'default'
-    }`;
-  }
-
-  private get listImageClass() {
-    return `list-image ${this.model?.mediatype}${
-      this.isCompactTile ? ' compact' : ''
-    }`;
-  }
-
-  private get imageBoxClass() {
-    if (this.isListTile) {
-      return `list-image-box${
-        this.model?.contentWarning ? ' deemphasize' : ''
-      }`;
-    }
-    if (this.model?.contentWarning) {
-      return 'item-image-box';
-    }
-    return undefined;
-  }
-
-  private get boxWaveformClass() {
-    return `item-audio${this.isWaveform ? ` ${this.hashBasedGradient}` : ''}`;
-  }
-
-  private get itemImageWaveformClass() {
-    return `item-image${this.isWaveform ? ' waveform' : ''}`;
+  /**
+   * Helpers
+   */
+  private get imageSrc() {
+    return `${this.baseImageUrl}/services/img/${this.model?.identifier}`;
   }
 
   private get hashBasedGradient() {
     if (!this.model?.identifier) {
-      return 'grad1';
+      return 'waveform-grad0';
     }
     const gradient = this.hashStrToInt(this.model.identifier) % 6; // returns 0-5
-    return `grad${gradient}`;
+    return `waveform-grad${gradient}`;
   }
 
   private hashStrToInt(str: string): number {
@@ -144,154 +59,52 @@ export class ItemImage extends LitElement {
       .reduce((acc: number, char: string) => acc + char.charCodeAt(0), 0);
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
-      .item-image-box {
-        width: 16rem;
-        height: 16rem;
-        overflow: hidden;
-        position: relative;
-        box-shadow: 1px 1px 2px 0px;
-        display: flex;
-      }
-
-      .item-image {
-        width: 16rem;
-        height: 16rem;
-        object-fit: contain;
-        background-repeat: no-repeat;
-        background-position: center center;
-        position: relative;
-        -webkit-appearance: none;
-        overflow: visible;
-      }
-
-      .list-image-box.deemphasize {
-        border: 1px solid #767676;
-      }
-
-      .list-image-box {
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-        box-sizing: border-box;
-        display: flex;
-        position: relative;
-      }
-
-      .list-image {
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-      }
-
-      img.list-image {
-        overflow: hidden;
-        object-fit: contain;
-        border-radius: var(--border-radius, 0);
-        -webkit-border-radius: var(--border-radius, 0);
-        -moz-border-radius: var(--border-radius, 0);
-      }
-
-      img.list-image.compact {
-        object-fit: cover;
-      }
-
-      .waveform {
-        mix-blend-mode: screen;
-      }
-
-      .default {
-        background-size: contain;
-        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
-      }
-
-      .deemphasize .list-image,
-      .deemphasize.item-image {
-        background-size: contain;
-        filter: blur(15px);
-        z-index: 1;
-      }
-
-      .deemphasize svg {
-        padding: 25%;
-        z-index: 2;
-        position: absolute;
-      }
-
-      .tile-action {
-        border: 1px 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: #2c2c2c;
-        font-size: 1.4rem;
-        line-height: 2rem;
-        text-align: center;
-      }
-
-      .grad0 {
-        background: linear-gradient(
-          hsl(340, 80%, 55%),
-          hsl(0, 80%, 33%) 35%,
-          hsl(0, 80%, 22%) 70%,
-          hsl(0, 0%, 0%)
-        );
-      }
-
-      .grad1 {
-        background: linear-gradient(
-          hsl(300, 80%, 55%),
-          hsl(330, 80%, 33%) 35%,
-          hsl(330, 80%, 22%) 70%,
-          hsl(0, 0%, 0%)
-        );
-      }
-
-      .grad2 {
-        background: linear-gradient(
-          hsl(200, 80%, 55%),
-          hsl(230, 80%, 33%) 35%,
-          hsl(230, 80%, 22%) 70%,
-          hsl(0, 0%, 0%)
-        );
-      }
-
-      .grad3 {
-        background: linear-gradient(
-          hsl(160, 80%, 55%),
-          hsl(190, 80%, 33%) 35%,
-          hsl(190, 80%, 22%) 70%,
-          hsl(0, 0%, 0%)
-        );
-      }
-
-      .grad4 {
-        background: linear-gradient(
-          hsl(250, 80%, 55%),
-          hsl(280, 80%, 33%) 35%,
-          hsl(280, 80%, 22%) 70%,
-          hsl(0, 0%, 0%)
-        );
-      }
+  /**
+   * Classes
+   */
+  private get itemBaseClass(): ClassInfo {
+    return {
+      'drop-shadow': true,
+      'list-box': this.isListTile,
+      [this.hashBasedGradient]: this.isWaveform,
+    };
+  }
+
+  private get itemImageClass(): ClassInfo {
+    return {
+      contain: !this.isCompactTile,
+      cover: this.isCompactTile,
+      blur: this.model?.contentWarning || false,
+      waveform: this.isWaveform,
+    };
+  }
+
+  /**
+   * Event listener sets isWaveform true if image is waveform
+   */
+  private onLoad() {
+    if (
+      (this.model?.mediatype === 'audio' ||
+        this.model?.mediatype === 'etree') &&
+      this.baseImage.naturalWidth / this.baseImage.naturalHeight === 4
+    ) {
+      this.isWaveform = true;
+    }
+  }
 
-      .grad5 {
-        background: linear-gradient(
-          hsl(280, 80%, 55%),
-          hsl(310, 80%, 33%) 35%,
-          hsl(310, 80%, 22%) 70%,
-          hsl(0, 0%, 0%)
-        );
-      }
-    `;
+  /**
+   * CSS
+   */
+  static get styles(): CSSResultGroup {
+    return [
+      baseItemImageStyles,
+      waveformGradientStyles,
+      css`
+        img {
+          height: var(--imgHeight, 16rem);
+          width: var(--imgWidth, 16rem);
+        }
+      `,
+    ];
   }
 }