@internetarchive/collection-browser 0.0.1-alpha.1

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

@@ -0,0 +1,256 @@
+import { SortParam } from '@internetarchive/search-service';
+import { LitElement, html, css, nothing, PropertyValues } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { CollectionDisplayMode } from '../models';
+import './alpha-bar';
+
+@customElement('sort-filter-bar')
+export class SortFilterBar extends LitElement {
+  @property({ type: String }) displayMode: CollectionDisplayMode = 'grid';
+
+  @property({ type: String }) sortDirection: 'asc' | 'desc' = 'desc';
+
+  @property({ type: String }) sortField = 'week';
+
+  @state() titleSelectorVisible: boolean = false;
+
+  @state() creatorSelectorVisible: boolean = false;
+
+  @state() dateSortSelectorVisible = false;
+
+  render() {
+    return html`
+      <div id="sort-bar">
+        <div id="sort-selector">
+          <ul>
+            <li>
+              <button
+                @click=${() => {
+                  this.sortDirection = 'desc';
+                }}
+              >
+                Desc
+              </button>
+              <button
+                @click=${() => {
+                  this.sortDirection = 'asc';
+                }}
+              >
+                Asc</button
+              >Sort By
+            </li>
+            <li>
+              <button
+                @click=${() => {
+                  this.sortField = 'week';
+                }}
+              >
+                Views
+              </button>
+            </li>
+            <li>
+              <button
+                @click=${() => {
+                  this.titleSelectorVisible = !this.titleSelectorVisible;
+                  this.sortField = 'titleSorter';
+                }}
+              >
+                Title
+              </button>
+            </li>
+            <li>
+              <button
+                @click=${() => {
+                  this.dateSortSelectorVisible = !this.dateSortSelectorVisible;
+                }}
+              >
+                Date Archived
+              </button>
+            </li>
+            <li>
+              <button
+                @click=${() => {
+                  this.creatorSelectorVisible = !this.creatorSelectorVisible;
+                  this.sortField = 'creatorSorter';
+                }}
+              >
+                Creator
+              </button>
+            </li>
+          </ul>
+        </div>
+
+        <div id="display-style">
+          <ul>
+            ${this.displayMode !== 'grid'
+              ? html`<li>
+                  <input type="checkbox" @click=${this.detailSelected} />
+                  Details
+                </li>`
+              : nothing}
+
+            <li>
+              <button id="grid-button" @click=${this.gridSelected}>Grid</button>
+            </li>
+            <li>
+              <button id="list-button" @click=${this.listSelected}>List</button>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      ${this.dateSortSelectorVisible ? this.dateSortSelector : nothing}
+      ${this.titleSelectorVisible ? this.titleSelectorBar : nothing}
+      ${this.creatorSelectorVisible ? this.creatorSelectorBar : nothing}
+    `;
+  }
+
+  updated(changed: PropertyValues) {
+    if (changed.has('displayMode')) {
+      this.displayModeChanged();
+    }
+
+    if (changed.has('sortDirection') || changed.has('sortField')) {
+      this.sortChanged();
+    }
+  }
+
+  private get dateSortSelector() {
+    return html`
+      <div id="date-sort-selector">
+        <ul>
+          <li>
+            <button
+              @click=${() => {
+                this.sortField = 'publicdate';
+              }}
+            >
+              Date Archived
+            </button>
+          </li>
+          <li>
+            <button
+              @click=${() => {
+                this.sortField = 'date';
+              }}
+            >
+              Date Published
+            </button>
+          </li>
+          <li>
+            <button
+              @click=${() => {
+                this.sortField = 'reviewdate';
+              }}
+            >
+              Date Reviewed
+            </button>
+          </li>
+          <li>
+            <button
+              @click=${() => {
+                this.sortField = 'addeddate';
+              }}
+            >
+              Date Added
+            </button>
+          </li>
+        </ul>
+      </div>
+    `;
+  }
+
+  private get titleSelectorBar() {
+    return html` <alpha-bar
+      headline="Title Starts With"
+      @letterChanged=${this.titleLetterChanged}
+    ></alpha-bar>`;
+  }
+
+  private get creatorSelectorBar() {
+    return html` <alpha-bar
+      headline="Creator Starts With"
+      @letterChanged=${this.creatorLetterChanged}
+    ></alpha-bar>`;
+  }
+
+  private titleLetterChanged(
+    e: CustomEvent<{ selectedLetter: string | undefined }>
+  ) {
+    const event = new CustomEvent('titleLetterChanged', {
+      detail: { selectedLetter: e.detail.selectedLetter },
+    });
+    this.dispatchEvent(event);
+  }
+
+  private creatorLetterChanged(
+    e: CustomEvent<{ selectedLetter: string | undefined }>
+  ) {
+    const event = new CustomEvent('creatorLetterChanged', {
+      detail: { selectedLetter: e.detail.selectedLetter },
+    });
+    this.dispatchEvent(event);
+  }
+
+  private gridSelected() {
+    this.displayMode = 'grid';
+  }
+
+  private listSelected() {
+    this.displayMode = 'list-compact';
+  }
+
+  private detailSelected(e: Event) {
+    this.displayMode = (e.target as HTMLInputElement).checked
+      ? 'list-detail'
+      : 'list-compact';
+  }
+
+  private displayModeChanged() {
+    const event = new CustomEvent('displayModeChanged', {
+      detail: { displayMode: this.displayMode },
+    });
+    this.dispatchEvent(event);
+  }
+
+  private sortChanged() {
+    const sort = new SortParam(this.sortField, this.sortDirection);
+    const event = new CustomEvent('sortChanged', {
+      detail: { sort },
+    });
+    this.dispatchEvent(event);
+  }
+
+  static styles = css`
+    #sort-bar {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    ul {
+      list-style: none;
+      display: flex;
+      margin: 0;
+      padding: 0;
+      align-items: center;
+    }
+
+    li {
+      padding: 0.5rem 0 0.5rem 0;
+    }
+
+    #sort-selector li::after {
+      content: '•';
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+
+    #sort-selector li:first-child::after {
+      content: '';
+    }
+
+    #sort-selector li:last-child::after {
+      content: '';
+    }
+  `;
+}

