Clicking on side margins should turn the page

src/pyj/read_book/iframe.pyj

@@ -10,12 +10,14 @@ from read_book.globals import set_boss, set_current_spine_item, current_layout_m
 from read_book.mathjax import apply_mathjax
 from read_book.resources import finalize_resources, unserialize_html
 from read_book.flow_mode import (
-    flow_to_scroll_fraction, flow_onwheel, flow_onkeydown, layout as flow_layout, handle_gesture as flow_handle_gesture
+    flow_to_scroll_fraction, flow_onwheel, flow_onkeydown, layout as flow_layout, handle_gesture as flow_handle_gesture,
+    scroll_by_page as flow_scroll_by_page
 )
 from read_book.paged_mode import (
     layout as paged_layout, scroll_to_fraction as paged_scroll_to_fraction,
     onwheel as paged_onwheel, onkeydown as paged_onkeydown, scroll_to_elem,
-    jump_to_cfi as paged_jump_to_cfi, handle_gesture as paged_handle_gesture
+    jump_to_cfi as paged_jump_to_cfi, handle_gesture as paged_handle_gesture,
+    scroll_by_page as paged_scroll_by_page
 )
 from read_book.settings import apply_settings
 from read_book.touch import create_handlers as create_touch_handlers
@@ -41,6 +43,7 @@ class IframeBoss:
             'initialize':self.initialize,
             'display': self.display,
             'scroll_to_anchor': self.on_scroll_to_anchor,
+            'next_screen': self.on_next_screen,
         }
         self.last_window_ypos = 0
 
@@ -123,6 +126,13 @@ class IframeBoss:
         else:
             self.to_scroll_fraction(0.0)
 
+    def on_next_screen(self, data):
+        backwards = data.backwards
+        if current_layout_mode() is 'flow':
+            flow_scroll_by_page(backwards)
+        else:
+            paged_scroll_by_page(backwards, True)
+
     def content_loaded(self):
         document.documentElement.style.overflow = 'hidden'
         self.do_layout()

src/pyj/read_book/view.pyj

@@ -39,13 +39,13 @@ class View:
             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(style='width:{}px; height:100%'.format(sd.get('margin_left', 20)), id='book-left-margin'),
+                        E.div(style='width:{}px; height:100vh; cursor: pointer'.format(sd.get('margin_left', 20)), id='book-left-margin', onclick=self.left_margin_clicked),
                         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'.format(sd.get('margin_top', 20)), id='book-top-margin'),
+                            E.div(style='height:{}px; width:100%; padding: 0'.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(style='width:{}px; height:100%'.format(sd.get('margin_right', 20)), id='book-right-margin'),
+                        E.div(style='width:{}px; height:100vh; cursor:pointer'.format(sd.get('margin_right', 20)), id='book-right-margin', onclick=self.right_margin_clicked),
                         E.div(style='position: absolute; top:0; left:0; width: 100%; height: 100%; display:none', id='book-overlay'),  # overlay
                     )
                 )
@@ -69,12 +69,21 @@ class View:
             'show_chrome': self.show_chrome,
         }
         self.currently_showing = {}
-        document.getElementById('book-top-margin').addEventListener('click', self.top_margin_clicked)
 
     @property
     def iframe(self):
         return document.getElementById(iframe_id)
 
+    def left_margin_clicked(self, event):
+        if event.button is 0:
+            event.preventDefault(), event.stopPropagation()
+            self.send_message('next_screen', backwards=True)
+
+    def right_margin_clicked(self, event):
+        if event.button is 0:
+            event.preventDefault(), event.stopPropagation()
+            self.send_message('next_screen', backwards=False)
+
     def top_margin_clicked(self, event):
         if event.button is 0:
             event.preventDefault(), event.stopPropagation()