1 <!DOCTYPE html
> <html> <head> <title>marker.coffee
</title> <meta http-equiv=
"content-type" content=
"text/html; charset=UTF-8"> <link rel=
"stylesheet" media=
"all" href=
"docco.css" /> </head> <body> <div id=
"container"> <div id=
"background"></div> <div id=
"jump_to"> Jump To
… <div id=
"jump_wrapper"> <div id=
"jump_page"> <a class=
"source" href=
"bootstrap.html"> bootstrap.coffee
</a> <a class=
"source" href=
"chrome.html"> chrome.coffee
</a> <a class=
"source" href=
"console.html"> console.coffee
</a> <a class=
"source" href=
"unload.html"> unload.coffee
</a> <a class=
"source" href=
"window-utils.html"> window-utils.coffee
</a> <a class=
"source" href=
"button.html"> button.coffee
</a> <a class=
"source" href=
"commands.html"> commands.coffee
</a> <a class=
"source" href=
"events.html"> events.coffee
</a> <a class=
"source" href=
"help.html"> help.coffee
</a> <a class=
"source" href=
"hints.html"> hints.coffee
</a> <a class=
"source" href=
"marker.html"> marker.coffee
</a> <a class=
"source" href=
"prefs.html"> prefs.coffee
</a> <a class=
"source" href=
"utils.html"> utils.coffee
</a> <a class=
"source" href=
"vim.html"> vim.coffee
</a> </div> </div> </div> <table cellpadding=
"0" cellspacing=
"0"> <thead> <tr> <th class=
"docs"> <h1> marker.coffee
</h1> </th> <th class=
"code"> </th> </tr> </thead> <tbody> <tr id=
"section-1"> <td class=
"docs"> <div class=
"pilwrap"> <a class=
"pilcrow" href=
"#section-1">¶</a> </div> </td> <td class=
"code"> <div class=
"highlight"><pre><span class=
"p">{
</span> <span class=
"nv">interfaces:
</span><span class=
"nx">Ci
</span> <span class=
"p">}
</span> <span class=
"o">=
</span> <span class=
"nx">Components
</span>
2 <span class=
"nv">XPathResult =
</span><span class=
"nx">Ci
</span><span class=
"p">.
</span><span class=
"nx">nsIDOMXPathResult
</span>
4 <span class=
"p">{
</span> <span class=
"nx">getPref
</span> <span class=
"p">}
</span> <span class=
"o">=
</span> <span class=
"nx">require
</span> <span class=
"s">'prefs
'</span></pre></div> </td> </tr> <tr id=
"section-2"> <td class=
"docs"> <div class=
"pilwrap"> <a class=
"pilcrow" href=
"#section-2">¶</a> </div> <p>All elements that have one or more of the following properties
5 qualify for their own marker in hints mode
</p> </td> <td class=
"code"> <div class=
"highlight"><pre><span class=
"nv">MARKABLE_ELEMENT_PROPERTIES =
</span><span class=
"p">[
</span>
6 <span class=
"s">"@tabindex
"</span>
7 <span class=
"s">"@onclick
"</span>
8 <span class=
"s">"@onmousedown
"</span>
9 <span class=
"s">"@onmouseup
"</span>
10 <span class=
"s">"@oncommand
"</span>
11 <span class=
"s">"@role=
'link
'"</span>
12 <span class=
"s">"@role=
'button
'"</span>
13 <span class=
"s">"contains(@class,
'button
')
"</span>
14 <span class=
"s">"@contenteditable=
'' or translate(@contenteditable,
'TRUE
',
'true
')=
'true
'"</span>
15 <span class=
"p">]
</span></pre></div> </td> </tr> <tr id=
"section-3"> <td class=
"docs"> <div class=
"pilwrap"> <a class=
"pilcrow" href=
"#section-3">¶</a> </div> <p>All the following elements qualify for their own marker in hints mode
</p> </td> <td class=
"code"> <div class=
"highlight"><pre><span class=
"nv">MARKABLE_ELEMENTS =
</span><span class=
"p">[
</span>
16 <span class=
"s">"a
"</span>
17 <span class=
"s">"area[@href]
"</span>
18 <span class=
"s">"textarea
"</span>
19 <span class=
"s">"button
"</span>
20 <span class=
"s">"select
"</span>
21 <span class=
"s">"input[not(@type=
'hidden
' or @disabled or @readonly)]
"</span>
22 <span class=
"p">]
</span></pre></div> </td> </tr> <tr id=
"section-4"> <td class=
"docs"> <div class=
"pilwrap"> <a class=
"pilcrow" href=
"#section-4">¶</a> </div> <p>Marker class wraps the markable element and provides
23 methods to manipulate the markers
</p> </td> <td class=
"code"> <div class=
"highlight"><pre><span class=
"k">class
</span> <span class=
"nx">Marker
</span></pre></div> </td> </tr> <tr id=
"section-5"> <td class=
"docs"> <div class=
"pilwrap"> <a class=
"pilcrow" href=
"#section-5">¶</a> </div> <p>Creates the marker DOM node
</p> </td> <td class=
"code"> <div class=
"highlight"><pre> <span class=
"nv">constructor:
</span><span class=
"nf">(@element) -
></span>
24 <span class=
"nb">document
</span> <span class=
"o">=
</span> <span class=
"nx">@element
</span><span class=
"p">.
</span><span class=
"nx">ownerDocument
</span>
25 <span class=
"nb">window
</span> <span class=
"o">=
</span> <span class=
"nb">document
</span><span class=
"p">.
</span><span class=
"nx">defaultView
</span>
26 <span class=
"vi">@markerElement =
</span><span class=
"nb">document
</span><span class=
"p">.
</span><span class=
"nx">createElement
</span> <span class=
"s">'div
'</span>
27 <span class=
"vi">@markerElement.className =
</span><span class=
"s">'VimFxReset VimFxHintMarker
'</span></pre></div> </td> </tr> <tr id=
"section-6"> <td class=
"docs"> <div class=
"pilwrap"> <a class=
"pilcrow" href=
"#section-6">¶</a> </div> <p>Shows the marker
</p> </td> <td class=
"code"> <div class=
"highlight"><pre> <span class=
"nv">show:
</span><span class=
"o">-
></span> <span class=
"vi">@markerElement.className =
</span><span class=
"s">'VimFxReset VimFxHintMarker
'</span></pre></div> </td> </tr> <tr id=
"section-7"> <td class=
"docs"> <div class=
"pilwrap"> <a class=
"pilcrow" href=
"#section-7">¶</a> </div> <p>Hides the marker
</p> </td> <td class=
"code"> <div class=
"highlight"><pre> <span class=
"nv">hide:
</span><span class=
"o">-
></span> <span class=
"vi">@markerElement.className =
</span><span class=
"s">'VimFxReset VimFxHiddenHintMarker
'</span></pre></div> </td> </tr> <tr id=
"section-8"> <td class=
"docs"> <div class=
"pilwrap"> <a class=
"pilcrow" href=
"#section-8">¶</a> </div> <p>Positions the marker on the page. The positioning is absulute
</p> </td> <td class=
"code"> <div class=
"highlight"><pre> <span class=
"nv">setPosition:
</span><span class=
"nf">(rect) -
></span>
28 <span class=
"vi">@markerElement.style.left =
</span><span class=
"nx">rect
</span><span class=
"p">.
</span><span class=
"nx">left
</span> <span class=
"o">+
</span> <span class=
"s">'px
'</span>
29 <span class=
"vi">@markerElement.style.top =
</span><span class=
"nx">rect
</span><span class=
"p">.
</span><span class=
"nx">top
</span> <span class=
"o">+
</span> <span class=
"s">'px
'</span></pre></div> </td> </tr> <tr id=
"section-9"> <td class=
"docs"> <div class=
"pilwrap"> <a class=
"pilcrow" href=
"#section-9">¶</a> </div> <p>Assigns hint string to the marker
</p> </td> <td class=
"code"> <div class=
"highlight"><pre> <span class=
"nv">setHint:
</span><span class=
"nf">(@hintChars) -
></span></pre></div> </td> </tr> <tr id=
"section-10"> <td class=
"docs"> <div class=
"pilwrap"> <a class=
"pilcrow" href=
"#section-10">¶</a> </div> <p>number of hint chars that have been matched so far
</p> </td> <td class=
"code"> <div class=
"highlight"><pre> <span class=
"vi">@enteredHintChars =
</span><span class=
"s">''</span>
31 <span class=
"nb">document
</span> <span class=
"o">=
</span> <span class=
"nx">@element
</span><span class=
"p">.
</span><span class=
"nx">ownerDocument
</span>
33 <span class=
"k">while
</span> <span class=
"nx">@markerElement
</span><span class=
"p">.
</span><span class=
"nx">hasChildNodes
</span><span class=
"p">()
</span>
34 <span class=
"nx">@markerElement
</span><span class=
"p">.
</span><span class=
"nx">removeChild
</span> <span class=
"nx">@markedElement
</span><span class=
"p">.
</span><span class=
"nx">firstChild
</span>
36 <span class=
"nv">fragment =
</span><span class=
"nb">document
</span><span class=
"p">.
</span><span class=
"nx">createDocumentFragment
</span><span class=
"p">()
</span>
37 <span class=
"k">for
</span> <span class=
"nx">char
</span> <span class=
"k">in
</span> <span class=
"nx">@hintChars
</span>
38 <span class=
"nv">span =
</span><span class=
"nb">document
</span><span class=
"p">.
</span><span class=
"nx">createElement
</span> <span class=
"s">'span
'</span>
39 <span class=
"nv">span.className =
</span><span class=
"s">'VimFxReset
'</span>
40 <span class=
"nv">span.textContent =
</span><span class=
"nx">char
</span><span class=
"p">.
</span><span class=
"nx">toUpperCase
</span><span class=
"p">()
</span>
42 <span class=
"nx">fragment
</span><span class=
"p">.
</span><span class=
"nx">appendChild
</span> <span class=
"nx">span
</span>
44 <span class=
"nx">@markerElement
</span><span class=
"p">.
</span><span class=
"nx">appendChild
</span> <span class=
"nx">fragment
</span></pre></div> </td> </tr> <tr id=
"section-11"> <td class=
"docs"> <div class=
"pilwrap"> <a class=
"pilcrow" href=
"#section-11">¶</a> </div> <p>Add another char to the
<code>enteredHintString
</code>,
45 see if it still matches
<code>hintString
</code>, apply classes to
46 the distinct hint characters and show/hide marker when
47 the entered string partially (not) matches the hint string
</p> </td> <td class=
"code"> <div class=
"highlight"><pre> <span class=
"nv">matchHintChar:
</span><span class=
"nf">(char) -
></span></pre></div> </td> </tr> <tr id=
"section-12"> <td class=
"docs"> <div class=
"pilwrap"> <a class=
"pilcrow" href=
"#section-12">¶</a> </div> <p>Handle backspace key by removing a previously entered hint char
48 and resetting its class
</p> </td> <td class=
"code"> <div class=
"highlight"><pre> <span class=
"k">if
</span> <span class=
"nx">char
</span> <span class=
"o">==
</span> <span class=
"s">'backspace
'</span>
49 <span class=
"k">if
</span> <span class=
"nx">@enteredHintChars
</span><span class=
"p">.
</span><span class=
"nx">length
</span> <span class=
"o">></span> <span class=
"mi">0</span>
50 <span class=
"vi">@enteredHintChars =
</span><span class=
"nx">@enteredHintChars
</span><span class=
"p">.
</span><span class=
"nx">slice
</span><span class=
"p">(
</span><span class=
"mi">0</span><span class=
"p">,
</span> <span class=
"o">-
</span><span class=
"mi">1</span><span class=
"p">)
</span>
51 <span class=
"nx">@markerElement
</span><span class=
"p">.
</span><span class=
"nx">children
</span><span class=
"p">[
</span><span class=
"nx">@enteredHintChars
</span><span class=
"p">.
</span><span class=
"nx">length
</span><span class=
"p">]
</span><span class=
"o">?
</span><span class=
"p">.
</span><span class=
"nv">className =
</span><span class=
"s">'VimFxReset
'</span></pre></div> </td> </tr> <tr id=
"section-13"> <td class=
"docs"> <div class=
"pilwrap"> <a class=
"pilcrow" href=
"#section-13">¶</a> </div> <p>Otherwise append hint char and change hint class
</p> </td> <td class=
"code"> <div class=
"highlight"><pre> <span class=
"k">else
</span>
52 <span class=
"nx">@markerElement
</span><span class=
"p">.
</span><span class=
"nx">children
</span><span class=
"p">[
</span><span class=
"nx">@enteredHintChars
</span><span class=
"p">.
</span><span class=
"nx">length
</span><span class=
"p">]
</span><span class=
"o">?
</span><span class=
"p">.
</span><span class=
"nv">className =
</span><span class=
"s">'VimFxReset VimFxCharMatch
'</span>
53 <span class=
"nx">@enteredHintChars
</span> <span class=
"o">+=
</span> <span class=
"nx">char
</span></pre></div> </td> </tr> <tr id=
"section-14"> <td class=
"docs"> <div class=
"pilwrap"> <a class=
"pilcrow" href=
"#section-14">¶</a> </div> <p>If entered hint chars no longer partially match the hint chars
54 then hide the marker. Othersie show it back
</p> </td> <td class=
"code"> <div class=
"highlight"><pre> <span class=
"k">if
</span> <span class=
"nx">@hintChars
</span><span class=
"p">.
</span><span class=
"nx">search
</span><span class=
"p">(
</span><span class=
"nx">@enteredHintChars
</span><span class=
"p">)
</span> <span class=
"o">==
</span> <span class=
"mi">0</span> <span class=
"k">then
</span> <span class=
"nx">@show
</span><span class=
"p">()
</span> <span class=
"k">else
</span> <span class=
"nx">@hide
</span><span class=
"p">()
</span></pre></div> </td> </tr> <tr id=
"section-15"> <td class=
"docs"> <div class=
"pilwrap"> <a class=
"pilcrow" href=
"#section-15">¶</a> </div> <p>Checks if enterd hint chars completely match the hint chars
</p> </td> <td class=
"code"> <div class=
"highlight"><pre> <span class=
"nv">isMatched:
</span><span class=
"o">-
></span>
55 <span class=
"k">return
</span> <span class=
"nx">@hintChars
</span> <span class=
"o">==
</span> <span class=
"nx">@enteredHintChars
</span></pre></div> </td> </tr> <tr id=
"section-16"> <td class=
"docs"> <div class=
"pilwrap"> <a class=
"pilcrow" href=
"#section-16">¶</a> </div> <p>Selects all markable elements on the page, creates markers
56 for each of them The markers are then positioned on the page
</p>
58 <p>The array of markers is returned
</p> </td> <td class=
"code"> <div class=
"highlight"><pre><span class=
"nv">Marker.createMarkers =
</span><span class=
"nf">(document) -
></span>
59 <span class=
"nv">hintChars =
</span><span class=
"nx">getPref
</span> <span class=
"s">'hint_chars
'</span>
61 <span class=
"nv">elementsSet =
</span><span class=
"nx">getMarkableElements
</span><span class=
"p">(
</span><span class=
"nb">document
</span><span class=
"p">)
</span>
62 <span class=
"nv">markers =
</span><span class=
"p">[];
</span>
63 <span class=
"nv">j =
</span><span class=
"mi">0</span>
64 <span class=
"k">for
</span> <span class=
"nx">i
</span> <span class=
"k">in
</span> <span class=
"p">[
</span><span class=
"mi">0</span><span class=
"p">...
</span><span class=
"nx">elementsSet
</span><span class=
"p">.
</span><span class=
"nx">snapshotLength
</span><span class=
"p">]
</span> <span class=
"k">by
</span> <span class=
"mi">1</span>
65 <span class=
"nv">element =
</span><span class=
"nx">elementsSet
</span><span class=
"p">.
</span><span class=
"nx">snapshotItem
</span><span class=
"p">(
</span><span class=
"nx">i
</span><span class=
"p">)
</span>
66 <span class=
"k">if
</span> <span class=
"nv">rect =
</span><span class=
"nx">getElementRect
</span> <span class=
"nx">element
</span>
67 <span class=
"nv">hint =
</span><span class=
"nx">indexToHint
</span><span class=
"p">(
</span><span class=
"nx">j
</span><span class=
"o">++
</span><span class=
"p">,
</span> <span class=
"nx">hintChars
</span><span class=
"p">)
</span>
68 <span class=
"nv">marker =
</span><span class=
"k">new
</span> <span class=
"nx">Marker
</span><span class=
"p">(
</span><span class=
"nx">element
</span><span class=
"p">)
</span>
69 <span class=
"nx">marker
</span><span class=
"p">.
</span><span class=
"nx">setPosition
</span> <span class=
"nx">rect
</span>
70 <span class=
"nx">marker
</span><span class=
"p">.
</span><span class=
"nx">setHint
</span> <span class=
"nx">hint
</span>
71 <span class=
"nx">markers
</span><span class=
"p">.
</span><span class=
"nx">push
</span><span class=
"p">(
</span><span class=
"nx">marker
</span><span class=
"p">)
</span>
73 <span class=
"k">return
</span> <span class=
"nx">markers
</span></pre></div> </td> </tr> <tr id=
"section-17"> <td class=
"docs"> <div class=
"pilwrap"> <a class=
"pilcrow" href=
"#section-17">¶</a> </div> <p>Function generator that creates a function that
74 returns hint string for supplied numeric index.
</p> </td> <td class=
"code"> <div class=
"highlight"><pre><span class=
"nv">indexToHint =
</span><span class=
"nx">do
</span> <span class=
"o">-
></span></pre></div> </td> </tr> <tr id=
"section-18"> <td class=
"docs"> <div class=
"pilwrap"> <a class=
"pilcrow" href=
"#section-18">¶</a> </div> <p>Helper function that returns a permutation number
<code>i
</code>
75 of some of the characters in the
<code>chars
</code> agrument
</p> </td> <td class=
"code"> <div class=
"highlight"><pre> <span class=
"nv">f =
</span><span class=
"nf">(i, chars) -
></span>
76 <span class=
"k">return
</span> <span class=
"s">''</span> <span class=
"k">if
</span> <span class=
"nx">i
</span> <span class=
"o"><</span> <span class=
"mi">0</span>
78 <span class=
"nv">n =
</span><span class=
"nx">chars
</span><span class=
"p">.
</span><span class=
"nx">length
</span>
79 <span class=
"nv">l =
</span><span class=
"nb">Math
</span><span class=
"p">.
</span><span class=
"nx">floor
</span><span class=
"p">(
</span><span class=
"nx">i
</span> <span class=
"o">/
</span> <span class=
"nx">n
</span><span class=
"p">);
</span> <span class=
"nv">k =
</span><span class=
"nx">i
</span> <span class=
"o">%
</span> <span class=
"nx">n
</span><span class=
"p">;
</span>
81 <span class=
"k">return
</span> <span class=
"nx">f
</span><span class=
"p">(
</span><span class=
"nx">l
</span> <span class=
"o">-
</span> <span class=
"mi">1</span><span class=
"p">,
</span> <span class=
"nx">chars
</span><span class=
"p">)
</span> <span class=
"o">+
</span> <span class=
"nx">chars
</span><span class=
"p">[
</span><span class=
"nx">k
</span><span class=
"p">]
</span>
83 <span class=
"k">return
</span> <span class=
"nf">(i, chars) -
></span></pre></div> </td> </tr> <tr id=
"section-19"> <td class=
"docs"> <div class=
"pilwrap"> <a class=
"pilcrow" href=
"#section-19">¶</a> </div> <p>split the characters into two groups:
</p>
86 <li>left chars are used for the head
</li>
87 <li>right chars are used to build the tail
</li>
88 </ul> </td> <td class=
"code"> <div class=
"highlight"><pre> <span class=
"nv">left =
</span><span class=
"nx">chars
</span><span class=
"p">[...
</span><span class=
"nx">chars
</span><span class=
"p">.
</span><span class=
"nx">length
</span> <span class=
"o">/
</span> <span class=
"mi">3</span><span class=
"p">]
</span>
89 <span class=
"nv">right =
</span><span class=
"nx">chars
</span><span class=
"p">[
</span><span class=
"nx">chars
</span><span class=
"p">.
</span><span class=
"nx">length
</span> <span class=
"o">/
</span> <span class=
"mi">3</span><span class=
"p">...]
</span>
91 <span class=
"nv">n =
</span><span class=
"nb">Math
</span><span class=
"p">.
</span><span class=
"nx">floor
</span><span class=
"p">(
</span><span class=
"nx">i
</span> <span class=
"o">/
</span> <span class=
"nx">left
</span><span class=
"p">.
</span><span class=
"nx">length
</span><span class=
"p">)
</span>
92 <span class=
"nv">m =
</span><span class=
"nx">i
</span> <span class=
"o">%
</span> <span class=
"nx">left
</span><span class=
"p">.
</span><span class=
"nx">length
</span>
93 <span class=
"k">return
</span> <span class=
"nx">f
</span><span class=
"p">(
</span><span class=
"nx">n
</span> <span class=
"o">-
</span> <span class=
"mi">1</span><span class=
"p">,
</span> <span class=
"nx">right
</span><span class=
"p">)
</span> <span class=
"o">+
</span> <span class=
"nx">left
</span><span class=
"p">[
</span><span class=
"nx">m
</span><span class=
"p">]
</span>
94 </pre></div> </td> </tr> <tr id=
"section-20"> <td class=
"docs"> <div class=
"pilwrap"> <a class=
"pilcrow" href=
"#section-20">¶</a> </div> <p>Returns elements that qualify for hint markers in hints mode.
95 Generates and memoizes an XPath query internally
</p> </td> <td class=
"code"> <div class=
"highlight"><pre><span class=
"nv">getMarkableElements =
</span><span class=
"nx">do
</span> <span class=
"o">-
></span></pre></div> </td> </tr> <tr id=
"section-21"> <td class=
"docs"> <div class=
"pilwrap"> <a class=
"pilcrow" href=
"#section-21">¶</a> </div> <p>Some preparations done on startup
</p> </td> <td class=
"code"> <div class=
"highlight"><pre> <span class=
"nv">elements =
</span><span class=
"nb">Array
</span><span class=
"p">.
</span><span class=
"nx">concat
</span> <span class=
"o">\
</span>
96 <span class=
"nx">MARKABLE_ELEMENTS
</span><span class=
"p">,
</span>
97 <span class=
"p">[
</span><span class=
"s">"*[
</span><span class=
"si">#{
</span> <span class=
"nx">MARKABLE_ELEMENT_PROPERTIES
</span><span class=
"p">.
</span><span class=
"nx">join
</span><span class=
"p">(
</span><span class=
"s">" or
"</span><span class=
"p">)
</span> <span class=
"si">}
</span><span class=
"s">]
"</span><span class=
"p">]
</span>
99 <span class=
"nv">xpath =
</span><span class=
"nx">elements
</span><span class=
"p">.
</span><span class=
"nx">reduce
</span><span class=
"p">(
</span><span class=
"nf">(m, rule) -
></span>
100 <span class=
"nx">m
</span><span class=
"p">.
</span><span class=
"nx">concat
</span><span class=
"p">([
</span><span class=
"s">"//
</span><span class=
"si">#{
</span> <span class=
"nx">rule
</span> <span class=
"si">}
</span><span class=
"s">"</span><span class=
"p">,
</span> <span class=
"s">"//xhtml:
</span><span class=
"si">#{
</span> <span class=
"nx">rule
</span> <span class=
"si">}
</span><span class=
"s">"</span><span class=
"p">])
</span>
101 <span class=
"p">,
</span> <span class=
"p">[]).
</span><span class=
"nx">join
</span><span class=
"p">(
</span><span class=
"s">' |
'</span><span class=
"p">)
</span>
103 <span class=
"nv">namespaceResolver =
</span><span class=
"nf">(namespace) -
></span>
104 <span class=
"k">if
</span> <span class=
"p">(
</span><span class=
"nx">namespace
</span> <span class=
"o">==
</span> <span class=
"s">"xhtml
"</span><span class=
"p">)
</span> <span class=
"k">then
</span> <span class=
"s">"http://www.w3.org/
1999/xhtml
"</span> <span class=
"k">else
</span> <span class=
"kc">null
</span></pre></div> </td> </tr> <tr id=
"section-22"> <td class=
"docs"> <div class=
"pilwrap"> <a class=
"pilcrow" href=
"#section-22">¶</a> </div> <p>The actual function that will return the desired elements
</p> </td> <td class=
"code"> <div class=
"highlight"><pre> <span class=
"k">return
</span> <span class=
"nf">(document, resultType = XPathResult.ORDERED_NODE_SNAPSHOT_TYPE) -
></span>
105 <span class=
"nb">document
</span><span class=
"p">.
</span><span class=
"nx">evaluate
</span> <span class=
"nx">xpath
</span><span class=
"p">,
</span> <span class=
"nb">document
</span><span class=
"p">.
</span><span class=
"nx">documentElement
</span><span class=
"p">,
</span> <span class=
"nx">namespaceResolver
</span><span class=
"p">,
</span> <span class=
"nx">resultType
</span><span class=
"p">,
</span> <span class=
"kc">null
</span></pre></div> </td> </tr> <tr id=
"section-23"> <td class=
"docs"> <div class=
"pilwrap"> <a class=
"pilcrow" href=
"#section-23">¶</a> </div> <p>Checks if the given TextRectangle object qualifies
106 for its own Marker with respect to the
<code>window
</code> object
</p> </td> <td class=
"code"> <div class=
"highlight"><pre><span class=
"nv">isRectOk =
</span><span class=
"nf">(rect, window) -
></span>
107 <span class=
"nx">rect
</span><span class=
"p">.
</span><span class=
"nx">width
</span> <span class=
"o">></span> <span class=
"mi">2</span> <span class=
"o">and
</span> <span class=
"nx">rect
</span><span class=
"p">.
</span><span class=
"nx">height
</span> <span class=
"o">></span> <span class=
"mi">2</span> <span class=
"o">and
</span> <span class=
"o">\
</span>
108 <span class=
"nx">rect
</span><span class=
"p">.
</span><span class=
"nx">top
</span> <span class=
"o">></span> <span class=
"o">-
</span><span class=
"mi">2</span> <span class=
"o">and
</span> <span class=
"nx">rect
</span><span class=
"p">.
</span><span class=
"nx">left
</span> <span class=
"o">></span> <span class=
"o">-
</span><span class=
"mi">2</span> <span class=
"o">and
</span> <span class=
"o">\
</span>
109 <span class=
"nx">rect
</span><span class=
"p">.
</span><span class=
"nx">top
</span> <span class=
"o"><</span> <span class=
"nb">window
</span><span class=
"p">.
</span><span class=
"nx">innerHeight
</span> <span class=
"o">-
</span> <span class=
"mi">2</span> <span class=
"o">and
</span> <span class=
"o">\
</span>
110 <span class=
"nx">rect
</span><span class=
"p">.
</span><span class=
"nx">left
</span> <span class=
"o"><</span> <span class=
"nb">window
</span><span class=
"p">.
</span><span class=
"nx">innerWidth
</span> <span class=
"o">-
</span> <span class=
"mi">2</span></pre></div> </td> </tr> <tr id=
"section-24"> <td class=
"docs"> <div class=
"pilwrap"> <a class=
"pilcrow" href=
"#section-24">¶</a> </div> <p>Will scan through
<code>element.getClientRects()
</code> and look for
111 the first visible rectange. If there are no visible rectangles, then
112 will look at the children of the markable node.
</p>
114 <p>The logic has been copied over from Vimiun
</p> </td> <td class=
"code"> <div class=
"highlight"><pre><span class=
"nv">getElementRect =
</span><span class=
"nf">(element) -
></span>
115 <span class=
"nb">document
</span> <span class=
"o">=
</span> <span class=
"nx">element
</span><span class=
"p">.
</span><span class=
"nx">ownerDocument
</span>
116 <span class=
"nb">window
</span> <span class=
"o">=
</span> <span class=
"nb">document
</span><span class=
"p">.
</span><span class=
"nx">defaultView
</span>
117 <span class=
"nv">docElem =
</span><span class=
"nb">document
</span><span class=
"p">.
</span><span class=
"nx">documentElement
</span>
118 <span class=
"nv">body =
</span><span class=
"nb">document
</span><span class=
"p">.
</span><span class=
"nx">body
</span>
120 <span class=
"nv">clientTop =
</span><span class=
"nx">docElem
</span><span class=
"p">.
</span><span class=
"nx">clientTop
</span> <span class=
"o">||
</span> <span class=
"nx">body
</span><span class=
"p">.
</span><span class=
"nx">clientTop
</span> <span class=
"o">||
</span> <span class=
"mi">0</span><span class=
"p">;
</span>
121 <span class=
"nv">clientLeft =
</span><span class=
"nx">docElem
</span><span class=
"p">.
</span><span class=
"nx">clientLeft
</span> <span class=
"o">||
</span> <span class=
"nx">body
</span><span class=
"p">.
</span><span class=
"nx">clientLeft
</span> <span class=
"o">||
</span> <span class=
"mi">0</span><span class=
"p">;
</span>
122 <span class=
"nv">scrollTop =
</span><span class=
"nb">window
</span><span class=
"p">.
</span><span class=
"nx">pageYOffset
</span> <span class=
"o">||
</span> <span class=
"nx">docElem
</span><span class=
"p">.
</span><span class=
"nx">scrollTop
</span><span class=
"p">;
</span>
123 <span class=
"nv">scrollLeft =
</span><span class=
"nb">window
</span><span class=
"p">.
</span><span class=
"nx">pageXOffset
</span> <span class=
"o">||
</span> <span class=
"nx">docElem
</span><span class=
"p">.
</span><span class=
"nx">scrollLeft
</span><span class=
"p">;
</span>
125 <span class=
"nv">rects =
</span><span class=
"p">[
</span><span class=
"nx">rect
</span> <span class=
"k">for
</span> <span class=
"nx">rect
</span> <span class=
"k">in
</span> <span class=
"nx">element
</span><span class=
"p">.
</span><span class=
"nx">getClientRects
</span><span class=
"p">()]
</span>
126 <span class=
"nx">rects
</span><span class=
"p">.
</span><span class=
"nx">push
</span> <span class=
"nx">element
</span><span class=
"p">.
</span><span class=
"nx">getBoundingClientRect
</span><span class=
"p">()
</span>
128 <span class=
"k">for
</span> <span class=
"nx">rect
</span> <span class=
"k">in
</span> <span class=
"nx">rects
</span>
129 <span class=
"k">if
</span> <span class=
"nx">isRectOk
</span> <span class=
"nx">rect
</span><span class=
"p">,
</span> <span class=
"nb">window
</span>
130 <span class=
"k">return
</span> <span class=
"p">{
</span>
131 <span class=
"nv">top:
</span> <span class=
"nx">rect
</span><span class=
"p">.
</span><span class=
"nx">top
</span> <span class=
"o">+
</span> <span class=
"nx">scrollTop
</span> <span class=
"o">-
</span> <span class=
"nx">clientTop
</span>
132 <span class=
"nv">left:
</span> <span class=
"nx">rect
</span><span class=
"p">.
</span><span class=
"nx">left
</span> <span class=
"o">+
</span> <span class=
"nx">scrollLeft
</span> <span class=
"o">-
</span> <span class=
"nx">clientLeft
</span>
133 <span class=
"nv">width:
</span> <span class=
"nx">rect
</span><span class=
"p">.
</span><span class=
"nx">width
</span>
134 <span class=
"nv">height:
</span><span class=
"nx">rect
</span><span class=
"p">.
</span><span class=
"nx">height
</span>
135 <span class=
"p">}
</span></pre></div> </td> </tr> <tr id=
"section-25"> <td class=
"docs"> <div class=
"pilwrap"> <a class=
"pilcrow" href=
"#section-25">¶</a> </div> <p>If the element has
0 dimentions then check what's inside.
136 Floated or absolutely positioned elements are of particular interest
</p> </td> <td class=
"code"> <div class=
"highlight"><pre> <span class=
"k">for
</span> <span class=
"nx">rect
</span> <span class=
"k">in
</span> <span class=
"nx">rects
</span>
137 <span class=
"k">if
</span> <span class=
"nx">rect
</span><span class=
"p">.
</span><span class=
"nx">width
</span> <span class=
"o">==
</span> <span class=
"mi">0</span> <span class=
"o">or
</span> <span class=
"nx">rect
</span><span class=
"p">.
</span><span class=
"nx">height
</span> <span class=
"o">==
</span> <span class=
"mi">0</span>
138 <span class=
"k">for
</span> <span class=
"nx">childElement
</span> <span class=
"k">in
</span> <span class=
"nx">element
</span><span class=
"p">.
</span><span class=
"nx">children
</span>
139 <span class=
"nv">computedStyle =
</span><span class=
"nb">window
</span><span class=
"p">.
</span><span class=
"nx">getComputedStyle
</span> <span class=
"nx">childElement
</span><span class=
"p">,
</span> <span class=
"kc">null
</span>
140 <span class=
"k">if
</span> <span class=
"nx">computedStyle
</span><span class=
"p">.
</span><span class=
"nx">getPropertyValue
</span> <span class=
"s">'float
'</span> <span class=
"o">!=
</span> <span class=
"s">'none
'</span> <span class=
"o">or
</span> <span class=
"o">\
</span>
141 <span class=
"nx">computedStyle
</span><span class=
"p">.
</span><span class=
"nx">getPropertyValue
</span> <span class=
"s">'position
'</span> <span class=
"o">==
</span> <span class=
"s">'absolute
'</span>
143 <span class=
"nx">childRect
</span> <span class=
"k">if
</span> <span class=
"nv">childRect =
</span><span class=
"nx">getElementRect
</span> <span class=
"nx">childElement
</span>
145 <span class=
"k">return
</span> <span class=
"kc">undefined
</span>
147 <span class=
"nv">exports.Marker =
</span><span class=
"nx">Marker
</span>
149 </pre></div> </td> </tr> </tbody> </table> </div> </body> </html>