Keyboard shortcuts

Bring up info panel first

viz/app.R

                 radioButtons("radioeduemp", 
                              label = "Commuters (age 15+) travelling to",
                              choiceNames = list(
-                               HTML("<span>E<u>m</u>ployment</span>"),
-                               HTML("<span>E<u>d</u>ucation</span>")
+                               HTML("Em<span class='shortcut'>p</span>loyment"),
+                               HTML("E<span class='shortcut'>d</span>ucation")
                              ),
                              choiceValues = list(
                                "Employment", "Education"
                              inline = TRUE),
                 radioButtons("radioinout", label="Show commuters who",
                              choiceNames = list(
-                               HTML("<span>Commute <u>f</u>rom selected area</span>"),
-                               HTML("<span>Commute <u>t</u>o selected area</span>")),
+                           HTML("Commute <span class='shortcut'>f</span>rom selected area"),
+                           HTML("Commute <span class='shortcut'>t</span>o selected area")),
                              choiceValues = list(
                                "res",
                                "work"
                 radioButtons("radiocolour",
                              label = "Colour by",
                              choiceNames = list(
-                               HTML("<span>M<u>o</u>st common commute method</span>"),
-                               HTML("<span>N<u>u</u>mber of commuters</span>")
+                           HTML("M<span class='shortcut'>o</span>st common commute method"),
+                           HTML("N<span class='shortcut'>u</span>mber of commuters")
                              ),
                              choiceValues = list(
                                "type",
   absolutePanel(bottom=26, right=10, left=10, top=10, id="infopanel",
                 infotext),
   absolutePanel(bottom=10, left=10, id="infobuttoncontainer",
-    prettyToggle("mapinfobutton", label_on = "Info",
-                 label_off = "Info", icon_on=icon("times"),
+    prettyToggle("mapinfobutton", 
+                 label_on = HTML("<span class='shortcut'>I</span>nfo"),
+                 label_off = HTML("<span class='shortcut'>I</span>nfo"),
+                 icon_on=icon("times"),
                  icon_off = icon("info"),
                  animation = "pulse",
                  inline = TRUE,
                  status_on = "danger",
-                 status_off = "info")
+                 status_off = "info",
+                 value = TRUE)
   )
 )
 
   observeEvent(input$radioinout, ignoreInit = TRUE, {
     updateMap()
   })
-  observeEvent(input$infobutton, {
-    print(input$infobutton)
-  })
   observeEvent(input$radiocolour, ignoreInit = TRUE, {
     updateMap()
   })
                            time = 0.5)
   })
   observeEvent(input$mapinfobutton, ignoreInit = TRUE, {
-    shinyjs::toggleElement("infopanel", anim=TRUE,
+    if (input$mapinfobutton) {
+      shinyjs::showElement("infopanel", anim=TRUE,
+                           time = 0.5)
+    } else {
+      shinyjs::hideElement("infopanel", anim=TRUE,
                            time = 0.5)
+      shinyjs::runjs("document.getElementById('map').focus()")
+    }
   })
   output$lochtml <- renderUI({
     seled <- sel.SA2.code()

viz/extras.R

 }
 #loading {
   cursor: progress !important;
+  z-index: 1002;
 }
 #loading p {
   border-radius: 5px;
   display: none;
 }
 #infopanel {
-  display: none;
   background-color: rgba(255, 255, 255, 0.9);
   padding: 10px;
   z-index: 1001;
 .leaflet-control-search {
   box-shadow: none;
 }
+.shortcut {
+  text-decoration: underline 1px dotted;
+}
+#shortcutlist {
+  columns: 20em 2;
+}
+kbd {
+  color: #444;
+  background-color: #eee;
+  border-radius: 4px;
+  padding: 0px 2px;
+  border-color: #444;
+  border-width: 1px;
+  -webkit-box-shadow: 1px 1px #444;
+  box-shadow: 1px 1px #444;
+}
 "
 
 attribhtml <- '
 random rounding</a>
 '
 
-infotext <- div(class="overflowable",
+infotext <- div(class="overflowable", id="infoint", tabindex="2",
   h3("How did Kiwis commute in 2018?"),
   p("This tool maps the 2018 census",
   a(href=
     "(including the people who commute within the area). When no area is ",
     "selected, colouring is according to commutes to or from all ",
     "localities. Hover over areas for a summary (on a tablet, hold press)."),
+  h4("Keyboard shortcuts"),
+  shiny::tags$ul(id="shortcutlist",
+    shiny::tags$li(shiny::tags$kbd("I"), ": toggle this info page"),
+    shiny::tags$li(shiny::tags$kbd("M"), ": focus map"),
+    shiny::tags$li(shiny::tags$kbd("P"), ": show employment"),
+    shiny::tags$li(shiny::tags$kbd("D"), ": show education"),
+    shiny::tags$li(shiny::tags$kbd("F"), ": show people commuting from localities"),
+    shiny::tags$li(shiny::tags$kbd("T"), ": show people commuting to localities"),
+    shiny::tags$li(shiny::tags$kbd("O"), ": colour by most common commute type"),
+    shiny::tags$li(shiny::tags$kbd("U"), ": colour by number of commuters")
+  ),
   h4("FAQ"),
   shiny::tags$blockquote("Why are so many areas marked as 'works at ",
                          "home'?"),
 keyboardjs <- tags$head(tags$script(HTML("
 $(function(){ 
   $(document).keyup(function(e) {
+    var active = document.activeElement
+    if (active.id == 'searchtext9') return;
     switch(e.key) {
-      case 'm':
+      case 'p':
+      case 'P':
         document.getElementsByName('radioeduemp')[0].checked = true;
         Shiny.onInputChange('radioeduemp', 'Employment')
         break;
       case 'd':
+      case 'D':
         document.getElementsByName('radioeduemp')[1].checked = true;
         Shiny.onInputChange('radioeduemp', 'Education')
         break;
       case 'f':
+      case 'F':
         document.getElementsByName('radioinout')[0].checked = true;
         Shiny.onInputChange('radioinout', 'res')
         break;
       case 't':
+      case 'T':
         document.getElementsByName('radioinout')[1].checked = true;
         Shiny.onInputChange('radioinout', 'work')
         break;
       case 'o':
+      case 'O':
         document.getElementsByName('radiocolour')[0].checked = true;
         Shiny.onInputChange('radiocolour', 'type')
         break;
       case 'u':
+      case 'U':
         document.getElementsByName('radiocolour')[1].checked = true;
         Shiny.onInputChange('radiocolour', 'number')
         break;
+      case 'i':
+      case 'I':
+        shinyjs.click('mapinfobutton')
+        break;
+      case 'm':
+      case 'M':
+        document.getElementById('map').focus()
+        break;
       default:
         break;
     }