@internetarchive/bookreader 5.0.0-88-alpha.11 → 5.0.0-89

package/dist/esm/BookNavigator/bookmarks/bookmark-edit.js

@@ -1,78 +0,0 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-import { repeat } from 'lit/directives/repeat.js';
-import { css, html, LitElement, nothing } from 'lit';
-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(_templateObject || (_templateObject = _taggedTemplateLiteral(["<header>\n      <h3>Edit Bookmark</h3>\n    </header>"])));
-  }
-  bookmarkColor(color) {
-    return html(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      <li>\n        <input type=\"radio\" name=\"color\" id=\"color_", "\" .value=", " @change=", " ?checked=", ">\n        <label for=\"color_", "\">\n          <icon-bookmark class=", "></icon-bookmark>\n        </label>\n      </li>\n    "])), color.id, color.id, () => this.changeColorTo(color.id), this.bookmark.color === color.id, color.id, color.className);
-  }
-  get bookmarkTemplate() {
-    return html(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      <div class=\"bookmark\">\n        <img src=", " />\n        <h4>Page ", "</h4>\n      </div>\n    "])), this.bookmark.thumbnail, this.bookmark.page);
-  }
-  render() {
-    return html(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      ", "\n      ", "\n      <form action=\"\" method=\"put\" @submit=", ">\n        <fieldset>\n          <label for=\"note\">Note <small>(optional)</small></label>\n          <textarea rows=\"4\" cols=\"80\" name=\"note\" id=\"note\" @change=", ">", "</textarea>\n          <label for=\"color\">Bookmark color</label>\n          <ul>\n            ", "\n          </ul>\n          <div class=\"actions\">\n            <button type=\"button\" class=\"ia-button cancel\" @click=", ">Delete</button>\n            <input class=\"ia-button\" type=\"submit\" value=\"Save\">\n          </div>\n        </fieldset>\n      </form>\n    "])), this.renderHeader ? IABookmarkEdit.headerSection : nothing, this.showBookmark ? this.bookmarkTemplate : nothing, this.emitSaveEvent, this.updateNote, this.bookmark.note, repeat(this.bookmarkColors, color => color.id, this.bookmarkColor.bind(this)), this.emitDeleteEvent);
-  }
-  static get styles() {
-    var bookmarkEditCSS = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    :host {\n      display: block;\n      padding: 0 1rem 2rem 1rem;\n      color: var(--primaryTextColor);\n    }\n\n    small {\n      font-style: italic;\n    }\n\n    .bookmark {\n      display: grid;\n      grid-template-columns: 37px 1fr;\n      grid-gap: 0 1rem;\n      align-items: center;\n    }\n\n    h4 {\n      margin: 0;\n      font-size: 1.4rem;\n    }\n\n    fieldset {\n      padding: 2rem 0 0 0;\n      border: none;\n    }\n\n    label {\n      display: block;\n      font-weight: bold;\n    }\n\n    p {\n      padding: 0;\n      margin: .5rem 0;\n      font-size: 1.2rem;\n      line-height: 120%;\n    }\n\n    textarea {\n      width: 100%;\n      margin-bottom: 2rem;\n      box-sizing: border-box;\n      font: normal 1.4rem \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n      resize: vertical;\n    }\n\n    ul {\n      display: grid;\n      grid-template-columns: repeat(3, auto);\n      grid-gap: 0 2rem;\n      justify-content: start;\n      padding: 1rem 0 0 0;\n      margin: 0 0 2rem 0;\n      list-style: none;\n    }\n\n    li input {\n      display: none;\n    }\n\n    li label {\n      display: block;\n      min-width: 50px;\n      padding-top: .4rem;\n      text-align: center;\n      border: 1px solid transparent;\n      border-radius: 4px;\n      cursor: pointer;\n    }\n\n    li input:checked + label {\n      border-color: var(--primaryTextColor);\n    }\n\n    input[type=\"submit\"] {\n      background: var(--primaryCTAFill);\n      border-color: var(--primaryCTABorder);\n    }\n\n    button {\n      background: var(--primaryErrorCTAFill);\n      border-color: var(--primaryErrorCTABorder);\n    }\n\n    .button {\n      -webkit-appearance: none;\n      appearance: none;\n      padding: .5rem 1rem;\n      box-sizing: border-box;\n      color: var(--primaryTextColor);\n      border: none;\n      border-radius: 4px;\n      cursor: pointer;\n    }\n\n    .actions {\n      display: grid;\n      grid-template-columns: auto auto;\n      grid-gap: 0 1rem;\n      justify-items: stretch;\n    }\n    "])));
-    return [buttonCSS, bookmarkColorsCSS, bookmarkEditCSS];
-  }
-}
-customElements.define('ia-bookmark-edit', IABookmarkEdit);

