@internetarchive/collection-browser - npm Package Compare versions

Comparing version 0.0.1-alpha.36 to 0.0.1-alpha.37

dist/src/collection-browser.js

@@ -231,5 +231,7 @@ import { __decorate } from "tslib";
     titleLetterSelected(e) {
+        this.selectedCreatorFilter = null;
         this.selectedTitleFilter = e.detail.selectedLetter;
     }
     creatorLetterSelected(e) {
+        this.selectedTitleFilter = null;
         this.selectedCreatorFilter = e.detail.selectedLetter;
@@ -236,0 +238,0 @@ }

dist/src/collection-facets.js

@@ -466,3 +466,3 @@ import { __decorate } from "tslib";
         display: flex;
-        align-items: center;
+        align-items: start;
         font-weight: 500;
@@ -469,0 +469,0 @@ font-size: 1.2rem;

dist/src/sort-filter-bar/sort-filter-bar.d.ts

@@ -5,2 +5,3 @@ import { LitElement, PropertyValues, TemplateResult } from 'lit';
 import './alpha-bar';
+declare type AlphaSelector = 'creator' | 'title';
 export declare class SortFilterBar extends LitElement implements SharedResizeObserverResizeHandlerInterface {
@@ -14,4 +15,3 @@ displayMode?: CollectionDisplayMode;
     resizeObserver?: SharedResizeObserverInterface;
-    titleSelectorVisible: boolean;
-    creatorSelectorVisible: boolean;
+    alphaSelectorVisible: AlphaSelector | null;
     dateSortSelectorVisible: boolean;
@@ -29,2 +29,3 @@ desktopSelectorBarWidth: number;
     private get mobileSelectorVisible();
+    private get alphaBarTemplate();
     handleResize(entry: ResizeObserverEntry): void;
@@ -79,2 +80,4 @@ private get sortDirectionSelectorTemplate();
     private creatorLetterChanged;
+    private emitTitleLetterChangedEvent;
+    private emitCreatorLetterChangedEvent;
     private displayModeChanged;
@@ -84,1 +87,2 @@ private emitSortChangedEvent;
 }
+export {};

dist/src/sort-filter-bar/sort-filter-bar.js

@@ -18,4 +18,3 @@ import { __decorate } from "tslib";
         this.showRelevance = true;
-        this.titleSelectorVisible = false;
-        this.creatorSelectorVisible = false;
+        this.alphaSelectorVisible = null;
         this.dateSortSelectorVisible = false;
@@ -29,9 +28,2 @@ this.desktopSelectorBarWidth = 0;
       <div id="container">
-        ${this.titleSelectorVisible || this.selectedSort === 'title'
-            ? this.titleSelectorBar
-            : nothing}
-        ${this.creatorSelectorVisible || this.selectedSort === 'creator'
-            ? this.creatorSelectorBar
-            : nothing}
-
         <div id="sort-bar">
@@ -53,2 +45,3 @@ <div id="sort-direction-container">
             : nothing}
+        ${this.alphaBarTemplate}
 
@@ -67,6 +60,6 @@ <div id="bottom-shadow"></div>
         if (changed.has('selectedTitleFilter') && this.selectedTitleFilter) {
-            this.titleSelectorVisible = true;
+            this.alphaSelectorVisible = 'title';
         }
         if (changed.has('selectedCreatorFilter') && this.selectedCreatorFilter) {
-            this.creatorSelectorVisible = true;
+            this.alphaSelectorVisible = 'creator';
         }
@@ -110,2 +103,16 @@ if (changed.has('resizeObserver')) {
     }
