Changed how we identify TabbedPages' and Accordian's.

asl_rulebook2/webapp/static/Accordian.js

@@ -10,7 +10,7 @@ gMainApp.component( "accordian", {
     } ; },
 
     template: `
-<div class="accordian">
+<div class="accordian" :id="'accordian-'+accordianId" >
     <slot />
 </div>`,
 

asl_rulebook2/webapp/static/ContentPane.js

@@ -9,7 +9,7 @@ gMainApp.component( "content-pane", {
 
     template: `
 <div>
-    <tabbed-pages ref="tabbedPages">
+    <tabbed-pages tabbedPagesId="content" ref="tabbedPages">
         <tabbed-page v-for="cdoc in contentDocs" :tabId=cdoc.cdoc_id :caption=cdoc.title :key=cdoc.cdoc_id >
             <content-doc :cdoc=cdoc />
         </tabbed-page>

asl_rulebook2/webapp/static/MainApp.js

@@ -205,7 +205,7 @@ gMainApp.component( "main-app", {
                 return ;
             }
             // if one of the non-search nav panes are open, switch to the search pane
-            gEventBus.emit( "activate-tab", "#nav", "search" ) ;
+            gEventBus.emit( "activate-tab", "nav", "search" ) ;
         },
 
     },

asl_rulebook2/webapp/static/NavPane.js

@@ -12,7 +12,7 @@ gMainApp.component( "nav-pane", {
 
     template: `
 <div>
-    <tabbed-pages>
+    <tabbed-pages tabbedPagesId="nav" >
         <tabbed-page tabId="search" caption="Search" >
             <nav-pane-search />
         </tabbed-page>

asl_rulebook2/webapp/static/SearchResult.js

@@ -154,7 +154,7 @@ gMainApp.component( "asop-entry-sr", {
 
     methods: {
         onClickCaption() {
-            gEventBus.emit( "activate-tab", "#nav", "asop" ) ;
+            gEventBus.emit( "activate-tab", "nav", "asop" ) ;
             gEventBus.emit( "show-asop-entry-sr", this.sr.section_id, this.sr.content ) ;
         },
     },

asl_rulebook2/webapp/static/TabbedPages.js

@@ -1,17 +1,17 @@
 import { gMainApp, gEventBus } from "./MainApp.js" ;
-import { isChildOf } from "./utils.js" ;
 
 // --------------------------------------------------------------------
 
 gMainApp.component( "tabbed-pages", {
 
+    props: [ "tabbedPagesId" ],
     data: function() { return {
         tabs: [],
         activeTabId: null,
     } ; },
 
     template: `
-<div class="tabbed-pages">
+<div class="tabbed-pages" :id="'tabbed-pages-'+tabbedPagesId" >
     <slot />
     <div class="tab-strip">
         <div v-for="tab in tabs"
@@ -25,14 +25,9 @@ gMainApp.component( "tabbed-pages", {
 </div>`,
 
     created() {
-        gEventBus.on( "activate-tab", (sel, tabId) => {
+        gEventBus.on( "activate-tab", (tabbedPagesId, tabId) => {
             // check if this event is for us
-            let $sel = $( sel ) ;
-            if ( sel.substring( 0, 1 ) == "#" )
-                sel = sel.substring( 1 ) ;
-            else
-                console.log( "INTERNAL ERROR: Tabs should be activated via a selector ID." ) ;
-            if ( ! isChildOf( this.$el, $sel[0], false ) )
+            if ( tabbedPagesId != this.tabbedPagesId )
                 return ;
             // yup - activate the specified tab
             this.activateTab( tabId ) ;

asl_rulebook2/webapp/tests/test_asop.py

@@ -22,7 +22,7 @@ def test_asop_nav( webdriver, webapp ):
         asop_index = json.load( fp )
 
     # check the nav
-    select_tabbed_page( "#nav", "asop" )
+    select_tabbed_page( "nav", "asop" )
     nav = _unload_nav( False )
     chapters = asop_index["chapters"]
     for chapter_no, chapter in enumerate( chapters ):
@@ -54,7 +54,7 @@ def test_asop_content( webdriver, webapp ):
     # initialize
     webapp.control_tests.set_data_dir( "asop" )
     init_webapp( webapp, webdriver )
-    select_tabbed_page( "#nav", "asop" )
+    select_tabbed_page( "nav", "asop" )
     nav = _unload_nav( True )
 
     def load_asop_file( fname, as_json ):
@@ -228,14 +228,14 @@ def test_asop_entries( webdriver, webapp ):
 
             # check the nav pane
             panes = [
-                c for c in find_children( "#nav .accordian-pane" )
+                c for c in find_children( "#accordian-asop .accordian-pane" )
                 if find_child( ".entries", c ).value_of_css_property( "display" ) != "none"
             ]
             assert len(panes) == 1
             assert panes[0].get_attribute( "data-chapterid" ) == expected[sr_no][2]
 
             # return back to the Search nav pane
-            select_tabbed_page( "#nav", "search" )
+            select_tabbed_page( "nav", "search" )
 
     # do the tests
     do_test( "napalm", [
@@ -263,7 +263,7 @@ def _unload_nav( include_elems ):
     """Unload the ASOP nav."""
 
     chapters = []
-    for chapter_elem in find_children( "#nav .accordian-pane" ):
+    for chapter_elem in find_children( "#accordian-asop .accordian-pane" ):
 
         # unload the next chapter
         chapter = {

asl_rulebook2/webapp/tests/test_basic.py

@@ -17,7 +17,7 @@ def test_hello( webapp, webdriver ):
     assert nav_panels == [ "search", "chapters" ]
 
     # check that there are no chapters
-    select_tabbed_page( "#nav", "search" )
+    select_tabbed_page( "nav", "search" )
     assert find_child( "#nav .tabbed-page[data-tabid='chapters'] .no-chapters" )
 
     # check that the content docs loaded correctly

asl_rulebook2/webapp/tests/test_content_sets.py

@@ -55,7 +55,7 @@ def test_targets( webapp, webdriver ):
     do_test( "4b", "content-set-1!linked" )
     do_test( "1a", "content-set-1" )
     do_test( "cs2d", "content-set-2" )
-    select_tabbed_page( "#content", "empty" )
+    select_tabbed_page( "content", "empty" )
     do_test( "1b", "content-set-1!linked" )
 
 # ---------------------------------------------------------------------
@@ -68,7 +68,7 @@ def test_chapters( webapp, webdriver ):
     init_webapp( webapp, webdriver )
 
     # check the chapters have been loaded correctly
-    select_tabbed_page( "#nav", "chapters" )
+    select_tabbed_page( "nav", "chapters" )
     chapters = _unload_chapters()
     assert chapters == [
         { "title": "Page 1",
@@ -92,7 +92,7 @@ def test_chapters( webapp, webdriver ):
     ]
 
     # check that the chapter section with a missing target is not clickable
-    elems = find_children( "#nav .tabbed-page[data-tabid='chapters'] .accordian-pane" )
+    elems = find_children( "#accordian-chapters .accordian-pane" )
     assert len(elems) == 6
     elems = find_children( ".entry", elems[1] )
     assert len(elems) == 4
@@ -101,7 +101,7 @@ def test_chapters( webapp, webdriver ):
 
     def do_test( chapter_no, entry_no, expected ):
         """Click on a chapter entry."""
-        elems = find_children( "#nav .tabbed-page[data-tabid='chapters'] .accordian-pane" )
+        elems = find_children( "#accordian-chapters .accordian-pane" )
         chapter_elem = elems[ chapter_no ]
         _select_chapter( chapter_elem )
         entries = find_children( ".entries .entry a", chapter_elem )
@@ -127,7 +127,7 @@ def test_chapters( webapp, webdriver ):
 def _unload_chapters():
     """Unload the chapters and their entries."""
     chapters = []
-    for chapter_elem in find_children( "#nav .tabbed-page[data-tabid='chapters'] .accordian-pane" ):
+    for chapter_elem in find_children( "#accordian-chapters .accordian-pane" ):
         _select_chapter( chapter_elem ) # nb: panes need to be expanded to unload their content
         chapters.append( {
             "title": find_child( ".title", chapter_elem ).text,

asl_rulebook2/webapp/tests/test_search.py

@@ -96,7 +96,7 @@ def test_targets( webapp, webdriver ):
     def do_test( query_string, sel, expected ):
 
         # select the dummy document
-        select_tabbed_page( "#content", "empty" )
+        select_tabbed_page( "content", "empty" )
 
         # do the search
         do_search( query_string )
@@ -316,7 +316,7 @@ def do_search( query_string ):
         return find_child( "#search-results" ).get_attribute( "data-seqno" )
 
     # submit the search
-    select_tabbed_page( "#nav", "search" )
+    select_tabbed_page( "nav", "search" )
     elem = find_child( "input#query-string" )
     elem.clear()
     elem.send_keys( query_string )

asl_rulebook2/webapp/tests/utils.py

@@ -69,9 +69,10 @@ def _wait_for_webapp():
 
 # ---------------------------------------------------------------------
 
-def select_tabbed_page( parent_sel, tab_id ):
+def select_tabbed_page( tabbed_pages_id, tab_id ):
     """Select a tabbed page."""
-    tabbed_pages = find_child( ".tabbed-pages", find_child(parent_sel) )
+    tabbed_pages = find_child( "#tabbed-pages-" + tabbed_pages_id )
+    assert tabbed_pages
     btn = find_child( ".tab-strip .tab[data-tabid='{}']".format( tab_id ), tabbed_pages )
     btn.click()
     def find_tabbed_page():