@internetarchive/collection-browser 0.4.3-alpha.8 → 0.4.3

package/src/app-root.ts

@@ -113,188 +113,198 @@ export class AppRoot extends LitElement {
     this.collectionBrowser.baseQuery = this.searchQuery;
   }
 
+  private get getClass() {
+    const searchParams = new URLSearchParams(window.location.search);
+
+    return searchParams.get('hide-dev-tools') ? 'hidden' : '';
+  }
+
   render() {
     return html`
-      <div id="dev-tools">
-        <div id="search-and-page-inputs">
-          <form @submit=${this.searchPressed}>
-            Query:
-            <input
-              type="text"
-              id="base-query-field"
-              .value=${this.searchQuery ?? ''}
-            />
-            <input type="submit" value="Search" />
-          </form>
-          <form @submit=${this.changePagePressed}>
-            Page: <input type="number" value="1" id="page-number-input" />
-            <input type="submit" value="Go" />
-          </form>
-        </div>
+      <div class="dev-tool-container">
+        <div id="dev-tools" class=${this.getClass}>
+          <div id="search-and-page-inputs">
+            <form @submit=${this.searchPressed}>
+              Query:
+              <input
+                type="text"
+                id="base-query-field"
+                .value=${this.searchQuery ?? ''}
+              />
+              <input type="submit" value="Search" />
+            </form>
+            <form @submit=${this.changePagePressed}>
+              Page: <input type="number" value="1" id="page-number-input" />
+              <input type="submit" value="Go" />
+            </form>
+          </div>
 
-        <div id="search-types">
-          Search type:
-          <span class="search-type">
-            <input
-              type="radio"
-              id="metadata-search"
-              name="search-type"
-              value="metadata"
-              ?checked=${this.searchType === SearchType.METADATA}
-              @click=${this.searchTypeSelected}
-            />
-            <label for="metadata-search">Metadata</label>
-          </span>
-          <span class="search-type">
-            <input
-              type="radio"
-              id="fulltext-search"
-              name="search-type"
-              value="fulltext"
-              ?checked=${this.searchType === SearchType.FULLTEXT}
-              @click=${this.searchTypeSelected}
-            />
-            <label for="fulltext-search">Full text</label>
-          </span>
-        </div>
+          <div id="search-types">
+            Search type:
+            <span class="search-type">
+              <input
+                type="radio"
+                id="metadata-search"
+                name="search-type"
+                value="metadata"
+                ?checked=${this.searchType === SearchType.METADATA}
+                @click=${this.searchTypeSelected}
+              />
+              <label for="metadata-search">Metadata</label>
+            </span>
+            <span class="search-type">
+              <input
+                type="radio"
+                id="fulltext-search"
+                name="search-type"
+                value="fulltext"
+                ?checked=${this.searchType === SearchType.FULLTEXT}
+                @click=${this.searchTypeSelected}
+              />
+              <label for="fulltext-search">Full text</label>
+            </span>
+          </div>
 
-        <div id="toggle-controls">
-          <button
-            @click=${() => {
-              const cellControls =
-                this.shadowRoot?.getElementById('cell-controls');
-              cellControls?.classList.toggle('hidden');
-              const checkboxControls =
-                this.shadowRoot?.getElementById('checkbox-controls');
-              checkboxControls?.classList.toggle('hidden');
-            }}
-          >
-            Toggle Controls
-          </button>
-          <button
-            @click=${() => {
-              const details = this.shadowRoot?.getElementById(
-                'latest-event-details'
-              );
-              details?.classList.toggle('hidden');
-            }}
-          >
-            Last Event Captured
-          </button>
-        </div>
+          <div id="toggle-controls">
+            <button
+              @click=${() => {
+                const details =
+                  this.shadowRoot?.getElementById('cell-size-control');
+                details?.classList.toggle('hidden');
+                const rowGapControls =
+                  this.shadowRoot?.getElementById('cell-gap-control');
+                rowGapControls?.classList.toggle('hidden');
+              }}
+            >
+              Toggle Cell Controls
+            </button>
+            <button
+              @click=${() => {
+                const details = this.shadowRoot?.getElementById(
+                  'latest-event-details'
+                );
+                details?.classList.toggle('hidden');
+              }}
+            >
+              Last Event Captured
+            </button>
+          </div>
 
-        <div id="last-event">
-          <pre id="latest-event-details" class="hidden">
-            ${JSON.stringify(this.latestAction, null, 2)}
-          </pre
-          >
-        </div>
+          <div id="last-event">
+            <pre id="latest-event-details" class="hidden">
+              ${JSON.stringify(this.latestAction, null, 2)}
+            </pre
+            >
+          </div>
 
-        <div id="cell-controls">
-          <div id="cell-size-control">
-            <div>
-              <label for="cell-width-slider">Min cell width:</label>
+          <div id="cell-controls" class="hidden">
+            <div id="cell-size-control">
+              <div>
+                <label for="cell-width-slider">Min cell width:</label>
+                <input
+                  type="range"
+                  min="10"
+                  max="100"
+                  value="18"
+                  step="0.1"
+                  id="cell-width-slider"
+                  @input=${this.widthChanged}
+                />
+                <span>${this.cellWidth}rem</span>
+              </div>
+              <div>
+                <label for="cell-height-slider">Cell height:</label>
+                <input
+                  type="range"
+                  min="10"
+                  max="100"
+                  value="29"
+                  step="0.1"
+                  id="cell-height-slider"
+                  @input=${this.heightChanged}
+                />
+                <span>${this.cellHeight}rem</span>
+              </div>
+            </div>
+            <div id="cell-gap-control">
+              <div>
+                <label for="cell-row-gap-slider">Row gap:</label>
+                <input
+                  type="range"
+                  min="0"
+                  max="5"
+                  value="1.7"
+                  step="0.1"
+                  id="cell-row-gap-slider"
+                  @input=${this.rowGapChanged}
+                />
+                <span>${this.rowGap}rem</span>
+              </div>
+              <div>
+                <label for="cell-col-gap-slider">Col gap:</label>
+                <input
+                  type="range"
+                  min="0"
+                  max="5"
+                  value="1.7"
+                  step="0.1"
+                  id="cell-col-gap-slider"
+                  @input=${this.colGapChanged}
+                />
+                <span>${this.colGap}rem</span>
+              </div>
+            </div>
+          </div>
+          <div id="checkbox-controls">
+            <div class="checkbox-control">
               <input
-                type="range"
-                min="10"
-                max="100"
-                value="18"
-                step="0.1"
-                id="cell-width-slider"
-                @input=${this.widthChanged}
+                type="checkbox"
+                id="show-outline-check"
+                @click=${this.outlineChanged}
               />
-              <span>${this.cellWidth}rem</span>
+              <label for="show-outline-check">Show cell outlines</label>
             </div>
-            <div>
-              <label for="cell-height-slider">Cell height:</label>
+            <div class="checkbox-control">
               <input
-                type="range"
-                min="10"
-                max="100"
-                value="29"
-                step="0.1"
-                id="cell-height-slider"
-                @input=${this.heightChanged}
+                type="checkbox"
+                id="show-facet-group-outline-check"
+                @click=${this.toggleFacetGroupOutline}
               />
-              <span>${this.cellHeight}rem</span>
+              <label for="show-facet-group-outline-check">
+                Show facet group outlines
+              </label>
             </div>
-          </div>
-          <div id="cell-gap-control">
-            <div>
-              <label for="cell-row-gap-slider">Row gap:</label>
+            <div class="checkbox-control">
               <input
-                type="range"
-                min="0"
-                max="5"
-                value="1.7"
-                step="0.1"
-                id="cell-row-gap-slider"
-                @input=${this.rowGapChanged}
+                type="checkbox"
+                id="simulate-login"
+                @click=${this.loginChanged}
               />
-              <span>${this.rowGap}rem</span>
+              <label for="simulate-login">Simulate login</label>
             </div>
-            <div>
-              <label for="cell-col-gap-slider">Col gap:</label>
+            <div class="checkbox-control">
               <input
-                type="range"
-                min="0"
-                max="5"
-                value="1.7"
-                step="0.1"
-                id="cell-col-gap-slider"
-                @input=${this.colGapChanged}
+                type="checkbox"
+                id="show-dummy-snippets"
+                @click=${this.snippetsChanged}
               />
-              <span>${this.colGap}rem</span>
+              <label for="show-dummy-snippets">Show dummy snippets</label>
+            </div>
+            <div class="checkbox-control">
+              <input
+                type="checkbox"
+                id="enable-date-picker"
+                checked
+                @click=${this.datePickerChanged}
+              />
+              <label for="enable-date-picker">Enable date picker</label>
             </div>
           </div>
         </div>
-        <div id="checkbox-controls">
-          <div class="checkbox-control">
-            <input
-              type="checkbox"
-              id="show-outline-check"
-              @click=${this.outlineChanged}
-            />
-            <label for="show-outline-check">Show cell outlines</label>
-          </div>
-          <div class="checkbox-control">
-            <input
-              type="checkbox"
-              id="show-facet-group-outline-check"
-              @click=${this.toggleFacetGroupOutline}
-            />
-            <label for="show-facet-group-outline-check">
-              Show facet group outlines
-            </label>
-          </div>
-          <div class="checkbox-control">
-            <input
-              type="checkbox"
-              id="simulate-login"
-              @click=${this.loginChanged}
-            />
-            <label for="simulate-login">Simulate login</label>
-          </div>
-          <div class="checkbox-control">
-            <input
-              type="checkbox"
-              id="show-dummy-snippets"
-              @click=${this.snippetsChanged}
-            />
-            <label for="show-dummy-snippets">Show dummy snippets</label>
-          </div>
-          <div class="checkbox-control">
-            <input
-              type="checkbox"
-              id="enable-date-picker"
-              checked
-              @click=${this.datePickerChanged}
-            />
-            <label for="enable-date-picker">Enable date picker</label>
-          </div>
-        </div>
+        <button id="toggle-dev-tools-btn" @click=${this.toggleDevTools}>
+          Toggle Search Controls
+        </button>
       </div>
-
       <div id="collection-browser-container">
         <collection-browser
           .baseNavigationUrl=${'https://archive.org'}
@@ -319,7 +329,6 @@ export class AppRoot extends LitElement {
 
   private baseQueryChanged(e: CustomEvent<{ baseQuery?: string }>): void {
     this.searchQuery = e.detail.baseQuery;
-    this.collectionBrowser.clearFilters();
   }
 
   /** Handler for search type changes coming from collection browser */
@@ -360,6 +369,29 @@ export class AppRoot extends LitElement {
     }
   }
 
+  private toggleDevTools() {
+    const pageUrl = new URL(window.location.href);
+    const { searchParams } = pageUrl;
+
+    if (searchParams.get('hide-dev-tools')) {
+      searchParams.delete('hide-dev-tools');
+    } else {
+      searchParams.set('hide-dev-tools', 'true');
+    }
+
+    this.shadowRoot?.getElementById('dev-tools')?.classList.toggle('hidden');
+
+    if (window.history.replaceState) {
+      window.history.replaceState(
+        {
+          path: pageUrl.toString(),
+        },
+        '',
+        pageUrl.toString()
+      );
+    }
+  }
+
   private toggleFacetGroupOutline(e: Event) {
     const target = e.target as HTMLInputElement;
     if (target.checked) {
@@ -511,10 +543,6 @@ export class AppRoot extends LitElement {
       font-size: 1.6rem;
     }
 
-    collection-browser {
-      margin-top: 20rem;
-    }
-
     modal-manager.showFacetGroupOutlines,
     collection-browser.showFacetGroupOutlines {
       --facet-row-border-top: 1px solid red;
@@ -525,8 +553,11 @@ export class AppRoot extends LitElement {
       width: 300px;
     }
 
+    .dev-tool-container {
+      position: relative;
+    }
     #dev-tools {
-      position: fixed;
+      position: relative;
       top: 0;
       left: 0;
       z-index: 1;
@@ -535,12 +566,27 @@ export class AppRoot extends LitElement {
       padding: 0.5rem 1rem;
       border: 1px solid black;
       font-size: 1.4rem;
+      width: 75%;
+      background: #ffffffb3;
     }
 
     #dev-tools > * {
       display: flex;
     }
 
+    #toggle-dev-tools-btn {
+      position: fixed;
+      left: 77.4%;
+      top: 0;
+      background: red;
+      padding: 5px;
+      color: white;
+      font-size: 1.4rem;
+      margin: 0;
+      z-index: 1;
+      cursor: pointer;
+    }
+
     #search-and-page-inputs > form {
       margin-right: 1rem;
     }
@@ -585,8 +631,7 @@ export class AppRoot extends LitElement {
     }
 
     .hidden {
-      /* If this class is present, we want the element hidden regardless of specificity */
-      display: none !important;
+      display: none;
     }
 
     #toggle-controls {

package/src/collection-browser.ts

@@ -1430,6 +1430,8 @@ export class CollectionBrowser
       tiles.push({
         averageRating: result.avg_rating?.value,
         collections: result.collection?.values ?? [],
+        collectionFilesCount: result.collection_files_count?.value ?? 0,
+        collectionSize: result.collection_size?.value ?? 0,
         commentCount: result.num_reviews?.value ?? 0,
         creator: result.creator?.value,
         creators: result.creator?.values ?? [],

package/src/models.ts

@@ -4,7 +4,9 @@ export interface TileModel {
   averageRating?: number;
   collectionIdentifier?: string;
   collectionName?: string;
+  collectionFilesCount: number;
   collections: string[];
+  collectionSize: number;
   commentCount: number;
   creator?: string;
   creators: string[];

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

@@ -5,7 +5,6 @@ import { css } from 'lit';
  */
 export const baseItemImageStyles = css`
   .drop-shadow {
-    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
     overflow: hidden;
     height: 100%;
   }
@@ -30,11 +29,22 @@ export const baseItemImageStyles = css`
 
   .blur {
     filter: blur(15px);
-    box-shadow: 1px 1px 2px 0px;
+    box-shadow: 1px 1px 2px 0;
   }
 
-  .radius50 {
+  .account-image {
+    object-fit: cover;
+    background-position: 50% 50%;
     border-radius: 50%;
+    width: 160px;
+    height: 160px;
+  }
+
+  .collection-image {
+    object-fit: cover;
+    border-radius: 8px;
+    width: 100%;
+    height: 160px;
   }
 `;
 

package/src/tiles/collection-browser-loading-tile.ts

@@ -16,7 +16,7 @@ export class CollectionBrowserLoadingTile extends LitElement {
 
       #container {
         background: linear-gradient(to right bottom, #dddddd, #d8d8d8);
-        border-radius: var(--collectionTileCornerRadius, 4px);
+        border-radius: var(--tileCornerRadius, 4px);
         background-size: 100% 100%;
         display: block;
         height: 100%;

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

@@ -63,11 +63,13 @@ export class AccountTile extends LitElement {
    * CSS
    */
   static get styles() {
+    const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;
+
     return [
       baseTileStyles,
       css`
-        image-block {
-          --imageBlockBackgroundColor: #fcf5e6;
+        .container {
+          border: 1px solid ${tileBorderColor};
         }
       `,
     ];