@internetarchive/bookreader 5.0.0-38 → 5.0.0-39

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

@@ -1,64 +0,0 @@
-import { LitElement, html, css } from 'lit-element';
-
-export default class BookmarkButton extends LitElement {
-  static get styles() {
-    return css`
-      button {
-        -webkit-appearance: none;
-        appearance: none;
-        outline: 0;
-        border: none;
-        padding: 0;
-        height: 4rem;
-        width: 4rem;
-        background: transparent;
-        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 > * {
-        display: block;
-        position: absolute;
-        top: 0.2rem;
-      }
-      button.left > * {
-        left: 0.2rem;
-      }
-
-      button.right > * {
-        right: 0.2rem;
-      }
-    `;
-  }
-
-  static get properties() {
-    return {
-      side: { type: String },
-      state: { type: String },
-    };
-  }
-
-  constructor() {
-    super();
-    this.state = 'hollow';
-  }
-
-  handleClick(e) {
-    e.preventDefault();
-    this.dispatchEvent(new CustomEvent('bookmarkButtonClicked'));
-  }
-
-  get title() {
-    return `${this.state === 'hollow' ? 'Add' : 'Remove'} bookmark`;
-  }
-
-  render() {
-    const position = this.side || 'right';
-    return html`
-      <button title=${this.title} @click=${this.handleClick} class=${position}>
-        <icon-bookmark state=${this.state}></icon-bookmark>
-      </button>
-    `;
-  }
-}
-
-customElements.define('bookmark-button', BookmarkButton);

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

@@ -1,215 +0,0 @@
-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

@@ -1,285 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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,
-      );
-    }
-  }
-}