@internetarchive/bookreader 5.0.0-18

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

@@ -0,0 +1,360 @@
+/* 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/src/BookNavigator/visual-adjustments/visual-adjustments-provider.js

@@ -0,0 +1,93 @@
+import { html } from 'lit-element';
+import './visual-adjustments.js';
+
+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 icon="visualAdjustment" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon>`;
+    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();
+  }
+
+  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)`;
+  }
+}