From b5cb125b7f426d30f31f9290483e860f6a08d48b Mon Sep 17 00:00:00 2001
From: Jerry Cheung & Nathan Sobo <jerry+nathan@github.com>
Date: Wed, 3 Oct 2012 12:10:45 -1000
Subject: [PATCH] Select list scrolls to selected item on move-up/move-down

---
 spec/extensions/select-list-spec.coffee | 16 ++++++++++++++++
 src/app/select-list.coffee              | 12 ++++++++++++
 static/select-list.css                  |  8 ++++++++
 3 files changed, 36 insertions(+)
 create mode 100644 static/select-list.css

diff --git a/spec/extensions/select-list-spec.coffee b/spec/extensions/select-list-spec.coffee
index d0182dd8b..9176862ca 100644
--- a/spec/extensions/select-list-spec.coffee
+++ b/spec/extensions/select-list-spec.coffee
@@ -56,6 +56,22 @@ fdescribe "SelectList", ->
       expect(list.find('li:eq(2)')).not.toHaveClass 'selected'
       expect(list.find('li:eq(1)')).toHaveClass 'selected'
 
+    it "scrolls to keep the selected item in view", ->
+      selectList.attachToDom()
+      itemHeight = list.find('li').outerHeight()
+      list.height(itemHeight * 2)
+
+      miniEditor.trigger 'move-down'
+      miniEditor.trigger 'move-down'
+      expect(list.scrollBottom()).toBe itemHeight * 3
+
+      miniEditor.trigger 'move-down'
+      expect(list.scrollBottom()).toBe itemHeight * 4
+
+      miniEditor.trigger 'move-up'
+      miniEditor.trigger 'move-up'
+      expect(list.scrollBottom()).toBe itemHeight * 3
+
   describe "the core:select event", ->
     it "triggers the selected hook", ->
 
diff --git a/src/app/select-list.coffee b/src/app/select-list.coffee
index a66e5ea1a..4f0d1798f 100644
--- a/src/app/select-list.coffee
+++ b/src/app/select-list.coffee
@@ -13,6 +13,7 @@ class SelectList extends View
   maxItems: Infinity
 
   initialize: ->
+    requireStylesheet 'select-list.css'
     @miniEditor.getBuffer().on 'change', => @populateList()
     @on 'move-up', => @selectPreviousItem()
     @on 'move-down', => @selectNextItem()
@@ -42,6 +43,17 @@ class SelectList extends View
     if item.length
       @list.find('.selected').removeClass('selected')
       item.addClass 'selected'
+      @scrollToItem(item)
+
+  scrollToItem: (item) ->
+    scrollTop = @list.scrollTop()
+    desiredTop = item.position().top + scrollTop
+    desiredBottom = desiredTop + item.height()
+
+    if desiredTop < scrollTop
+      @list.scrollTop(desiredTop)
+    else if desiredBottom > @list.scrollBottom()
+      @list.scrollBottom(desiredBottom)
 
   getSelectedItem: ->
     @list.find('li.selected')
diff --git a/static/select-list.css b/static/select-list.css
new file mode 100644
index 000000000..8eff8aeae
--- /dev/null
+++ b/static/select-list.css
@@ -0,0 +1,8 @@
+.select-list ol {
+  position: relative;
+  overflow-y: auto;
+}
+
+.select-list ol .selected {
+  background: green;
+}