Browse code

Update prompt submission to work without explicit element IDs

Hard-coding an ID is brittle. The submission event has a reference
to the form that triggered the event in its "target" attribute.
We pass this reference through the event handlers so that
we can eventually call "scrollIntoView" on it.

Joseph Weston authored on 08/12/2021 02:25:44
Showing 2 changed files
... ...
@@ -31,19 +31,18 @@
31 31
    :else {:err (str "Unknown command '" cmdline "'")})))
32 32
 
33 33
 (re-frame/reg-fx
34
- :window/scroll-to-prompt
35
- (fn []
36
-   (-> js/document
37
-       (.getElementById "prompt")
38
-       (.scrollIntoView (clj->js {:behavior :smooth})))))
34
+ :window/scroll-to
35
+ (fn [element]
36
+   (.scrollIntoView element (clj->js {:behavior :smooth}))))
39 37
 
40 38
 (re-frame/reg-event-fx
41
- ::scroll-to-prompt
42
- (fn [] {:window/scroll-to-prompt []}))
39
+ ::scroll-to
40
+ (fn [_ [_ x]]
41
+     {:window/scroll-to x}))
43 42
 
44 43
 (re-frame/reg-event-fx
45 44
  ::submit-cmd
46
- (fn [cofx _]
45
+ (fn [cofx [_ prompt]]
47 46
   (let [db (cofx :db)
48 47
         cmdline (some-> db :cmdline :current trim)
49 48
         not-empty? seq]
... ...
@@ -59,4 +58,4 @@
59 58
                 {:input cmdline :output output}))))
60 59
      ; dispatch-later to ensure that the DOM has already been updated,
61 60
      ; so that scrollMaxY has been changed appropriately.
62
-     :fx [[:dispatch-later {:ms 10 :dispatch [::scroll-to-prompt]}]]})))
61
+     :fx [[:dispatch-later {:ms 10 :dispatch [::scroll-to prompt]}]]})))
... ...
@@ -12,8 +12,8 @@
12 12
         update-cmdline #(re-frame/dispatch-sync
13 13
                          [::events/update-cmdline (-> % .-target .-value)])
14 14
         submit-cmd #(do (.preventDefault %)
15
-                        (re-frame/dispatch [::events/submit-cmd]))]
16
-    [:form {:id "prompt" :class (styles/prompt-style)
15
+                        (re-frame/dispatch [::events/submit-cmd (-> % .-target)]))]
16
+    [:form {:class (styles/prompt-style)
17 17
             :on-submit submit-cmd}
18 18
      [:input {:value @cmdline
19 19
               :on-change update-cmdline