@internetarchive/collection-browser 0.2.21 → 0.2.22-rc1

package/dist/src/collection-facets/more-facets-pagination.js

@@ -0,0 +1,267 @@
+import { __decorate } from "tslib";
+import { css, 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';
+let MoreFacetsPagination = class MoreFacetsPagination extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Number of pages can be moved in back/forward
+         */
+        this.step = 2;
+        this.currentPage = 1;
+        this.pages = [];
+    }
+    firstUpdated() {
+        this.observePageCount();
+    }
+    updated(changed) {
+        if (changed.has('size')) {
+            this.observePageCount();
+        }
+        if (changed.has('currentPage')) {
+            this.observePageCount();
+            this.emitPageClick();
+        }
+    }
+    /** creates `this.pages` array that notes which pages to draw
+     * - `0` is elipses marker
+     * - rule: selected page is centered between -2/+2 pages
+     * - outlier: first page selected, show _1_ 2 3 ... N
+     * - outlier: second page selected, show 1 _2_ 3 4 ... N
+     * - outlier: last page selected, show 1 ... N-2 N-1 _N_
+     * - outlier: if page count = 7, & selected is either [2, 3, 4, 5, 6], show all pages
+     */
+    observePageCount() {
+        this.pages = []; /* `0` is elipses marker */
+        const paginatorMaxPagesToShow = 7;
+        const atMinThreshold = this.size <= paginatorMaxPagesToShow;
+        /** Display outliers  */
+        if (this.size <= 5) {
+            // display all pages
+            this.pages = [...Array(this.size).keys()].map(i => i + 1);
+            return;
+        }
+        if (this.size === paginatorMaxPagesToShow) {
+            // edge: 7 pages
+            if (this.currentPage === 2) {
+                this.pages = [1, 2, 3, 4, 0, this.size];
+                return;
+            }
+            if (this.currentPage === this.size - 1) {
+                this.pages = [1, 0, 4, 5, this.size - 1, this.size];
+                return;
+            }
+        }
+        if (this.currentPage === 1) {
+            // first page
+            this.pages = [1, 2, 3, 0, this.size];
+            return;
+        }
+        if (this.currentPage === this.size) {
+            // last page
+            this.pages = [1, 0, this.size - 2, this.size - 1, this.size];
+            return;
+        }
+        if (this.currentPage === this.size - 1) {
+            // second last page
+            this.pages = [
+                1,
+                0,
+                this.size - 3,
+                this.size - 2,
+                this.size - 1,
+                this.size,
+            ];
+            return;
+        }
+        if (atMinThreshold &&
+            this.currentPage > 1 &&
+            this.currentPage < paginatorMaxPagesToShow) {
+            this.pages = [...Array(this.size).keys()].map(i => i + 1);
+            return;
+        }
+        /* The rest here calculates the range to display in "page window" */
+        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;
+        }
+        if (startPage === 2) {
+            endPage -= 1;
+        }
+        if (endPage === this.size - 1) {
+            startPage += 1;
+        }
+        // create first page node
+        this.createFirstNode(startPage);
+        // create middle pages node
+        this.createMiddelNode(startPage, endPage);
+        // create last page node
+        this.createLastNode(endPage);
+    }
+    createFirstNode(startPage) {
+        var _a, _b;
+        if (startPage > 1) {
+            (_a = this.pages) === null || _a === void 0 ? void 0 : _a.push(1);
+        }
+        if (startPage > 2) {
+            (_b = this.pages) === null || _b === void 0 ? void 0 : _b.push(0); // let's asssume 0 is for ellipsis template
+        }
+    }
+    createMiddelNode(startPage, endPage) {
+        var _a;
+        for (let page = startPage; page <= endPage; page += 1) {
+            (_a = this.pages) === null || _a === void 0 ? void 0 : _a.push(page);
+        }
+    }
+    createLastNode(endPage) {
+        var _a, _b;
+        if (endPage < this.size - 1) {
+            (_a = this.pages) === null || _a === void 0 ? void 0 : _a.push(0); // let's asssume 0 is for ellipsis template
+        }
+        if (endPage < this.size) {
+            (_b = this.pages) === null || _b === void 0 ? void 0 : _b.push(this.size);
+        }
+    }
+    get getEllipsisTemplate() {
+        return html `<i class="ellipses">...</i>`;
+    }
+    emitPageClick() {
+        this.dispatchEvent(new CustomEvent('pageNumberClicked', {
+            detail: { page: this.currentPage },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    onRewind() {
+        this.currentPage -= 1;
+        if (this.currentPage < 1) {
+            this.currentPage = 1;
+        }
+    }
+    onForward() {
+        this.currentPage += 1;
+        if (this.currentPage > this.size) {
+            this.currentPage = this.size;
+        }
+    }
+    onChange(page) {
+        this.currentPage = page;
+    }
+    getPageTemplate(page) {
+        return html `
+      <button
+        @click=${() => this.onChange(page)}
+        class=${this.currentPage === page ? 'current' : ''}
+        data-page=${page}
+      >
+        ${page}
+      </button>
+    `;
+    }
+    get getPagesTemplate() {
+        var _a;
+        if (!this.pages || !this.pages.length) {
+            return nothing;
+        }
+        return html `
+      ${(_a = this.pages) === null || _a === void 0 ? void 0 : _a.map(page => html `${page !== 0
+            ? this.getPageTemplate(page)
+            : this.getEllipsisTemplate}`)}
+    `;
+    }
+    render() {
+        return html `
+      <div class="facets-pagination">
+        <button class="arrow-icon rewind" @click=${this.onRewind}>
+          <span class="sr-only">Rewind pagination:</span>
+          ${arrowLeftIcon}
+        </button>
+        <div class="page-numbers">${this.getPagesTemplate}</div>
+        <button class="arrow-icon forward" @click=${this.onForward}>
+          <span class="sr-only">Forward pagination:</span>
+          ${arrowRightIcon}
+        </button>
+      </div>
+    `;
+    }
+    static get styles() {
+        return css `
+      .facets-pagination {
+        user-select: none;
+        margin-top: 10px;
+        background-color: #eee;
+        text-align: center;
+      }
+      .facets-pagination button {
+        border: none;
+        background: none;
+      }
+      .facets-pagination .arrow-icon {
+        width: 2.5rem;
+        vertical-align: middle;
+      }
+      .facets-pagination .arrow-icon svg {
+        height: 14px;
+      }
+      .facets-pagination button,
+      .facets-pagination i {
+        background: none;
+        border: 0;
+        cursor: pointer;
+        border-radius: 100%;
+        margin: 10px 5px;
+        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;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], MoreFacetsPagination.prototype, "size", void 0);
+__decorate([
+    property({ type: Number })
+], MoreFacetsPagination.prototype, "step", void 0);
+__decorate([
+    property({ type: Number })
+], MoreFacetsPagination.prototype, "currentPage", void 0);
+__decorate([
+    state()
+], MoreFacetsPagination.prototype, "pages", void 0);
+MoreFacetsPagination = __decorate([
+    customElement('more-facets-pagination')
+], MoreFacetsPagination);
+export { MoreFacetsPagination };
+//# sourceMappingURL=more-facets-pagination.js.map

package/dist/src/collection-facets/more-facets-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"more-facets-pagination.js","sourceRoot":"","sources":["../../../src/collection-facets/more-facets-pagination.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport arrowLeftIcon from '../assets/img/icons/arrow-left';\nimport arrowRightIcon from '../assets/img/icons/arrow-right';\n\n@customElement('more-facets-pagination')\nexport class MoreFacetsPagination extends LitElement {\n  /**\n   * Total number of pages\n   */\n  @property({ type: Number }) size!: number;\n\n  /**\n   * Number of pages can be moved in back/forward\n   */\n  @property({ type: Number }) step = 2;\n\n  @property({ type: Number }) currentPage: number = 1;\n\n  @state() pages?: number[] = [];\n\n  firstUpdated() {\n    this.observePageCount();\n  }\n\n  override updated(changed: Map<string, any>) {\n    if (changed.has('size')) {\n      this.observePageCount();\n    }\n    if (changed.has('currentPage')) {\n      this.observePageCount();\n      this.emitPageClick();\n    }\n  }\n\n  /** creates `this.pages` array that notes which pages to draw\n   * - `0` is elipses marker\n   * - rule: selected page is centered between -2/+2 pages\n   * - outlier: first page selected, show _1_ 2 3 ... N\n   * - outlier: second page selected, show 1 _2_ 3 4 ... N\n   * - outlier: last page selected, show 1 ... N-2 N-1 _N_\n   * - outlier: if page count = 7, & selected is either [2, 3, 4, 5, 6], show all pages\n   */\n  observePageCount() {\n    this.pages = []; /* `0` is elipses marker */\n\n    const paginatorMaxPagesToShow = 7;\n    const atMinThreshold = this.size <= paginatorMaxPagesToShow;\n\n    /** Display outliers  */\n    if (this.size <= 5) {\n      // display all pages\n      this.pages = [...Array(this.size).keys()].map(i => i + 1);\n      return;\n    }\n\n    if (this.size === paginatorMaxPagesToShow) {\n      // edge: 7 pages\n      if (this.currentPage === 2) {\n        this.pages = [1, 2, 3, 4, 0, this.size];\n        return;\n      }\n\n      if (this.currentPage === this.size - 1) {\n        this.pages = [1, 0, 4, 5, this.size - 1, this.size];\n        return;\n      }\n    }\n\n    if (this.currentPage === 1) {\n      // first page\n      this.pages = [1, 2, 3, 0, this.size];\n      return;\n    }\n\n    if (this.currentPage === this.size) {\n      // last page\n      this.pages = [1, 0, this.size - 2, this.size - 1, this.size];\n      return;\n    }\n\n    if (this.currentPage === this.size - 1) {\n      // second last page\n      this.pages = [\n        1,\n        0,\n        this.size - 3,\n        this.size - 2,\n        this.size - 1,\n        this.size,\n      ];\n      return;\n    }\n\n    if (\n      atMinThreshold &&\n      this.currentPage > 1 &&\n      this.currentPage < paginatorMaxPagesToShow\n    ) {\n      this.pages = [...Array(this.size).keys()].map(i => i + 1);\n      return;\n    }\n\n    /* The rest here calculates the range to display in \"page window\" */\n    let startPage = this.currentPage - this.step;\n    let endPage = this.currentPage + this.step;\n\n    if (startPage <= 0) {\n      endPage += -startPage + 1;\n      startPage = 1;\n    }\n\n    if (endPage >= this.size) {\n      startPage = Math.max(startPage - (endPage - this.size), 1);\n      endPage = this.size;\n    }\n\n    if (startPage === 2) {\n      endPage -= 1;\n    }\n\n    if (endPage === this.size - 1) {\n      startPage += 1;\n    }\n\n    // create first page node\n    this.createFirstNode(startPage);\n\n    // create middle pages node\n    this.createMiddelNode(startPage, endPage);\n\n    // create last page node\n    this.createLastNode(endPage);\n  }\n\n  private createFirstNode(startPage: number) {\n    if (startPage > 1) {\n      this.pages?.push(1);\n    }\n    if (startPage > 2) {\n      this.pages?.push(0); // let's asssume 0 is for ellipsis template\n    }\n  }\n\n  private createMiddelNode(startPage: number, endPage: number) {\n    for (let page = startPage; page <= endPage; page += 1) {\n      this.pages?.push(page);\n    }\n  }\n\n  private createLastNode(endPage: number) {\n    if (endPage < this.size - 1) {\n      this.pages?.push(0); // let's asssume 0 is for ellipsis template\n    }\n    if (endPage < this.size) {\n      this.pages?.push(this.size);\n    }\n  }\n\n  private get getEllipsisTemplate() {\n    return html`<i class=\"ellipses\">...</i>`;\n  }\n\n  emitPageClick() {\n    this.dispatchEvent(\n      new CustomEvent('pageNumberClicked', {\n        detail: { page: this.currentPage },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private onRewind() {\n    this.currentPage -= 1;\n    if (this.currentPage < 1) {\n      this.currentPage = 1;\n    }\n  }\n\n  private onForward() {\n    this.currentPage += 1;\n    if (this.currentPage > this.size) {\n      this.currentPage = this.size;\n    }\n  }\n\n  private onChange(page: number) {\n    this.currentPage = page;\n  }\n\n  private getPageTemplate(page: number) {\n    return html`\n      <button\n        @click=${() => this.onChange(page)}\n        class=${this.currentPage === page ? 'current' : ''}\n        data-page=${page}\n      >\n        ${page}\n      </button>\n    `;\n  }\n\n  private get getPagesTemplate(): TemplateResult | typeof nothing {\n    if (!this.pages || !this.pages.length) {\n      return nothing;\n    }\n\n    return html`\n      ${this.pages?.map(\n        page =>\n          html`${page !== 0\n            ? this.getPageTemplate(page)\n            : this.getEllipsisTemplate}`\n      )}\n    `;\n  }\n\n  render() {\n    return html`\n      <div class=\"facets-pagination\">\n        <button class=\"arrow-icon rewind\" @click=${this.onRewind}>\n          <span class=\"sr-only\">Rewind pagination:</span>\n          ${arrowLeftIcon}\n        </button>\n        <div class=\"page-numbers\">${this.getPagesTemplate}</div>\n        <button class=\"arrow-icon forward\" @click=${this.onForward}>\n          <span class=\"sr-only\">Forward pagination:</span>\n          ${arrowRightIcon}\n        </button>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .facets-pagination {\n        user-select: none;\n        margin-top: 10px;\n        background-color: #eee;\n        text-align: center;\n      }\n      .facets-pagination button {\n        border: none;\n        background: none;\n      }\n      .facets-pagination .arrow-icon {\n        width: 2.5rem;\n        vertical-align: middle;\n      }\n      .facets-pagination .arrow-icon svg {\n        height: 14px;\n      }\n      .facets-pagination button,\n      .facets-pagination i {\n        background: none;\n        border: 0;\n        cursor: pointer;\n        border-radius: 100%;\n        margin: 10px 5px;\n        padding: 5px;\n        font-size: 1.4rem;\n        vertical-align: middle;\n        display: inline-block;\n        min-width: 2.5rem;\n      }\n      .facets-pagination i {\n        cursor: auto;\n        display: inline;\n      }\n      .facets-pagination button.current {\n        background: black;\n        color: white;\n      }\n      .page-numbers {\n        display: inline-block;\n      }\n      .sr-only {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        margin: -1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        border: 0;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/collection-facets.d.ts

@@ -1,12 +1,16 @@
 import { LitElement, PropertyValues, TemplateResult } from 'lit';
-import type { Aggregation } from '@internetarchive/search-service';
+import type { Aggregation, SearchServiceInterface } from '@internetarchive/search-service';
 import '@internetarchive/histogram-date-range';
 import '@internetarchive/feature-feedback';
 import '@internetarchive/collection-name-cache';
 import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
-import { FacetOption, SelectedFacets } from './models';
+import { ModalManagerInterface } from '@internetarchive/modal-manager';
+import { FacetOption, SelectedFacets, FacetGroup } from './models';
 import type { LanguageCodeHandlerInterface } from './language-code-handler/language-code-handler';
+import './collection-facets/more-facets-content';
+import './collection-facets/facets-template';
 export declare class CollectionFacets extends LitElement {
+    searchService?: SearchServiceInterface;
     aggregations?: Record<string, Aggregation>;
     fullYearsHistogramAggregation?: Aggregation;
     minSelectedDate?: string;
@@ -16,11 +20,17 @@ export declare class CollectionFacets extends LitElement {
     selectedFacets?: SelectedFacets;
     collapsableFacets: boolean;
     showHistogramDatePicker: boolean;
+    fullQuery?: string;
+    modalManager?: ModalManagerInterface;
     languageCodeHandler?: LanguageCodeHandlerInterface;
     collectionNameCache?: CollectionNameCacheInterface;
     /** Fires when a facet is clicked */
     onFacetClick?: (name: FacetOption, facetChecked: boolean, negative: boolean) => void;
     openFacets: Record<FacetOption, boolean>;
+    /**
+     * render number of facet items
+     */
+    private allowedFacetCount;
     render(): TemplateResult<1>;
     updated(changed: PropertyValues): void;
     private dispatchFacetsChangedEvent;
@@ -45,13 +55,17 @@ export declare class CollectionFacets extends LitElement {
      * chevron for the mobile view
      */
     private getFacetGroupTemplate;
+    /**
+     * Generate the More... link button just below the facets group
+     *
+     * TODO: want to fire analytics?
+     */
+    private searchMoreFacetsLink;
+    showMoreFacetsModal(facetGroup: FacetGroup, sortedBy: string): Promise<void>;
     /**
      * Generate the list template for each bucket in a facet group
      */
     private getFacetTemplate;
-    private facetClicked;
-    private facetChecked;
-    private facetUnchecked;
     /**
      * Parse the aggregate key title into the human readable title
      *