Merge pull request NYPL-Simplified#27 from d-i-t-a/feature/vertical-p…

…aging

Alternative behavior of nextPage(), previousPage() in scrolling mode

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@d-i-t-a/reader",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "A viewer application for EPUB files.",
   "repository": "https://github.com/d-i-t-a/R2D2BC",
   "main": "src/index.js",

src/navigator/IFrameNavigator.ts

@@ -1048,7 +1048,7 @@ export default class IFrameNavigator implements Navigator {
     }
 
     private handlePreviousPageClick(event: MouseEvent | TouchEvent | KeyboardEvent): void {
-        if (this.paginator) {
+        if (this.settings.getSelectedView() === this.paginator) {
             if (this.paginator.onFirstPage()) {
                 if (this.previousChapterLink) {
                     const position: Locator = {
@@ -1079,17 +1079,23 @@ export default class IFrameNavigator implements Navigator {
                 event.stopPropagation();
             }
         } else {
-            if (this.previousChapterLink) {
-                const position: Locator = {
-                    href: this.publication.getAbsoluteHref(this.previousChapterLink.href),
-                    locations: {
-                        progression: 0
-                    },
-                    type: this.previousChapterLink.type,
-                    title: this.previousChapterLink.title
-                };
+            if (this.scroller.atTop()) {
+                if (this.previousChapterLink) {
+                    const position: Locator = {
+                        href: this.publication.getAbsoluteHref(this.previousChapterLink.href),
+                        locations: {
+                            progression: 0
+                        },
+                        type: this.previousChapterLink.type,
+                        title: this.previousChapterLink.title
+                    };
 
-                this.navigate(position);
+                    this.navigate(position);
+                }
+            } else {
+                this.scroller.goToPreviousPage();
+                this.updatePositionInfo();
+                this.saveCurrentReadingPosition();
             }
             if (event) {
                 event.preventDefault();
@@ -1099,7 +1105,7 @@ export default class IFrameNavigator implements Navigator {
     }
 
     private handleNextPageClick(event: MouseEvent | TouchEvent | KeyboardEvent) {
-        if (this.paginator) {
+        if (this.settings.getSelectedView() === this.paginator) {
             if (this.paginator.onLastPage()) {
                 if (this.nextChapterLink) {
                     const position: Locator = {
@@ -1129,17 +1135,23 @@ export default class IFrameNavigator implements Navigator {
                 event.stopPropagation();
             }
         } else {
-            if (this.nextChapterLink) {
-                const position: Locator = {
-                    href: this.publication.getAbsoluteHref(this.nextChapterLink.href),
-                    locations: {
-                        progression: 0
-                    },
-                    type: this.nextChapterLink.type,
-                    title: this.nextChapterLink.title
-                };
+            if (this.scroller.atBottom()) {
+                if (this.nextChapterLink) {
+                    const position: Locator = {
+                        href: this.publication.getAbsoluteHref(this.nextChapterLink.href),
+                        locations: {
+                            progression: 0
+                        },
+                        type: this.nextChapterLink.type,
+                        title: this.nextChapterLink.title
+                    };
 
-                this.navigate(position);
+                    this.navigate(position);
+                }
+            } else {
+                this.scroller.goToNextPage();
+                this.updatePositionInfo();
+                this.saveCurrentReadingPosition();
             }
             if (event) {
                 event.preventDefault();

src/views/ContinuousBookView.ts

@@ -0,0 +1,16 @@
+/*
+ * Project: R2D2BC - Web Reader
+ * Developers: Aferdita Muriqi
+ * Copyright (c) 2019. DITA. All rights reserved.
+ * Developed on behalf of: Bokbasen AS (https://www.bokbasen.no)
+ * Licensed to: Bokbasen AS and CAST under one or more contributor license agreements.
+ * Use of this source code is governed by a BSD-style license that can be found in the LICENSE file.
+ */
+
+import BookView from "./BookView";
+
+interface ContinuousBookView extends BookView {
+    goToPreviousPage(): void;
+    goToNextPage(): void;
+}
+export default ContinuousBookView;

src/views/ScrollingBookView.ts

@@ -7,11 +7,42 @@
  * Use of this source code is governed by a BSD-style license that can be found in the LICENSE file.
  */
 
-import BookView from "./BookView";
 import * as BrowserUtilities from "../utils/BrowserUtilities";
 import * as HTMLUtilities from "../utils/HTMLUtilities";
+import ContinuousBookView from "./ContinuousBookView";
+
+export default class ScrollingBookView implements ContinuousBookView {
+
+    public goToPreviousPage(): void {
+        const leftHeight = document.scrollingElement.scrollTop;
+        const height = this.getScreenHeight();
+        var offset = leftHeight - height;
+        if (offset >= 0) {
+            document.scrollingElement.scrollTop = offset;
+        } else {
+            document.scrollingElement.scrollTop = 0;
+        }
+    }
+
+    public goToNextPage(): void {
+        const leftHeight = document.scrollingElement.scrollTop;
+        const height = this.getScreenHeight();
+        const html = HTMLUtilities.findRequiredIframeElement(this.iframe.contentDocument, "html") as HTMLElement;
+        const scrollHeight = html.scrollHeight;    
+        var offset = leftHeight + height;
+        if (offset < scrollHeight) {
+            document.scrollingElement.scrollTop = offset;
+        } else {
+            document.scrollingElement.scrollTop = scrollHeight;
+        }
+    }
+
+    private getScreenHeight(): number {
+        const windowTop = window.scrollY;
+        const windowBottom = windowTop + window.innerHeight;
+        return windowBottom - windowTop
+    }
 
-export default class ScrollingBookView implements BookView {
     public readonly name = "scrolling-book-view";
     public readonly label = "Scrolling";