frontend: automatically scroll to snippets

When the review page is loaded, automatically scroll down to the
displayed snippet. Also, when user clicks on a snippet in the right
column, automatically scroll to it as well.

frontend/src/app/components/snippets.cljs

@@ -147,3 +147,20 @@
     (let [span (.getElementById js/document (str "snippet-" snippet-id))
           text (.-innerHTML span)]
       (.replaceWith span text))))
+
+(defn scroll-to-snippet [file snippet]
+  (let [log (.getElementById js/document "log")
+        lines (as-> file x
+                (:content x)
+                (subs x 0 (:start-index snippet))
+                (filter #{"\n"} x)
+                (count x))
+
+        ;; I experimentally figured out this number but the the applicable CSS
+        ;; line-height is `--bs-body-line-height' which is 1.5 and the
+        ;; font-size is 0.875em which equals to 14px. The `14 * 1.5' number
+        ;; would scroll good enough but when adding 0.3, it positions the
+        ;; snippet more close to the center.
+        lineheight 21.3
+        pixels (* lines lineheight)]
+    (set! (.-scrollTop log) pixels)))

frontend/src/app/review/core.cljs

@@ -25,7 +25,8 @@
      on-snippet-textarea-change
      snippet-color
      snippet-color-square
-     highlight-text]]
+     highlight-text
+     scroll-to-snippet]]
    [app.review.logic :refer [index-of-file]]
    [app.review.events :refer
     [on-accordion-item-show
@@ -201,8 +202,15 @@
 
     (instructions-item nil "Submit")]))
 
+(defn on-editor-rendered [element]
+  (when element
+    (scroll-to-snippet
+     (get @files @active-file)
+     (last @snippets))))
+
 (defn middle-column []
-  (editor @files))
+  [:div {:ref on-editor-rendered}
+   (editor @files)])
 
 (defn buttons [name]
   (let [key (keyword name)]

frontend/src/app/review/events.cljs

@@ -1,15 +1,16 @@
 (ns app.review.events
   (:require
    [app.editor.core :refer [active-file]]
-   [app.components.snippets :refer [snippets]]
+   [app.components.snippets :refer [snippets scroll-to-snippet]]
    [app.review.logic :refer [index-of-file]]
-   [app.review.atoms :refer [votes form]]))
+   [app.review.atoms :refer [votes form files]]))
 
 (defn on-accordion-item-show [^js/Event event]
   (let [snippet-id (int (.-indexNumber (.-dataset (.-target event))))
         snippet (nth @snippets snippet-id)
         file-name (:file snippet)]
-    (reset! active-file (index-of-file file-name))))
+    (reset! active-file (index-of-file file-name))
+    (scroll-to-snippet (get @files @active-file) snippet)))
 
 (defn vote [key value]
   (reset! votes (assoc @votes key value)))