Handle gestures that originate on the side margins

src/pyj/read_book/iframe.pyj

@@ -46,6 +46,7 @@ class IframeBoss:
             'next_screen': self.on_next_screen,
             'change_font_size': self.change_font_size,
             'change_color_scheme': self.change_color_scheme,
+            'gesture_from_margin': self.gesture_from_margin,
         }
         self.last_window_ypos = 0
 
@@ -122,6 +123,9 @@ class IframeBoss:
         else:
             self._handle_gesture(gesture)
 
+    def gesture_from_margin(self, data):
+        self.handle_gesture(data.gesture)
+
     def on_scroll_to_anchor(self, data):
         frag = data.frag
         if frag:

src/pyj/read_book/touch.pyj

@@ -3,6 +3,7 @@
 from __python__ import hash_literals, bound_methods
 
 from read_book.globals import get_boss
+from book_list.globals import get_boss as book_list_boss
 
 HOLD_THRESHOLD = 750  # milliseconds
 TAP_THRESHOLD = 5  # pixels
@@ -204,9 +205,6 @@ class TouchHandler:
         self.gesture_id = None
         self.handled_tap_hold = False
 
-    def handle_gesture(self, gesture):
-        pass
-
     def dispatch_gesture(self):
         touches = self.ongoing_touches
         num = len(touches)
@@ -222,10 +220,15 @@ class TouchHandler:
 
 class BookTouchHandler(TouchHandler):
 
+    def __init__(self, for_side_margin=None):
+        self.for_side_margin = for_side_margin
+        TouchHandler.__init__(self)
+
     def handle_gesture(self, gesture):
+        gesture.from_side_margin = self.for_side_margin
         if gesture.type is 'tap':
             if gesture.is_held:
-                if not self.handled_tap_hold:
+                if not self.for_side_margin and not self.handled_tap_hold:
                     self.handled_tap_hold = True
                     fake_click = new MouseEvent('click', {
                         'clientX': gesture.viewport_x, 'clientY':gesture.viewport_y, 'buttons': 1,
@@ -236,7 +239,7 @@ class BookTouchHandler(TouchHandler):
                         elem.dispatchEvent(fake_click)
                 return
             if not gesture.active:
-                if not tap_on_link(gesture):
+                if self.for_side_margin or not tap_on_link(gesture):
                     if gesture.viewport_y < min(100, window.innerHeight / 4):
                         gesture.type = 'show-chrome'
                     else:
@@ -251,12 +254,29 @@ class BookTouchHandler(TouchHandler):
             if gesture.active:
                 return
             gesture.type = 'show-chrome'
-        get_boss().handle_gesture(gesture)
+        if self.for_side_margin:
+            book_list_boss().read_ui.view.forward_gesture(gesture)
+        else:
+            get_boss().handle_gesture(gesture)
+
+    def __repr__(self):
+        return 'BookTouchHandler:for_side_margin:' + self.for_side_margin
 
 main_touch_handler = BookTouchHandler()
+left_margin_handler = BookTouchHandler('left')
+right_margin_handler = BookTouchHandler('right')
+
+def install_handlers(elem, handler):
+    elem.addEventListener('touchstart', handler.handle_touchstart, True)
+    elem.addEventListener('touchmove', handler.handle_touchmove, True)
+    elem.addEventListener('touchend', handler.handle_touchend, True)
+    elem.addEventListener('touchcancel', handler.handle_touchcancel, True)
 
 def create_handlers():
-    window.addEventListener('touchstart', main_touch_handler.handle_touchstart, True)
+    install_handlers(window, main_touch_handler)
-    window.addEventListener('touchmove', main_touch_handler.handle_touchmove, True)
+
-    window.addEventListener('touchend', main_touch_handler.handle_touchend, True)
+def set_left_margin_handler(elem):
-    window.addEventListener('touchcancel', main_touch_handler.handle_touchcancel, True)
+    install_handlers(elem, left_margin_handler)
+
+def set_right_margin_handler(elem):
+    install_handlers(elem, right_margin_handler)

src/pyj/read_book/view.pyj

@@ -10,6 +10,7 @@ from read_book.globals import messenger, iframe_id
 from read_book.resources import load_resources
 from read_book.overlay import Overlay
 from read_book.prefs.colors import resolve_color_scheme
+from read_book.touch import set_left_margin_handler, set_right_margin_handler
 from book_list.theme import get_color
 from utils import parse_url_params, username_key
 
@@ -46,17 +47,21 @@ class View:
         self.ui = ui
         self.loaded_resources = {}
         sd = get_session_data()
+        left_margin = E.div(svgicon('caret-left'), style='width:{}px;'.format(sd.get('margin_left', 20)), class_='book-side-margin', id='book-left-margin', onclick=self.left_margin_clicked)
+        set_left_margin_handler(left_margin)
+        right_margin = E.div(svgicon('caret-right'), style='width:{}px;'.format(sd.get('margin_right', 20)), class_='book-side-margin', id='book-right-margin', onclick=self.right_margin_clicked)
+        set_right_margin_handler(right_margin)
         container.appendChild(
             E.div(style='width: 100vw; height: 100vh; overflow: hidden; display: flex; align-items: stretch',  # container for horizontally aligned panels
                   E.div(style='display: flex; flex-direction: column; align-items: stretch; flex-grow:2',  # container for iframe and any other panels in the same column
                     E.div(style='flex-grow: 2; display:flex; align-items: stretch',  # container for iframe and its overlay
-                        E.div(svgicon('caret-left'), style='width:{}px;'.format(sd.get('margin_left', 20)), class_='book-side-margin', id='book-left-margin', onclick=self.left_margin_clicked),
+                        left_margin,
                         E.div(style='flex-grow:2; display:flex; align-items:stretch; flex-direction: column', # container for top and bottom margins
                             E.div(style='height:{}px; width:100%; padding: 0; cursor: pointer'.format(sd.get('margin_top', 20)), id='book-top-margin', onclick=self.top_margin_clicked),
                             E.iframe(id=iframe_id, seamless=True, sandbox='allow-popups allow-scripts', style='flex-grow: 2'),
                             E.div(style='height:{}px; width:100%; padding: 0'.format(sd.get('margin_bottom', 20)), id='book-bottom-margin'),
                         ),
-                        E.div(svgicon('caret-right'), style='width:{}px;'.format(sd.get('margin_right', 20)), class_='book-side-margin', id='book-right-margin', onclick=self.right_margin_clicked),
+                        right_margin,
                         E.div(style='position: absolute; top:0; left:0; width: 100%; height: 100%; display:none', id='book-overlay'),  # overlay
                     )
                 )
@@ -100,6 +105,9 @@ class View:
             event.preventDefault(), event.stopPropagation()
             self.show_chrome()
 
+    def forward_gesture(self, gesture):
+        self.send_message('gesture_from_margin', gesture=gesture)
+
     def show_chrome(self):
         self.overlay.show()