@internetarchive/collection-browser 0.4.11 → 0.4.12

package/src/collection-facets/more-facets-content.ts

@@ -37,6 +37,7 @@ import {
   analyticsActions,
   analyticsCategories,
 } from '../utils/analytics-events';
+import './toggle-switch';
 
 @customElement('more-facets-content')
 export class MoreFacetsContent extends LitElement {
@@ -59,7 +60,8 @@ export class MoreFacetsContent extends LitElement {
 
   @property({ type: Object }) selectedFacets?: SelectedFacets;
 
-  @property({ type: String }) sortedBy: 'count' | 'alpha' = 'count';
+  @property({ type: String }) sortedBy: AggregationSortType =
+    AggregationSortType.COUNT;
 
   @property({ type: Object, attribute: false })
   analyticsHandler?: AnalyticsManagerInterface;
@@ -253,9 +255,7 @@ export class MoreFacetsContent extends LitElement {
 
       // sort facets in specific order
       let castedBuckets = aggregation.getSortedBuckets(
-        this.sortedBy === 'alpha'
-          ? AggregationSortType.ALPHABETICAL
-          : AggregationSortType.COUNT
+        this.sortedBy
       ) as Bucket[];
 
       if (option === 'collection') {
@@ -369,28 +369,28 @@ export class MoreFacetsContent extends LitElement {
     return nothing;
   }
 
-  private sortFacetAggregation() {
-    this.sortedBy = this.sortedBy === 'count' ? 'alpha' : 'count';
+  private sortFacetAggregation(facetSortType: AggregationSortType) {
+    this.sortedBy = facetSortType;
     this.dispatchEvent(
       new CustomEvent('sortedFacets', { detail: this.sortedBy })
     );
   }
 
   private get getModalHeaderTemplate(): TemplateResult {
-    const title = this.sortedBy === 'alpha' ? 'Sort by count' : 'Sort by value';
-
     return html`<span class="sr-only">More facets for:</span>
       <span class="title">
         ${this.facetGroupTitle}
-        <button
-          class="sort-button"
-          @click=${(e: Event) => {
-            e.preventDefault();
-            this.sortFacetAggregation();
+        <label class="sort-label">Sort by:</label>
+        <toggle-switch
+          class="sort-toggle"
+          leftValue=${AggregationSortType.COUNT}
+          leftLabel="Count"
+          rightValue=${AggregationSortType.ALPHABETICAL}
+          rightLabel=${this.facetGroupTitle}
+          @change=${(e: CustomEvent<string>) => {
+            this.sortFacetAggregation(Number(e.detail) as AggregationSortType);
           }}
-        >
-          ${title}
-        </button>
+        ></toggle-switch>
       </span>`;
   }
 
@@ -447,7 +447,7 @@ export class MoreFacetsContent extends LitElement {
       }
       section#more-facets {
         overflow: auto;
-        padding: 10px; // leaves room for scroll bar to appear without overlaying on content
+        padding: 10px; /* leaves room for scroll bar to appear without overlaying on content */
       }
       .header-content .title {
         display: block;
@@ -456,40 +456,22 @@ export class MoreFacetsContent extends LitElement {
         padding: 0 10px;
         font-weight: bold;
       }
-      .sort-button {
-        margin-left: 0.7rem;
-        padding: 0;
-        border: none;
-        background: transparent;
-        color: var(--ia-theme-link-color, #4b64ff);
+
+      .sort-label {
+        margin-left: 20px;
         font-size: 1.3rem;
-        font-weight: normal;
-        cursor: pointer;
       }
-      .sort-button:hover {
-        text-decoration: underline;
+
+      .sort-toggle {
+        font-weight: normal;
       }
+
       .facets-content {
         font-size: 1.2rem;
         max-height: 300px;
         overflow: auto;
         padding: 10px;
       }
-      .page-number {
-        background: none;
-        border: 0;
-        cursor: pointer;
-        border-radius: 100%;
-        width: 25px;
-        height: 25px;
-        margin: 10px;
-        font-size: 1.4rem;
-        vertical-align: middle;
-      }
-      .current-page {
-        background: black;
-        color: white;
-      }
       .facets-loader {
         margin-bottom: 20px;
         width: 70px;
@@ -506,7 +488,7 @@ export class MoreFacetsContent extends LitElement {
         cursor: pointer;
       }
       .btn-cancel {
-        background-color: #000;
+        background-color: #2c2c2c;
         color: white;
       }
       .btn-submit {
@@ -528,11 +510,6 @@ export class MoreFacetsContent extends LitElement {
         clip: rect(0, 0, 0, 0);
         border: 0;
       }
-      .sorting-icon {
-        height: 15px;
-        vertical-align: baseline;
-        cursor: pointer;
-      }
     `;
   }
 }

package/src/collection-facets/more-facets-pagination.ts

@@ -257,17 +257,19 @@ export class MoreFacetsPagination extends LitElement {
       }
       .facets-pagination .arrow-icon svg {
         height: 14px;
+        fill: #2c2c2c;
       }
       .facets-pagination button,
       .facets-pagination i {
         background: none;
         border: 0;
         cursor: pointer;
-        border-radius: 100%;
+        border-radius: 4px;
         margin: 10px 5px;
         padding: 5px;
         font-size: 1.4rem;
-        vertical-align: middle;
+        color: inherit;
+        vertical-align: baseline;
         display: inline-block;
         min-width: 2.5rem;
       }
@@ -276,7 +278,7 @@ export class MoreFacetsPagination extends LitElement {
         display: inline;
       }
       .facets-pagination button.current {
-        background: black;
+        background: #2c2c2c;
         color: white;
       }
       .page-numbers {

package/src/collection-facets/toggle-switch.ts

@@ -0,0 +1,184 @@
+import { css, html, LitElement, CSSResultGroup } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+
+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 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};
+      }
+
+      .sr-only {
+        position: absolute !important;
+        width: 1px !important;
+        height: 1px !important;
+        margin: -1px !important;
+        padding: 0 !important;
+        border: 0 !important;
+        overflow: hidden !important;
+        white-space: nowrap !important;
+        clip: rect(1px, 1px, 1px, 1px) !important;
+        -webkit-clip-path: inset(50%) !important;
+        clip-path: inset(50%) !important;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        #knob {
+          transition-duration: 0.001s !important; /* Imperceptibly fast */
+        }
+      }
+    `;
+  }
+}

package/src/empty-placeholder.ts

@@ -1,22 +1,35 @@
-import { css, html, LitElement, CSSResultGroup, nothing } from 'lit';
+import {
+  css,
+  html,
+  LitElement,
+  CSSResultGroup,
+  nothing,
+  TemplateResult,
+} from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { choose } from 'lit/directives/choose.js';
 
 import emptyQueryIcon from './assets/img/icons/empty-query';
 import nullResultIcon from './assets/img/icons/null-result';
 
-export type PlaceholderType = 'empty-query' | 'null-result' | null;
+export type PlaceholderType =
+  | 'empty-query'
+  | 'null-result'
+  | 'query-error'
+  | null;
 @customElement('empty-placeholder')
 export class EmptyPlaceholder extends LitElement {
   @property({ type: String }) placeholderType: PlaceholderType = null;
 
   @property({ type: Boolean }) isMobileView?: false;
 
+  @property({ type: String }) detailMessage?: string = '';
+
   render() {
     return this.placeholderType ? html`${this.placeholderTemplate}` : nothing;
   }
 
-  private get placeholderTemplate() {
+  private get placeholderTemplate(): TemplateResult {
     return html`
       <div
         class="placeholder ${this.placeholderType} ${this.isMobileView
@@ -26,12 +39,13 @@ export class EmptyPlaceholder extends LitElement {
         ${choose(this.placeholderType, [
           ['empty-query', () => this.emptyQueryTemplate],
           ['null-result', () => this.nullResultTemplate],
+          ['query-error', () => this.queryErrorTemplate],
         ])}
       </div>
     `;
   }
 
-  private get emptyQueryTemplate() {
+  private get emptyQueryTemplate(): TemplateResult {
     return html`
       <h2 class="title">
         To begin searching, enter a search term in the box above and hit "Go".
@@ -40,7 +54,7 @@ export class EmptyPlaceholder extends LitElement {
     `;
   }
 
-  private get nullResultTemplate() {
+  private get nullResultTemplate(): TemplateResult {
     return html`
       <h2 class="title">
         Your search did not match any items in the Archive. Try different
@@ -50,6 +64,22 @@ export class EmptyPlaceholder extends LitElement {
     `;
   }
 
+  private get queryErrorTemplate(): TemplateResult {
+    return html`
+      <h2 class="title">
+        The search engine encountered an error, which might be related to your
+        search query.
+        <a
+          href="https://help.archive.org/help/search-building-powerful-complex-queries/"
+        >
+          Tips for constructing search queries.
+        </a>
+      </h2>
+      <div>${nullResultIcon}</div>
+      <p class="error-details">Error details: ${this.detailMessage}</p>
+    `;
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       :host {
@@ -57,6 +87,16 @@ export class EmptyPlaceholder extends LitElement {
         width: 100%;
       }
 
+      a {
+        text-decoration: none;
+      }
+      a:link {
+        color: var(--ia-theme-link-color, #4b64ff);
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+
       .placeholder {
         display: block;
       }
@@ -64,16 +104,22 @@ export class EmptyPlaceholder extends LitElement {
       .desktop svg {
         max-height: 40rem;
       }
-      .desktop .title {
+      .desktop .title,
+      .desktop .error-details {
         margin: 4rem 0;
       }
 
       .mobile svg {
         max-height: 20rem;
       }
-      .mobile .title {
+      .mobile .title,
+      .mobile .error-details {
         margin: 2rem 0.5;
       }
+
+      .error-details {
+        font-size: 1.2rem;
+      }
     `;
   }
 }

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

@@ -41,7 +41,9 @@ export class TileListCompact extends LitElement {
           .loggedIn=${this.loggedIn}
         >
         </image-block>
-        <div id="title">${DOMPurify.sanitize(this.model?.title ?? '')}</div>
+        <a href=${this.href} id="title"
+          >${DOMPurify.sanitize(this.model?.title ?? '')}</a
+        >
         <div id="creator">
           ${this.model?.mediatype === 'account'
             ? accountLabel(this.model?.dateAdded)
@@ -60,6 +62,14 @@ export class TileListCompact extends LitElement {
     `;
   }
 
+  private get href(): string {
+    // Use the server-specified href if available.
+    // Otherwise, construct a details page URL from the item identifier.
+    return this.model?.href
+      ? `${this.baseNavigationUrl}${this.model.href}`
+      : `${this.baseNavigationUrl}/details/${this.model?.identifier}`;
+  }
+
   /*
    * TODO: fix field names to match model in src/collection-browser.ts
    * private get dateSortSelector()
@@ -145,10 +155,13 @@ export class TileListCompact extends LitElement {
       }
 
       #title {
-        color: #4b64ff;
         text-decoration: none;
       }
 
+      #title:link {
+        color: var(--ia-theme-link-color, #4b64ff);
+      }
+
       #title,
       #creator {
         text-overflow: ellipsis;

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

@@ -453,6 +453,9 @@ export class TileList extends LitElement {
 
       div a {
         text-decoration: none;
+      }
+
+      div a:link {
         color: var(--ia-theme-link-color, #4b64ff);
       }
 

package/test/collection-facets/toggle-switch.test.ts

@@ -0,0 +1,154 @@
+import { expect, fixture } from '@open-wc/testing';
+import sinon from 'sinon';
+import { html } from 'lit';
+import type { ToggleSwitch } from '../../src/collection-facets/toggle-switch';
+
+import '../../src/collection-facets/toggle-switch';
+
+describe('Toggle switch', () => {
+  it('renders component', async () => {
+    const el = await fixture<ToggleSwitch>(
+      html`<toggle-switch></toggle-switch>`
+    );
+
+    expect(el.shadowRoot?.querySelector('#switch-button')).to.exist;
+    expect(el.shadowRoot?.querySelector('#knob')).to.exist;
+  });
+
+  it('renders provided L/R values', async () => {
+    const el = await fixture<ToggleSwitch>(
+      html`<toggle-switch .leftValue=${'L'} .rightValue=${'R'}></toggle-switch>`
+    );
+
+    expect(el.value).to.equal('L');
+    expect(el.selectedLabel).to.equal('L');
+
+    expect(
+      el.shadowRoot
+        ?.querySelector('label[for=switch-left]')
+        ?.textContent?.trim()
+    ).to.equal('L');
+    expect(
+      el.shadowRoot
+        ?.querySelector('label[for=switch-right]')
+        ?.textContent?.trim()
+    ).to.equal('R');
+  });
+
+  it('renders provided L/R labels instead of values', async () => {
+    const el = await fixture<ToggleSwitch>(
+      html`<toggle-switch
+        .leftValue=${'L'}
+        .leftLabel=${'L-label'}
+        .rightValue=${'R'}
+        .rightLabel=${'R-label'}
+      ></toggle-switch>`
+    );
+
+    expect(el.value).to.equal('L');
+    expect(el.selectedLabel).to.equal('L-label');
+
+    expect(
+      (el.shadowRoot?.querySelector('#switch-left') as HTMLInputElement)?.value
+    ).to.equal('L');
+    expect(
+      (el.shadowRoot?.querySelector('#switch-right') as HTMLInputElement)?.value
+    ).to.equal('R');
+
+    expect(
+      el.shadowRoot
+        ?.querySelector('label[for=switch-left]')
+        ?.textContent?.trim()
+    ).to.equal('L-label');
+    expect(
+      el.shadowRoot
+        ?.querySelector('label[for=switch-right]')
+        ?.textContent?.trim()
+    ).to.equal('R-label');
+  });
+
+  it('sets the initial side', async () => {
+    const el = await fixture<ToggleSwitch>(
+      html`<toggle-switch
+        .leftValue=${'L'}
+        .rightValue=${'R'}
+        .side=${'right'}
+      ></toggle-switch>`
+    );
+
+    expect(el.value).to.equal('R');
+    expect(el.selectedLabel).to.equal('R');
+  });
+
+  it('toggles on click', async () => {
+    const el = await fixture<ToggleSwitch>(
+      html`<toggle-switch .leftValue=${'L'} .rightValue=${'R'}></toggle-switch>`
+    );
+
+    const button = el.shadowRoot?.querySelector(
+      '#switch-button'
+    ) as HTMLButtonElement;
+
+    expect(el.value).to.equal('L');
+    button.click();
+    await el.updateComplete;
+
+    expect(el.value).to.equal('R');
+    button.click();
+    await el.updateComplete;
+
+    expect(el.value).to.equal('L');
+  });
+
+  it('toggles on radio change', async () => {
+    const el = await fixture<ToggleSwitch>(
+      html`<toggle-switch .leftValue=${'L'} .rightValue=${'R'}></toggle-switch>`
+    );
+
+    const leftRadio = el.shadowRoot?.querySelector(
+      '#switch-left'
+    ) as HTMLInputElement;
+    const rightRadio = el.shadowRoot?.querySelector(
+      '#switch-right'
+    ) as HTMLInputElement;
+
+    expect(el.value).to.equal('L');
+    rightRadio.click();
+    await el.updateComplete;
+
+    expect(el.value).to.equal('R');
+    leftRadio.click();
+    await el.updateComplete;
+
+    expect(el.value).to.equal('L');
+  });
+
+  it('emits change event when toggled', async () => {
+    const changeSpy = sinon.spy();
+    const el = await fixture<ToggleSwitch>(
+      html`<toggle-switch
+        .leftValue=${'L'}
+        .rightValue=${'R'}
+        @change=${changeSpy}
+      ></toggle-switch>`
+    );
+
+    const button = el.shadowRoot?.querySelector(
+      '#switch-button'
+    ) as HTMLButtonElement;
+
+    button.click();
+    await el.updateComplete;
+
+    expect(changeSpy.callCount).to.equal(1);
+
+    const leftRadio = el.shadowRoot?.querySelector(
+      '#switch-left'
+    ) as HTMLInputElement;
+
+    leftRadio.click();
+    await el.updateComplete;
+
+    expect(changeSpy.callCount).to.equal(2);
+  });
+});