Focus with Arrow Keys

web-app/src/components/expr_ast_widget.rs

@@ -61,7 +61,8 @@ impl Component for ExprAstWidget {
                 <h2> { "Enter Expression:" } </h2>
                 <ExprEntry
                     oninput=self.link.callback(|value| value)
-                    init_value={ &self.current_input } />
+                    init_value={ &self.current_input }
+                    id=""/>
                 <hr />
                 <h5> { &self.last_good_parse } </h5>
                 { expr_debug }

web-app/src/components/expr_entry.rs

@@ -43,6 +43,9 @@ pub struct ExprEntryProps {
 
     /// Initial text in text field when it is loaded
     pub init_value: String,
+
+    /// An ID to use for our strings
+    pub id: String,
 }
 
 impl Component for ExprEntry {
@@ -74,6 +77,7 @@ impl Component for ExprEntry {
             <input
                 ref=self.node_ref.clone()
                 type="text"
+                id=self.props.id
                 class="form-control text-input-custom"
                 oninput=self.link.callback(|_| ExprEntryMsg::OnEdit)
                 onfocus=self.link.callback(|_| ExprEntryMsg::OnFocus)

web-app/src/components/proof_widget/mod.rs

@@ -26,6 +26,13 @@ use frunk_core::coproduct::Coproduct;
 use frunk_core::Coprod;
 use strum::IntoEnumIterator;
 use yew::prelude::*;
+use yew::utils::document;
+
+use web_sys::HtmlElement;
+
+use wasm_bindgen::JsCast;
+
+use js_sys::Math::random;
 
 /// Data stored for the currently selected line
 struct SelectedLine {
@@ -58,6 +65,8 @@ pub struct ProofWidget {
     preblob: String,
 
     props: ProofWidgetProps,
+
+    id: String,
 }
 
 /// A kind of proof structure item
@@ -391,6 +400,7 @@ impl ProofWidget {
             }
             Inr(Inr(void)) => match void {},
         };
+        let id_num = format!("{}{}{}", self.id, &"line-number-", &line.to_string());
         html! {
             <tr class=class>
                 <td> { line_num_dep_checkbox } </td>
@@ -400,7 +410,8 @@ impl ProofWidget {
                         oninput=handle_input
                         onfocus=select_line
                         focus=is_selected_line
-                        init_value=init_value />
+                        init_value=init_value
+                        id=id_num/>
                 </td>
                 { feedback_and_just_widgets }
                 <td>{ action_selector }</td>
@@ -496,6 +507,32 @@ impl ProofWidget {
         // All keyboard shortcuts have the control key held. Do nothing if the
         // control key isn't pressed.
         if !key_event.ctrl_key() {
+            // Change focus on ArrowDown or ArrowUp
+            if key_event.key() == "ArrowDown" || key_event.key() == "ArrowUp" {
+                // Get our current id to find the others.
+                let focused_elem_id = match document().active_element() {
+                    Some(focused_elem_id) => focused_elem_id.id(),
+                    None => return ProofWidgetMsg::Nop,
+                };
+                let up_down = match key_event.key().as_str() {
+                    "ArrowDown" => 1,
+                    "ArrowUp" => -1,
+                    _ => return ProofWidgetMsg::Nop,
+                };
+                let signature = format!("{}{}", self.id, "line-number-");
+                let length = signature.chars().count();
+                // Verify that our selected element is the one we will work with.
+                if focused_elem_id.chars().count() < length {
+                    return ProofWidgetMsg::Nop;
+                }
+                let num = focused_elem_id[length..].parse::<i32>().unwrap() + up_down;
+                //let new_id = "#line-number-".to_owned() + &num.to_string();
+                let _focused_input = match document().get_element_by_id(&format!("{}{}", signature, &num.to_string())) {
+                    Some(_focused_input) => _focused_input.unchecked_into::<HtmlElement>().focus(),
+                    None => return ProofWidgetMsg::Nop,
+                };
+            }
+
             return ProofWidgetMsg::Nop;
         }
 
@@ -599,7 +636,9 @@ impl Component for ProofWidget {
             }
         };
 
-        let mut tmp = Self { link, prf, pud, selected_line: None, open_error: error, preblob: "".into(), props };
+        let id: String = ((random() * 10000.0) as i32).to_string();
+
+        let mut tmp = Self { link, prf, pud, selected_line: None, open_error: error, preblob: "".into(), props, id };
         tmp.update(ProofWidgetMsg::Nop);
         tmp
     }