From 548454a90c96835c64ed47273e0f236dbd80945f Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Wed, 5 Sep 2012 15:03:01 -0400 Subject: [PATCH] drop down arrow key nav works with nested and filtered lists; scrolls menu to show focused at all times --- .../views/discussion_thread_list_view.coffee | 31 ++++++++--------- .../src/discussion/views/new_post_view.coffee | 33 +++++++++++++++++-- lms/static/js/discussions-temp.js | 8 ++--- lms/static/sass/_discussion.scss | 4 ++- 4 files changed, 54 insertions(+), 22 deletions(-) diff --git a/lms/static/coffee/src/discussion/views/discussion_thread_list_view.coffee b/lms/static/coffee/src/discussion/views/discussion_thread_list_view.coffee index 9e62140b8c..f31cb575c5 100644 --- a/lms/static/coffee/src/discussion/views/discussion_thread_list_view.coffee +++ b/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) + + + + + diff --git a/lms/static/coffee/src/discussion/views/new_post_view.coffee b/lms/static/coffee/src/discussion/views/new_post_view.coffee index a60ddbe248..813bd04e4a 100644 --- a/lms/static/coffee/src/discussion/views/new_post_view.coffee +++ b/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) + + + diff --git a/lms/static/js/discussions-temp.js b/lms/static/js/discussions-temp.js index e5c47ceee0..b0ce231eb5 100644 --- a/lms/static/js/discussions-temp.js +++ b/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'); } }); } diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index 1d559e2b51..59e3d3321c 100644 --- a/lms/static/sass/_discussion.scss +++ b/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; } }