@internetarchive/bookreader 5.0.0-5-multiple-files → 5.0.0-50-a1

package/src/BookNavigator/volumes/volumes.js

@@ -1,6 +1,5 @@
-import { css, html, LitElement } from 'lit-element';
-import { nothing } from 'lit-html'
-import { repeat } from 'lit-html/directives/repeat';
+import { css, html, LitElement, nothing } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
 
 export class Volumes extends LitElement {
   static get properties() {
@@ -8,23 +7,44 @@ export class Volumes extends LitElement {
       subPrefix: { type: String },
       hostUrl: { type: String },
       viewableFiles: { type: Array },
-      isSortAscending: { type: Boolean }
+      sortOrderBy: { type: String },
     };
   }
 
   constructor() {
     super();
-    this.viewableFiles = [];
     this.hostUrl = '';
+    this.sortOrderBy = '';
     this.subPrefix = '';
-    this.isSortAscending = false;
+    this.viewableFiles = [];
+  }
+
+  firstUpdated() {
+    const activeFile = this.shadowRoot.querySelector('.content.active');
+    // allow for css animations to run before scrolling to active file
+    setTimeout(() => {
+      // scroll active file into view if needed
+      // note: `scrollIntoViewIfNeeded` handles auto-scroll gracefully for Chrome, Safari
+      // Firefox does not have this capability yet as it does not support `scrollIntoViewIfNeeded`
+      if (activeFile?.scrollIntoViewIfNeeded) {
+        activeFile?.scrollIntoViewIfNeeded(true);
+        return;
+      }
+
+      // Todo: support `scrollIntoView` or `parentContainer.crollTop = x` for FF & "IE 11"
+      // currently, the hard `position: absolutes` misaligns subpanel when `scrollIntoView` is applied :(
+    }, 350);
   }
 
   volumeItemWithImageTitle(item) {
+    const hrefUrl = this.sortOrderBy === 'default'
+      ? `${this.hostUrl}${item.url_path}`
+      : `${this.hostUrl}${item.url_path}?sort=${this.sortOrderBy}`;
+
     return html`
       <li class="content active">
         <div class="separator"></div>
-        <a class="container" href="${this.hostUrl}${item.url_path}">
+        <a class="container" href="${hrefUrl}">
           <div class="image">
             <img src="${item.image}">
           </div>
@@ -34,51 +54,26 @@ export class Volumes extends LitElement {
           </div>
         </a>
       </li>
-    `
+    `;
   }
 
   volumeItem(item) {
-    const activeClass = this.subPrefix === item.file_subprefix ? 'active' : ''
+    const activeClass = this.subPrefix === item.file_subprefix ? ' active' : '';
+
+    const hrefUrl = this.sortOrderBy === 'default'
+      ? `${this.hostUrl}${item.url_path}`
+      : `${this.hostUrl}${item.url_path}?sort=${this.sortOrderBy}`;
+
     return html`
       <li>
         <div class="separator"></div>
-        <div class="content ${activeClass}">
-          <a href="${this.hostUrl}${item.url_path}">
+        <div class="content${activeClass}">
+          <a href="https://${hrefUrl}">
             <p class="item-title">${item.title}</p>
           </a>
         </div>
       </li>
-    `
-  }
-
-  sortVolumes() {
-    this.isSortAscending = !this.isSortAscending;
-    const sortedFiles = this.viewableFiles.sort((a, b) => {
-      if (this.isSortAscending) return a.title.localeCompare(b.title);
-      else return b.title.localeCompare(a.title);
-    })
-
-    this.viewableFiles  = [...sortedFiles]
-  }
-
-  get sortAscendingIcon() {
-    const icon = html`<ia-icon icon="sortAscending"></ia-icon>`;
-    return html`<button class="sort-asc icon" @click=${() => this.sortVolumes()}>${icon}</button>`;
-  }
-
-  get sortDescendingIcon() {
-    const icon = html`<ia-icon icon="sortDescending"></ia-icon>`;
-    return html`<button class="sort-desc icon" @click=${() => this.sortVolumes()}>${icon}</button>`;
-  }
-
-  get headerIcon() {
-    return this.isSortAscending ? this.sortAscendingIcon : this.sortDescendingIcon
-  }
-
-  get headerSection() {
-    return html `<header>
-      <h3>Viewable Files (${this.viewableFiles.length}) <span>${this.headerIcon}</span></h3> 
-    </header>`;
+    `;
   }
 
   get volumesList() {
@@ -88,14 +83,13 @@ export class Volumes extends LitElement {
         ${volumes}
         <div class="separator"></div> 
       </ul>
-    `
+    `;
   }
 
   render() {
     return html`
-      ${this.headerSection}
-      <div>${this.viewableFiles.length ? this.volumesList : nothing}</div>
-    `
+      ${this.viewableFiles.length ? this.volumesList : nothing}
+    `;
   }
 
   static get styles() {

package/src/BookReader/BookModel.js

@@ -26,39 +26,10 @@ export class BookModel {
 
     /** @type {{width: number, height: number}} memoize storage */
     this._medianPageSize = null;
-    /** @deprecated @type {{width: number, height: number}} memoize storage */
-    this._medianPageSizePixels = null;
     /** @type {[PageData[], number]} */
     this._getDataFlattenedCached = null;
   }
 
-  /**
-   * @deprecated Use getMedianPageSizeInches
-   * Memoized
-   * @return {{width: number, height: number}}
-   */
-  getMedianPageSize() {
-    if (this._medianPageSizePixels) {
-      return this._medianPageSizePixels;
-    }
-
-    // A little expensive but we just do it once
-    const widths = [];
-    const heights = [];
-    for (let i = 0; i < this.getNumLeafs(); i++) {
-      widths.push(this.getPageWidth(i));
-      heights.push(this.getPageHeight(i));
-    }
-
-    widths.sort();
-    heights.sort();
-    this._medianPageSizePixels = {
-      width: widths[Math.floor(widths.length / 2)],
-      height: heights[Math.floor(heights.length / 2)]
-    };
-    return this._medianPageSizePixels;
-  }
-
   /** Get median width/height of page in inches. Memoized for performance. */
   getMedianPageSizeInches() {
     if (this._medianPageSize) {

package/src/BookReader/DebugConsole.js

@@ -19,7 +19,7 @@ export class DebugConsole {
     </form>`);
     this.$log.append(this.$form);
 
-    this.$form.submit(ev => {
+    this.$form.on("submit", ev => {
       ev.preventDefault();
       const result = eval(this.$form.find('input').val());
       this.logToScreen([result]);
@@ -29,7 +29,7 @@ export class DebugConsole {
     console.log = (...args) => {
       _realLog(...args);
       this.logToScreen(args);
-    }
+    };
 
     window.onerror = (...args) => this.logToScreen(args);
   }
@@ -40,7 +40,7 @@ export class DebugConsole {
    */
   logToScreen(args) {
     const html = args.map(JSON.stringify).join(',');
-    const $lastEntry = this.$log.children('.log-entry:last-child')
+    const $lastEntry = this.$log.children('.log-entry:last-child');
     if ($lastEntry.find('.entry-code').html() == html) {
       $lastEntry.find('.count').text(`(${++this.currentRun})`);
     } else {

package/src/BookReader/DragScrollable.js

@@ -0,0 +1,233 @@
+// @ts-check
+/*
+ * jQuery dragscrollable Plugin
+ * Based off version: 1.0 (25-Jun-2009)
+ * Copyright (c) 2009 Miquel Herrera
+ *
+ * Portions Copyright (c) 2010 Reg Braithwaite
+ *          Copyright (c) 2010 Internet Archive / Michael Ang
+ *          Copyright (c) 2016 Internet Archive / Richard Caceres
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ */
+
+/**
+ * @param {string} string_of_events
+ * @param {string} ns
+ * @returns
+ */
+function append_namespace(string_of_events, ns) {
+  return string_of_events
+    .split(' ')
+    .map(event_name => event_name + ns)
+    .join(' ');
+}
+
+function left_top(event) {
+  /** @type {number} */
+  let x;
+  /** @type {number} */
+  let y;
+  if (typeof(event.clientX) != 'undefined') {
+    x = event.clientX;
+    y = event.clientY;
+  }
+  else if (typeof(event.screenX) != 'undefined') {
+    x = event.screenX;
+    y = event.screenY;
+  }
+  else if (typeof(event.targetTouches) != 'undefined') {
+    x = event.targetTouches[0].pageX;
+    y = event.targetTouches[0].pageY;
+  }
+  else if (typeof(event.originalEvent) == 'undefined') {
+    console.error("don't understand x and y for " + event.type, event);
+  }
+  else if (typeof(event.originalEvent.clientX) != 'undefined') {
+    x = event.originalEvent.clientX;
+    y = event.originalEvent.clientY;
+  }
+  else if (typeof(event.originalEvent.screenX) != 'undefined') {
+    x = event.originalEvent.screenX;
+    y = event.originalEvent.screenY;
+  }
+  else if (typeof(event.originalEvent.targetTouches) != 'undefined') {
+    x = event.originalEvent.targetTouches[0].pageX;
+    y = event.originalEvent.targetTouches[0].pageY;
+  }
+
+  return { left: x, top: y };
+}
+
+const DEFAULT_OPTIONS = {
+  /**
+   * @type {String|HTMLElement} jQuery selector to apply to each wrapped element to
+   * find which will be the dragging elements. Defaults to the first child of scrollable
+   * element
+   */
+  dragSelector: '>:first',
+
+  /** Will the dragging element accept propagated events? default is yes, a propagated
+   * mouse event on a inner element will be accepted and processed. If set to false,
+   * only events originated on the draggable elements will be processed. */
+  acceptPropagatedEvent: true,
+
+  /**
+   * Prevents the event to propagate further effectively disabling other default actions
+   */
+  preventDefault: true,
+
+  dragstart: 'mousedown touchstart',
+  dragcontinue: 'mousemove touchmove',
+  dragend: 'mouseup touchend', // mouseleave
+  dragMinDistance: 5,
+  namespace: '.ds',
+
+  /** Scroll the window rather than the element */
+  scrollWindow: false,
+};
+
+/**
+ * Adds the ability to manage elements scroll by dragging
+ * one or more of its descendant elements. Options parameter
+ * allow to specifically select which inner elements will
+ * respond to the drag events.
+ *  usage examples:
+ *
+ *  To add the scroll by drag to the element id=viewport when dragging its
+ *  first child accepting any propagated events
+ *	`new DragScrollable($('#viewport')[0]);`
+ *
+ *  To add the scroll by drag ability to any element div of class viewport
+ *  when dragging its first descendant of class dragMe responding only to
+ *  evcents originated on the '.dragMe' elements.
+ *	```js
+ *  new DragScrollable($('div.viewport')[0], {
+ *      dragSelector: '.dragMe:first',
+ *	    acceptPropagatedEvent: false
+ *  });
+ * ```
+ *
+ *  Notice that some 'viewports' could be nested within others but events
+ *  would not interfere as acceptPropagatedEvent is set to false.
+ */
+export class DragScrollable {
+  /**
+   * @param {HTMLElement} element
+   * @param {Partial<DEFAULT_OPTIONS>} options
+   */
+  constructor(element, options = {}) {
+    this.handling_element = $(element);
+    /** @type {typeof DEFAULT_OPTIONS} */
+    this.settings = $.extend({}, DEFAULT_OPTIONS, options || {});
+    this.firstCoord = { left: 0, top: 0 };
+    this.lastCoord = { left: 0, top: 0 };
+
+    this.settings.dragstart = append_namespace(this.settings.dragstart, this.settings.namespace);
+    this.settings.dragcontinue = append_namespace(this.settings.dragcontinue, this.settings.namespace);
+    //settings.dragend = append_namespace(settings.dragend, settings.namespace);
+
+    // Set mouse initiating event on the desired descendant
+    this.handling_element.find(this.settings.dragSelector)
+      .on(this.settings.dragstart, this._dragStartHandler);
+  }
+
+  _shouldAbort() {
+    const isTouchDevice = !!('ontouchstart' in window) || !!('msmaxtouchpoints' in window.navigator);
+    return isTouchDevice;
+  }
+
+  /** @param {MouseEvent} event */
+  _dragStartHandler = (event) => {
+    if (this._shouldAbort()) { return true; }
+
+    // mousedown, left click, check propagation
+    if (event.which > 1 ||
+    (!this.settings.acceptPropagatedEvent && event.target != this.handling_element[0])) {
+      return false;
+    }
+
+    // Initial coordinates will be the last when dragging
+    this.lastCoord = this.firstCoord = left_top(event);
+
+    this.handling_element
+      .on(this.settings.dragcontinue, this._dragContinueHandler)
+    //.on(this.settings.dragend, this._dragEndHandler)
+    ;
+
+    // Note, we bind using addEventListener so we can use "capture" binding
+    // instead of "bubble" binding
+    this.settings.dragend.split(' ').forEach(event_name => {
+      this.handling_element[0].addEventListener(event_name, this._dragEndHandler, true);
+    });
+
+    if (this.settings.preventDefault) {
+      event.preventDefault();
+      return false;
+    }
+  }
+
+  /** @param {MouseEvent} event */
+  _dragContinueHandler = (event) => { // User is dragging
+    // console.log('drag continue');
+    if (this._shouldAbort()) { return true; }
+
+    const lt = left_top(event);
+
+    // How much did the mouse move?
+    const delta = {
+      left: (lt.left - this.lastCoord.left),
+      top: (lt.top - this.lastCoord.top)
+    };
+
+    const scrollTarget = this.settings.scrollWindow ? $(window) : this.handling_element;
+
+    // Set the scroll position relative to what ever the scroll is now
+    scrollTarget.scrollLeft( scrollTarget.scrollLeft() - delta.left );
+    scrollTarget.scrollTop(	scrollTarget.scrollTop() - delta.top );
+
+    // Save where the cursor is
+    this.lastCoord = lt;
+
+    if (this.settings.preventDefault) {
+      event.preventDefault();
+      return false;
+    }
+  }
+
+  /** @param {MouseEvent} event */
+  _dragEndHandler = (event) => { // Stop scrolling
+    //console.log('dragEndHandler');
+
+    if (this._shouldAbort()) { return true; }
+
+    this.handling_element
+      .off(this.settings.dragcontinue)
+      // Note, for some reason, even though I removeEventListener below,
+      // this call to unbind is still necessary. I don't know why.
+      .off(this.settings.dragend);
+
+    // Note, we bind using addEventListener so we can use "capture" binding
+    // instead of "bubble" binding
+    this.settings.dragend.split(' ').forEach(event_name => {
+      this.handling_element[0].removeEventListener(event_name, this._dragEndHandler, true);
+    });
+
+    // How much did the mouse move total?
+    const delta = {
+      left: Math.abs(this.lastCoord.left - this.firstCoord.left),
+      top: Math.abs(this.lastCoord.top - this.firstCoord.top)
+    };
+    const distance = Math.max(delta.left, delta.top);
+
+    // Allow event to propagate if min distance was not achieved
+    if (this.settings.preventDefault && distance > this.settings.dragMinDistance) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+      return false;
+    }
+  }
+}