@internetarchive/bookreader 5.0.0-11 → 5.0.0-110

package/src/ia-bookreader/viewable-files.js

@@ -0,0 +1,98 @@
+import { html } from 'lit';
+
+import { viewableFilesIcon  } from '@internetarchive/ia-item-navigator/dist/src/menus/viewable-files.js';
+import '@internetarchive/ia-item-navigator/dist/src/menus/viewable-files.js';
+
+/**
+ * * @typedef { 'title_asc' | 'title_desc' | 'default'} SortTypesT
+ */
+const sortTypes = {
+  title_asc: 'title_asc',
+  title_desc: 'title_desc',
+  default: 'default',
+};
+export default class ViewableFilesProvider {
+  /**
+   * @param {object} options
+   * @param {import('../BookReader').default} options.bookreader
+   * @param {string} options.baseHost
+   * @param {function} options.onProviderChange
+   */
+  constructor({ baseHost, bookreader, onProviderChange }) {
+    /** @type {import('../BookReader').default} */
+    this.bookreader = bookreader;
+    this.onProviderChange = onProviderChange;
+    this.baseHost = baseHost;
+
+    const files = bookreader.options.multipleBooksList.by_subprefix;
+    this.viewableFiles = Object.keys(files).map(item => files[item]);
+    this.volumeCount = Object.keys(files).length;
+
+    this.id = "volumes";
+    this.label = `Viewable files (${this.volumeCount})`;
+    this.icon = html`${viewableFilesIcon}`;
+    this.sortOrderBy = sortTypes.default;
+
+    this.component = document.createElement("iaux-in-viewable-files-panel");
+    this.component.addSortToUrl = true;
+    this.component.subPrefix = bookreader.options.subPrefix || "";
+    this.component.baseHost = baseHost;
+    this.component.fileList = [...this.viewableFiles];
+
+    this.sortFilesComponent = document.createElement("iaux-in-sort-files-button");
+    this.sortFilesComponent.fileListRaw = this.viewableFiles;
+    this.sortFilesComponent.addEventListener('fileListSorted', (e) => this.handleFileListSorted(e));
+    this.actionButton = this.sortFilesComponent;
+
+    // get sort state from query param
+    if (this.bookreader.urlPlugin) {
+      this.bookreader.urlPlugin.pullFromAddressBar();
+
+      const urlSortValue = this.bookreader.urlPlugin.getUrlParam('sort');
+      if (urlSortValue === sortTypes.title_asc || urlSortValue === sortTypes.title_desc) {
+        this.sortOrderBy = urlSortValue;
+      }
+    }
+
+    this.sortFilesComponent.sortVolumes(this.sortOrderBy);
+
+    this.onProviderChange(this.bookreader);
+  }
+
+  /** @param { SortTypesT } sortType */
+  async handleFileListSorted(event) {
+    const { sortType, sortedFiles } = event.detail;
+
+    this.viewableFiles = sortedFiles;
+    this.sortOrderBy = sortType;
+
+    // update the component
+    this.component.fileList = [...this.viewableFiles];
+    await this.component.updateComplete;
+
+    if (this.bookreader.urlPlugin) {
+      this.bookreader.urlPlugin.pullFromAddressBar();
+      if (this.sortOrderBy !== sortTypes.default) {
+        this.bookreader.urlPlugin.setUrlParam('sort', this.sortOrderBy);
+      } else {
+        this.bookreader.urlPlugin.removeUrlParam('sort');
+      }
+    }
+
+    this.onProviderChange(this.bookreader);
+
+    this.multipleFilesClicked(this.sortOrderBy);
+  }
+
+  /**
+   * @param { SortTypesT } orderBy
+   */
+  multipleFilesClicked(orderBy) {
+    window.archive_analytics?.send_event(
+      'BookReader',
+      `VolumesSort|${orderBy}`,
+      window.location.path,
+    );
+  }
+
+}

package/src/{BookNavigator → ia-bookreader}/visual-adjustments/visual-adjustments-provider.js

