@internetarchive/collection-browser 0.2.15-alpha.1 → 0.2.15

package/package.json

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "0.2.15-alpha.1",
+  "version": "0.2.15",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {

package/src/collection-browser.ts

@@ -497,7 +497,8 @@ export class CollectionBrowser
     if (
       changed.has('displayMode') ||
       changed.has('baseNavigationUrl') ||
-      changed.has('baseImageUrl')
+      changed.has('baseImageUrl') ||
+      changed.has('loggedIn')
     ) {
       this.infiniteScroller?.reload();
     }
@@ -1208,17 +1209,6 @@ export class CollectionBrowser
       width: 18rem;
       padding-right: 12px;
       padding-right: 1rem;
-      padding-bottom: 20px;
-      top: 0;
-      position: sticky;
-      max-height: 100vh;
-      overflow: scroll;
-      -ms-overflow-style: none; /* hide scrollbar IE and Edge */
-      scrollbar-width: none; /* hide scrollbar Firefox */
-    }
-
-    #left-column::-webkit-scrollbar {
-      display: none;
     }
 
     .mobile #left-column {
@@ -1236,7 +1226,6 @@ export class CollectionBrowser
       max-height: 0;
       transition: max-height 0.2s ease-in-out;
       z-index: 1;
-      padding-bottom: 2rem;
     }
 
     .mobile #facets-container {

package/src/models.ts

