Wow time flies, it's almost the end of ClojureFam...
The first thing I did was to identify the the place where the up and down keys were handled. That took place in keybindings.cljs. We need to wrap the selection to the first element when we reach the bottom, and to the top when we reach the bottom.
(= type :slash) (cond
(= :up direction) (do
(.. e preventDefault)
+ (if (= index 0)
+ (swap! state assoc :search/index (dec (count slash-options)))
+ (swap! state update :search/index dec))))
- (swap! state update :search/index dec))
(= :down direction) (do
(.. e preventDefault)
+ (if (= index (dec (count slash-options)))
+ (swap! state assoc :search/index 0)
+ (swap! state update :search/index inc))))
- (swap! state update :search/index inc)))
The next step is to scroll the slash commands container so that the selected elements always remain in the viewport. For this we can use the function that we created in one of our previous pull requests, is-beyond-rect?. It takes the next element, and the container and determines whether we need to call scrollIntoView.
An easy way to get the next element is actually to do the swap before any other operation so that the element that has the correct class is actually the one you want to pass to the function. The code becomes this:
(= type :slash) (cond
- (= :up direction) (let
- [index (:search/index @state)
- container (. js/document getElementsByClassName "command-container")
- next-el (nth (array-seq (.. container -children)) index)]
+ (= :up direction) (do
(.. e preventDefault)
- (if (= index 0)
- (swap! state assoc :search/index (dec (count slash-options)))
- (swap! state update :search/index dec))
+ (swap! state update :search/index #(dec (if (zero? %) (count slash-options) %)))
+ (let [cur-index (:search/index @state)
+ container-el (. js/document getElementById "command-container")
+ next-el (nth (array-seq (.. container-el -children)) cur-index)]
+ (when (is-beyond-rect? next-el container-el)
+ (.. next-el (scrollIntoView (not= cur-index (dec (count slash-options))) {:behavior "auto"})))))
- )
(= :down direction) (do
(.. e preventDefault)
- (if (= index (dec (count slash-options)))
- (swap! state assoc :search/index 0)
- (swap! state update :search/index inc))))
+ (swap! state update :search/index #(if (= % (dec (count results))) 0 (inc %)))
+ (let [cur-index (:search/index @state)
+ container-el (. js/document getElementById "command-container")
+ next-el (nth (array-seq (.. container-el -children)) cur-index)]
+ (when (is-beyond-rect? next-el container-el)
+ (.. next-el (scrollIntoView (zero? cur-index) {:behavior "auto"}))))))
Coming from the JavaScript world, and always wanting to go for best in class, or the right way to do something I try to follow tutorials to do things. Just in case there are specifics I don't want to miss. And there are tutorials about anything and everything in JavaScript. I was a little bit put off by what I was reading about ClojureScript deployment. It was all so specific. Then it hit me, I don't have a backend. Why am I bothering with anything. I can create just create a prod version and deploy that, it's a static website. A lein garden once && lein prod is enough and then I can just deploy the files found in /resources/public. Here is the link, for now, but it's not ready for prime time yet: https://vercel.com/alaq/hail-the-wheel/pqv4vutt7
I also did some more bike-shedding on the wheel, it's going to look :chef_kiss_emoji, I am in absolutely no rush!