@internetarchive/collection-browser 2.1.4-alpha2 → 2.1.4

package/src/collection-browser.ts

@@ -90,16 +90,34 @@ export class CollectionBrowser
 
   @property({ type: Object }) searchService?: SearchServiceInterface;
 
+  /**
+   * Which backend should be targeted by searches (e.g., metadata or FTS)
+   */
   @property({ type: String }) searchType: SearchType = SearchType.METADATA;
 
+  /**
+   * The identifier of the collection that searches should be performed within
+   */
   @property({ type: String }) withinCollection?: string;
 
+  /**
+   * The identifier (e.g., @person) of the user whose profile is being searched within
+   */
   @property({ type: String }) withinProfile?: string;
 
+  /**
+   * Which section of the profile page searches are for (e.g., uploads, reviews, ...)
+   */
   @property({ type: String }) profileElement?: PageElementName;
 
+  /**
+   * The base query to use for all searches, updated to match the current user query.
+   */
   @property({ type: String }) baseQuery?: string;
 
+  /**
+   * Which mode to display result tiles in (grid, extended list, or compact list)
+   */
   @property({ type: String }) displayMode?: CollectionDisplayMode;
 
   @property({ type: Object }) defaultSortParam: SortParam | null = null;
@@ -122,20 +140,54 @@ export class CollectionBrowser
 
   @property({ type: Object }) selectedFacets?: SelectedFacets;
 
+  /**
+   * Whether to show the date picker (above the facets)
+   */
   @property({ type: Boolean }) showHistogramDatePicker = false;
 
+  /**
+   * Whether placeholder views should be suppressed. If true, searches that produce an
+   * error or empty result set will simply show a blank results view instead of a placeholder.
+   */
   @property({ type: Boolean }) suppressPlaceholders = false;
 
+  /**
+   * Whether the result count text should be suppressed.
+   * If true, no "X Results" message will be shown.
+   */
   @property({ type: Boolean }) suppressResultCount = false;
 
+  /**
+   * Whether the scrolling result view should be suppressed entirely.
+   * If true, no infinite scroller (and thus no result tiles) will be rendered.
+   */
   @property({ type: Boolean }) suppressResultTiles = false;
 
+  /**
+   * Whether to suppress persistence of the query to the URL.
+   * If true, the `query` param will not be added to the URL or updated on query changes.
+   */
   @property({ type: Boolean }) suppressURLQuery = false;
 
+  /**
+   * Whether to suppress the display of facets.
+   * If true, the facet sidebar content will be replaced by a message that facets are
+   * temporarily unavailable.
+   */
   @property({ type: Boolean }) suppressFacets = false;
 
+  /**
+   * Whether to suppress display of the sort bar.
+   * If true, the entire sort bar (incl. display modes) will be omitted from rendering.
+   */
   @property({ type: Boolean }) suppressSortBar = false;
 
+  /**
+   * Whether to suppress showing the display mode options in the sort bar.
+   * If true, those options will be omitted (though the rest of the sort bar may still render).
+   */
+  @property({ type: Boolean }) suppressDisplayModes = false;
+
   @property({ type: Boolean }) clearResultsOnEmptyQuery = false;
 
   @property({ type: String }) collectionPagePath: string = '/details/';
@@ -630,6 +682,7 @@ export class CollectionBrowser
         .prefixFilterCountMap=${this.dataSource.prefixFilterCountMap}
         .resizeObserver=${this.resizeObserver}
         .enableSortOptionsSlot=${this.enableSortOptionsSlot}
+        .suppressDisplayModes=${this.suppressDisplayModes}
         @sortChanged=${this.userChangedSort}
         @displayModeChanged=${this.displayModeChanged}
         @titleLetterChanged=${this.titleLetterSelected}
@@ -637,6 +690,7 @@ export class CollectionBrowser
       >
         <slot name="sort-options-left" slot="sort-options-left"></slot>
         <slot name="sort-options" slot="sort-options"></slot>
