@internetarchive/bookreader 5.0.0-38 → 5.0.0-39

package/stat/BookNavigator/search/search-results.js

@@ -1,360 +0,0 @@
-/* eslint-disable class-methods-use-this */
-import { nothing } from 'lit-html';
-import { css, html, LitElement } from 'lit-element';
-import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
-import './a-search-result.js';
-import checkmarkIcon from '../assets/icon_checkmark.js';
-import closeIcon from '../assets/icon_close.js';
-import buttonCSS from '../assets/button-base.js';
-
-
-export class IABookSearchResults extends LitElement {
-  static get properties() {
-    return {
-      results: { type: Array },
-      query: { type: String },
-      queryInProgress: { type: Boolean },
-      renderHeader: { type: Boolean },
-      renderSearchAllFiles: { type: Boolean },
-      displayResultImages: { type: Boolean },
-      errorMessage: { type: String },
-    };
-  }
-
-  constructor() {
-    super();
-
-    this.results = [];
-    this.query = '';
-    this.queryInProgress = false;
-    this.renderHeader = false;
-    this.renderSearchAllFields = false;
-    this.displayResultImages = false;
-    this.errorMessage = '';
-
-    this.bindBookReaderListeners();
-  }
-
-  /** @inheritdoc */
-  updated() {
-    this.focusOnInputIfNecessary();
-  }
-
-  bindBookReaderListeners() {
-    document.addEventListener('BookReader:SearchCallback', this.setResults.bind(this));
-  }
-
-  /**
-   * Provide immediate input focus if there aren't any results displayed
-   */
-  focusOnInputIfNecessary() {
-    if (this.results.length) {
-      return;
-    }
-    const searchInput = this.shadowRoot.querySelector('input[type=\'search\']');
-    searchInput.focus();
-  }
-
-  setResults({ detail }) {
-    this.results = detail.results;
-  }
-
-  setQuery(e) {
-    this.query = e.currentTarget.value;
-  }
-
-  performSearch(e) {
-    e.preventDefault();
-    const input = e.currentTarget.querySelector('input[type="search"]');
-    if (!input || !input.value) {
-      return;
-    }
-    this.dispatchEvent(new CustomEvent('bookSearchInitiated', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        query: this.query,
-      },
-    }));
-  }
-
-  selectResult() {
-    this.dispatchEvent(new CustomEvent('closeMenu', {
-      bubbles: true,
-      composed: true,
-    }));
-  }
-
-  cancelSearch() {
-    this.queryInProgress = false;
-    this.dispatchSearchCanceled();
-  }
-
-  dispatchSearchCanceled() {
-    this.dispatchEvent(new Event('bookSearchCanceled'));
-  }
-
-  get resultsCount() {
-    const count = this.results.length;
-    return count ? html`<p>(${count} result${count > 1 ? 's' : ''})</p>` : nothing;
-  }
-
-  get headerSection() {
-    const header = html`<header>
-      <h3>Search inside</h3>
-      ${this.resultsCount}
-    </header>`;
-    return this.renderHeader ? header : nothing;
-  }
-
-  get searchMultipleControls() {
-    const controls = html`
-      <input name="all_files" id="all_files" type="checkbox" />
-      <label class="checkbox" for="all_files">Search all files</label>
-    `;
-    return this.renderSearchAllFiles ? controls : nothing;
-  }
-
-  get loadingIndicator() {
-    return html`
-      <div class="loading">
-        <ia-activity-indicator mode="processing"></ia-activity-indicator>
-        <p>Searching</p>
-        <button class="ia-button external cancel-search" @click=${this.cancelSearch}>Cancel</button>
-      </div>
-    `;
-  }
-
-  get resultsSet() {
-    const resultsClass = this.displayResultImages ? 'show-image' : '';
-    return html`
-      <ul class="results ${resultsClass}">
-        ${this.results.map(match => html`
-            <book-search-result
-              .match=${match}
-              @resultSelected=${this.selectResult}
-            ></book-search-result>
-          `)}
-      </ul>
-    `;
-  }
-
-  get searchForm() {
-    return html`
-      <form action="" method="get" @submit=${this.performSearch}>
-        <fieldset>
-          ${this.searchMultipleControls}
-          <input
-            type="search"
-            name="query"
-            alt="Search inside this book."
-            @keyup=${this.setQuery}
-            .value=${this.query}
-          />
-        </fieldset>
-      </form>
-    `;
-  }
-
-  get setErrorMessage() {
-    return html`
-      <p class="error-message">${this.errorMessage}</p>
-    `;
-  }
-
-  get searchCTA() {
-    return html`<p class="search-cta"><em>Please enter text to search for</em></p>`;
-  }
-
-  render() {
-    const showSearchCTA = (!this.queryInProgress && !this.errorMessage)
-    && (!this.queryInProgress && !this.results.length);
-    return html`
-      ${this.headerSection}
-      ${this.searchForm}
-      <div class="results-container">
-        ${this.queryInProgress ? this.loadingIndicator : nothing}
-        ${this.errorMessage ? this.setErrorMessage : nothing}
-        ${this.results.length ? this.resultsSet : nothing}
-        ${showSearchCTA ? this.searchCTA : nothing}
-      </div>
-    `;
-  }
-
-  static get styles() {
-    const searchResultText = css`var(--searchResultText, #adaedc)`;
-    const searchResultBg = css`var(--searchResultBg, #272958)`;
-    const searchResultBorder = css`var(--searchResultBorder, #adaedc)`;
-    const activeButtonBg = css`(--tertiaryBGColor, #333)`;
-
-    const mainCSS = css`
-      :host {
-        display: block;
-        height: 100%;
-        padding: 1.5rem 1rem 2rem 0;
-        overflow-y: auto;
-        font-size: 1.4rem;
-        box-sizing: border-box;
-      }
-
-      mark {
-        padding: 0 .2rem;
-        color: ${searchResultText};
-        background: ${searchResultBg};
-        border: 1px solid ${searchResultBorder};
-        border-radius: 2px;
-      }
-
-      h3 {
-        padding: 0;
-        margin: 0 1rem 0 0;
-        font-size: 2rem;
-      }
-
-      header {
-        display: flex;
-        align-items: center;
-        padding: 0 2rem 0 0;
-      }
-      header p {
-        padding: 0;
-        margin: 0;
-        font-size: 1.2rem;
-        font-weight: bold;
-        font-style: italic;
-      }
-
-      fieldset {
-        padding: 0 0 1rem 0;
-        border: none;
-      }
-
-      [type="checkbox"] {
-        display: none;
-      }
-
-      label {
-        display: block;
-        text-align: center;
-      }
-
-      label.checkbox {
-        padding-bottom: .5rem;
-        font-size: 1.6rem;
-        line-height: 150%;
-        vertical-align: middle;
-      }
-
-      label.checkbox:after {
-        display: inline-block;
-        width: 14px;
-        height: 14px;
-        margin-left: .7rem;
-        content: "";
-        border-radius: 2px;
-      }
-      :checked + label.checkbox:after {
-        background-image: url('${checkmarkIcon}');
-      }
-
-      label.checkbox[for="all_files"]:after {
-        background: ${activeButtonBg} 50% 50% no-repeat;
-        border: 1px solid var(--primaryTextColor);
-      }
-
-      [type="search"] {
-        color: var(--primaryTextColor);
-        border: 1px solid var(--primaryTextColor);
-        -webkit-appearance: textfield;
-        width: 100%;
-        height: 3rem;
-        padding: 0 1.5rem;
-        box-sizing: border-box;
-        font: normal 1.6rem "Helvetica qNeue", Helvetica, Arial, sans-serif;
-        border-radius: 1.5rem;
-        background: transparent;
-      }
-      [type="search"]:focus {
-        outline: none;
-      }
-      [type="search"]::-webkit-search-cancel-button {
-        width: 18px;
-        height: 18px;
-        -webkit-appearance: none;
-        appearance: none;
-        -webkit-mask: url('${closeIcon}') 0 0 no-repeat;
-        mask: url('${closeIcon}') 0 0 no-repeat;
-        -webkit-mask-size: 100%;
-        mask-size: 100%;
-        background: #fff;
-      }
-
-      p.page-num {
-        font-weight: bold;
-        padding-bottom: 0;
-      }
-
-      p.search-cta {
-        text-align: center;
-      }
-
-      .results-container {
-        padding-bottom: 2rem;
-      }
-
-      ul {
-        padding: 0 0 2rem 0;
-        margin: 0;
-        list-style: none;
-      }
-
-      ul.show-image li {
-        display: grid;
-      }
-
-      li {
-        cursor: pointer;
-        grid-template-columns: 30px 1fr;
-        grid-gap: 0 .5rem;
-      }
-
-      li img {
-        display: block;
-        width: 100%;
-      }
-
-      li h4 {
-        grid-column: 2 / 3;
-        padding: 0 0 2rem 0;
-        margin: 0;
-        font-weight: normal;
-      }
-
-      li p {
-        grid-column: 2 / 3;
-        padding: 0 0 1.5rem 0;
-        margin: 0;
-        font-size: 1.2rem;
-      }
-
-      .loading {
-        text-align: center;
-      }
-
-      .loading p {
-        padding: 0 0 1rem 0;
-        margin: 0;
-        font-size: 1.2rem;
-      }
-
-      ia-activity-indicator {
-        display: block;
-        width: 40px;
-        height: 40px;
-        margin: 0 auto;
-      }
-    `;
-    return [buttonCSS, mainCSS];
-  }
-}
-customElements.define('ia-book-search-results', IABookSearchResults);

