Add moveUp and moveDown to FileFinder

spec/atom/file-finder-spec.coffee

@@ -9,17 +9,21 @@ describe 'FileFinder', ->
     finder = FileFinder.build {urls}
 
   describe "initialize", ->
-    it "populates the ol with all urls", ->
-      expect(finder.urlList.children('li').length).toBe urls.length
+    it "populates the ol with all urls and selects the first element", ->
+      expect(finder.urlList.find('li').length).toBe urls.length
+      expect(finder.urlList.find('li:first')).toHaveClass('selected')
+      expect(finder.urlList.find('li.selected').length).toBe 1
 
   describe "when characters are typed into the input element", ->
-    it "displays matching urls in the ol element", ->
+    it "displays matching urls in the ol element and selects the first", ->
       finder.input.val('ap')
       finder.input.keyup()
 
       expect(finder.urlList.children().length).toBe 2
       expect(finder.urlList.find('li:contains(app.coffee)').length).toBe 2
       expect(finder.urlList.find('li:contains(atom/app.coffee)').length).toBe 1
+      expect(finder.urlList.find('li:first')).toHaveClass 'selected'
+      expect(finder.urlList.find('li.selected').length).toBe 1
 
       # we should clear the list before re-populating it
       finder.input.val('a/ap')
@@ -28,6 +32,32 @@ describe 'FileFinder', ->
       expect(finder.urlList.children().length).toBe 1
       expect(finder.urlList.find('li:contains(atom/app.coffee)').length).toBe 1
 
+  fdescribe "moveDown / moveUp", ->
+    it "selects the next / previous url in the list", ->
+      expect(finder.find('li:eq(0)')).toHaveClass "selected"
+      expect(finder.find('li:eq(2)')).not.toHaveClass "selected"
+
+      finder.moveDown()
+      finder.moveDown()
+
+      expect(finder.find('li:eq(0)')).not.toHaveClass "selected"
+      expect(finder.find('li:eq(2)')).toHaveClass "selected"
+
+      finder.moveUp()
+      expect(finder.find('li:eq(0)')).not.toHaveClass "selected"
+      expect(finder.find('li:eq(1)')).toHaveClass "selected"
+      expect(finder.find('li:eq(2)')).not.toHaveClass "selected"
+
+    it "does not fall off the end or begining of the list", ->
+      expect(finder.find('li:first')).toHaveClass "selected"
+      finder.moveUp()
+      expect(finder.find('li:first')).toHaveClass "selected"
+
+      for i in [1..urls.length+10]
+        finder.moveDown()
+
+      expect(finder.find('li:last')).toHaveClass "selected"
+
   describe "findMatches(queryString)", ->
     it "returns all urls if queryString is empty", ->
       expect(finder.findMatches('')).toEqual urls

src/atom/file-finder.coffee

@@ -6,7 +6,7 @@ module.exports =
 class FileFinder extends Template
   content: ->
     @link rel: 'stylesheet', href: "#{require.resolve('file-finder.css')}?#{(new Date).getTime()}"
-    @div class: 'file-finder', =>
+    @div keydown: 'handleKeydown', class: 'file-finder', =>
       @ol outlet: 'urlList'
       @input outlet: 'input', keyup: 'populateUrlList'
 
@@ -21,9 +21,30 @@ class FileFinder extends Template
       for url in @findMatches(@input.val())
         @urlList.append $("<li>#{url}</li>")
 
+      @urlList.children('li:first').addClass 'selected'
+
+    findSelectedLi: ->
+      @urlList.children('li.selected')
+
+    moveUp: ->
+      @findSelectedLi()
+        .filter(':not(:first-child)')
+        .removeClass('selected')
+        .prev()
+        .addClass('selected')
+
+    moveDown: ->
+      @findSelectedLi()
+        .filter(':not(:last-child)')
+        .removeClass('selected')
+        .next()
+        .addClass('selected')
+
     findMatches: (query) ->
       return @urls unless query
       scoredUrls = ({url, score: stringScore(url, query)} for url in @urls)
       sortedUrls = scoredUrls.sort (a, b) -> a.score > b.score
       urlAndScore.url for urlAndScore in sortedUrls when urlAndScore.score > 0
 
+    handleKeydown: ->
+      console.log 'keydownnnn'

static/file-finder.css

@@ -9,3 +9,7 @@
 .file-finder input {
   width: 100%;
 }
+
+.file-finder li.selected {
+  background-color: green;
+}