@internetarchive/collection-browser 2.7.13 → 2.7.14

package/src/restoration-state-handler.ts

@@ -87,7 +87,7 @@ export class RestorationStateHandler
 
   private persistQueryStateToUrl(
     state: RestorationState,
-    forceReplace = false
+    forceReplace = false,
   ) {
     const url = new URL(window.location.href);
     const oldParams = new URLSearchParams(url.searchParams);
@@ -145,10 +145,9 @@ export class RestorationStateHandler
 
     if (state.selectedFacets) {
       for (const [facetName, facetValues] of Object.entries(
-        state.selectedFacets
+        state.selectedFacets,
       )) {
         const facetEntries = Object.entries(facetValues);
-        // eslint-disable-next-line no-continue
         if (facetEntries.length === 0) continue;
         for (const [key, data] of facetEntries) {
           const notValue = data.state === 'hidden';
@@ -165,7 +164,7 @@ export class RestorationStateHandler
     if (state.minSelectedDate && state.maxSelectedDate) {
       newParams.append(
         'and[]',
-        `year:[${state.minSelectedDate} TO ${state.maxSelectedDate}]`
+        `year:[${state.minSelectedDate} TO ${state.maxSelectedDate}]`,
       );
     }
 
@@ -221,7 +220,7 @@ export class RestorationStateHandler
         facets: state.selectedFacets,
       },
       '',
-      url
+      url,
     );
   }
 
@@ -318,18 +317,18 @@ export class RestorationStateHandler
             if (minDate && maxDate) {
               restorationState.minSelectedDate = minDate.substring(
                 1,
-                minDate.length
+                minDate.length,
               );
               restorationState.maxSelectedDate = maxDate.substring(
                 0,
-                maxDate.length - 1
+                maxDate.length - 1,
               );
             } else {
               this.setSelectedFacetState(
                 restorationState.selectedFacets,
                 field as FacetOption,
                 value,
-                'selected'
+                'selected',
               );
             }
             break;
@@ -345,7 +344,7 @@ export class RestorationStateHandler
               restorationState.selectedFacets,
               field as FacetOption,
               value,
-              'selected'
+              'selected',
             );
         }
       });
@@ -358,7 +357,7 @@ export class RestorationStateHandler
           restorationState.selectedFacets,
           field as FacetOption,
           value,
-          'hidden'
+          'hidden',
         );
       });
     }
@@ -408,13 +407,13 @@ export class RestorationStateHandler
   private paramsMatch(
     searchParams1: URLSearchParams,
     searchParams2: URLSearchParams,
-    keys: string[]
+    keys: string[],
   ): boolean {
     return keys.every(key =>
       arrayEquals(
         searchParams1.getAll(key).sort(),
-        searchParams2.getAll(key).sort()
-      )
+        searchParams2.getAll(key).sort(),
+      ),
     );
   }
 
@@ -423,7 +422,7 @@ export class RestorationStateHandler
    * when loading state from the URL.
    */
   private removeRecognizedParams(
-    searchParams: URLSearchParams
+    searchParams: URLSearchParams,
   ): URLSearchParams {
     // Remove all of our standard params
     searchParams.delete('query');
@@ -464,7 +463,7 @@ export class RestorationStateHandler
     selectedFacets: SelectedFacets,
     field: FacetOption,
     value: string,
-    state: FacetState
+    state: FacetState,
   ): void {
     const facet = selectedFacets[field];
     if (!facet) return; // Unrecognized facet group, ignore it.

package/src/sort-filter-bar/alpha-bar.ts

@@ -33,19 +33,18 @@ export class AlphaBar extends LitElement {
       <section id="container" aria-label=${this.ariaLandmarkLabel ?? nothing}>
         <ul>
           ${this.alphabet.map(
-            letter =>
-              html`
-                <li
-                  class=${letter === this.selectedUppercaseLetter
-                    ? 'selected'
-                    : nothing}
-                  @mousemove=${this.handleMouseMove}
-                  @mouseleave=${this.handleMouseLeave}
-                >
-                  ${this.letterButtonTemplate(letter)}
-                  ${this.tooltipTemplate(letter)}
-                </li>
-              `
+            letter => html`
+              <li
+                class=${letter === this.selectedUppercaseLetter
+                  ? 'selected'
+                  : nothing}
+                @mousemove=${this.handleMouseMove}
+                @mouseleave=${this.handleMouseLeave}
+              >
+                ${this.letterButtonTemplate(letter)}
+                ${this.tooltipTemplate(letter)}
+              </li>
+            `,
           )}
         </ul>
       </section>
@@ -87,7 +86,7 @@ export class AlphaBar extends LitElement {
     this.dispatchEvent(
       new CustomEvent('letterChanged', {
         detail: { selectedLetter: this.selectedUppercaseLetter },
-      })
+      }),
     );
   }
 
