@internetarchive/bookreader 5.0.0-9-multiple-files → 5.0.0-90

package/src/plugins/plugin.mobile_nav.js

@@ -1,287 +0,0 @@
-/* global BookReader */
-/**
- * Adds mobile navigation at responsive breakpoint
- */
-
-import * as utils from '../BookReader/utils.js';
-import 'jquery.mmenu/dist/js/jquery.mmenu.min.js';
-import 'jquery.mmenu/dist/addons/navbars/jquery.mmenu.navbars.min.js';
-
-//contains all filters and labels for checkboxs
-const FILTERLIST = [
-  {
-    filter: "grayscale(100%)",
-    label: "Grayscale"
-  },
-  {
-    filter: "brightness(120%)",
-    label: "High brightness"
-  },
-  {
-    filter: "invert(100%)",
-    label: "Inverted (dark mode)"
-  },
-  {
-    filter: "contrast(120%)",
-    label: "High contrast"
-  },
-]
-
-jQuery.extend(BookReader.defaultOptions, {
-  enableMobileNav: true,
-  mobileNavTitle: 'Internet Archive',
-  mobileNavFullscreenOnly: false,
-});
-
-BookReader.prototype.setup = (function(super_) {
-  return function (options) {
-    super_.call(this, options);
-
-    this.enableMobileNav = options.enableMobileNav;
-    this.mobileNavTitle = options.mobileNavTitle;
-    this.mobileNavFullscreenOnly = options.mobileNavFullscreenOnly;
-
-    this.refs.$mmenu = null;
-  };
-})(BookReader.prototype.setup);
-
-
-// Extend initToolbar
-BookReader.prototype.initToolbar = (function (super_) {
-  return function (mode, ui) {
-    let $mmenuEl;
-    if (this.enableMobileNav) {
-      const $drawerEl = this.buildMobileDrawerElement();
-      this.refs.$br.append($drawerEl);
-
-      // Render info into mobile info before mmenu
-      this.buildInfoDiv(this.$('.BRmobileInfo'));
-      this.buildShareDiv(this.$('.BRmobileShare'));
-
-      $mmenuEl = $drawerEl;
-      $mmenuEl.mmenu({
-        navbars: [
-          { "position": "top" },
-        ],
-        navbar: {
-          add: true,
-          title: this.mobileNavTitle,
-          titleLink: 'panel'
-        },
-        extensions: [ "panelshadow" ],
-      }, {
-        offCanvas: {
-          wrapPageIfNeeded: false,
-          zposition: 'next',
-          pageSelector: this.el,
-        }
-      });
-
-      const $BRpageviewField = $mmenuEl.find('.BRpageviewValue');
-      $mmenuEl.data('mmenu').bind('opened', () => {
-        // Update "Link to this page view" link
-        if ($BRpageviewField.length) {
-          $BRpageviewField.val(window.location.href);
-        }
-      });
-
-      //apply filters when checkboxs clicked
-      $drawerEl.find('.BRcheckbox-filters').click(() => applyFilters($drawerEl, this));
-
-      // Bind mobile switch buttons
-      $drawerEl.find('.DrawerLayoutButton.one_page_mode').click(
-        () => this.switchMode(this.constMode1up));
-      $drawerEl.find('.DrawerLayoutButton.two_page_mode').click(
-        () => this.switchMode(this.constMode2up));
-      $drawerEl.find('.DrawerLayoutButton.thumbnail_mode').click(
-        () => this.switchMode(this.constModeThumb));
-
-      if (this.mobileNavFullscreenOnly) {
-        $(document.body).addClass('BRbodyMobileNavEnabledFullscreen');
-      } else {
-        $(document.body).addClass('BRbodyMobileNavEnabled');
-      }
-
-      this.refs.$mmenu = $mmenuEl;
-
-    }
-
-    // Call the parent method at the end, because it binds events to DOM
-    super_.apply(this, arguments);
-
-
-    if (this.enableMobileNav) {
-      // Need to bind more, console after toolbar is initialized
-      this.$('.BRmobileHamburger').click(() => {
-        if ($mmenuEl.data('mmenu').getInstance().vars.opened) {
-          $mmenuEl.data('mmenu').close();
-        } else {
-          $mmenuEl.data('mmenu').open();
-          this.trigger("mobileNavOpen");
-        }
-      });
-
-
-      const closeMobileMenu = (e) => {
-        // Need to close the mobile menu to reset DOM & Style
-        // driven by menu plugin
-        const width = $( window ).width();
-        const mobileMenuIsOpen = $mmenuEl.data('mmenu').getInstance().vars.opened;
-        // $brBreakPointMobile: 800px;
-        if (mobileMenuIsOpen && (width >= 800)) {
-          $mmenuEl.data('mmenu').close ();
-        }
-      };
-
-      window.addEventListener('resize', utils.debounce(closeMobileMenu, 900));
-    }
-  };
-})(BookReader.prototype.initToolbar);
-
-
-BookReader.prototype.buildToolbarElement = (function (super_) {
-  return function () {
-    const $el = super_.call(this);
-    if (this.enableMobileNav) {
-      const escapedTitle = BookReader.util.escapeHTML(this.bookTitle);
-      const toolbar = `
-        <span class="BRmobileHamburgerWrapper">
-          <button class="BRmobileHamburger"></button>
-          <span class="BRtoolbarMobileTitle" title="${escapedTitle}">${escapedTitle}</span>
-        </span>
-      `;
-      $el
-        .addClass('responsive')
-        .prepend($(toolbar));
-    }
-    return $el;
-  };
-})(BookReader.prototype.buildToolbarElement);
-
-/**
- * This method builds the html for the mobile drawer. It can be decorated to
- * extend the default drawer.
- * @return {jqueryElement}
- */
-BookReader.prototype.buildMobileDrawerElement = function() {
-  let experimentalHtml = '';
-  //builds filters checkbox html
-  if (this.enableExperimentalControls) {
-    experimentalHtml = `
-        <p class="DrawerSettingsTitle">Visual Adjustment</p>
-        <div class="BRcheckbox-group-filters">
-        `;
-    FILTERLIST.forEach( (el, i) => {
-      const checkboxHtml = `
-          <input type="checkbox" class="BRcheckbox-filters" id="filter${i}">
-          <label for="filter${i}" class="BRcheckbox-label-filters">${el.label}</label><br>
-        
-      `;
-      experimentalHtml = experimentalHtml.concat(checkboxHtml);
-    })
-    experimentalHtml = experimentalHtml.concat("</div>");
-  }
-
-
-  const settingsSection = `
-    <span>
-        <span class="DrawerIconWrapper">
-          <img class="DrawerIcon" src="${`${this.imagesBaseURL}icon_gear.svg`}" alt="settings-icon"/>
-        </span>
-        Settings
-    </span>
-    <div class=DrawerSettingsWrapper>
-        <div class="DrawerSettingsLayoutWrapper">
-          <button class="DrawerLayoutButton one_page_mode">
-            <img src="${this.imagesBaseURL}icon_one_page.svg" alt="Single Page"/>
-            <br>
-            One Page
-          </button>
-          <button class="DrawerLayoutButton two_page_mode TwoPagesButton">
-            <img src="${this.imagesBaseURL}icon_two_pages.svg" alt="Two Pages"/>
-            <br>
-            Two Pages
-          </button>
-          <button class="DrawerLayoutButton thumbnail_mode">
-            <img src="${this.imagesBaseURL}icon_thumbnails.svg" alt="Thumbnails"/>
-            <br>
-            Thumbnails
-          </button>
-        </div>
-        <br>
-        <div class="DrawerSettingsTitle">Zoom</div>
-        <button class='BRicon zoom_out'></button>
-        <button class='BRicon zoom_in'></button>
-        <br style="clear:both"><br><br>
-        ${experimentalHtml}
-    </div>
-  `;
-  const moreInfo = `
-    <span>
-        <span class="DrawerIconWrapper ">
-            <img class="DrawerIcon" src="${this.imagesBaseURL}icon_info.svg" alt="info-icon"/>
-        </span>
-        About This Book
-    </span>
-    <div class="BRmobileInfo"></div>
-  `;
-  const share = `
-    <span>
-      <span class="DrawerIconWrapper">
-        <img class="DrawerIcon" src="${this.imagesBaseURL}icon_share.svg" alt="info-share"/>
-      </span>
-      Share This Book
-    </span>
-    <div class="BRmobileShare"></div>
-  `;
-  const navMenu = `
-    <nav id="BRmobileMenu" class="BRmobileMenu">
-      <ul>
-        <li class="BRmobileMenu__settings">${settingsSection}</li>
-        <li class="BRmobileMenu__moreInfoRow">${moreInfo}</li>
-        <li class="BRmobileMenu__share">${share}</li>
-      </ul>
-    </nav>
-  `;
-
-  const $el = $(navMenu);
-  return $el;
-};
-
-/**
- * Mmenu moves itself out side of the root BookReader element, so we need to
- * include it in the scoped $ function.
- */
-BookReader.prototype.$ = (function (super_) {
-  return function (arg) {
-    let $results = super_.call(this, arg);
-    if (this.refs.$mmenu) {
-      $results = $results.add(this.refs.$mmenu.find(arg));
-    }
-    return $results;
-  };
-})(BookReader.prototype.$);
-
-/**
-* Dynamically creates styles combining different filters for BookReaders imgs
-* based on filters checkbox
-*/
-const applyFilters = (drawerEl, br) => {
-  let filterStr = "";
-
-  $('.BRcheckbox-filters').each(
-    (i, el) => {
-      br.refs.$br.removeClass("filter-applied");
-      if ($(el).is(':checked')) {
-        br.refs.$br.addClass($(el).attr("filter-applied"));
-        filterStr = filterStr + FILTERLIST[i].filter;
-      }
-    }
-  );
-  const filtersSheet = $("#filtersStyle")[0] || document.createElement('style');
-  filtersSheet.id = "filtersStyle";
-  filtersSheet.innerHTML = `.BRpagecontainer  img {
-            filter: ${filterStr};
-            -webkit-filter: ${filterStr};}`;
-  document.body.appendChild(filtersSheet);
-}