package/dist/esm/BookNavigator/bookmarks/bookmarks-list.js

@@ -1,160 +0,0 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-import { repeat } from 'lit/directives/repeat.js';
-import { css, html, LitElement, nothing } from 'lit';
-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(_ref) {
-    var {
-      detail
-    } = _ref;
-    var {
-      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(_ref2) {
-    var {
-      detail
-    } = _ref2;
-    var {
-      bookmark
-    } = detail;
-    this.editedBookmark = {};
-    this.emitSaveBookmark(bookmark);
-  }
-  deleteBookmark(_ref3) {
-    var {
-      detail
-    } = _ref3;
-    var {
-      id
-    } = detail;
-    this.editedBookmark = {};
-    this.emitDeleteBookmark(id);
-  }
-  bookmarkColorInfo() {
-    var colorVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    return this.bookmarkColors.find(labelInfo => (labelInfo === null || labelInfo === void 0 ? void 0 : labelInfo.id) === colorVal);
-  }
-  bookmarkItem(bookmark) {
-    var editMode = this.editedBookmark.id === bookmark.id;
-    var {
-      className
-    } = this.bookmarkColorInfo(bookmark.color);
-    var activeClass = bookmark.id === this.activeBookmarkID ? 'active' : '';
-    return html(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      <li\n        @click=", "\n        tabindex=\"0\"\n        data-pageIndex=", "\n      >\n        <div class=\"separator\"></div>\n        <div class=\"content ", "\">\n          <button\n            class=\"edit\"\n            @click=", "\n            title=\"Edit this bookmark\"\n          >\n            <ia-icon-edit-pencil></ia-icon-edit-pencil>\n          </button>\n          <h4>\n            <icon-bookmark class=", "></icon-bookmark>\n            <span> Page ", "</span>\n          </h4>\n          ", "\n          ", "\n        </div>\n      </li>\n    "])), () => this.emitSelectedEvent(bookmark), bookmark.id, activeClass, e => this.editBookmark(e, bookmark), className, bookmark.page, !editMode && bookmark.note ? html(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["<p>", "</p>"])), bookmark.note) : nothing, editMode ? this.editBookmarkComponent : nothing);
-  }
-  get editBookmarkComponent() {
-    var showBookmark = false;
-    return html(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      <ia-bookmark-edit\n        .bookmark=", "\n        .bookmarkColors=", "\n        .defaultBookmarkColor=", "\n        .showBookmark=", "\n        @saveBookmark=", "\n        @deleteBookmark=", "\n        @bookmarkColorChanged=", "\n      ></ia-bookmark-edit>\n    "])), this.editedBookmark, this.bookmarkColors, this.defaultBookmarkColor, showBookmark, this.saveBookmark, this.deleteBookmark, this.emitBookmarkColorChanged);
-  }
-  sortBookmarks() {
-    var sortedKeys = Object.keys(this.bookmarks).sort((a, b) => {
-      if (+a > +b) {
-        return 1;
-      }
-      if (+a < +b) {
-        return -1;
-      }
-      return 0;
-    });
-    var sortedBookmarks = sortedKeys.map(key => this.bookmarks[key]);
-    return sortedBookmarks;
-  }
-  get bookmarksCount() {
-    var count = this.bookmarks.length;
-    return html(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["<small>(", ")</small>"])), count);
-  }
-  get headerSection() {
-    return html(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["<header>\n      <h3>\n        Bookmarks\n        ", "\n      </h3>\n    </header>"])), this.bookmarks.length ? this.bookmarksCount : nothing);
-  }
-  get bookmarkslist() {
-    var sortedBookmarks = this.sortBookmarks();
-    var bookmarks = repeat(sortedBookmarks, bookmark => bookmark === null || bookmark === void 0 ? void 0 : bookmark.id, this.bookmarkItem.bind(this));
-    return html(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      <ul>\n        ", "\n        <div class=\"separator\"></div>\n      </ul>\n    "])), bookmarks);
-  }
-  render() {
-    return html(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      ", "\n      ", "\n    "])), this.renderHeader ? this.headerSection : nothing, Object.keys(this.bookmarks).length ? this.bookmarkslist : nothing);
-  }
-  static get styles() {
-    var main = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      :host {\n        display: block;\n        overflow-y: auto;\n        box-sizing: border-box;\n        color: var(--primaryTextColor);\n        margin-bottom: 2rem;\n        --activeBorderWidth: 2px;\n      }\n\n      icon-bookmark {\n        width: 16px;\n        height: 24px;\n      }\n\n      .separator {\n        background-color: var(--secondaryBGColor);\n        width: 98%;\n        margin: 1px auto;\n        height: 1px;\n      }\n\n      small {\n        font-style: italic;\n      }\n\n      h4 {\n        margin: 0;\n        font-size: 1.4rem;\n      }\n      h4 * {\n        display: inline-block;\n      }\n      h4 icon-bookmark {\n        vertical-align: bottom;\n      }\n      h4 span {\n        vertical-align: top;\n        padding-top: 1%;\n      }\n\n      p {\n        padding: 0;\n        margin: 5px 0 0 0;\n        width: 98%;\n        overflow-wrap: break-word;\n      }\n\n      ia-bookmark-edit {\n        margin: 5px 5px 3px 6px;\n      }\n\n      ul {\n        padding: 0;\n        list-style: none;\n        margin: var(--activeBorderWidth) 0.5rem 1rem 0;\n      }\n      ul > li:first-child .separator {\n        display: none;\n      }\n      li {\n        cursor: pointer;\n        outline: none;\n        position: relative;\n      }\n      li .content {\n        padding: 2px 0 4px 2px;\n        border: var(--activeBorderWidth) solid transparent;\n        padding: .2rem 0 .4rem .2rem;\n      }\n      li .content.active {\n        border: var(--activeBorderWidth) solid #538bc5;\n      }\n      li button.edit {\n        padding: 5px 2px 0 0;\n        background: transparent;\n        cursor: pointer;\n        height: 40px;\n        width: 40px;\n        position: absolute;\n        right: 2px;\n        top: 2px;\n        text-align: right;\n        -webkit-appearance: none;\n        appearance: none;\n        outline: none;\n        box-sizing: border-box;\n        border: none;\n      }\n      li button.edit > * {\n        display: block;\n        height: 100%;\n        width: 100%;\n      }\n    "])));
-    return [main, bookmarkColorsCSS];
-  }
-}
-customElements.define('ia-bookmarks-list', IABookmarksList);

package/dist/esm/BookNavigator/bookmarks/bookmarks-loginCTA.js

@@ -1,24 +0,0 @@
-var _templateObject;
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-import { LitElement, html } from 'lit';
-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(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      <p>A free account is required to save and access bookmarks.</p>\n      <a class=\"ia-button link primary\" href=\"", "\">Log in</a>\n    "])), this.url);
-  }
-}
-customElements.define('bookmarks-login', BookmarksLogin);

