@internetarchive/bookreader 5.0.0-28-remove-url-defaults → 5.0.0-30-b

package/stat/BookNavigator/assets/ia-logo.js

@@ -0,0 +1,17 @@
+import { svg } from 'lit-element';
+
+export default svg`
+  <svg class="ia-logo" width="27" height="30" viewBox="0 0 27 30" xmlns="http://www.w3.org/2000/svg" aria-labelledby="logoTitleID logoDescID">
+    <title id="logoTitleID">Internet Archive logo</title>
+    <desc id="logoDescID">A line drawing of the Internet Archive headquarters building façade.</desc>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <mask id="mask-2" fill="white">
+        <path d="M26.6666667,28.6046512 L26.6666667,30 L0,30 L0.000283687943,28.6046512 L26.6666667,28.6046512 Z M25.6140351,26.5116279 L25.6140351,28.255814 L1.05263158,28.255814 L1.05263158,26.5116279 L25.6140351,26.5116279 Z M3.62469203,7.6744186 L3.91746909,7.82153285 L4.0639977,10.1739544 L4.21052632,13.9963932 L4.21052632,17.6725617 L4.0639977,22.255044 L4.03962296,25.3421929 L3.62469203,25.4651163 L2.16024641,25.4651163 L1.72094074,25.3421929 L1.55031755,22.255044 L1.40350877,17.6970339 L1.40350877,14.0211467 L1.55031755,10.1739544 L1.68423854,7.80887484 L1.98962322,7.6744186 L3.62469203,7.6744186 Z M24.6774869,7.6744186 L24.9706026,7.82153285 L25.1168803,10.1739544 L25.2631579,13.9963932 L25.2631579,17.6725617 L25.1168803,22.255044 L25.0927809,25.3421929 L24.6774869,25.4651163 L23.2130291,25.4651163 L22.7736357,25.3421929 L22.602418,22.255044 L22.4561404,17.6970339 L22.4561404,14.0211467 L22.602418,10.1739544 L22.7369262,7.80887484 L23.0420916,7.6744186 L24.6774869,7.6744186 Z M9.94042303,7.6744186 L10.2332293,7.82153285 L10.3797725,10.1739544 L10.5263158,13.9963932 L10.5263158,17.6725617 L10.3797725,22.255044 L10.3556756,25.3421929 L9.94042303,25.4651163 L8.47583122,25.4651163 L8.0362015,25.3421929 L7.86556129,22.255044 L7.71929825,17.6970339 L7.71929825,14.0211467 L7.86556129,10.1739544 L8.00005604,7.80887484 L8.30491081,7.6744186 L9.94042303,7.6744186 Z M18.0105985,7.6744186 L18.3034047,7.82153285 L18.449948,10.1739544 L18.5964912,13.9963932 L18.5964912,17.6725617 L18.449948,22.255044 L18.425851,25.3421929 L18.0105985,25.4651163 L16.5460067,25.4651163 L16.1066571,25.3421929 L15.9357367,22.255044 L15.7894737,17.6970339 L15.7894737,14.0211467 L15.9357367,10.1739544 L16.0702315,7.80887484 L16.3753664,7.6744186 L18.0105985,7.6744186 Z M25.6140351,4.53488372 L25.6140351,6.97674419 L1.05263158,6.97674419 L1.05263158,4.53488372 L25.6140351,4.53488372 Z M13.0806755,0 L25.9649123,2.93331338 L25.4484139,3.8372093 L0.771925248,3.8372093 L0,3.1041615 L13.0806755,0 Z" id="path-1"></path>
+      </mask>
+      <use fill="#FFFFFF" xlink:href="#path-1"></use>
+      <g mask="url(#mask-2)" fill="#FFFFFF">
+        <path d="M0,0 L26.6666667,0 L26.6666667,30 L0,30 L0,0 Z" id="swatch"></path>
+      </g>
+    </g>
+  </svg>
+`;

package/stat/BookNavigator/assets/icon_checkmark.js

@@ -0,0 +1,6 @@
+import { css } from 'lit-element';
+
+// Original SVG object for reference
+// <svg height="10" viewBox="0 0 13 10" width="13" xmlns="http://www.w3.org/2000/svg"><path d="m4.33333333 10-4.33333333-4.16666667 1.73333333-1.66666666 2.6 2.5 6.93333337-6.66666667 1.7333333 1.66666667z" fill="#fff" fill-rule="evenodd"/></svg>
+
+export default css`data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwIiB2aWV3Qm94PSIwIDAgMTMgMTAiIHdpZHRoPSIxMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtNC4zMzMzMzMzMyAxMC00LjMzMzMzMzMzLTQuMTY2NjY2NjcgMS43MzMzMzMzMy0xLjY2NjY2NjY2IDIuNiAyLjUgNi45MzMzMzMzNy02LjY2NjY2NjY3IDEuNzMzMzMzMyAxLjY2NjY2NjY3eiIgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+`;