package/tests/BookReader/BookReaderPublicFunctions.test.js

@@ -1,171 +0,0 @@
-import BookReader from '../../src/BookReader';
-
-beforeAll(() => {
-  global.alert = jest.fn();
-})
-afterEach(() => {
-  jest.restoreAllMocks();
-});
-
-describe('BookReader.prototype.toggleFullscreen', ()  => {
-  test('uses `isFullscreen` to check fullscreen state', () => {
-    const isFSmock = jest.fn();
-    isFSmock.mockReturnValueOnce(false);
-    const br = new BookReader();
-    br.mode = br.constMode1up;
-    br.enterFullscreen = jest.fn();
-    br.isFullscreen = isFSmock;
-
-    br.toggleFullscreen();
-    expect(br.isFullscreen).toHaveBeenCalled();
-    expect(br.isFullscreen).toHaveBeenCalled();
-  });
-
-  test('will always emit an event', () => {
-    const br = new BookReader();
-    br.mode = br.constMode1up;
-    br.enterFullscreen = jest.fn();
-    br.trigger = jest.fn();
-    br.refs.$brContainer = {
-      css: jest.fn(),
-      animate: jest.fn()
-    }
-
-    br.toggleFullscreen();
-    expect(br.enterFullscreen).toHaveBeenCalled();
-  });
-
-  test('will start with opening fullscreen', () => {
-    const br = new BookReader();
-    br.mode = br.constMode1up;
-    br.enterFullscreen = jest.fn();
-
-    br.toggleFullscreen();
-    expect(br.enterFullscreen).toHaveBeenCalled();
-  });
-
-  test('will close fullscreen if BookReader is in fullscreen', () => {
-    const br = new BookReader();
-    br.mode = br.constMode1up;
-    br.exitFullScreen = jest.fn();
-    br.isFullscreenActive = true;
-
-    br.toggleFullscreen();
-    expect(br.exitFullScreen).toHaveBeenCalled();
-  });
-});
-
-describe('BookReader.prototype.enterFullscreen', ()  => {
-  test('will bind `_fullscreenCloseHandler` by default', () => {
-    const br = new BookReader();
-    br.mode = br.constMode1up;
-    br.switchMode = jest.fn();
-    br.updateBrClasses = jest.fn();
-    br.refs.$brContainer = {
-      css: jest.fn(),
-      animate: jest.fn(),
-    };
-    expect(br._fullscreenCloseHandler).toBeUndefined();
-
-    br.enterFullscreen();
-    expect(br._fullscreenCloseHandler).toBeDefined();
-  });
-
-  test('fires certain events when called', () => {
-    const br = new BookReader();
-    br.mode = br.constMode1up;
-    br.switchMode = jest.fn();
-    br.updateBrClasses = jest.fn();
-    br.trigger = jest.fn();
-    br.resize = jest.fn();
-    br.jumpToIndex = jest.fn();
-    const animateMock = (options, speed, style, callback) => {
-      callback();
-    };
-    br.refs.$brContainer = {
-      css: jest.fn(),
-      animate: animateMock,
-    };
-
-    br.enterFullscreen();
-    expect(br.switchMode).toHaveBeenCalledTimes(1);
-    expect(br.updateBrClasses).toHaveBeenCalledTimes(0); // book nav's fullscreen manager will set these classes
-    expect(br.trigger).toHaveBeenCalledTimes(1);
-    expect(br.resize).toHaveBeenCalledTimes(1);
-    expect(br.jumpToIndex).toHaveBeenCalledTimes(1);
-  });
-});
-
-describe('BookReader.prototype.exitFullScreen', () => {
-  test('fires certain events when called', () => {
-    const br = new BookReader();
-    br.mode = br.constMode1up;
-    br.switchMode = jest.fn();
-    br.updateBrClasses = jest.fn();
-    br.trigger = jest.fn();
-    br.resize = jest.fn();
-    const animateMock = (options, speed, style, callback) => {
-      callback();
-    };
-    br.refs.$brContainer = {
-      css: jest.fn(),
-      animate: animateMock,
-    };
-    br.exitFullScreen();
-    expect(br.switchMode).toHaveBeenCalledTimes(1);
-    expect(br.updateBrClasses).toHaveBeenCalledTimes(1);
-    expect(br.trigger).toHaveBeenCalledTimes(1);
-    expect(br.resize).toHaveBeenCalledTimes(1);
-  });
-});
-
-describe('BookReader.prototype.trigger', () => {
-  test('fires custom event', () => {
-    const br = new BookReader();
-    global.br = br;
-    global.dispatchEvent = jest.fn();
-
-    const props = {bar: 1};
-    br.trigger('foo', props);
-    expect(global.dispatchEvent.mock.calls.length).toBe(1);
-  });
-});
-
-describe('`BookReader.prototype.prev`', () => {
-  const br = new BookReader();
-  global.br = br;
-  br.trigger = jest.fn();
-  br.flipBackToIndex = jest.fn();
-  br.jumpToIndex = jest.fn();
-
-  test('does not take action if user is on front page', () => {
-    br.firstIndex = 0;
-    br.prev();
-    expect(br.trigger.mock.calls.length).toBe(0);
-    expect(br.flipBackToIndex.mock.calls.length).toBe(0);
-    expect(br.jumpToIndex.mock.calls.length).toBe(0);
-  });
-
-  describe('2up mode', () => {
-    test('fires event and turns the page', () => {
-      br.firstIndex = 10;
-      br.mode = br.constMode2up;
-      br.prev();
-      expect(br.jumpToIndex.mock.calls.length).toBe(0); // <--  does not get called
-      expect(br.trigger.mock.calls.length).toBe(1);
-      expect(br.flipBackToIndex.mock.calls.length).toBe(1);
-    });
-  })
-
-  describe('non 2up mode', () => {
-    test('jumps to provided index', () => {
-      br.firstIndex = 100;
-      br.mode = br.constMode1up;
-      br.prev();
-      expect(br.jumpToIndex.mock.calls.length).toBe(1);  // <--  gets called
-      expect(br.trigger.mock.calls.length).toBe(1); // <-- gets called by `jumpToIndex` internally
-      expect(br.flipBackToIndex.mock.calls.length).toBe(1); // <-- gets called by `jumpToIndex` internally
-    })
-  });
-});
-

