Download as
Browse Code »

Commit f50cb7fc9fe7150337fef9b85e628dc540adc516

Authored by Dmitriy Zaporozhets
1 parent 1dd80d22
Exists in master and in 4 other branches 6-8-stable, 7-0-stable, 7-0-stable-spb, spb-stable

Add keyboard nav for tree view. Refactor tree-view coffee

Showing 4 changed files with 75 additions and 25 deletions   Show diff stats
app/assets/javascripts/blob.js.coffee 0 → 100644
  Diff comments   View file @f50cb7f
... ... @@ -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
  Diff comments   View file @f50cb7f
... ... @@ -32,6 +32,10 @@ class Dispatcher
32 32 new TeamMembers()
33 33 when 'groups:people'
34 34 new GroupMembers()
  35 + when 'projects:tree:show'
  36 + new TreeView()
  37 + when 'projects:blob:show'
  38 + new BlobView()
35 39  
36 40 switch path.first()
37 41 when 'admin' then new Admin()
... ...
app/assets/javascripts/tree.js.coffee
  Diff comments   View file @f50cb7f
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
  Diff comments   View file @f50cb7f
... ... @@ -23,6 +23,14 @@
23 23 }
24 24 cursor: pointer;
25 25 }
  26 +
  27 + &.selected {
  28 + td {
  29 + background: $hover;
  30 + border-top: 1px solid #ADF;
  31 + border-bottom: 1px solid #ADF;
  32 + }
  33 + }
26 34 }
27 35 }
28 36  
... ...