@internetarchive/collection-browser 4.7.1-alpha-webdev9189.0 → 4.8.0

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

@@ -1,294 +0,0 @@
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  nothing,
-  TemplateResult,
-} 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';
-
-@customElement('more-facets-pagination')
-export class MoreFacetsPagination extends LitElement {
-  /**
-   * Total number of pages
-   */
-  @property({ type: Number }) size!: number;
-
-  /**
-   * Number of pages can be moved in back/forward
-   */
-  @property({ type: Number }) step = 2;
-
-  @property({ type: Number }) currentPage: number = 1;
-
-  @state() pages?: number[] = [];
-
-  firstUpdated() {
-    this.observePageCount();
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  override updated(changed: Map<string, any>) {
-    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);
-  }
-
-  private createFirstNode(startPage: number) {
-    if (startPage > 1) {
-      this.pages?.push(1);
-    }
-    if (startPage > 2) {
-      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 - 1) {
-      this.pages?.push(0); // let's asssume 0 is for ellipsis template
-    }
-    if (endPage < this.size) {
-      this.pages?.push(this.size);
-    }
-  }
-
-  private get getEllipsisTemplate() {
-    return html`<i class="ellipses">...</i>`;
-  }
-
-  emitPageClick() {
-    this.dispatchEvent(
-      new CustomEvent('pageNumberClicked', {
-        detail: { page: this.currentPage },
-        bubbles: true,
-        composed: true,
-      }),
-    );
-  }
-
-  private onRewind() {
-    this.currentPage -= 1;
-    if (this.currentPage < 1) {
-      this.currentPage = 1;
-    }
-  }
-
-  private onForward() {
-    this.currentPage += 1;
-    if (this.currentPage > this.size) {
-      this.currentPage = this.size;
-    }
-  }
-
-  private onChange(page: number) {
-    this.currentPage = page;
-  }
-
-  private getPageTemplate(page: number) {
-    return html`
-      <button
-        @click=${() => this.onChange(page)}
-        class=${this.currentPage === page ? 'current' : ''}
-        data-page=${page}
-      >
-        ${page}
-      </button>
-    `;
-  }
-
-  private get getPagesTemplate(): TemplateResult | typeof nothing {
-    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(): CSSResultGroup {
-    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;
-        }
-      `,
-    ];
-  }
-}

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

@@ -1,201 +0,0 @@
-import { expect, fixture, oneEvent } from '@open-wc/testing';
-import { html } from 'lit';
-import sinon from 'sinon';
-import '../../src/collection-facets/more-facets-pagination';
-import type { MoreFacetsPagination } from '../../src/collection-facets/more-facets-pagination';
-
-afterEach(() => {
-  sinon.restore();
-});
-
-describe('More facets pagination', () => {
-  describe('5 pages or less', () => {
-    it('shows all pages', async () => {
-      const el = await fixture<MoreFacetsPagination>(
-        html`<more-facets-pagination .size=${5}></more-facets-pagination>`,
-      );
-
-      await el.updateComplete;
-
-      const pageButtons = el.shadowRoot?.querySelectorAll(
-        'button[data-page]',
-      ) as NodeList;
-      expect(pageButtons.length).to.greaterThan(0);
-
-      pageButtons.forEach((button, index) => {
-        expect(button.textContent).to.contain(index + 1);
-      });
-    });
-  });
-
-  it('should render pagination template', async () => {
-    const el = await fixture<MoreFacetsPagination>(
-      html`<more-facets-pagination .size=${10}></more-facets-pagination>`,
-    );
-
-    await el.updateComplete;
-
-    expect(el.shadowRoot?.querySelector('.facets-pagination')).to.exist;
-    expect(el.shadowRoot?.querySelector('.arrow-icon')).to.exist;
-  });
-
-  it('should render page numbers', async () => {
-    const el = await fixture<MoreFacetsPagination>(
-      html`<more-facets-pagination .size=${3}></more-facets-pagination>`,
-    );
-
-    await el.updateComplete;
-
-    const pageNumberElement = el.shadowRoot?.querySelector('.page-numbers');
-    expect(pageNumberElement).to.exist;
-    expect(pageNumberElement?.querySelectorAll('button').length).to.equal(3);
-  });
-
-  it('check current page and total pages', async () => {
-    const el = await fixture<MoreFacetsPagination>(
-      html`<more-facets-pagination
-        .size=${4}
-        .currentPage=${2}
-      ></more-facets-pagination>`,
-    );
-
-    await el.updateComplete;
-
-    const pageNumberElement = el.shadowRoot?.querySelector('.page-numbers');
-    expect(pageNumberElement).to.exist;
-    expect(
-      pageNumberElement
-        ?.querySelectorAll('button')[1]
-        .classList.contains('current'),
-    ).to.be.true;
-    expect(el.pages?.length).to.equal(4);
-  });
-
-  it('get page numbers based of size and currentPage', async () => {
-    const el = await fixture<MoreFacetsPagination>(
-      html`<more-facets-pagination
-        .size=${4}
-        .currentPage=${2}
-      ></more-facets-pagination>`,
-    );
-
-    await el.updateComplete;
-
-    expect(el.pages?.length).to.equal(4);
-  });
-
-  describe('Selecting a page', () => {
-    it('fires event', async () => {
-      const el = await fixture<MoreFacetsPagination>(
-        html`<more-facets-pagination></more-facets-pagination>`,
-      );
-
-      await el.updateComplete;
-
-      setTimeout(() =>
-        el.dispatchEvent(
-          new CustomEvent('pageNumberClicked', { detail: { page: 15 } }),
-        ),
-      );
-      const { detail } = await oneEvent(el, 'pageNumberClicked');
-      expect(detail?.page).to.equal(15);
-    });
-    it('sets off side effects with `onChange`', async () => {
-      const el = await fixture<MoreFacetsPagination>(
-        html`<more-facets-pagination
-          .size=${'10'}
-          .currentPage=${2}
-        ></more-facets-pagination>`,
-      );
-
-      expect(el.currentPage).to.equal(2); // confirm current page
-
-      const fake1 = sinon.fake();
-      const fake2 = sinon.fake();
-      el.observePageCount = fake1;
-      el.emitPageClick = fake2;
-
-      // select first page button
-      const pageButton = el.shadowRoot?.querySelector(
-        '.page-numbers > button',
-      ) as HTMLButtonElement;
-      // confirm button isn't selected
-      expect(pageButton.classList.contains('current')).to.be.false;
-      pageButton.click();
-
-      await el.updateComplete;
-
-      expect(fake1.callCount).to.equal(1);
-      expect(fake2.callCount).to.equal(1);
-      expect(el.currentPage).to.equal(1); // brings us back to currentPage
-      // confirm button is selected
-      expect(pageButton.classList.contains('current')).to.be.true;
-    });
-  });
-
-  describe('Using Arrows', () => {
-    it('going backwards', async () => {
-      const el = await fixture<MoreFacetsPagination>(
-        html`<more-facets-pagination
-          .size=${'10'}
-          .currentPage=${2}
-        ></more-facets-pagination>`,
-      );
-
-      expect(el.currentPage).to.equal(2); // confirm current page
-
-      const fake1 = sinon.fake();
-      const fake2 = sinon.fake();
-      el.observePageCount = fake1;
-      el.emitPageClick = fake2;
-
-      // select first page button
-      const rewindButton = el.shadowRoot?.querySelector(
-        '.facets-pagination > button.rewind',
-      ) as HTMLButtonElement;
-      rewindButton.click();
-
-      await el.updateComplete;
-
-      expect(fake1.callCount).to.equal(1);
-      expect(fake2.callCount).to.equal(1);
-      expect(el.currentPage).to.equal(1); // brings us back 1 page
-      // confirm button is selected
-      expect(
-        (
-          el.shadowRoot?.querySelector(
-            '.page-numbers > button[data-page="1"]',
-          ) as HTMLButtonElement
-        ).classList.contains('current'),
-      ).to.be.true;
-    });
-
-    it('going forwards', async () => {
-      const el = await fixture<MoreFacetsPagination>(
-        html`<more-facets-pagination
-          .size=${'10'}
-          .currentPage=${5}
-        ></more-facets-pagination>`,
-      );
-
-      expect(el.currentPage).to.equal(5); // confirm current page
-
-      const fake1 = sinon.fake();
-      const fake2 = sinon.fake();
-      el.observePageCount = fake1;
-      el.emitPageClick = fake2;
-
-      // select first page button
-      const forwardButton = el.shadowRoot?.querySelector(
-        '.facets-pagination > button.forward',
-      ) as HTMLButtonElement;
-      forwardButton.click();
-
-      await el.updateComplete;
-
-      expect(fake1.callCount).to.equal(1);
-      expect(fake2.callCount).to.equal(1);
-      expect(el.currentPage).to.equal(6); // brings us forward 1 page
-    });
-  });
-});