@internetarchive/collection-browser 2.7.13-alpha1 → 2.7.13-alpha2

package/package.json

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

package/src/app-root.ts

@@ -131,13 +131,17 @@ export class AppRoot extends LitElement {
 
   private get getClass() {
     const searchParams = new URLSearchParams(window.location.search);
-
     return searchParams.get('hide-dev-tools') ? 'hidden' : '';
   }
 
-  private get manageViewMode() {
+  private get isManageView() {
+    const searchParams = new URLSearchParams(window.location.search);
+    return searchParams.get('manage') ? true : false;
+  }
+
+  private get urlBasedManageView() {
     const searchParams = new URLSearchParams(window.location.search);
-    return searchParams.get('manage') ? 'initial' : '';
+    return searchParams.get('manage') ? true : false;
   }
 
   render() {
@@ -489,7 +493,8 @@ export class AppRoot extends LitElement {
           .modalManager=${this.modalManager}
           .analyticsHandler=${this.analyticsHandler}
           .pageContext=${'search'}
-          .manageViewMode=${this.manageViewMode}
+          .isManageView=${this.isManageView}
+          .urlBasedManageView=${this.urlBasedManageView}
           @visiblePageChanged=${this.visiblePageChanged}
           @baseQueryChanged=${this.baseQueryChanged}
           @searchTypeChanged=${this.searchTypeChanged}
@@ -723,7 +728,7 @@ export class AppRoot extends LitElement {
 
       if (status) {
         // looking for success?
-        this.collectionBrowser.manageViewMode = '';
+        this.collectionBrowser.isManageView = false;
         this.modalManager?.closeModal();
         this.modalManager?.classList.remove('remove-items');
       } else {
@@ -745,11 +750,7 @@ export class AppRoot extends LitElement {
    */
   private manageModeCheckboxChanged(e: Event) {
     const target = e.target as HTMLInputElement;
-    if (target.checked) {
-      this.collectionBrowser.manageViewMode = 'manual';
-    } else {
-      this.collectionBrowser.manageViewMode = '';
-    }
+    this.collectionBrowser.isManageView = target.checked;
     this.collectionBrowser.manageViewLabel =
       'Select items to remove (customizable texts)';
   }

package/src/collection-browser.ts

@@ -240,12 +240,8 @@ export class CollectionBrowser
   /**
    * If item management UI active
    */
-  /**
-   * The current mode for item management UI:
-   * - 'initial': Initial mode activated through &manage=1 parameter
-   * - 'manual': Manual mode activated through user interaction eg. Manage|Remove items button
-   */
-  @property({ type: String }) manageViewMode: 'initial' | 'manual' | '' = '';
+  @property({ type: Boolean }) isManageView = false;
+  @property({ type: Boolean }) urlBasedManageView = false;
 
   @property({ type: String }) manageViewLabel = 'Select items to remove';
 
@@ -557,7 +553,7 @@ export class CollectionBrowser
 
     if (!hasQuery && !isCollection && !isProfile) {
       this.placeholderType = 'empty-query';
-    } else if (noResults && this.manageViewMode !== 'initial') {
+    } else if (noResults && !this.isManageView) {
       // Within a collection, no query + no results means the collection simply has no viewable items.
       // Otherwise, we must have a user query that produced 0 results.
       this.placeholderType =
@@ -704,7 +700,7 @@ export class CollectionBrowser
           <div id="cb-top-view">
             <slot name="cb-top-slot"></slot>
           </div>
-          ${this.manageViewMode
+          ${this.isManageView
             ? this.manageBarTemplate
             : this.sortFilterBarTemplate}
           <slot name="cb-results"></slot>
@@ -804,7 +800,7 @@ export class CollectionBrowser
         @selectAll=${() => this.dataSource.checkAllTiles()}
         @unselectAll=${() => this.dataSource.uncheckAllTiles()}
         @cancel=${() => {
-          this.manageViewMode = '';
+          this.isManageView = false;
           this.dataSource.uncheckAllTiles();
           if (this.searchResultsLoading) this.dataSource.resetPages();
         }}
@@ -1108,7 +1104,7 @@ export class CollectionBrowser
         .contentWidth=${this.contentWidth}
         .query=${this.baseQuery}
         .filterMap=${this.dataSource.filterMap}
-        .isManageView=${!!this.manageViewMode}
+        .isManageView=${this.isManageView}
         .modalManager=${this.modalManager}
         ?collapsableFacets=${this.mobileView}
         ?facetsLoading=${this.facetsLoading}
@@ -1231,8 +1227,8 @@ export class CollectionBrowser
    */
   private emitManageModeChangedEvent(): void {
     this.dispatchEvent(
-      new CustomEvent<string>('manageModeChanged', {
-        detail: this.manageViewMode,
+      new CustomEvent<boolean>('manageModeChanged', {
+        detail: this.isManageView,
       }),
     );
   }
@@ -1459,12 +1455,9 @@ export class CollectionBrowser
       }
     }
 
-    if (changed.has('manageViewMode')) {
-      console.log('here1');
-      if (this.infiniteScroller)
-        this.infiniteScroller.itemCount = this.estimatedTileCount;
-
-      if (this.manageViewMode) {
+    if (changed.has('isManageView')) {
+      if (this.isManageView) {
+        console.log('here1');
         this.displayMode = 'grid';
         this.fetchManagableSearchResults();
       } else if (this.pageContext === 'search') this.infiniteScroller?.reload();
@@ -1478,7 +1471,7 @@ export class CollectionBrowser
         'resizeObserver',
       ) as SharedResizeObserverInterface;
       if (oldObserver) this.disconnectResizeObserver(oldObserver);
-      // this.setupResizeObserver();
+      this.setupResizeObserver();
     }
 
     this.ensureAvailableTilesDisplayed();
@@ -2049,7 +2042,7 @@ export class CollectionBrowser
    * Callback when a result is selected
    */
   resultSelected(event: CustomEvent<TileModel>): void {
-    if (this.manageViewMode) {
+    if (this.isManageView) {
       // Checked/unchecked state change -- rerender to ensure it propagates
       // this.mapDataSource(model => ({ ...model }));
       const cellIndex = this.dataSource.indexOf(event.detail);
@@ -2089,7 +2082,7 @@ export class CollectionBrowser
         .creatorFilter=${this.selectedCreatorFilter}
         .mobileBreakpoint=${this.mobileBreakpoint}
         .loggedIn=${this.loggedIn}
-        .isManageView=${!!this.manageViewMode}
+        .isManageView=${this.isManageView}
         ?enableHoverPane=${true}
         @resultSelected=${(e: CustomEvent) => this.resultSelected(e)}
       >
@@ -2122,7 +2115,7 @@ export class CollectionBrowser
       (this.pageContext === 'search' &&
         this.dataSource.totalResults > 100 &&
         !this.searchResultsLoading) ||
-      this.manageViewMode === 'initial'
+      this.urlBasedManageView
     ) {
       console.log('here22');
       this.dataSource.resetPages();

package/test/collection-browser.test.ts

@@ -1712,13 +1712,13 @@ describe('Collection Browser', () => {
     await el.updateComplete;
     await el.initialSearchComplete;
 
-    el.manageViewMode = 'manual';
+    el.isManageView = true;
     await el.updateComplete;
 
     expect(el.shadowRoot?.querySelector('manage-bar')).to.exist;
     expect(el.shadowRoot?.querySelector('sort-filter-bar')).not.to.exist;
 
-    el.manageViewMode = 'manual';
+    el.isManageView = false;
     await el.updateComplete;
 
     expect(el.shadowRoot?.querySelector('manage-bar')).not.to.exist;
@@ -1736,7 +1736,7 @@ describe('Collection Browser', () => {
       </collection-browser>`,
     );
 
-    el.manageViewMode = 'manual';
+    el.isManageView = true;
     await el.updateComplete;
 
     expect(el.displayMode).to.equal('grid');
@@ -1757,7 +1757,7 @@ describe('Collection Browser', () => {
     await el.updateComplete;
     await el.initialSearchComplete;
 
-    el.manageViewMode = 'manual';
+    el.isManageView = true;
     await el.updateComplete;
 
     const infiniteScroller = el.shadowRoot?.querySelector('infinite-scroller');
@@ -1815,7 +1815,7 @@ describe('Collection Browser', () => {
     await el.updateComplete;
     await el.initialSearchComplete;
 
-    el.manageViewMode = 'manual';
+    el.isManageView = true;
     await el.updateComplete;
 
     expect(el.dataSource.checkedTileModels.length).to.equal(0);
@@ -1846,7 +1846,7 @@ describe('Collection Browser', () => {
     await el.updateComplete;
     await el.initialSearchComplete;
 
-    el.manageViewMode = 'manual';
+    el.isManageView = true;
     await el.updateComplete;
 
     const infiniteScroller = el.shadowRoot?.querySelector('infinite-scroller');
@@ -1893,7 +1893,7 @@ describe('Collection Browser', () => {
     await el.updateComplete;
     await el.initialSearchComplete;
 
-    el.manageViewMode = 'manual';
+    el.isManageView = true;
     await el.updateComplete;
 
     const manageBar = el.shadowRoot?.querySelector('manage-bar');
@@ -1903,7 +1903,7 @@ describe('Collection Browser', () => {
     manageBar!.dispatchEvent(new CustomEvent('cancel'));
 
     await el.updateComplete;
-    expect(el.manageViewMode).equal('manual');
+    expect(el.isManageView).to.be.false;
   });
 
   it('enable/disable manage view delete button when you selectAll/unselectAll', async () => {
@@ -1917,7 +1917,7 @@ describe('Collection Browser', () => {
     await el.updateComplete;
     await el.initialSearchComplete;
 
-    el.manageViewMode = 'manual';
+    el.isManageView = true;
     await el.updateComplete;
 
     const manageBar = el.shadowRoot?.querySelector('manage-bar');
@@ -2018,7 +2018,7 @@ describe('Collection Browser', () => {
     const numberOfPages = 15;
 
     el.baseQuery = 'jack';
-    el.manageViewMode = 'manual';
+    el.isManageView = true;
     await el.dataSource.fetchPage(1, numberOfPages);
     await el.updateComplete;