extension/packages/marker.coffee

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