@internetarchive/collection-browser 4.5.1 → 4.6.0

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/src/collection-facets/smart-facets/smart-facet-dropdown.ts

@@ -0,0 +1,185 @@
+import { css, html, LitElement, CSSResultGroup, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import type { IaDropdown, optionInterface } from '@internetarchive/ia-dropdown';
+import type { FacetRef, SmartFacet, SmartFacetEvent } from './models';
+import { log } from '../../utils/log';
+
+@customElement('smart-facet-dropdown')
+export class SmartFacetDropdown extends LitElement {
+  @property({ type: Array }) facetInfo?: SmartFacet[];
+
+  @property({ type: String }) labelPrefix?: string;
+
+  @property({ type: Object }) activeFacetRef?: FacetRef;
+
+  @query('ia-dropdown') dropdown?: IaDropdown;
+
+  //
+  // COMPONENT LIFECYCLE METHODS
+  //
+
+  render() {
+    if (!this.facetInfo || !this.activeFacetRef) return nothing;
+    if (this.facetInfo.length === 0) return nothing;
+
+    const displayText =
+      this.activeFacetRef.displayText ?? this.activeFacetRef.bucketKey;
+    if (!displayText) return nothing;
+
+    return html`
+      <div class="dropdown-container">
+        <ia-dropdown
+          class="dropdown"
+          displayCaret
+          closeOnSelect
+          closeOnEscape
+          closeOnBackdropClick
+          includeSelectedOption
+          usePopover
+          .options=${this.dropdownOptions}
+          .selectedOption=${this.activeDropdownOption}
+          .openViaButton=${false}
+          @optionSelected=${this.optionSelected}
+          @click=${this.onDropdownClick}
+        >
+          <span
+            class="dropdown-label"
+            slot="dropdown-label"
+            @click=${this.defaultOptionSelected}
+            >${this.labelPrefix ?? nothing} ${displayText}</span
+          >
+        </ia-dropdown>
+      </div>
+    `;
+  }
+
+  //
+  // OTHER METHODS
+  //
+
+  private get dropdownOptions(): optionInterface[] {
+    return (
+      this.facetInfo?.map(smartFacet => {
+        const firstFacet = smartFacet.facets[0];
+        return {
+          id: firstFacet.bucketKey,
+          label: html`<span>
+            ${smartFacet.label ??
+            firstFacet.displayText ??
+            firstFacet.bucketKey}
+          </span>`,
+        };
+      }) ?? []
+    );
+  }
+
+  private get activeDropdownOption(): optionInterface | undefined {
+    if (!this.activeFacetRef) return undefined;
+    return this.dropdownOptions.find(
+      opt => opt.id === this.activeFacetRef?.bucketKey,
+    );
+  }
+
+  /**
+   * Handler for when the default option on the dropdown button is clicked
+   */
+  private defaultOptionSelected(): void {
+    this.handleSelection(this.activeFacetRef?.bucketKey);
+  }
+
+  /**
+   * Handler for when an option in the dropdown menu is selected
+   */
+  private optionSelected(e: CustomEvent<{ option: optionInterface }>): void {
+    this.handleSelection(e.detail.option.id);
+  }
+
+  /**
+   * Responds to a dropdown selection by emitting a `facetClick` event with
+   * the appropriate facet details.
+   */
+  private handleSelection(bucketKey?: string): void {
+    if (!bucketKey || !this.facetInfo || !this.activeFacetRef) return;
+
+    let selectedSmartFacet;
+    for (const smartFacet of this.facetInfo) {
+      const selectedRef = smartFacet.facets.find(
+        b => b.bucketKey === bucketKey,
+      );
+      if (selectedRef) {
+        this.activeFacetRef = selectedRef;
+        selectedSmartFacet = smartFacet;
+      }
+    }
+
+    if (!selectedSmartFacet) return;
+
+    this.dispatchEvent(
+      new CustomEvent<SmartFacetEvent>('facetClick', {
+        detail: {
+          smartFacet: selectedSmartFacet,
+          details: [
+            {
+              facetType: this.activeFacetRef.facetType,
+              bucket: {
+                key: this.activeFacetRef.bucketKey,
+                count: 0,
+                state: 'selected',
+              },
+              negative: false,
+            },
+          ],
+        },
+      }),
+    );
+  }
+
+  private onDropdownClick(): void {
+    log('smart dropdown: onDropdownClick', this);
+    this.dispatchEvent(
+      new CustomEvent<SmartFacetDropdown>('dropdownClick', { detail: this }),
+    );
+  }
+
+  close(): void {
+    if (this.dropdown) {
+      this.dropdown.open = false;
+    }
+  }
+
+  //
+  // STYLES
+  //
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .dropdown-container {
+        padding: 5px 5px;
+        border-radius: 5px;
+        background: white;
+        color: #2c2c2c;
+        border: 1px solid #194880;
+        font-size: 1.4rem;
+        font-family: inherit;
+      }
+
+      .dropdown-label {
+        font-size: 1.4rem;
+        font-family: inherit;
+      }
+
+      .dropdown {
+        --dropdownBorderColor: #194880;
+        --dropdownBorderWidth: 1px;
+        --dropdownBgColor: white;
+        --dropdownHoverBgColor: #f8f8f8;
+        --dropdownTextColor: #2c2c2c;
+        --dropdownHoverTextColor: #2c2c2c;
+        --dropdownCaretColor: #2c2c2c;
+        --dropdownWhiteSpace: nowrap;
+        --caretWidth: 14px;
+        --caretHeight: 14px;
+      }
+    `;
+  }
+}

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/src/collection-facets/smart-facets/smart-facet-equals.ts

@@ -0,0 +1,16 @@
+import type { FacetRef, SmartFacet } from './models';
+
+function facetRefEquals(ref1?: FacetRef, ref2?: FacetRef): boolean {
+  if (ref1 === undefined) return ref2 !== undefined;
+  if (ref2 === undefined) return ref1 !== undefined;
+
+  return ref1.facetType === ref2.facetType && ref1.bucketKey === ref2.bucketKey;
+}
+
+export function smartFacetEquals(sf1: SmartFacet, sf2: SmartFacet) {
+  return (
+    sf1.label === sf2.label &&
+    sf1.facets.length === sf2.facets.length &&
+    sf1.facets.every((sf, i) => facetRefEquals(sf, sf2.facets[i]))
+  );
+}

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/src/collection-facets/smart-facets/smart-facet-heuristics.ts

@@ -0,0 +1,26 @@
+import { dedupe } from './dedupe';
+import { BrowserLanguageHeuristic } from './heuristics/browser-language/browser-language-heuristic';
+import { QueryKeywordsHeuristic } from './heuristics/query-keywords/query-keywords-heuristic';
+import { WikidataHeuristic } from './heuristics/wikidata/wikidata-heuristic';
+import type { SmartFacet, SmartQueryHeuristic } from './models';
+
+export class SmartQueryHeuristicGroup implements SmartQueryHeuristic {
+  // Avoid collapsing the array onto one line
+  // prettier-ignore
+  private static readonly DEFAULT_HEURISTICS: (new () => SmartQueryHeuristic)[] = [
+    QueryKeywordsHeuristic,
+    WikidataHeuristic,
+    BrowserLanguageHeuristic
+  ];
+
+  async getRecommendedFacets(
+    query: string,
+    heuristics = SmartQueryHeuristicGroup.DEFAULT_HEURISTICS,
+  ): Promise<SmartFacet[]> {
+    const promises = heuristics.map(HeuristicCtor =>
+      new HeuristicCtor().getRecommendedFacets(query),
+    );
+
+    return dedupe((await Promise.all(promises)).flat());
+  }
+}

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/src/collection-facets/toggle-switch.ts

@@ -0,0 +1,174 @@
+import { css, html, LitElement, CSSResultGroup } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { srOnlyStyle } from '../styles/sr-only';
+
+export type Side = 'left' | 'right';
+
+@customElement('toggle-switch')
+export class ToggleSwitch extends LitElement {
+  /**
+   * The value this switch should have when toggled to the left.
+   */
+  @property({ type: String, attribute: true }) leftValue: string = '';
+
+  /**
+   * The human-readable label to display on the left side of this switch.
+   * If none is provided, `leftValue` is used.
+   */
+  @property({ type: String, attribute: true }) leftLabel?: string;
+
+  /**
+   * The value this switch should have when toggled to the right.
+   */
+  @property({ type: String, attribute: true }) rightValue: string = '';
+
+  /**
+   * The human-readable label to display on the right side of this switch.
+   * If none is provided, `rightValue` is used.
+   */
+  @property({ type: String, attribute: true }) rightLabel?: string;
+
+  /**
+   * Which side of the switch is selected (`'left'` or `'right'`).
+   */
+  @property({ type: String, attribute: true }) side: Side = 'left';
+
+  @query('#switch-left')
+  private leftRadio!: HTMLInputElement;
+
+  render() {
+    return html`
+      <div id="container">
+        <label for="switch-left">${this.leftLabel ?? this.leftValue}</label>
+        <input
+          type="radio"
+          id="switch-left"
+          class="sr-only"
+          name="switch"
+          .value=${this.leftValue}
+          .checked=${this.side === 'left'}
+          @change=${this.handleRadioChange}
+        />
+        <input
+          type="radio"
+          id="switch-right"
+          class="sr-only"
+          name="switch"
+          .value=${this.rightValue}
+          .checked=${this.side === 'right'}
+          @change=${this.handleRadioChange}
+        />
+        <button
+          id="switch-button"
+          class=${this.side}
+          aria-hidden="true"
+          @click=${this.handleClick}
+        >
+          <div id="knob"></div>
+        </button>
+        <label for="switch-right">${this.rightLabel ?? this.rightValue}</label>
+      </div>
+    `;
+  }
+
+  /**
+   * The currently selected value of this switch.
+   */
+  get value(): string {
+    return this.side === 'left' ? this.leftValue : this.rightValue;
+  }
+
+  /**
+   * The label for the currently selected value of this switch.
+   * Falls back to the current value if its label is not defined.
+   */
+  get selectedLabel(): string {
+    return this.side === 'left'
+      ? (this.leftLabel ?? this.leftValue)
+      : (this.rightLabel ?? this.rightValue);
+  }
+
+  private handleClick(): void {
+    this.side = this.side === 'left' ? 'right' : 'left';
+    this.emitChangeEvent();
+  }
+
+  private handleRadioChange(): void {
+    this.side = this.leftRadio.checked ? 'left' : 'right';
+    this.emitChangeEvent();
+  }
+
+  private emitChangeEvent(): void {
+    const event = new CustomEvent<string>('change', {
+      detail: this.value,
+    });
+    this.dispatchEvent(event);
+  }
+
+  static get styles(): CSSResultGroup {
+    const switchWidth = css`var(--switchWidth, 30px)`;
+    const switchHeight = css`var(--switchHeight, 14px)`;
+    const switchMarginLeft = css`var(--switchMarginLeft, 5px)`;
+    const switchMarginRight = css`var(--switchMarginRight, 5px)`;
+    const switchBorderWidth = css`var(--switchBorderWidth, 3px)`;
+    const switchBgColor = css`var(--switchBgColor, #194880)`;
+    const switchBorderColor = css`var(--switchBorderColor, #194880)`;
+    const labelFontSize = css`var(--labelFontSize, 1.3rem)`;
+    const knobColor = css`var(--knobColor, white)`;
+    const knobTransitionDuration = css`var(--knobTransitionDuration, 0.25s)`;
+    const knobTransitionFn = css`var(--knobTransitionFn, ease)`;
+
+    return [
+      srOnlyStyle,
+      css`
+        #container {
+          display: inline-flex;
+          align-items: center;
+          flex-wrap: nowrap;
+          font-size: ${labelFontSize};
+        }
+
+        #switch-button {
+          width: ${switchWidth};
+          height: ${switchHeight};
+          margin: 0 ${switchMarginRight} 0 ${switchMarginLeft};
+          padding: 0;
+          border: ${switchBorderWidth} solid ${switchBorderColor};
+          border-radius: ${switchHeight};
+          box-sizing: content-box;
+          background: ${switchBgColor};
+          appearance: none;
+          cursor: pointer;
+        }
+
+        #switch-button.left #knob {
+          transform: translateX(0);
+        }
+
+        #switch-button.right #knob {
+          transform: translateX(calc(${switchWidth} - ${switchHeight}));
+        }
+
+        #switch-button:focus-visible {
+          outline: 2px solid black;
+          outline-offset: 2px;
+        }
+
+        #knob {
+          display: block;
+          width: ${switchHeight};
+          height: ${switchHeight};
+          border-radius: 50%;
+          background: ${knobColor};
+          transition: transform ${knobTransitionDuration} ${knobTransitionFn};
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          #knob {
+            transition-duration: 0.001s !important; /* Imperceptibly fast */
+          }
+        }
+      `,
+    ];
+  }
+}