@internetarchive/collection-browser 2.17.1-alpha-webdev7667.0 → 2.18.1-alpha-webdev7768.0

package/src/expanded-date-picker.ts

@@ -1,175 +1,175 @@
-import { css, html, LitElement, CSSResultGroup, TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { msg } from '@lit/localize';
-import type { ModalManagerInterface } from '@internetarchive/modal-manager';
-import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
-import { BinSnappingInterval } from '@internetarchive/histogram-date-range';
-import {
-  analyticsActions,
-  analyticsCategories,
-} from './utils/analytics-events';
-
-import '@internetarchive/histogram-date-range';
-
-@customElement('expanded-date-picker')
-export class ExpandedDatePicker extends LitElement {
-  @property({ type: String }) minDate?: string;
-
-  @property({ type: String }) maxDate?: string;
-
-  @property({ type: String }) minSelectedDate?: string;
-
-  @property({ type: String }) maxSelectedDate?: string;
-
-  @property({ type: Array }) buckets?: number[];
-
-  @property({ type: String }) dateFormat: string = 'YYYY';
-
-  @property({ type: String }) tooltipDateFormat?: string;
-
-  @property({ type: String }) binSnapping?: BinSnappingInterval;
-
-  @property({ type: Object, attribute: false })
-  modalManager?: ModalManagerInterface;
-
-  @property({ type: Object, attribute: false })
-  analyticsHandler?: AnalyticsManagerInterface;
-
-  render(): TemplateResult {
-    return html`
-      <div id="container">
-        <histogram-date-range
-          id="date-picker"
-          .minDate=${this.minDate}
-          .maxDate=${this.maxDate}
-          .minSelectedDate=${this.minSelectedDate ?? this.minDate}
-          .maxSelectedDate=${this.maxSelectedDate ?? this.maxDate}
-          .dateFormat=${this.dateFormat}
-          tooltipDateFormat=${ifDefined(this.tooltipDateFormat)}
-          binSnapping=${ifDefined(this.binSnapping)}
-          .updateDelay=${0}
-          updateWhileFocused
-          missingDataMessage="..."
-          .width=${560}
-          .height=${120}
-          .bins=${this.buckets}
-          @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
-        >
-          <button
-            id="apply-btn"
-            slot="inputs-right-side"
-            @click=${this.applyBtnClicked}
-          >
-            ${msg('Apply date range')}
-          </button>
-        </histogram-date-range>
-      </div>
-    `;
-  }
-
-  connectedCallback(): void {
-    super.connectedCallback?.();
-    this.setupEscapeListener();
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback?.();
-    this.removeEscapeListener();
-  }
-
-  /**
-   * Add an event listener to close the date picker modal when the Esc key is pressed
-   */
-  private setupEscapeListener() {
-    document.addEventListener('keydown', this.boundEscapeListener);
-  }
-
-  /**
-   * Remove the Esc key listener that was previously added
-   */
-  private removeEscapeListener() {
-    document.removeEventListener('keydown', this.boundEscapeListener);
-  }
-
-  /**
-   * Closes the modal dialog if the given event is pressing the Esc key.
-   * Arrow function to ensure `this` remains bound to the current component.
-   */
-  private boundEscapeListener = (e: KeyboardEvent) => {
-    if (e.key === 'Escape') {
-      this.closeModal();
-    }
-  };
-
-  /**
-   * When the histogram is updated, keep track of the newly selected date range.
-   * We don't commit to the new range until the apply button is clicked.
-   */
-  private histogramDateRangeUpdated(
-    e: CustomEvent<{
-      minDate: string;
-      maxDate: string;
-    }>,
-  ): void {
-    this.minSelectedDate = e.detail.minDate;
-    this.maxSelectedDate = e.detail.maxDate;
-  }
-
-  /**
-   * When the Apply button is clicked, emit the current date range and close the modal.
-   */
-  private applyBtnClicked(): void {
-    const event = new CustomEvent('histogramDateRangeApplied', {
-      detail: {
-        minDate: this.minSelectedDate,
-        maxDate: this.maxSelectedDate,
-      },
-    });
-    this.dispatchEvent(event);
-    this.closeModal();
-
-    this.analyticsHandler?.sendEvent({
-      category: analyticsCategories.default,
-      action: analyticsActions.histogramChangedFromModal,
-      label: window.location.href,
-    });
-  }
-
-  /**
-   * Closes the modal associated with this component (if it exists) and dispatches a
-   * modalClosed event.
-   */
-  private closeModal(): void {
-    if (this.modalManager) {
-      this.modalManager.closeModal();
-      this.dispatchEvent(new CustomEvent('modalClosed'));
-    }
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      #container {
-        display: flex;
-        justify-content: center;
-        padding: 40px 10px 10px;
-        overflow: hidden;
-      }
-
-      #date-picker {
-        --histogramDateRangeInputWidth: 50px;
-        --histogramDateRangeInputRowMargin: 5px 0 0 0;
-      }
-
-      #apply-btn {
-        margin: 0 0 0 5px;
-        padding: 8px 10px;
-        border: 0;
-        border-radius: 4px;
-        background: var(--primaryButtonBGColor, #194880);
-        color: white;
-        cursor: pointer;
-      }
-    `;
-  }
-}
+import { css, html, LitElement, CSSResultGroup, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { msg } from '@lit/localize';
+import type { ModalManagerInterface } from '@internetarchive/modal-manager';
+import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
+import { BinSnappingInterval } from '@internetarchive/histogram-date-range';
+import {
+  analyticsActions,
+  analyticsCategories,
+} from './utils/analytics-events';
+
+import '@internetarchive/histogram-date-range';
+
+@customElement('expanded-date-picker')
+export class ExpandedDatePicker extends LitElement {
+  @property({ type: String }) minDate?: string;
+
+  @property({ type: String }) maxDate?: string;
+
+  @property({ type: String }) minSelectedDate?: string;
+
+  @property({ type: String }) maxSelectedDate?: string;
+
+  @property({ type: Array }) buckets?: number[];
+
+  @property({ type: String }) dateFormat: string = 'YYYY';
+
+  @property({ type: String }) tooltipDateFormat?: string;
+
+  @property({ type: String }) binSnapping?: BinSnappingInterval;
+
+  @property({ type: Object, attribute: false })
+  modalManager?: ModalManagerInterface;
+
+  @property({ type: Object, attribute: false })
+  analyticsHandler?: AnalyticsManagerInterface;
+
+  render(): TemplateResult {
+    return html`
+      <div id="container">
+        <histogram-date-range
+          id="date-picker"
+          .minDate=${this.minDate}
+          .maxDate=${this.maxDate}
+          .minSelectedDate=${this.minSelectedDate ?? this.minDate}
+          .maxSelectedDate=${this.maxSelectedDate ?? this.maxDate}
+          .dateFormat=${this.dateFormat}
+          tooltipDateFormat=${ifDefined(this.tooltipDateFormat)}
+          binSnapping=${ifDefined(this.binSnapping)}
+          .updateDelay=${0}
+          updateWhileFocused
+          missingDataMessage="..."
+          .width=${560}
+          .height=${120}
+          .bins=${this.buckets}
+          @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
+        >
+          <button
+            id="apply-btn"
+            slot="inputs-right-side"
+            @click=${this.applyBtnClicked}
+          >
+            ${msg('Apply date range')}
+          </button>
+        </histogram-date-range>
+      </div>
+    `;
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback?.();
+    this.setupEscapeListener();
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback?.();
+    this.removeEscapeListener();
+  }
+
+  /**
+   * Add an event listener to close the date picker modal when the Esc key is pressed
+   */
+  private setupEscapeListener() {
+    document.addEventListener('keydown', this.boundEscapeListener);
+  }
+
+  /**
+   * Remove the Esc key listener that was previously added
+   */
+  private removeEscapeListener() {
+    document.removeEventListener('keydown', this.boundEscapeListener);
+  }
+
+  /**
+   * Closes the modal dialog if the given event is pressing the Esc key.
+   * Arrow function to ensure `this` remains bound to the current component.
+   */
+  private boundEscapeListener = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      this.closeModal();
+    }
+  };
+
+  /**
+   * When the histogram is updated, keep track of the newly selected date range.
+   * We don't commit to the new range until the apply button is clicked.
+   */
+  private histogramDateRangeUpdated(
+    e: CustomEvent<{
+      minDate: string;
+      maxDate: string;
+    }>,
+  ): void {
+    this.minSelectedDate = e.detail.minDate;
+    this.maxSelectedDate = e.detail.maxDate;
+  }
+
+  /**
+   * When the Apply button is clicked, emit the current date range and close the modal.
+   */
+  private applyBtnClicked(): void {
+    const event = new CustomEvent('histogramDateRangeApplied', {
+      detail: {
+        minDate: this.minSelectedDate,
+        maxDate: this.maxSelectedDate,
+      },
+    });
+    this.dispatchEvent(event);
+    this.closeModal();
+
+    this.analyticsHandler?.sendEvent({
+      category: analyticsCategories.default,
+      action: analyticsActions.histogramChangedFromModal,
+      label: window.location.href,
+    });
+  }
+
+  /**
+   * Closes the modal associated with this component (if it exists) and dispatches a
+   * modalClosed event.
+   */
+  private closeModal(): void {
+    if (this.modalManager) {
+      this.modalManager.closeModal();
+      this.dispatchEvent(new CustomEvent('modalClosed'));
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      #container {
+        display: flex;
+        justify-content: center;
+        padding: 40px 10px 10px;
+        overflow: hidden;
+      }
+
+      #date-picker {
+        --histogramDateRangeInputWidth: 50px;
+        --histogramDateRangeInputRowMargin: 5px 0 0 0;
+      }
+
+      #apply-btn {
+        margin: 0 0 0 5px;
+        padding: 8px 10px;
+        border: 0;
+        border-radius: 4px;
+        background: var(--primaryButtonBGColor, #194880);
+        color: white;
+        cursor: pointer;
+      }
+    `;
+  }
+}

