Commit 3b07fd36 by Tom Giannattasio

added keyboard nav to dropdown; doesn't work yet when filtered

parent 9da7a337
...@@ -59,9 +59,11 @@ class @DiscussionThreadListView extends Backbone.View ...@@ -59,9 +59,11 @@ class @DiscussionThreadListView extends Backbone.View
if @$(".browse").hasClass('is-dropped') if @$(".browse").hasClass('is-dropped')
@$(".browse-topic-drop-menu-wrapper").show() @$(".browse-topic-drop-menu-wrapper").show()
$('body').bind 'click', @toggleTopicDrop $('body').bind 'click', @toggleTopicDrop
$('body').bind 'keyup', @setActiveItem
else else
@$(".browse-topic-drop-menu-wrapper").hide() @$(".browse-topic-drop-menu-wrapper").hide()
$('body').unbind 'click', @toggleTopicDrop $('body').unbind 'click', @toggleTopicDrop
$('body').unbind 'keyup', @setActiveItem
setTopic: (event) -> setTopic: (event) ->
item = $(event.target).closest('a') item = $(event.target).closest('a')
...@@ -115,3 +117,35 @@ class @DiscussionThreadListView extends Backbone.View ...@@ -115,3 +117,35 @@ class @DiscussionThreadListView extends Backbone.View
if textStatus == 'success' if textStatus == 'success'
@collection.reset(response.discussion_data) @collection.reset(response.discussion_data)
@displayedCollection.reset(@collection.models) @displayedCollection.reset(@collection.models)
setActiveItem: (event) ->
if event.which == 13
console.log($(".browse-topic-drop-menu-wrapper .focused"))
$(".browse-topic-drop-menu-wrapper .focused").click()
return
if event.which != 40 && event.which != 38
return
event.preventDefault()
items = $(".browse-topic-drop-menu-wrapper a").not(".hidden")
totalItems = items.length
index = $(".browse-topic-drop-menu-wrapper .focused").parent().index()
# index = parseInt($(".browse-topic-drop-menu-wrapper").attr("data-focused")) || 0
if event.which == 40
index = index + 1
else if event.which == 38
index = index - 1
if index == totalItems
index = 0
console.log(index)
$(".browse-topic-drop-menu-wrapper .focused").removeClass("focused")
$(".browse-topic-drop-menu-wrapper li").eq(index).find('a').addClass("focused")
# $(items[index]).addClass("focused")
$(".browse-topic-drop-menu-wrapper").attr("data-focused", index)
...@@ -132,7 +132,7 @@ function filterDrop(e) { ...@@ -132,7 +132,7 @@ function filterDrop(e) {
return; return;
} }
$items.hide(); $items.addClass('hidden');
$items.each(function(i) { $items.each(function(i) {
var thisText = $(this).children().not('.unread').text(); var thisText = $(this).children().not('.unread').text();
$(this).parents('ul').siblings('a').not('.unread').each(function(i) { $(this).parents('ul').siblings('a').not('.unread').each(function(i) {
...@@ -147,7 +147,7 @@ function filterDrop(e) { ...@@ -147,7 +147,7 @@ function filterDrop(e) {
} }
if(test) { if(test) {
$(this).show(); $(this).removeClass('hidden');
// show children // show children
$(this).parent().find('a').show(); $(this).parent().find('a').show();
...@@ -225,6 +225,7 @@ function showTopicDrop(e) { ...@@ -225,6 +225,7 @@ function showTopicDrop(e) {
$topicDrop.show(); $topicDrop.show();
$browse.unbind('click', showTopicDrop); $browse.unbind('click', showTopicDrop);
$body.bind('keyup', setActiveDropItem);
$browse.bind('click', hideTopicDrop); $browse.bind('click', hideTopicDrop);
setTimeout(function() { setTimeout(function() {
$body.bind('click', hideTopicDrop); $body.bind('click', hideTopicDrop);
......
...@@ -732,8 +732,14 @@ body.discussion { ...@@ -732,8 +732,14 @@ body.discussion {
line-height: 22px; line-height: 22px;
color: #fff; color: #fff;
@include clearfix; @include clearfix;
@include transition(none);
&:hover { &.hidden {
display: none;
}
&:hover,
&.focused {
background-color: #636363; background-color: #636363;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment