From 37a5503b5975a6b6ce3b086907e599edcea5a0e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mickae=CC=88l=20Menu?= Date: Thu, 2 May 2019 16:11:26 +0200 Subject: [PATCH 1/5] Remove touchHandling.js injection (this is handled in the navigator itself, by injecting the gestures.js file) --- R2Streamer/scripts/touchHandling.js | 106 ---------------------------- R2Streamer/scripts/utils.js | 14 +++- Sources/fetcher/ContentFilter.swift | 6 -- 3 files changed, 11 insertions(+), 115 deletions(-) delete mode 100644 R2Streamer/scripts/touchHandling.js diff --git a/R2Streamer/scripts/touchHandling.js b/R2Streamer/scripts/touchHandling.js deleted file mode 100644 index 683bd73e..00000000 --- a/R2Streamer/scripts/touchHandling.js +++ /dev/null @@ -1,106 +0,0 @@ -var singleTouchGesture = false; -var startX = 0; -var startY = 0; -var maxScreenX = 0; -var maxScreenY = 0; -var touchStartTime = null; - -window.addEventListener("load", function(){ // on page load - // Get screen X and Y sizes. - maxScreenUpdate(); - // Events listeners for the touches. - window.document.addEventListener("touchstart", handleTouchStart, false); - window.document.addEventListener("touchend", handleTouchEnd, false); - // When device orientation changes, screen X and Y sizes are recalculated. - window.addEventListener("orientationchange", maxScreenUpdate); - }, false); - -// On screen orientation updates. -var maxScreenUpdate = function() { - if (window.orientation === 0 || window.orientation == 180) { - maxScreenX = screen.width; - maxScreenY = screen.height; - } else { - maxScreenX = screen.height; - maxScreenY = screen.width; - } - snapCurrentPosition(); -}; - -var snapCurrentPosition = function() { - var currentOffset = window.scrollX; - var currentOffsetSnapped = snapOffset(currentOffset + 1); - - document.body.scrollLeft = currentOffsetSnapped; -}; - -// When a touch is detected records its starting coordinates and if it's a singleTouchGesture. -var handleTouchStart = function(event) { - if (event.target.nodeName.toUpperCase() === 'A') { - console.log("Touched a link."); - // singleTouchGesture = false; - return; - } - console.log("Touch sent to native code."); - singleTouchGesture = event.touches.length == 1; - - var touch = event.changedTouches[0]; - - startX = touch.screenX % maxScreenX; - startY = touch.screenY % maxScreenY; - - touchStartTime = Date.now(); -}; - -// When a touch ends, check if any action has to be made, and contact native code. -var handleTouchEnd = function(event) { - if(!singleTouchGesture) { - return; - } - - if(touchStartTime != null && Date.now() - touchStartTime > 500) { - touchStartTime = null; - return; - } - touchStartTime = null; - - //https://stackoverflow.com/questions/4878484/difference-between-tagname-and-nodename - if (event.target.nodeName == "input") {return} - - var touch = event.changedTouches[0]; - - var relativeDistanceX = Math.abs(((touch.screenX % maxScreenX) - startX) / maxScreenX); - var relativeDistanceY = Math.abs(((touch.screenY % maxScreenY) - startY) / maxScreenY); - var touchDistance = Math.max(relativeDistanceX, relativeDistanceY); - - // Tap to turn. - if(touchDistance < 0.01) { - var position = touch.clientX / window.innerWidth; - -// if (maxScreenX == window.innerWidth) { -// // No scroll and default zoom -// position = touch.clientX / window.innerWidth; -// } else { -// // FXL -// // Looks like this is the ratio in document space instead of screen space -// // position = touch.screenX / document.body.clientWidth; -// } - - if (position <= 0.2) { - // TAP left. - console.log("LeftTapped"); - webkit.messageHandlers.leftTap.postMessage(""); - } else if(position >= 0.8) { - // TAP rigth. - console.log("RightTapped"); - webkit.messageHandlers.rightTap.postMessage(""); - } else { - // TAP center. - console.log("CenterTapped"); - webkit.messageHandlers.centerTap.postMessage(""); - } - event.stopPropagation(); - event.preventDefault(); - return; - } -}; diff --git a/R2Streamer/scripts/utils.js b/R2Streamer/scripts/utils.js index 794fe02d..a0309d2c 100644 --- a/R2Streamer/scripts/utils.js +++ b/R2Streamer/scripts/utils.js @@ -5,9 +5,10 @@ // Notify native code that the page has loaded. window.addEventListener("load", function(){ // on page load - // Notify native code that the page is loaded. - webkit.messageHandlers.didLoad.postMessage(""); - }, false); + // Notify native code that the page is loaded. + webkit.messageHandlers.didLoad.postMessage(""); + window.addEventListener("orientationchange", snapCurrentPosition); +}, false); var last_known_scroll_position = 0; var ticking = false; @@ -119,6 +120,13 @@ var snapOffset = function(offset) { return value - (value % maxScreenX); }; +var snapCurrentPosition = function() { + var currentOffset = window.scrollX; + var currentOffsetSnapped = snapOffset(currentOffset + 1); + + document.body.scrollLeft = currentOffsetSnapped; +}; + /// User Settings. // For setting user setting. diff --git a/Sources/fetcher/ContentFilter.swift b/Sources/fetcher/ContentFilter.swift index 31a203a0..b5ee3678 100644 --- a/Sources/fetcher/ContentFilter.swift +++ b/Sources/fetcher/ContentFilter.swift @@ -174,14 +174,10 @@ final internal class ContentFiltersEpub: ContentFilters { abort() } let cssAfter = getHtmlLink(forResource: "\(baseUrl)styles/\(styleSubFolder)/ReadiumCSS-after.css") - let scriptTouchHandling = getHtmlScript(forResource: "\(baseUrl)scripts/touchHandling.js") - let scriptUtils = getHtmlScript(forResource: "\(baseUrl)scripts/utils.js") - let fontStyle = getHtmlFontStyle(forResource: "\(baseUrl)fonts/OpenDyslexic-Regular.otf", fontFamily: "OpenDyslexic") resourceHtml = resourceHtml.insert(string: cssAfter, at: headEnd) - resourceHtml = resourceHtml.insert(string: scriptTouchHandling, at: headEnd) resourceHtml = resourceHtml.insert(string: scriptUtils, at: headEnd) resourceHtml = resourceHtml.insert(string: fontStyle, at: headEnd) @@ -210,8 +206,6 @@ final internal class ContentFiltersEpub: ContentFilters { var includes = [String]() - // Touch event bubbling. - includes.append(getHtmlScript(forResource: "\(baseUrl)scripts/touchHandling.js")) // Misc JS utils. includes.append(getHtmlScript(forResource: "\(baseUrl)scripts/utils.js")) From 25f9056e547aa965b74056914dbbaaa3e9911e97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mickae=CC=88l=20Menu?= Date: Tue, 7 May 2019 15:53:04 +0200 Subject: [PATCH 2/5] Fix EPUB orientation change --- R2Streamer/scripts/utils.js | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/R2Streamer/scripts/utils.js b/R2Streamer/scripts/utils.js index a0309d2c..083be742 100644 --- a/R2Streamer/scripts/utils.js +++ b/R2Streamer/scripts/utils.js @@ -7,11 +7,12 @@ window.addEventListener("load", function(){ // on page load // Notify native code that the page is loaded. webkit.messageHandlers.didLoad.postMessage(""); - window.addEventListener("orientationchange", snapCurrentPosition); + window.addEventListener("orientationchange", orientationChanged); }, false); var last_known_scroll_position = 0; var ticking = false; +var maxScreenX = 0; // Position in range [0 - 1]. var update = function(position) { @@ -20,15 +21,20 @@ var update = function(position) { }; window.addEventListener('scroll', function(e) { - last_known_scroll_position = window.scrollX / document.getElementsByTagName("body")[0].scrollWidth; - if (!ticking) { - window.requestAnimationFrame(function() { - update(last_known_scroll_position); - ticking = false; - }); - } - ticking = true; - }); + last_known_scroll_position = window.scrollX / document.getElementsByTagName("body")[0].scrollWidth; + if (!ticking) { + window.requestAnimationFrame(function() { + update(last_known_scroll_position); + ticking = false; + }); + } + ticking = true; +}); + +function orientationChanged() { + maxScreenX = (window.orientation === 0 || window.orientation == 180) ? screen.width : screen.height; + snapCurrentPosition(); +} // Scroll to the given TagId in document and snap. var scrollToId = function(id) { From 2e1000bef81403fe2df9bdb21a1b416b6a990554 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mickae=CC=88l=20Menu?= Date: Thu, 9 May 2019 13:40:08 +0200 Subject: [PATCH 3/5] Report the proper scroll position depending on the scroll mode --- R2Streamer/scripts/utils.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/R2Streamer/scripts/utils.js b/R2Streamer/scripts/utils.js index 083be742..f4b0fc6d 100644 --- a/R2Streamer/scripts/utils.js +++ b/R2Streamer/scripts/utils.js @@ -10,7 +10,8 @@ window.addEventListener("load", function(){ // on page load window.addEventListener("orientationchange", orientationChanged); }, false); -var last_known_scroll_position = 0; +var last_known_scrollX_position = 0; +var last_known_scrollY_position = 0; var ticking = false; var maxScreenX = 0; @@ -21,10 +22,11 @@ var update = function(position) { }; window.addEventListener('scroll', function(e) { - last_known_scroll_position = window.scrollX / document.getElementsByTagName("body")[0].scrollWidth; + last_known_scrollY_position = window.scrollY / document.body.scrollHeight; + last_known_scrollX_position = window.scrollX / document.body.scrollWidth; if (!ticking) { window.requestAnimationFrame(function() { - update(last_known_scroll_position); + update(isScrollModeEnabled() ? last_known_scrollY_position : last_known_scrollX_position); ticking = false; }); } @@ -36,6 +38,10 @@ function orientationChanged() { snapCurrentPosition(); } +function isScrollModeEnabled() { + return document.documentElement.style.getPropertyValue("--USER__scroll").toString().trim() == 'readium-scroll-on'; +} + // Scroll to the given TagId in document and snap. var scrollToId = function(id) { var element = document.getElementById(id); From 5079cac4ede472da5427c602238c24894f481e82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mickae=CC=88l=20Menu?= Date: Thu, 9 May 2019 15:05:22 +0200 Subject: [PATCH 4/5] Fix scrolling to a position in continuous scroll mode --- R2Streamer/scripts/utils.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/R2Streamer/scripts/utils.js b/R2Streamer/scripts/utils.js index f4b0fc6d..b7f785c4 100644 --- a/R2Streamer/scripts/utils.js +++ b/R2Streamer/scripts/utils.js @@ -8,6 +8,7 @@ window.addEventListener("load", function(){ // on page load // Notify native code that the page is loaded. webkit.messageHandlers.didLoad.postMessage(""); window.addEventListener("orientationchange", orientationChanged); + orientationChanged(); }, false); var last_known_scrollX_position = 0; @@ -58,14 +59,20 @@ var scrollToPosition = function(position, dir) { console.log("InvalidPosition"); return; } - var offset = 0.0; - if (dir == 'rtl') { - offset = (-document.body.scrollWidth + maxScreenX) * (1.0-position); + + if (isScrollModeEnabled()) { + var offset = document.body.scrollHeight * position; + document.body.scrollTop = offset; + // window.scrollTo(0, offset); } else { - offset = document.body.scrollWidth * position; + var offset = 0.0; + if (dir == 'rtl') { + offset = (-document.body.scrollWidth + maxScreenX) * (1.0-position); + } else { + offset = document.body.scrollWidth * position; + } + document.body.scrollLeft = snapOffset(offset); } - console.log(offset); - document.body.scrollLeft = snapOffset(offset); }; var scrollLeft = function(dir) { From 963595faf025386267916665ebab8c18b803ab99 Mon Sep 17 00:00:00 2001 From: Aferdita Muriqi Date: Thu, 23 May 2019 22:51:18 +0200 Subject: [PATCH 5/5] update r2-shared dependency version bump --- Cartfile | 2 +- Cartfile.resolved | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Cartfile b/Cartfile index 55f0828f..eedc73e6 100644 --- a/Cartfile +++ b/Cartfile @@ -1,4 +1,4 @@ -github "readium/r2-shared-swift" == 1.2.9 +github "readium/r2-shared-swift" == 1.2.10 github "tadija/AEXML" == 4.3.3 github "swisspol/GCDWebServer" == 3.5.2 github "krzyzanowskim/CryptoSwift" == 0.15.0 diff --git a/Cartfile.resolved b/Cartfile.resolved index 0d684da2..0c13084a 100644 --- a/Cartfile.resolved +++ b/Cartfile.resolved @@ -1,6 +1,6 @@ github "cezheng/Fuzi" "2.2.1" github "dexman/Minizip" "1.4.0" github "krzyzanowskim/CryptoSwift" "0.15.0" -github "readium/r2-shared-swift" "1.2.9" +github "readium/r2-shared-swift" "1.2.10" github "swisspol/GCDWebServer" "3.5.2" github "tadija/AEXML" "4.3.3" \ No newline at end of file