package/src/tiles/grid/styles/tile-grid-shared-styles.ts

@@ -16,7 +16,7 @@ export const baseTileStyles = css`
     background-color: ${tileBackgroundColor};
     border: 1px #2c2c2c;
     border-radius: ${tileCornerRadius};
-    box-shadow: 1px 1px 2px 0;
+    /*box-shadow: 1px 1px 2px 0;*/
     box-sizing: border-box;
     height: 100%;
     display: flex;

package/src/tiles/tile-dispatcher.ts

@@ -433,7 +433,7 @@ export class TileDispatcher
       }
 
       #container.hoverable:hover {
-        box-shadow: 0 0 6px 2px rgba(8, 8, 32, 0.8);
+        box-shadow: 0 0 10px 0px rgba(8, 8, 32, 0.15);
         transition: box-shadow 0.1s ease;
       }
 

package/test/collection-browser.test.ts

@@ -895,8 +895,7 @@ describe('Collection Browser', () => {
     expect(sortSelector, 'sort bar').to.exist;
 
     // Click the title sorter
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    [...(sortSelector?.children as HTMLCollection & Iterable<any>)] // tsc doesn't know children is iterable
+    Array.from(sortSelector!.children)
       .find(child => child.textContent?.trim() === 'Title')
       ?.querySelector('button')
       ?.click();
@@ -904,6 +903,16 @@ describe('Collection Browser', () => {
     await el.updateComplete;
 
     expect(el.selectedSort).to.equal(SortField.title);
+
+    // Click the creator sorter
+    Array.from(sortSelector!.children)
+      .find(child => child.textContent?.trim() === 'Creator')
+      ?.querySelector('button')
+      ?.click();
+
+    await el.updateComplete;
+
+    expect(el.selectedSort).to.equal(SortField.creator);
   });
 
   it('sets sort filter properties when user selects title filter', async () => {
@@ -1072,9 +1081,11 @@ describe('Collection Browser', () => {
 
   it('sets date range query when date picker selection changed', async () => {
     const searchService = new MockSearchService();
+    const mockAnalyticsHandler = new MockAnalyticsHandler();
     const el = await fixture<CollectionBrowser>(
       html`<collection-browser
         .searchService=${searchService}
