Header for TOC view

src/pyj/read_book/overlay.pyj

@@ -97,6 +97,7 @@ class MainOverlay:  # {{{
 
     def __init__(self, overlay):
         self.overlay = overlay
+        self.timer = None
         if window.Intl?.DateTimeFormat:
             self.date_formatter = window.Intl.DateTimeFormat(undefined, {'hour':'numeric', 'minute':'numeric'})
         else:
@@ -125,6 +126,7 @@ class MainOverlay:  # {{{
 
         ), user_select='none', background_color=get_color('window-background')))
 
+        self.on_hide()
         self.timer = setInterval(self.update_time, 1000)
         button_row = container.querySelector('.button-row')
 
@@ -169,7 +171,9 @@ class MainOverlay:  # {{{
         element(self.container_id, '[data-time]').textContent = self.date_formatter.format(Date())
 
     def on_hide(self):
-        clearInterval(self.timer)
+        if self.timer is not None:
+            clearInterval(self.timer)
+        self.timer = None
 
     def return_to_book_list(self):
         view = self.overlay.view
@@ -194,7 +198,7 @@ class TOCOverlay: # {{{
 
     def show(self, container):
         container.style.backgroundColor = get_color('window-background')
-        create_toc_panel(self.overlay.view.book, container, self.handle_activate)
+        create_toc_panel(self.overlay.view.book, container, self.handle_activate, self.overlay.hide_current_panel)
 
     def handle_activate(self, dest, frag):
         self.overlay.hide()
@@ -246,6 +250,8 @@ class Overlay:
             self.container.style.display = 'none'
 
     def show_current_panel(self):
+        if self.panels.length > 1 and callable(self.panels[-2].on_hide):
+            self.panels[-2].on_hide()
         c = self.clear_container()
         if self.panels.length:
             self.panels[-1].show(c)
@@ -269,6 +275,5 @@ class Overlay:
         self.show_current_panel()
 
     def show_toc(self):
-        self.hide_current_panel()
         self.panels.push(TOCOverlay(self))
         self.show_current_panel()

src/pyj/read_book/toc.pyj

@@ -2,6 +2,9 @@
 # License: GPL v3 Copyright: 2016, Kovid Goyal <kovid at kovidgoyal.net>
 from __python__ import hash_literals
 
+from dom import set_css, svgicon
+from elementmaker import E
+from gettext import gettext as _
 from widgets import create_tree
 
 def create_toc_tree(toc, onclick):
@@ -13,9 +16,16 @@ def create_toc_tree(toc, onclick):
 
     return create_tree(toc, populate_data, onclick)
 
-def create_toc_panel(book, container, onclick):
+def create_toc_panel(book, container, onclick, onclose):
+    container.appendChild(E.div(
+        style='display: flex; justify-content: space-between; padding: 1ex 1em; border-bottom: solid 1px currentColor',
+        E.h2(_('Table of Contents')),
+        E.div(svgicon('close'), onclick=def(event):event.preventDefault(), event.stopPropagation(), onclose(event);, style='cursor: pointer', class_='simple-link'),
+    ))
     def handle_click(event, li):
         if event.button is 0:
             onclick(li.dataset.tocDest, li.dataset.tocFrag)
     toc_panel = create_toc_tree(book.manifest.toc, handle_click)
+    set_css(container, display='flex', flex_direction='column')
+    set_css(toc_panel, flex_grow='10')
     container.appendChild(toc_panel)

src/pyj/widgets.pyj

@@ -120,6 +120,7 @@ def create_tree(root, populate_data, onclick):
                         E.span('\xa0'),
                         E.a(
                             href='javascript: void(0)',
+                            class_='simple-link',
                             onclick=def (event):
                                 if onclick:
                                     onclick(event, event.currentTarget.parentNode.parentNode)
@@ -141,15 +142,10 @@ def create_tree(root, populate_data, onclick):
         process_node(root, container, 0)
     return container
 
-create_tree.style = '''
-div.simple-tree a:hover { color: red; }
-div.simple-tree a:active { transform: scale(1.5); }
-'''
-
 def get_widget_css():
     ans = 'a, button:focus { outline: none }; a, button::-moz-focus-inner { border: 0 }\n'
+    ans += '.simple-link:hover { color: red; } .simple-tree:active { transform: scale(1.5) }\n'
     ans += create_button.style
     ans += create_spinner.style
     ans += Breadcrumbs.STYLE_RULES
-    ans += create_tree.style
     return ans