@internetarchive/collection-browser 4.7.1-alpha-webdev9189.0 → 4.8.1-webdev-9227.1

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

@@ -1,260 +0,0 @@
-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';
-import { srOnlyStyle } from '../styles/sr-only';
-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();
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    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) {
-        if (startPage > 1) {
-            this.pages?.push(1);
-        }
-        if (startPage > 2) {
-            this.pages?.push(0); // let's asssume 0 is for ellipsis template
-        }
-    }
-    createMiddelNode(startPage, endPage) {
-        for (let page = startPage; page <= endPage; page += 1) {
-            this.pages?.push(page);
-        }
-    }
-    createLastNode(endPage) {
-        if (endPage < this.size - 1) {
-            this.pages?.push(0); // let's asssume 0 is for ellipsis template
-        }
-        if (endPage < this.size) {
-            this.pages?.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() {
-        if (!this.pages || !this.pages.length) {
-            return nothing;
-        }
-        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 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 [
-            srOnlyStyle,
-            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;
-          fill: #2c2c2c;
-        }
-        .facets-pagination button,
-        .facets-pagination i {
-          background: none;
-          border: 0;
-          cursor: pointer;
-          border-radius: 4px;
-          margin: 10px 5px;
-          padding: 5px;
-          font-size: 1.4rem;
-          color: inherit;
-          vertical-align: baseline;
-          display: inline-block;
-          min-width: 2.5rem;
-        }
-        .facets-pagination i {
-          cursor: auto;
-          display: inline;
-        }
-        .facets-pagination button.current {
-          background: #2c2c2c;
-          color: white;
-        }
-        .page-numbers {
-          display: inline-block;
-        }
-      `,
-        ];
-    }
-};
-__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

@@ -1 +0,0 @@
-{"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';\nimport { srOnlyStyle } from '../styles/sr-only';\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  // eslint-disable-next-line @typescript-eslint/no-explicit-any\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 [\n      srOnlyStyle,\n      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          fill: #2c2c2c;\n        }\n        .facets-pagination button,\n        .facets-pagination i {\n          background: none;\n          border: 0;\n          cursor: pointer;\n          border-radius: 4px;\n          margin: 10px 5px;\n          padding: 5px;\n          font-size: 1.4rem;\n          color: inherit;\n          vertical-align: baseline;\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: #2c2c2c;\n          color: white;\n        }\n        .page-numbers {\n          display: inline-block;\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/test/collection-browser.test.d.ts

@@ -1 +0,0 @@
-import '../src/collection-browser';