summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/line_highlighter.js.coffee
blob: 2254a3f91aeb35dc08e06d43aea64a129d8598a2 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
# LineHighlighter
#
# Handles single- and multi-line selection and highlight for blob views.
#
#= require jquery.scrollTo
#
# ### Example Markup
#
#   <div id="blob-content-holder">
#     <div class="file-content">
#       <div class="line-numbers">
#         <a href="#L1" id="L1" data-line-number="1">1</a>
#         <a href="#L2" id="L2" data-line-number="2">2</a>
#         <a href="#L3" id="L3" data-line-number="3">3</a>
#         <a href="#L4" id="L4" data-line-number="4">4</a>
#         <a href="#L5" id="L5" data-line-number="5">5</a>
#       </div>
#       <pre class="code highlight">
#         <code>
#           <span id="LC1" class="line">...</span>
#           <span id="LC2" class="line">...</span>
#           <span id="LC3" class="line">...</span>
#           <span id="LC4" class="line">...</span>
#           <span id="LC5" class="line">...</span>
#         </code>
#       </pre>
#     </div>
#   </div>
#
class @LineHighlighter
  # CSS class applied to highlighted lines
  highlightClass: 'hll'

  # Internal copy of location.hash so we're not dependent on `location` in tests
  _hash: ''

  # Initialize a LineHighlighter object
  #
  # hash - String URL hash for dependency injection in tests
  constructor: (hash = location.hash) ->
    @_hash = hash

    @bindEvents()

    unless hash == ''
      range = @hashToRange(hash)

      if range[0]
        @highlightRange(range)

        # Scroll to the first highlighted line on initial load
        # Offset -50 for the sticky top bar, and another -100 for some context
        $.scrollTo("#L#{range[0]}", offset: -150)

  bindEvents: ->
    $('#blob-content-holder').on 'mousedown', 'a[data-line-number]', @clickHandler

    # While it may seem odd to bind to the mousedown event and then throw away
    # the click event, there is a method to our madness.
    #
    # If not done this way, the line number anchor will sometimes keep its
    # active state even when the event is cancelled, resulting in an ugly border
    # around the link and/or a persisted underline text decoration.

    $('#blob-content-holder').on 'click', 'a[data-line-number]', (event) ->
      event.preventDefault()

  clickHandler: (event) =>
    event.preventDefault()

    @clearHighlight()

    lineNumber = $(event.target).closest('a').data('line-number')
    current = @hashToRange(@_hash)

    unless current[0] && event.shiftKey
      # If there's no current selection, or there is but Shift wasn't held,
      # treat this like a single-line selection.
      @setHash(lineNumber)
      @highlightLine(lineNumber)
    else if event.shiftKey
      if lineNumber < current[0]
        range = [lineNumber, current[0]]
      else
        range = [current[0], lineNumber]

      @setHash(range[0], range[1])
      @highlightRange(range)

  # Unhighlight previously highlighted lines
  clearHighlight: ->
    $(".#{@highlightClass}").removeClass(@highlightClass)

  # Convert a URL hash String into line numbers
  #
  # hash - Hash String
  #
  # Examples:
  #
  #   hashToRange('#L5')    # => [5, null]
  #   hashToRange('#L5-15') # => [5, 15]
  #   hashToRange('#foo')   # => [null, null]
  #
  # Returns an Array
  hashToRange: (hash) ->
    matches = hash.match(/^#?L(\d+)(?:-(\d+))?$/)

    if matches && matches.length
      first = parseInt(matches[1])
      last  = if matches[2] then parseInt(matches[2]) else null

      [first, last]
    else
      [null, null]

  # Highlight a single line
  #
  # lineNumber - Line number to highlight
  highlightLine: (lineNumber) =>
    $("#LC#{lineNumber}").addClass(@highlightClass)

  # Highlight all lines within a range
  #
  # range - Array containing the starting and ending line numbers
  highlightRange: (range) ->
    if range[1]
      for lineNumber in [range[0]..range[1]]
        @highlightLine(lineNumber)
    else
      @highlightLine(range[0])

  # Set the URL hash string
  setHash: (firstLineNumber, lastLineNumber) =>
    if lastLineNumber
      hash = "#L#{firstLineNumber}-#{lastLineNumber}"
    else
      hash = "#L#{firstLineNumber}"

    @_hash = hash
    @__setLocationHash__(hash)

  # Make the actual hash change in the browser
  #
  # This method is stubbed in tests.
  __setLocationHash__: (value) ->
    # We're using pushState instead of assigning location.hash directly to
    # prevent the page from scrolling on the hashchange event
    history.pushState({turbolinks: false, url: value}, document.title, value)