package/src/tiles/grid/account-tile.ts

@@ -0,0 +1,141 @@
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { TileModel } from '../../models';
+
+import { accountIcon } from './icons/account';
+import { favoriteFilledIcon } from './icons/favorite-filled';
+import { reviewsIcon } from './icons/reviews';
+import { uploadIcon } from './icons/upload';
+
+@customElement('account-tile')
+export class UserTile extends LitElement {
+  @property({ type: Object }) model?: TileModel;
+
+  render() {
+    return html`
+      <div class="outer-holder">
+        <div class="inner-holder">
+          <div id="header-holder">
+            <div id="title-holder">
+              <h1>${this.model?.identifier}</h1>
+            </div>
+            <div id="avatar-holder">
+              <div
+                id="avatar"
+                style="background-image: url('https://archive.org/services/img/${this
+                  .model?.identifier}')"
+              ></div>
+            </div>
+          </div>
+          <div id="year-holder">
+            <div id="archivist-since">
+              <h3>Archivist Since</h3>
+            </div>
+            <div id="year-holder">
+              <h3>${this.model?.dateAdded?.getFullYear()}</h3>
+            </div>
+          </div>
+          <div id="status-holder">
+            <div id="patron-icon">${accountIcon}</div>
+            <div class="stat-icon">
+              ${uploadIcon}
+              <h3>${this.model?.itemCount}</h3>
+            </div>
+            <div class="stat-icon">
+              ${favoriteFilledIcon}
+              <h3>${this.model?.favCount}</h3>
+            </div>
+            <div class="stat-icon">
+              ${reviewsIcon}
+              <h3>${this.model?.commentCount}</h3>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      h1 {
+        color: black;
+        font-size: 16px;
+        margin: 0;
+      }
+
+      h3 {
+        font-size: 14px;
+        font-weight: bold;
+        color: #2c2c2c;
+        margin: 0px;
+      }
+
+      .outer-holder {
+        background-color: #fcf5e6;
+        border: 1px #2c2c2c;
+        border-radius: 4px;
+        box-shadow: 1px 1px 2px 0px;
+        height: 100%;
+        display: flex;
+        text-align: center;
+        width: 100%;
+      }
+
+      .inner-holder {
+        padding: 5px;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+
+      #header-holder {
+        flex: 1;
+      }
+
+      #title-holder {
+        height: 40px;
+        margin-bottom: 5px;
+      }
+
+      #avatar-holder {
+        margin-bottom: 5px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      #avatar {
+        background-position: 50% 50%;
+        border-radius: 50%;
+        width: 160px;
+        height: 160px;
+        box-shadow: 1px 1px 2px #888888;
+      }
+
+      #year-holder {
+        margin-bottom: 5px;
+        height: 40px;
+      }
+
+      #year-holder {
+        margin: 0px;
+      }
+
+      #status-holder {
+        height: 25px;
+        display: flex;
+        justify-content: space-evenly;
+      }
+
+      #patron-icon {
+        height: 25px;
+        width: 25px;
+      }
+
+      .stat-icon {
+        height: 10px;
+        width: 10px;
+      }
+    `;
+  }
+}

