@internetarchive/collection-browser 1.14.10-alpha.2 → 1.14.10-alpha1

package/src/app-root.ts

@@ -10,7 +10,7 @@ import {
   StringField,
 } from '@internetarchive/search-service';
 import { LocalCache } from '@internetarchive/local-cache';
-import { html, css, LitElement, PropertyValues } from 'lit';
+import { html, css, LitElement, PropertyValues, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import { CollectionNameCache } from '@internetarchive/collection-name-cache';
@@ -35,6 +35,8 @@ export class AppRoot extends LitElement {
     localCache: this.localCache,
   });
 
+  @state() private toggleSlots: boolean = false;
+
   @state() private currentPage?: number;
 
   @state() private searchQuery?: string;
@@ -229,91 +231,93 @@ export class AppRoot extends LitElement {
             >
           </div>
 
-          <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>
+          <fieldset class="cell-controls">
+            <legend>Cell Controls</legend>
+            <div>
+              <label for="cell-width-slider">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 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>
+              <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="checkbox-controls">
+            <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>
+          </fieldset>
+
+          <fieldset class="other-controls">
+            <legend>Other Controls</legend>
             <div class="checkbox-control">
               <input
                 type="checkbox"
-                id="show-outline-check"
-                @click=${this.outlineChanged}
+                id="simulate-login"
+                @click=${this.loginChanged}
               />
-              <label for="show-outline-check">Show cell outlines</label>
+              <label for="simulate-login">Simulate login</label>
             </div>
             <div class="checkbox-control">
               <input
                 type="checkbox"
-                id="show-facet-group-outline-check"
-                @click=${this.toggleFacetGroupOutline}
+                id="enable-date-picker"
+                checked
+                @click=${this.datePickerChanged}
               />
-              <label for="show-facet-group-outline-check">
-                Show facet group outlines
-              </label>
+              <label for="enable-date-picker">Enable date picker</label>
             </div>
             <div class="checkbox-control">
               <input
                 type="checkbox"
-                id="simulate-login"
-                @click=${this.loginChanged}
+                id="enable-management"
+                @click=${this.manageModeCheckboxChanged}
               />
-              <label for="simulate-login">Simulate login</label>
+              <label for="enable-management">Enable manage mode</label>
             </div>
+          </fieldset>
+
+          <fieldset class="cb-visual-appearance">
+            <legend>CB Visual Appearance</legend>
             <div class="checkbox-control">
               <input
                 type="checkbox"
@@ -325,37 +329,62 @@ export class AppRoot extends LitElement {
             <div class="checkbox-control">
               <input
                 type="checkbox"
-                id="enable-date-picker"
-                checked
-                @click=${this.datePickerChanged}
+                id="show-facet-group-outline-check"
+                @click=${this.toggleFacetGroupOutline}
               />
-              <label for="enable-date-picker">Enable date picker</label>
+              <label for="show-facet-group-outline-check">
+                Show facet group outlines
+              </label>
             </div>
             <div class="checkbox-control">
               <input
                 type="checkbox"
-                id="enable-management"
-                @click=${this.manageModeCheckboxChanged}
+                id="show-outline-check"
+                @click=${this.outlineChanged}
               />
-              <label for="enable-management">Enable manage mode</label>
+              <label for="show-outline-check">Show cell outlines</label>
             </div>
+          </fieldset>
+
+          <fieldset class="user-profile-controls">
+            <legend>User Profile Controls</legend>
             <div class="checkbox-control">
               <input
                 type="checkbox"
-                id="enable-facet-top-view"
-                @click=${this.facetTopViewCheckboxChanged}
+                id="enable-facet-top-slot"
+                @click=${this.facetTopSlotCheckboxChanged}
               />
-              <label for="enable-facet-top-view">Show facet top view</label>
+              <label for="enable-facet-top-slot">Show facet top slot</label>
             </div>
             <div class="checkbox-control">
               <input
                 type="checkbox"
-                id="enable-cb-top-view"
-                @click=${this.cbToViewCheckboxChanged}
+                id="enable-cb-top-slot"
+                @click=${this.cbTopSlotCheckboxChanged}
               />
-              <label for="enable-cb-top-view">Show CB top view</label>
+              <label for="enable-cb-top-slot">Show CB top slot</label>
             </div>
-          </div>
+            <div class="checkbox-control">
+              <input
+                type="checkbox"
+                id="enable-sortbar-left-slot"
+                @click=${this.sortBarSlotCheckboxChanged}
+              />
+              <label for="enable-sortbar-left-slot"
+                >Show sortbar left slot</label
+              >
+            </div>
+            <div class="checkbox-control">
+              <input
+                type="checkbox"
+                id="enable-result-last-tile-slot"
+                @click=${this.resultLastTileSlotCheckboxChanged}
+              />
+              <label for="enable-result-last-tile-slot"
+                >Show result last tile slot</label
+              >
+            </div>
+          </fieldset>
         </div>
         <button id="toggle-dev-tools-btn" @click=${this.toggleDevTools}>
           Toggle Search Controls
@@ -377,6 +406,12 @@ export class AppRoot extends LitElement {
           @searchTypeChanged=${this.searchTypeChanged}
           @manageModeChanged=${this.manageModeChanged}
         >
+          ${this.toggleSlots
+            ? html`<div slot="sortbar-left-slot">Sort Slot</div>`
+            : nothing}
+          ${this.toggleSlots
+            ? html`<div slot="facet-top-slot">Facet Slot</div>`
+            : nothing}
         </collection-browser>
       </div>
       <modal-manager></modal-manager>
@@ -537,9 +572,9 @@ export class AppRoot extends LitElement {
   }
 
   /**
-   * Handler for when the dev panel's "Show facet top view" checkbox is changed.
+   * Handler for when the dev panel's "Show facet top slot" checkbox is changed.
    */
-  private facetTopViewCheckboxChanged(e: Event) {
+  private facetTopSlotCheckboxChanged(e: Event) {
     const target = e.target as HTMLInputElement;
 
     const p = document.createElement('p');
@@ -558,10 +593,34 @@ export class AppRoot extends LitElement {
     }
   }
 
+  private toggleSlotOptions() {
+    this.toggleSlots = !this.toggleSlots;
+  }
+
+  private resultLastTileSlotCheckboxChanged(e: Event) {
+    const target = e.target as HTMLInputElement;
+
+    const div = document.createElement('div');
+    const title = document.createElement('h3');
+    title.textContent = 'Upload';
+
+    div.setAttribute('slot', 'result-last-tile');
+    div.setAttribute('class', 'result-last-tile');
+    div.appendChild(title);
+
+    if (target.checked) {
+      this.collectionBrowser.appendChild(div);
+    } else {
+      this.collectionBrowser.removeChild(
+        this.collectionBrowser.lastElementChild as Element
+      );
+    }
+  }
+
   /**
-   * Handler for when the dev panel's "Show cb top view" checkbox is changed.
+   * Handler for when the dev panel's "Show cb top slot" checkbox is changed.
    */
-  private cbToViewCheckboxChanged(e: Event) {
+  private cbTopSlotCheckboxChanged(e: Event) {
     const target = e.target as HTMLInputElement;
 
     const p = document.createElement('p');
@@ -580,6 +639,29 @@ export class AppRoot extends LitElement {
     }
   }
 
+  /**
+   * Handler for when the dev panel's "Show facet top slot" checkbox is changed.
+   */
+  private sortBarSlotCheckboxChanged(e: Event) {
+    const target = e.target as HTMLInputElement;
+
+    const div = document.createElement('div');
+    div.style.setProperty('border', '1px solid #000');
+    div.textContent = 'Btn';
+    div.style.setProperty('height', '3rem');
+    div.style.setProperty('width', '3rem');
+    div.style.backgroundColor = '#00000';
+    div.setAttribute('slot', 'sortbar-left-slot');
+
+    if (target.checked) {
+      this.collectionBrowser.appendChild(div);
+    } else {
+      this.collectionBrowser.removeChild(
+        this.collectionBrowser.lastElementChild as Element
+      );
+    }
+  }
+
   private rowGapChanged(e: Event) {
     const input = e.target as HTMLInputElement;
     this.rowGap = parseFloat(input.value);
@@ -706,7 +788,6 @@ export class AppRoot extends LitElement {
       padding: 0.5rem 1rem;
       border: 1px solid black;
       font-size: 1.4rem;
-      width: 75%;
       background: #ffffffb3;
     }
 
@@ -749,11 +830,17 @@ export class AppRoot extends LitElement {
       margin-right: 1rem;
     }
 
-    #cell-controls {
+    .cell-controls {
       display: flex;
       flex-wrap: wrap;
     }
-
+    .cell-controls div {
+      display: flex;
+      align-items: center;
+    }
+    .cell-controls input[type='range'] {
+      width: 120px;
+    }
     #cell-controls label {
       display: inline-block;
       width: 10rem;
@@ -777,6 +864,9 @@ export class AppRoot extends LitElement {
     .checkbox-control {
       flex-basis: 50%;
     }
+    .checkbox-control label {
+      user-select: none;
+    }
 
     #last-event {
       background-color: aliceblue;
@@ -799,5 +889,55 @@ export class AppRoot extends LitElement {
       background-color: aliceblue;
       font-size: 1.6rem;
     }
+
+    // slots
+    div[slot='cb-top-slot'] {
+      height: 50px;
+      border: 1px solid red;
+      background: bisque;
+    }
+    div[slot='facet-top-slot'] {
+      border: 1px solid red;
+      width: 100%;
+      height: 150px;
+      background-color: darkseagreen;
+    }
+    div[slot='sort-slot-left'] {
+      height: 50px;
+      border: 1px solid red;
+      background: bisque;
+    }
+
+    /* user profile controls */
+    .user-profile-controls {
+      width: fit-content;
+    }
+
+    fieldset {
+      display: inline-block !important;
+    }
+
+    .result-last-tile {
+      border-radius: 4px;
+      background-color: white;
+      border: 3px dashed #555;
+      box-shadow: none;
+      display: grid;
+      align-content: center;
+    }
+    .result-last-tile:hover {
+      box-shadow: rgba(8, 8, 32, 0.8) 0 0 6px 2px;
+      transition: box-shadow 0.1s ease 0s;
+      cursor: pointer;
+      border: 3px dashed #4b64ff;
+    }
+    .result-last-tile h3 {
+      margin-bottom: 4rem;
+      margin: 0px auto;
+      font-size: 2.8rem;
+      color: rgb(44, 44, 44);
+      font-weight: 200;
+      text-align: center;
+    }
   `;
 }

package/src/collection-browser.ts

@@ -131,7 +131,7 @@ export class CollectionBrowser
 
   @property({ type: Boolean }) suppressResultCount = false;
 
-  @property({ type: Boolean }) suppressResultTiles = false;
+  @property({ type: Boolean }) clearResultsOnEmptyQuery = false;
 
   @property({ type: String }) collectionPagePath: string = '/details/';
 
@@ -586,7 +586,10 @@ export class CollectionBrowser
       .placeholderCellTemplate=${this.placeholderCellTemplate}
       @scrollThresholdReached=${this.scrollThresholdReached}
       @visibleCellsChanged=${this.visibleCellsChanged}
-    ></infinite-scroller>`;
+      >${this.displayMode === 'grid'
+        ? html`<slot name="result-last-tile" slot="result-last-tile"></slot>`
+        : nothing}
+    </infinite-scroller>`;
   }
 
   private get infiniteScrollerClasses() {
@@ -615,6 +618,9 @@ export class CollectionBrowser
         @titleLetterChanged=${this.titleLetterSelected}
         @creatorLetterChanged=${this.creatorLetterSelected}
       >
+        <div slot="sortbar-left-slot">
+          <slot name="sortbar-left-slot"></slot>
+        </div>
       </sort-filter-bar>
     `;
   }
@@ -1178,10 +1184,6 @@ export class CollectionBrowser
       this.handleQueryChange();
     }
 
-    if (changed.has('suppressResultTiles') && this.suppressResultTiles) {
-      this.pagesToRender = 0;
-    }
-
     if (changed.has('searchResultsLoading')) {
       this.emitSearchResultsLoadingChanged();
     }
@@ -1420,7 +1422,11 @@ export class CollectionBrowser
       return;
 
     // If the new state prevents us from updating the search results, don't reset
-    if (!this.canPerformSearch) return;
+    if (
+      !this.canPerformSearch &&
+      !(this.clearResultsOnEmptyQuery && this.baseQuery === '')
+    )
+      return;
 
     this.previousQueryKey = this.pageFetchQueryKey;
 
@@ -1432,9 +1438,9 @@ export class CollectionBrowser
     this.pageFetchesInProgress = {};
     this.endOfDataReached = false;
     this.pagesToRender =
-        this.initialPageNumber === 1
-          ? 2 // First two pages are batched into one request when starting from page 1
-          : this.initialPageNumber;
+      this.initialPageNumber === 1
+        ? 2 // First two pages are batched into one request when starting from page 1
+        : this.initialPageNumber;
     this.queryErrorMessage = undefined;
 
     // Reset the infinite scroller's item count, so that it
@@ -1751,27 +1757,26 @@ export class CollectionBrowser
   }
 
   facetClickHandler({
-    detail: { key, state: facetState, negative },
+    detail: { facetType, bucket, negative },
   }: CustomEvent<FacetEventDetails>): void {
+    let action: analyticsActions;
     if (negative) {
-      this.analyticsHandler?.sendEvent({
-        category: this.searchContext,
-        action:
-          facetState !== 'none'
-            ? analyticsActions.facetNegativeSelected
-            : analyticsActions.facetNegativeDeselected,
-        label: key,
-      });
+      action =
+        bucket.state !== 'none'
+          ? analyticsActions.facetNegativeSelected
+          : analyticsActions.facetNegativeDeselected;
     } else {
-      this.analyticsHandler?.sendEvent({
-        category: this.searchContext,
-        action:
-          facetState !== 'none'
-            ? analyticsActions.facetSelected
-            : analyticsActions.facetDeselected,
-        label: key,
-      });
+      action =
+        bucket.state !== 'none'
+          ? analyticsActions.facetSelected
+          : analyticsActions.facetDeselected;
     }
+
+    this.analyticsHandler?.sendEvent({
+      category: this.searchContext,
+      action,
+      label: facetType,
+    });
   }
 
   private async fetchFacets() {