package/stat/BookNavigator/assets/icon_close.js

@@ -0,0 +1,3 @@
+import { css } from 'lit-element';
+
+export default css`data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDAgNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1sYWJlbGxlZGJ5PSJjbG9zZVRpdGxlSUQgY2xvc2VEZXNjSUQiPjxwYXRoIGQ9Ik0yOS4xOTIgMTAuODA4YTEuNSAxLjUgMCAwMTAgMi4xMkwyMi4xMjIgMjBsNy4wNyA3LjA3MmExLjUgMS41IDAgMDEtMi4xMiAyLjEyMWwtNy4wNzMtNy4wNy03LjA3IDcuMDdhMS41IDEuNSAwIDAxLTIuMTIxLTIuMTJsNy4wNy03LjA3My03LjA3LTcuMDdhMS41IDEuNSAwIDAxMi4xMi0yLjEyMUwyMCAxNy44NzhsNy4wNzItNy4wN2ExLjUgMS41IDAgMDEyLjEyMSAweiIgY2xhc3M9ImZpbGwtY29sb3IiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==`;

package/stat/BookNavigator/assets/icon_sort_asc.js

@@ -0,0 +1,5 @@
+import { html } from 'lit-html';
+
+export default html`
+<svg name="sort-asc" height="18" viewBox="0 0 18 18" width="18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m2.32514544 8.30769231.7756949-2.08468003h2.92824822l.75630252 2.08468003h1.01809955l-2.70523594-6.92307693h-1.01809955l-2.69553976 6.92307693zm3.41305753-2.86037492h-2.34647705l1.17323853-3.22883h.01939237z" fill="#fff" fill-rule="nonzero"/><path d="m7.1689722 16.6153846v-.7756949h-4.4117647l4.29541047-5.3716871v-.77569491h-5.06140918v.77569491h3.97543633l-4.30510666 5.3716871v.7756949z" fill="#fff" fill-rule="nonzero"/><path d="m10.3846154 11.0769231 2.7692308 5.5384615 2.7692307-5.5384615m-2.7692307 4.1538461v-13.15384612" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.661538" transform="matrix(1 0 0 -1 0 18.692308)"/></g></svg>
+`;

package/stat/BookNavigator/assets/icon_sort_desc.js

@@ -0,0 +1,5 @@
+import { html } from 'lit-html';
+
+export default html`
+<svg name="sort-desc" height="18" viewBox="0 0 18 18" width="18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m2.32514544 8.30769231.7756949-2.08468003h2.92824822l.75630252 2.08468003h1.01809955l-2.70523594-6.92307693h-1.01809955l-2.69553976 6.92307693zm3.41305753-2.86037492h-2.34647705l1.17323853-3.22883h.01939237z" fill="#fff" fill-rule="nonzero"/><path d="m7.1689722 16.6153846v-.7756949h-4.4117647l4.29541047-5.3716871v-.77569491h-5.06140918v.77569491h3.97543633l-4.30510666 5.3716871v.7756949z" fill="#fff" fill-rule="nonzero"/><path d="m10.3846154 11.0769231 2.7692308 5.5384615 2.7692307-5.5384615m-2.7692307 4.1538461v-13.15384612" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.661538"/></g></svg>
+`;

package/stat/BookNavigator/assets/icon_sort_neutral.js

@@ -0,0 +1,5 @@
+import { html } from 'lit-html';
+
+export default html`
+<svg name="sort-neutral" height="18" viewBox="0 0 18 18" width="18" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" fill-rule="evenodd"><path d="m2.32514544 8.30769231.7756949-2.08468003h2.92824822l.75630252 2.08468003h1.01809955l-2.70523594-6.92307693h-1.01809955l-2.69553976 6.92307693zm3.41305753-2.86037492h-2.34647705l1.17323853-3.22883h.01939237z" fill-rule="nonzero"/><path d="m7.1689722 16.6153846v-.7756949h-4.4117647l4.29541047-5.3716871v-.77569491h-5.06140918v.77569491h3.97543633l-4.30510666 5.3716871v.7756949z" fill-rule="nonzero"/><circle cx="13" cy="9" r="2"/></g></svg>
+`;

package/stat/BookNavigator/assets/icon_volumes.js