package/src/tiles/grid/collection-tile.ts

@@ -0,0 +1,157 @@
+import { localized, msg } from '@lit/localize';
+import { css, CSSResultGroup, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
+import { TileModel } from '../../models';
+
+@localized()
+@customElement('collection-tile')
+export class CollectionTile extends LitElement {
+  @property({ type: Object }) model?: TileModel;
+
+  render() {
+    return html`
+      <div id="container">
+        <div id="collection-image-title">
+          <div id="collection-title">${this.model?.title}</div>
+          <div id="collection-image-container">
+            <div
+              id="collection-image"
+              style="background-image:url('https://archive.org/services/img/${this
+                .model?.identifier}')"
+            ></div>
+          </div>
+        </div>
+        <div id="item-count-container">
+          <div id="item-count-image-container">${collectionIcon}</div>
+          <div id="item-count-stacked-text">
+            <div id="item-count">${this.model?.itemCount.toLocaleString()}</div>
+            <div id="items-text">${msg('items')}</div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    const cornerRadiusCss = css`var(--collectionTileCornerRadius, 4px)`;
+
+    return css`
+      #collection-image-container {
+        display: flex;
+        justify-content: center;
+        flex: 1;
+      }
+
+      #collection-image {
+        width: 16rem;
+        height: 16rem;
+        border-radius: 0.8rem;
+        overflow: hidden;
+        box-shadow: 1px 1px 2px 0px;
+        object-fit: cover;
+        background-position: center;
+        background-size: cover;
+      }
+
+      #item-count-image-container svg {
+        filter: invert(100%);
+      }
+
+      #collection-image-title {
+        background-color: #666;
+        border: 1px solid #2c2c2c;
+        padding: 0.5rem;
+        border-top-left-radius: ${cornerRadiusCss};
+        border-top-right-radius: ${cornerRadiusCss};
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+      }
+
+      #collection-title {
+        font-weight: bold;
+        color: #fff;
+        font-size: 1.6rem;
+        text-align: center;
+        margin-bottom: 0.5rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        line-height: 2rem;
+        height: 4rem;
+      }
+
+      #container {
+        box-shadow: 1px 1px 2px 0px;
+        border-radius: ${cornerRadiusCss};
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+
+      #container:hover > #collection-image-title > #collection-title {
+        text-decoration: underline;
+      }
+
+      /* this is a workaround for Safari 15 where the hover effects are not working */
+      #collection-image-title:hover > #collection-title {
+        text-decoration: underline;
+      }
+
+      #container:hover > #collection-image-title {
+        background-color: #757575;
+      }
+
+      #item-count-container {
+        background-color: #444;
+        border-bottom: 1px solid #2c2c2c;
+        border-left: 1px solid #2c2c2c;
+        border-right: 1px solid #2c2c2c;
+        border-bottom-left-radius: ${cornerRadiusCss};
+        border-bottom-right-radius: ${cornerRadiusCss};
+        display: flex;
+        padding: 0rem 0.5rem;
+        height: 5.5rem;
+        align-items: center;
+      }
+
+      #item-count-image-container {
+        margin-right: 0.5rem;
+      }
+
+      #item-count-stacked-text {
+        display: flex;
+        align-items: baseline;
+        color: #fff;
+      }
+      #item-count-image-container svg {
+        height: 2.5rem;
+        align-items: baseline;
+      }
+
+      #container:hover > #item-count-container {
+        background-color: #575757;
+      }
+
+      #item-count {
+        font-size: 1.4rem;
+        font-weight: bold;
+      }
+
+      #item-count-image {
+        width: 3rem;
+        height: 3rem;
+        margin-right: 1rem;
+      }
+
+      #items-text {
+        font-size: 1.4rem;
+        font-weight: bold;
+        margin-left: 0.5rem;
+      }
+    `;
+  }
+}

package/src/tiles/grid/icons/account.ts

@@ -0,0 +1,12 @@
+import { svg } from 'lit';
+
+export const accountIcon = svg`
+  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="m89.6854559 79.6500588c1.7300364 6.4823648 2.180423 13.3122689 3.3145441 20.3499412h-86c.5683151-15.8558542 2.98334063-30.7849367 15.1676149-41.6581341 22.9948067-20.518674 59.250299-9.0032844 67.517841 21.3081929zm-40.0998307-79.6500588c10.872402.0493248 19.9700408 9.25722341 19.917959 20.1421788-.0829413 11.042868-8.9616237 19.8492523-20.0602807 19.8578212-11.1181198 0-19.9397193-8.7904706-19.9397193-19.8908727-.0327543-11.11998815 9.0125781-20.17487063 20.082041-20.1091273z"
+      fill="#333"
+      fill-rule="evenodd"
+    />
+    <title>Icon of a person</title>
+  </svg>
+`;

package/src/tiles/grid/icons/favorite-filled.ts

@@ -0,0 +1,11 @@
+import { svg } from 'lit';
+
+export const favoriteFilledIcon = svg`
+  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="m81.0388846 100-30.9636029-22.5595033-30.7410319 22.5595033 10.6670595-37.3922042-30.0013093-25.2155916h37.5556428l12.5196389-37.3922042 12.3690754 37.3922042h37.5556429l-29.7034563 25.2155916z"
+      fill="#333"
+    />
+    <title>Icon of a star, filled in</title>
+  </svg>
+`;

package/src/tiles/grid/icons/reviews.ts

@@ -0,0 +1,11 @@
+import { svg } from 'lit';
+
+export const reviewsIcon = svg`
+  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="m100 7.78013601c0-2.14552613-.7593357-3.978597-2.278007-5.4992126-1.5186713-1.52061561-3.3493984-2.28092341-5.4921813-2.28092341h-84.54977287c-2.08268321 0-3.88336049.7603078-5.40203183 2.28092341-1.51867133 1.5206156-2.278007 3.35368647-2.278007 5.4992126v51.49262709c0 2.0853495.75933567 3.8883321 2.278007 5.4089477 1.51867134 1.5206156 3.31934862 2.2809234 5.40203183 2.2809234h10.53361537l.3571304 33.0373658 32.4087237-33.0373658h41.2468361c2.1427829 0 3.97351-.7603078 5.4921813-2.2809234s2.278007-3.3235982 2.278007-5.4089477z"
+      fill="#333"
+    />
+    <title>Icon of a speech bubble</title>
+  </svg>
+`;

package/src/tiles/grid/icons/upload.ts

@@ -0,0 +1,12 @@
+import { svg } from 'lit';
+
+export const uploadIcon = svg`
+  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="m50 20 33.3333333 43.3333333h-20v36.6666667h-26.6666666v-36.6666667h-20zm50-20v13.3333333h-100v-13.3333333z"
+      fill="#333"
+      fill-rule="evenodd"
+    />
+    <title>Icon of an arrow pointing upwards</title>
+  </svg>
+`;

package/src/tiles/grid/icons/views.ts

@@ -0,0 +1,11 @@
+import { html } from 'lit';
+
+export default html`
+  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="m98 50.5704143c-.2830293-.471515-.671154-1.1088947-1.1643742-1.9121392s-1.6003642-2.3617474-3.3214321-4.6755089c-1.7210678-2.3137614-3.522258-4.5325939-5.4035703-6.6564975-1.8813124-2.1239037-4.2828993-4.473133-7.2047606-7.0476881-2.9218612-2.5745551-5.8895067-4.7933876-8.9029363-6.6564976-3.0134295-1.86311-6.4628491-3.4330878-10.3482587-4.7099336-3.8854095-1.2768458-7.7822651-1.9142256-11.6905667-1.9121443-3.9083017.0020914-7.8051573.6154781-11.6905668 1.8401652-3.8854096 1.2246871-7.3702078 2.8301329-10.4543947 4.8163375-3.0841869 1.9862045-6.0278997 4.1695691-8.8311384 6.5500937s-5.2048256 4.7652219-7.2047605 7.1540919c-1.99993501 2.38887-3.75430043 4.5722346-5.26309632 6.5500938s-2.63883199 3.583305-3.39010829 4.8163374l-1.13003609 1.8401602c.2830293.4715149.67115403 1.1088946 1.16437421 1.9121391.49322017.8032445 1.5878776 2.3617475 3.28397229 4.6755089s3.47439274 4.521119 5.3348942 6.6220728c1.8605014 2.1009538 4.2506422 4.4387083 7.1704224 7.0132633 2.9197801 2.5745551 5.8874256 4.7819127 8.9029363 6.6220729 3.0155106 1.8401601 6.4774168 3.398663 10.3857184 4.6755088 3.9083017 1.2768458 7.8176438 1.9142256 11.7280266 1.9121443 3.9103827-.0020914 7.7957922-.6154781 11.6562286-1.8401652s7.3337886-2.818658 10.4200566-4.7819127 6.0299808-4.1351444 8.8311384-6.515669 5.2152311-4.7652219 7.2422203-7.1540919 3.8052873-4.5607597 5.3348942-6.515669c1.5296068-1.9549093 2.6721295-3.5488802 3.427568-4.7819127zm-24.5142913 0c0 6.467683-2.3079374 12.0152859-6.9238123 16.6428087s-10.1495139 6.9412843-16.600917 6.9412843c-6.4992683 0-12.0453939-2.3137615-16.6383767-6.9412843s-6.8894742-10.1751257-6.8894742-16.6428087 2.2964914-12.003811 6.8894742-16.608384 10.1391084-6.9068595 16.6383767-6.9068595c6.4534842 0 11.9871232 2.3022865 16.600917 6.9068595s6.9217312 10.140701 6.9238123 16.608384zm-23.5247293-10.552755c2.8261308 0 5.2870289 1.0619518 7.3826944 3.1858555 2.0956655 2.1239036 3.1434982 4.5795368 3.1434982 7.3668995 0 2.8332624-1.0478327 5.2888956-3.1434982 7.3668995-2.0956655 2.078004-4.5565636 3.1170059-7.3826944 3.1170059-2.873996 0-5.3348941-1.0264838-7.3826944-3.0794516-2.0478002-2.0529677-3.0717003-4.5200758-3.0717003-7.4013243 0-2.8332624 1.0239001-5.3003705 3.0717003-7.4013243 2.0478003-2.1009538 4.5086984-3.1514307 7.3826944-3.1514307z"
+      fill="#333"
+    />
+    <title>Eye icon</title>
+  </svg>
+`;