+    get alphaBarTemplate() {
+        if (this.alphaSelectorVisible === null) {
+            if (this.selectedSort === 'creator')
+                return this.creatorSelectorBar;
+            if (this.selectedSort === 'title')
+                return this.titleSelectorBar;
+        }
+        else {
+            return this.alphaSelectorVisible === 'creator'
+                ? this.creatorSelectorBar
+                : this.titleSelectorBar;
+        }
+        return nothing;
+    }
     handleResize(entry) {
@@ -156,4 +163,14 @@ if (entry.target === this.desktopSortSelector)
         <li>${this.getSortDisplayOption(SortField.views)}</li>
-        <li>${this.getSortDisplayOption(SortField.title)}</li>
         <li>
+          ${this.getSortDisplayOption(SortField.title, {
+            clickEvent: () => {
+                this.alphaSelectorVisible = 'title';
+                this.selectedCreatorFilter = null;
+                this.dateSortSelectorVisible = false;
+                this.setSelectedSort(SortField.title);
+                this.emitCreatorLetterChangedEvent();
+            },
+        })}
+        </li>
+        <li>
           ${this.getSortDisplayOption(SortField.date, {
@@ -164,2 +181,7 @@ clickEvent: () => {
                 this.dateSortSelectorVisible = !this.dateSortSelectorVisible;
+                this.alphaSelectorVisible = null;
+                this.selectedTitleFilter = null;
+                this.selectedCreatorFilter = null;
+                this.emitTitleLetterChangedEvent();
+                this.emitCreatorLetterChangedEvent();
             },
@@ -173,3 +195,7 @@ displayName: html `${this.dateSortField}`,
             clickEvent: () => {
-                this.creatorSelectorVisible = !this.creatorSelectorVisible;
+                this.alphaSelectorVisible = 'creator';
+                this.selectedTitleFilter = null;
+                this.dateSortSelectorVisible = false;
+                this.setSelectedSort(SortField.creator);
+                this.emitTitleLetterChangedEvent();
             },
@@ -207,3 +233,9 @@ })}
             else {
+                this.alphaSelectorVisible = null;
+                this.dateSortSelectorVisible = false;
+                this.selectedTitleFilter = null;
+                this.selectedCreatorFilter = null;
                 this.setSelectedSort(sortField);
+                this.emitTitleLetterChangedEvent();
+                this.emitCreatorLetterChangedEvent();
             }
@@ -359,10 +391,20 @@ }}
     titleLetterChanged(e) {
+        var _a;
+        this.selectedTitleFilter = (_a = e.detail.selectedLetter) !== null && _a !== void 0 ? _a : null;
+        this.emitTitleLetterChangedEvent();
+    }
+    creatorLetterChanged(e) {
+        var _a;
+        this.selectedCreatorFilter = (_a = e.detail.selectedLetter) !== null && _a !== void 0 ? _a : null;
+        this.emitCreatorLetterChangedEvent();
+    }
+    emitTitleLetterChangedEvent() {
         const event = new CustomEvent('titleLetterChanged', {
-            detail: { selectedLetter: e.detail.selectedLetter },
+            detail: { selectedLetter: this.selectedTitleFilter },
         });
         this.dispatchEvent(event);
     }
-    creatorLetterChanged(e) {
+    emitCreatorLetterChangedEvent() {
         const event = new CustomEvent('creatorLetterChanged', {
-            detail: { selectedLetter: e.detail.selectedLetter },
+            detail: { selectedLetter: this.selectedCreatorFilter },
         });
@@ -601,8 +643,5 @@ this.dispatchEvent(event);
     state()
-], SortFilterBar.prototype, "titleSelectorVisible", void 0);
+], SortFilterBar.prototype, "alphaSelectorVisible", void 0);
 __decorate([
     state()
-], SortFilterBar.prototype, "creatorSelectorVisible", void 0);
-__decorate([
-    state()
 ], SortFilterBar.prototype, "dateSortSelectorVisible", void 0);
