@internetarchive/bookreader 5.0.0-88-alpha.7 → 5.0.0-88-alpha.9

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

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

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

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

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