@internetarchive/collection-browser 4.8.0 → 4.8.1-webdev-9227.2

package/src/collection-facets/facet-row-template.ts

@@ -1,242 +0,0 @@
-import { css, html, nothing, TemplateResult } from 'lit';
-import eyeIcon from '../assets/img/icons/eye';
-import eyeClosedIcon from '../assets/img/icons/eye-closed';
-import type { FacetOption, FacetBucket, FacetState } from '../models';
-import type { CollectionTitles } from '../data-source/models';
-
-export type FacetRowTemplateOptions = {
-  /** The name of the facet group to which this facet belongs (e.g., "mediatype") */
-  facetType: FacetOption;
-
-  /** The facet bucket containing details about the state, count, and key for this row */
-  bucket: FacetBucket;
-
-  /** The collection name cache for converting collection identifiers to titles */
-  collectionTitles?: CollectionTitles;
-
-  /**
-   * Whether to omit the negative/hide button from this facet row if possible.
-   * Has no effect if the facet bucket is itself hidden, in which case the hide
-   * button *must* be shown to represent the state accurately.
-   */
-  omitHideButton?: boolean;
-
-  /**
-   * Called when either checkbox is clicked. Leave it out when an ancestor
-   * handles the rows' clicks by delegation instead.
-   */
-  onCheckboxClick?: (e: Event, negative: boolean) => void;
-};
-
-/**
- * Returns the composed facet state corresponding to a positive or negative facet's checked state
- */
-export function getFacetState(checked: boolean, negative: boolean): FacetState {
-  if (!checked) return 'none';
-  return negative ? 'hidden' : 'selected';
-}
-
-/**
- * Template for a full facet row, including the positive/negative checks,
- * the display name, and the count. The row is plain DOM so that long lists
- * (e.g. the More... dialog) can render many rows without creating an
- * element per row. Render it inside a shadow root that includes
- * `facetRowStyles`.
- */
-export function facetRowTemplate({
-  facetType,
-  bucket,
-  collectionTitles,
-  omitHideButton = false,
-  onCheckboxClick,
-}: FacetRowTemplateOptions): TemplateResult {
-  const showOnlyCheckboxId = `${facetType}:${bucket.key}-show-only`;
-  const negativeCheckboxId = `${facetType}:${bucket.key}-negative`;
-
-  const extraNoteSpan = bucket.extraNote
-    ? html`<span class="facet-note">${bucket.extraNote}</span>`
-    : nothing;
-
-  // For collections, we render the collection title as a link.
-  // For other facet types, we just have a static value to use.
-  const bucketTextDisplay =
-    facetType !== 'collection'
-      ? html`${bucket.displayText ?? bucket.key} ${extraNoteSpan}`
-      : html`<a href="/details/${bucket.key}">
-          ${collectionTitles?.get(bucket.key) ?? bucket.key}
-        </a> `;
-
-  const bucketCountText = bucket.count > 0 ? bucket.count.toLocaleString() : '';
-
-  const facetHidden = bucket.state === 'hidden';
-  const facetSelected = bucket.state === 'selected';
-
-  const titleText = `${facetType}: ${bucket.displayText ?? bucket.key}`;
-  const onlyShowText = facetSelected
-    ? `Show all ${facetType}s`
-    : `Only show ${titleText}`;
-  const hideText = `Hide ${titleText}`;
-  const unhideText = `Unhide ${titleText}`;
-  const showHideText = facetHidden ? unhideText : hideText;
-  const ariaLabel = `${titleText}, ${bucket.count} results`;
-
-  const showOnlyClicked = onCheckboxClick
-    ? (e: Event) => onCheckboxClick(e, false)
-    : undefined;
-  const hideClicked = onCheckboxClick
-    ? (e: Event) => onCheckboxClick(e, true)
-    : undefined;
-
-  // Added data-testid for Playwright testing
-  return html`
-    <div class="facet-row-container">
-      <div class="facet-checkboxes">
-        <input
-          type="checkbox"
-          .name=${facetType}
-          .value=${bucket.key}
-          @click=${showOnlyClicked}
-          .checked=${facetSelected}
-          class="select-facet-checkbox"
-          title=${onlyShowText}
-          id=${showOnlyCheckboxId}
-          data-testid=${showOnlyCheckboxId}
-        />
-        <div
-          class="hide-facet-container"
-          ?hidden=${omitHideButton && !facetHidden}
-        >
-          <input
-            type="checkbox"
-            id=${negativeCheckboxId}
-            .name=${facetType}
-            .value=${bucket.key}
-            @click=${hideClicked}
-            .checked=${facetHidden}
-            class="hide-facet-checkbox"
-          />
-          <label
-            for=${negativeCheckboxId}
-            class="hide-facet-icon${facetHidden ? ' active' : ''}"
-            title=${showHideText}
-            data-testid=${negativeCheckboxId}
-          >
-            <span class="sr-only">${showHideText}</span>
-            <span class="eye eye-open">${eyeIcon}</span>
-            <span class="eye eye-closed">${eyeClosedIcon}</span>
-          </label>
-        </div>
-      </div>
-      <label
-        for=${showOnlyCheckboxId}
-        class="facet-info-display"
-        title=${onlyShowText}
-        aria-label=${ariaLabel}
-      >
-        <div class="facet-title">${bucketTextDisplay}</div>
-        <div class="facet-count">${bucketCountText}</div>
-      </label>
-    </div>
-  `;
-}
-
-const facetRowBorderTop = css`var(--facet-row-border-top, 1px solid transparent)`;
-const facetRowBorderBottom = css`var(--facet-row-border-bottom, 1px solid transparent)`;
-const checkboxHeight = css`15px`;
-
-/**
- * Styles for `facetRowTemplate`. Include `srOnlyStyle` alongside these.
- */
-export const facetRowStyles = css`
-  .facet-checkboxes {
-    margin: 0 5px 0 0;
-    display: flex;
-    height: ${checkboxHeight};
-  }
-  .facet-checkboxes input:first-child {
-    margin-right: 5px;
-  }
-  .facet-checkboxes input {
-    height: ${checkboxHeight};
-    width: ${checkboxHeight};
-    margin: 0;
-  }
-  .facet-row-container {
-    display: flex;
-    font-weight: 500;
-    font-size: 1.2rem;
-    margin: 0 auto;
-    padding: 0.25rem 0;
-    height: auto;
-    border-top: ${facetRowBorderTop};
-    border-bottom: ${facetRowBorderBottom};
-  }
-  .facet-info-display {
-    display: flex;
-    flex: 1 1 0%;
-    cursor: pointer;
-    flex-wrap: wrap;
-  }
-  .facet-title {
-    word-break: break-word;
-    display: inline-block;
-    flex: 1 1 0%;
-  }
-  .facet-note {
-    color: #bbb;
-  }
-  .facet-count {
-    text-align: right;
-  }
-  .select-facet-checkbox {
-    cursor: pointer;
-    display: inline-block;
-  }
-  .hide-facet-checkbox {
-    position: absolute;
-    clip: rect(0, 0, 0, 0);
-    pointer-events: none;
-  }
-  .hide-facet-checkbox:focus-visible + .hide-facet-icon {
-    outline-style: auto;
-    outline-offset: 2px;
-  }
-  .hide-facet-icon {
-    width: ${checkboxHeight};
-    height: ${checkboxHeight};
-    cursor: pointer;
-    display: flex;
-  }
-  .eye {
-    width: ${checkboxHeight};
-    height: ${checkboxHeight};
-    opacity: 0.3;
-  }
-  .hide-facet-icon:hover .eye,
-  .active .eye {
-    opacity: 1;
-  }
-  .hide-facet-icon:hover .eye-open,
-  .hide-facet-icon .eye-closed {
-    display: none;
-  }
-  .hide-facet-icon:hover .eye-closed,
-  .hide-facet-icon.active .eye-closed {
-    display: inline;
-  }
-  .hide-facet-icon.active .eye-open {
-    display: none;
-  }
-  .sorting-icon {
-    cursor: pointer;
-  }
-
-  a:link,
-  a:visited {
-    text-decoration: none;
-    color: var(--ia-theme-link-color, #4b64ff);
-  }
-  a:hover {
-    text-decoration: underline;
-  }
-`;

