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

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;
+}