package/dist/esm/BookNavigator/bookmarks/bookmarks-provider.js

@@ -1,55 +0,0 @@
-var _templateObject;
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-import { html } from 'lit';
-import '../delete-modal-actions.js';
-import './bookmark-button.js';
-import './ia-bookmarks.js';
-import './bookmark-edit.js';
-import './bookmarks-list.js';
-import '@internetarchive/icon-bookmark';
-export default class BookmarksProvider {
-  constructor(options) {
-    var {
-      baseHost,
-      signedIn,
-      bookreader,
-      modal,
-      onProviderChange
-    } = options;
-    var referrerStr = "referer=".concat(encodeURIComponent(location.href));
-    var loginUrl = "https://".concat(baseHost, "/account/login?").concat(referrerStr);
-    this.component = document.createElement('ia-bookmarks');
-    this.component.bookreader = bookreader;
-    this.component.displayMode = signedIn ? 'bookmarks' : 'login';
-    this.component.modal = modal;
-    this.component.loginOptions = {
-      loginClicked: this.bookmarksLoginClicked,
-      loginUrl
-    };
-    this.bindEvents();
-    this.icon = html(_templateObject || (_templateObject = _taggedTemplateLiteral(["<icon-bookmark state=\"hollow\" style=\"--iconWidth: 16px; --iconHeight: 24px;\"></icon-bookmark>"])));
-    this.label = 'Bookmarks';
-    this.id = 'bookmarks';
-    this.onProviderChange = onProviderChange;
-    this.component.setup();
-    this.updateMenu(this.component.bookmarks.length);
-  }
-  updateMenu(count) {
-    this.menuDetails = "(".concat(count, ")");
-  }
-  bindEvents() {
-    this.component.addEventListener('bookmarksChanged', this.bookmarksChanged.bind(this));
-  }
-  bookmarksChanged(_ref) {
-    var {
-      detail
-    } = _ref;
-    var bookmarksLength = Object.keys(detail.bookmarks).length;
-    this.updateMenu(bookmarksLength);
-    this.onProviderChange(detail.bookmarks, detail.showSidePanel);
-  }
-  bookmarksLoginClicked() {
-    var _window$archive_analy;
-    (_window$archive_analy = window.archive_analytics) === null || _window$archive_analy === void 0 || _window$archive_analy.send_event_no_sampling('BookReader', "BookmarksLogin", window.location.path);
-  }
-}