Commit f50cb7fc9fe7150337fef9b85e628dc540adc516
1 parent
1dd80d22
Exists in
master
and in
4 other branches
Add keyboard nav for tree view. Refactor tree-view coffee
Showing
4 changed files
with
75 additions
and
25 deletions
Show diff stats
| @@ -0,0 +1,24 @@ | @@ -0,0 +1,24 @@ | ||
| 1 | +class BlobView | ||
| 2 | + constructor: -> | ||
| 3 | + # See if there are lines selected | ||
| 4 | + # "#L12" and "#L34-56" supported | ||
| 5 | + highlightBlobLines = -> | ||
| 6 | + if window.location.hash isnt "" | ||
| 7 | + matches = window.location.hash.match(/\#L(\d+)(\-(\d+))?/) | ||
| 8 | + first_line = parseInt(matches?[1]) | ||
| 9 | + last_line = parseInt(matches?[3]) | ||
| 10 | + | ||
| 11 | + unless isNaN first_line | ||
| 12 | + last_line = first_line if isNaN(last_line) | ||
| 13 | + $("#tree-content-holder .highlight .line").removeClass("hll") | ||
| 14 | + $("#LC#{line}").addClass("hll") for line in [first_line..last_line] | ||
| 15 | + $("#L#{first_line}").ScrollTo() | ||
| 16 | + | ||
| 17 | + # Highlight the correct lines on load | ||
| 18 | + highlightBlobLines() | ||
| 19 | + | ||
| 20 | + # Highlight the correct lines when the hash part of the URL changes | ||
| 21 | + $(window).on 'hashchange', highlightBlobLines | ||
| 22 | + | ||
| 23 | + | ||
| 24 | +@BlobView = BlobView |
app/assets/javascripts/dispatcher.js.coffee
| @@ -32,6 +32,10 @@ class Dispatcher | @@ -32,6 +32,10 @@ class Dispatcher | ||
| 32 | new TeamMembers() | 32 | new TeamMembers() |
| 33 | when 'groups:people' | 33 | when 'groups:people' |
| 34 | new GroupMembers() | 34 | new GroupMembers() |
| 35 | + when 'projects:tree:show' | ||
| 36 | + new TreeView() | ||
| 37 | + when 'projects:blob:show' | ||
| 38 | + new BlobView() | ||
| 35 | 39 | ||
| 36 | switch path.first() | 40 | switch path.first() |
| 37 | when 'admin' then new Admin() | 41 | when 'admin' then new Admin() |
app/assets/javascripts/tree.js.coffee
| 1 | -# Code browser tree slider | ||
| 2 | -# Make the entire tree-item row clickable, but not if clicking another link (like a commit message) | ||
| 3 | -$(".tree-content-holder .tree-item").live 'click', (e) -> | ||
| 4 | - if (e.target.nodeName != "A") | ||
| 5 | - path = $('.tree-item-file-name a', this).attr('href') | ||
| 6 | - Turbolinks.visit(path) | 1 | +class TreeView |
| 2 | + constructor: -> | ||
| 3 | + @initKeyNav() | ||
| 7 | 4 | ||
| 8 | -$ -> | ||
| 9 | - # Show the "Loading commit data" for only the first element | ||
| 10 | - $('span.log_loading:first').removeClass('hide') | 5 | + # Code browser tree slider |
| 6 | + # Make the entire tree-item row clickable, but not if clicking another link (like a commit message) | ||
| 7 | + $(".tree-content-holder .tree-item").on 'click', (e) -> | ||
| 8 | + if (e.target.nodeName != "A") | ||
| 9 | + path = $('.tree-item-file-name a', this).attr('href') | ||
| 10 | + Turbolinks.visit(path) | ||
| 11 | 11 | ||
| 12 | - # See if there are lines selected | ||
| 13 | - # "#L12" and "#L34-56" supported | ||
| 14 | - highlightBlobLines = -> | ||
| 15 | - if window.location.hash isnt "" | ||
| 16 | - matches = window.location.hash.match(/\#L(\d+)(\-(\d+))?/) | ||
| 17 | - first_line = parseInt(matches?[1]) | ||
| 18 | - last_line = parseInt(matches?[3]) | 12 | + # Show the "Loading commit data" for only the first element |
| 13 | + $('span.log_loading:first').removeClass('hide') | ||
| 19 | 14 | ||
| 20 | - unless isNaN first_line | ||
| 21 | - last_line = first_line if isNaN(last_line) | ||
| 22 | - $("#tree-content-holder .highlight .line").removeClass("hll") | ||
| 23 | - $("#LC#{line}").addClass("hll") for line in [first_line..last_line] | ||
| 24 | - $("#L#{first_line}").ScrollTo() | 15 | + initKeyNav: -> |
| 16 | + li = $("tr.tree-item") | ||
| 17 | + liSelected = null | ||
| 18 | + $('body').keydown (e) -> | ||
| 19 | + if e.which is 40 | ||
| 20 | + if liSelected | ||
| 21 | + next = liSelected.next() | ||
| 22 | + if next.length > 0 | ||
| 23 | + liSelected.removeClass "selected" | ||
| 24 | + liSelected = next.addClass("selected") | ||
| 25 | + else | ||
| 26 | + liSelected = li.eq(0).addClass("selected") | ||
| 25 | 27 | ||
| 26 | - # Highlight the correct lines on load | ||
| 27 | - highlightBlobLines() | ||
| 28 | - # Highlight the correct lines when the hash part of the URL changes | ||
| 29 | - $(window).on 'hashchange', highlightBlobLines | 28 | + $(liSelected).focus() |
| 29 | + else if e.which is 38 | ||
| 30 | + if liSelected | ||
| 31 | + next = liSelected.prev() | ||
| 32 | + if next.length > 0 | ||
| 33 | + liSelected.removeClass "selected" | ||
| 34 | + liSelected = next.addClass("selected") | ||
| 35 | + else | ||
| 36 | + liSelected = li.last().addClass("selected") | ||
| 37 | + | ||
| 38 | + $(liSelected).focus() | ||
| 39 | + else if e.which is 13 | ||
| 40 | + path = $('.tree-item.selected .tree-item-file-name a').attr('href') | ||
| 41 | + Turbolinks.visit(path) | ||
| 42 | + | ||
| 43 | +@TreeView = TreeView |
app/assets/stylesheets/sections/tree.scss