package/stat/BookNavigator/sharing.js

@@ -1,31 +0,0 @@
-import { html } from 'lit-element';
-import '@internetarchive/icon-share/icon-share';
-import '@internetarchive/ia-sharing-options';
-
-export default class {
-  constructor(metadata = {}, baseHost, baseItemType, subPrefix = '') {
-    const { identifier, creator, title } = metadata;
-    const encodedSubPrefix = encodeURIComponent(subPrefix);
-    const urlIdentifier = subPrefix && (subPrefix !== identifier) ? `${identifier}/${encodedSubPrefix}` : identifier;
-    this.idPath = urlIdentifier;
-    this.itemType = baseItemType;
-    const label = `Share this ${this.reconcileItemType}`;
-    this.icon = html`<ia-icon-share style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon-share>`;
-    this.label = label;
-    this.id = 'share';
-    this.component = html`<ia-sharing-options
-      identifier="${urlIdentifier}"
-      type="book"
-      creator="${creator}"
-      description="${title}"
-      baseHost="${baseHost}"
-    ></ia-sharing-options>`;
-  }
-
-  get reconcileItemType() {
-    if (this.itemType === 'bookreader') {
-      return 'book';
-    }
-    return 'item';
-  }
-}

package/stat/BookNavigator/visual-adjustments/visual-adjustments-provider.js

