Add ability to move through select list and 'event-palette:cancel' event

spec/extensions/event-palette-spec.coffee

@@ -1,6 +1,7 @@
 RootView = require 'root-view'
 EventPalette = require 'event-palette'
 $ = require 'jquery'
+_ = require 'underscore'
 
 describe "EventPalette", ->
   [rootView, palette] = []
@@ -9,14 +10,44 @@ describe "EventPalette", ->
     rootView = new RootView(require.resolve('fixtures/sample.js'))
     rootView.activateExtension(EventPalette)
     palette = EventPalette.instance
+    rootView.attachToDom().focus()
+    rootView.trigger 'event-palette:show'
 
   afterEach ->
     rootView.remove()
 
-  describe "when shown", ->
-    it "shows a list of all valid events for the previously focused element, then focuses the mini-editor", ->
-      rootView.attachToDom().focus()
-      rootView.trigger 'event-palette:show'
+  describe "when event-palette:show is triggered on the root view", ->
+    it "shows a list of all valid events for the previously focused element, then focuses the mini-editor and selects the first event", ->
       for [event, description] in rootView.getActiveEditor().events()
         expect(palette.eventList.find("td:contains(#{event})")).toExist()
-      expect(palette.miniEditor.isFocused).toBeTruthy()
+
+      expect(palette.miniEditor.isFocused).toBeTruthy()
+      expect(palette.find('.event:first')).toHaveClass 'selected'
+
+  describe "when event-palette:cancel is triggered on the event palette", ->
+    fit "detaches the event palette", ->
+      expect(palette.hasParent()).toBeTruthy()
+      palette.trigger('event-palette:cancel')
+      expect(palette.hasParent()).toBeFalsy()
+
+  describe "when 'move-up' and 'move-down' events are triggered on the mini editor", ->
+    fit "selects the next and previous event, if there is one, and scrolls the list to it", ->
+      palette.miniEditor.trigger 'move-up'
+      expect(palette.find('.event:eq(0)')).toHaveClass 'selected'
+
+      palette.miniEditor.trigger 'move-down'
+      expect(palette.find('.event:eq(0)')).not.toHaveClass 'selected'
+      expect(palette.find('.event:eq(1)')).toHaveClass 'selected'
+
+      palette.miniEditor.trigger 'move-down'
+      expect(palette.find('.event:eq(1)')).not.toHaveClass 'selected'
+      expect(palette.find('.event:eq(2)')).toHaveClass 'selected'
+
+      palette.miniEditor.trigger 'move-up'
+      expect(palette.find('.event:eq(2)')).not.toHaveClass 'selected'
+      expect(palette.find('.event:eq(1)')).toHaveClass 'selected'
+
+      _.times palette.find('.event').length, ->
+        palette.miniEditor.trigger 'move-down'
+
+      expect(palette.eventList.scrollTop() + palette.eventList.height()).toBe palette.eventList.prop('scrollHeight')

src/app/editor.coffee

@@ -93,8 +93,6 @@ class Editor extends View
     editorBindings =
       'move-right': @moveCursorRight
       'move-left': @moveCursorLeft
-      'move-down': @moveCursorDown
-      'move-up': @moveCursorUp
       'move-to-next-word': @moveCursorToNextWord
       'move-to-previous-word': @moveCursorToPreviousWord
       'select-right': @selectRight
@@ -136,6 +134,8 @@ class Editor extends View
 
     unless @mini
       _.extend editorBindings,
+        'move-down': @moveCursorDown
+        'move-up': @moveCursorUp
         'save': @save
         'newline-below': @insertNewlineBelow
         'toggle-soft-wrap': @toggleSoftWrap

src/extensions/event-palette/event-palette.coffee

@@ -11,14 +11,47 @@ class EventPalette extends View
 
   @content: ->
     @div class: 'event-palette', =>
-      @div class: 'event-list', outlet: 'eventList'
+      @div class: 'select-list', outlet: 'eventList'
       @subview 'miniEditor', new Editor(mini: true)
 
   initialize: (@rootView) ->
+    @on 'move-up', => @selectPrevious()
+    @on 'move-down', => @selectNext()
+    @on 'event-palette:cancel', => @detach()
+
+  selectPrevious: ->
+    current = @getSelectedItem()
+    previous = @getSelectedItem().prev()
+    if previous.length
+      current.removeClass('selected')
+      previous.addClass('selected')
+      @scrollToItem(previous)
+
+  selectNext: ->
+    current = @getSelectedItem()
+    next = @getSelectedItem().next()
+    if next.length
+      current.removeClass('selected')
+      next.addClass('selected')
+      @scrollToItem(next)
+
+  scrollToItem: (item) ->
+    scrollTop = @eventList.prop('scrollTop')
+    desiredTop = item.position().top + scrollTop
+    desiredBottom = desiredTop + item.height()
+
+    if desiredTop < scrollTop
+      @eventList.scrollTop(desiredTop)
+    else if desiredBottom > @eventList.scrollBottom()
+      @eventList.scrollBottom(desiredBottom)
+
+  getSelectedItem: ->
+    @eventList.find('.selected')
 
   attach: ->
     @previouslyFocusedElement = $(':focus')
     @populateEventList()
+    @eventList.find('.event:first').addClass('selected')
     @appendTo(@rootView)
     @miniEditor.focus()
 
@@ -27,7 +60,7 @@ class EventPalette extends View
     table = $$ ->
       @table =>
         for [event, description] in events
-          @tr =>
+          @tr class: 'event', =>
             @td event
             @td description if description
 

src/extensions/event-palette/event-palette.css

@@ -1,10 +1,21 @@
 .event-palette {
   position: absolute;
+  width: 100%;
   bottom: 0;
 }
 
-.event-palette .event-list {
+.select-list {
+  background-color: black;
+  position: relative;
   max-height: 300px;
   color: white;
   overflow-y: auto;
-}
+}
+
+.select-list table {
+  width: 100%;
+}
+
+.select-list .selected {
+  background-color: green;
+}