diff --git a/src/pyj/book_list/search.pyj b/src/pyj/book_list/search.pyj index 84bc285afa..396079e56d 100644 --- a/src/pyj/book_list/search.pyj +++ b/src/pyj/book_list/search.pyj @@ -23,12 +23,24 @@ class SearchPanel: style += build_rule('#' + self.container_id + ' div.tag-menu:hover', color=get_color('list-hover-foreground'), background_color=get_color('list-hover-background')) style += build_rule('#' + self.container_id + ' div.tag-name:active', transform='scale(1.5)') style += build_rule('#' + self.container_id + ' div.tag-menu:active', transform='scale(2)') + + # Breadcrumbs + style += build_rule('#' + self.container_id + ' ol.breadcrumbs', user_select='none', white_space='nowrap', box_shadow='0 0 5px 1px rgba(0, 0, 0, 0.35)', border_radius='10px', margin='1ex 1em', margin_bottom='0') + style += build_rule('#' + self.container_id + ' ol.breadcrumbs li', cursor='pointer', display='inline-block', line_height='26px', margin='0 9px 0 -10px', padding='0.5ex 1rem', position='relative') + style += build_rule('#' + self.container_id + ' ol.breadcrumbs li:hover', font_weight='bold', font_style='italic', color='red') + style += build_rule('#' + self.container_id + ' ol.breadcrumbs li:active', transform='scale(2)', color='red') + style += build_rule(str.format('#{0} ol.breadcrumbs li:before, #{0} ol.breadcrumbs li:after', self.container_id), + border_right='2px solid currentColor', content='""', display='block', height='50%', position='absolute', left='0', top='0', right='0', z_index='-1', transform='skewX(45deg)') + style += build_rule('#' + self.container_id + ' ol.breadcrumbs li:after', bottom='0', top='auto', transform='skewX(-45deg)') + style += build_rule(str.format('#{0} ol.breadcrumbs li:last-of-type:before, #{0} ol.breadcrumbs li:last-of-type:after', self.container_id), display='none') + div = E.div( id=self.container_id, style='display:none', E.style(style, type='text/css'), E.div(style="text-align:center; padding:1ex 1em; border-bottom: solid 1px currentColor; margin-bottom: 0.5ex"), # search input container E.div( E.div(), + E.ol(class_='breadcrumbs', style="display:none"), E.div(style="display:none") ) ) @@ -135,8 +147,9 @@ class SearchPanel: def render_tag_browser(self, container=None): container = container or self.tb_container clear(container) - set_css(container, padding='1rem', display='flex', flex_wrap='wrap') + set_css(container, padding='1ex 1em', display='flex', flex_wrap='wrap', margin_left='-0.5rem') self.render_children(container, self.node_for_path().children) + self.render_breadcrumbs() def icon_for_node(self, node): ans = self.interface_data.icon_map[node.data.category] or 'column.png' @@ -165,6 +178,35 @@ class SearchPanel: div.firstChild.addEventListener('click', click_handler(self.node_clicked, i)) container.appendChild(div) + def render_breadcrumbs(self): + container = self.breadcrumbs_container + if not self.tag_path.length: + container.style.display = 'none' + return + clear(self.breadcrumbs_container) + container.style.display = 'inline-block' + + def onclick(i): + return def(ev): + self.tag_path = self.tag_path[:i+1] + self.render_tag_browser() + ev.preventDefault() + return True + + def create_breadcrumb(index=-1, item=None): + if item: + li = E.li(item.name) + else: + li = E.li(E.i(class_='fa fa-home fa-lg')) + container.appendChild(li) + li.addEventListener('click', onclick(index)) + + create_breadcrumb() + parent = self.tag_browser_data + for i, index in enumerate(self.tag_path): + parent = parent.children[index] + create_breadcrumb(i, parent.data) + def search_expression_for_item(self, node, state): item = node.data if item.is_searchable is False or not state or state == 'clear': @@ -236,6 +278,10 @@ class SearchPanel: def container(self): return document.getElementById(self.container_id) + @property + def breadcrumbs_container(self): + return self.tb_container.previousSibling + @property def tb_container(self): return self.container.lastChild.lastChild