@internetarchive/collection-browser 0.1.8 → 0.1.9

package/package.json

@@ -3,18 +3,20 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "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 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 +25,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 +34,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 +48,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/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/tsconfig.json

@@ -16,5 +16,5 @@
     "rootDir": "./",
     "declaration": true
   },
-  "include": ["**/*.ts"]
+  "include": ["src", "test", "index.ts"],
 }

package/vite.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '',
+  build: {
+    outDir: 'ghpages',
+    manifest: true,
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html'),
+      },
+    },
+  },
+  server: {
+    host: true,
+    port: 8080,
+    open: true,
+    cors: true,
+  },
+});

package/web-dev-server.config.mjs

@@ -5,7 +5,7 @@ const hmr = process.argv.includes('--hmr');
 
 export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
   nodeResolve: true,
-  open: '/demo/',
+  open: '/',
   watch: !hmr,
 
   /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */