@internetarchive/bookreader 5.0.0-66 → 5.0.0-67

package/src/plugins/plugin.chapters.js

@@ -1,4 +1,11 @@
 /* global BookReader */
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import '@internetarchive/icon-toc/icon-toc';
+/** @typedef {import('@/src/BookNavigator/book-navigator.js').BookNavigator} BookNavigator */
+
 /**
  * Plugin for chapter markers in BookReader. Fetches from openlibrary.org
  * Could be forked, or extended to alter behavior
@@ -10,153 +17,111 @@ jQuery.extend(BookReader.defaultOptions, {
   bookId: '',
 });
 
-/** @override Extend the constructor to add search properties */
-BookReader.prototype.setup = (function (super_) {
-  return function (options) {
-    super_.call(this, options);
-
-    this.olHost = options.olHost;
-    this.enableChaptersPlugin = options.enableChaptersPlugin;
-    this.bookId = options.bookId;
-  };
-})(BookReader.prototype.setup);
-
 /** @override Extend to call Open Library for TOC */
 BookReader.prototype.init = (function(super_) {
   return function() {
     super_.call(this);
-    if (this.enableChaptersPlugin && this.ui !== 'embed') {
-      this.getOpenLibraryRecord();
-    }
-    if (this.enableMobileNav) {
-      this.bind(BookReader.eventNames.mobileNavOpen,
-        () => {
-          this.updateTOCState(this.firstIndex, this._tocEntries);
-          if ($('table-contents-list').parent().hasClass('mm-opened')) {
-            this.updateTOCState(this.firstIndex, this._tocEntries);
-          }
-        }
-      );
-      $(".BRmobileMenu__tableContents").on("click", () => {
-        this.updateTOCState(this.firstIndex, this._tocEntries);
-      });
+    if (this.options.enableChaptersPlugin && this.ui !== 'embed') {
+      this._chapterInit();
     }
   };
 })(BookReader.prototype.init);
 
-/**
- * Adds chapter marker to navigation scrubber
- *
- * @param {string} chapterTitle
- * @param {string} pageNumber
- * @param {number} pageIndex
- */
-BookReader.prototype.addChapter = function(chapterTitle, pageNumber, pageIndex) {
-  const uiStringPage = 'Page'; // i18n
-  const percentThrough = BookReader.util.cssPercentage(pageIndex, this.book.getNumLeafs() - 1);
-  const jumpToChapter = (event) => {
-    this.jumpToIndex($(event.delegateTarget).data('pageIndex'));
-    $('.current-chapter').removeClass('current-chapter');
-    $(event.delegateTarget).addClass('current-chapter');
-  };
-  const title = `${chapterTitle} | `;
-  const pageStr = `${uiStringPage} ${pageNumber}`;
-
-  //adding items to mobile table of contents
-  const mobileChapter = $(`<li></li>`).append($(`<span class='BRTOCElementTitle'></span>`).text(title))
-    .append($(`<span class='BRTOCElementPage'></span>`).text(pageStr));
-  mobileChapter.addClass('BRtable-contents-el')
-    .appendTo(this.$('.table-contents-list'))
-    .data({ pageIndex });
-
-  //adds .BRchapters to the slider only if pageIndex exists
-  if (pageIndex != undefined) {
-    $(`<div></div>`)
-      .append($('<div />').text(title + pageStr))
-      .addClass('BRchapter')
-      .css({ left: percentThrough })
-      .appendTo(this.$('.BRnavline'))
-      .data({ pageIndex })
-      .on("mouseenter", event => {
-        // remove hover effect from other markers then turn on just for this
-        const marker = event.currentTarget;
-        const tooltip = marker.querySelector('div');
-        const tooltipOffset = tooltip.getBoundingClientRect();
-        const targetOffset = marker.getBoundingClientRect();
-        const boxSizeAdjust = parseInt(getComputedStyle(tooltip).paddingLeft) * 2;
-        if (tooltipOffset.x - boxSizeAdjust < 0) {
-          tooltip.style.setProperty('transform', `translateX(-${targetOffset.left - boxSizeAdjust}px)`);
-        }
-        this.$('.BRsearch,.BRchapter').removeClass('front');
-        $(event.target).addClass('front');
-      })
-      .on("mouseleave", event => $(event.target).removeClass('front'))
-      .on('click', jumpToChapter);
-
-    //adding clickable properties to mobile chapters
-    mobileChapter.bind('click', jumpToChapter)
-      .addClass('chapter-clickable')
-      .attr("data-event-click-tracking","BRTOCPanel|GoToChapter");
+BookReader.prototype._chapterInit = async function() {
+  const olEdition = await this.getOpenLibraryRecord(this.options.olHost, this.options.bookId);
+  if (olEdition?.table_of_contents?.length) {
+    this._tocEntries = olEdition.table_of_contents.map(rawTOCEntry => (
+      Object.assign({}, rawTOCEntry, {pageIndex: this.book.getPageIndex(rawTOCEntry.pagenum)})
+    ));
+    this._chaptersRender(this._tocEntries);
+    this.bind(BookReader.eventNames.pageChanged, () => this._chaptersUpdateCurrent());
   }
-
-};
-
-/*
- * Remove all chapters.
- */
-BookReader.prototype.removeChapters = function() {
-  this.$('.BRnavpos .BRchapter').remove();
 };
 
 /**
  * Update the table of contents based on array of TOC entries.
- * @param {TocEntry[]} tocEntries
  */
-BookReader.prototype.updateTOC = function(tocEntries) {
-  this.removeChapters();
-  if (this.enableMobileNav && tocEntries.length > 0) {
-    this.$(".BRmobileMenu__tableContents").show();
-  }
-  for (let i = 0; i < tocEntries.length; i++) {
-    this.addChapterFromEntry(tocEntries[i]);
+BookReader.prototype._chaptersRender = function() {
+  const shell = /** @type {BookNavigator} */(this.shell);
+  shell.menuProviders['chapters'] = {
+    id: 'chapters',
+    icon: html`<ia-icon-toc style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon-toc>`,
+    label: 'Table of Contents',
+    component: html`<br-chapters-panel
+      .contents="${this._tocEntries}"
+      .jumpToPage="${(pageIndex) => {
+      this._chaptersUpdateCurrent(pageIndex);
+      this.jumpToIndex(pageIndex);
+    }}"
+      @connected="${(e) => {
+      this._chaptersPanel = e.target;
+      this._chaptersUpdateCurrent();
+    }}"
+    />`,
+  };
+  shell.updateMenuContents();
+  for (const tocEntry of this._tocEntries) {
+    this._chaptersRenderMarker(tocEntry);
   }
-  this._tocEntries = tocEntries;
-  $('.table-contents-list').children().each((i, el) => {
-    tocEntries[i].mobileHTML = el;
-  });
 };
 
 /**
  * @typedef {Object} TocEntry
- * Table of contents entry as defined -- format is defined by Open Library
+ * Table of contents entry as defined by Open Library, with some extra values for internal use
  * @property {string} pagenum
  * @property {number} level
  * @property {string} label
- * @property {{type: '/type/toc_item'}} type
  * @property {string} title
- * @property {HTMLElement} mobileHTML
- * @property {number} pageIndex
-
+ * @property {number} pageIndex - Added
  *
  * @example {
  *   "pagenum": "17",
  *   "level": 1,
  *   "label": "CHAPTER I",
- *   "type": {"key": "/type/toc_item"},
  *   "title": "THE COUNTRY AND THE MISSION"
  * }
  */
 
 /**
- * @param {TocEntry} tocEntryObject
+ * @param {TocEntry} tocEntry
  */
-BookReader.prototype.addChapterFromEntry = function(tocEntryObject) {
-  tocEntryObject.pageIndex = this.book.getPageIndex(tocEntryObject['pagenum']);
-  //creates a string with non-void tocEntryObject.label and tocEntryObject.title
-  const chapterStr = [tocEntryObject.label, tocEntryObject.title]
+BookReader.prototype._chaptersRenderMarker = function(tocEntry) {
+  if (tocEntry.pageIndex == undefined) return;
+
+  //creates a string with non-void tocEntry.label and tocEntry.title
+  const chapterStr = [tocEntry.label, tocEntry.title]
     .filter(x => x)
     .join(' ');
-  this.addChapter(chapterStr, tocEntryObject['pagenum'], tocEntryObject.pageIndex);
+
+  const percentThrough = BookReader.util.cssPercentage(tocEntry.pageIndex, this.book.getNumLeafs() - 1);
+  $(`<div></div>`)
+    .append(
+      $('<div />')
+        .text(chapterStr)
+        .append($('<div class="BRchapterPage" />').text(`Page ${tocEntry.pagenum}`))
+    )
+    .addClass('BRchapter')
+    .css({ left: percentThrough })
+    .appendTo(this.$('.BRnavline'))
+    .on("mouseenter", event => {
+      // remove hover effect from other markers then turn on just for this
+      const marker = event.currentTarget;
+      const tooltip = marker.querySelector('div');
+      const tooltipOffset = tooltip.getBoundingClientRect();
+      const targetOffset = marker.getBoundingClientRect();
+      const boxSizeAdjust = parseInt(getComputedStyle(tooltip).paddingLeft) * 2;
+      if (tooltipOffset.x - boxSizeAdjust < 0) {
+        tooltip.style.setProperty('transform', `translateX(-${targetOffset.left - boxSizeAdjust}px)`);
+      }
+      this.$('.BRsearch,.BRchapter').removeClass('front');
+      $(event.target).addClass('front');
+    })
+    .on("mouseleave", event => $(event.target).removeClass('front'))
+    .on('click', () => {
+      this._chaptersUpdateCurrent(tocEntry.pageIndex);
+      this.jumpToIndex(tocEntry.pageIndex);
+    });
+
   this.$('.BRchapter, .BRsearch').each((i, el) => {
     const $el = $(el);
     $el
@@ -166,79 +131,146 @@ BookReader.prototype.addChapterFromEntry = function(tocEntryObject) {
 };
 
 /**
- * getOpenLibraryRecord
- *
- * The bookreader is designed to call openlibrary API and constructs the
- * "Return book" button using the response.
- *
  * This makes a call to OL API and calls the given callback function with the
  * response from the API.
+ *
+ * @param {string} olHost
+ * @param {string} ocaid
  */
-BookReader.prototype.getOpenLibraryRecord = async function () {
+BookReader.prototype.getOpenLibraryRecord = async function (olHost, ocaid) {
   // Try looking up by ocaid first, then by source_record
-  const baseURL = `${this.olHost}/query.json?type=/type/edition&*=`;
-  const fetchUrlByBookId = `${baseURL}&ocaid=${this.bookId}`;
-
-  /*
-  * Update Chapter markers based on received record from Open Library.
-  * Notes that Open Library record is used for extra metadata, and also for lending
-  */
-  const setUpChapterMarkers = (olObject) => {
-    if (olObject && olObject.table_of_contents) {
-      // XXX check here that TOC is valid
-      this.updateTOC(olObject.table_of_contents);
-    }
-  };
+  const baseURL = `${olHost}/query.json?type=/type/edition&*=`;
+  const fetchUrlByBookId = `${baseURL}&ocaid=${ocaid}`;
 
   let data = await $.ajax({ url: fetchUrlByBookId, dataType: 'jsonp' });
 
   if (!data || !data.length) {
     // try sourceid
-    data = await $.ajax({ url: `${baseURL}&source_records=ia:${this.bookId}`, dataType: 'jsonp' });
+    data = await $.ajax({ url: `${baseURL}&source_records=ia:${ocaid}`, dataType: 'jsonp' });
   }
 
-  if (data && data.length > 0) {
-    setUpChapterMarkers(data[0]);
-  }
+  return data?.[0];
 };
 
-// Extend buildMobileDrawerElement with table of contents list
-BookReader.prototype.buildMobileDrawerElement = (function (super_) {
-  return function () {
-    const $el = super_.call(this);
-    if (this.enableMobileNav && this.options.enableChaptersPlugin) {
-      $el.find('.BRmobileMenu__moreInfoRow').after($(`
-        <li class="BRmobileMenu__tableContents" data-event-click-tracking="BRSidebar|TOCPanel">
-            <span>
-                <span class="DrawerIconWrapper">
-                  <img class="DrawerIcon" src="${this.imagesBaseURL}icon_toc.svg" alt="toc-icon"/>
-                </span>
-                Table of Contents
-            </span>
-            <div>
-                <ol class="table-contents-list">
-                </ol>
-            </div>
-        </li>`).hide());
-    }
-    return $el;
-  };
-})(BookReader.prototype.buildMobileDrawerElement);
-
 /**
- * highlights the current chapter based on current page
  * @private
- * @param {TocEntry[]} tocEntries
- * @param {number} tocEntries
+ * Highlights the current chapter based on current page
+ * @param {PageIndex} curIndex
  */
-BookReader.prototype.updateTOCState = function(currIndex, tocEntries) {
-  //this function won't have any effects if called before OpenLibrary request is finished
-  if (!tocEntries) {return;}
-  $('.current-chapter').removeClass('current-chapter');
-  const tocEntriesIndexed = tocEntries.filter((el) => el.pageIndex != undefined).reverse();
-  const currChapter = tocEntriesIndexed[tocEntriesIndexed.findIndex(
-    (el) => el.pageIndex <= currIndex)];
-  if (currChapter != undefined) {
-    $(currChapter.mobileHTML).addClass('current-chapter');
+BookReader.prototype._chaptersUpdateCurrent = function(
+  curIndex = (this.mode == 2 ? Math.max(...this.displayedIndices) : this.firstIndex)
+) {
+  const tocEntriesIndexed = this._tocEntries.filter((el) => el.pageIndex != undefined).reverse();
+  const currChapter = tocEntriesIndexed[
+    // subtract one so that 2up shows the right label
+    tocEntriesIndexed.findIndex((chapter) => chapter.pageIndex <= curIndex)
+  ];
+  if (this._chaptersPanel) {
+    this._chaptersPanel.currentChapter = currChapter;
   }
 };
+
+@customElement('br-chapters-panel')
+export class BRChaptersPanel extends LitElement {
+  /** @type {TocEntry[]} */
+  @property({ type: Array })
+  contents = [];
+
+  /** @type {TocEntry?} */
+  @property({ type: Object })
+  currentChapter = {};
+
+  /** @type {(pageIndex: PageIndex) => void} */
+  jumpToPage = () => {};
+
+  /**
+   * @param {TocEntry[]} contents
+   */
+  constructor(contents) {
+    super();
+    this.contents = contents;
+  }
+
+  render() {
+    return html`
+    <ol>
+      ${this.contents.map(tocEntry => this.renderTOCEntry(tocEntry))}
+    </ol>
+    `;
+  }
+
+  /**
+   * @param {TocEntry} tocEntry
+   */
+  renderTOCEntry(tocEntry) {
+    const chapterTitle = [tocEntry.label, tocEntry.title]
+      .filter(x => x)
+      .join(' ');
+    const clickable = tocEntry.pageIndex != undefined;
+    // note the click-tracking won't work...
+    return html`
+    <li
+      class="
+        BRtable-contents-el
+        ${clickable ? 'clickable' : ''}
+        ${tocEntry == this.currentChapter ? 'current' : ''}
+      "
+      style="${styleMap({marginLeft: (tocEntry.level - 1) * 10 + 'px'})}"
+      data-event-click-tracking="${ifDefined(clickable ? "BRTOCPanel|GoToChapter" : undefined)}"
+      @click="${() => this.jumpToPage(tocEntry.pageIndex)}"
+    >
+      ${chapterTitle}
+      ${tocEntry.pagenum ? html`
+        <br />
+        <span class="BRTOCElementPage">Page ${tocEntry.pagenum}</span>
+      ` : nothing}
+    </li>`;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.dispatchEvent(new CustomEvent('connected'));
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('currentChapter')) {
+      this.shadowRoot.querySelector('li.current')?.scrollIntoView({
+        block: 'nearest',
+        behavior: 'smooth',
+      });
+    }
+  }
+
+  static get styles() {
+    return css`
+      ol {
+        padding: 0;
+        margin: 0;
+        margin-right: 5px;
+      }
+      li {
+        padding: 10px;
+        overflow: hidden;
+        border-radius: 4px;
+      }
+      li.clickable {
+        font-weight: normal;
+        cursor: pointer;
+        transition: background-color 0.2s;
+      }
+
+      li.clickable:not(.current):hover {
+        background-color: rgba(255,255,255, 0.05);
+      }
+
+      li.current {
+        background-color: rgba(255,255,255,0.9);
+        color: #333;
+      }
+
+      .BRTOCElementPage {
+        font-size: 0.85em;
+        opacity: .8;
+      }`;
+  }
+}

package/src/plugins/tts/plugin.tts.js

@@ -195,7 +195,7 @@ BookReader.prototype.initNavbar = (function (super_) {
       $(`<li>
           <button class="BRicon read js-tooltip" title="${tooltips.readAloud}">
             <div class="icon icon-read-aloud"></div>
-            <span class="tooltip">${tooltips.readAloud}</span>
+            <span class="BRtooltip">${tooltips.readAloud}</span>
           </button>
         </li>`).insertBefore($el.find('.BRcontrols .BRicon.zoom_out').closest('li'));
     }

package/tests/jest/plugins/plugin.chapters.test.js

@@ -1,37 +1,36 @@
-import sinon from 'sinon';
+import sinon from "sinon";
 
-import BookReader from '@/src/BookReader.js';
-import '@/src/plugins/plugin.mobile_nav.js';
-import '@/src/plugins/plugin.chapters.js';
+import BookReader from "@/src/BookReader.js";
+import "@/src/plugins/plugin.mobile_nav.js";
+import "@/src/plugins/plugin.chapters.js";
+import { BookModel } from "@/src/BookReader/BookModel";
+import { deepCopy } from "../utils";
 
 const SAMPLE_TOC = [{
   "pagenum": "3",
   "level": 1,
   "label": "CHAPTER I",
-  "type": {"key": "/type/toc_item"},
+  "type": { "key": "/type/toc_item" },
   "title": "THE COUNTRY AND THE MISSION 1",
   "pageIndex": 3,
-},{
+}, {
   "pagenum": "17",
   "level": 1,
   "label": "CHAPTER II",
-  "type": {"key": "/type/toc_item"},
+  "type": { "key": "/type/toc_item" },
   "title": "THE COUNTRY AND THE MISSION 2",
   "pageIndex": 17,
-},
-{
+}, {
   "pagenum": "undefined",
   "level": 1,
   "label": "CHAPTER III",
-  "type": {"key": "/type/toc_item"},
+  "type": { "key": "/type/toc_item" },
   "title": "THE COUNTRY AND THE MISSION 3",
-  "pageIndex": undefined,
-},
-{
+}, {
   "pagenum": "40",
   "level": 1,
   "label": "CHAPTER IV",
-  "type": {"key": "/type/toc_item"},
+  "type": { "key": "/type/toc_item" },
   "title": "THE COUNTRY AND THE MISSION 4",
   "pageIndex": 40,
 }];
@@ -41,89 +40,107 @@ const SAMPLE_TOC_UNDEF = [
     "pagenum": "undefined",
     "level": 1,
     "label": "CHAPTER I",
-    "type": {"key": "/type/toc_item"},
+    "type": { "key": "/type/toc_item" },
     "title": "THE COUNTRY AND THE MISSION 1",
-    "pageIndex": undefined,
   },
   {
     "pagenum": "undefined",
     "level": 1,
     "label": "CHAPTER II",
-    "type": {"key": "/type/toc_item"},
+    "type": { "key": "/type/toc_item" },
     "title": "THE COUNTRY AND THE MISSION 2",
-    "pageIndex": undefined,
-  }
+  },
 ];
 
-/** @type {BookReader} */
-let br;
-beforeEach(() => {
-  $.ajax = jest.fn().mockImplementation((args) => {
-    return Promise.resolve([{
-      table_of_contents: SAMPLE_TOC,
-    }]);
-  });
-  document.body.innerHTML = '<div id="BookReader">';
-  br = new BookReader();
-});
-
 afterEach(() => {
-  jest.clearAllMocks();
+  sinon.restore();
 });
 
-describe('Plugin: Menu Toggle', () => {
-  test('has option flag', () => {
-    expect(BookReader.defaultOptions.enableChaptersPlugin).toEqual(true);
-  });
-  test('has added BR property: olHost', () => {
-    expect(br).toHaveProperty('olHost');
-    expect(br.olHost).toBeTruthy();
-  });
-  test('has added BR property: bookId', () => {
-    expect(br).toHaveProperty('bookId');
-    expect(br.bookId).toBeFalsy();
-  });
-  test('fetches OL Book Record on init', () => {
-    br.getOpenLibraryRecord = jest.fn();
-    br.init();
-    expect(br.getOpenLibraryRecord).toHaveBeenCalled();
-  });
-  test('Updates Table of Contents when available', () => {
-    br.init();
-    expect($.ajax).toHaveBeenCalled();
+describe("BRChaptersPlugin", () => {
+  beforeEach(() => {
+    sinon.stub(BookModel.prototype, "getPageIndex").callsFake((str) =>
+      parseFloat(str)
+    );
   });
-});
 
-describe('updateTOCState', () => {
+  describe("_chaptersInit", () => {
+    test("does not render when no open library record", async () => {
+      const fakeBR = {
+        options: {},
+        getOpenLibraryRecord: async () => null,
+        _chaptersRender: sinon.stub(),
+      };
+      await BookReader.prototype._chapterInit.call(fakeBR);
+      expect(fakeBR._chaptersRender.callCount).toBe(0);
+    });
 
-  beforeEach(() => {
-    window.HTMLElement.prototype.scrollIntoView = sinon.stub();
-    br.book.getPageIndex = (str) => parseFloat(str);
-    br.init();
-  });
+    test("does not render when open library record with no TOC", async () => {
+      const fakeBR = {
+        options: {},
+        getOpenLibraryRecord: async () => ({ key: "/books/OL1M" }),
+        _chaptersRender: sinon.stub(),
+      };
+      await BookReader.prototype._chapterInit.call(fakeBR);
+      expect(fakeBR._chaptersRender.callCount).toBe(0);
+    });
 
-  test('Test page is one of TOC', () => {
-    br.updateTOCState(20, SAMPLE_TOC);
-    expect($('li.BRtable-contents-el')[1].classList.contains('current-chapter'));
+    test("renders if valid TOC on open library", async () => {
+      const fakeBR = {
+        options: {},
+        bind: sinon.stub(),
+        book: {
+          getPageIndex: (str) => parseFloat(str),
+        },
+        getOpenLibraryRecord: async () => ({
+          "title": "The Adventures of Sherlock Holmes",
+          "table_of_contents": deepCopy(SAMPLE_TOC_UNDEF),
+          "ocaid": "adventureofsherl0000unse",
+        }),
+        _chaptersRender: sinon.stub(),
+      };
+      await BookReader.prototype._chapterInit.call(fakeBR);
+      expect(fakeBR._chaptersRender.callCount).toBe(1);
+    });
   });
 
-  test('Only one element has .current-chapter', () => {
-    br.updateTOCState(9, SAMPLE_TOC);
-    expect($('li.BRtable-contents-el.current-chapter').length).toBe(1);
+  describe('_chaptersRender', () => {
+    test('renders markers and panel', () => {
+      const fakeBR = {
+        _tocEntries: SAMPLE_TOC,
+        _chaptersRenderMarker: sinon.stub(),
+        shell: {
+          menuProviders: {},
+          updateMenuContents: sinon.stub(),
+        }
+      };
+      BookReader.prototype._chaptersRender.call(fakeBR);
+      expect(fakeBR.shell.menuProviders['chapters']).toBeTruthy();
+      expect(fakeBR.shell.updateMenuContents.callCount).toBe(1);
+      expect(fakeBR._chaptersRenderMarker.callCount).toBeGreaterThan(1);
+    });
   });
 
-  test('No chapter has .current-chapter if current index is < than any chapter index', () => {
-    br.updateTOCState(1, SAMPLE_TOC);
-    expect($('li.BRtable-contents-el.current-chapter').length).toBe(0);
-  });
+  describe('_chaptersUpdateCurrent', () => {
+    test('highlights the current chapter', () => {
+      const fakeBR = {
+        mode: 2,
+        firstIndex: 16,
+        displayedIndices: [16, 17],
+        _tocEntries: SAMPLE_TOC,
+        _chaptersPanel: {
+          currentChapter: null,
+        }
+      };
+      BookReader.prototype._chaptersUpdateCurrent.call(fakeBR);
+      expect(fakeBR._chaptersPanel.currentChapter).toEqual(SAMPLE_TOC[1]);
 
-  test('if current index == chapter index ', () => {
-    br.updateTOCState(17, SAMPLE_TOC);
-    expect($('li.BRtable-contents-el')[1].classList.contains('current-chapter'));
-  });
+      fakeBR.mode = 1;
+      BookReader.prototype._chaptersUpdateCurrent.call(fakeBR);
+      expect(fakeBR._chaptersPanel.currentChapter).toEqual(SAMPLE_TOC[0]);
 
-  test('No chapter has .current-chapter if all chapter have undefined pageIndex ', () => {
-    br.updateTOCState(10, SAMPLE_TOC_UNDEF);
-    expect($('li.BRtable-contents-el.current-chapter').length).toBe(0);
+      fakeBR.firstIndex = 0;
+      BookReader.prototype._chaptersUpdateCurrent.call(fakeBR);
+      expect(fakeBR._chaptersPanel.currentChapter).toBeUndefined();
+    });
   });
 });