packages/marker.coffee

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