diff --git a/frontend/src/app/components/snippets.cljs b/frontend/src/app/components/snippets.cljs index 361e071..7df4927 100644 --- a/frontend/src/app/components/snippets.cljs +++ b/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))) diff --git a/frontend/src/app/review/core.cljs b/frontend/src/app/review/core.cljs index 5f81336..e2be3e9 100644 --- a/frontend/src/app/review/core.cljs +++ b/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)] diff --git a/frontend/src/app/review/events.cljs b/frontend/src/app/review/events.cljs index 59c6a88..a712412 100644 --- a/frontend/src/app/review/events.cljs +++ b/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)))