@internetarchive/collection-browser 1.13.0-alpha2 → 1.14.0

package/src/collection-browser.ts

@@ -41,9 +41,9 @@ import type { RecaptchaManagerInterface } from '@internetarchive/recaptcha-manag
 import './tiles/tile-dispatcher';
 import './tiles/collection-browser-loading-tile';
 import './sort-filter-bar/sort-filter-bar';
+import './manage/manage-bar';
 import './collection-facets';
 import './circular-activity-indicator';
-import './sort-filter-bar/sort-filter-bar';
 import {
   SelectedFacets,
   SortField,
@@ -75,6 +75,8 @@ import {
 import { srOnlyStyle } from './styles/sr-only';
 import { sha1 } from './utils/sha1';
 import type { CollectionFacets } from './collection-facets';
+import type { ManageableItem } from './manage/manage-bar';
+import { formatDate } from './utils/format-date';
 
 type RequestKind = 'full' | 'hits' | 'aggregations';
 
@@ -241,8 +243,9 @@ export class CollectionBrowser
   private placeholderCellTemplate = html`<collection-browser-loading-tile></collection-browser-loading-tile>`;
 
   private tileModelAtCellIndex(index: number): TileModel | undefined {
-    const pageNumber = Math.floor(index / this.pageSize) + 1;
-    const itemIndex = index % this.pageSize;
+    const offsetIndex = index + this.tileModelOffset;
+    const pageNumber = Math.floor(offsetIndex / this.pageSize) + 1;
+    const itemIndex = offsetIndex % this.pageSize;
     const model = this.dataSource[pageNumber]?.[itemIndex];
     /**
      * If we encounter a model we don't have yet and we're not in the middle of an
@@ -279,6 +282,11 @@ export class CollectionBrowser
    */
   private dataSource: Record<string, TileModel[]> = {};
 
+  /**
+   * How many tiles to offset the data source by, to account for any removed tiles.
+   */
+  private tileModelOffset = 0;
+
   @query('infinite-scroller')
   private infiniteScroller!: InfiniteScroller;
 
@@ -531,7 +539,9 @@ export class CollectionBrowser
   private get rightColumnTemplate(): TemplateResult {
     return html`
       <div id="right-column" class="column">
-        ${this.sortFilterBarTemplate}
+        ${this.isManageView
+          ? this.manageBarTemplate
+          : this.sortFilterBarTemplate}
         ${this.displayMode === `list-compact`
           ? this.listHeaderTemplate
           : nothing}
@@ -582,6 +592,153 @@ export class CollectionBrowser
     `;
   }
 
+  private get manageBarTemplate(): TemplateResult {
+    return html`
+      <manage-bar
+        showSelectAll
+        showUnselectAll
+        @removeItems=${this.handleRemoveItems}
+        @selectAll=${this.checkAllTiles}
+        @unselectAll=${this.uncheckAllTiles}
+        @cancel=${() => {
+          this.isManageView = false;
+          this.uncheckAllTiles();
+        }}
+      ></manage-bar>
+    `;
+  }
+
+  /**
+   * Handler for when the user requests to remove all checked items via the manage bar.
+   * Emits an `itemRemovalRequested` event with all checked tile models.
+   */
+  private handleRemoveItems(): void {
+    this.dispatchEvent(
+      new CustomEvent<{ items: ManageableItem[] }>('itemRemovalRequested', {
+        detail: {
+          items: this.checkedTileModels.map(model => ({
+            ...model,
+            date: formatDate(model.datePublished, 'long'),
+          })),
+        },
+      })
+    );
+  }
+
+  /**
+   * Removes all tile models that are currently checked & adjusts the paging
+   * of the data source to account for any new gaps in the data.
+   */
+  removeCheckedTiles(): void {
+    // To make sure our data source remains page-aligned, we will offset our data source by
+    // the number of removed tiles, so that we can just add the offset when the infinite
+    // scroller queries for cell contents.
+    // This only matters while we're still viewing the same set of results. If the user changes
+    // their query/filters/sort, then the data source is overwritten and the offset cleared.
+    const { checkedTileModels, uncheckedTileModels } = this;
+    const numChecked = checkedTileModels.length;
+    if (numChecked === 0) return;
+    this.tileModelOffset += numChecked;
+
+    const newDataSource: typeof this.dataSource = {};
+
+    // Which page the remaining tile models start on, post-offset
+    let offsetPageNumber = Math.floor(this.tileModelOffset / this.pageSize) + 1;
+    let indexOnPage = this.tileModelOffset % this.pageSize;
+
+    // Fill the pages up to that point with empty models
+    for (let page = 1; page <= offsetPageNumber; page += 1) {
+      const remainingHidden = this.tileModelOffset - this.pageSize * (page - 1);
+      const offsetCellsOnPage = Math.min(this.pageSize, remainingHidden);
+      newDataSource[page] = Array(offsetCellsOnPage).fill(undefined);
+    }
+
+    // Shift all the remaining tiles into their new positions in the data source
+    for (const model of uncheckedTileModels) {
+      if (!newDataSource[offsetPageNumber])
+        newDataSource[offsetPageNumber] = [];
+      newDataSource[offsetPageNumber].push(model);
+      indexOnPage += 1;
+      if (indexOnPage >= this.pageSize) {
+        offsetPageNumber += 1;
+        indexOnPage = 0;
+      }
+    }
+
+    // Swap in the new data source and update the infinite scroller
+    this.dataSource = newDataSource;
+    if (this.totalResults) this.totalResults -= numChecked;
+    if (this.infiniteScroller) {
+      this.infiniteScroller.itemCount -= numChecked;
+      this.infiniteScroller.refreshAllVisibleCells();
+    }
+  }
+
+  /**
+   * Checks every tile's management checkbox
+   */
+  checkAllTiles(): void {
+    this.mapDataSource(model => ({ ...model, checked: true }));
+  }
+
+  /**
+   * Unchecks every tile's management checkbox
+   */
+  uncheckAllTiles(): void {
+    this.mapDataSource(model => ({ ...model, checked: false }));
+  }
+
+  /**
+   * Applies the given map function to all of the tile models in every page of the data
+   * source. This method updates the data source object in immutable fashion.
+   *
+   * @param mapFn A callback function to apply on each tile model, as with Array.map
+   */
+  private mapDataSource(
+    mapFn: (model: TileModel, index: number, array: TileModel[]) => TileModel
+  ): void {
+    this.dataSource = Object.fromEntries(
+      Object.entries(this.dataSource).map(([page, tileModels]) => [
+        page,
+        tileModels.map((model, index, array) =>
+          model ? mapFn(model, index, array) : model
+        ),
+      ])
+    );
+    this.infiniteScroller?.refreshAllVisibleCells();
+  }
+
+  /**
+   * An array of all the tile models whose management checkboxes are checked
+   */
+  get checkedTileModels(): TileModel[] {
+    return this.getFilteredTileModels(model => model.checked);
+  }
+
+  /**
+   * An array of all the tile models whose management checkboxes are unchecked
+   */
+  get uncheckedTileModels(): TileModel[] {
+    return this.getFilteredTileModels(model => !model.checked);
+  }
+
+  /**
+   * Returns a flattened, filtered array of all the tile models in the data source
+   * for which the given predicate returns a truthy value.
+   *
+   * @param predicate A callback function to apply on each tile model, as with Array.filter
+   * @returns A filtered array of tile models satisfying the predicate
+   */
+  private getFilteredTileModels(
+    predicate: (model: TileModel, index: number, array: TileModel[]) => unknown
+  ): TileModel[] {
+    return Object.values(this.dataSource)
+      .flat()
+      .filter((model, index, array) =>
+        model ? predicate(model, index, array) : false
+      );
+  }
+
   private userChangedSort(
     e: CustomEvent<{
       selectedSort: SortField;
@@ -781,6 +938,7 @@ export class CollectionBrowser
         .contentWidth=${this.contentWidth}
         .query=${this.baseQuery}
         .filterMap=${this.filterMap}
+        .isManageView=${this.isManageView}
         .modalManager=${this.modalManager}
         ?collapsableFacets=${this.mobileView}
         ?facetsLoading=${this.facetsLoading}
@@ -869,6 +1027,17 @@ export class CollectionBrowser
     return `year:[${this.minSelectedDate} TO ${this.maxSelectedDate}]`;
   }
 
+  /**
+   * Emits an event indicating a change in whether the manage mode is shown.
+   */
+  private emitManageModeChangedEvent(): void {
+    this.dispatchEvent(
+      new CustomEvent<boolean>('manageModeChanged', {
+        detail: this.isManageView,
+      })
+    );
+  }
+
   firstUpdated(): void {
     this.setupStateRestorationObserver();
     this.restoreState();
@@ -891,7 +1060,7 @@ export class CollectionBrowser
       changed.has('baseImageUrl') ||
       changed.has('loggedIn')
     ) {
-      this.infiniteScroller?.reload();
+      this.infiniteScroller?.refreshAllVisibleCells();
     }
 
     if (
@@ -1000,6 +1169,12 @@ export class CollectionBrowser
       }
     }
 
+    if (changed.has('isManageView')) {
+      if (this.isManageView) this.displayMode = 'grid';
+      this.infiniteScroller?.refreshAllVisibleCells();
+      this.emitManageModeChangedEvent();
+    }
+
     if (changed.has('resizeObserver')) {
       const oldObserver = changed.get(
         'resizeObserver'
@@ -1125,14 +1300,6 @@ export class CollectionBrowser
     );
   }
 
-  private emitTabChanged(tabId: string) {
-    this.dispatchEvent(
-      new CustomEvent<String>('tabChanged', {
-        detail: tabId, 
-      })
-    );
-  }
-
   private disconnectResizeObserver(
     resizeObserver: SharedResizeObserverInterface
   ) {
@@ -1222,6 +1389,7 @@ export class CollectionBrowser
     this.previousQueryKey = this.pageFetchQueryKey;
 
     this.dataSource = {};
+    this.tileModelOffset = 0;
     this.totalResults = undefined;
     this.aggregations = undefined;
     this.fullYearsHistogramAggregation = undefined;
@@ -1654,7 +1822,7 @@ export class CollectionBrowser
         // giving it 0.5s to finish.
         setTimeout(() => {
           this.isScrollingToCell = false;
-          this.infiniteScroller?.reload();
+          this.infiniteScroller?.refreshAllVisibleCells();
           resolve();
         }, 500);
       }, 0);
@@ -1810,12 +1978,7 @@ export class CollectionBrowser
       return;
     }
 
-    this.totalResults = success.response.totalResults;
-
-    // switch tab to ?tab=about if this.totalResults is 0
-    if (this.totalResults === 0) {
-      this.emitTabChanged('about');
-    }
+    this.totalResults = success.response.totalResults - this.tileModelOffset;
 
     if (this.withinCollection) {
       this.collectionInfo = success.response.collectionExtraInfo;
@@ -1858,8 +2021,7 @@ export class CollectionBrowser
     if (resultCountDiscrepancy > 0) {
       this.endOfDataReached = true;
       if (this.infiniteScroller) {
-        this.infiniteScroller.itemCount =
-          this.estimatedTileCount - resultCountDiscrepancy;
+        this.infiniteScroller.itemCount = this.totalResults;
       }
     }
 
@@ -1975,6 +2137,7 @@ export class CollectionBrowser
 
       tiles.push({
         averageRating: result.avg_rating?.value,
+        checked: false,
         collections: result.collection?.values ?? [],
         collectionFilesCount: result.collection_files_count?.value ?? 0,
         collectionSize: result.collection_size?.value ?? 0,
@@ -2008,7 +2171,7 @@ export class CollectionBrowser
     const visiblePages = this.currentVisiblePageNumbers;
     const needsReload = visiblePages.includes(pageNumber);
     if (needsReload) {
-      this.infiniteScroller?.reload();
+      this.infiniteScroller?.refreshAllVisibleCells();
     }
   }
 
@@ -2116,6 +2279,16 @@ export class CollectionBrowser
    * Callback when a result is selected
    */
   resultSelected(event: CustomEvent<TileModel>): void {
+    if (this.isManageView) {
+      // Checked/unchecked state change -- rerender to ensure it propagates
+      // this.mapDataSource(model => ({ ...model }));
+      const cellIndex = Object.values(this.dataSource)
+        .flat()
+        .indexOf(event.detail);
+      if (cellIndex >= 0)
+        this.infiniteScroller?.refreshCell(cellIndex - this.tileModelOffset);
+    }
+
     this.analyticsHandler?.sendEvent({
       category: this.searchContext,
       action: analyticsActions.resultSelected,
@@ -2146,6 +2319,7 @@ export class CollectionBrowser
         .creatorFilter=${this.selectedCreatorFilter}
         .mobileBreakpoint=${this.mobileBreakpoint}
         .loggedIn=${this.loggedIn}
+        .isManageView=${this.isManageView}
         ?enableHoverPane=${true}
         @resultSelected=${(e: CustomEvent) => this.resultSelected(e)}
       >

package/src/collection-facets.ts

@@ -11,6 +11,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { map } from 'lit/directives/map.js';
 import { ref } from 'lit/directives/ref.js';
 import { msg } from '@lit/localize';
+import { classMap } from 'lit/directives/class-map.js';
 import type {
   Aggregation,
   AggregationSortType,
@@ -99,6 +100,8 @@ export class CollectionFacets extends LitElement {
 
   @property({ type: String }) collectionPagePath: string = '/details/';
 
+  @property({ type: Boolean }) isManageView = false;
+
   @property({ type: Object, attribute: false })
   modalManager?: ModalManagerInterface;
 
@@ -133,9 +136,14 @@ export class CollectionFacets extends LitElement {
   private allowedFacetCount = 6;
 
   render() {
+    const containerClasses = classMap({
+      loading: this.facetsLoading,
+      managing: this.isManageView,
+    });
+
     const datePickerLabelId = 'date-picker-label';
     return html`
-      <div id="container" class="${this.facetsLoading ? 'loading' : ''}">
+      <div id="container" class=${containerClasses}>
         ${this.showHistogramDatePicker &&
         (this.fullYearsHistogramAggregation || this.fullYearAggregationLoading)
           ? html`
@@ -715,6 +723,10 @@ export class CollectionFacets extends LitElement {
           opacity: 0.5;
         }
 
+        #container.managing {
+          opacity: 0.3;
+        }
+
         .histogram-loading-indicator {
           width: 100%;
           height: 2.25rem;

package/src/manage/manage-bar.ts

@@ -0,0 +1,151 @@
+import { msg } from '@lit/localize';
+import { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+
+export interface ManageableItem {
+  identifier: string;
+  title?: string;
+  date?: string;
+}
+
+@customElement('manage-bar')
+export class ManageBar extends LitElement {
+  /**
+   * The label displayed in front of the management buttons
+   */
+  @property({ type: String }) label = msg('Select items to un-favorite');
+
+  /**
+   * Whether to show the "Select All" button (default false)
+   */
+  @property({ type: Boolean }) showSelectAll = false;
+
+  /**
+   * Whether to show the "Unselect All" button (default false)
+   */
+  @property({ type: Boolean }) showUnselectAll = false;
+
+  render(): TemplateResult {
+    return html`
+      <div class="manage-container">
+        <span class="manage-label">${this.label}</span>
+        <div class="manage-buttons">
+          <button class="cancel-btn" @click=${this.cancelClicked}>
+            ${msg('Cancel')}
+          </button>
+          <button class="remove-btn" @click=${this.removeClicked}>
+            ${msg('Remove selected items')}
+          </button>
+          <div class="selection-buttons">
+            ${when(
+              this.showSelectAll,
+              () => html` <button
+                class="link-styled select-all-btn"
+                @click=${this.selectAllClicked}
+              >
+                ${msg('Select all')}
+              </button>`
+            )}
+            ${when(
+              this.showUnselectAll,
+              () => html` <button
+                class="link-styled unselect-all-btn"
+                @click=${this.unselectAllClicked}
+              >
+                ${msg('Unselect all')}
+              </button>`
+            )}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private cancelClicked(): void {
+    this.dispatchEvent(new CustomEvent('cancel'));
+  }
+
+  private removeClicked(): void {
+    this.dispatchEvent(new CustomEvent('removeItems'));
+  }
+
+  private selectAllClicked(): void {
+    this.dispatchEvent(new CustomEvent('selectAll'));
+  }
+
+  private unselectAllClicked(): void {
+    this.dispatchEvent(new CustomEvent('unselectAll'));
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .manage-container {
+        display: flex;
+        align-items: center;
+        column-gap: 5px;
+        padding: 10px 0 20px;
+        flex-wrap: wrap;
+      }
+
+      .manage-label {
+        display: inline-block;
+        font-weight: bold;
+        font-size: 1.8rem;
+        padding-right: 10px;
+      }
+
+      .manage-buttons {
+        display: flex;
+        align-items: center;
+        column-gap: 5px;
+      }
+
+      button {
+        display: inline-block;
+        font-size: 1.4rem;
+        cursor: pointer;
+        white-space: nowrap;
+      }
+
+      button.link-styled {
+        margin: 0;
+        padding: 6px;
+        border: 0;
+        appearance: none;
+        background: none;
+        color: var(--ia-theme-link-color, #4b64ff);
+        text-decoration: none;
+      }
+      button.link-styled:hover {
+        text-decoration: underline;
+      }
+
+      button:not(.link-styled) {
+        margin: 0;
+        padding: 6px 12px;
+        border-radius: 4px;
+        color: white;
+      }
+
+      /* Button styles derived from legacy version */
+      .cancel-btn {
+        background: #777777;
+        border: 1px solid #666666;
+      }
+      .cancel-btn:hover {
+        background: #6b6b6b;
+        border: 1px solid #505050;
+      }
+
+      .remove-btn {
+        background: #d9534f;
+        border: 1px solid #d43f3a;
+      }
+      .remove-btn:hover {
+        background: #d2322d;
+        border: 1px solid #ac2925;
+      }
+    `;
+  }
+}

package/src/models.ts

@@ -6,6 +6,7 @@ import {
 
 export interface TileModel {
   averageRating?: number;
+  checked: boolean; // Whether this tile is currently checked for item management functions
   collectionIdentifier?: string;
   collectionName?: string;
   collectionFilesCount: number;

package/src/tiles/tile-dispatcher.ts

@@ -1,6 +1,7 @@
 import { css, html, nothing, PropertyValues } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { msg } from '@lit/localize';
 import type {
   SharedResizeObserverInterface,
   SharedResizeObserverResizeHandlerInterface,
@@ -46,6 +47,8 @@ export class TileDispatcher
 
   @property({ type: String }) tileDisplayMode?: TileDisplayMode;
 
+  @property({ type: Boolean }) isManageView = false;
+
   @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;
 
   @property({ type: Object })
@@ -54,6 +57,10 @@ export class TileDispatcher
   /** Whether this tile should include a hover pane at all (for applicable tile modes) */
   @property({ type: Boolean }) enableHoverPane = false;
 
+  @property({ type: String }) manageCheckTitle = msg(
+    'Remove this item from the list'
+  );
+
   private hoverPaneController?: HoverPaneControllerInterface;
 
   @query('#container')
@@ -82,7 +89,7 @@ export class TileDispatcher
         ${this.tileDisplayMode === 'list-header'
           ? this.headerTemplate
           : this.tileTemplate}
-        ${hoverPaneTemplate}
+        ${this.manageCheckTemplate} ${hoverPaneTemplate}
       </div>
     `;
   }
@@ -125,10 +132,8 @@ export class TileDispatcher
         title=${this.shouldPrepareHoverPane
           ? nothing // Don't show title tooltips when we have the tile info popups
           : ifDefined(this.model?.title)}
-        @click=${() =>
-          this.dispatchEvent(
-            new CustomEvent('resultSelected', { detail: this.model })
-          )}
+        @click=${this.handleLinkClicked}
+        @contextmenu=${this.handleLinkContextMenu}
       >
         ${this.tile}
       </a>
@@ -151,6 +156,23 @@ export class TileDispatcher
     );
   }
 
+  private get manageCheckTemplate() {
+    if (!this.isManageView || this.tileDisplayMode !== 'grid') return nothing;
+
+    return html`
+      <div class="manage-check">
+        <input
+          type="checkbox"
+          title=${this.manageCheckTitle}
+          .checked=${this.model?.checked}
+          @change=${() => {
+            if (this.model) this.model.checked = !this.model.checked;
+          }}
+        />
+      </div>
+    `;
+  }
+
   /**
    * Whether hover pane behavior should be prepared for this tile
    * (e.g., whether mouse listeners should be attached, etc.)
@@ -211,6 +233,32 @@ export class TileDispatcher
     }
   }
 
+  /**
+   * Handler for when the tile link is left-clicked. Emits the `resultSelected` event.
+   * In manage view, it also checks/unchecks the tile.
+   */
+  private handleLinkClicked(e: Event): void {
+    if (this.isManageView) {
+      e.preventDefault();
+      if (this.model) this.model.checked = !this.model.checked;
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('resultSelected', { detail: this.model })
+    );
+  }
+
+  /**
+   * Handler for when the tile link is right-clicked.
+   * In manage view, it opens the item in a new tab. Otherwise, does nothing.
+   */
+  private handleLinkContextMenu(e: Event): void {
+    if (this.isManageView && this.linkTileHref !== nothing) {
+      e.preventDefault();
+      window.open(this.linkTileHref, '_blank');
+    }
+  }
+
   private tileInfoButtonPressed(
     e: CustomEvent<{ x: number; y: number }>
   ): void {
@@ -245,6 +293,7 @@ export class TileDispatcher
               .currentWidth=${currentWidth}
               .currentHeight=${currentHeight}
               .creatorFilter=${creatorFilter}
+              .isManageView=${this.isManageView}
               ?showInfoButton=${!this.isHoverEnabled}
               @infoButtonPressed=${this.tileInfoButtonPressed}
             >
@@ -257,6 +306,7 @@ export class TileDispatcher
               .currentWidth=${currentWidth}
               .currentHeight=${currentHeight}
               .creatorFilter=${creatorFilter}
+              .isManageView=${this.isManageView}
               ?showInfoButton=${!this.isHoverEnabled}
               @infoButtonPressed=${this.tileInfoButtonPressed}
             >
@@ -272,6 +322,7 @@ export class TileDispatcher
               .sortParam=${sortParam}
               .creatorFilter=${creatorFilter}
               .loggedIn=${this.loggedIn}
+              .isManageView=${this.isManageView}
               ?showInfoButton=${!this.isHoverEnabled}
               @infoButtonPressed=${this.tileInfoButtonPressed}
             >
@@ -358,6 +409,21 @@ export class TileDispatcher
         height: 100%;
       }
 
+      .manage-check {
+        position: absolute;
+        right: 0;
+        top: 0;
+        border: 5px solid #2c2c2c;
+        border-radius: 3px;
+        background-color: #2c2c2c;
+        z-index: 1;
+      }
+
+      .manage-check > input[type='checkbox'] {
+        display: block;
+        margin: 0;
+      }
+
       #touch-backdrop {
         position: fixed;
         width: 100vw;