@@ -0,0 +1,11 @@
+import { html } from 'lit-html';
+
+export default html`
+  <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" aria-labelledby="volumesTitleID volumesDescID">
+    <title id="volumesTitleID">Volumes icon</title>
+    <desc id="volumesDescID">Three books stacked on each other</desc>
+    <g fill="#ffffff">
+      <path fill="#ffffff" d="m9.83536396 0h10.07241114c.1725502.47117517.3378411.76385809.4958725.87804878.1295523.11419069.3199719.1998337.5712586.25692905.2512868.05709534.4704647.08564301.6575337.08564301h.2806036v15.24362526h-4.3355343v3.8106985h-4.44275v3.7250554h-12.01318261c-.27306495 0-.50313194-.085643-.69020098-.256929-.18706903-.1712861-.30936193-.3425721-.36687867-.5138581l-.06449694-.2785477v-14.2159091c0-.32815965.08627512-.5922949.25882537-.79240577.17255024-.20011086.34510049-.32150776.51765073-.36419068l.25882537-.0640244h3.36472977v-2.54767184c0-.31374722.08627513-.57067627.25882537-.77078714.17255025-.20011086.34510049-.32150776.51765074-.36419068l.25882536-.06402439h3.36472978v-2.56929047c0-.32815964.08627512-.5922949.25882537-.79240576.17255024-.20011087.34510049-.31430156.51765073-.34257207zm10.78355264 15.6294346v-13.53076498c-.2730649-.08536585-.4456152-.16380266-.5176507-.23531042-.1725502-.1424612-.2730649-.27078714-.3015441-.38497783v13.36031043h-9.87808272c0 .0144124-.02149898.0144124-.06449694 0-.04299795-.0144124-.08962561.006929-.13988296.0640244-.05025735.0570953-.07538603.1427383-.07538603.256929s.02149898.210643.06449694.289357c.04299795.078714.08599591.1322062.12899387.1604767l.06449693.0216187h10.71905571zm-10.2449613-2.4412417h7.98003v-11.60421286h-7.98003zm1.6827837-9.41990022h4.6153002c.1725502 0 .3199718.05349224.4422647.16047672s.1834393.23891353.1834393.39578714c0 .15687362-.0611464.28519956-.1834393.38497783s-.2697145.1496674-.4422647.1496674h-4.6153002c-.1725503 0-.3199719-.04988913-.4422647-.1496674-.1222929-.09977827-.1834394-.22810421-.1834394-.38497783 0-.15687361.0611465-.28880266.1834394-.39578714.1222928-.10698448.2697144-.16047672.4422647-.16047672zm-6.08197737 13.50997782h7.72120467v-.8131929h-3.79610541c-.27306495 0-.49950224-.085643-.67931188-.256929-.17980964-.1712861-.29847284-.3425721-.35598958-.5138581l-.06449694-.2785477v-10.02023282h-2.82530086zm6.77217827-11.36890243h3.2139578c.1295522 0 .240956.05709534.3342113.17128603.0932554.11419069.139883.24972284.139883.40659645 0 .15687362-.0466276.28880267-.139883.39578714-.0932553.10698448-.2046591.16047672-.3342113.16047672h-3.2139578c-.1295523 0-.2373264-.05349224-.3233223-.16047672-.0859959-.10698447-.1289938-.23891352-.1289938-.39578714 0-.15687361.0429979-.29240576.1289938-.40659645s.19377-.17128603.3233223-.17128603zm-11.15043132 15.11557653h7.69942646v-.7491685h-3.79610539c-.25854616 0-.48135376-.0892462-.66842279-.2677384-.18706904-.1784922-.30936193-.3605876-.36687868-.546286l-.06449694-.2569291v-10.04101994h-2.80352266zm14.62237682-4.5606985h-.8191949v2.1410754h-9.89986085s-.04299796.0285477-.12899387.085643c-.08599592.0570954-.12201369.1427384-.10805331.2569291 0 .1141907.01786928.210643.05360784.289357.03573856.0787139.07538603.125.1189424.138858l.06449694.0432373h10.71905575v-2.9542683zm-4.3991936 3.8106985h-.8191949v2.077051h-9.8563045c0 .0144124-.02149898.0144124-.06449694 0-.04299795-.0144125-.08962561.0105321-.13988296.0748337-.05025735.0643015-.07538603.1607538-.07538603.289357 0 .1141906.02149898.2070399.06449694.2785476.04299795.0715078.08599591.1141907.12899387.1280488l.06449693.0216186h10.69811519v-2.8686252z" />
+    </g>
+  </svg>
+`;

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

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

@@ -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);