@internetarchive/bookreader 5.0.0-3 → 5.0.0-30-d

package/{src → stat}/BookNavigator/BookNavigator.js

@@ -1,13 +1,14 @@
 import { css, html, LitElement } from 'lit-element';
-import { nothing } from 'lit-html';
+import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import SearchProvider from './search/search-provider.js';
 import DownloadProvider from './downloads/downloads-provider.js';
 import VisualAdjustmentProvider from './visual-adjustments/visual-adjustments-provider.js';
 import BookmarksProvider from './bookmarks/bookmarks-provider.js';
-import SharingProvider from '../ItemNavigator/providers/sharing.js';
+import SharingProvider from './sharing.js';
+import VolumesProvider from './volumes/volumes-provider.js';
 import BRFullscreenMgr from './br-fullscreen-mgr.js';
 import { Book } from './BookModel.js';
-import bookLoader from './assets/book-loader.js';
+import iaLogo from './assets/ia-logo.js';
 
 const events = {
   menuUpdated: 'menuUpdated',
@@ -31,6 +32,9 @@ export class BookNavigator extends LitElement {
       menuShortcuts: { type: Array },
       sideMenuOpen: { type: Boolean },
       signedIn: { type: Boolean },
+      sharedObserver: { type: Object },
+      fullscreenBranding: { type: Object },
+      addBranding: { type: Boolean },
     };
   }
 