@@ -1,94 +0,0 @@
-import { html } from 'lit-element';
-import '@internetarchive/icon-visual-adjustment/icon-visual-adjustment';
-import './visual-adjustments';
-
-const visualAdjustmentOptions = [{
-  id: 'brightness',
-  name: 'Adjust brightness',
-  active: false,
-  min: 0,
-  max: 150,
-  step: 1,
-  value: 100,
-}, {
-  id: 'contrast',
-  name: 'Adjust contrast',
-  active: false,
-  min: 0,
-  max: 150,
-  step: 1,
-  value: 100,
-}, {
-  id: 'invert',
-  name: 'Inverted colors (dark mode)',
-  active: false,
-}, {
-  id: 'grayscale',
-  name: 'Grayscale',
-  active: false,
-}];
-
-export default class {
-  constructor(options) {
-    const { onOptionChange = () => {}, bookContainerSelector, bookreader } = options;
-    this.onOptionChange = onOptionChange;
-    this.bookContainerSelector = bookContainerSelector;
-    this.bookreader = bookreader;
-
-    this.onAdjustmentChange = this.onAdjustmentChange.bind(this);
-    this.optionUpdateComplete = this.optionUpdateComplete.bind(this);
-    this.updateOptionsCount = this.updateOptionsCount.bind(this);
-    this.onZoomIn = this.onZoomIn.bind(this);
-    this.onZoomOut = this.onZoomOut.bind(this);
-
-    this.activeCount = 0;
-    this.icon = html`<ia-icon-visual-adjustment style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon-visual-adjustment>`;
-    this.label = 'Visual Adjustments';
-    this.menuDetails = this.updateOptionsCount();
-    this.id = 'adjustment';
-    this.component = html`
-      <ia-book-visual-adjustments
-        .options=${visualAdjustmentOptions}
-        @visualAdjustmentOptionChanged=${this.onAdjustmentChange}
-        @visualAdjustmentZoomIn=${this.onZoomIn}
-        @visualAdjustmentZoomOut=${this.onZoomOut}
-      ></ia-book-visual-adjustments>
-    `;
-  }
-
-  onZoomIn() {
-    this.bookreader.zoom(1);
-  }
-
-  onZoomOut() {
-    this.bookreader.zoom(-1);
-  }
-
-  onAdjustmentChange(event) {
-    const { detail } = event;
-    const adjustments = {
-      brightness: (value) => `brightness(${value}%)`,
-      contrast: (value) => `contrast(${value}%)`,
-      grayscale: () => 'grayscale(100%)',
-      invert: () => 'invert(100%)',
-    };
-    const filters = detail.options.reduce((values, option) => {
-      const newValue = `${option.active ? adjustments[option.id](option.value) : ''}`;
-      return newValue ? [...values, newValue] : values;
-    }, []).join(' ');
-
-    document.querySelector(this.bookContainerSelector).style.setProperty('filter', filters);
-
-    this.optionUpdateComplete(event);
-  }
-
-  optionUpdateComplete(event) {
-    this.activeCount = event.detail.activeCount;
-    this.updateOptionsCount(event);
-    this.onOptionChange(event);
-  }
-
-  updateOptionsCount() {
-    this.menuDetails = `(${this.activeCount} active)`;
-  }
-}