fix: properly scroll vertical text

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);
@@ -156,25 +163,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.scrollLeft = -document.body.scrollWidth;
+    } else {
+      scrollingElement.scrollTop = document.body.scrollHeight;
+    }
+  } 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/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,16 @@ 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 +1063,31 @@ 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.