1 { interfaces: Ci } = Components
2 XPathResult = Ci.nsIDOMXPathResult
4 HINTCHARS = 'asdfgercvhjkl;uinm'
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 = [
16 "contains(@class, 'button')"
17 "@contenteditable='' or translate(@contenteditable, 'TRUE', 'true')='true'"
20 # All the following elements qualify for their own marker in hints mode
27 "input[not(@type='hidden' or @disabled or @readonly)]"
31 # Marker class wraps the markable element and provides
32 # methods to manipulate the markers
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'
42 hide: -> @markerElement.style.display = 'none'
45 show: -> @markerElement.style.display = 'block'
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'
52 # Assigns hint string to the marker
53 setHint: (@hintChars) ->
54 # number of hint chars that have been matched so far
55 @matchedHintCharCount = 0
57 document = @element.ownerDocument
59 while @markerElement.hasChildNodes()
60 @markerElement.removeChild @markedElement.firstChild
62 for char in @hintChars
63 span = document.createElement 'span'
64 span.className = 'vimffReset'
65 span.textContent = char.toUpperCase()
67 @markerElement.appendChild span
69 matchHintChar: (char) ->
70 if char == 'backspace'
71 if @matchedHintCharCount > 0
72 @matchedHintCharCount -= 1
73 @markerElement.children[@matchedHintCharCount].className = 'vimffReset'
75 if @hintChars[@matchedHintCharCount] == char
76 @markerElement.children[@matchedHintCharCount].className = 'vimffReset vimffCharMatch'
77 @matchedHintCharCount += 1
79 return @matchedHintCharCount
82 return @hintChars.length == @hintCompletion
85 # Selects all markable elements on the page, creates markers
86 # for each of them The markers are then positioned on the page
88 # The array of markers is returned
89 Marker.createMarkers = (document) ->
90 elementsSet = getMarkableElements(document)
93 for i in [0...elementsSet.snapshotLength] by 1
94 element = elementsSet.snapshotItem(i)
95 if rect = getElementRect element
96 hint = indexToHint(j++)
97 marker = new Marker(element)
98 marker.setPosition rect
100 markers[hint] = marker
104 # Function generator that creates a function that
105 # returns hint string for supplied numeric index.
107 # split the characters into two groups:
109 # * left chars are used for the head
110 # * right chars are used to build the tail
111 left = HINTCHARS[...HINTCHARS.length / 3]
112 right = HINTCHARS[HINTCHARS.length / 3...]
114 # Helper function that returns a permutation number `i`
115 # of some of the characters in the `chars` agrument
120 l = Math.floor(i / n); k = i % n;
122 return f(l - 1, chars) + chars[k]
125 n = Math.floor(i / left.length)
127 return f(n - 1, right) + left[m]
130 # Returns elements that qualify for hint markers in hints mode.
131 # Generates and memoizes an XPath query internally
132 getMarkableElements = do ->
133 # Some preparations done on startup
134 elements = Array.concat \
136 ["*[#{ MARKABLE_ELEMENT_PROPERTIES.join(" or ") }]"]
138 xpath = elements.reduce((m, rule) ->
139 m.concat(["//#{ rule }", "//xhtml:#{ rule }"])
142 namespaceResolver = (namespace) ->
143 if (namespace == "xhtml") then "http://www.w3.org/1999/xhtml" else null
145 # The actual function that will return the desired elements
146 return (document, resultType = XPathResult.ORDERED_NODE_SNAPSHOT_TYPE) ->
147 document.evaluate xpath, document.documentElement, namespaceResolver, resultType, null
149 # Checks if the given TextRectangle object qualifies
150 # for its own Marker with respect to the `window` object
151 isRectOk = (rect, window) ->
152 rect.width > 2 and rect.height > 2 and \
153 rect.top > -2 and rect.left > -2 and \
154 rect.top < window.innerHeight - 2 and \
155 rect.left < window.innerWidth - 2
157 # Will scan through `element.getClientRects()` and look for
158 # the first visible rectange. If there are no visible rectangles, then
159 # will look at the children of the markable node.
161 # The logic has been copied over from Vimiun
162 getElementRect = (element) ->
163 document = element.ownerDocument
164 window = document.defaultView
165 docElem = document.documentElement
168 clientTop = docElem.clientTop || body.clientTop || 0;
169 clientLeft = docElem.clientLeft || body.clientLeft || 0;
170 scrollTop = window.pageYOffset || docElem.scrollTop;
171 scrollLeft = window.pageXOffset || docElem.scrollLeft;
173 rects = [rect for rect in element.getClientRects()]
174 rects.push element.getBoundingClientRect()
177 if isRectOk rect, window
179 top: rect.top + scrollTop - clientTop
180 left: rect.left + scrollLeft - clientLeft
185 # If the element has 0 dimentions then check what's inside.
186 # Floated or absolutely positioned elements are of particular interest
188 if rect.width == 0 or rect.height == 0
189 for childElement in element.children
190 computedStyle = window.getComputedStyle childElement, null
191 if computedStyle.getPropertyValue 'float' != 'none' or \
192 computedStyle.getPropertyValue 'position' == 'absolute'
194 childRect if childRect = getElementRect childElement
198 exports.Marker = Marker