package/tests/BookReader/DebugConsole.test.js

@@ -1,25 +0,0 @@
-import sinon from 'sinon';
-import { DebugConsole } from '../../src/BookReader/DebugConsole.js';
-
-beforeEach(() => {
-  sinon.stub(console, 'log');
-});
-afterEach(() => {
-  sinon.restore();
-});
-
-test('hijacks console.log', () => {
-  const _realLog = console.log;
-  expect(_realLog).toBe(console.log);
-  new DebugConsole().init();
-  expect(_realLog).not.toBe(console.log);
-});
-
-test('logging the same thing twice does not create more entries', () => {
-  const dc = new DebugConsole();
-  dc.init();
-  dc.logToScreen(['hello']);
-  dc.logToScreen(['hello']);
-  expect(dc.$log.children('.log-entry')).toHaveLength(1);
-  expect(dc.$log.find('.count').text()).toBe('(2)');
-});

package/tests/BookReader/Mode1Up.test.js

@@ -1,164 +0,0 @@
-import sinon from 'sinon';
-import { deepCopy } from '../utils.js';
-import { Mode1Up } from '../../src/BookReader/Mode1Up.js'
-import { BookModel } from '../../src/BookReader/BookModel.js';
-import { DEFAULT_OPTIONS } from '../../src/BookReader/options.js';
-const DEFAULT_PPI = DEFAULT_OPTIONS.ppi;
-
-/** @type {BookReaderOptions['data']} */
-const SAMPLE_DATA = [
-  [
-    { width: 123, height: 123, uri: 'https://archive.org/image0.jpg', pageNum: '1' },
-  ],
-  [
-    { width: 123, height: 123, uri: 'https://archive.org/image1.jpg', pageNum: '2' },
-    { width: 123, height: 123, uri: 'https://archive.org/image2.jpg', pageNum: '3' },
-  ],
-  [
-    { width: 123, height: 123, uri: 'https://archive.org/image3.jpg', pageNum: '4' },
-    { width: 123, height: 123, uri: 'https://archive.org/image4.jpg', pageNum: '5' },
-  ],
-  [
-    { width: 123, height: 123, uri: 'https://archive.org/image5.jpg', pageNum: '6' },
-  ],
-];
-
-describe('pagesWithBounds', () => {
-  test('Works with empty book', () => {
-    const br = { data: [] };
-    const book = new BookModel(br);
-    const mode = new Mode1Up(br, book);
-    expect(Array.from(mode.pagesWithBounds())).toHaveLength(0);
-  });
-
-  test('Iterates all pages', () => {
-    const br = { data: SAMPLE_DATA };
-    const book = new BookModel(br);
-    const mode = new Mode1Up(br, book);
-    expect(Array.from(mode.pagesWithBounds())).toHaveLength(6);
-  });
-
-  test('Computes bounds', () => {
-    const br = { data: SAMPLE_DATA };
-    const book = new BookModel(br);
-    const mode = new Mode1Up(br, book);
-    const x = Array.from(mode.pagesWithBounds());
-    expect(x.map(({top, bottom}) => [top, bottom].map(x => x.toFixed(1)))).toEqual([
-      ['0.0', '24.6'],
-      ['44.6', '69.2'],
-      ['89.2', '113.8'],
-      ['133.8', '158.4'],
-      ['178.4', '203.0'],
-      ['223.0', '247.6'],
-    ]);
-  });
-});
-
-describe('boundIntersection', () => {
-  const f = Mode1Up.boundIntersection;
-  test('Exactly equal', () => {
-    expect(f({top: 0, bottom: 10}, {top: 0, bottom: 10})).toBe(1);
-  });
-
-  test('A contains B', () => {
-    expect(f({top: 0, bottom: 10}, {top: 1, bottom: 2})).toBe(0.1);
-  });
-  test('A boundary contains B', () => {
-    expect(f({top: 0, bottom: 10}, {top: 0, bottom: 2})).toBe(0.2);
-  });
-  test('A contains top part of B', () => {
-    expect(f({top: 0, bottom: 10}, {top: 5, bottom: 15})).toBeCloseTo(5 / 15);
-  });
-  test('A contains bottom part of B', () => {
-    expect(f({top: 5, bottom: 10}, {top: 0, bottom: 6})).toBe(0.1);
-  });
-  test('A entirely above B', () => {
-    expect(f({top: 0, bottom: 10}, {top: 20, bottom: 30})).toBe(0);
-  });
-  test('A entirely below B', () => {
-    expect(f({top: 20, bottom: 30}, {top: 0, bottom: 10})).toBe(0);
-  });
-});
-
-describe('physicalInchesToDisplayPixels', () => {
-  test('0 case', () => {
-    const f = Mode1Up.prototype.physicalInchesToDisplayPixels;
-    expect(f(0, 1, 100)).toBe(0);
-  });
-  test('Misc case', () => {
-    const f = Mode1Up.prototype.physicalInchesToDisplayPixels;
-    expect(f(1, 1, 100)).toBe(100);
-    expect(f(1, 2, 100)).toBe(50);
-    expect(f(1, 1, 78)).toBe(78);
-  });
-});
-
-describe('calculateViewDimensions', () => {
-  test('Padding added for each page', () => {
-    const br = { data: SAMPLE_DATA };
-    const book = new BookModel(br);
-    const mode = new Mode1Up(br, book);
-    const pageSizeIn = 123 / DEFAULT_PPI;
-    const dims = mode.calculateViewDimensions(1, 2.5);
-    expect(dims.width).toBeCloseTo(mode.physicalInchesToDisplayPixels(pageSizeIn, 1));
-    expect(dims.height).toBeCloseTo(mode.physicalInchesToDisplayPixels(6 * pageSizeIn + 5 * 2.5, 1));
-  });
-
-  test('Reduction factor applied to each page/spacing individually', () => {
-    const br = { data: SAMPLE_DATA };
-    const book = new BookModel(br);
-    const mode = new Mode1Up(br, book);
-    const pageSizeIn = 123 / DEFAULT_PPI;
-    const dims = mode.calculateViewDimensions(2, 5);
-    expect(dims.width).toBeCloseTo(mode.physicalInchesToDisplayPixels(pageSizeIn, 2));
-    expect(dims.height).toBeCloseTo(mode.physicalInchesToDisplayPixels(6 * pageSizeIn + 5 * 5, 2));
-  });
-
-  test('Uses maximal width', () => {
-    const br = { data: deepCopy(SAMPLE_DATA) };
-    br.data.flat().forEach((page, i) => page.width = i);
-    const book = new BookModel(br);
-    const mode = new Mode1Up(br, book);
-    expect(mode.calculateViewDimensions().width).toBe(mode.physicalInchesToDisplayPixels(5 / DEFAULT_PPI));
-  });
-});
-
-describe('centerY', () => {
-  test('Computes the scroll position of the center of the screen', () => {
-    const $container = $(`
-      <div style="height: 500px">
-        <div style="height: 2500px" />
-      </div>`);
-    $container.scrollTop(1000);
-    expect(Mode1Up.prototype.centerY($container)).toBe(1250);
-  });
-
-  test('Handles no scroll', () => {
-    const $container = $(`
-      <div style="height: 1280px">
-        <div style="height: 500px" />
-      </div>`);
-    expect(Mode1Up.prototype.centerY($container)).toBe(640);
-  });
-});
-
-describe('centerX', () => {
-  test('Pages narrower than viewport', () => {
-    const $container = $(`<div style="width: 800px; height: 800px" />`);
-    const $pagesContainer = $(`<div style="width: 500px; height: 1600px" />`)
-      .appendTo($container);
-    // clientWidth doesn't work in jsdom, so stub it
-    sinon.stub($container, 'prop').returns(800);
-    expect(Mode1Up.prototype.centerX($container, $pagesContainer)).toBe(500);
-  });
-
-  test('Pages wider than viewport', () => {
-    const $container = $(`<div style="width: 800px; height: 800px; overflow: scroll;" />`);
-    const $pagesContainer = $(`<div style="width: 1200px; height: 1600px" />`)
-      .appendTo($container);
-    $container.scrollLeft(10);
-    // clientWidth doesn't work in jsdom, so stub it
-    sinon.stub($container, 'prop').returns(800);
-    expect(Mode1Up.prototype.centerX($container, $pagesContainer)).toBe(410);
-  });
-});