@@ -50,12 +54,15 @@ export class BookNavigator extends LitElement {
     this.menuShortcuts = [];
     this.sideMenuOpen = false;
     this.signedIn = false;
-
+    this.modal = undefined;
+    this.sharedObserver = undefined;
+    this.fullscreenBranding = iaLogo;
+    this.addBranding = true;
     // Untracked properties
     this.fullscreenMgr = null;
-    this.brResizeObserver = null;
+    this.sharedObserver = null;
     this.model = new Book();
-    this.shortcutOrder = ['volumes', 'search', 'bookmarks'];
+    this.shortcutOrder = ['fullscreen', 'volumes', 'search', 'bookmarks'];
   }
 
   firstUpdated() {
@@ -68,12 +75,9 @@ export class BookNavigator extends LitElement {
     if (!this.bookreader) {
       return;
     }
-    const isFirstSideMenuUpdate = changed.has('sideMenuOpen') && (changed.get('sideMenuOpen') === undefined);
-    if (!isFirstSideMenuUpdate && changed.has('sideMenuOpen')) {
-      // realign image
-      this.bookreader.resize();
-      const curIndex = this.bookreader.currentIndex();
-      this.bookreader.jumpToIndex(curIndex);
+    if (changed.has('signedIn') || changed.has('isAdmin')) {
+      /** redraw book submenus to propagate property update */
+      this.initializeBookSubmenus();
     }
   }
 
@@ -98,21 +102,38 @@ export class BookNavigator extends LitElement {
    * to keep it in sync.
    */
   initializeBookSubmenus() {
+    const isBookProtected = this.bookreader.options.protected;
+
+    // const baseProviderConfig = {
+    //   modal: this.modal,
+    //   sharedObserver: this.sharedObserver,
+    //   bookreader: this.bookreader,
+    //   signedIn: this.signedIn,
+    //   isAdmin: this.isAdmin,
+    // };
+
     this.menuProviders = {
       search: new SearchProvider(
-        (brInstance = null) => {
+        /**
+         * Search specific menu updates
+         * @param {BookReader} brInstance
+         * @param {{ searchCanceled: boolean }} searchUpdates
+         */
+        (brInstance = null, searchUpdates = {}) => {
           if (brInstance) {
             /* refresh br instance reference */
             this.bookreader = brInstance;
           }
           this.updateMenuContents();
-          if (this.brWidth >= 640) { /* open side search menu */
-            this.openSideSearchMenu();
+          const wideEnoughToOpenMenu = this.brWidth >= 640;
+          if (wideEnoughToOpenMenu && !searchUpdates?.searchCanceled) {
+            /* open side search menu */
+            this.updateSideMenu('search', 'open');
           }
         },
         this.bookreader,
       ),
-      downloads: new DownloadProvider(),
+      downloads: new DownloadProvider(isBookProtected),
       visualAdjustments: new VisualAdjustmentProvider({
         onOptionChange: (event, brInstance = null) => {
           if (brInstance) {
@@ -124,10 +145,23 @@ export class BookNavigator extends LitElement {
         bookContainerSelector: this.pageContainerSelector,
         bookreader: this.bookreader,
       }),
-      share: new SharingProvider(this.book.metadata, this.baseHost, this.itemType),
-      bookmarks: new BookmarksProvider(this.bookmarksOptions, this.bookreader)
+      share: new SharingProvider(this.book.metadata, this.baseHost, this.itemType, this.bookreader.options.subPrefix),
+      bookmarks: new BookmarksProvider(this.bookmarksOptions),
     };
 
+    // add shortcut for volumes if multipleBooksList exists
+    if (this.bookreader.options.enableMultipleBooks) {
+      this.menuProviders.volumes = new VolumesProvider(this.baseHost, this.bookreader, (brInstance) => {
+        if (brInstance) {
+          /* refresh br instance reference */
+          this.bookreader = brInstance;
+        }
+        this.updateMenuContents();
+        this.updateSideMenu('volumes', 'open');
+      });
+      this.addMenuShortcut('volumes');
+    }
+
     this.addMenuShortcut('search'); /* start with search as a shortcut */
     this.updateMenuContents();
   }
@@ -138,13 +172,20 @@ export class BookNavigator extends LitElement {
   }
 
   get bookmarksOptions() {
-    const referrerStr = `referer=${encodeURIComponent(location.href)}`
+    const referrerStr = `referer=${encodeURIComponent(location.href)}`;
     return {
       loginUrl: `https://${this.baseHost}/account/login?${referrerStr}`,
+      signedIn: this.signedIn,
       displayMode: this.signedIn ? 'bookmarks' : 'login',
-      showItemNavigatorModal: this.showItemNavigatorModal.bind(this),
-      closeItemNavigatorModal: this.closeItemNavigatorModal.bind(this),
-      onBookmarksChanged: (bookmarks) => {
+      isAdmin: this.isAdmin,
+      modal: this.modal,
+      sharedObserver: this.sharedObserver,
+      bookreader: this.bookreader,
+      onBookmarksChanged: (bookmarks, showSidePanel = false) => {
+        console.log('booknav on bkch', bookmarks, showSidePanel);
+        if (showSidePanel) {
+          this.updateSideMenu('bookmarks', 'open');
+        }
         const method = Object.keys(bookmarks).length ? 'add' : 'remove';
         this[`${method}MenuShortcut`]('bookmarks');
         this.updateMenuContents();
@@ -152,13 +193,54 @@ export class BookNavigator extends LitElement {
     };
   }
 
+  /** Fullscreen Shortcut */
+  addFullscreenShortcut() {
+    const closeFS = {
+      icon: this.fullscreenShortcut,
+      id: 'fullscreen',
+    };
+    this.menuShortcuts.push(closeFS);
+    this.sortMenuShortcuts();
+    this.emitMenuShortcutsUpdated();
+  }
+
+  deleteFullscreenShortcut() {
+    console.log('delete fullscreenshortcut', this.menuShortcuts);
+    const updatedShortcuts = this.menuShortcuts.filter(({ id }) => {
+      return id !== 'fullscreen';
+    });
+    console.log('updatedShortcuts', updatedShortcuts);
+    this.menuShortcuts = updatedShortcuts;
+    this.sortMenuShortcuts();
+    this.emitMenuShortcutsUpdated();
+  }
+
+  closeFullscreen() {
+    this.bookreader.exitFullScreen();
+  }
+
+  get fullscreenShortcut() {
+    return html`
+      <button
+        @click=${() => this.closeFullscreen()}
+        title="Exit fullscreen view"
+      >${this.fullscreenBranding}</button>
+    `;
+  }
+  /** End Fullscreen Shortcut */
+
   /**
-   * Open side search menu
+   * Open side menu
+   * @param {string} menuId
+   * @param {('open'|'close'|'toggle')} action
    */
-  openSideSearchMenu() {
+  updateSideMenu(menuId = '', action = 'open') {
+    if (!menuId || !action) {
+      return;
+    }
     const event = new CustomEvent(
       events.updateSideMenu, {
-        detail: { menuId: 'search', action: 'open' },
+        detail: { menuId, action },
       },
     );
     this.dispatchEvent(event);
@@ -169,12 +251,12 @@ export class BookNavigator extends LitElement {
    */
   updateMenuContents() {
     const {
-      search, downloads, visualAdjustments, share, bookmarks,
+      search, downloads, visualAdjustments, share, bookmarks, volumes
     } = this.menuProviders;
-    const availableMenus = [search, bookmarks, visualAdjustments, share].filter((menu) => !!menu);
+    const availableMenus = [volumes, search, bookmarks, visualAdjustments, share].filter((menu) => !!menu);
 
     if (this.shouldShowDownloadsMenu()) {
-      downloads.update(this.downloadableTypes);
+      downloads?.update(this.downloadableTypes);
       availableMenus.splice(1, 0, downloads);
     }
 
@@ -247,6 +329,13 @@ export class BookNavigator extends LitElement {
     this.dispatchEvent(event);
   }
 
+  emitLoadingStatusUpdate(loaded) {
+    const event = new CustomEvent('loadingStateUpdated', {
+      detail: { loaded },
+    });
+    this.dispatchEvent(event);
+  }
+
   /**
    * Core bookreader event handler registry
    *
@@ -255,22 +344,28 @@ export class BookNavigator extends LitElement {
    */
   bindEventListeners() {
     window.addEventListener('BookReader:PostInit', (e) => {
+      console.log('BookReader:PostInit');
       this.bookreader = e.detail.props;
       this.bookReaderLoaded = true;
       this.bookReaderCannotLoad = false;
       this.fullscreenMgr = new BRFullscreenMgr(this.bookreader.el);
 
       this.initializeBookSubmenus();
-      setTimeout(() => this.bookreader.resize(), 0);
-      this.brResizeObserver = new ResizeObserver((elements) => this.reactToBrResize(elements));
-      this.brResizeObserver.observe(this.mainBRContainer);
+      this.startResizeObserver();
+      this.emitLoadingStatusUpdate(true);
     });
     window.addEventListener('BookReader:fullscreenToggled', (event) => {
+      console.log('BookReader:fullscreenToggled');
       const { detail: { props: brInstance = null } } = event;
       if (brInstance) {
         this.bookreader = brInstance;
       }
       this.manageFullScreenBehavior(event);
+      if (this.bookreader.isFullscreenActive) {
+        this.addFullscreenShortcut();
+      } else {
+        this.deleteFullscreenShortcut();
+      }
     }, { passive: true });
     window.addEventListener('BookReader:ToggleSearchMenu', (event) => {
       this.dispatchEvent(new CustomEvent(events.updateSideMenu, {
@@ -278,6 +373,7 @@ export class BookNavigator extends LitElement {
       }));
     });
     window.addEventListener('LendingFlow:PostInit', ({ detail }) => {
+      console.log('LendingFlow:PostInit');
       const {
         downloadTypesAvailable, lendingStatus, isAdmin, previewType,
       } = detail;
@@ -288,6 +384,8 @@ export class BookNavigator extends LitElement {
       this.bookReaderCannotLoad = previewType === 'singlePagePreview';
     });
     window.addEventListener('BRJSIA:PostInit', ({ detail }) => {
+      console.log('BRJSIA:PostInit');
+
       const { isRestricted, downloadURLs } = detail;
       this.bookReaderLoaded = true;
       this.downloadableTypes = downloadURLs;
@@ -301,17 +399,16 @@ export class BookNavigator extends LitElement {
    *  - book animation is happening
    *  - book is in fullscreen (fullscreen is handled separately)
    *
-   * @param { Object } entries - resize observer entries
+   * @param { target: HTMLElement, contentRect: DOMRectReadOnly } entry
    */
-  reactToBrResize(entries = []) {
+  handleResize({ contentRect, target }) {
     const startBrWidth = this.brWidth;
     const { animating } = this.bookreader;
 
-    entries.forEach(({ contentRect, target }) => {
-      if (target === this.mainBRContainer) {
-        this.brWidth = contentRect.width;
-      }
-    });
+    if (target === this.mainBRContainer) {
+      this.brWidth = contentRect.width;
+    }
+
     setTimeout(() => {
       if (startBrWidth && !animating) {
         this.bookreader.resize();
@@ -319,6 +416,17 @@ export class BookNavigator extends LitElement {
     }, 0);
   }
 
+  async startResizeObserver() {
+    if (!this.sharedObserver) {
+      this.sharedObserver = new SharedResizeObserver();
+    }
+
+    this.sharedObserver?.addObserver({
+      handler: this,
+      target: this.mainBRContainer,
+    });
+  }
+
   /**
    * Manages Fullscreen behavior
    * This makes sure that controls are _always_ in view
@@ -326,7 +434,6 @@ export class BookNavigator extends LitElement {
    */
   manageFullScreenBehavior() {
     this.emitFullScreenState();
-
     if (!this.bookreader.isFullscreen()) {
       this.fullscreenMgr.teardown();
     } else {
@@ -345,90 +452,30 @@ export class BookNavigator extends LitElement {
     this.dispatchEvent(event);
   }
 
-  emitShowItemNavigatorModal(e) {
-    this.dispatchEvent(new CustomEvent('showItemNavigatorModal', {
-      detail: e.detail,
-    }));
-  }
-
-  emitCloseItemNavigatorModal() {
-    this.dispatchEvent(new CustomEvent('closeItemNavigatorModal'));
-  }
-
-  showItemNavigatorModal(e) {
-    this.emitShowItemNavigatorModal(e);
-  }
-
-  closeItemNavigatorModal() {
-    this.emitCloseItemNavigatorModal();
-  }
-
-  get loader() {
-    const loader = html`
-      <div class="book-loader">${bookLoader}<div>
-      <h3>Loading viewer</h3>
-    `;
-    return !this.bookReaderLoaded ? loader : nothing;
-  }
-
   get loadingClass() {
     return !this.bookReaderLoaded ? 'loading' : '';
   }
 
   get itemImage() {
     const url = `https://${this.baseHost}/services/img/${this.book.metadata.identifier}`;
-    return html`<img src="${url}" alt="cover image for ${this.book.metadata.identifier}">`;
+    return html`<img class="cover-img" src="${url}" alt="cover image for ${this.book.metadata.identifier}">`;
   }
 
   render() {
     const placeholder = this.bookReaderCannotLoad ? this.itemImage : this.loader;
     return html`<div id="book-navigator" class="${this.loadingClass}">
       ${placeholder}
-      <slot name="bookreader"></slot>
+      <slot name="theater-main"></slot>
     </div>
   `;
   }
 
   static get styles() {
     return css`
-    #book-navigator.loading {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 30vh;
-    }
-
-    #book-navigator .book-loader {
-      width: 30%;
-      margin: auto;
-      text-align: center;
-      color: var(--primaryTextColor);
-    }
-
-    .book-loader svg {
-      display: block;
-      width: 60%;
-      max-width: 100px;
-      height: auto;
-      margin: auto;
+    .cover-img {
+      max-height: 300px;
     }
-
-    svg * {
-      fill: var(--primaryTextColor);
-    }
-
-    svg .ring {
-      animation: rotate 1.3s infinite linear;
-      transform-origin: 50px 50px;
-      transform-box: fill-box;
-    }
-
-    @keyframes rotate {
-      0% {
-        transform: rotate(-360deg);
-      }
-    }
-  `
+  `;
   }
 }
 

package/stat/BookNavigator/assets/bookmark-colors.js

@@ -0,0 +1,15 @@
+import { css } from 'lit-element';
+
+export default css`
+  .blue {
+    --iconFillColor: var(--blueBookmarkColor, #0023f5);
+  }
+
+  .red {
+    --iconFillColor: var(--redBookmarkColor, #eb3223);
+  }
+
+  .green {
+    --iconFillColor: var(--greenBookmarkColor, #75ef4c);
+  }
+`;

package/stat/BookNavigator/assets/button-base.js

@@ -0,0 +1,61 @@
+import { css } from 'lit-element';
+
+export default css`
+  .ia-button {
+    min-height: 3rem;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    color: var(--primaryTextColor);
+    line-height: normal;
+    border-radius: .4rem;
+    text-align: center;
+    vertical-align: middle;
+    font-size: 1.4rem;
+    display: inline-block;
+    padding: .6rem 1.2rem;
+    border: 1px solid transparent;
+
+    white-space: nowrap;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+  }
+
+  .ia-button.link,
+  .ia-button.external {
+    min-height: unset;
+    text-decoration: none;
+  }
+
+  .ia-button:disabled,
+  .ia-button.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .ia-button.transparent {
+    background-color: transparent;
+  }
+  
+  .ia-button.slim {
+    padding: 0;
+  }
+
+  .ia-button.primary {
+    background-color: var(--primaryCTAFill);
+    border-color: var(--primaryCTABorder);
+  }
+
+  .ia-button.cancel {
+    background-color: var(--primaryErrorCTAFill);
+    border-color: var(--primaryErrorCTABorder);
+  }
+
+  .ia-button.external {
+    background: var(--secondaryCTAFill);
+    border-color: var(--secondaryCTABorder);
+  }
+`;

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