@@ -47,7 +47,8 @@ export type CollectionBrowserContext = 'collection' | 'search';
  */
 export enum SortField {
   'relevance' = 'relevance',
-  'views' = 'views',
+  'alltimeview' = 'alltimeview',
+  'weeklyview' = 'weeklyview',
   'title' = 'title',
   'datearchived' = 'datearchived',
   'date' = 'date',
@@ -60,6 +61,7 @@ export enum SortField {
  * The metadata fields we sort by that map to the SortFields above
  */
 export type MetadataSortField =
+  | 'downloads'
   | 'week'
   | 'titleSorter'
   | 'date'
@@ -72,7 +74,8 @@ export const SortFieldDisplayName: {
   [key in SortField]: string;
 } = {
   relevance: 'Relevance',
-  views: 'Views',
+  alltimeview: 'All-time Views',
+  weeklyview: 'Weekly Views',
   title: 'Title',
   datearchived: 'Date Archived',
   date: 'Date Published',
@@ -88,7 +91,8 @@ export const SortFieldToMetadataField: {
   [key in SortField]: MetadataSortField | null;
 } = {
   relevance: null,
-  views: 'week',
+  alltimeview: 'downloads',
+  weeklyview: 'week',
   title: 'titleSorter',
   datearchived: 'publicdate',
   date: 'date',
@@ -103,13 +107,14 @@ export const SortFieldToMetadataField: {
 export const MetadataFieldToSortField: {
   [key in MetadataSortField]: SortField;
 } = {
+  week: SortField.weeklyview,
+  downloads: SortField.alltimeview,
   titleSorter: SortField.title,
   date: SortField.date,
   publicdate: SortField.datearchived,
   reviewdate: SortField.datereviewed,
   addeddate: SortField.dateadded,
   creatorSorter: SortField.creator,
-  week: SortField.views,
 };
 
 export type FacetOption =

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

@@ -48,6 +48,8 @@ export class SortFilterBar
 
   @state() dateSortSelectorVisible = false;
 
+  @state() viewSortSelectorVisible = false;
+
   @state() desktopSelectorBarWidth = 0;
 
   @state() selectorBarContainerWidth = 0;
@@ -76,6 +78,9 @@ export class SortFilterBar
           <div id="display-style-selector">${this.displayOptionTemplate}</div>
         </div>
 
+        ${this.viewSortSelectorVisible && !this.mobileSelectorVisible
+          ? this.viewSortSelector
+          : nothing}
         ${this.dateSortSelectorVisible && !this.mobileSelectorVisible
           ? this.dateSortSelector
           : nothing}
@@ -103,7 +108,10 @@ export class SortFilterBar
       this.alphaSelectorVisible = 'creator';
     }
 
-    if (changed.has('dateSortSelectorVisible')) {
+    if (
+      changed.has('dateSortSelectorVisible') ||
+      changed.has('viewSortSelectorVisible')
+    ) {
       this.setupEscapeListeners();
     }
 
@@ -117,21 +125,22 @@ export class SortFilterBar
   }
 
   private setupEscapeListeners() {
-    if (this.dateSortSelectorVisible) {
+    if (this.dateSortSelectorVisible || this.viewSortSelectorVisible) {
       document.addEventListener(
         'keydown',
-        this.boundDateSelectorEscapeListener
+        this.boundSortBarSelectorEscapeListener
       );
     } else {
       document.removeEventListener(
         'keydown',
-        this.boundDateSelectorEscapeListener
+        this.boundSortBarSelectorEscapeListener
       );
     }
   }
 
-  private boundDateSelectorEscapeListener = (e: KeyboardEvent) => {
+  private boundSortBarSelectorEscapeListener = (e: KeyboardEvent) => {
     if (e.key === 'Escape') {
+      this.viewSortSelectorVisible = false;
       this.dateSortSelectorVisible = false;
     }
   };
@@ -235,13 +244,30 @@ export class SortFilterBar
             ? this.getSortDisplayOption(SortField.relevance)
             : nothing}
         </li>
-        <li>${this.getSortDisplayOption(SortField.views)}</li>
+        <li>
+          ${this.getSortDisplayOption(SortField.weeklyview, {
+            clickEvent: () => {
+              if (!this.viewOptionSelected)
+                this.setSelectedSort(SortField.weeklyview);
+              this.viewSortSelectorVisible = !this.viewSortSelectorVisible;
+              this.dateSortSelectorVisible = false;
+              this.alphaSelectorVisible = null;
+              this.selectedTitleFilter = null;
+              this.selectedCreatorFilter = null;
+              this.emitTitleLetterChangedEvent();
+              this.emitCreatorLetterChangedEvent();
+            },
+            displayName: html`${this.viewSortField}`,
+            isSelected: () => this.viewOptionSelected,
+          })}
+        </li>
         <li>
           ${this.getSortDisplayOption(SortField.title, {
             clickEvent: () => {
               this.alphaSelectorVisible = 'title';
               this.selectedCreatorFilter = null;
               this.dateSortSelectorVisible = false;
+              this.viewSortSelectorVisible = false;
               this.setSelectedSort(SortField.title);
               this.emitCreatorLetterChangedEvent();
             },
@@ -253,6 +279,7 @@ export class SortFilterBar
               if (!this.dateOptionSelected)
                 this.setSelectedSort(SortField.date);
               this.dateSortSelectorVisible = !this.dateSortSelectorVisible;
+              this.viewSortSelectorVisible = false;
               this.alphaSelectorVisible = null;
               this.selectedTitleFilter = null;
               this.selectedCreatorFilter = null;
@@ -366,7 +393,7 @@ export class SortFilterBar
         </li>
         <li>
           <button
-            id="grid-button"
+            id="list-detail-button"
             @click=${() => {
               this.displayMode = 'list-detail';
             }}
@@ -378,7 +405,7 @@ export class SortFilterBar
         </li>
         <li>
           <button
-            id="list-button"
+            id="list-compact-button"
             @click=${() => {
               this.displayMode = 'list-compact';
             }}
@@ -414,6 +441,26 @@ export class SortFilterBar
     `;
   }
 
+  private get viewSortSelector() {
+    return html`
+      <div
+        id="view-sort-selector-backdrop"
+        @keyup=${() => {
+          this.viewSortSelectorVisible = false;
+        }}
+        @click=${() => {
+          this.viewSortSelectorVisible = false;
+        }}
+      ></div>
+      <div id="view-sort-selector">
+        <ul>
+          <li>${this.getDateSortButton(SortField.alltimeview)}</li>
+          <li>${this.getDateSortButton(SortField.weeklyview)}</li>
+        </ul>
+      </div>
+    `;
+  }
+
   private getDateSortButton(sortField: SortField) {
     return html`
       <button
@@ -429,6 +476,7 @@ export class SortFilterBar
 
   private selectDateSort(sortField: SortField) {
     this.dateSortSelectorVisible = false;
+    this.viewSortSelectorVisible = false;
     this.setSelectedSort(sortField);
   }
 
@@ -462,6 +510,24 @@ export class SortFilterBar
     return dateSortFields.includes(this.selectedSort);
   }
 
+  /**
+   * There are two view sort options.
+   *
+   * This checks to see if the current sort is one of them.
+   *
+   * @readonly
+   * @private
+   * @type {boolean}
+   * @memberof SortFilterBar
+   */
+  private get viewOptionSelected(): boolean {
+    const viewSortFields: SortField[] = [
+      SortField.alltimeview,
+      SortField.weeklyview,
+    ];
+    return viewSortFields.includes(this.selectedSort);
+  }
+
   /**
    * The display name of the current date field
    *
@@ -478,6 +544,22 @@ export class SortFilterBar
     return name;
   }
 
+  /**
+   * The display name of the current view field
+   *
+   * @readonly
+   * @private
+   * @type {string}
+   * @memberof SortFilterBar
+   */
+  private get viewSortField(): string {
+    const defaultSort = SortFieldDisplayName[SortField.weeklyview];
+    const name = this.viewOptionSelected
+      ? SortFieldDisplayName[this.selectedSort] ?? defaultSort
+      : defaultSort;
+    return name;
+  }
+
   private get titleSelectorBar() {
     return html` <alpha-bar
       .selectedLetter=${this.selectedTitleFilter}
@@ -607,7 +689,8 @@ export class SortFilterBar
       cursor: default;
     }
 
-    #date-sort-selector {
+    #date-sort-selector,
+    #view-sort-selector {
       position: absolute;
       left: 150px;
       top: 45px;
@@ -619,7 +702,8 @@ export class SortFilterBar
       border: 1px solid #404142;
     }
 
-    #date-sort-selector button {
+    #date-sort-selector button,
+    #view-sort-selector button {
       background: none;
       border-radius: 15px;
       color: #404142;
@@ -632,7 +716,8 @@ export class SortFilterBar
       padding: 0.5rem 1.2rem;
     }
 
-    #date-sort-selector button.selected {
+    #date-sort-selector button.selected,
+    #view-sort-selector button.selected {
       background-color: #404142;
       color: white;
     }
@@ -679,7 +764,8 @@ export class SortFilterBar
       display: none;
     }
 
-    #date-sort-selector-backdrop {
+    #date-sort-selector-backdrop,
+    #view-sort-selector-backdrop {
       position: fixed;
       top: 0;
       left: 0;

package/test/collection-browser.test.ts

@@ -1,6 +1,8 @@
 /* eslint-disable import/no-duplicates */
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
+import sinon from 'sinon';
+import type { InfiniteScroller } from '@internetarchive/infinite-scroller';
 import type { CollectionBrowser } from '../src/collection-browser';
 import '../src/collection-browser';
 import { MockSearchService } from './mocks/mock-search-service';
@@ -59,4 +61,45 @@ describe('Collection Browser', () => {
       'boop',
     ]);
   });
+  it('refreshes when certain properties change', async () => {
+    const searchService = new MockSearchService();
+    const collectionNameCache = new MockCollectionNameCache();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser
+        .searchService=${searchService}
+        .collectionNameCache=${collectionNameCache}
+      ></collection-browser>`
+    );
+    const infiniteScrollerRefreshSpy = sinon.spy();
+
+    const infiniteScroller = el.shadowRoot?.querySelector('infinite-scroller');
+    (infiniteScroller as InfiniteScroller).reload = infiniteScrollerRefreshSpy;
+    expect(infiniteScrollerRefreshSpy.called).to.be.false;
+    expect(infiniteScrollerRefreshSpy.callCount).to.equal(0);
+
+    // testing: `loggedIn`
+    el.loggedIn = true;
+    await el.updateComplete;
+    expect(infiniteScrollerRefreshSpy.called).to.be.true;
+    expect(infiniteScrollerRefreshSpy.callCount).to.equal(1);
+
+    el.loggedIn = false;
+    await el.updateComplete;
+    expect(infiniteScrollerRefreshSpy.callCount).to.equal(2);
+
+    // testing: `displayMode`
+    el.displayMode = 'list-compact';
+    await el.updateComplete;
+    expect(infiniteScrollerRefreshSpy.callCount).to.equal(3);
+
+    // testing: `baseNavigationUrl`
+    el.baseNavigationUrl = 'https://funtestsite.com';
+    await el.updateComplete;
+    expect(infiniteScrollerRefreshSpy.callCount).to.equal(4);
+
+    // testing: `baseImageUrl`
+    el.baseImageUrl = 'https://funtestsiteforimages.com';
+    await el.updateComplete;
+    expect(infiniteScrollerRefreshSpy.callCount).to.equal(5);
+  });
 });

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

@@ -0,0 +1,187 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import type { SortFilterBar } from '../../src/sort-filter-bar/sort-filter-bar';
+import type { SortField } from '../../src/models';
+
+import '../../src/sort-filter-bar/sort-filter-bar';
+
+describe('Sort direction buttons', () => {
+  it('should render sort direction button', async () => {
+    const el = await fixture<SortFilterBar>(html`
+      <sort-filter-bar> </sort-filter-bar>
+    `);
+
+    el.sortDirection = 'asc'; // selected sort
+    await el.updateComplete;
+
+    const sortDirectionButtonList = el.shadowRoot?.querySelector(
+      '#sort-direction-selector'
+    );
+
+    const sortByAscButton = sortDirectionButtonList?.querySelector(
+      '#sort-ascending-btn'
+    );
+    expect(sortByAscButton).to.exist;
+    // ascending order button is selected
+    expect(sortByAscButton?.getAttribute('class')).to.equal(
+      'sort-button selected'
+    );
+
+    const sortByDescButton = sortDirectionButtonList?.querySelector(
+      '#sort-descending-btn'
+    );
+    expect(sortByDescButton).to.exist;
+    // descending order button is not selected
+    expect(sortByDescButton?.getAttribute('class')).to.not.equal(
+      'sort-button selected'
+    );
+  });
+});
+
+describe('Sort selector default buttons', async () => {
+  const el = await fixture<SortFilterBar>(html`
+    <sort-filter-bar> </sort-filter-bar>
+  `);
+  const sortSelectorContainer = el.shadowRoot?.querySelector(
+    '#desktop-sort-selector'
+  );
+
+  it('should render sort-by label', async () => {
+    expect(sortSelectorContainer?.children.item(0)?.textContent).to.equal(
+      'Sort By'
+    );
+  });
+
+  it('should render default relevance-sort selector', async () => {
+    const defaultSortSelector = sortSelectorContainer?.children
+      .item(1)
+      ?.querySelector('a');
+    expect(defaultSortSelector?.textContent).to.contain('Relevance');
+    expect(defaultSortSelector?.getAttribute('class')).to.equal('selected');
+  });
+
+  it('should render default view-sort selector', async () => {
+    const defaultSortSelector = sortSelectorContainer?.children
+      .item(2)
+      ?.querySelector('a');
+    expect(defaultSortSelector?.textContent).to.contain('Weekly Views');
+  });
+
+  it('should render active view-sort selectors', async () => {
+    el.selectedSort = 'alltimeview' as SortField;
+    await el.updateComplete;
+
+    const defaultSortSelector =
+      sortSelectorContainer?.querySelector('a.selected');
+    expect(defaultSortSelector?.textContent).to.contain('All-time Views');
+  });
+
+  it('should render default title-sort selector', async () => {
+    const defaultSortSelector = sortSelectorContainer?.children
+      .item(3)
+      ?.querySelector('a');
+    expect(defaultSortSelector?.textContent).to.contain('Title');
+  });
+
+  it('should render default date-sort selector', async () => {
+    const defaultSortSelector = sortSelectorContainer?.children
+      .item(4)
+      ?.querySelector('a');
+    expect(defaultSortSelector?.textContent).to.contain('Date Published');
+  });
+
+  it('should render active date-sort selectors', async () => {
+    el.selectedSort = 'datereviewed' as SortField;
+    await el.updateComplete;
+
+    const defaultSortSelector =
+      sortSelectorContainer?.querySelector('a.selected');
+    expect(defaultSortSelector?.textContent).to.contain('Date Reviewed');
+  });
+
+  it('should render default creator-sort selector', async () => {
+    const defaultSortSelector = sortSelectorContainer?.children
+      .item(5)
+      ?.querySelector('a');
+    expect(defaultSortSelector?.textContent).to.contain('Creator');
+  });
+
+  it('click event on view-sort selector', async () => {
+    const defaultSortSelector = sortSelectorContainer?.children
+      .item(2)
+      ?.querySelector('a');
+
+    await defaultSortSelector?.click();
+    expect(el.selectedSort).to.equal('weeklyview');
+  });
+
+  it('click event on title selector', async () => {
+    const defaultSortSelector = sortSelectorContainer?.children
+      .item(3)
+      ?.querySelector('a');
+
+    await defaultSortSelector?.click();
+    expect(el.selectedSort).to.equal('title');
+  });
+
+  it('click event on date-sort selector', async () => {
+    const defaultSortSelector = sortSelectorContainer?.children
+      .item(4)
+      ?.querySelector('a');
+
+    await defaultSortSelector?.click();
+    expect(el.selectedSort).to.equal('date');
+  });
+
+  it('click event on creator selector', async () => {
+    const defaultSortSelector = sortSelectorContainer?.children
+      .item(5)
+      ?.querySelector('a');
+
+    await defaultSortSelector?.click();
+    expect(el.selectedSort).to.equal('creator');
+  });
+});
+
+describe('Display mode/style buttons', () => {
+  it('should render all display mode buttons', async () => {
+    const el = await fixture<SortFilterBar>(html`
+      <sort-filter-bar> </sort-filter-bar>
+    `);
+
+    const displayModeButtonList = el.shadowRoot
+      ?.querySelector('#display-style-selector')
+      ?.querySelector('ul');
+
+    const gridButton = displayModeButtonList?.children
+      .item(0)
+      ?.querySelector('#grid-button');
+    expect(gridButton).to.exist;
+
+    const detailListButton = displayModeButtonList?.children
+      .item(1)
+      ?.querySelector('#list-detail-button');
+    expect(detailListButton).to.exist;
+
+    const compactListButton = displayModeButtonList?.children
+      .item(2)
+      ?.querySelector('#list-compact-button');
+    expect(compactListButton).to.exist;
+  });
+
+  it('should active current display mode', async () => {
+    const el = await fixture<SortFilterBar>(html`
+      <sort-filter-bar> </sort-filter-bar>
+    `);
+
+    el.displayMode = 'grid';
+    await el.updateComplete;
+
+    const displayModeTitle = el.shadowRoot
+      ?.querySelector('#display-style-selector')
+      ?.querySelector('button.active')
+      ?.getAttribute('title');
+    expect(displayModeTitle).to.equal('Tile view');
+  });
+});

package/dist/index.d.ts

@@ -1,9 +0,0 @@
-export { CollectionBrowser } from './src/collection-browser';
-export { SortFilterBar } from './src/sort-filter-bar/sort-filter-bar';
-export { CollectionDisplayMode } from './src/models';
-export { CollectionBrowserLoadingTile } from './src/tiles/collection-browser-loading-tile';
-export { CollectionTile } from './src/tiles/grid/collection-tile';
-export { AccountTile } from './src/tiles/grid/account-tile';
-export { ItemTile } from './src/tiles/grid/item-tile';
-export { TileList } from './src/tiles/list/tile-list';
-export { TileListCompact } from './src/tiles/list/tile-list-compact';

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAyB,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,4BAA4B,EAAE,MAAM,6CAA6C,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC","sourcesContent":["export { CollectionBrowser } from './src/collection-browser';\nexport { SortFilterBar } from './src/sort-filter-bar/sort-filter-bar';\nexport { CollectionDisplayMode } from './src/models';\nexport { CollectionBrowserLoadingTile } from './src/tiles/collection-browser-loading-tile';\nexport { CollectionTile } from './src/tiles/grid/collection-tile';\nexport { AccountTile } from './src/tiles/grid/account-tile';\nexport { ItemTile } from './src/tiles/grid/item-tile';\nexport { TileList } from './src/tiles/list/tile-list';\nexport { TileListCompact } from './src/tiles/list/tile-list-compact';\n"]}

package/dist/src/app-root.d.ts

@@ -1,32 +0,0 @@
-import { LitElement, PropertyValues } from 'lit';
-import '../src/collection-browser';
-export declare class AppRoot extends LitElement {
-    private searchService;
-    private resizeObserver;
-    private localCache;
-    private collectionNameCache;
-    private currentPage?;
-    private searchQuery?;
-    private cellWidth;
-    private cellHeight;
-    private rowGap;
-    private colGap;
-    private loggedIn;
-    private baseQueryField;
-    private pageNumberInput;
-    private collectionBrowser;
-    private searchPressed;
-    private changePagePressed;
-    protected updated(changed: PropertyValues): void;
-    private queryUpdated;
-    render(): import("lit-html").TemplateResult<1>;
-    private baseQueryChanged;
-    private loginChanged;
-    private outlineChanged;
-    private rowGapChanged;
-    private colGapChanged;
-    private widthChanged;
-    private heightChanged;
-    private visiblePageChanged;
-    static styles: import("lit").CSSResult;
-}