@internetarchive/collection-browser 2.18.3-alpha-webdev7768.0 → 2.18.3-alpha-webdev7768.2

package/src/collection-facets/smart-facets/smart-facet-bar.ts

@@ -12,7 +12,12 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { msg } from '@lit/localize';
 import type { Aggregation, Bucket } from '@internetarchive/search-service';
 import type { CollectionTitles } from '../../data-source/models';
-import type { FacetOption, SelectedFacets } from '../../models';
+import type {
+  FacetEventDetails,
+  FacetOption,
+  FacetState,
+  SelectedFacets,
+} from '../../models';
 import { updateSelectedFacetBucket } from '../../utils/facet-utils';
 import { SmartQueryHeuristicGroup } from './smart-facet-heuristics';
 import type { SmartFacetDropdown } from './smart-facet-dropdown';
@@ -49,6 +54,8 @@ export class SmartFacetBar extends LitElement {
 
   @property({ type: Boolean }) filterToggleActive = false;
 
+  @property({ type: String }) label?: string;
+
   @state() private heuristicRecs: SmartFacet[] = [];
 
   @state() private smartFacets: SmartFacet[][] = [];
@@ -62,9 +69,13 @@ export class SmartFacetBar extends LitElement {
   render() {
     if (!this.query) return nothing;
 
+    const shouldShowLabel = !!this.label && this.smartFacets.length > 0;
     return html`
       <div id="smart-facets-container">
         ${this.filtersToggleTemplate}
+        ${shouldShowLabel
+          ? html`<p id="filters-label">${this.label}</p>`
+          : nothing}
         ${repeat(
           this.smartFacets,
           f =>
@@ -255,19 +266,36 @@ export class SmartFacetBar extends LitElement {
     } as SmartFacet;
   }
 
-  private facetClicked(e: CustomEvent<SmartFacetEvent>): void {
-    if (!e.detail.smartFacet.selected) {
+  /**
+   * Toggles the state of the given smart facet, and updates the selected facets accordingly.
+   */
+  private toggleSmartFacet(
+    facet: SmartFacet,
+    details: FacetEventDetails[],
+  ): void {
+    let newState: FacetState;
+    if (facet.selected) {
+      // When deselected, leave the smart facet where it is
+      newState = 'none';
+      this.smartFacets = this.smartFacets.map(f => {
+        if (f[0] === facet) return [{ ...facet, selected: false }];
+        return f;
+      });
+    } else {
+      // When selected, move the toggled smart facet to the front of the list
+      newState = 'selected';
       this.smartFacets = [
-        [{ ...e.detail.smartFacet, selected: true }],
-        ...this.smartFacets.filter(f => f[0] !== e.detail.smartFacet),
+        [{ ...facet, selected: true }],
+        ...this.smartFacets.filter(f => f[0] !== facet),
       ];
     }
 
-    for (const facet of e.detail.details) {
+    // Update the selected facets
+    for (const facet of details) {
       this.selectedFacets = updateSelectedFacetBucket(
         this.selectedFacets,
         facet.facetType,
-        facet.bucket,
+        { ...facet.bucket, state: newState },
         true,
       );
     }
@@ -278,13 +306,21 @@ export class SmartFacetBar extends LitElement {
     this.dispatchEvent(event);
   }
 
+  private facetClicked(e: CustomEvent<SmartFacetEvent>): void {
+    this.toggleSmartFacet(e.detail.smartFacet, e.detail.details);
+  }
+
   private facetDropdownClicked(e: CustomEvent<SmartFacetEvent>): void {
-    if (
-      this.smartFacets.find(sf => smartFacetEquals(sf[0], e.detail.smartFacet))
-    ) {
+    const existingFacet = this.smartFacets.find(
+      sf => sf.length === 1 && smartFacetEquals(sf[0], e.detail.smartFacet),
+    );
+    if (existingFacet) {
+      // The facet already exists outside the dropdown, so just select it there
+      this.toggleSmartFacet(existingFacet[0], e.detail.details);
       return;
     }
 
+    // Otherwise, prepend a new smart facet for the selected option
     this.smartFacets = [
       [{ ...e.detail.smartFacet, selected: true }],
       ...this.smartFacets,
@@ -363,6 +399,12 @@ export class SmartFacetBar extends LitElement {
       #filters-toggle.active > svg {
         filter: invert(1);
       }
+
+      #filters-label {
+        font-size: 1.4rem;
+        font-weight: bold;
+        margin: 0 -5px 0 0;
+      }
     `;
   }
 }

package/src/collection-facets/smart-facets/smart-facet-dropdown.ts

@@ -31,17 +31,20 @@ export class SmartFacetDropdown extends LitElement {
         <ia-dropdown
           class="dropdown"
           displayCaret
-          openViaButton
           closeOnSelect
           closeOnEscape
           closeOnBackdropClick
           includeSelectedOption
           .options=${this.dropdownOptions}
           .selectedOption=${this.activeDropdownOption}
+          .openViaButton=${false}
           @optionSelected=${this.optionSelected}
           @click=${this.onDropdownClick}
         >
-          <span class="dropdown-label" slot="dropdown-label"
+          <span
+            class="dropdown-label"
+            slot="dropdown-label"
+            @click=${this.defaultOptionSelected}
             >${this.labelPrefix ?? nothing} ${displayText}</span
           >
         </ia-dropdown>
@@ -76,13 +79,31 @@ export class SmartFacetDropdown extends LitElement {
     );
   }
 
+  /**
+   * Handler for when the default option on the dropdown button is clicked
+   */
+  private defaultOptionSelected(): void {
+    this.handleSelection(this.activeFacetRef?.bucketKey);
+  }
+
+  /**
+   * Handler for when an option in the dropdown menu is selected
+   */
   private optionSelected(e: CustomEvent<{ option: optionInterface }>): void {
-    if (!this.facetInfo || !this.activeFacetRef) return;
+    this.handleSelection(e.detail.option.id);
+  }
+
+  /**
+   * Responds to a dropdown selection by emitting a `facetClick` event with
+   * the appropriate facet details.
+   */
+  private handleSelection(bucketKey?: string): void {
+    if (!bucketKey || !this.facetInfo || !this.activeFacetRef) return;
 
     let selectedSmartFacet;
     for (const smartFacet of this.facetInfo) {
       const selectedRef = smartFacet.facets.find(
-        b => b.bucketKey === e.detail.option.id,
+        b => b.bucketKey === bucketKey,
       );
       if (selectedRef) {
         this.activeFacetRef = selectedRef;

package/src/tiles/grid/styles/tile-grid-shared-styles.ts

@@ -1,129 +1,129 @@
-import { css } from 'lit';
-import { srOnlyStyle } from '../../../styles/sr-only';
-
-/**
- * Base tile styles
- */
-
-const tileBackgroundColor = css`var(--tileBackgroundColor, #ffffff)`;
-const tileCornerRadius = css`var(--tileCornerRadius, 4px)`;
-
-export const baseTileStyles = css`
-  /* Include .sr-only styles for all tiles */
-  ${srOnlyStyle}
-
-  .container {
-    background-color: ${tileBackgroundColor};
-    border: 1px #2c2c2c;
-    border-radius: ${tileCornerRadius};
-    box-shadow: var(--tileBoxShadow, 1px 1px 2px 0);
-    box-sizing: border-box;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-
-  image-block {
-    display: block;
-    position: relative;
-    text-align: center;
-  }
-
-  .tile-details {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    row-gap: 10px;
-    font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
-  }
-
-  .item-info {
-    display: flex;
-    flex-direction: column;
-    row-gap: 5px;
-    flex-grow: 1;
-  }
-
-  #title {
-    padding: 0 5px;
-  }
-
-  .created-by,
-  .date-sorted-by,
-  .volume-issue,
-  .archivist-since {
-    display: flex;
-    justify-content: left;
-    align-items: flex-start;
-    padding: 0 5px;
-  }
-
-  .truncated {
-    flex: 1;
-    color: #2c2c2c;
-    min-width: 0; /* Important for long words! */
-    text-align: left;
-    line-height: 15px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    word-wrap: break-word;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-  }
-
-  h4.truncated {
-    display: -webkit-box;
-    margin: 0px;
-    line-height: 15px;
-    font-size: 14px;
-    font-weight: 500;
-    padding-bottom: 1px;
-  }
-
-  span {
-    display: -webkit-box;
-    font-size: 1.4rem;
-    line-height: 15px;
-    overflow: hidden;
-    word-wrap: break-word;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-    padding-bottom: 1px;
-  }
-
-  .container:hover > .tile-details > .item-info > #title > .truncated {
-    text-decoration: underline;
-  }
-
-  /** this is a workaround for Safari 15 where the hover effects are not working */
-  #title:hover > .truncated {
-    text-decoration: underline;
-  }
-
-  .info-button {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    margin: 0;
-    padding: 0;
-    border: none;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: rgba(220, 220, 220, 0.5);
-    color: white;
-    font-size: 2rem;
-    font-weight: bold;
-    line-height: 1;
-    text-shadow: black 1px 1px 3px;
-    overflow: visible;
-    aspect-ratio: 1 / 1;
-    z-index: 1;
-  }
-
-  .hidden {
-    display: none;
-  }
-`;
+import { css } from 'lit';
+import { srOnlyStyle } from '../../../styles/sr-only';
+
+/**
+ * Base tile styles
+ */
+
+const tileBackgroundColor = css`var(--tileBackgroundColor, #ffffff)`;
+const tileCornerRadius = css`var(--tileCornerRadius, 4px)`;
+
+export const baseTileStyles = css`
+  /* Include .sr-only styles for all tiles */
+  ${srOnlyStyle}
+
+  .container {
+    background-color: ${tileBackgroundColor};
+    border: 1px #2c2c2c;
+    border-radius: ${tileCornerRadius};
+    box-shadow: var(--tileBoxShadow, 1px 1px 2px 0);
+    box-sizing: border-box;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  image-block {
+    display: block;
+    position: relative;
+    text-align: center;
+  }
+
+  .tile-details {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    row-gap: 10px;
+    font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
+  }
+
+  .item-info {
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+    flex-grow: 1;
+  }
+
+  #title {
+    padding: 0 5px;
+  }
+
+  .created-by,
+  .date-sorted-by,
+  .volume-issue,
+  .archivist-since {
+    display: flex;
+    justify-content: left;
+    align-items: flex-start;
+    padding: 0 5px;
+  }
+
+  .truncated {
+    flex: 1;
+    color: #2c2c2c;
+    min-width: 0; /* Important for long words! */
+    text-align: left;
+    line-height: 15px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-wrap: break-word;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+
+  h4.truncated {
+    display: -webkit-box;
+    margin: 0px;
+    line-height: 15px;
+    font-size: 14px;
+    font-weight: 500;
+    padding-bottom: 1px;
+  }
+
+  span {
+    display: -webkit-box;
+    font-size: 1.4rem;
+    line-height: 15px;
+    overflow: hidden;
+    word-wrap: break-word;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    padding-bottom: 1px;
+  }
+
+  .container:hover > .tile-details > .item-info > #title > .truncated {
+    text-decoration: underline;
+  }
+
+  /** this is a workaround for Safari 15 where the hover effects are not working */
+  #title:hover > .truncated {
+    text-decoration: underline;
+  }
+
+  .info-button {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(220, 220, 220, 0.5);
+    color: white;
+    font-size: 2rem;
+    font-weight: bold;
+    line-height: 1;
+    text-shadow: black 1px 1px 3px;
+    overflow: visible;
+    aspect-ratio: 1 / 1;
+    z-index: 1;
+  }
+
+  .hidden {
+    display: none;
+  }
+`;