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

package/src/manage/manage-bar.ts

@@ -1,276 +0,0 @@
-import { msg, str } from '@lit/localize';
-import { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { when } from 'lit/directives/when.js';
-import {
-  ModalConfig,
-  type ModalManagerInterface,
-} from '@internetarchive/modal-manager';
-import type { ManageableItem } from '../models';
-import { PageElementName } from '@internetarchive/search-service';
-import iaButtonStyle from '../styles/ia-button';
-import './remove-items-modal-content';
-
-@customElement('manage-bar')
-export class ManageBar extends LitElement {
-  /**
-   * The label displayed in front of the management buttons
-   */
-  @property({ type: String }) label = msg('Select items to remove');
-
-  /**
-   * The shared modal manager component for displaying modal dialogs on this page
-   */
-  @property({ type: Object }) modalManager?: ModalManagerInterface;
-
-  /**
-   * Array of items that have been selected for management
-   */
-  @property({ type: Array }) selectedItems: Array<ManageableItem> = [];
-
-  /**
-   * Which section of the profile page searches are for (e.g., uploads, reviews, ...)
-   */
-  @property({ type: String }) profileElement?: PageElementName;
-
-  /**
-   * Whether to show the "Select All" button (default false)
-   */
-  @property({ type: Boolean }) showSelectAll = false;
-
-  /**
-   * Whether to show the "Unselect All" button (default false)
-   */
-  @property({ type: Boolean }) showUnselectAll = false;
-
-  /**
-   * Whether to show "Item Manager the items" button (default false)
-   */
-  @property({ type: Boolean }) showItemManageButton = false;
-
-  /**
-   * Whether to active delete button for selectable items
-   */
-  @property({ type: Boolean }) removeAllowed = false;
-
-  render(): TemplateResult {
-    return html`
-      <div class="manage-container">
-        <span class="manage-label">${this.label}</span>
-        <div class="manage-buttons">
-          <button class="ia-button dark" @click=${this.cancelClicked}>
-            ${msg('Cancel')}
-          </button>
-          <button
-            class="ia-button danger"
-            ?disabled=${!this.removeAllowed}
-            @click=${this.showRemoveItemsModal}
-          >
-            ${msg('Remove selected items')} (${this.selectedItems.length})...
-          </button>
-          ${when(
-            this.showItemManageButton,
-            () =>
-              html` <button
-                class="ia-button warning"
-                ?disabled=${!this.removeAllowed}
-                @click=${this.manageItemsClicked}
-              >
-                ${msg('Item Manager the items')} (${this.selectedItems.length})
-              </button>`,
-          )}
-          <div class="selection-buttons">
-            ${when(
-              this.showSelectAll,
-              () =>
-                html` <button
-                  class="ia-button link select-all-btn"
-                  @click=${this.selectAllClicked}
-                >
-                  ${msg('Select all')}
-                </button>`,
-            )}
-            ${when(
-              this.showUnselectAll,
-              () =>
-                html` <button
-                  class="ia-button link unselect-all-btn"
-                  @click=${this.unselectAllClicked}
-                >
-                  ${msg('Unselect all')}
-                </button>`,
-            )}
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  /**
-   * Message to show in the manage view modal, depending on context.
-   */
-  private get manageViewModalMsg(): string {
-    const pluralize = this.selectedItems.length > 1;
-    const subject = pluralize ? 'these items' : 'this item';
-
-    let listName = '';
-
-    switch (this.profileElement) {
-      case 'uploads':
-        listName = 'uploads list';
-        break;
-      case 'web_archives':
-        listName = 'web archives list';
-        break;
-      case 'favorites':
-        listName = 'favorites list';
-        break;
-      default:
-        return '';
-    }
-
-    return msg(
-      str`Note: It may take a few minutes for ${subject} to stop appearing in your ${listName}.`,
-    );
-  }
-
-  private cancelClicked(): void {
-    this.dispatchEvent(new CustomEvent('cancel'));
-  }
-
-  private removeItemsClicked(): void {
-    this.dispatchEvent(new CustomEvent('removeItems'));
-  }
-
-  private manageItemsClicked(): void {
-    this.dispatchEvent(new CustomEvent('manageItems'));
-  }
-
-  private selectAllClicked(): void {
-    this.dispatchEvent(new CustomEvent('selectAll'));
-  }
-
-  private unselectAllClicked(): void {
-    this.dispatchEvent(new CustomEvent('unselectAll'));
-  }
-
-  /**
-   * Shows a modal dialog confirming the list of items to be removed
-   * @param items Which items to list in the modal
-   */
-  private showRemoveItemsModal(): void {
-    const customModalContent = html`
-      <remove-items-modal-content
-        .items=${this.selectedItems}
-        .message=${this.manageViewModalMsg}
-        @confirm=${() => this.removeItemsClicked()}
-      ></remove-items-modal-content>
-    `;
-
-    const config = new ModalConfig({
-      showProcessingIndicator: false,
-      processingImageMode: 'processing',
-      bodyColor: '#fff',
-      headerColor: '#194880',
-      showHeaderLogo: false,
-      closeOnBackdropClick: true,
-      title: html`${msg('Are you sure you want to remove these items?')}`,
-    });
-
-    this.modalManager?.classList.add('remove-items');
-    this.modalManager?.showModal({
-      config,
-      customModalContent,
-      userClosedModalCallback: () => {
-        this.modalManager?.classList.remove('remove-items');
-      },
-    });
-  }
-
-  /**
-   * Shows a modal dialog indicating that item removal is being processed
-   */
-  showRemoveItemsProcessingModal(): void {
-    const config = new ModalConfig({
-      showProcessingIndicator: true,
-      processingImageMode: 'processing',
-      bodyColor: '#fff',
-      headerColor: '#194880',
-      showHeaderLogo: false,
-      closeOnBackdropClick: true,
-      title: html`${msg('Removing selected items...')}`,
-    });
-
-    this.modalManager?.classList.add('remove-items');
-    this.modalManager?.showModal({
-      config,
-      userClosedModalCallback: () => {
-        this.modalManager?.classList.remove('remove-items');
-      },
-    });
-  }
-
-  /**
-   * Shows a modal dialog indicating that an error occurred while removing items
-   */
-  showRemoveItemsErrorModal(): void {
-    const config = new ModalConfig({
-      showProcessingIndicator: false,
-      processingImageMode: 'processing',
-      bodyColor: '#fff',
-      headerColor: '#691916',
-      showHeaderLogo: false,
-      closeOnBackdropClick: true,
-      title: html`${msg('Error: unable to remove items')}`,
-      message: html`${msg(
-        'An error occurred while removing items. Please try again in a few minutes.',
-      )}`,
-    });
-
-    this.modalManager?.classList.add('remove-items');
-    this.modalManager?.showModal({
-      config,
-      userClosedModalCallback: () => {
-        this.modalManager?.classList.remove('remove-items');
-      },
-    });
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      ${iaButtonStyle}
-      .manage-container {
-        display: flex;
-        align-items: center;
-        column-gap: 5px;
-        padding: 20px 0 20px;
-        flex-wrap: wrap;
-      }
-
-      .manage-label {
-        display: inline-block;
-        font-weight: bold;
-        font-size: 1.8rem;
-        padding-right: 10px;
-      }
-
-      .manage-buttons {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        column-gap: 5px;
-      }
-
-      .selection-buttons {
-        display: inherit;
-      }
-
-      .ia-button,
-      button {
-        padding: 6px 12px;
-        font-size: 1.4rem;
-        margin: 3px 0;
-      }
-    `;
-  }
-}

package/src/manage/remove-items-modal-content.ts

@@ -1,102 +0,0 @@
-import { LitElement, html, css, nothing, TemplateResult, CSSResult } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { msg } from '@lit/localize';
-import { map } from 'lit/directives/map.js';
-import type { ManageableItem } from '../models';
-
-@customElement('remove-items-modal-content')
-export class RemoveItemsModalContent extends LitElement {
-  @property({ type: Object }) items: ManageableItem[] = [];
-
-  @property({ type: String }) message?: string;
-
-  render(): TemplateResult {
-    return html`
-      <ul>
-        ${map(
-          this.items,
-          ({ title, date }) => html`
-            <li>
-              <span class="item-title">${title ?? '[untitled]'}</span>
-              <span class="item-date">${date ?? ''}</span>
-            </li>
-          `,
-        )}
-      </ul>
-      ${this.message ? html`<p class="message">${this.message}</p>` : nothing}
-      <div class="button-bar">
-        <button class="remove-items-btn" @click=${this.removeItemsBtnClicked}>
-          ${msg('Remove items')}
-        </button>
-      </div>
-    `;
-  }
-
-  private removeItemsBtnClicked(): void {
-    this.dispatchEvent(
-      new CustomEvent<{ items: ManageableItem[] }>('confirm', {
-        detail: {
-          items: this.items,
-        },
-      }),
-    );
-  }
-
-  static get styles(): CSSResult {
-    return css`
-      ul {
-        margin: 0;
-        padding: 0 10px;
-        font-size: 1.4rem;
-        list-style-type: none;
-        max-height: min(400px, 40vh);
-        overflow-y: auto;
-      }
-
-      li {
-        display: flex;
-        justify-content: space-between;
-        padding: 2px 0;
-      }
-      li:not(:last-of-type) {
-        border-bottom: 1px solid rgb(232, 232, 232);
-      }
-
-      .item-title {
-        word-break: break-word;
-      }
-
-      .item-date {
-        white-space: nowrap;
-      }
-
-      .message {
-        font-size: 1.4rem;
-        padding: 5px 10px;
-      }
-
-      .button-bar {
-        display: flex;
-        justify-content: center;
-        margin: 10px 5px;
-      }
-
-      .remove-items-btn {
-        margin-bottom: 10px;
-        padding: 10px;
-        border: 1px solid var(--primaryErrorCTABorder, #d43f3a);
-        border-radius: 4px;
-        color: white;
-        background: var(--primaryErrorCTAFill, #d9534f);
-        appearance: none;
-        cursor: pointer;
-      }
-      .remove-items-btn:hover {
-        background: rgba(var(--primaryErrorCTAFillRGB, 229, 28, 38), 0.9);
-      }
-      .remove-items-btn:active {
-        background: rgba(var(--primaryErrorCTAFillRGB, 229, 28, 38), 0.7);
-      }
-    `;
-  }
-}

package/src/mediatype/mediatype-config.ts

@@ -1,146 +0,0 @@
-import { html, TemplateResult } from 'lit';
-import { accountIcon } from '../assets/img/icons/mediatype/account';
-import { audioIcon } from '../assets/img/icons/mediatype/audio';
-import { collectionIcon } from '../assets/img/icons/mediatype/collection';
-import { dataIcon } from '../assets/img/icons/mediatype/data';
-import { etreeIcon } from '../assets/img/icons/mediatype/etree';
-import { imagesIcon } from '../assets/img/icons/mediatype/images';
-import { filmIcon } from '../assets/img/icons/mediatype/film';
-import { radioIcon } from '../assets/img/icons/mediatype/radio';
-import { softwareIcon } from '../assets/img/icons/mediatype/software';
-import { textsIcon } from '../assets/img/icons/mediatype/texts';
-import { tvIcon } from '../assets/img/icons/mediatype/tv';
-import { tvCommercialIcon } from '../assets/img/icons/mediatype/tv-commercial';
-import { tvFactCheckIcon } from '../assets/img/icons/mediatype/tv-fact-check';
-import { videoIcon } from '../assets/img/icons/mediatype/video';
-import { webIcon } from '../assets/img/icons/mediatype/web';
-import { searchIcon } from '../assets/img/icons/mediatype/search';
-import { tvQuoteIcon } from '../assets/img/icons/mediatype/tv-quote';
-
-/**
- * Union of keys with valid mediatype config entries
- */
-export type MediatypeConfigKey =
-  | 'account'
-  | 'audio'
-  | 'collection'
-  | 'data'
-  | 'etree'
-  | 'film'
-  | 'image'
-  | 'movies'
-  | 'none'
-  | 'radio'
-  | 'search'
-  | 'software'
-  | 'texts'
-  | 'tv'
-  | 'tvCommercial'
-  | 'tvFactCheck'
-  | 'tvQuote'
-  | 'video'
-  | 'web';
-
-export type MediatypeConfig = {
-  color: string;
-  icon: TemplateResult;
-  text: string;
-};
-
-export const mediatypeConfig: Record<MediatypeConfigKey, MediatypeConfig> = {
-  account: {
-    color: '#000000',
-    icon: accountIcon,
-    text: 'Account',
-  },
-  audio: {
-    color: '#00adef',
-    icon: audioIcon,
-    text: 'Audio',
-  },
-  collection: {
-    color: '#4666ff',
-    icon: collectionIcon,
-    text: 'Collection',
-  },
-  data: {
-    color: '#333333',
-    icon: dataIcon,
-    text: 'Data',
-  },
-  etree: {
-    color: '#00adef',
-    icon: etreeIcon,
-    text: 'E-tree',
-  },
-  film: {
-    color: '#bf1b2c',
-    icon: filmIcon,
-    text: 'Film',
-  },
-  image: {
-    color: '#aa99c9',
-    icon: imagesIcon,
-    text: 'Image',
-  },
-  movies: {
-    color: '#f1644b',
-    icon: filmIcon,
-    text: 'Movie',
-  },
-  none: {
-    color: '#00000000',
-    icon: html``, // Empty
-    text: '',
-  },
-  radio: {
-    color: '#8fdaef',
-    icon: radioIcon,
-    text: 'Radio',
-  },
-  software: {
-    color: '#9ecc4f',
-    icon: softwareIcon,
-    text: 'Software',
-  },
-  texts: {
-    color: '#faab3c',
-    icon: textsIcon,
-    text: 'Text',
-  },
-  tv: {
-    color: '#f1644b',
-    icon: tvIcon,
-    text: 'TV',
-  },
-  tvCommercial: {
-    color: '#84b648',
-    icon: tvCommercialIcon,
-    text: 'TV Political Ad',
-  },
-  tvFactCheck: {
-    color: '#f1644b',
-    icon: tvFactCheckIcon,
-    text: 'TV Fact Check',
-  },
-  tvQuote: {
-    color: '#fe7a5f',
-    icon: tvQuoteIcon,
-    text: 'TV Quote',
-  },
-  video: {
-    color: '#f1644b',
-    icon: videoIcon,
-    text: 'Video',
-  },
-  web: {
-    color: '#ffcd27',
-    icon: webIcon,
-    text: 'Web',
-  },
-  search: {
-    color: '#000000',
-    icon: searchIcon,
-    text: 'Search',
-  },
-};