@@ -1,4 +1,5 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
+import '@internetarchive/icon-visual-adjustment/icon-visual-adjustment.js';
 import './visual-adjustments.js';
 
 const visualAdjustmentOptions = [{
@@ -6,32 +7,31 @@ const visualAdjustmentOptions = [{
   name: 'Adjust brightness',
   active: false,
   min: 0,
-  max: 150,
+  max: 200,
   step: 1,
-  value: 100,
+  value: 120,
 }, {
   id: 'contrast',
   name: 'Adjust contrast',
   active: false,
   min: 0,
-  max: 150,
+  max: 200,
   step: 1,
-  value: 100,
+  value: 120,
 }, {
   id: 'invert',
-  name: 'Inverted colors (dark mode)',
+  name: 'Invert colors (dark mode)',
   active: false,
 }, {
   id: 'grayscale',
-  name: 'Grayscale',
+  name: 'Convert to grayscale',
   active: false,
 }];
 
-export default class {
-  constructor(options) {
-    const { onOptionChange = () => {}, bookContainerSelector, bookreader } = options;
-    this.onOptionChange = onOptionChange;
-    this.bookContainerSelector = bookContainerSelector;
+export default class VisualAdjustmentsProvider {
+  constructor({ onProviderChange, bookreader }) {
+    this.onProviderChange = onProviderChange;
+    this.bookContainer = bookreader.refs.$brContainer;
     this.bookreader = bookreader;
 
     this.onAdjustmentChange = this.onAdjustmentChange.bind(this);
@@ -41,10 +41,10 @@ export default class {
     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.icon = html`<ia-icon-visual-adjustment aria-hidden="true" role="presentation" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon-visual-adjustment>`;
     this.label = 'Visual Adjustments';
     this.menuDetails = this.updateOptionsCount();
-    this.id = 'adjustment';
+    this.id = 'visualAdjustments';
     this.component = html`
       <ia-book-visual-adjustments
         .options=${visualAdjustmentOptions}
@@ -60,7 +60,7 @@ export default class {
   }
 
   onZoomOut() {
-    this.bookreader.zoom();
+    this.bookreader.zoom(-1);
   }
 
   onAdjustmentChange(event) {
@@ -76,7 +76,7 @@ export default class {
       return newValue ? [...values, newValue] : values;
     }, []).join(' ');
 
-    document.querySelector(this.bookContainerSelector).style.setProperty('filter', filters);
+    this.bookContainer.css('filter', filters);
 
     this.optionUpdateComplete(event);
   }
@@ -84,7 +84,7 @@ export default class {
   optionUpdateComplete(event) {
     this.activeCount = event.detail.activeCount;
     this.updateOptionsCount(event);
-    this.onOptionChange(event);
+    this.onProviderChange();
   }
 
   updateOptionsCount() {

package/src/{BookNavigator → ia-bookreader}/visual-adjustments/visual-adjustments.js

@@ -1,9 +1,9 @@
-import { css, html, LitElement } from "lit-element";
-import { repeat } from "lit-html/directives/repeat.js";
-import { nothing } from "lit-html";
-import checkmarkIcon from '../assets/icon_checkmark.js';
-import "@internetarchive/icon-magnify-minus/icon-magnify-minus";
-import "@internetarchive/icon-magnify-plus/icon-magnify-plus";
+import { css, html, LitElement, nothing } from "lit";
+import { classMap } from 'lit/directives/class-map.js';
+import { repeat } from "lit/directives/repeat.js";
+import { sharedStyles } from '../../css/sharedStyles.js';
+import "@internetarchive/icon-magnify-minus/icon-magnify-minus.js";
+import "@internetarchive/icon-magnify-plus/icon-magnify-plus.js";
 
 const namespacedEvent = (eventName) => `visualAdjustment${eventName}`;
 
@@ -43,7 +43,7 @@ export class IABookVisualAdjustments extends LitElement {
   get activeOptions() {
     return this.options.reduce(
       (results, option) => (option.active ? [...results, option.id] : results),
-      []
+      [],
     );
   }
 
@@ -71,7 +71,7 @@ export class IABookVisualAdjustments extends LitElement {
         bubbles: true,
         composed: true,
         detail,
-      })
+      }),
     );
   }
 
@@ -93,12 +93,19 @@ export class IABookVisualAdjustments extends LitElement {
   changeActiveStateFor(optionName) {
     const updatedOptions = [...this.options];
     const checkedOption = updatedOptions.find(
-      (option) => option.id === optionName
+      (option) => option.id === optionName,
     );
     checkedOption.active = !checkedOption.active;
     this.options = updatedOptions;
     this.activeCount = this.activeOptions.length;
     this.emitOptionChangedEvent(checkedOption.id);
+    if (checkedOption.active && checkedOption.value !== undefined) {
+      // move focus to the range input
+      const rangeInput = this.shadowRoot.querySelector(`input[name="${checkedOption.id}_range"]`);
+      requestAnimationFrame(() => {
+        rangeInput?.focus();
+      });
+    }
   }
 
   setRangeValue(id, value) {
@@ -110,7 +117,8 @@ export class IABookVisualAdjustments extends LitElement {
   /* render */
   rangeSlider(option) {
     return html`
-      <div class=${`range${option.active ? " visible" : ""}`}>
+      <label class=${`range${option.active ? " visible" : ""}`}>
+        <span class="sr-only">${option.name}</span>
         <input
           type="range"
           name="${option.id}_range"
@@ -118,30 +126,30 @@ export class IABookVisualAdjustments extends LitElement {
           max=${option.max || 100}
           step=${option.step || 1}
           .value=${option.value}
+          aria-valuetext=${`${option.value}%`}
           @input=${(e) => this.setRangeValue(option.id, e.target.value)}
           @change=${() => this.emitOptionChangedEvent()}
         />
-        <p>${option.value}%</p>
-      </div>
+        <span aria-hidden="true">${option.value}%</span>
+      </label>
     `;
   }
 
   adjustmentCheckbox(option) {
-    const formID = `adjustment_${option.id}`;
-    return html`<li>
-      <label for="${formID}">
-        <span class="name">${option.name}</span>
-        <input
-          type="checkbox"
-          name="${formID}"
-          id="${formID}"
-          @change=${() => this.changeActiveStateFor(option.id)}
-          ?checked=${option.active}
-        />
-        <span class="icon"></span>
-      </label>
-      ${option.value !== undefined ? this.rangeSlider(option) : nothing}
-    </li>`;
+    return html`
+      <div
+        class="adjustment-option ${classMap({active: option.active, 'has-range': option.value !== undefined})}">
+        <label class="checkbox-label">
+          ${option.name}
+          <input
+            type="checkbox"
+            @change=${() => this.changeActiveStateFor(option.id)}
+            ?checked=${option.active}
+          />
+        </label>
+        ${option.value !== undefined ? this.rangeSlider(option) : nothing}
+      </div>
+    `;
   }
 
   get headerSection() {
@@ -157,12 +165,12 @@ export class IABookVisualAdjustments extends LitElement {
 
   get zoomControls() {
     return html`
-      <h4>Zoom</h4>
-      <button class="zoom_out" @click=${this.emitZoomOut} title="zoom out">
-        <ia-icon-magnify-minus></ia-icon-magnify-minus>
+      <h4>Adjust zoom</h4>
+      <button class="zoom_out" @click=${this.emitZoomOut} title="Zoom out" aria-label="Zoom out">
+        <ia-icon-magnify-minus aria-hidden="true" role="presentation"></ia-icon-magnify-minus>
       </button>
-      <button class="zoom_in" @click=${this.emitZoomIn} title="zoom in">
-        <ia-icon-magnify-plus></ia-icon-magnify-plus>
+      <button class="zoom_in" @click=${this.emitZoomIn} title="Zoom in" aria-label="Zoom in">
+        <ia-icon-magnify-plus aria-hidden="true" role="presentation"></ia-icon-magnify-plus>
       </button>
     `;
   }
@@ -171,21 +179,20 @@ export class IABookVisualAdjustments extends LitElement {
   render() {
     return html`
       ${this.headerSection}
-      <ul>
-        ${repeat(this.options, (option) => option.id, this.adjustmentCheckbox.bind(this))}
-      </ul>
+      ${repeat(this.options, (option) => option.id, this.adjustmentCheckbox.bind(this))}
       ${this.showZoomControls ? this.zoomControls : nothing}
     `;
   }
 
   static get styles() {
-    return css`
+    const main = css`
     :host {
       display: block;
       height: 100%;
       overflow-y: auto;
       font-size: 1.4rem;
       box-sizing: border-box;
+      padding: 10px 10px 0 0;
     }
 
     header {
@@ -207,49 +214,48 @@ export class IABookVisualAdjustments extends LitElement {
       font-style: italic;
     }
 
-    ul {
-      padding: 1rem 2rem 0 0;
-      list-style: none;
-      margin-top: 0;
+    .adjustment-option {
+      border: 2px solid transparent;
+      border-radius: 4px;
+      margin-bottom: 4px;
     }
-
-    [type="checkbox"] {
-      display: none;
+    .adjustment-option.has-range.active {
+      border: 2px solid rgba(255, 255, 255, 0.2);
     }
 
-    label {
+    .checkbox-label {
       display: flex;
       justify-content: space-between;
-      align-items: baseline;
+      align-items: center;
       font-size: 1.4rem;
       font-weight: bold;
-      line-height: 150%;
-      vertical-align: middle;
+      cursor: pointer;
+      padding: 6px 8px;
+      transition: background-color 0.2s;
+      border-radius: inherit;
     }
-
-    .icon {
-      display: inline-block;
-      width: 14px;
-      height: 14px;
-      margin-left: .7rem;
-      border: 1px solid var(--primaryTextColor);
-      border-radius: 2px;
-      background: var(--activeButtonBg) 50% 50% no-repeat;
+    .checkbox-label:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+    .adjustment-option.has-range.active > .checkbox-label {
+      border-radius: 4px 4px 0 0;
     }
-    :checked + .icon {
-      background-image: url('${checkmarkIcon}');
+
+    [type="checkbox"] {
+      transform: scale(1.5);
     }
 
     .range {
       display: none;
-      padding-top: .5rem;
+      padding: 10px;
+      align-items: center;
+      gap: 10px;
     }
     .range.visible {
       display: flex;
     }
-
-    .range p {
-      margin-left: 1rem;
+    .range input[type="range"] {
+      flex: 1;
     }
 
     h4 {
@@ -262,19 +268,21 @@ export class IABookVisualAdjustments extends LitElement {
       -webkit-appearance: none;
       appearance: none;
       border: none;
-      border-radius: 0;
       background: transparent;
-      outline: none;
       cursor: pointer;
       --iconFillColor: var(--primaryTextColor);
       --iconStrokeColor: var(--primaryTextColor);
       height: 4rem;
       width: 4rem;
+      transition: background-color 0.2s;
+      border-radius: 4px;
     }
 
-    button * {
-      display: inline-block;
-    }`;
+    button:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+    `;
+    return [sharedStyles, main];
   }
 }
 customElements.define('ia-book-visual-adjustments', IABookVisualAdjustments);

package/src/{BookNavigator → plugins}/bookmarks/bookmark-button.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
 
 export default class BookmarkButton extends LitElement {
   static get styles() {
@@ -12,7 +12,7 @@ export default class BookmarkButton extends LitElement {
         height: 4rem;
         width: 4rem;
         background: transparent;
-        cursor: url('/images/bookreader/bookmark-add.png'), pointer;
+        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 16 24' width='16'%3E%3Cg fill='%23333' fill-rule='evenodd'%3E%3Cpath d='m15 0c.5522847 0 1 .44771525 1 1v23l-8-5.4545455-8 5.4545455v-23c0-.55228475.44771525-1 1-1zm-2 2h-10c-.51283584 0-.93550716.38604019-.99327227.88337887l-.00672773.11662113v18l6-4.3181818 6 4.3181818v-18c0-.51283584-.3860402-.93550716-.8833789-.99327227z'/%3E%3Cpath d='m8.75 6v2.25h2.25v1.5h-2.25v2.25h-1.5v-2.25h-2.25v-1.5h2.25v-2.25z' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E"), pointer;
         position: relative;
       }
       button > * {
@@ -40,6 +40,7 @@ export default class BookmarkButton extends LitElement {
   constructor() {
     super();
     this.state = 'hollow';
+    this.side = undefined;
   }
 
   handleClick(e) {
@@ -55,7 +56,7 @@ export default class BookmarkButton extends LitElement {
     const position = this.side || 'right';
     return html`
       <button title=${this.title} @click=${this.handleClick} class=${position}>
-        <icon-bookmark state=${this.state}></icon-bookmark>
+        <icon-bookmark state=${this.state} aria-hidden="true"></icon-bookmark>
       </button>
     `;
   }

package/src/{BookNavigator/assets → plugins/bookmarks}/bookmark-colors.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
   .blue {

package/src/{BookNavigator → plugins}/bookmarks/bookmark-edit.js

@@ -1,8 +1,7 @@
-import { nothing } from 'lit-html';
-import { repeat } from 'lit-html/directives/repeat.js';
-import { css, html, LitElement } from 'lit-element';
-import bookmarkColorsCSS from '../assets/bookmark-colors.js';
-import buttonCSS from '../assets/button-base.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { css, html, LitElement, nothing } from 'lit';
+import bookmarkColorsCSS from './bookmark-colors.js';
+import buttonCSS from '../../css/button-base.js';
 
 export class IABookmarkEdit extends LitElement {
   static get properties() {
@@ -65,12 +64,12 @@ export class IABookmarkEdit extends LitElement {
 
   bookmarkColor(color) {
     return html`
-      <li>
+      <div class="color-option">
         <input type="radio" name="color" id="color_${color.id}" .value=${color.id} @change=${() => this.changeColorTo(color.id)} ?checked=${this.bookmark.color === color.id}>
-        <label for="color_${color.id}">
-          <icon-bookmark class=${color.className}></icon-bookmark>
+        <label for="color_${color.id}" title=${color.className}>
+          <icon-bookmark class=${color.className} aria-hidden="true"></icon-bookmark>
         </label>
-      </li>
+      </div>
     `;
   }
 
@@ -88,18 +87,18 @@ export class IABookmarkEdit extends LitElement {
       ${this.renderHeader ? IABookmarkEdit.headerSection : nothing}
       ${this.showBookmark ? this.bookmarkTemplate : nothing}
       <form action="" method="put" @submit=${this.emitSaveEvent}>
+        <label for="note">Note <small>(optional)</small></label>
+        <textarea rows="4" cols="80" name="note" id="note" @change=${this.updateNote}>${this.bookmark.note}</textarea>
         <fieldset>
-          <label for="note">Note <small>(optional)</small></label>
-          <textarea rows="4" cols="80" name="note" id="note" @change=${this.updateNote}>${this.bookmark.note}</textarea>
-          <label for="color">Bookmark color</label>
-          <ul>
+          <legend>Bookmark color</legend>
+          <div class="color-options">
             ${repeat(this.bookmarkColors, color => color.id, this.bookmarkColor.bind(this))}
-          </ul>
-          <div class="actions">
-            <button type="button" class="ia-button cancel" @click=${this.emitDeleteEvent}>Delete</button>
-            <input class="ia-button" type="submit" value="Save">
           </div>
         </fieldset>
+        <div class="actions">
+          <button type="button" class="ia-button cancel" @click=${this.emitDeleteEvent}>Delete</button>
+          <input class="ia-button" type="submit" value="Save">
+        </div>
       </form>
     `;
   }
@@ -129,11 +128,11 @@ export class IABookmarkEdit extends LitElement {
     }
 
     fieldset {
-      padding: 2rem 0 0 0;
+      padding: 0;
       border: none;
     }
 
-    label {
+    label, legend {
       display: block;
       font-weight: bold;
     }
@@ -153,21 +152,24 @@ export class IABookmarkEdit extends LitElement {
       resize: vertical;
     }
 
-    ul {
-      display: grid;
-      grid-template-columns: repeat(3, auto);
-      grid-gap: 0 2rem;
-      justify-content: start;
-      padding: 1rem 0 0 0;
-      margin: 0 0 2rem 0;
-      list-style: none;
+    .color-options {
+      display: flex;
+      gap: 10px;
+    }
+
+    .color-option {
+      position: relative;
     }
 
-    li input {
-      display: none;
+    .color-option input {
+      position: absolute;
+      opacity: 0;
+      width: 0;
+      height: 0;
+      pointer-events: none;
     }
 
-    li label {
+    .color-option label {
       display: block;
       min-width: 50px;
       padding-top: .4rem;
@@ -177,10 +179,19 @@ export class IABookmarkEdit extends LitElement {
       cursor: pointer;
     }
 
-    li input:checked + label {
+    .color-option input:checked + label {
       border-color: var(--primaryTextColor);
     }
 
+    .color-option input:focus + label {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+
+    .color-option input:focus:not(:focus-visible) + label {
+      outline: none;
+    }
+
     input[type="submit"] {
       background: var(--primaryCTAFill);
       border-color: var(--primaryCTABorder);
@@ -203,6 +214,7 @@ export class IABookmarkEdit extends LitElement {
     }
 
     .actions {
+      margin-top: 20px;
       display: grid;
       grid-template-columns: auto auto;
       grid-gap: 0 1rem;