+        <slot name="sort-options-right" slot="sort-options-right"></slot>
       </sort-filter-bar>
     `;
   }
@@ -647,7 +701,7 @@ export class CollectionBrowser
         .label=${this.manageViewLabel}
         showSelectAll
         showUnselectAll
-        ?enableRemoveButton=${this.dataSource.checkedTileModels.length !== 0}
+        ?removeAllowed=${this.dataSource.checkedTileModels.length !== 0}
         @removeItems=${this.handleRemoveItems}
         @selectAll=${() => this.dataSource.checkAllTiles()}
         @unselectAll=${() => this.dataSource.uncheckAllTiles()}
@@ -1188,6 +1242,7 @@ export class CollectionBrowser
   connectedCallback(): void {
     super.connectedCallback?.();
     this.setupStateRestorationObserver();
+    this.setupResizeObserver();
   }
 
   disconnectedCallback(): void {
@@ -1341,7 +1396,7 @@ export class CollectionBrowser
   }
 
   private setupResizeObserver() {
-    if (!this.resizeObserver) return;
+    if (!this.resizeObserver || !this.contentContainer) return;
     this.resizeObserver.addObserver({
       target: this.contentContainer,
       handler: this,
@@ -1814,6 +1869,7 @@ export class CollectionBrowser
         #right-column {
           flex: 1;
           position: relative;
+          min-height: 90vh;
           border-left: 1px solid rgb(232, 232, 232);
           border-right: 1px solid rgb(232, 232, 232);
           padding-left: 1rem;
@@ -1930,7 +1986,9 @@ export class CollectionBrowser
 
         .mobile #left-column {
           width: 100%;
+          min-width: 0;
           padding: 0;
+          border: 0;
         }
 
         .clear-filters-btn-row {

package/src/manage/manage-bar.ts

@@ -30,7 +30,7 @@ export class ManageBar extends LitElement {
   /**
    * Whether to active delete button for selectable items
    */
-  @property({ type: Boolean }) enableRemoveButton = false;
+  @property({ type: Boolean }) removeAllowed = false;
 
   render(): TemplateResult {
     return html`
@@ -42,7 +42,7 @@ export class ManageBar extends LitElement {
           </button>
           <button
             class="ia-button danger"
-            ?disabled=${!this.enableRemoveButton}
+            ?disabled=${!this.removeAllowed}
             @click=${this.removeClicked}
           >
             ${msg('Remove selected items')}

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

@@ -73,6 +73,10 @@ export class SortFilterBar
   @property({ type: Boolean, reflect: true }) enableSortOptionsSlot: boolean =
     false;
 
+  /** Whether to suppress showing the three display mode options on the right of the bar (default `false`) */
+  @property({ type: Boolean, reflect: true })
+  suppressDisplayModes: boolean = false;
+
   /** Maps of result counts for letters on the alphabet bar, for each letter filter type */
   @property({ type: Object }) prefixFilterCountMap?: Record<
     PrefixFilterType,
@@ -160,8 +164,13 @@ export class SortFilterBar
                 `
               : html`<slot name="sort-options"></slot>`}
           </div>
+          <slot name="sort-options-right"></slot>
 
-          <div id="display-style-selector">${this.displayOptionTemplate}</div>
+          ${this.suppressDisplayModes
+            ? nothing
+            : html`<div id="display-style-selector">
+                ${this.displayOptionTemplate}
+              </div>`}
         </section>
 
         ${this.dropdownBackdropVisible ? this.dropdownBackdrop : nothing}

package/test/manage/manage-bar.test.ts

@@ -12,8 +12,8 @@ describe('Manage bar', () => {
 
     expect(el.shadowRoot?.querySelector('.manage-label')).to.exist;
     expect(el.shadowRoot?.querySelector('.manage-buttons')).to.exist;
-    expect(el.shadowRoot?.querySelector('.cancel-btn')).to.exist;
-    expect(el.shadowRoot?.querySelector('.remove-btn')).to.exist;
+    expect(el.shadowRoot?.querySelector('.ia-button.dark')).to.exist;
+    expect(el.shadowRoot?.querySelector('.ia-button.danger')).to.exist;
   });
 
   it('can set the label', async () => {
@@ -45,9 +45,16 @@ describe('Manage bar', () => {
     expect(el.shadowRoot?.querySelector('.unselect-all-btn')).to.exist;
   });
 
-  it('have delete button disabled', async () => {
+  it('default and toggle state of remove button', async () => {
     const el = await fixture<ManageBar>(html`<manage-bar></manage-bar>`);
-    expect(el.shadowRoot?.querySelector('.remove-btn:disabled')).to.exist;
+
+    expect(el.shadowRoot?.querySelector('.ia-button.danger:disabled')).to.exist;
+
+    el.removeAllowed = true;
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.ia-button.danger:disabled')).to.not
+      .exist;
   });
 
   it('emits event when Cancel button clicked', async () => {
@@ -57,7 +64,7 @@ describe('Manage bar', () => {
     );
 
     const cancelBtn = el.shadowRoot?.querySelector(
-      '.cancel-btn'
+      '.ia-button.dark'
     ) as HTMLButtonElement;
     expect(cancelBtn).to.exist;
 
@@ -68,11 +75,11 @@ describe('Manage bar', () => {
   it('emits event when Remove Items button clicked', async () => {
     const spy = Sinon.spy();
     const el = await fixture<ManageBar>(
-      html`<manage-bar @removeItems=${spy}></manage-bar>`
+      html`<manage-bar @removeItems=${spy} removeAllowed></manage-bar>`
     );
 
     const removeItemsBtn = el.shadowRoot?.querySelector(
-      '.remove-btn'
+      '.ia-button.danger'
     ) as HTMLButtonElement;
     expect(removeItemsBtn).to.exist;
 

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

@@ -407,6 +407,17 @@ describe('Display mode/style buttons', () => {
     expect(compactListButton).to.exist;
   });
 
+  it('should not render display mode buttons when suppressed', async () => {
+    const el = await fixture<SortFilterBar>(html`
+      <sort-filter-bar suppressDisplayModes></sort-filter-bar>
+    `);
+
+    const displayModeButtonList = el.shadowRoot?.querySelector(
+      '#display-style-selector'
+    );
+    expect(displayModeButtonList).not.to.exist;
+  });
+
   it('should active current display mode', async () => {
     const el = await fixture<SortFilterBar>(html`
       <sort-filter-bar> </sort-filter-bar>

package/tsconfig.json

@@ -1,21 +1,21 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2017", "dom"],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "./",
-    "declaration": true,
-    "importsNotUsedAsValues": "error"
-  },
-  "include": ["src", "test", "index.ts", "types"],
-}
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2017", "dom"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "importsNotUsedAsValues": "error"
+  },
+  "include": ["src", "test", "index.ts", "types"],
+}

