drop down arrow key nav works with nested and filtered lists; scrolls menu to…

drop down arrow key nav works with nested and filtered lists; scrolls menu to show focused at all times

lms/static/coffee/src/discussion/views/discussion_thread_list_view.coffee

@@ -194,22 +194,23 @@ class @DiscussionThreadListView extends Backbone.View
       return
     event.preventDefault()
 
-    totalItems = $(".browse-topic-drop-menu-wrapper a").length
-    index = $(".browse-topic-drop-menu-wrapper .focused").parent().index()
-    firstShownIndex = $($(".browse-topic-drop-menu-wrapper a").not('.hidden')[0]).parent().index()
+    itemHeight = $(".browse-topic-drop-menu a").outerHeight()
+    items = $.makeArray($(".browse-topic-drop-menu-wrapper a").not(".hidden"))
+    index = items.indexOf($('.browse-topic-drop-menu-wrapper .focused')[0])
 
     if event.which == 40
-      index = index + 1
-    else if event.which == 38
-      index = index - 1
-      while $(".browse-topic-drop-menu-wrapper li").eq(index).find('a').hasClass('hidden')
-        index--;
-    if index == totalItems
-      index = 0
-
-    while $(".browse-topic-drop-menu-wrapper li").eq(index).find('a').hasClass('hidden')
-        index++;
+        index = Math.min(index + 1, items.length - 1)
+    if event.which == 38
+        index = Math.max(index - 1, 0)
 
     $(".browse-topic-drop-menu-wrapper .focused").removeClass("focused")
-    $(".browse-topic-drop-menu-wrapper li").eq(index).find('a').addClass("focused")
-    $(".browse-topic-drop-menu-wrapper").attr("data-focused", index)
+    $(items[index]).addClass("focused")
+
+    scrollTarget = Math.min(index * itemHeight, $(".browse-topic-drop-menu").scrollTop())
+    scrollTarget = Math.max(index * itemHeight - $(".browse-topic-drop-menu").height() + itemHeight, scrollTarget)
+    $(".browse-topic-drop-menu").scrollTop(scrollTarget)
+
+
+
+
+

lms/static/coffee/src/discussion/views/new_post_view.coffee

@@ -30,15 +30,16 @@ class @NewPostView extends Backbone.View
     toggleTopicDropdown: (event) ->
         event.stopPropagation()
         if @menuOpen
-            @hideTopicDropdown()
+            @hideTopicDropdown()            
         else
-            @showTopicDropdown()
+            @showTopicDropdown()            
     
     showTopicDropdown: () ->
         @menuOpen = true
         @dropdownButton.addClass('dropped')
         @topicMenu.show()
 
+        $('body').bind 'keydown', @setActiveItem
         $('body').bind 'click', @hideTopicDropdown
 
         # Set here because 1) the window might get resized and things could
@@ -51,6 +52,7 @@ class @NewPostView extends Backbone.View
         @dropdownButton.removeClass('dropped')
         @topicMenu.hide()
 
+        $('body').unbind 'keydown', @setActiveItem
         $('body').unbind 'click', @hideTopicDropdown
 
     setTopic: (event) ->
@@ -157,3 +159,30 @@ class @NewPostView extends Backbone.View
                 #threadView = new ThreadView el: $thread[0], model: thread
                 #thread.updateInfo response.annotated_content_info
                 #@cancelNewPost()
+
+    setActiveItem: (event) ->
+        if event.which == 13
+          $(".topic_menu_wrapper .focused").click()
+          return
+        if event.which != 40 && event.which != 38
+          return
+        event.preventDefault()
+
+        itemHeight = $(".topic_menu_wrapper a").outerHeight()
+        items = $.makeArray($(".topic_menu_wrapper a").not(".hidden"))
+        index = items.indexOf($('.topic_menu_wrapper .focused')[0])
+
+        if event.which == 40
+            index = Math.min(index + 1, items.length - 1)
+        if event.which == 38
+            index = Math.max(index - 1, 0)
+
+        $(".topic_menu_wrapper .focused").removeClass("focused")
+        $(items[index]).addClass("focused")
+
+        scrollTarget = Math.min(index * itemHeight, $(".topic_menu").scrollTop())
+        scrollTarget = Math.max(index * itemHeight - $(".topic_menu").height() + itemHeight, scrollTarget)
+        $(".topic_menu").scrollTop(scrollTarget)
+
+
+

lms/static/js/discussions-temp.js

@@ -123,7 +123,7 @@ function filterDrop(e) {
 	 * single query
 	 */
 
-	var $drop = $(e.target).parents('.form-topic-drop-menu-wrapper, .browse-topic-drop-menu-wrapper');
+	var $drop = $(e.target).parents('.topic_menu_wrapper, .browse-topic-drop-menu-wrapper');
 	var query = $(this).val();
 	var $items = $drop.find('a');
 
@@ -134,7 +134,7 @@ function filterDrop(e) {
 
 	$items.addClass('hidden');
 	$items.each(function(i) {
-		var thisText = $(this).children().not('.unread').text();
+		var thisText = $(this).not('.unread').text();
 		$(this).parents('ul').siblings('a').not('.unread').each(function(i) {
 			thisText = thisText  + ' ' + $(this).text();
 		});
@@ -150,10 +150,10 @@ function filterDrop(e) {
 			$(this).removeClass('hidden');
 
 			// show children
-			$(this).parent().find('a').show();
+			$(this).parent().find('a').removeClass('hidden');
 
 			// show parents
-			$(this).parents('ul').siblings('a').show();
+			$(this).parents('ul').siblings('a').removeClass('hidden');
 		}
 	});
 }

lms/static/sass/_discussion.scss

@@ -303,8 +303,10 @@ body.discussion {
           font-weight: 700;
           line-height: 18px;
           color: #eee;
+          @include transition(none);
 
-          &:hover {
+          &:hover,
+          &.focused {
             background-color: #666;
           }
         }