@internetarchive/collection-browser 2.7.7-alpha.1 → 2.7.7

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,9 +145,10 @@ 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';
@@ -164,7 +165,7 @@ export class RestorationStateHandler
     if (state.minSelectedDate && state.maxSelectedDate) {
       newParams.append(
         'and[]',
-        `year:[${state.minSelectedDate} TO ${state.maxSelectedDate}]`,
+        `year:[${state.minSelectedDate} TO ${state.maxSelectedDate}]`
       );
     }
 
@@ -220,7 +221,7 @@ export class RestorationStateHandler
         facets: state.selectedFacets,
       },
       '',
-      url,
+      url
     );
   }
 
@@ -317,18 +318,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;
@@ -344,7 +345,7 @@ export class RestorationStateHandler
               restorationState.selectedFacets,
               field as FacetOption,
               value,
-              'selected',
+              'selected'
             );
         }
       });
@@ -357,7 +358,7 @@ export class RestorationStateHandler
           restorationState.selectedFacets,
           field as FacetOption,
           value,
-          'hidden',
+          'hidden'
         );
       });
     }
@@ -407,13 +408,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()
+      )
     );
   }
 
@@ -422,7 +423,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');
@@ -463,7 +464,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,18 +33,19 @@ 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>
@@ -86,7 +87,7 @@ export class AlphaBar extends LitElement {
     this.dispatchEvent(
       new CustomEvent('letterChanged', {
         detail: { selectedLetter: this.selectedUppercaseLetter },
-      }),
+      })
     );
   }
 
@@ -126,10 +127,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;
@@ -154,7 +155,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,11 +439,12 @@ 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,
@@ -451,7 +452,7 @@ export class SortFilterBar
             this.dropdownBackdropVisible = this.mobileDropdown.open;
             this.mobileDropdown.classList.toggle(
               'open',
-              this.mobileDropdown.open,
+              this.mobileDropdown.open
             );
           },
         })}
@@ -478,7 +479,7 @@ export class SortFilterBar
       displayName?: TemplateResult;
       selected?: boolean;
       onClick?: (e: Event) => void;
-    },
+    }
   ): TemplateResult {
     const isSelected =
       options?.selected ?? this.finalizedSortField === sortField;
@@ -758,7 +759,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'
     );
   }
 
@@ -895,14 +896,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();
@@ -913,7 +914,7 @@ export class SortFilterBar
       'titleLetterChanged',
       {
         detail: { selectedLetter: this.selectedTitleFilter },
-      },
+      }
     );
     this.dispatchEvent(event);
   }
@@ -923,7 +924,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,3 +1,4 @@
+/* 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';
@@ -201,13 +202,12 @@ 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),
-                'short',
+                  ? this.itemCount ?? 0
+                  : this.viewCount ?? 0,
                 '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,9 +95,7 @@ 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 {
+      } catch (err) {
         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,20 +340,19 @@ 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 @typescript-eslint/no-explicit-any
+  // eslint-disable-next-line default-param-last
   private metadataTemplate(text: any, label = '', id?: string) {
     if (!text) return nothing;
     return html`
@@ -376,25 +375,28 @@ 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>`;
@@ -415,7 +417,7 @@ export class TileList extends BaseTileComponent {
       default:
         return this.displayValueProvider.itemPageUrl(
           this.model.mediatype,
-          true,
+          true
         );
     }
   }
@@ -445,8 +447,8 @@ export class TileList extends BaseTileComponent {
           this.detailsLink(
             collection,
             this.collectionTitles?.get(collection) ?? collection,
-            true,
-          ),
+            true
+          )
         );
       }
     }
@@ -662,7 +664,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');