@internetarchive/collection-browser 0.2.12 → 0.2.14-alpha1

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

@@ -0,0 +1,193 @@
+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.pages = [];
+        this.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);
+    }
+    createFirstNode(startPage) {
+        var _a, _b;
+        if (startPage > 1) {
+            (_a = this.pages) === null || _a === void 0 ? void 0 : _a.push(1);
+            (_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) {
+            (_a = this.pages) === null || _a === void 0 ? void 0 : _a.push(0); // let's asssume 0 is for ellipsis template
+            (_b = this.pages) === null || _b === void 0 ? void 0 : _b.push(this.size);
+        }
+    }
+    get getEllipsisTemplate() {
+        return html `<i>...</i>`;
+    }
+    emitPageClick() {
+        this.dispatchEvent(new CustomEvent('pageNumberClicked', {
+            detail: { page: this.currentPage },
+        }));
+    }
+    onRewind() {
+        this.currentPage -= 1;
+        if (this.currentPage < 1) {
+            this.currentPage = 1;
+        }
+        this.observePageCount();
+        this.emitPageClick();
+    }
+    onForward() {
+        this.currentPage += 1;
+        if (this.currentPage > this.size) {
+            this.currentPage = this.size;
+        }
+        this.observePageCount();
+        this.emitPageClick();
+    }
+    onChange(page) {
+        this.currentPage = page;
+        this.observePageCount();
+        this.emitPageClick();
+    }
+    getPageTemplate(page) {
+        return html `
+      <button
+        @click="${() => this.onChange(page)}"
+        class="${this.currentPage === page ? 'current' : nothing}"
+      >
+        ${page}
+      </button>
+    `;
+    }
+    get getPagesTemplate() {
+        var _a;
+        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" @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() {
+        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;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], MoreFacetsPagination.prototype, "size", void 0);
+__decorate([
+    property({ type: Number })
+], MoreFacetsPagination.prototype, "step", void 0);
+__decorate([
+    state()
+], MoreFacetsPagination.prototype, "pages", void 0);
+__decorate([
+    state()
+], MoreFacetsPagination.prototype, "currentPage", 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 { css, CSSResultGroup, html, LitElement, nothing } 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?: any | undefined;\n\n  /**\n   * Number of pages can be moved in back/forward\n   */\n  @property({ type: Number }) step = 2;\n\n  @state() pages?: number[] = [];\n\n  @state() currentPage = 1;\n\n  firstUpdated() {\n    this.observePageCount();\n  }\n\n  observePageCount() {\n    this.pages = [];\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    // 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      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) {\n      this.pages?.push(0); // let's asssume 0 is for ellipsis template\n      this.pages?.push(this.size);\n    }\n  }\n\n  private get getEllipsisTemplate() {\n    return html`<i>...</i>`;\n  }\n\n  private emitPageClick() {\n    this.dispatchEvent(\n      new CustomEvent('pageNumberClicked', {\n        detail: { page: this.currentPage },\n      })\n    );\n  }\n\n  private onRewind() {\n    this.currentPage -= 1;\n    if (this.currentPage < 1) {\n      this.currentPage = 1;\n    }\n    this.observePageCount();\n    this.emitPageClick();\n  }\n\n  private onForward() {\n    this.currentPage += 1;\n    if (this.currentPage > this.size) {\n      this.currentPage = this.size;\n    }\n    this.observePageCount();\n    this.emitPageClick();\n  }\n\n  private onChange(page: number) {\n    this.currentPage = page;\n    this.observePageCount();\n    this.emitPageClick();\n  }\n\n  private getPageTemplate(page: number) {\n    return html`\n      <button\n        @click=\"${() => this.onChange(page)}\"\n        class=\"${this.currentPage === page ? 'current' : nothing}\"\n      >\n        ${page}\n      </button>\n    `;\n  }\n\n  private get getPagesTemplate() {\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\" @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\" @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: rgb(239, 239, 239);\n        text-align: center;\n        font-size: 3.2rem;\n      }\n      .facets-pagination button {\n        border: none;\n        background: none;\n      }\n      .facets-pagination .arrow-icon {\n        width: 2.5rem;\n        vertical-align: initial;\n      }\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;\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\n      .page-numbers {\n        display: inline-block;\n      }\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

@@ -0,0 +1,80 @@
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+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 { 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';
+export declare class CollectionFacets extends LitElement {
+    searchService?: SearchServiceInterface;
+    aggregations?: Record<string, Aggregation>;
+    fullYearsHistogramAggregation?: Aggregation;
+    minSelectedDate?: string;
+    maxSelectedDate?: string;
+    facetsLoading: boolean;
+    fullYearAggregationLoading: boolean;
+    selectedFacets?: SelectedFacets;
+    collapsableFacets: boolean;
+    showHistogramDatePicker: boolean;
+    fullQuery?: string;
+    modalManager?: ModalManagerInterface;
+    languageCodeHandler?: LanguageCodeHandlerInterface;
+    collectionNameCache?: CollectionNameCacheInterface;
+    openFacets: Record<FacetOption, boolean>;
+    /**
+     * If listed facets on page more then this number,
+     * - show the more link button just below the facets group
+     */
+    private moreLinkEligibilityCount;
+    render(): TemplateResult<1>;
+    updated(changed: PropertyValues): void;
+    private dispatchFacetsChangedEvent;
+    private get currentYearsHistogramAggregation();
+    private get histogramTemplate();
+    private histogramDateRangeUpdated;
+    /**
+     * Combines the selected facets with the aggregations to create a single list of facets
+     */
+    private get mergedFacets();
+    /**
+     * Converts the selected facets to a `FacetGroup` array,
+     * which is easier to work with
+     */
+    private get selectedFacetGroups();
+    /**
+     * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
+     */
+    private get aggregationFacetGroups();
+    /**
+     * Generate the template for a facet group with a header and the collapsible
+     * 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): 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
+     *
+     * Example: user_aggs__terms__field:mediatypeSorter__size:6 => Media Type
+     *
+     * @param key
+     * @returns
+     */
+    private getFacetOptionFromKey;
+    static get styles(): import("lit").CSSResult;
+}