Start work on search panel

Also wrap all book list elements in a container <div>

src/pyj/book_list/boss.pyj

@@ -1,19 +1,29 @@
 # vim:fileencoding=utf-8
 # License: GPL v3 Copyright: 2015, Kovid Goyal <kovid at kovidgoyal.net>
 
-from book_list.ui import UI
-from modals import error_dialog
+from dom import set_css
+from elementmaker import E
+from modals import error_dialog, create_modal_container
 from gettext import gettext as _
+from widgets import get_widget_css
 from book_list.globals import get_session_data
 
+from book_list.theme import get_color
+from book_list.ui import UI
+
 class Boss:
 
     def __init__(self, interface_data):
+        document.head.appendChild(E.style(get_widget_css()))
+        set_css(document.body, background_color=get_color('window-background'), color=get_color('window-foreground'))
+        create_modal_container()
         self.interface_data = interface_data
         self.current_library_id = interface_data['default_library']
         self.current_library_name = interface_data['library_map'][self.current_library_id]
         self.update_window_title()
-        self.ui = UI(interface_data)
+        div = E.div(id='book-list-container')
+        document.body.appendChild(div)
+        self.ui = UI(interface_data, div)
         window.onerror = self.onerror.bind(self)
 
     def update_window_title(self):

src/pyj/book_list/item_list.pyj

@@ -10,7 +10,7 @@ iv_counter = 0
 
 class ItemsView:
 
-    def __init__(self, interface_data):
+    def __init__(self, interface_data, book_list_container):
         nonlocal iv_counter
         iv_counter += 1
         self.container_id = 'items-view-' + iv_counter
@@ -26,7 +26,7 @@ class ItemsView:
             id=self.container_id, style='display:none',
             E.style(style, type='text/css')
         )
-        document.body.appendChild(div)
+        book_list_container.appendChild(div)
 
     @property
     def container(self):

src/pyj/book_list/search.pyj

@@ -0,0 +1,32 @@
+# vim:fileencoding=utf-8
+# License: GPL v3 Copyright: 2015, Kovid Goyal <kovid at kovidgoyal.net>
+
+from elementmaker import E
+
+sp_counter = 0
+
+class SearchPanel:
+
+    def __init__(self, interface_data, book_list_container):
+        nonlocal sp_counter
+        sp_counter += 1
+        self.container_id = 'search-panel-' + sp_counter
+        self.interface_data = interface_data
+        style = ''
+        div = E.div(
+            id=self.container_id, style='display:none',
+            E.style(style, type='text/css')
+        )
+        book_list_container.appendChild(div)
+
+    @property
+    def container(self):
+        return document.getElementById(self.container_id)
+
+    @property
+    def is_visible(self):
+        self.container.style.display == 'block'
+
+    @is_visible.setter
+    def is_visible(self, val):
+        self.container.style.display = 'block' if val else 'none'

src/pyj/book_list/top_bar.pyj

@@ -13,7 +13,7 @@ class TopBar:
     SPACING = '0.75em'
     VSPACING = '0.5ex'
 
-    def __init__(self):
+    def __init__(self, book_list_container):
         nonlocal bar_counter
         bar_counter += 1
         self.bar_id, self.dummy_bar_id = 'top-bar-' + bar_counter, 'dummy-top-bar-' + bar_counter
@@ -42,7 +42,7 @@ class TopBar:
                 font_size=get_font_size('title'), user_select='none',
                 color=get_color('bar-foreground'), background_color=get_color('bar-background')
             )
-            document.body.appendChild(bar)
+            book_list_container.appendChild(bar)
 
     @property
     def bar(self):

src/pyj/book_list/ui.pyj

@@ -2,16 +2,12 @@
 # License: GPL v3 Copyright: 2015, Kovid Goyal <kovid at kovidgoyal.net>
 
 from book_list.globals import get_boss
-from book_list.theme import get_color
+from book_list.search import SearchPanel
 from book_list.top_bar import TopBar
 from book_list.views import BooksView
 from book_list.item_list import ItemsView, create_item
-from dom import set_css
-from elementmaker import E
 from gettext import gettext as _
-from modals import create_modal_container
 from utils import debounce
-from widgets import get_widget_css
 
 class BarState:
 
@@ -33,6 +29,8 @@ class UIState:
     def __init__(self, top_bar_state=None, main_panel=None, panel_data=None, is_cacheable=True):
         self.top_bar_state = top_bar_state
         self.main_panel = main_panel or get_boss().ui.items_view
+        if type(self.main_panel) == 'string':
+            self.main_panel = getattr(get_boss().ui, self.main_panel)
         self.panel_data = panel_data
         self.is_cacheable = is_cacheable
 
@@ -75,28 +73,30 @@ create_panel = {
         data = get_boss().ui.books_view.sort_panel_data(create_item)
         return UIState(ClosePanelBar(_('Sort books')), panel_data=data, is_cacheable=False)
     ,
+
+    'booklist-search': def search_panel():
+        return UIState(ClosePanelBar(_('Search for books')), main_panel='search_panel')
+    ,
 }
 
 
 class UI:
 
-    def __init__(self, interface_data):
-        document.head.appendChild(E.style(get_widget_css()))
-        set_css(document.body, background_color=get_color('window-background'), color=get_color('window-foreground'))
-        create_modal_container()
+    def __init__(self, interface_data, book_list_container):
         self.states, self.panels = [], []
-        self.top_bar = TopBar()
-        self.books_view = BooksView(interface_data)
-        self.items_view = ItemsView(interface_data)
+        self.top_bar = TopBar(book_list_container)
+        self.books_view = BooksView(interface_data, book_list_container)
+        self.items_view = ItemsView(interface_data, book_list_container)
+        self.search_panel = SearchPanel(interface_data, book_list_container)
         ibs = BarState(run_animation=True)
         ibs.add_button(icon_name='sort-amount-desc', tooltip=_('Sort books'), action=show_panel_action('booklist-sort-menu'))
-        ibs.add_button(icon_name='search', tooltip=_('Search for books'))
+        ibs.add_button(icon_name='search', tooltip=_('Search for books'), action=show_panel_action('booklist-search'))
         ibs.add_button(icon_name='ellipsis-v', tooltip=_('More actions'), action=show_panel_action('more-actions-menu'))
         self.states.append(UIState(ibs, self.books_view))
         self.apply_state(self.states[0])
         ibs.left_state.run_animation = False
         window.addEventListener('resize', debounce(self.on_resize.bind(self), 250))
-        self.panels = v'[self.books_view, self.items_view]'
+        self.panels = [self.books_view, self.items_view, self.search_panel]
 
     def on_resize(self):
         pass

src/pyj/book_list/views.pyj

@@ -17,7 +17,7 @@ bv_counter = 0
 
 class BooksView:
 
-    def __init__(self, interface_data):
+    def __init__(self, interface_data, book_list_container):
         nonlocal bv_counter
         bv_counter += 1
         self.interface_data = interface_data
@@ -35,7 +35,7 @@ class BooksView:
             E.div(),
             E.div()
         )
-        document.body.appendChild(div)
+        book_list_container.appendChild(div)
         self.set_view_mode(get_session_data().get('view_mode'))
         self.create_more_button(div)