Skip to content

Latest commit

 

History

History
34 lines (23 loc) · 1.4 KB

july-16-2020.md

File metadata and controls

34 lines (23 loc) · 1.4 KB
Raw

ClojureFam - Week 4 - Day 4

Today, I started seriously working on the Athena issue - athensresearch/athens#126 with @adrien and @nthd3gr33.

Athena Issue -

  • up and down to go through list. arrow keys work, but now needs the list needs to scroll
  • two items can be highlighted at once: one from mouse hover, one from arrow keys

We came up with a solution so that the the arrow keys do scroll vertically through the menu items. The animation is a bit janky though.

Inside key-down-handler in athena.cljs -

(= key KeyCodes.UP)
(do
    (swap! state update :index dec)
    (let [cur-sel (first (array-seq (. js/document getElementsByClassName "selected")))]
        (.. cur-sel (scrollIntoView false {:behavior "smooth" :block "center"}))))

(= key KeyCodes.DOWN)
(do
    (swap! state update :index inc)
    (let [cur-sel (first (array-seq (. js/document getElementsByClassName "selected")))]
        (.. cur-sel (scrollIntoView true {:behavior "smooth" :block "center"}))))

Using tabIndex might be another solution worth exploring - https://stackoverflow.com/questions/23268193/scrolling-inner-div-on-key-down-and-up/51927383#51927383.

Roam seems to use a React UI library called blueprint. We could borrow inspiration from this library on how to implement the smooth scrolling behavior.

Takeaways

UI issues are hard to debug. Solution - Don't get into UI Development.