Implement deleting of book from local storage

src/pyj/read_book/db.pyj

@@ -211,6 +211,24 @@ class DB:
             else:
                 proceed(data)
 
+    def delete_book(self, book, proceed):
+        c = self.idb.transaction(['books', 'files'], 'readwrite')
+        files = c.objectStore('files')
+        books = c.objectStore('books')
+        filenames = Object.keys(book.stored_files)
+        c.oncomplete = def(event):
+            proceed(book)
+        c.onerror = def (event):
+            proceed(book, c.error.toString())
+
+        def next_step():
+            if filenames.length:
+                r = files.delete(filenames.pop())
+                r.onsuccess = next_step
+            else:
+                books.delete(book.key)
+        next_step()
+
 def create_db(ui, interface_data):
     if not window.indexedDB:
         return ui.db_initialized(_('Your browser does not support IndexedDB. Cannot read books. Consider using a modern browser, such as Firefox, Chrome or Edge.'))

src/pyj/read_book/overlay.pyj

@@ -6,7 +6,7 @@ from dom import clear, set_css, element, svgicon, build_rule
 from elementmaker import E
 from book_list.theme import get_color
 from book_list.globals import get_boss
-from widgets import create_spinner
+from widgets import create_spinner, create_button
 from gettext import gettext as _
 
 class LoadingMessage:  # {{{
@@ -15,6 +15,7 @@ class LoadingMessage:  # {{{
         self.msg = msg or ''
 
     def show(self, container):
+        self.container_id = container.getAttribute('id')
         container.style.backgroundColor = get_color('window-background')
         container.appendChild(
             E.div(
@@ -25,10 +26,63 @@ class LoadingMessage:  # {{{
         container.firstChild.lastChild.innerHTML = self.msg
         set_css(container.firstChild, position='relative', top='50%', transform='translateY(-50%)')
 
+    def set_msg(self, msg):
+        self.msg = msg
+        container = document.getElementById(self.container_id)
+        container.firstChild.lastChild.innerHTML = self.msg
+
     def on_container_click(self, evt):
         pass  # Dont allow panel to be closed by a click
 # }}}
 
+class DeleteBook:  # {{{
+
+    def __init__(self, overlay):
+        self.overlay = overlay
+
+    def show(self, container):
+        self.container_id = container.getAttribute('id')
+        set_css(container, display='flex', justify_content='center', flex_direction='column', background_color=get_color('window-background'))
+        container.appendChild(
+            E.div(style='margin:1ex 1em',
+                E.h2(_('Are you sure you want to remove this book from local storage? You will have to re-download it from calibre if you want to read it again.')),
+                E.div(style='display:flex; justify-content:flex-end',
+                    create_button(_('Delete book'), 'trash', action=self.delete_book, highlight=True),
+                    E.span('\xa0'),
+                    create_button(_('Cancel'), action=self.cancel),
+                )
+            )
+        )
+
+    def show_working(self):
+        container = document.getElementById(self.container_id)
+        clear(container)
+        container.appendChild(
+            E.div(
+                style='text-align:center',
+                E.div(create_spinner('100px', '100px')),
+                E.h2()
+        ))
+        container.lastChild.lastChild.innerHTML = _('Deleting local book copy, please wait...')
+
+    def on_container_click(self, evt):
+        pass  # Dont allow panel to be closed by a click
+
+    def delete_book(self):
+        view = self.overlay.view
+        view.ui.db.delete_book(view.book, def(book, errmsg):
+            self.overlay.hide_current_panel()
+            if errmsg:
+                view.ui.show_error(_('Failed to delete book'), _('Failed to delete book from local storage, click "Show details" for more information.'), errmsg)
+            else:
+                book_id = book.key[1]
+                get_boss().return_to_book_list(book_id)
+        )
+
+    def cancel(self):
+        self.overlay.hide_current_panel()
+# }}}
+
 class MainOverlay:  # {{{
 
     def __init__(self, overlay):
@@ -83,7 +137,7 @@ class MainOverlay:  # {{{
         add_button()
         add_button('refresh', _('Reload this book from the server'))
         add_button('cloud-download', _('Get last read position and annotations from the server'))
-        add_button('trash', _('Delete this book from the device'))
+        add_button('trash', _('Delete this book from the device'), self.overlay.delete_book)
         add_button()
         add_button('search', _('Search for text in this book'))
         add_button()
@@ -133,6 +187,7 @@ class Overlay:
         clear(c)
         c.style.backgroundColor = 'transparent'
         c.style.color = get_color('window-foreground')
+        c.style.display = 'block'
         return c
 
     @property
@@ -165,10 +220,18 @@ class Overlay:
 
     def show_current_panel(self):
         c = self.clear_container()
-        c.style.display = 'block'
         if self.panels.length:
             self.panels[-1].show(c)
 
     def show(self):
         self.panels = [MainOverlay(self)]
         self.show_current_panel()
+
+    def hide(self):
+        while self.panels.length:
+            self.hide_current_panel()
+
+    def delete_book(self):
+        self.hide_current_panel()
+        self.panels = [DeleteBook(self)]
+        self.show_current_panel()

src/pyj/widgets.pyj

@@ -2,14 +2,14 @@
 # License: GPL v3 Copyright: 2015, Kovid Goyal <kovid at kovidgoyal.net>
 from __python__ import hash_literals
 
-from dom import build_rule, clear, svgicon, create_keyframes
+from dom import build_rule, clear, svgicon, create_keyframes, set_css
 from elementmaker import E
 
 from book_list.theme import get_color
 
 BUTTON_VPADDING = '0.5ex'
 
-def create_button(text, icon=None, action=None, tooltip=None):
+def create_button(text, icon=None, action=None, tooltip=None, highlight=False):
     ic = ''
     if icon:
         ic = svgicon(icon)
@@ -17,6 +17,8 @@ def create_button(text, icon=None, action=None, tooltip=None):
     ans = E.button(ic, text, class_='calibre-push-button', type='button', title=tooltip or '')
     if action is not None:
         ans.addEventListener('click', def(event): event.preventDefault(), action(event);)
+    if highlight:
+        set_css(ans, font_size='larger', font_weight='bold')
     return ans
 
 create_button.style = build_rule('button.calibre-push-button',