@@ -127,10 +126,10 @@ export class AlphaBar extends LitElement {
     // (but not including any scrollbar).
     const bodyStyle = getComputedStyle(document.body);
     const bodyMarginLeft = parseFloat(
-      bodyStyle.getPropertyValue('margin-left')
+      bodyStyle.getPropertyValue('margin-left'),
     );
     const bodyMarginRight = parseFloat(
-      bodyStyle.getPropertyValue('margin-right')
+      bodyStyle.getPropertyValue('margin-right'),
     );
     const bodyWidthWithMargin =
       document.body.clientWidth + bodyMarginLeft + bodyMarginRight;
@@ -155,7 +154,7 @@ export class AlphaBar extends LitElement {
       left -= overflowAmt;
       this.tooltip.style.setProperty(
         '--tooltipArrowOffset',
-        `${overflowAmt}px`
+        `${overflowAmt}px`,
       );
     }
 

package/src/sort-filter-bar/sort-filter-bar.ts

@@ -228,7 +228,7 @@ export class SortFilterBar
 
     if (changed.has('resizeObserver') || changed.has('enableSortOptionsSlot')) {
       const oldObserver = changed.get(
-        'resizeObserver'
+        'resizeObserver',
       ) as SharedResizeObserverInterface;
       if (oldObserver) this.disconnectResizeObserver(oldObserver);
       this.setupResizeObserver();
@@ -239,12 +239,12 @@ export class SortFilterBar
     if (this.dropdownBackdropVisible) {
       document.addEventListener(
         'keydown',
-        this.boundSortBarSelectorEscapeListener
+        this.boundSortBarSelectorEscapeListener,
       );
     } else {
       document.removeEventListener(
         'keydown',
-        this.boundSortBarSelectorEscapeListener
+        this.boundSortBarSelectorEscapeListener,
       );
     }
   }
@@ -267,7 +267,7 @@ export class SortFilterBar
   }
 
   private disconnectResizeObserver(
-    resizeObserver: SharedResizeObserverInterface
+    resizeObserver: SharedResizeObserverInterface,
   ) {
     if (this.sortSelectorContainer) {
       resizeObserver.removeObserver({
@@ -430,7 +430,7 @@ export class SortFilterBar
       .filter(opt => opt.shownInSortBar)
       .filter(opt => this.showRelevance || opt.field !== SortField.relevance)
       .filter(
-        opt => this.showDateFavorited || opt.field !== SortField.datefavorited
+        opt => this.showDateFavorited || opt.field !== SortField.datefavorited,
       );
 
     return html`
@@ -439,12 +439,11 @@ export class SortFilterBar
         class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}
       >
         ${this.getSortDropdown({
-          displayName: html`${SORT_OPTIONS[this.finalizedSortField]
-            .displayName}`,
+          displayName: html`${SORT_OPTIONS[this.finalizedSortField].displayName}`,
           id: 'mobile-dropdown',
           selected: true,
           dropdownOptions: displayedOptions.map(opt =>
-            this.getDropdownOption(opt.field)
+            this.getDropdownOption(opt.field),
           ),
           selectedOption: this.finalizedSortField,
           onOptionSelected: this.mobileSortChanged,
@@ -452,7 +451,7 @@ export class SortFilterBar
             this.dropdownBackdropVisible = this.mobileDropdown.open;
             this.mobileDropdown.classList.toggle(
               'open',
-              this.mobileDropdown.open
+              this.mobileDropdown.open,
             );
           },
         })}
@@ -479,7 +478,7 @@ export class SortFilterBar
       displayName?: TemplateResult;
       selected?: boolean;
       onClick?: (e: Event) => void;
-    }
+    },
   ): TemplateResult {
     const isSelected =
       options?.selected ?? this.finalizedSortField === sortField;
@@ -759,7 +758,7 @@ export class SortFilterBar
   /** Toggles the current sort direction between 'asc' and 'desc' */
   private toggleSortDirection() {
     this.setSortDirection(
-      this.finalizedSortDirection === 'desc' ? 'asc' : 'desc'
+      this.finalizedSortDirection === 'desc' ? 'asc' : 'desc',
     );
   }
 
@@ -896,14 +895,14 @@ export class SortFilterBar
   }
 
   private titleLetterChanged(
-    e: CustomEvent<{ selectedLetter: string | undefined }>
+    e: CustomEvent<{ selectedLetter: string | undefined }>,
   ) {
     this.selectedTitleFilter = e.detail.selectedLetter ?? null;
     this.emitTitleLetterChangedEvent();
   }
 
   private creatorLetterChanged(
-    e: CustomEvent<{ selectedLetter: string | undefined }>
+    e: CustomEvent<{ selectedLetter: string | undefined }>,
   ) {
     this.selectedCreatorFilter = e.detail.selectedLetter ?? null;
     this.emitCreatorLetterChangedEvent();
@@ -914,7 +913,7 @@ export class SortFilterBar
       'titleLetterChanged',
       {
         detail: { selectedLetter: this.selectedTitleFilter },
-      }
+      },
     );
     this.dispatchEvent(event);
   }
@@ -924,7 +923,7 @@ export class SortFilterBar
       'creatorLetterChanged',
       {
         detail: { selectedLetter: this.selectedCreatorFilter },
-      }
+      },
     );
     this.dispatchEvent(event);
   }

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

@@ -87,7 +87,7 @@ export class AccountTile extends BaseTileComponent {
     e.preventDefault();
     const event = new CustomEvent<{ x: number; y: number }>(
       'infoButtonPressed',
-      { detail: { x: e.clientX, y: e.clientY } }
+      { detail: { x: e.clientX, y: e.clientY } },
     );
     this.dispatchEvent(event);
   }

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

@@ -99,7 +99,7 @@ export class CollectionTile extends BaseTileComponent {
     e.preventDefault();
     const event = new CustomEvent<{ x: number; y: number }>(
       'infoButtonPressed',
-      { detail: { x: e.clientX, y: e.clientY } }
+      { detail: { x: e.clientX, y: e.clientY } },
     );
     this.dispatchEvent(event);
   }

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

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-duplicates */
 import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -202,12 +201,13 @@ export class ItemTile extends BaseTileComponent {
       <ul class="capture-dates">
         ${map(
           this.model.captureDates,
-          date => html`<li>
-            ${this.displayValueProvider.webArchivesCaptureLink(
-              this.model!.title,
-              date
-            )}
-          </li>`
+          date =>
+            html`<li>
+              ${this.displayValueProvider.webArchivesCaptureLink(
+                this.model!.title,
+                date,
+              )}
+            </li>`,
         )}
       </ul>
     `;
@@ -215,7 +215,7 @@ export class ItemTile extends BaseTileComponent {
 
   private get isSortedByDate(): boolean {
     return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(
-      this.effectiveSort?.field as string
+      this.effectiveSort?.field as string,
     );
   }
 
@@ -234,7 +234,7 @@ export class ItemTile extends BaseTileComponent {
     e.preventDefault();
     const event = new CustomEvent<{ x: number; y: number }>(
       'infoButtonPressed',
-      { detail: { x: e.clientX, y: e.clientY } }
+      { detail: { x: e.clientX, y: e.clientY } },
     );
     this.dispatchEvent(event);
   }

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

@@ -29,7 +29,7 @@ export class TileStats extends LitElement {
     const formattedReviewCount = formatCount(
       this.commentCount,
       'short',
-      'short'
+      'short',
     );
 
     const uploadsOrViewsTitle =
@@ -57,10 +57,10 @@ export class TileStats extends LitElement {
               </span>
               ${formatCount(
                 this.mediatype === 'account'
-                  ? this.itemCount ?? 0
-                  : this.viewCount ?? 0,
+                  ? (this.itemCount ?? 0)
+                  : (this.viewCount ?? 0),
+                'short',
                 'short',
-                'short'
               )}
             </p>
           </li>

package/src/tiles/hover/hover-pane-controller.ts

@@ -151,7 +151,7 @@ export class HoverPaneController implements HoverPaneControllerInterface {
       HoverPaneProviderInterface &
       HTMLElement,
     /** Options for adjusting the hover pane behavior (offsets, delays, etc.) */
-    options: HoverPaneControllerOptions = {}
+    options: HoverPaneControllerOptions = {},
   ) {
     this.mobileBreakpoint = options.mobileBreakpoint ?? this.mobileBreakpoint;
     this.offsetX = options.offsetX ?? this.offsetX;

package/src/tiles/hover/tile-hover-pane.ts

@@ -26,7 +26,7 @@ export class TileHoverPane extends LitElement {
 
   @property({ type: Number }) mobileBreakpoint?: number;
 
-  @property({ type: Number }) currentWidth?: Number;
+  @property({ type: Number }) currentWidth?: number;
 
   @property({ type: Object })
   collectionTitles?: CollectionTitles;
@@ -95,7 +95,9 @@ export class TileHoverPane extends LitElement {
         visibility: hidden;
         opacity: 0;
         transform: translateY(8px);
-        transition: opacity 0.1s ease-in, transform 0.1s ease-in;
+        transition:
+          opacity 0.1s ease-in,
+          transform 0.1s ease-in;
         --image-width: auto;
       }
 

package/src/tiles/item-image.ts

@@ -64,7 +64,7 @@ export class ItemImage extends LitElement {
         return this.baseImageUrl
           ? `https://web.archive.org/thumb/${domain}?generate=1`
           : nothing;
-      } catch (err) {
+      } catch {
         return `${this.baseImageUrl}/images/notfound.png`;
       }
     }

package/src/tiles/list/tile-list-compact.ts

@@ -73,7 +73,7 @@ export class TileListCompact extends BaseTileComponent {
 
     return this.displayValueProvider.itemPageUrl(
       this.model.identifier,
-      this.model.mediatype === 'collection'
+      this.model.mediatype === 'collection',
     );
   }
 
@@ -155,7 +155,7 @@ export class TileListCompact extends BaseTileComponent {
 
   private get isSortedByDate(): boolean {
     return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(
-      this.effectiveSort?.field as string
+      this.effectiveSort?.field as string,
     );
   }
 

package/src/tiles/list/tile-list.ts

@@ -90,7 +90,7 @@ export class TileList extends BaseTileComponent {
     const isCollection = this.model.mediatype === 'collection';
     const href = this.displayValueProvider.itemPageUrl(
       this.model.identifier,
-      isCollection
+      isCollection,
     );
 
     return html`<a href=${href}>
@@ -149,7 +149,7 @@ export class TileList extends BaseTileComponent {
       : this.detailsLink(
           this.model.identifier,
           this.model.title,
-          this.model.mediatype === 'collection'
+          this.model.mediatype === 'collection',
         );
   }
 
@@ -203,7 +203,7 @@ export class TileList extends BaseTileComponent {
         ${this.labelTemplate(msg('By'))}
         ${join(
           map(this.model.creators, id => this.searchLink('creator', id)),
-          ', '
+          ', ',
         )}
       </div>
     `;
@@ -233,7 +233,7 @@ export class TileList extends BaseTileComponent {
     ) {
       return this.metadataTemplate(
         formatDate(this.date, 'long'),
-        this.displayValueProvider.dateLabel
+        this.displayValueProvider.dateLabel,
       );
     }
     return nothing;
@@ -253,7 +253,7 @@ export class TileList extends BaseTileComponent {
 
     return this.metadataTemplate(
       `${formatCount(viewCount, this.formatSize)}`,
-      msg('Views')
+      msg('Views'),
     );
   }
 
@@ -274,7 +274,7 @@ export class TileList extends BaseTileComponent {
         ${this.labelTemplate(msg('Topics'))}
         ${join(
           map(this.model.subjects, id => this.searchLink('subject', id)),
-          ', '
+          ', ',
         )}
       </div>
     `;
@@ -296,10 +296,10 @@ export class TileList extends BaseTileComponent {
     return this.metadataTemplate(
       // Sanitize away any HTML tags and convert line breaks to spaces.
       unsafeHTML(
-        DOMPurify.sanitize(this.model?.description?.replace(/\n/g, ' ') ?? '')
+        DOMPurify.sanitize(this.model?.description?.replace(/\n/g, ' ') ?? ''),
       ),
       '',
-      'description'
+      'description',
     );
   }
 
@@ -340,19 +340,20 @@ export class TileList extends BaseTileComponent {
       <ul class="capture-dates">
         ${map(
           this.model.captureDates,
-          date => html`<li>
-            ${this.displayValueProvider.webArchivesCaptureLink(
-              this.model!.title,
-              date
-            )}
-          </li>`
+          date =>
+            html`<li>
+              ${this.displayValueProvider.webArchivesCaptureLink(
+                this.model!.title,
+                date,
+              )}
+            </li>`,
         )}
       </ul>
     `;
   }
 
   // Utility functions
-  // eslint-disable-next-line default-param-last
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private metadataTemplate(text: any, label = '', id?: string) {
     if (!text) return nothing;
     return html`
@@ -375,28 +376,25 @@ export class TileList extends BaseTileComponent {
     const query = encodeURIComponent(`${field}:"${searchTerm}"`);
     // No whitespace after closing tag
     // Note: single ' for href='' to wrap " in query var gets changed back by yarn format
-
-    /* eslint-disable lit/no-invalid-html */
     return html`<a
       href="${this.baseNavigationUrl}/search?query=${query}"
       rel="nofollow"
     >
       ${DOMPurify.sanitize(searchTerm)}</a
     >`;
-    /* eslint-enable lit/no-invalid-html */
   }
 
   private detailsLink(
     identifier?: string,
     text?: string,
-    isCollection = false
+    isCollection = false,
   ): TemplateResult | typeof nothing {
     if (!identifier) return nothing;
 
     const linkText = text ?? identifier;
     const linkHref = this.displayValueProvider.itemPageUrl(
       identifier,
-      isCollection
+      isCollection,
     );
 
     return html`<a href=${linkHref}> ${DOMPurify.sanitize(linkText)} </a>`;
@@ -417,7 +415,7 @@ export class TileList extends BaseTileComponent {
       default:
         return this.displayValueProvider.itemPageUrl(
           this.model.mediatype,
-          true
+          true,
         );
     }
   }
@@ -447,8 +445,8 @@ export class TileList extends BaseTileComponent {
           this.detailsLink(
             collection,
             this.collectionTitles?.get(collection) ?? collection,
-            true
-          )
+            true,
+          ),
         );
       }
     }
@@ -664,7 +662,7 @@ export class TileList extends BaseTileComponent {
       /*
        * With the exception of the title line, allow these to wrap if
        * the space becomes too small to accommodate them together.
-       * 
+       *
        * The title line is excluded because it contains the mediatype icon
        * which we don't want to wrap.
        */

package/src/tiles/tile-dispatcher.ts

@@ -60,7 +60,7 @@ export class TileDispatcher
   @property({ type: Boolean }) enableHoverPane = false;
 
   @property({ type: String }) manageCheckTitle = msg(
-    'Remove this item from the list'
+    'Remove this item from the list',
   );
 
   private hoverPaneController?: HoverPaneControllerInterface;
@@ -155,7 +155,7 @@ export class TileDispatcher
 
     return this.displayValueProvider.itemPageUrl(
       this.model.identifier,
-      this.model.mediatype === 'collection'
+      this.model.mediatype === 'collection',
     );
   }
 
@@ -229,7 +229,7 @@ export class TileDispatcher
   updated(props: PropertyValues) {
     if (props.has('resizeObserver')) {
       const previousObserver = props.get(
-        'resizeObserver'
+        'resizeObserver',
       ) as SharedResizeObserverInterface;
       this.stopResizeObservation(previousObserver);
       this.startResizeObservation();
@@ -247,7 +247,7 @@ export class TileDispatcher
     }
 
     this.dispatchEvent(
-      new CustomEvent('resultSelected', { detail: this.model })
+      new CustomEvent('resultSelected', { detail: this.model }),
     );
   }
 
@@ -263,7 +263,7 @@ export class TileDispatcher
   }
 
   private tileInfoButtonPressed(
-    e: CustomEvent<{ x: number; y: number }>
+    e: CustomEvent<{ x: number; y: number }>,
   ): void {
     this.hoverPaneController?.toggleHoverPane({
       coords: e.detail,

package/src/tiles/tile-display-value-provider.ts

@@ -26,7 +26,7 @@ export class TileDisplayValueProvider {
       collectionPagePath?: string;
       sortParam?: SortParam;
       creatorFilter?: string;
-    } = {}
+    } = {},
   ) {
     this.model = options.model;
     this.baseNavigationUrl = options.baseNavigationUrl;
@@ -55,7 +55,7 @@ export class TileDisplayValueProvider {
           .normalize('NFD')
           .replace(/[^A-Z]+/gi, '')
           .toUpperCase()
-          .startsWith(firstLetter)
+          .startsWith(firstLetter),
       );
     }
 
@@ -98,7 +98,7 @@ export class TileDisplayValueProvider {
    */
   itemPageUrl(
     identifier?: string,
-    isCollection = false
+    isCollection = false,
   ): string | typeof nothing {
     if (!identifier || this.baseNavigationUrl == null) return nothing;
     const basePath = isCollection ? this.collectionPagePath : '/details/';
@@ -115,7 +115,7 @@ export class TileDisplayValueProvider {
       .replace(/[TZ:-]/g, '')
       .replace(/\..*/, '');
     const captureHref = `https://web.archive.org/web/${captureDateStr}/${encodeURIComponent(
-      url
+      url,
     )}`;
     const captureText = formatDate(date, 'long');