fix: properly scroll vertical text

CHANGELOG.md

@@ -4,7 +4,15 @@ All notable changes to this project will be documented in this file. Take a look
 
 **Warning:** Features marked as *experimental* may change or be removed in a future release without notice. Use with caution.
 
-<!-- ## [Unreleased] -->
+## [Unreleased]
+
+### Fixed
+
+#### Navigator
+
+* Fixed vertical text scrolling in EPUB for right-to-left reading progression (contributed by [@shovel-kun](https://github.com/readium/kotlin-toolkit/pull/656)).
+* Fixed notifying the current location when using vertical text scrolling in EPUB (contributed by [@shovel-kun](https://github.com/readium/kotlin-toolkit/pull/656)).
+
 
 ## [3.1.1]
 

readium/navigator/src/main/assets/_scripts/src/utils.js

@@ -97,6 +97,13 @@ export function isRTL() {
   return document.body.dir.toLowerCase() == "rtl";
 }
 
+export function isVerticalWritingMode() {
+  const writingMode = window
+    .getComputedStyle(document.documentElement)
+    .getPropertyValue("writing-mode");
+  return writingMode.startsWith("vertical");
+}
+
 // Scroll to the given TagId in document and snap.
 export function scrollToId(id) {
   var element = document.getElementById(id);
@@ -109,15 +116,19 @@ export function scrollToId(id) {
 
 // Position must be in the range [0 - 1], 0-100%.
 export function scrollToPosition(position) {
-  //        Android.log("scrollToPosition " + position);
   if (position < 0 || position > 1) {
-    throw "scrollToPosition() must be given a position from 0.0 to  1.0";
+    throw "scrollToPosition() must be given a position from 0.0 to 1.0";
   }
 
   let offset;
   if (isScrollModeEnabled()) {
-    offset = document.scrollingElement.scrollHeight * position;
-    document.scrollingElement.scrollTop = offset;
+    if (!isVerticalWritingMode()) {
+      offset = document.scrollingElement.scrollHeight * position;
+      document.scrollingElement.scrollTop = offset;
+    } else {
+      offset = document.scrollingElement.scrollWidth * position;
+      document.scrollingElement.scrollLeft = -offset;
+    }
     // window.scrollTo(0, offset);
   } else {
     var documentWidth = document.scrollingElement.scrollWidth;
@@ -156,25 +167,27 @@ function scrollToRect(rect) {
 }
 
 export function scrollToStart() {
-  //        Android.log("scrollToStart");
-  if (!isScrollModeEnabled()) {
-    document.scrollingElement.scrollLeft = 0;
-  } else {
+  if (isScrollModeEnabled() && !isVerticalWritingMode()) {
     document.scrollingElement.scrollTop = 0;
-    window.scrollTo(0, 0);
+  } else {
+    document.scrollingElement.scrollLeft = 0;
   }
 }
 
 export function scrollToEnd() {
-  //        Android.log("scrollToEnd");
-  if (!isScrollModeEnabled()) {
+  const scrollingElement = document.scrollingElement;
+
+  if (isScrollModeEnabled()) {
+    if (!isVerticalWritingMode()) {
+      scrollingElement.scrollTop = document.body.scrollHeight;
+    } else {
+      scrollingElement.scrollLeft = -document.scrollingElement.scrollWidth;
+    }
+  } else {
     var factor = isRTL() ? -1 : 1;
-    document.scrollingElement.scrollLeft = snapOffset(
-      document.scrollingElement.scrollWidth * factor
+    scrollingElement.scrollLeft = snapOffset(
+      scrollingElement.scrollWidth * factor
     );
-  } else {
-    document.scrollingElement.scrollTop = document.body.scrollHeight;
-    window.scrollTo(0, document.body.scrollHeight);
   }
 }
 

readium/navigator/src/main/java/org/readium/r2/navigator/R2BasicWebView.kt

@@ -55,6 +55,7 @@ internal open class R2BasicWebView(context: Context, attrs: AttributeSet) : WebV
 
     interface Listener {
         val readingProgression: ReadingProgression
+        val verticalText: Boolean
 
         /** Called when the resource content is loaded in the web view. */
         fun onResourceLoaded(webView: R2BasicWebView, link: Link) {}
@@ -127,17 +128,30 @@ internal open class R2BasicWebView(context: Context, attrs: AttributeSet) : WebV
     }
 
     /** Computes the current progression in the resource. */
-    val progression: Double get() =
-        if (scrollMode) {
-            val y = scrollY.toDouble()
-            val contentHeight = computeVerticalScrollRange()
-
-            var progression = 0.0
-            if (contentHeight > 0) {
-                progression = (y / contentHeight).coerceIn(0.0, 1.0)
+    val progression: Double get() {
+        return if (scrollMode) {
+            if (listener?.verticalText == true) {
+                val x = scrollX.toDouble()
+                val contentWidth = computeHorizontalScrollRange()
+                val viewportWidth = computeHorizontalScrollExtent()
+                val maxScrollX = (contentWidth - viewportWidth).coerceAtLeast(0)
+
+                var progression = 0.0
+                if (maxScrollX > 0) {
+                    // Currently, scrollX for page with vertical text starts at maxScrollX
+                    progression = ((maxScrollX - x) / contentWidth).coerceIn(0.0, 1.0)
+                }
+                progression
+            } else {
+                val y = scrollY.toDouble()
+                val contentHeight = computeVerticalScrollRange()
+
+                var progression = 0.0
+                if (contentHeight > 0) {
+                    progression = (y / contentHeight).coerceIn(0.0, 1.0)
+                }
+                progression
             }
-
-            progression
         } else {
             var x = scrollX.toDouble()
             val pageWidth = computeHorizontalScrollExtent()
@@ -163,6 +177,7 @@ internal open class R2BasicWebView(context: Context, attrs: AttributeSet) : WebV
 
             progression
         }
+    }
 
     interface OnOverScrolledCallback {
         fun onOverScrolled(scrollX: Int, scrollY: Int, clampedX: Boolean, clampedY: Boolean)

readium/navigator/src/main/java/org/readium/r2/navigator/R2WebView.kt

@@ -116,6 +116,7 @@ internal class R2WebView(context: Context, attrs: AttributeSet) : R2BasicWebView
     private var mLastMotionX: Float = 0.toFloat()
     private var mInitialMotionX: Float = 0.toFloat()
     private var mInitialMotionY: Float = 0.toFloat()
+    private var mInitialOverscroll: OverscrollMode = OverscrollMode.NONE
 
     /**
      * Sentinel value for no current active pointer.
@@ -707,6 +708,7 @@ internal class R2WebView(context: Context, attrs: AttributeSet) : R2BasicWebView
                 mInitialMotionX = ev.x
                 mLastMotionX = mInitialMotionX
                 mInitialMotionY = ev.y
+                mInitialOverscroll = getOverscrollMode()
                 mActivePointerId = ev.getPointerId(0)
             }
             MotionEvent.ACTION_MOVE -> {
@@ -745,9 +747,15 @@ internal class R2WebView(context: Context, attrs: AttributeSet) : R2BasicWebView
                     if (scrollMode) {
                         val totalDelta = (y - mInitialMotionY).toInt()
                         if (abs(totalDelta) < 200) {
-                            if (mInitialMotionX < x) {
+                            if (mInitialOverscroll == OverscrollMode.BOTH) {
+                                if (mInitialMotionX < x) {
+                                    scrollLeft(animated = true)
+                                } else if (mInitialMotionX > x) {
+                                    scrollRight(animated = true)
+                                }
+                            } else if (mInitialMotionX < x && mInitialOverscroll == OverscrollMode.LEFT) {
                                 scrollLeft(animated = true)
-                            } else if (mInitialMotionX > x) {
+                            } else if (mInitialMotionX > x && mInitialOverscroll == OverscrollMode.RIGHT) {
                                 scrollRight(animated = true)
                             }
                         }
@@ -1054,12 +1062,34 @@ internal class R2WebView(context: Context, attrs: AttributeSet) : R2BasicWebView
         return false
     }
 
+    private fun getOverscrollMode(): OverscrollMode {
+        val clientWidth = getClientWidth() ?: return OverscrollMode.NONE
+        val right = scrollX >= computeHorizontalScrollRange() - clientWidth
+        val left = scrollX <= 0
+        if (left && right) {
+            return OverscrollMode.BOTH
+        } else if (left) {
+            return OverscrollMode.LEFT
+        } else if (right) {
+            return OverscrollMode.RIGHT
+        } else {
+            return OverscrollMode.NONE
+        }
+    }
+
     internal val numPages: Int get() =
         getClientWidth()
             ?.let { clientWidth -> (computeHorizontalScrollRange() / clientWidth.toDouble()).roundToInt() }
             ?.coerceAtLeast(1)
             ?: 1
 
+    enum class OverscrollMode {
+        NONE,
+        LEFT,
+        RIGHT,
+        BOTH,
+    }
+
     /**
      * Layout parameters that should be supplied for views added to a
      * ViewPager.

readium/navigator/src/main/java/org/readium/r2/navigator/epub/EpubNavigatorFragment.kt

@@ -285,6 +285,8 @@ public class EpubNavigatorFragment internal constructor(
 
     private var state: State = State.Initializing
 
+    private var pageChangeListener: ViewPager.OnPageChangeListener? = null
+
     // Configurable
 
     override val settings: StateFlow<EpubSettings> get() = viewModel.settings
@@ -412,8 +414,7 @@ public class EpubNavigatorFragment internal constructor(
         resourcePager = binding.resourcePager
         resetResourcePager()
 
-        resourcePager.addOnPageChangeListener(object : ViewPager.SimpleOnPageChangeListener() {
-
+        pageChangeListener = object : ViewPager.SimpleOnPageChangeListener() {
             override fun onPageSelected(position: Int) {
 //                if (viewModel.layout == EpubLayout.REFLOWABLE) {
 //                    resourcePager.disableTouchEvents = true
@@ -441,7 +442,9 @@ public class EpubNavigatorFragment internal constructor(
 
                 notifyCurrentLocation()
             }
-        })
+        }
+
+        pageChangeListener?.let { resourcePager.addOnPageChangeListener(it) }
 
         // Fixed layout publications cannot intercept JS events yet.
         if (publication.metadata.presentation.layout == EpubLayout.FIXED) {
@@ -554,7 +557,9 @@ public class EpubNavigatorFragment internal constructor(
 
     private fun invalidateResourcePager() {
         val locator = currentLocator.value
+        val listener = pageChangeListener
         resetResourcePager()
+        listener?.let { resourcePager.addOnPageChangeListener(it) }
         go(locator)
     }
 
@@ -770,6 +775,9 @@ public class EpubNavigatorFragment internal constructor(
         override val readingProgression: ReadingProgression
             get() = viewModel.readingProgression
 
+        override val verticalText: Boolean
+            get() = viewModel.verticalText
+
         override fun onResourceLoaded(webView: R2BasicWebView, link: Link) {
             run(viewModel.onResourceLoaded(webView, link))
         }

readium/navigator/src/main/java/org/readium/r2/navigator/epub/EpubNavigatorViewModel.kt

@@ -253,6 +253,12 @@ internal class EpubNavigatorViewModel(
     val readingProgression: ReadingProgression get() =
         settings.value.readingProgression
 
+    /**
+     * Effective vertical text.
+     */
+    val verticalText: Boolean get() =
+        settings.value.verticalText
+
     /**
      * Indicates whether the dual page mode is enabled.
      */