@@ -609,0 +648,0 @@ __decorate([

package.json

@@ -6,3 +6,3 @@ {
   "author": "Internet Archive",
-  "version": "0.0.1-alpha.36",
+  "version": "0.0.1-alpha.37",
   "main": "dist/index.js",
@@ -9,0 +9,0 @@ "module": "dist/index.js",

src/collection-browser.ts

@@ -347,2 +347,3 @@ /* eslint-disable import/no-duplicates */
   private titleLetterSelected(e: CustomEvent<{ selectedLetter: string }>) {
+    this.selectedCreatorFilter = null;
     this.selectedTitleFilter = e.detail.selectedLetter;
@@ -352,2 +353,3 @@ }
   private creatorLetterSelected(e: CustomEvent<{ selectedLetter: string }>) {
+    this.selectedTitleFilter = null;
     this.selectedCreatorFilter = e.detail.selectedLetter;
@@ -354,0 +356,0 @@ }

src/collection-facets.ts

@@ -558,3 +558,3 @@ /* eslint-disable import/no-duplicates */
         display: flex;
-        align-items: center;
+        align-items: start;
         font-weight: 500;
@@ -561,0 +561,0 @@ font-size: 1.2rem;

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

@@ -26,2 +26,4 @@ import {
 
+type AlphaSelector = 'creator' | 'title';
+
 @customElement('sort-filter-bar')
@@ -46,6 +48,4 @@ export class SortFilterBar
 
-  @state() titleSelectorVisible: boolean = false;
+  @state() alphaSelectorVisible: AlphaSelector | null = null;
 
-  @state() creatorSelectorVisible: boolean = false;
-
   @state() dateSortSelectorVisible = false;
@@ -68,9 +68,2 @@
       <div id="container">
-        ${this.titleSelectorVisible || this.selectedSort === 'title'
-          ? this.titleSelectorBar
-          : nothing}
-        ${this.creatorSelectorVisible || this.selectedSort === 'creator'
-          ? this.creatorSelectorBar
-          : nothing}
-
         <div id="sort-bar">
@@ -92,2 +85,3 @@ <div id="sort-direction-container">
           : nothing}
+        ${this.alphaBarTemplate}
 
@@ -109,7 +103,7 @@ <div id="bottom-shadow"></div>
     if (changed.has('selectedTitleFilter') && this.selectedTitleFilter) {
-      this.titleSelectorVisible = true;
+      this.alphaSelectorVisible = 'title';
     }
 
     if (changed.has('selectedCreatorFilter') && this.selectedCreatorFilter) {
-      this.creatorSelectorVisible = true;
+      this.alphaSelectorVisible = 'creator';
     }
@@ -163,2 +157,15 @@
 
+  private get alphaBarTemplate(): TemplateResult | typeof nothing {
+    if (this.alphaSelectorVisible === null) {
+      if (this.selectedSort === 'creator') return this.creatorSelectorBar;
+      if (this.selectedSort === 'title') return this.titleSelectorBar;
+    } else {
+      return this.alphaSelectorVisible === 'creator'
+        ? this.creatorSelectorBar
+        : this.titleSelectorBar;
+    }
+
+    return nothing;
+  }
+
   handleResize(entry: ResizeObserverEntry): void {
@@ -211,4 +218,14 @@ if (entry.target === this.desktopSortSelector)
         <li>${this.getSortDisplayOption(SortField.views)}</li>
-        <li>${this.getSortDisplayOption(SortField.title)}</li>
         <li>
+          ${this.getSortDisplayOption(SortField.title, {
+            clickEvent: () => {
+              this.alphaSelectorVisible = 'title';
+              this.selectedCreatorFilter = null;
+              this.dateSortSelectorVisible = false;
+              this.setSelectedSort(SortField.title);
+              this.emitCreatorLetterChangedEvent();
+            },
+          })}
+        </li>
+        <li>
           ${this.getSortDisplayOption(SortField.date, {
@@ -219,2 +236,7 @@ clickEvent: () => {
               this.dateSortSelectorVisible = !this.dateSortSelectorVisible;
+              this.alphaSelectorVisible = null;
+              this.selectedTitleFilter = null;
+              this.selectedCreatorFilter = null;
+              this.emitTitleLetterChangedEvent();
+              this.emitCreatorLetterChangedEvent();
             },
@@ -228,3 +250,7 @@ displayName: html`${this.dateSortField}`,
             clickEvent: () => {
-              this.creatorSelectorVisible = !this.creatorSelectorVisible;
+              this.alphaSelectorVisible = 'creator';
+              this.selectedTitleFilter = null;
+              this.dateSortSelectorVisible = false;
+              this.setSelectedSort(SortField.creator);
+              this.emitTitleLetterChangedEvent();
             },
@@ -269,3 +295,9 @@ })}
           } else {
+            this.alphaSelectorVisible = null;
+            this.dateSortSelectorVisible = false;
+            this.selectedTitleFilter = null;
+            this.selectedCreatorFilter = null;
             this.setSelectedSort(sortField);
+            this.emitTitleLetterChangedEvent();
+            this.emitCreatorLetterChangedEvent();
           }
@@ -437,6 +469,4 @@ }}
   ) {
-    const event = new CustomEvent('titleLetterChanged', {
-      detail: { selectedLetter: e.detail.selectedLetter },
-    });
-    this.dispatchEvent(event);
+    this.selectedTitleFilter = e.detail.selectedLetter ?? null;
+    this.emitTitleLetterChangedEvent();
   }
@@ -447,8 +477,26 @@
   ) {
-    const event = new CustomEvent('creatorLetterChanged', {
-      detail: { selectedLetter: e.detail.selectedLetter },
-    });
+    this.selectedCreatorFilter = e.detail.selectedLetter ?? null;
+    this.emitCreatorLetterChangedEvent();
+  }
+
+  private emitTitleLetterChangedEvent() {
+    const event = new CustomEvent<{ selectedLetter: string | null }>(
+      'titleLetterChanged',
+      {
+        detail: { selectedLetter: this.selectedTitleFilter },
+      }
+    );
     this.dispatchEvent(event);
   }
 
+  private emitCreatorLetterChangedEvent() {
+    const event = new CustomEvent<{ selectedLetter: string | null }>(
+      'creatorLetterChanged',
+      {
+        detail: { selectedLetter: this.selectedCreatorFilter },
+      }
+    );
+    this.dispatchEvent(event);
+  }
+
   private displayModeChanged() {
@@ -455,0 +503,0 @@ const event = new CustomEvent('displayModeChanged', {

No alert changes

Improved metrics

Total package byte prevSize

920406

increased by0.73%

Lines of code

12956

increased by0.72%

No dependency changes