@internetarchive/bookreader 5.0.0-66 → 5.0.0-68

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/search/plugin.search.js

@@ -2,9 +2,6 @@
 /* global BookReader */
 /**
  * Plugin for Archive.org book search
- * NOTE: This script must be loaded AFTER `plugin.mobile_nav.js`
- * as it mutates mobile nav drawer
- *
  * Events fired at various points throughout search processing are published
  * on the document DOM element. These can be subscribed to using jQuery's event
  * binding method `$.fn.on`. All of the events are prefixed with a BookReader

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/e2e/base.test.js

@@ -1,7 +1,6 @@
 import { runBaseTests } from './helpers/base';
 import BookReader from './models/BookReader';
-import { runDesktopSearchTests } from './helpers/desktopSearch';
-// import { runMobileSearchTests } from './helpers/mobileSearch';
+import { runSearchTests } from './helpers/search';
 import params from './helpers/params';
 
 const ocaids = params.ocaids || [
@@ -22,14 +21,7 @@ ocaids.forEach(ocaid => {
   runBaseTests(new BookReader());
 
 
-  fixture `Desktop Search Tests for: ${ocaid}`
+  fixture `Search Tests for: ${ocaid}`
     .page `${url}`;
-  runDesktopSearchTests(new BookReader());
-
-  // Todo: deprecated, will remove once mmenu is removed.
-  // fixture `Mobile Search Tests for: ${ocaid}`
-  //   .page `${url}`
-  // runMobileSearchTests(new BookReader());
-
-
+  runSearchTests(new BookReader());
 });

package/tests/e2e/helpers/base.js

@@ -53,14 +53,14 @@ export function runBaseTests (br) {
   test('nav menu displays properly', async t => {
     const { nav } = br;
 
-    await t.expect(nav.desktop.goLeft.visible).ok();
-    await t.expect(nav.desktop.goRight.visible).ok();
-    await t.expect(nav.desktop.mode1Up.visible).ok();
-    await t.expect(nav.desktop.mode2Up.visible).ok();
-    await t.expect(nav.desktop.modeThumb.visible).ok();
-    await t.expect(nav.desktop.zoomIn.visible).ok();
-    await t.expect(nav.desktop.zoomOut.visible).ok();
-    await t.expect(nav.desktop.fullScreen.visible).ok();
+    await t.expect(nav.goLeft.visible).ok();
+    await t.expect(nav.goRight.visible).ok();
+    await t.expect(nav.mode1Up.visible).ok();
+    await t.expect(nav.mode2Up.visible).ok();
+    await t.expect(nav.modeThumb.visible).ok();
+    await t.expect(nav.zoomIn.visible).ok();
+    await t.expect(nav.zoomOut.visible).ok();
+    await t.expect(nav.fullScreen.visible).ok();
   });
 
   test("Canonical URL has no initial parameters", async t => {
@@ -87,7 +87,7 @@ export function runBaseTests (br) {
     const initialUrl = await getUrl();
 
     // Set Cookie by page navigation, wait for cookie
-    await t.click(nav.desktop.goNext);
+    await t.click(nav.goNext);
     await t.wait(PAGE_FLIP_WAIT_TIME);
 
     // reload canonical URL, wait for URL change
@@ -109,9 +109,9 @@ export function runBaseTests (br) {
     const { nav, BRcontainer} = br;
 
     // Go to next page, so we can go previous if at front cover
-    await t.click(nav.desktop.goNext);
+    await t.click(nav.goNext);
     await t.wait(PAGE_FLIP_WAIT_TIME);
-    await t.click(nav.desktop.goNext);
+    await t.click(nav.goNext);
     await t.wait(PAGE_FLIP_WAIT_TIME);
 
     const onLoadBrState = BRcontainer.child(0);
@@ -119,7 +119,7 @@ export function runBaseTests (br) {
     const origImg1Src = await initialImages.nth(0).getAttribute('src');
     const origImg2Src = await initialImages.nth(-1).getAttribute('src');
 
-    await t.click(nav.desktop.goPrev);
+    await t.click(nav.goPrev);
     await t.wait(PAGE_FLIP_WAIT_TIME);
 
     const nextBrState = Selector('.BRcontainer').child(0);
@@ -144,7 +144,7 @@ export function runBaseTests (br) {
     // Note: this will fail on a R to L book if at front cover
     const { nav, BRcontainer} = br;
     // Flip away from cover
-    await t.click(nav.desktop.goNext);
+    await t.click(nav.goNext);
     await t.wait(PAGE_FLIP_WAIT_TIME);
 
     const onLoadBrState = BRcontainer.child(0);
@@ -152,7 +152,7 @@ export function runBaseTests (br) {
     const origImg1Src = await initialImages.nth(0).getAttribute('src');
     const origImg2Src = await initialImages.nth(-1).getAttribute('src');
 
-    await t.click(nav.desktop.goNext);
+    await t.click(nav.goNext);
     await t.wait(PAGE_FLIP_WAIT_TIME);
 
     const nextBrState = Selector('.BRcontainer').child(0);
@@ -173,28 +173,28 @@ export function runBaseTests (br) {
   test('Clicking `page flip buttons` updates location', async t => {
     const { nav } = br;
     // Page navigation creates params
-    await t.click(nav.desktop.goNext);
+    await t.click(nav.goNext);
     await t.expect(isPageInUrl()).eql(true);
     await t.expect(isModeInUrl('2up')).eql(true);
 
-    await t.click(nav.desktop.goPrev);
+    await t.click(nav.goPrev);
     await t.expect(isPageInUrl()).eql(true);
     await t.expect(isModeInUrl('2up')).eql(true);
   });
 
   test('Clicking `2 page view` brings up cur page + caching', async t => {
     const { nav } = br;
-    await t.click(nav.desktop.mode2Up);
+    await t.click(nav.mode2Up);
     await t.expect(Selector('.BRpagecontainer.BRpage-visible').count).eql(1);
     await t.expect(Selector('.BRpagecontainer').count).eql(3);
   });
 
   test('Clicking `1 page view` brings up 1 at a time', async t => {
     const { nav } = br;
-    await t.click(nav.desktop.mode1Up);
+    await t.click(nav.mode1Up);
 
     // Flip away from cover
-    await t.click(nav.desktop.goNext);
+    await t.click(nav.goNext);
     await t.wait(PAGE_FLIP_WAIT_TIME);
 
     // we usually pre-fetch the page in question & the 2 after it
@@ -203,7 +203,7 @@ export function runBaseTests (br) {
 
   test('Clicking `thumbnail view` brings up all of the page thumbnails', async t => {
     const { nav } = br;
-    await t.click(nav.desktop.modeThumb);
+    await t.click(nav.modeThumb);
     await t.expect(Selector('.BRpagecontainer').count).gte(3);
   });
 
@@ -213,12 +213,12 @@ export function runBaseTests (br) {
 
     await t.expect(br.BRcontainer.visible).ok();
     await t.expect(page.visible).ok();
-    await t.expect(nav.desktop.zoomOut.visible).ok();
+    await t.expect(nav.zoomOut.visible).ok();
 
     const initialBookHeight = await page.getBoundingClientRectProperty('height');
     const initialBookWidth = await page.getBoundingClientRectProperty('width');
 
-    await t.click(nav.desktop.zoomOut);
+    await t.click(nav.zoomOut);
 
     const zoomOutBookHeight = await page.getBoundingClientRectProperty('height');
     const zoomOutBookWidth = await page.getBoundingClientRectProperty('width');
@@ -233,12 +233,12 @@ export function runBaseTests (br) {
 
     await t.expect(br.BRcontainer.visible).ok();
     await t.expect(page.visible).ok();
-    await t.expect(nav.desktop.zoomIn.visible).ok();
+    await t.expect(nav.zoomIn.visible).ok();
 
     const initialBookHeight = await page.getBoundingClientRectProperty('height');
     const initialBookWidth = await page.getBoundingClientRectProperty('width');
 
-    await t.click(nav.desktop.zoomIn);
+    await t.click(nav.zoomIn);
 
     const zoomInBookHeight = await page.getBoundingClientRectProperty('height');
     const zoomIntBookWidth = await page.getBoundingClientRectProperty('width');
@@ -253,10 +253,10 @@ export function runBaseTests (br) {
 
     // initial in-page
     await t.expect(BRcontainer.getBoundingClientRectProperty('width')).lte(windowWidth);
-    await t.click(nav.desktop.fullScreen);
+    await t.click(nav.fullScreen);
     // full screen
     await t.expect(BRcontainer.getBoundingClientRectProperty('width')).eql(windowWidth);
-    await t.click(nav.desktop.fullScreen);
+    await t.click(nav.fullScreen);
     // in-page
     await t.expect(BRcontainer.getBoundingClientRectProperty('width')).lte(windowWidth);
   });

package/tests/e2e/helpers/rightToLeft.js

@@ -4,20 +4,20 @@ const getPageUrl = ClientFunction(() => window.location.href);
 export function runRightToLeftTests (br) {
   test('Right to Left - correct initialization in two-page view', async t => {
     const { nav, BRcontainer} = br;
-    await t.click(nav.desktop.mode2Up);
+    await t.click(nav.mode2Up);
 
     //checking right leaf edge is not in tree
     await t.expect(BRcontainer.find('.br-mode-2up__leafs--left').count).eql(1);
     await t.expect(BRcontainer.find('.br-mode-2up__leafs--right').count).eql(0);
 
     //checks slider is in correct position
-    await t.expect(nav.desktop.sliderRange.getStyleProperty('width')).eql('0px');
+    await t.expect(nav.sliderRange.getStyleProperty('width')).eql('0px');
   });
 
   test('Right to Left - assuring flipping left goes to next page', async t => {
     const { nav } = br;
-    await t.click(nav.desktop.mode2Up);
-    await t.click(nav.desktop.goLeft);
+    await t.click(nav.mode2Up);
+    await t.click(nav.goLeft);
     await t.expect(getPageUrl()).match(/page\/n1/);
   });
 }