@internetarchive/collection-browser 0.2.12 → 0.2.14-alpha1

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

@@ -0,0 +1,201 @@
+import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import arrowLeftIcon from '../assets/img/icons/arrow-left';
+import arrowRightIcon from '../assets/img/icons/arrow-right';
+
+@customElement('more-facets-pagination')
+export class MoreFacetsPagination extends LitElement {
+  /**
+   * Total number of pages
+   */
+  @property({ type: Number }) size?: any | undefined;
+
+  /**
+   * Number of pages can be moved in back/forward
+   */
+  @property({ type: Number }) step = 2;
+
+  @state() pages?: number[] = [];
+
+  @state() currentPage = 1;
+
+  firstUpdated() {
+    this.observePageCount();
+  }
+
+  observePageCount() {
+    this.pages = [];
+    let startPage = this.currentPage - this.step;
+    let endPage = this.currentPage + this.step;
+
+    if (startPage <= 0) {
+      endPage += -startPage + 1;
+      startPage = 1;
+    }
+
+    if (endPage >= this.size) {
+      startPage = Math.max(startPage - (endPage - this.size), 1);
+      endPage = this.size;
+    }
+
+    // create first page node
+    this.createFirstNode(startPage);
+
+    // create middle pages node
+    this.createMiddelNode(startPage, endPage);
+
+    // create last page node
+    this.createLastNode(endPage);
+  }
+
+  private createFirstNode(startPage: number) {
+    if (startPage > 1) {
+      this.pages?.push(1);
+      this.pages?.push(0); // let's asssume 0 is for ellipsis template
+    }
+  }
+
+  private createMiddelNode(startPage: number, endPage: number) {
+    for (let page = startPage; page <= endPage; page += 1) {
+      this.pages?.push(page);
+    }
+  }
+
+  private createLastNode(endPage: number) {
+    if (endPage < this.size) {
+      this.pages?.push(0); // let's asssume 0 is for ellipsis template
+      this.pages?.push(this.size);
+    }
+  }
+
+  private get getEllipsisTemplate() {
+    return html`<i>...</i>`;
+  }
+
+  private emitPageClick() {
+    this.dispatchEvent(
+      new CustomEvent('pageNumberClicked', {
+        detail: { page: this.currentPage },
+      })
+    );
+  }
+
+  private onRewind() {
+    this.currentPage -= 1;
+    if (this.currentPage < 1) {
+      this.currentPage = 1;
+    }
+    this.observePageCount();
+    this.emitPageClick();
+  }
+
+  private onForward() {
+    this.currentPage += 1;
+    if (this.currentPage > this.size) {
+      this.currentPage = this.size;
+    }
+    this.observePageCount();
+    this.emitPageClick();
+  }
+
+  private onChange(page: number) {
+    this.currentPage = page;
+    this.observePageCount();
+    this.emitPageClick();
+  }
+
+  private getPageTemplate(page: number) {
+    return html`
+      <button
+        @click="${() => this.onChange(page)}"
+        class="${this.currentPage === page ? 'current' : nothing}"
+      >
+        ${page}
+      </button>
+    `;
+  }
+
+  private get getPagesTemplate() {
+    return html`
+      ${this.pages?.map(
+        page =>
+          html`${page !== 0
+            ? this.getPageTemplate(page)
+            : this.getEllipsisTemplate}`
+      )}
+    `;
+  }
+
+  render() {
+    return html`
+      <div class="facets-pagination">
+        <button class="arrow-icon" @click=${this.onRewind}>
+          <span class="sr-only">Rewind pagination:</span>
+          ${arrowLeftIcon}
+        </button>
+        <div class="page-numbers">${this.getPagesTemplate}</div>
+        <button class="arrow-icon" @click=${this.onForward}>
+          <span class="sr-only">Forward pagination:</span>
+          ${arrowRightIcon}
+        </button>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .facets-pagination {
+        user-select: none;
+        margin-top: 10px;
+        background-color: rgb(239, 239, 239);
+        text-align: center;
+        font-size: 3.2rem;
+      }
+      .facets-pagination button {
+        border: none;
+        background: none;
+      }
+      .facets-pagination .arrow-icon {
+        width: 2.5rem;
+        vertical-align: initial;
+      }
+
+      .facets-pagination button,
+      .facets-pagination i {
+        background: none;
+        border: 0;
+        cursor: pointer;
+        border-radius: 100%;
+        margin: 10px;
+        padding: 5px;
+        font-size: 1.4rem;
+        vertical-align: middle;
+        display: inline-block;
+        min-width: 2.5rem;
+      }
+      .facets-pagination i {
+        cursor: auto;
+        display: inline;
+      }
+      .facets-pagination button.current {
+        background: black;
+        color: white;
+      }
+
+      .page-numbers {
+        display: inline-block;
+      }
+
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+      }
+    `;
+  }
+}

