@internetarchive/bookreader 5.0.0-26 → 5.0.0-29

package/stat/BookNavigator/bookmarks/bookmark-edit.js

@@ -0,0 +1,215 @@
+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';
+
+export class IABookmarkEdit extends LitElement {
+  static get properties() {
+    return {
+      bookmark: { type: Object },
+      bookmarkColors: { type: Array },
+      renderHeader: { type: Boolean },
+      showBookmark: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.bookmark = {};
+    this.bookmarkColors = [];
+    this.renderHeader = false;
+    this.showBookmark = true;
+  }
+
+  emitSaveEvent(e) {
+    e.preventDefault();
+    this.dispatchEvent(new CustomEvent('saveBookmark', {
+      detail: {
+        bookmark: this.bookmark,
+      },
+    }));
+  }
+
+  emitDeleteEvent() {
+    this.dispatchEvent(new CustomEvent('deleteBookmark', {
+      detail: {
+        id: this.bookmark.id,
+      },
+    }));
+  }
+
+  emitColorChangedEvent(colorId) {
+    this.dispatchEvent(new CustomEvent('bookmarkColorChanged', {
+      detail: {
+        bookmarkId: this.bookmark.id,
+        colorId,
+      },
+    }));
+  }
+
+  changeColorTo(id) {
+    this.bookmark.color = id;
+    this.emitColorChangedEvent(id);
+  }
+
+  updateNote(e) {
+    this.bookmark.note = e.currentTarget.value;
+  }
+
+  static get headerSection() {
+    return html`<header>
+      <h3>Edit Bookmark</h3>
+    </header>`;
+  }
+
+  bookmarkColor(color) {
+    return html`
+      <li>
+        <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>
+      </li>
+    `;
+  }
+
+  get bookmarkTemplate() {
+    return html`
+      <div class="bookmark">
+        <img src=${this.bookmark.thumbnail} />
+        <h4>Page ${this.bookmark.page}</h4>
+      </div>
+    `;
+  }
+
+  render() {
+    return html`
+      ${this.renderHeader ? IABookmarkEdit.headerSection : nothing}
+      ${this.showBookmark ? this.bookmarkTemplate : nothing}
+      <form action="" method="put" @submit=${this.emitSaveEvent}>
+        <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>
+            ${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>
+      </form>
+    `;
+  }
+
+  static get styles() {
+    const bookmarkEditCSS = css`
+    :host {
+      display: block;
+      padding: 0 1rem 2rem 1rem;
+      color: var(--primaryTextColor);
+    }
+
+    small {
+      font-style: italic;
+    }
+
+    .bookmark {
+      display: grid;
+      grid-template-columns: 37px 1fr;
+      grid-gap: 0 1rem;
+      align-items: center;
+    }
+
+    h4 {
+      margin: 0;
+      font-size: 1.4rem;
+    }
+
+    fieldset {
+      padding: 2rem 0 0 0;
+      border: none;
+    }
+
+    label {
+      display: block;
+      font-weight: bold;
+    }
+
+    p {
+      padding: 0;
+      margin: .5rem 0;
+      font-size: 1.2rem;
+      line-height: 120%;
+    }
+
+    textarea {
+      width: 100%;
+      margin-bottom: 2rem;
+      box-sizing: border-box;
+      font: normal 1.4rem "Helvetica Neue", Helvetica, Arial, sans-serif;
+      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;
+    }
+
+    li input {
+      display: none;
+    }
+
+    li label {
+      display: block;
+      min-width: 50px;
+      padding-top: .4rem;
+      text-align: center;
+      border: 1px solid transparent;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+
+    li input:checked + label {
+      border-color: var(--primaryTextColor);
+    }
+
+    input[type="submit"] {
+      background: var(--primaryCTAFill);
+      border-color: var(--primaryCTABorder);
+    }
+
+    button {
+      background: var(--primaryErrorCTAFill);
+      border-color: var(--primaryErrorCTABorder);
+    }
+
+    .button {
+      -webkit-appearance: none;
+      appearance: none;
+      padding: .5rem 1rem;
+      box-sizing: border-box;
+      color: var(--primaryTextColor);
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+
+    .actions {
+      display: grid;
+      grid-template-columns: auto auto;
+      grid-gap: 0 1rem;
+      justify-items: stretch;
+    }
+    `;
+    return [buttonCSS, bookmarkColorsCSS, bookmarkEditCSS];
+  }
+}
+customElements.define('ia-bookmark-edit', IABookmarkEdit);

package/stat/BookNavigator/bookmarks/bookmarks-list.js

@@ -0,0 +1,285 @@
+import { nothing } from 'lit-html';
+import { repeat } from 'lit-html/directives/repeat.js';
+import { css, html, LitElement } from 'lit-element';
+import './bookmark-edit.js';
+import '@internetarchive/icon-edit-pencil/icon-edit-pencil.js';
+import bookmarkColorsCSS from '../assets/bookmark-colors.js';
+
+export class IABookmarksList extends LitElement {
+  static get properties() {
+    return {
+      activeBookmarkID: { type: Number },
+      bookmarkColors: { type: Array },
+      defaultBookmarkColor: { type: Object },
+      bookmarks: { type: Object },
+      editedBookmark: { type: Object },
+      renderHeader: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.activeBookmarkID = undefined;
+    this.bookmarkColors = [];
+    this.defaultBookmarkColor = {};
+    this.bookmarks = {};
+    this.editedBookmark = {};
+    this.renderHeader = false;
+  }
+
+  emitEditEvent(e, bookmark) {
+    this.dispatchEvent(new CustomEvent('bookmarkEdited', {
+      detail: {
+        bookmark,
+      },
+    }));
+  }
+
+  emitSelectedEvent(bookmark) {
+    this.activeBookmarkID = bookmark.id;
+    this.dispatchEvent(new CustomEvent('bookmarkSelected', {
+      detail: {
+        bookmark,
+      },
+    }));
+  }
+
+  emitSaveBookmark(bookmark) {
+    this.dispatchEvent(new CustomEvent('saveBookmark', {
+      detail: {
+        bookmark,
+      },
+    }));
+  }
+
+  emitDeleteBookmark(id) {
+    this.dispatchEvent(new CustomEvent('deleteBookmark', {
+      detail: {
+        id,
+      },
+    }));
+  }
+
+  emitBookmarkColorChanged({ detail }) {
+    const { bookmarkId, colorId } = detail;
+    this.dispatchEvent(new CustomEvent('bookmarkColorChanged', {
+      detail: {
+        bookmarkId,
+        colorId,
+      },
+    }));
+  }
+
+  emitAddBookmark() {
+    this.dispatchEvent(new CustomEvent('addBookmark'));
+  }
+
+  editBookmark(e, bookmark) {
+    this.emitEditEvent(e, bookmark);
+    this.editedBookmark = this.editedBookmark === bookmark ? {} : bookmark;
+  }
+
+  saveBookmark({ detail }) {
+    const { bookmark } = detail;
+    this.editedBookmark = {};
+    this.emitSaveBookmark(bookmark);
+  }
+
+  deleteBookmark({ detail }) {
+    const { id } = detail;
+    this.editedBookmark = {};
+    this.emitDeleteBookmark(id);
+  }
+
+  bookmarkColorInfo(colorVal = 0) {
+    return this.bookmarkColors.find(labelInfo => labelInfo?.id === colorVal);
+  }
+
+  bookmarkItem(bookmark) {
+    const editMode = this.editedBookmark.id === bookmark.id;
+    const { className } = this.bookmarkColorInfo(bookmark.color);
+    const activeClass = bookmark.id === this.activeBookmarkID ? 'active' : '';
+    return html`
+      <li
+        @click=${() => this.emitSelectedEvent(bookmark)}
+        tabindex="0"
+        data-pageIndex=${bookmark.id}
+      >
+        <div class="separator"></div>
+        <div class="content ${activeClass}">
+          <button
+            class="edit"
+            @click=${e => this.editBookmark(e, bookmark)}
+            title="Edit this bookmark"
+          >
+            <ia-icon-edit-pencil></ia-icon-edit-pencil>
+          </button>
+          <h4>
+            <icon-bookmark class=${className}></icon-bookmark>
+            <span> Page ${bookmark.page}</span>
+          </h4>
+          ${!editMode && bookmark.note ? html`<p>${bookmark.note}</p>` : nothing}
+          ${editMode ? this.editBookmarkComponent : nothing}
+        </div>
+      </li>
+    `;
+  }
+
+  get editBookmarkComponent() {
+    const showBookmark = false;
+    return html`
+      <ia-bookmark-edit
+        .bookmark=${this.editedBookmark}
+        .bookmarkColors=${this.bookmarkColors}
+        .defaultBookmarkColor=${this.defaultBookmarkColor}
+        .showBookmark=${showBookmark}
+        @saveBookmark=${this.saveBookmark}
+        @deleteBookmark=${this.deleteBookmark}
+        @bookmarkColorChanged=${this.emitBookmarkColorChanged}
+      ></ia-bookmark-edit>
+    `;
+  }
+
+  sortBookmarks() {
+    const sortedKeys = Object.keys(this.bookmarks).sort((a, b) => {
+      if (+a > +b) { return 1; }
+      if (+a < +b) { return -1; }
+      return 0;
+    });
+    const sortedBookmarks = sortedKeys.map(key => this.bookmarks[key]);
+    return sortedBookmarks;
+  }
+
+  get bookmarksCount() {
+    const count = this.bookmarks.length;
+    return html`<small>(${count})</small>`;
+  }
+
+  get headerSection() {
+    return html`<header>
+      <h3>
+        Bookmarks
+        ${this.bookmarks.length ? this.bookmarksCount : nothing}
+      </h3>
+    </header>`;
+  }
+
+  get bookmarkslist() {
+    const sortedBookmarks = this.sortBookmarks();
+    const bookmarks = repeat(sortedBookmarks, bookmark => bookmark?.id, this.bookmarkItem.bind(this));
+    return html`
+      <ul>
+        ${bookmarks}
+        <div class="separator"></div>
+      </ul>
+    `;
+  }
+
+  render() {
+    return html`
+      ${this.renderHeader ? this.headerSection : nothing}
+      ${Object.keys(this.bookmarks).length ? this.bookmarkslist : nothing}
+    `;
+  }
+
+  static get styles() {
+    const main = css`
+      :host {
+        display: block;
+        overflow-y: auto;
+        box-sizing: border-box;
+        color: var(--primaryTextColor);
+        margin-bottom: 2rem;
+        --activeBorderWidth: 2px;
+      }
+
+      icon-bookmark {
+        width: 16px;
+        height: 24px;
+      }
+
+      .separator {
+        background-color: var(--secondaryBGColor);
+        width: 98%;
+        margin: 1px auto;
+        height: 1px;
+      }
+
+      small {
+        font-style: italic;
+      }
+
+      h4 {
+        margin: 0;
+        font-size: 1.4rem;
+      }
+      h4 * {
+        display: inline-block;
+      }
+      h4 icon-bookmark {
+        vertical-align: bottom;
+      }
+      h4 span {
+        vertical-align: top;
+        padding-top: 1%;
+      }
+
+      p {
+        padding: 0;
+        margin: 5px 0 0 0;
+        width: 98%;
+        overflow-wrap: break-word;
+      }
+
+      ia-bookmark-edit {
+        margin: 5px 5px 3px 6px;
+      }
+
+      ul {
+        padding: 0;
+        list-style: none;
+        margin: var(--activeBorderWidth) 0.5rem 1rem 0;
+      }
+      ul > li:first-child .separator {
+        display: none;
+      }
+      li {
+        cursor: pointer;
+        outline: none;
+        position: relative;
+      }
+      li .content {
+        padding: 2px 0 4px 2px;
+        border: var(--activeBorderWidth) solid transparent;
+        padding: .2rem 0 .4rem .2rem;
+      }
+      li .content.active {
+        border: var(--activeBorderWidth) solid #538bc5;
+      }
+      li button.edit {
+        padding: 5px 2px 0 0;
+        background: transparent;
+        cursor: pointer;
+        height: 40px;
+        width: 40px;
+        position: absolute;
+        right: 2px;
+        top: 2px;
+        text-align: right;
+        -webkit-appearance: none;
+        appearance: none;
+        outline: none;
+        box-sizing: border-box;
+        border: none;
+      }
+      li button.edit > * {
+        display: block;
+        height: 100%;
+        width: 100%;
+      }
+    `;
+
+    return [main, bookmarkColorsCSS];
+  }
+}
+customElements.define('ia-bookmarks-list', IABookmarksList);

package/stat/BookNavigator/bookmarks/bookmarks-loginCTA.js

@@ -0,0 +1,28 @@
+import { LitElement, html } from 'lit-element';
+import buttonStyles from '../assets/button-base.js';
+
+class BookmarksLogin extends LitElement {
+  static get properties() {
+    return {
+      url: { type: String }
+    };
+  }
+
+  static get styles() {
+    return buttonStyles;
+  }
+
+  constructor() {
+    super();
+    this.url = 'https://archive.org/account/login';
+  }
+  render() {
+
+    return html`
+      <p>A free account is required to save and access bookmarks.</p>
+      <a class="ia-button link primary" href="${this.url}">Log in</a>
+    `;
+  }
+}
+
+customElements.define('bookmarks-login', BookmarksLogin);

package/stat/BookNavigator/bookmarks/bookmarks-provider.js

@@ -0,0 +1,56 @@
+import { html } from 'lit-element';
+import '../delete-modal-actions.js';
+import './bookmark-button.js';
+import './ia-bookmarks.js';
+
+import './bookmark-edit.js';
+import './bookmarks-list.js';
+import { IAIconBookmark } from '@internetarchive/icon-bookmark';
+
+customElements.define('icon-bookmark', IAIconBookmark);
+
+export default class BookmarksProvider {
+  constructor(options) {
+    console.log("BookmarksProvider", {...options});
+    const { bookreader, modal } = options;
+    this.modal = options.modal;
+    const boundOptions = Object.assign(this, options, {loginClicked: this.bookmarksLoginClicked});
+    this.component = document.createElement('ia-bookmarks');
+    this.component.bookreader = bookreader;
+    this.component.options = boundOptions;
+    this.component.displayMode = this.component.options.displayMode;
+    this.component.modal = modal;
+
+    this.bindEvents();
+
+    this.icon = html`<icon-bookmark state="hollow" style="--iconWidth: 16px; --iconHeight: 24px;"></icon-bookmark>`;
+    this.label = 'Bookmarks';
+    this.id = 'bookmarks';
+    this.component.setup();
+    this.updateMenu(this.component.bookmarks.length);
+  }
+
+  updateMenu(count) {
+    this.menuDetails = `(${count})`;
+  }
+
+  bindEvents() {
+    this.component.addEventListener('bookmarksChanged', this.bookmarksChanged.bind(this));
+  }
+
+  bookmarksChanged({ detail }) {
+    const bookmarksLength = Object.keys(detail.bookmarks).length;
+    this.updateMenu(bookmarksLength);
+    this.onBookmarksChanged(detail.bookmarks, detail.showSidePanel);
+  }
+
+  bookmarksLoginClicked() {
+    if (window.archive_analytics) {
+      window.archive_analytics?.send_event_no_sampling(
+        'BookReader',
+        `BookmarksLogin`,
+        window.location.path,
+      );
+    }
+  }
+}