@internetarchive/collection-browser 4.7.1-alpha-webdev9189.0 → 4.8.0

package/src/collection-facets/facet-row.ts

@@ -1,14 +1,5 @@
-import {
-  css,
-  html,
-  LitElement,
-  TemplateResult,
-  CSSResultGroup,
-  nothing,
-} from 'lit';
+import { html, LitElement, TemplateResult, CSSResultGroup, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import eyeIcon from '../assets/img/icons/eye';
-import eyeClosedIcon from '../assets/img/icons/eye-closed';
 import type {
   FacetOption,
   FacetBucket,
@@ -17,6 +8,11 @@ import type {
 } from '../models';
 import type { CollectionTitles } from '../data-source/models';
 import { srOnlyStyle } from '../styles/sr-only';
+import {
+  facetRowStyles,
+  facetRowTemplate,
+  getFacetState,
+} from './facet-row-template';
 
 @customElement('facet-row')
 export class FacetRow extends LitElement {
@@ -61,92 +57,13 @@ export class FacetRow extends LitElement {
     const { bucket, facetType } = this;
     if (!bucket || !facetType) return nothing;
 
-    const showOnlyCheckboxId = `${facetType}:${bucket.key}-show-only`;
-    const negativeCheckboxId = `${facetType}:${bucket.key}-negative`;
-
-    const extraNoteSpan = bucket.extraNote
-      ? html`<span class="facet-note">${bucket.extraNote}</span>`
-      : nothing;
-
-    // For collections, we render the collection title as a link.
-    // For other facet types, we just have a static value to use.
-    const bucketTextDisplay =
-      facetType !== 'collection'
-        ? html`${bucket.displayText ?? bucket.key} ${extraNoteSpan}`
-        : html`<a href="/details/${bucket.key}">
-            ${this.collectionTitles?.get(bucket.key) ?? bucket.key}
-          </a> `;
-
-    const bucketCountText =
-      bucket.count > 0 ? bucket.count.toLocaleString() : '';
-
-    const facetHidden = bucket.state === 'hidden';
-    const facetSelected = bucket.state === 'selected';
-
-    const titleText = `${facetType}: ${bucket.displayText ?? bucket.key}`;
-    const onlyShowText = facetSelected
-      ? `Show all ${facetType}s`
-      : `Only show ${titleText}`;
-    const hideText = `Hide ${titleText}`;
-    const unhideText = `Unhide ${titleText}`;
-    const showHideText = facetHidden ? unhideText : hideText;
-    const ariaLabel = `${titleText}, ${bucket.count} results`;
-
-    // Added data-testid for Playwright testing
-    return html`
-      <div class="facet-row-container">
-        <div class="facet-checkboxes">
-          <input
-            type="checkbox"
-            .name=${facetType}
-            .value=${bucket.key}
-            @click=${(e: Event) => {
-              this.facetClicked(e, false);
-            }}
-            .checked=${facetSelected}
-            class="select-facet-checkbox"
-            title=${onlyShowText}
-            id=${showOnlyCheckboxId}
-            data-testid=${showOnlyCheckboxId}
-          />
-          <div
-            class="hide-facet-container"
-            ?hidden=${this.omitHideButton && !facetHidden}
-          >
-            <input
-              type="checkbox"
-              id=${negativeCheckboxId}
-              .name=${facetType}
-              .value=${bucket.key}
-              @click=${(e: Event) => {
-                this.facetClicked(e, true);
-              }}
-              .checked=${facetHidden}
-              class="hide-facet-checkbox"
-            />
-            <label
-              for=${negativeCheckboxId}
-              class="hide-facet-icon${facetHidden ? ' active' : ''}"
-              title=${showHideText}
-              data-testid=${negativeCheckboxId}
-            >
-              <span class="sr-only">${showHideText}</span>
-              <span class="eye eye-open">${eyeIcon}</span>
-              <span class="eye eye-closed">${eyeClosedIcon}</span>
-            </label>
-          </div>
-        </div>
-        <label
-          for=${showOnlyCheckboxId}
-          class="facet-info-display"
-          title=${onlyShowText}
-          aria-label=${ariaLabel}
-        >
-          <div class="facet-title">${bucketTextDisplay}</div>
-          <div class="facet-count">${bucketCountText}</div>
-        </label>
-      </div>
-    `;
+    return facetRowTemplate({
+      facetType,
+      bucket,
+      collectionTitles: this.collectionTitles,
+      omitHideButton: this.omitHideButton,
+      onCheckboxClick: (e, negative) => this.facetClicked(e, negative),
+    });
   }
 
   //
@@ -192,13 +109,7 @@ export class FacetRow extends LitElement {
    * Returns the composed facet state corresponding to a positive or negative facet's checked state
    */
   static getFacetState(checked: boolean, negative: boolean): FacetState {
-    let state: FacetState;
-    if (checked) {
-      state = negative ? 'hidden' : 'selected';
-    } else {
-      state = 'none';
-    }
-    return state;
+    return getFacetState(checked, negative);
   }
 
   //
@@ -206,104 +117,6 @@ export class FacetRow extends LitElement {
   //
 
   static get styles(): CSSResultGroup {
-    const facetRowBorderTop = css`var(--facet-row-border-top, 1px solid transparent)`;
-    const facetRowBorderBottom = css`var(--facet-row-border-bottom, 1px solid transparent)`;
-    const checkboxHeight = css`15px`;
-
-    const ownCss = css`
-      .facet-checkboxes {
-        margin: 0 5px 0 0;
-        display: flex;
-        height: ${checkboxHeight};
-      }
-      .facet-checkboxes input:first-child {
-        margin-right: 5px;
-      }
-      .facet-checkboxes input {
-        height: ${checkboxHeight};
-        width: ${checkboxHeight};
-        margin: 0;
-      }
-      .facet-row-container {
-        display: flex;
-        font-weight: 500;
-        font-size: 1.2rem;
-        margin: 0 auto;
-        padding: 0.25rem 0;
-        height: auto;
-        border-top: ${facetRowBorderTop};
-        border-bottom: ${facetRowBorderBottom};
-      }
-      .facet-info-display {
-        display: flex;
-        flex: 1 1 0%;
-        cursor: pointer;
-        flex-wrap: wrap;
-      }
-      .facet-title {
-        word-break: break-word;
-        display: inline-block;
-        flex: 1 1 0%;
-      }
-      .facet-note {
-        color: #bbb;
-      }
-      .facet-count {
-        text-align: right;
-      }
-      .select-facet-checkbox {
-        cursor: pointer;
-        display: inline-block;
-      }
-      .hide-facet-checkbox {
-        position: absolute;
-        clip: rect(0, 0, 0, 0);
-        pointer-events: none;
-      }
-      .hide-facet-checkbox:focus-visible + .hide-facet-icon {
-        outline-style: auto;
-        outline-offset: 2px;
-      }
-      .hide-facet-icon {
-        width: ${checkboxHeight};
-        height: ${checkboxHeight};
-        cursor: pointer;
-        display: flex;
-      }
-      .eye {
-        width: ${checkboxHeight};
-        height: ${checkboxHeight};
-        opacity: 0.3;
-      }
-      .hide-facet-icon:hover .eye,
-      .active .eye {
-        opacity: 1;
-      }
-      .hide-facet-icon:hover .eye-open,
-      .hide-facet-icon .eye-closed {
-        display: none;
-      }
-      .hide-facet-icon:hover .eye-closed,
-      .hide-facet-icon.active .eye-closed {
-        display: inline;
-      }
-      .hide-facet-icon.active .eye-open {
-        display: none;
-      }
-      .sorting-icon {
-        cursor: pointer;
-      }
-
-      a:link,
-      a:visited {
-        text-decoration: none;
-        color: var(--ia-theme-link-color, #4b64ff);
-      }
-      a:hover {
-        text-decoration: underline;
-      }
-    `;
-
-    return [srOnlyStyle, ownCss];
+    return [srOnlyStyle, facetRowStyles];
   }
 }

package/src/collection-facets/models.ts

@@ -4,7 +4,13 @@
 export const MORE_FACETS__MAX_AGGREGATIONS = 10000;
 
 /**
- * Default number of facets to show per page of the More... facet dialogs.
+ * Width in px of each column of facets in the More... facet dialogs. Every
+ * column is this wide; the number of columns per page is however many fit.
+ */
+export const MORE_FACETS__COLUMN_WIDTH = 250;
+
+/**
+ * Default number of facets stacked in each column of the More... facet dialogs.
  * Can be overridden via component property.
  */
-export const MORE_FACETS__DEFAULT_PAGE_SIZE = 35;
+export const MORE_FACETS__ROWS_PER_COLUMN = 12;