package/src/collection-facets/facet-row.ts

@@ -1,122 +0,0 @@
-import { html, LitElement, TemplateResult, CSSResultGroup, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import type {
-  FacetOption,
-  FacetBucket,
-  FacetEventDetails,
-  FacetState,
-} from '../models';
-import type { CollectionTitles } from '../data-source/models';
-import { srOnlyStyle } from '../styles/sr-only';
-import {
-  facetRowStyles,
-  facetRowTemplate,
-  getFacetState,
-} from './facet-row-template';
-
-@customElement('facet-row')
-export class FacetRow extends LitElement {
-  //
-  // UI STATE
-  //
-
-  /** The name of the facet group to which this facet belongs (e.g., "mediatype") */
-  @property({ type: String }) facetType?: FacetOption;
-
-  /** The facet bucket containing details about the state, count, and key for this row */
-  @property({ type: Object }) bucket?: FacetBucket;
-
-  /**
-   * Whether to omit the negative/hide button from this facet row if possible.
-   * Has no effect if the facet bucket is itself hidden, in which case the hide
-   * button *must* be shown to represent the state accurately.
-   */
-  @property({ type: Boolean, reflect: true }) omitHideButton = false;
-
-  /** The collection name cache for converting collection identifiers to titles */
-  @property({ type: Object })
-  collectionTitles?: CollectionTitles;
-
-  //
-  // COMPONENT LIFECYCLE METHODS
-  //
-
-  render() {
-    return html`${this.facetRowTemplate}`;
-  }
-
-  //
-  // TEMPLATE GETTERS
-  //
-
-  /**
-   * Template for the full facet row, including the positive/negative checks,
-   * the display name, and the count.
-   */
-  private get facetRowTemplate(): TemplateResult | typeof nothing {
-    const { bucket, facetType } = this;
-    if (!bucket || !facetType) return nothing;
-
-    return facetRowTemplate({
-      facetType,
-      bucket,
-      collectionTitles: this.collectionTitles,
-      omitHideButton: this.omitHideButton,
-      onCheckboxClick: (e, negative) => this.facetClicked(e, negative),
-    });
-  }
-
-  //
-  // EVENT HANDLERS & DISPATCHERS
-  //
-
-  /**
-   * Handler for whenever this facet is clicked & its state changes
-   */
-  private facetClicked(e: Event, negative: boolean) {
-    const { bucket, facetType } = this;
-    if (!bucket || !facetType) return;
-
-    const target = e.target as HTMLInputElement;
-    const { checked } = target;
-    this.bucket = {
-      ...bucket,
-      state: FacetRow.getFacetState(checked, negative),
-    };
-
-    this.dispatchFacetClickEvent({
-      facetType,
-      bucket: this.bucket,
-      negative,
-    });
-  }
-
-  /**
-   * Emits a `facetClick` event with details about this facet & its current state
-   */
-  private dispatchFacetClickEvent(detail: FacetEventDetails) {
-    const event = new CustomEvent<FacetEventDetails>('facetClick', {
-      detail,
-    });
-    this.dispatchEvent(event);
-  }
-
-  //
-  // OTHER METHODS
-  //
-
-  /**
-   * Returns the composed facet state corresponding to a positive or negative facet's checked state
-   */
-  static getFacetState(checked: boolean, negative: boolean): FacetState {
-    return getFacetState(checked, negative);
-  }
-
-  //
-  // STYLES
-  //
-
-  static get styles(): CSSResultGroup {
-    return [srOnlyStyle, facetRowStyles];
-  }
-}

package/src/collection-facets/facet-tombstone-row.ts

@@ -1,40 +0,0 @@
-import { css, html, LitElement, CSSResultGroup } from 'lit';
-import { customElement } from 'lit/decorators.js';
-
-@customElement('facet-tombstone-row')
-export class FacetTombstoneRow extends LitElement {
-  render() {
-    return html`
-      <div id="row">
-        <input type="checkbox" disabled />
-        <div class="tombstone-line"></div>
-        <div class="tombstone-line"></div>
-      </div>
-    `;
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      #row {
-        display: grid;
-        grid-template-columns: 15px 1fr 36px;
-        grid-gap: 9px 6px;
-        align-items: center;
-        margin: 2.5px auto;
-        border: 1px solid transparent;
-      }
-
-      .tombstone-line {
-        background: #ddd;
-        height: 6px;
-        border-radius: 50px;
-      }
-
-      input[type='checkbox'] {
-        width: 15px;
-        height: 15px;
-        margin: 0;
-      }
-    `;
-  }
-}

package/src/collection-facets/facets-template.ts

@@ -1,85 +0,0 @@
-import {
-  css,
-  html,
-  LitElement,
-  TemplateResult,
-  CSSResultGroup,
-  nothing,
-} from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { repeat } from 'lit/directives/repeat.js';
-import type { FacetGroup, FacetBucket, FacetEventDetails } from '../models';
-import type { CollectionTitles } from '../data-source/models';
-import './facet-row';
-
-@customElement('facets-template')
-export class FacetsTemplate extends LitElement {
-  @property({ type: Object }) facetGroup?: FacetGroup;
-
-  @property({ type: Object })
-  collectionTitles?: CollectionTitles;
-
-  private facetClicked(e: CustomEvent<FacetEventDetails>) {
-    this.dispatchFacetClickEvent(e.detail);
-  }
-
-  private dispatchFacetClickEvent(detail: FacetEventDetails) {
-    const event = new CustomEvent<FacetEventDetails>('facetClick', {
-      detail,
-      composed: true,
-    });
-    this.dispatchEvent(event);
-  }
-
-  private get facetsTemplate(): TemplateResult | typeof nothing {
-    const { facetGroup } = this;
-    if (!facetGroup) return nothing;
-
-    const facetBuckets = facetGroup.buckets as FacetBucket[];
-    const isLoneBucket = facetBuckets.length === 1;
-
-    // Added data-testid for Playwright testing
-    // Using className and aria-labels is not ideal for Playwright locator
-    return html`
-      <div class="facet-rows" data-testid="facets-on-${facetGroup.key}">
-        ${repeat(
-          facetBuckets,
-          bucket => `${facetGroup.key}:${bucket.key}`,
-          bucket =>
-            html`<facet-row
-              .facetType=${facetGroup.key}
-              .bucket=${bucket}
-              .collectionTitles=${this.collectionTitles}
-              ?omitHideButton=${isLoneBucket}
-              @facetClick=${this.facetClicked}
-            ></facet-row>`,
-        )}
-      </div>
-    `;
-  }
-
-  render() {
-    return html`${this.facetsTemplate}`;
-  }
-
-  static get styles(): CSSResultGroup {
-    const columnCount = css`var(--facetsColumnCount, 1)`;
-    const columnGap = css`var(--facetsColumnGap, 15px)`;
-
-    return css`
-      .facet-rows {
-        column-count: ${columnCount};
-        column-gap: ${columnGap};
-      }
-
-      a:link,
-      a:visited {
-        text-decoration: none;
-        color: var(--ia-theme-link-color, #4b64ff);
-      }
-      a:hover {
-        text-decoration: underline;
-      }
-    `;
-  }
-}

package/src/collection-facets/models.ts

@@ -1,16 +0,0 @@
-/**
- * Maximum number of aggregations to include in the More... facet dialogs.
- */
-export const MORE_FACETS__MAX_AGGREGATIONS = 10000;
-
-/**
- * Width in px of each column of facets in the More... facet dialogs. Every
- * column is this wide; the number of columns per page is however many fit.
- */
-export const MORE_FACETS__COLUMN_WIDTH = 250;
-
-/**
- * Default number of facets stacked in each column of the More... facet dialogs.
- * Can be overridden via component property.
- */
-export const MORE_FACETS__ROWS_PER_COLUMN = 12;