extension/packages/marker.coffee

   1 { getPref } = require 'prefs'
   2 utils       = require 'utils'
   3
   4 { interfaces: Ci } = Components
   5
   6 XPathResult        = Ci.nsIDOMXPathResult
   7
   8 # All elements that have one or more of the following properties
   9 # qualify for their own marker in hints mode
  10 MARKABLE_ELEMENT_PROPERTIES = [
  11   "@tabindex"
  12   "@onclick"
  13   "@onmousedown"
  14   "@onmouseup"
  15   "@oncommand"
  16   "@role='link'"
  17   "@role='button'"
  18   "contains(@class, 'button')"
  19   "@contenteditable='' or translate(@contenteditable, 'TRUE', 'true')='true'"
  20 ]
  21
  22 # All the following elements qualify for their own marker in hints mode
  23 MARKABLE_ELEMENTS = [
  24   "a"
  25   "iframe"
  26   "area[@href]"
  27   "textarea"
  28   "button"
  29   "select"
  30   "input[not(@type='hidden' or @disabled or @readonly)]"
  31   "embed"
  32   "object"
  33 ]
  34
  35 # Marker class wraps the markable element and provides
  36 # methods to manipulate the markers
  37 class Marker
  38   # Creates the marker DOM node
  39   constructor: (@element) ->
  40     document = @element.ownerDocument
  41     window = document.defaultView
  42     @markerElement = document.createElement('div')
  43     @markerElement.className = 'VimFxReset VimFxHintMarker'
  44
  45   # Shows the marker
  46   show: -> @markerElement.className = 'VimFxReset VimFxHintMarker'
  47
  48   # Hides the marker
  49   hide: -> @markerElement.className = 'VimFxReset VimFxHiddenHintMarker'
  50
  51   # Positions the marker on the page. The positioning is absulute
  52   setPosition: (rect) ->
  53     @markerElement.style.left = rect.left + 'px'
  54     @markerElement.style.top  = rect.top  + 'px'
  55
  56   # Assigns hint string to the marker
  57   setHint: (@hintChars) ->
  58     # number of hint chars that have been matched so far
  59     @enteredHintChars = ''
  60
  61     document = @element.ownerDocument
  62
  63     while @markerElement.hasChildNodes()
  64       @markerElement.removeChild(@markerElement.firstChild)
  65
  66     fragment = document.createDocumentFragment()
  67     for char in @hintChars
  68       span = document.createElement('span')
  69       span.className = 'VimFxReset'
  70       span.textContent = char.toUpperCase()
  71       fragment.appendChild(span)
  72
  73     @markerElement.appendChild(fragment)
  74
  75   # Add another char to the `enteredHintString`,
  76   # see if it still matches `hintString`, apply classes to
  77   # the distinct hint characters and show/hide marker when
  78   # the entered string partially (not) matches the hint string
  79   matchHintChar: (char) ->
  80     # Handle backspace key by removing a previously entered hint char
  81     # and resetting its class
  82     if char == 'Backspace'
  83       if @enteredHintChars.length > 0
  84         @enteredHintChars = @enteredHintChars[0...-1]
  85         @markerElement.children[@enteredHintChars.length]?.className = 'VimFxReset'
  86     # Otherwise append hint char and change hint class
  87     else
  88       @markerElement.children[@enteredHintChars.length]?.className = 'VimFxReset VimFxCharMatch'
  89       @enteredHintChars += char.toLowerCase()
  90
  91     # If entered hint chars no longer partially match the hint chars
  92     # then hide the marker. Othersie show it back
  93     if @hintChars.search(@enteredHintChars) == 0 then @show() else @hide()
  94
  95   # Checks if the marker will be matched if the next character entered is `char`
  96   willMatch: (char) ->
  97     char == 'Backspace' or @hintChars.search(@enteredHintChars + char.toLowerCase()) == 0
  98
  99   # Checks if enterd hint chars completely match the hint chars
 100   isMatched: ->
 101     return @hintChars == @enteredHintChars
 102
 103
 104 # Selects all markable elements on the page, creates markers
 105 # for each of them. The markers are then positioned on the page.
 106 # Note that the markers are not given any hints at this point.
 107 #
 108 # The array of markers is returned
 109 Marker.createMarkers = (document) ->
 110   set = getMarkableElements(document)
 111
 112   markers = []
 113   for i in [0...set.snapshotLength] by 1
 114     element = set.snapshotItem(i)
 115     if rect = getElementRect(element)
 116       marker = new Marker(element)
 117       marker.setPosition(rect)
 118       marker.weight = rect.area
 119       markers.push(marker)
 120
 121   return markers
 122
 123
 124 # Returns elements that qualify for hint markers in hints mode.
 125 # Generates and memoizes an XPath query internally
 126 getMarkableElements = do ->
 127   # Some preparations done on startup
 128   elements = Array.concat \
 129     MARKABLE_ELEMENTS,
 130     ["*[#{ MARKABLE_ELEMENT_PROPERTIES.join(' or ') }]"]
 131
 132   xpath = elements.reduce((m, rule) ->
 133     m.concat(["//#{ rule }", "//xhtml:#{ rule }"])
 134   , []).join(' | ')
 135
 136   namespaceResolver = (namespace) ->
 137     if namespace == 'xhtml' then 'http://www.w3.org/1999/xhtml' else null
 138
 139   # The actual function that will return the desired elements
 140   return (document, resultType = XPathResult.ORDERED_NODE_SNAPSHOT_TYPE) ->
 141     document.evaluate(xpath, document.documentElement, namespaceResolver, resultType, null)
 142
 143 # Checks if the given TextRectangle object qualifies
 144 # for its own Marker with respect to the `window` object
 145 isRectOk = (rect, window) ->
 146   rect.width > 2 and rect.height > 2 and \
 147   rect.top > -2 and rect.left > -2 and \
 148   rect.top < window.innerHeight - 2 and \
 149   rect.left < window.innerWidth - 2
 150
 151 # Will scan through `element.getClientRects()` and look for
 152 # the first visible rectange. If there are no visible rectangles, then
 153 # will look at the children of the markable node.
 154 #
 155 # The logic has been copied over from Vimiun
 156 getElementRect = (element) ->
 157   document = element.ownerDocument
 158   window   = document.defaultView
 159   docElem  = document.documentElement
 160   body     = document.body
 161
 162   clientTop  = docElem.clientTop  || body?.clientTop  || 0
 163   clientLeft = docElem.clientLeft || body?.clientLeft || 0
 164   scrollTop  = window.pageYOffset || docElem.scrollTop
 165   scrollLeft = window.pageXOffset || docElem.scrollLeft
 166
 167   clientRect = element.getBoundingClientRect()
 168   rects = [rect for rect in element.getClientRects()]
 169   rects.push(clientRect)
 170
 171   for rect in rects
 172     if isRectOk(rect, window)
 173       return {
 174         top:    rect.top  + scrollTop  - clientTop
 175         left:   rect.left + scrollLeft - clientLeft
 176         width:  rect.width
 177         height: rect.height
 178         area:   clientRect.width * clientRect.height
 179       }
 180
 181   # If the element has 0 dimentions then check what's inside.
 182   # Floated or absolutely positioned elements are of particular interest
 183   for rect in rects
 184     if rect.width == 0 or rect.height == 0
 185       for childElement in element.children
 186         if computedStyle = window.getComputedStyle(childElement, null)
 187           if computedStyle.getPropertyValue('float') != 'none' or \
 188              computedStyle.getPropertyValue('position') == 'absolute'
 189
 190             return childRect if childRect = getElementRect(childElement)
 191
 192   return undefined
 193
 194 exports.Marker = Marker