+        .analyticsHandler=${mockAnalyticsHandler}
         .suppressPlaceholders=${true}
       >
       </collection-browser>`,
@@ -2145,6 +2156,79 @@ describe('Collection Browser', () => {
       .exist;
   });
 
+  it('shows Blurring checkbox for admin users', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser
+        .baseNavigationUrl=${''}
+        .searchService=${searchService}
+      >
+      </collection-browser>`,
+    );
+
+    el.baseQuery = 'archive-org-user-loggedin';
+    await el.updateComplete;
+    await el.initialSearchComplete;
+
+    const blurringCheck = el.shadowRoot?.querySelector(
+      '#tile-blur-check',
+    ) as HTMLInputElement;
+    expect(blurringCheck).to.exist;
+    expect(blurringCheck.checked).to.be.true;
+  });
+
+  it('unchecks Blurring checkbox for admin users with blurring preference off', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser
+        .baseNavigationUrl=${''}
+        .searchService=${searchService}
+      >
+      </collection-browser>`,
+    );
+
+    el.baseQuery = 'archive-org-user-loggedin-noblur';
+    await el.updateComplete;
+    await el.initialSearchComplete;
+
+    const blurringCheck = el.shadowRoot?.querySelector(
+      '#tile-blur-check',
+    ) as HTMLInputElement;
+    expect(blurringCheck).to.exist;
+    expect(blurringCheck.checked).to.be.false;
+  });
+
+  it('toggles blur state when Blurring checkbox is toggled', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser
+        .baseNavigationUrl=${''}
+        .searchService=${searchService}
+      >
+      </collection-browser>`,
+    );
+
+    el.baseQuery = 'archive-org-user-loggedin';
+    await el.updateComplete;
+    await el.initialSearchComplete;
+
+    const blurringCheck = el.shadowRoot?.querySelector(
+      '#tile-blur-check',
+    ) as HTMLInputElement;
+    expect(blurringCheck).to.exist;
+
+    blurringCheck.dispatchEvent(new PointerEvent('click'));
+    await el.updateComplete;
+
+    const infiniteScroller = el.shadowRoot?.querySelector(
+      'infinite-scroller',
+    ) as InfiniteScroller;
+    const firstTile = infiniteScroller?.shadowRoot?.querySelector(
+      'tile-dispatcher',
+    ) as TileDispatcher;
+    expect(firstTile.suppressBlurring).to.be.true;
+  });
+
   it('applies loans tab properties to sort bar', async () => {
     const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(

package/test/image-block.test.ts

@@ -220,4 +220,28 @@ describe('Image block component', () => {
     ) as TextOverlay;
     expect(textOverlay).not.to.exist;
   });
+
+  it('should render no overlay if blurring is suppressed', async () => {
+    const el = await fixture<ImageBlock>(html`
+      <image-block
+        .model=${{
+          loginRequired: true,
+          contentWarning: true,
+          identifier: 'goody',
+        }}
+        .baseImageUrl=${'https://archive.org'}
+        .isCompactTile=${false}
+        .isListTile=${false}
+        .viewSize=${'desktop'}
+        .loggedIn=${true}
+        suppressBlurring
+      >
+      </image-block>
+    `);
+
+    const textOverlay = el.shadowRoot?.querySelector(
+      'text-overlay',
+    ) as TextOverlay;
+    expect(textOverlay).not.to.exist;
+  });
 });

