UI for configuring header footers int he browser viewer

src/pyj/read_book/prefs/head_foot.pyj

@@ -0,0 +1,90 @@
+# vim:fileencoding=utf-8
+# License: GPL v3 Copyright: 2018, Kovid Goyal <kovid at kovidgoyal.net>
+from __python__ import bound_methods, hash_literals
+
+from elementmaker import E
+from gettext import gettext as _
+
+from book_list.globals import get_session_data
+from dom import unique_id
+
+CONTAINER = unique_id('reader-hf-prefs')
+
+
+def create_item(region, label):
+    def sep():
+        return E.option('\xa0', disabled=True, style='min-height: 1pt; max-height: 1pt; font-size: 1pt; background-color: currentColor')
+
+    def opt(label, name, selected):
+        return E.option(label, id=name, value=name, selected=bool(selected))
+
+    return E.tr(
+        E.td(label + ':', style='padding: 1ex 1rem'),
+        E.td(E.select(
+            data_region=region,
+            opt(_('Empty'), 'empty', True),
+            sep(),
+            opt(_('Book title'), 'title'),
+            opt(_('Authors'), 'authors'),
+            sep(),
+            opt(_('Top level section'), 'top-section'),
+            opt(_('Current section'), 'section'),
+            sep(),
+            opt(_('Progress'), 'progress'),
+            opt(_('Clock'), 'clock'),
+        ))
+    )
+
+
+def create_items(which):
+    ans = E.table(
+        data_which=which,
+        create_item('left', _('Left')),
+        create_item('middle', _('Middle')),
+        create_item('right', _('Right'))
+    )
+    return ans
+
+
+def apply_setting(table, val):
+    for region in 'left middle right'.split(' '):
+        sel = table.querySelector(f'select[data-region={region}]')
+        for opt in sel.selectedOptions:
+            opt.selected = False
+        x = val[region] or 'empty'
+        opt = sel.namedItem(x)
+        if opt:
+            opt.selected = True
+        else:
+            sel.selectedIndex = 0
+
+
+def get_setting(table):
+    ans = {}
+    for region in 'left middle right'.split(' '):
+        sel = table.querySelector(f'select[data-region={region}]')
+        if sel.selectedIndex > -1:
+            ans[region] = sel.options[sel.selectedIndex].value
+    return ans
+
+
+def create_head_foot_panel(container):
+    container.appendChild(E.div(id=CONTAINER))
+    container = container.lastChild
+    container.appendChild(E.h4(_('Header'), style="margin: 1rem"))
+    container.appendChild(create_items('header'))
+    container.appendChild(E.hr())
+    container.appendChild(E.h4(_('Footer'), style="margin: 1rem; margin-top: 0"))
+    container.appendChild(create_items('footer'))
+
+    sd = get_session_data()
+    for which in 'header footer'.split(' '):
+        table = container.querySelector(f'table[data-which={which}]')
+        apply_setting(table, sd.get(which) or {})
+
+
+def commit_head_foot(onchange, container):
+    sd = get_session_data()
+    for which in 'header footer'.split(' '):
+        table = container.querySelector(f'table[data-which={which}]')
+        sd.set(which, get_setting(table))

src/pyj/read_book/prefs/main.pyj

@@ -9,6 +9,7 @@ from book_list.item_list import build_list, create_item
 from read_book.prefs.colors import create_colors_panel, commit_colors
 from read_book.prefs.layout import create_layout_panel, commit_layout
 from read_book.prefs.user_stylesheet import create_user_stylesheet_panel, commit_user_stylesheet
+from read_book.prefs.head_foot import create_head_foot_panel, commit_head_foot
 
 
 class Prefs:
@@ -62,6 +63,7 @@ class Prefs:
             create_item(_('Colors'), def():self.show_panel('colors');, _('Colors of the page and text')),
             create_item(_('Page layout'), def():self.show_panel('layout');, _('Page margins and number of pages per screen')),
             create_item(_('User style sheet'), def():self.show_panel('user_stylesheet');, _('Style rules for text')),
+            create_item(_('Headers and footers'), def():self.show_panel('head_foot');, _('Customize the headers and footers')),
         ])
 
     def display_colors(self, container):
@@ -85,6 +87,13 @@ class Prefs:
     def close_user_stylesheet(self):
         commit_user_stylesheet(self.onchange, self.container)
 
+    def display_head_foot(self, container):
+        document.getElementById(self.title_id).textContent = _('Headers and footers')
+        create_head_foot_panel(container)
+
+    def close_head_foot(self):
+        commit_head_foot(self.onchange, self.container)
+
 
 def create_prefs_panel(container, close_func, on_change):
     Prefs(container, close_func, on_change)

src/pyj/session.pyj

@@ -36,6 +36,8 @@ defaults = {
     'user_color_schemes': {},
     'base_font_size': 16,
     'controls_help_shown_count': 0,
+    'header': {},
+    'footer': {'right': 'progress'},
 }
 
 is_local_setting = {