Changed how we handle the Escape key.

asl_rulebook2/webapp/static/MainApp.js

@@ -30,7 +30,7 @@ gMainApp.component( "main-app", {
     } ; },
 
     template: `
-<nav-pane id="nav" />
+<nav-pane id="nav" ref="navPane" />
 <content-pane id="content" :contentDocs=contentDocs />
 <div v-if=isLoaded id="_mainapp-loaded_" />
 `,
@@ -61,16 +61,8 @@ gMainApp.component( "main-app", {
 
         // add a global keypress handler
         $(document).on( "keyup", (evt) => {
-            if ( evt.keyCode == 27 ) {
-                if ( $(".jquery-image-zoom").length >= 1 )
-                    return ; // an image is zoomed - ignore the Escape
-                // close any notification balloons
-                $( ".growl-close" ).each( function() {
-                    $(this).trigger( "click" ) ;
-                } ) ;
-                // notify the rest of the application
-                gEventBus.emit( "escape-pressed" ) ;
-            }
+            if ( evt.keyCode == 27 )
+                this.onEscapePressed() ;
         } ) ;
 
     },
@@ -178,6 +170,31 @@ gMainApp.component( "main-app", {
             } ) ;
         },
 
+        onEscapePressed() {
+            // check if an image is currently zoomed
+            if ( $(".jquery-image-zoom").length > 0 ) {
+                // yup - no need to do anything (the image will un-zoom itself)
+                return ;
+            }
+            // close any notification balloons
+            let isFootnoteOpen = $( ".growl-footnote" ).length > 0 ;
+            $( ".growl-close" ).each( function() {
+                $(this).trigger( "click" ) ;
+            } ) ;
+            // check if a footnotes balloon is open
+            if ( isFootnoteOpen ) {
+                // yup - let it "consume" the Escape key
+                return ;
+            }
+            // check if the rule info popup is open
+            if ( this.$refs.navPane.closeRuleInfo() ) {
+                // yup - let the Escape close it
+                return ;
+            }
+            // if one of the non-search nav panes are open, switch to the search pane
+            gEventBus.emit( "activate-tab", "#nav", "search" ) ;
+        },
+
     },
 
 } ) ;

asl_rulebook2/webapp/static/NavPane.js

@@ -54,7 +54,9 @@ gMainApp.component( "nav-pane", {
     methods: {
         closeRuleInfo() {
             // close the rule info popup
+            let isOpen = this.ruleInfo.length > 0 ;
             this.ruleInfo = [] ;
+            return isOpen ;
         },
     },
 

asl_rulebook2/webapp/static/TabbedPages.js

@@ -26,11 +26,12 @@ gMainApp.component( "tabbed-pages", {
     created() {
         gEventBus.on( "activate-tab", (sel, 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 ( this.$el.getAttribute( "id" ) != sel )
+            if ( this.$el.getAttribute("id") != sel && ! $.contains( $sel[0], this.$el ) )
                 return ;
             // yup - activate the specified tab
             this.activateTab( tabId ) ;