@internetarchive/collection-browser 2.1.2 → 2.1.3-alpha.1

package/src/app-root.ts

@@ -395,11 +395,11 @@ export class AppRoot extends LitElement {
             <div class="checkbox-control">
               <input
                 type="checkbox"
-                id="enable-loanstab-topbar-view"
-                @click=${this.loansTabTopBarViewCheckboxChanged}
+                id="enable-replaced-sort-options"
+                @click=${this.replaceSortOptionsChanged}
               />
-              <label for="enable-loanstab-topbar-view">
-                Show loans-tab top-bar view
+              <label for="enable-replaced-sort-options">
+                Show replaced sort options
               </label>
             </div>
           </fieldset>
@@ -744,7 +744,7 @@ export class AppRoot extends LitElement {
     div.style.setProperty('height', '3rem');
     div.style.setProperty('width', '3rem');
     div.style.backgroundColor = '#00000';
-    div.setAttribute('slot', 'sortbar-left-slot');
+    div.setAttribute('slot', 'sort-options-left');
 
     if (target.checked) {
       this.collectionBrowser.appendChild(div);
@@ -802,9 +802,9 @@ export class AppRoot extends LitElement {
   }
 
   /**
-   * Handler for when the dev panel's "Show loanstab topbar view" checkbox is changed.
+   * Handler for when the dev panel's "Replace sort options" checkbox is changed.
    */
-  private loansTabTopBarViewCheckboxChanged(e: Event) {
+  private replaceSortOptionsChanged(e: Event) {
     const target = e.target as HTMLInputElement;
 
     const p = document.createElement('p');
@@ -812,13 +812,13 @@ export class AppRoot extends LitElement {
     p.textContent = 'New stuff as a child.';
     p.style.setProperty('height', '20px');
     p.style.backgroundColor = '#00000';
-    p.setAttribute('slot', 'loans-tab-filter-bar-options-slot');
+    p.setAttribute('slot', 'sort-options');
 
     if (target.checked) {
-      this.collectionBrowser.isLoansTab = true;
+      this.collectionBrowser.enableSortOptionsSlot = true;
       this.collectionBrowser.appendChild(p);
     } else {
-      this.collectionBrowser.isLoansTab = false;
+      this.collectionBrowser.enableSortOptionsSlot = false;
       this.collectionBrowser.removeChild(
         this.collectionBrowser.lastElementChild as Element
       );

package/src/collection-browser.ts

@@ -171,7 +171,8 @@ export class CollectionBrowser
    */
   @property({ type: Boolean }) isManageView = false;
 
-  @property({ type: Boolean }) isLoansTab = false;
+  /** Whether to replace the default sort options with a slot for customization (default: false) */
+  @property({ type: Boolean }) enableSortOptionsSlot = false;
 
   /**
    * The results per page so we can paginate.
@@ -626,18 +627,19 @@ export class CollectionBrowser
         .selectedCreatorFilter=${this.selectedCreatorFilter}
         .prefixFilterCountMap=${this.dataSource.prefixFilterCountMap}
         .resizeObserver=${this.resizeObserver}
+        .enableSortOptionsSlot=${this.enableSortOptionsSlot}
         @sortChanged=${this.userChangedSort}
         @displayModeChanged=${this.displayModeChanged}
         @titleLetterChanged=${this.titleLetterSelected}
         @creatorLetterChanged=${this.creatorLetterSelected}
-        .showLoansTopBar=${this.isLoansTab}
       >
-        <div slot="sortbar-left-slot">
-          <slot name="sortbar-left-slot"></slot>
-        </div>
         <slot
-          name="loans-tab-filter-bar-options-slot"
-          slot="loans-tab-filter-bar-options-slot"
+          name="sort-options-left"
+          slot="sort-options-left"
+        ></slot>
+        <slot
+          name="sort-options"
+          slot="sort-options"
         ></slot>
       </sort-filter-bar>
     `;

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

@@ -7,6 +7,7 @@ import {
   TemplateResult,
 } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
 import type {
   SharedResizeObserverInterface,
   SharedResizeObserverResizeHandlerInterface,
@@ -68,8 +69,8 @@ export class SortFilterBar
   /** Whether to show the Date Favorited sort option instead of Date Published/Archived/Reviewed (default `false`) */
   @property({ type: Boolean }) showDateFavorited: boolean = false;
 
-  /** Whether to show the Loans filter for ProfilePage (default `false`) */
-  @property({ type: Boolean }) showLoansTopBar: boolean = false;
+  /** Whether to replace the default sort options with a slot for customization (default `false`) */
+  @property({ type: Boolean }) enableSortOptionsSlot: boolean = false;
 
   /** Maps of result counts for letters on the alphabet bar, for each letter filter type */
   @property({ type: Object }) prefixFilterCountMap?: Record<
@@ -143,19 +144,21 @@ export class SortFilterBar
     return html`
       <div id="container">
         <section id="sort-bar" aria-label="Sorting options">
-          ${!this.showLoansTopBar
-            ? html`
-                <slot name="sortbar-left-slot"></slot>
-                <div class="sort-direction-container">
-                  ${this.sortDirectionSelectorTemplate}
-                </div>
-                <span class="sort-by-text">Sort by:</span>
-                <div id="sort-selector-container">
-                  ${this.mobileSortSelectorTemplate}
-                  ${this.desktopSortSelectorTemplate}
-                </div>
-              `
-            : html`<slot name="loans-tab-filter-bar-options-slot"></slot>`}
+          <slot name="sort-options-left"></slot>
+          <div id="sort-options">
+            ${!this.enableSortOptionsSlot
+              ? html`
+                  <div class="sort-direction-container">
+                    ${this.sortDirectionSelectorTemplate}
+                  </div>
+                  <span class="sort-by-text">${msg('Sort by:')}</span>
+                  <div id="sort-selector-container">
+                    ${this.mobileSortSelectorTemplate}
+                    ${this.desktopSortSelectorTemplate}
+                  </div>
+                `
+              : html`<slot name="sort-options"></slot>`}
+          </div>
 
           <div id="display-style-selector">${this.displayOptionTemplate}</div>
         </section>
@@ -939,12 +942,18 @@ export class SortFilterBar
 
         #sort-bar {
           display: flex;
-          justify-content: space-between;
+          justify-content: flex-start;
           align-items: center;
           border-bottom: 1px solid #2c2c2c;
           font-size: 1.4rem;
         }
 
+        #sort-options {
+          display: flex;
+          align-items: center;
+          flex-grow: 1;
+        }
+
         ul {
           list-style: none;
           display: flex;

package/test/collection-browser.test.ts

@@ -1833,8 +1833,8 @@ describe('Collection Browser', () => {
     const sortBar = el.shadowRoot?.querySelector(
       'sort-filter-bar'
     ) as SortFilterBar;
-    expect(sortBar?.showLoansTopBar, 'show loans in sort bar').to.be.true;
-    expect(el.isLoansTab, 'collection browser is loans tab').to.be.true;
+    expect(sortBar?.enableSortOptionsSlot, 'show loans in sort bar').to.be.true;
+    expect(el.enableSortOptionsSlot, 'collection browser is loans tab').to.be.true;
 
     const loansTabSlot = sortBar.querySelector(
       'slot[name="loans-tab-filter-bar-options-slot"]'