package/src/collection-facets.ts

@@ -9,11 +9,19 @@ import {
 } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
-import { Aggregation, Bucket } from '@internetarchive/search-service';
+import type {
+  Aggregation,
+  Bucket,
+  SearchServiceInterface,
+} from '@internetarchive/search-service';
 import '@internetarchive/histogram-date-range';
 import '@internetarchive/feature-feedback';
 import '@internetarchive/collection-name-cache';
-import { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
+import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
+import {
+  ModalConfig,
+  ModalManagerInterface,
+} from '@internetarchive/modal-manager';
 import eyeIcon from './assets/img/icons/eye';
 import eyeClosedIcon from './assets/img/icons/eye-closed';
 import chevronIcon from './assets/img/icons/chevron';
@@ -24,7 +32,8 @@ import {
   FacetBucket,
   defaultSelectedFacets,
 } from './models';
-import { LanguageCodeHandlerInterface } from './language-code-handler/language-code-handler';
+import type { LanguageCodeHandlerInterface } from './language-code-handler/language-code-handler';
+import './collection-facets/more-facets-content';
 
 const facetDisplayOrder: FacetOption[] = [
   'mediatype',
@@ -55,6 +64,8 @@ const facetTitles: Record<FacetOption, string> = {
 
 @customElement('collection-facets')
 export class CollectionFacets extends LitElement {
+  @property({ type: Object }) searchService?: SearchServiceInterface;
+
   @property({ type: Object }) aggregations?: Record<string, Aggregation>;
 
   @property({ type: Object }) fullYearsHistogramAggregation?: Aggregation;
@@ -73,6 +84,10 @@ export class CollectionFacets extends LitElement {
 
   @property({ type: Boolean }) showHistogramDatePicker = false;
 
+  @property({ type: String }) fullQuery?: string;
+
+  @property({ type: Object }) modalManager?: ModalManagerInterface;
+
   @property({ type: Object })
   languageCodeHandler?: LanguageCodeHandlerInterface;
 
@@ -88,6 +103,12 @@ export class CollectionFacets extends LitElement {
     year: false,
   };
 
+  /**
+   * If listed facets on page more then this number,
+   * - show the more link button just below the facets group
+   */
+  private moreLinkEligibilityCount = 5;
+
   render() {
     return html`
       <div id="container" class="${this.facetsLoading ? 'loading' : ''}">
@@ -112,6 +133,7 @@ export class CollectionFacets extends LitElement {
     }
   }
 
+  // TODO: want to fire analytics?
   private dispatchFacetsChangedEvent() {
     const event = new CustomEvent<SelectedFacets>('facetsChanged', {
       detail: this.selectedFacets,
@@ -322,11 +344,92 @@ export class CollectionFacets extends LitElement {
         </h1>
         <div class="facet-group-content ${isOpen ? 'open' : ''}">
           ${this.getFacetTemplate(facetGroup)}
+          ${this.searchMoreFacetsLink(facetGroup)}
         </div>
       </div>
     `;
   }
 
+  /**
+   * Generate the More... link button just below the facets group
+   *
+   * TODO: want to fire analytics?
+   */
+  private searchMoreFacetsLink(
+    facetGroup: FacetGroup
+  ): TemplateResult | typeof nothing {
+    // don't render More... link if you facets is < this.moreLinkEligibilityCount
+    if (Object.keys(facetGroup.buckets).length < this.moreLinkEligibilityCount)
+      return nothing;
+
+    return html`<button
+      class="more-link"
+      @click=${() => {
+        this.showMoreFacetsModal(facetGroup);
+      }}
+    >
+      More...
+    </button>`;
+  }
+
+  async showMoreFacetsModal(facetGroup: FacetGroup): Promise<void> {
+    const facetAggrKey = Object.keys(aggregationToFacetOption).find(
+      value => aggregationToFacetOption[value] === facetGroup.key
+    );
+
+    // TODO - lets move sr-only style into modal-manager component as well
+    const headline = html`
+      <span
+        style="display:block;text-align:left;font-size:1.8rem;padding:0 10px;"
+      >
+        <span
+          style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip: rect(0,0,0,0);border:0;"
+          >More facets for:
+        </span>
+        ${facetTitles[facetGroup.key]}
+        <img
+          src="https://archive.org/images/filter-count.png"
+          style="height: 1.5rem;vertical-align: baseline;"
+          alt=""
+        />
+      </span>
+    `;
+
+    const message = html`
+      <more-facets-content
+        @facetsChanged=${(e: CustomEvent) => {
+          const event = new CustomEvent<SelectedFacets>('facetsChanged', {
+            detail: e.detail,
+            bubbles: true,
+            composed: true,
+          });
+          this.dispatchEvent(event);
+        }}
+        .facetKey=${facetGroup.key}
+        .facetAggregationKey=${facetAggrKey}
+        .fullQuery=${this.fullQuery}
+        .modalManager=${this.modalManager}
+        .searchService=${this.searchService}
+        .collectionNameCache=${this.collectionNameCache}
+        .languageCodeHandler=${this.languageCodeHandler}
+        .selectedFacets=${this.selectedFacets}
+      >
+      </more-facets-content>
+    `;
+
+    const config = new ModalConfig({
+      bodyColor: '#fff',
+      headerColor: '#194880',
+      showHeaderLogo: false,
+      closeOnBackdropClick: true, // TODO: want to fire analytics
+      title: html`Select filters`,
+      headline,
+      message,
+    });
+    this.modalManager?.classList.add('more-search-facets');
+    this.modalManager?.showModal({ config });
+  }
+
   /**
    * Generate the list template for each bucket in a facet group
    */
@@ -605,6 +708,19 @@ export class CollectionFacets extends LitElement {
       .hide-facet-icon.active .eye {
         display: none;
       }
+
+      .more-link {
+        font-size: 1.2rem;
+        text-decoration: none;
+        padding: 0px 4px;
+        background: white;
+        border: 0;
+        color: blue;
+        cursor: pointer;
+      }
+      .sorting-icon {
+        cursor: pointer;
+      }
     `;
   }
 }

package/src/restoration-state-handler.ts

@@ -1,4 +1,4 @@
-import { SortDirection, SortParam } from '@internetarchive/search-service';
+import type { SortDirection, SortParam } from '@internetarchive/search-service';
 import { getCookie, setCookie } from 'typescript-cookie';
 import {
   MetadataFieldToSortField,

package/src/sort-filter-bar/sort-filter-bar.ts

@@ -7,7 +7,7 @@ import {
   TemplateResult,
 } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import {
+import type {
   SharedResizeObserverInterface,
   SharedResizeObserverResizeHandlerInterface,
 } from '@internetarchive/shared-resize-observer';

package/src/tiles/grid/account-tile.ts

@@ -1,6 +1,6 @@
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { TileModel } from '../../models';
+import type { TileModel } from '../../models';
 
 import './tile-stats';
 

package/src/tiles/grid/collection-tile.ts

@@ -2,7 +2,7 @@ import { msg } from '@lit/localize';
 import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
-import { TileModel } from '../../models';
+import type { TileModel } from '../../models';
 
 @customElement('collection-tile')
 export class CollectionTile extends LitElement {

package/src/tiles/grid/item-tile.ts

@@ -2,10 +2,10 @@
 import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { SortParam } from '@internetarchive/search-service';
+import type { SortParam } from '@internetarchive/search-service';
 
 import { formatDate } from '../../utils/format-date';
-import { TileModel } from '../../models';
+import type { TileModel } from '../../models';
 
 import '../image-block';
 import '../item-image';

package/src/tiles/image-block.ts

@@ -2,7 +2,7 @@ import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ClassInfo, classMap } from 'lit/directives/class-map.js';
 
-import { TileModel } from '../models';
+import type { TileModel } from '../models';
 
 import './overlay/icon-overlay';
 import './overlay/text-overlay';

package/src/tiles/item-image.ts

@@ -2,7 +2,7 @@ import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { ClassInfo, classMap } from 'lit/directives/class-map.js';
 
-import { TileModel } from '../models';
+import type { TileModel } from '../models';
 
 import {
   baseItemImageStyles,

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

@@ -1,8 +1,8 @@
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { SortParam } from '@internetarchive/search-service';
+import type { SortParam } from '@internetarchive/search-service';
 import { dateLabel } from './date-label';
-import { TileModel } from '../../models';
+import type { TileModel } from '../../models';
 
 @customElement('tile-list-compact-header')
 export class TileListCompactHeader extends LitElement {

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

@@ -1,9 +1,9 @@
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { SortParam } from '@internetarchive/search-service';
 import DOMPurify from 'dompurify';
+import type { SortParam } from '@internetarchive/search-service';
+import type { TileModel } from '../../models';
 
-import { TileModel } from '../../models';
 import { formatCount, NumberFormat } from '../../utils/format-count';
 import { formatDate, DateFormat } from '../../utils/format-date';
 import { accountLabel } from './account-label';

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

@@ -10,14 +10,14 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { join } from 'lit/directives/join.js';
 import { map } from 'lit/directives/map.js';
 import { customElement, property, state } from 'lit/decorators.js';
-
-import { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
-import { SortParam } from '@internetarchive/search-service';
 import DOMPurify from 'dompurify';
 
+import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
+import type { SortParam } from '@internetarchive/search-service';
+import type { TileModel } from '../../models';
+
 import { dateLabel } from './date-label';
 import { accountLabel } from './account-label';
-import { TileModel } from '../../models';
 import { formatCount, NumberFormat } from '../../utils/format-count';
 import { formatDate, DateFormat } from '../../utils/format-date';
 

package/src/tiles/tile-dispatcher.ts

@@ -1,12 +1,12 @@
 import { css, html, LitElement, nothing, PropertyValues } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import {
+import type {
   SharedResizeObserverInterface,
   SharedResizeObserverResizeHandlerInterface,
 } from '@internetarchive/shared-resize-observer';
 import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
-import { SortParam } from '@internetarchive/search-service';
+import type { SortParam } from '@internetarchive/search-service';
 import type { TileDisplayMode, TileModel } from '../models';
 import './grid/collection-tile';
 import './grid/item-tile';

package/test/collection-browser.test.ts

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-duplicates */
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
-import { CollectionBrowser } from '../src/collection-browser';
+import type { CollectionBrowser } from '../src/collection-browser';
 import '../src/collection-browser';
 import { MockSearchService } from './mocks/mock-search-service';
 import { MockCollectionNameCache } from './mocks/mock-collection-name-cache';

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

@@ -0,0 +1,113 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture, oneEvent } from '@open-wc/testing';
+import { html } from 'lit';
+import type { MoreFacetsContent } from '../../src/collection-facets/more-facets-content';
+import '../../src/collection-facets/more-facets-content';
+import { MockSearchService } from '../mocks/mock-search-service';
+
+describe('More facets content', () => {
+  it('should render more facets template', async () => {
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content></more-facets-content>`
+    );
+
+    el.facetsLoading = false;
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.facets-content')).to.exist;
+  });
+
+  it('should render more facets loader template', async () => {
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content></more-facets-content>`
+    );
+
+    el.facetsLoading = true;
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.facets-loader')).to.exist;
+  });
+
+  it('should render more facets empty template', async () => {
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content></more-facets-content>`
+    );
+
+    el.facetsLoading = false;
+    el.paginationSize = 0;
+    await el.updateComplete;
+
+    expect(
+      el.shadowRoot?.querySelector('#more-facets-page')?.textContent
+    ).to.contains('No result found. please try again later.');
+  });
+
+  it('should render pagination for more facets', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .searchService=${searchService}
+      ></more-facets-content>`
+    );
+
+    el.facetKey = 'mediatype';
+    el.facetsLoading = false;
+    el.paginationSize = 6;
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelectorAll('more-facets-pagination')).to.exist;
+  });
+
+  it('query for more facets content using search service', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .searchService=${searchService}
+      ></more-facets-content>`
+    );
+
+    el.facetKey = 'collection';
+    el.fullQuery = 'title:hello';
+    await el.updateComplete;
+
+    expect(searchService.searchParams?.query).to.equal('title:hello');
+  });
+
+  it('query for specific facets data', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .searchService=${searchService}
+      ></more-facets-content>`
+    );
+
+    el.facetKey = 'language';
+    el.facetsLoading = false;
+    await el.updateComplete;
+
+    expect(el.paginationSize).to.equal(1);
+    expect(el.shadowRoot?.querySelector('.facet-list')).to.exist;
+    expect(Object.keys(el.castedBuckets as []).length).to.equal(7);
+  });
+
+  it('page number clicked event', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .searchService=${searchService}
+      ></more-facets-content>`
+    );
+
+    setTimeout(() =>
+      el.dispatchEvent(
+        new CustomEvent('pageNumberClicked', { detail: { page: 15 } })
+      )
+    );
+    const { detail } = await oneEvent(el, 'pageNumberClicked');
+    expect(detail?.page).to.equal(15);
+  });
+});