package/web-dev-server.config.mjs

@@ -1,30 +1,30 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  nodeResolve: true,
-  open: '/',
-  watch: !hmr,
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-
-  /** Confgure bare import resolve plugin */
-  // nodeResolve: {
-  //   exportConditions: ['browser', 'development']
-  // },
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ],
-
-  http2: true,
-  sslCert: './local.archive.org.cert',
-  sslKey: './local.archive.org.key',
-});
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  nodeResolve: true,
+  open: '/',
+  watch: !hmr,
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  /** Confgure bare import resolve plugin */
+  // nodeResolve: {
+  //   exportConditions: ['browser', 'development']
+  // },
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+  ],
+
+  http2: true,
+  sslCert: './local.archive.org.cert',
+  sslKey: './local.archive.org.key',
+});

package/web-test-runner.config.mjs

@@ -1,41 +1,41 @@
-// import { playwrightLauncher } from '@web/test-runner-playwright';
-
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
-
-export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  /** Test files to run */
-  files: 'dist/test/**/*.test.js',
-
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Filter out lit dev mode logs */
-  filterBrowserLogs(log) {
-    for (const arg of log.args) {
-      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
-        return false;
-      }
-    }
-    return true;
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-
-  /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
-
-  /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
-
-  /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
-
-  // See documentation for all available options
-});
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+
+const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  /** Test files to run */
+  files: 'dist/test/**/*.test.js',
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Amount of browsers to run concurrently */
+  // concurrentBrowsers: 2,
+
+  /** Amount of test files per browser to test concurrently */
+  // concurrency: 1,
+
+  /** Browsers to run tests on */
+  // browsers: [
+  //   playwrightLauncher({ product: 'chromium' }),
+  //   playwrightLauncher({ product: 'firefox' }),
+  //   playwrightLauncher({ product: 'webkit' }),
+  // ],
+
+  // See documentation for all available options
+});