package/test/item-image.test.ts

@@ -5,6 +5,7 @@ import { TileModel } from '../src/models';
 import type { ItemImage } from '../src/tiles/item-image';
 
 import '../src/tiles/item-image';
+import { MediaType } from '@internetarchive/field-parsers';
 
 const baseImageUrl = 'https://archive.org';
 const testBookModel: TileModel = new TileModel({});
@@ -131,4 +132,89 @@ describe('ItemImage component', () => {
     expect(img).to.exist;
     expect(img?.getAttribute('src')).not.to.exist;
   });
+
+  it('should blur image if login required flag set', async () => {
+    const model = new TileModel({ identifier: 'foo' });
+    model.loginRequired = true;
+
+    const el = await fixture<ItemImage>(html`
+      <item-image
+        .isListTile=${false}
+        .isCompactTile=${false}
+        .model=${model}
+        .baseImageUrl=${baseImageUrl}
+      >
+      </item-image>
+    `);
+
+    const dropShadow = el.shadowRoot?.querySelector('.drop-shadow');
+    expect(dropShadow).to.exist;
+
+    const imgClasses = dropShadow?.querySelector('img')?.classList;
+    expect(imgClasses?.contains('blur')).to.be.true;
+  });
+
+  it('should blur image if content warning flag set', async () => {
+    const model = new TileModel({ identifier: 'foo' });
+    model.contentWarning = true;
+
+    const el = await fixture<ItemImage>(html`
+      <item-image
+        .isListTile=${false}
+        .isCompactTile=${false}
+        .model=${model}
+        .baseImageUrl=${baseImageUrl}
+      >
+      </item-image>
+    `);
+
+    const dropShadow = el.shadowRoot?.querySelector('.drop-shadow');
+    expect(dropShadow).to.exist;
+
+    const imgClasses = dropShadow?.querySelector('img')?.classList;
+    expect(imgClasses?.contains('blur')).to.be.true;
+  });
+
+  it('should not blur image if no login required nor content warning', async () => {
+    const model = new TileModel({ identifier: 'foo' });
+
+    const el = await fixture<ItemImage>(html`
+      <item-image
+        .isListTile=${false}
+        .isCompactTile=${false}
+        .model=${model}
+        .baseImageUrl=${baseImageUrl}
+      >
+      </item-image>
+    `);
+
+    const dropShadow = el.shadowRoot?.querySelector('.drop-shadow');
+    expect(dropShadow).to.exist;
+
+    const imgClasses = dropShadow?.querySelector('img')?.classList;
+    expect(imgClasses?.contains('blur')).to.be.false;
+  });
+
+  it('should not blur image if blurring is suppressed, regardless of content flags', async () => {
+    const model = new TileModel({ identifier: 'foo' });
+    model.loginRequired = true;
+    model.contentWarning = true;
+
+    const el = await fixture<ItemImage>(html`
+      <item-image
+        .isListTile=${false}
+        .isCompactTile=${false}
+        .model=${model}
+        .baseImageUrl=${baseImageUrl}
+        suppressBlurring
+      >
+      </item-image>
+    `);
+
+    const dropShadow = el.shadowRoot?.querySelector('.drop-shadow');
+    expect(dropShadow).to.exist;
+
+    const imgClasses = dropShadow?.querySelector('img')?.classList;
+    expect(imgClasses?.contains('blur')).to.be.false;
+  });
 });