forked from bitovi/jquerypp
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathselection.html
More file actions
161 lines (149 loc) · 45.2 KB
/
selection.html
File metadata and controls
161 lines (149 loc) · 45.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html> <html> <head> <title>selection.js</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="jquerypp.html"> jquerypp.js </a> <a class="source" href="animate.html"> animate.js </a> <a class="source" href="compare.html"> compare.js </a> <a class="source" href="cookie.html"> cookie.js </a> <a class="source" href="dimensions.html"> dimensions.js </a> <a class="source" href="form_params.html"> form_params.js </a> <a class="source" href="range.html"> range.js </a> <a class="source" href="selection.html"> selection.js </a> <a class="source" href="styles.html"> styles.js </a> <a class="source" href="within.html"> within.js </a> <a class="source" href="default.html"> default.js </a> <a class="source" href="destroyed.html"> destroyed.js </a> <a class="source" href="drag.html"> drag.js </a> <a class="source" href="core.html"> core.js </a> <a class="source" href="limit.html"> limit.js </a> <a class="source" href="scroll.html"> scroll.js </a> <a class="source" href="step.html"> step.js </a> <a class="source" href="drop.html"> drop.js </a> <a class="source" href="fastfix.html"> fastfix.js </a> <a class="source" href="hover.html"> hover.js </a> <a class="source" href="key.html"> key.js </a> <a class="source" href="livehack.html"> livehack.js </a> <a class="source" href="pause.html"> pause.js </a> <a class="source" href="resize.html"> resize.js </a> <a class="source" href="reverse.html"> reverse.js </a> <a class="source" href="swipe.html"> swipe.js </a> <a class="source" href="json.html"> json.js </a> <a class="source" href="vector.html"> vector.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> selection.js </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="kd">function</span> <span class="p">(</span><span class="nx">$</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">getWindow</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">element</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">element</span> <span class="o">?</span> <span class="nx">element</span><span class="p">.</span><span class="nx">ownerDocument</span><span class="p">.</span><span class="nx">defaultView</span> <span class="o">||</span> <span class="nx">element</span><span class="p">.</span><span class="nx">ownerDocument</span><span class="p">.</span><span class="nx">parentWindow</span> <span class="o">:</span> <span class="nb">window</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <p>A helper that uses range to abstract out getting the current start and endPos.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getElementsSelection</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">el</span><span class="p">,</span> <span class="nx">win</span><span class="p">)</span> <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>get a copy of the current range and a range that spans the element</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">current</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Range</span><span class="p">.</span><span class="nx">current</span><span class="p">(</span><span class="nx">el</span><span class="p">).</span><span class="nx">clone</span><span class="p">(),</span>
<span class="nx">entireElement</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Range</span><span class="p">(</span><span class="nx">el</span><span class="p">).</span><span class="nx">select</span><span class="p">(</span><span class="nx">el</span><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>if there is no overlap, there is nothing selected</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">current</span><span class="p">.</span><span class="nx">overlaps</span><span class="p">(</span><span class="nx">entireElement</span><span class="p">))</span> <span class="p">{</span>
<span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p>if the current range starts before our element</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">current</span><span class="p">.</span><span class="nx">compare</span><span class="p">(</span><span class="s2">"START_TO_START"</span><span class="p">,</span> <span class="nx">entireElement</span><span class="p">)</span> <span class="o"><</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>the selection within the element begins at 0</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">startPos</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <p>move the current range to start at our element</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">current</span><span class="p">.</span><span class="nx">move</span><span class="p">(</span><span class="s2">"START_TO_START"</span><span class="p">,</span> <span class="nx">entireElement</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <p>Make a copy of the element's range.
Move it's end to the start of the selected range
The length of the copy is the start of the selected
range.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">fromElementToCurrent</span> <span class="o">=</span> <span class="nx">entireElement</span><span class="p">.</span><span class="nx">clone</span><span class="p">();</span>
<span class="nx">fromElementToCurrent</span><span class="p">.</span><span class="nx">move</span><span class="p">(</span><span class="s2">"END_TO_START"</span><span class="p">,</span> <span class="nx">current</span><span class="p">);</span>
<span class="nx">startPos</span> <span class="o">=</span> <span class="nx">fromElementToCurrent</span><span class="p">.</span><span class="nx">toString</span><span class="p">().</span><span class="nx">length</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <p>If the current range ends after our element</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">current</span><span class="p">.</span><span class="nx">compare</span><span class="p">(</span><span class="s2">"END_TO_END"</span><span class="p">,</span> <span class="nx">entireElement</span><span class="p">)</span> <span class="o">>=</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>the end position is the last character</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">endPos</span> <span class="o">=</span> <span class="nx">entireElement</span><span class="p">.</span><span class="nx">toString</span><span class="p">().</span><span class="nx">length</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>otherwise, it's the start position plus the current range
TODO: this doesn't seem like it works if current
extends to the left of the element.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">endPos</span> <span class="o">=</span> <span class="nx">startPos</span> <span class="o">+</span> <span class="nx">current</span><span class="p">.</span><span class="nx">toString</span><span class="p">().</span><span class="nx">length</span>
<span class="p">}</span>
<span class="k">return</span> <span class="p">{</span>
<span class="nx">start</span><span class="o">:</span> <span class="nx">startPos</span><span class="p">,</span>
<span class="nx">end</span><span class="o">:</span> <span class="nx">endPos</span><span class="p">,</span>
<span class="nx">width</span><span class="o">:</span> <span class="nx">endPos</span> <span class="o">-</span> <span class="nx">startPos</span>
<span class="p">};</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <p>Text selection works differently for selection in an input vs
normal html elements like divs, spans, and ps.
This function branches between the various methods of getting the selection.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getSelection</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">el</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">win</span> <span class="o">=</span> <span class="nx">getWindow</span><span class="p">(</span><span class="nx">el</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <p><code>selectionStart</code> means this is an input element in a standards browser.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">el</span><span class="p">.</span><span class="nx">selectionStart</span> <span class="o">!==</span> <span class="kc">undefined</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">activeElement</span> <span class="o">&&</span> <span class="nb">document</span><span class="p">.</span><span class="nx">activeElement</span> <span class="o">!=</span> <span class="nx">el</span> <span class="o">&&</span> <span class="nx">el</span><span class="p">.</span><span class="nx">selectionStart</span> <span class="o">==</span> <span class="nx">el</span><span class="p">.</span><span class="nx">selectionEnd</span> <span class="o">&&</span> <span class="nx">el</span><span class="p">.</span><span class="nx">selectionStart</span> <span class="o">==</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span>
<span class="nx">start</span><span class="o">:</span> <span class="nx">el</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span>
<span class="nx">end</span><span class="o">:</span> <span class="nx">el</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span>
<span class="nx">width</span><span class="o">:</span> <span class="mi">0</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="k">return</span> <span class="p">{</span>
<span class="nx">start</span><span class="o">:</span> <span class="nx">el</span><span class="p">.</span><span class="nx">selectionStart</span><span class="p">,</span>
<span class="nx">end</span><span class="o">:</span> <span class="nx">el</span><span class="p">.</span><span class="nx">selectionEnd</span><span class="p">,</span>
<span class="nx">width</span><span class="o">:</span> <span class="nx">el</span><span class="p">.</span><span class="nx">selectionEnd</span> <span class="o">-</span> <span class="nx">el</span><span class="p">.</span><span class="nx">selectionStart</span>
<span class="p">};</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>getSelection means a 'normal' element in a standards browser.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">win</span><span class="p">.</span><span class="nx">getSelection</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">getElementsSelection</span><span class="p">(</span><span class="nx">el</span><span class="p">,</span> <span class="nx">win</span><span class="p">)</span>
<span class="p">}</span> <span class="k">else</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>IE will freak out, where there is no way to detect it, so we provide a callback if it does.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">try</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> <p>The following typically works for input elements in IE:</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">el</span><span class="p">.</span><span class="nx">nodeName</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">()</span> <span class="o">==</span> <span class="s1">'input'</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">real</span> <span class="o">=</span> <span class="nx">getWindow</span><span class="p">(</span><span class="nx">el</span><span class="p">).</span><span class="nb">document</span><span class="p">.</span><span class="nx">selection</span><span class="p">.</span><span class="nx">createRange</span><span class="p">(),</span>
<span class="nx">r</span> <span class="o">=</span> <span class="nx">el</span><span class="p">.</span><span class="nx">createTextRange</span><span class="p">();</span>
<span class="nx">r</span><span class="p">.</span><span class="nx">setEndPoint</span><span class="p">(</span><span class="s2">"EndToStart"</span><span class="p">,</span> <span class="nx">real</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">start</span> <span class="o">=</span> <span class="nx">r</span><span class="p">.</span><span class="nx">text</span><span class="p">.</span><span class="nx">length</span>
<span class="k">return</span> <span class="p">{</span>
<span class="nx">start</span><span class="o">:</span> <span class="nx">start</span><span class="p">,</span>
<span class="nx">end</span><span class="o">:</span> <span class="nx">start</span> <span class="o">+</span> <span class="nx">real</span><span class="p">.</span><span class="nx">text</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span>
<span class="nx">width</span><span class="o">:</span> <span class="nx">real</span><span class="p">.</span><span class="nx">text</span><span class="p">.</span><span class="nx">length</span>
<span class="p">}</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</a> </div> <p>This works on textareas and other elements</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">else</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">res</span> <span class="o">=</span> <span class="nx">getElementsSelection</span><span class="p">(</span><span class="nx">el</span><span class="p">,</span> <span class="nx">win</span><span class="p">)</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">res</span><span class="p">;</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> <p>we have to clean up for ie's textareas which don't count for
newlines correctly</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">current</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Range</span><span class="p">.</span><span class="nx">current</span><span class="p">().</span><span class="nx">clone</span><span class="p">(),</span>
<span class="nx">r2</span> <span class="o">=</span> <span class="nx">current</span><span class="p">.</span><span class="nx">clone</span><span class="p">().</span><span class="nx">collapse</span><span class="p">().</span><span class="nx">range</span><span class="p">,</span>
<span class="nx">r3</span> <span class="o">=</span> <span class="nx">current</span><span class="p">.</span><span class="nx">clone</span><span class="p">().</span><span class="nx">collapse</span><span class="p">(</span><span class="kc">false</span><span class="p">).</span><span class="nx">range</span><span class="p">;</span>
<span class="nx">r2</span><span class="p">.</span><span class="nx">moveStart</span><span class="p">(</span><span class="s1">'character'</span><span class="p">,</span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span>
<span class="nx">r3</span><span class="p">.</span><span class="nx">moveStart</span><span class="p">(</span><span class="s1">'character'</span><span class="p">,</span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> <p>if we aren't at the start, but previous is empty, we are at start of newline</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">res</span><span class="p">.</span><span class="nx">startPos</span> <span class="o">!=</span> <span class="mi">0</span> <span class="o">&&</span> <span class="nx">r2</span><span class="p">.</span><span class="nx">text</span> <span class="o">==</span> <span class="s2">""</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">res</span><span class="p">.</span><span class="nx">startPos</span> <span class="o">+=</span> <span class="mi">2</span><span class="p">;</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</a> </div> <p>do a similar thing for the end of the textarea</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">res</span><span class="p">.</span><span class="nx">endPos</span> <span class="o">!=</span> <span class="mi">0</span> <span class="o">&&</span> <span class="nx">r3</span><span class="p">.</span><span class="nx">text</span> <span class="o">==</span> <span class="s2">""</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">res</span><span class="p">.</span><span class="nx">endPos</span> <span class="o">+=</span> <span class="mi">2</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">res</span>
<span class="p">}</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span>
<span class="nx">start</span><span class="o">:</span> <span class="nx">el</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span>
<span class="nx">end</span><span class="o">:</span> <span class="nx">el</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span>
<span class="nx">width</span><span class="o">:</span> <span class="mi">0</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">¶</a> </div> <p>Selects text within an element. Depending if it's a form element or
not, or a standards based browser or not, we do different things.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">select</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">el</span><span class="p">,</span> <span class="nx">start</span><span class="p">,</span> <span class="nx">end</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">win</span> <span class="o">=</span> <span class="nx">getWindow</span><span class="p">(</span><span class="nx">el</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">¶</a> </div> <p>IE behaves bad even if it sorta supports
getSelection so we have to try the IE methods first. barf.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">el</span><span class="p">.</span><span class="nx">setSelectionRange</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">end</span> <span class="o">===</span> <span class="kc">undefined</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">el</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
<span class="nx">el</span><span class="p">.</span><span class="nx">setSelectionRange</span><span class="p">(</span><span class="nx">start</span><span class="p">,</span> <span class="nx">start</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">el</span><span class="p">.</span><span class="nx">select</span><span class="p">();</span>
<span class="nx">el</span><span class="p">.</span><span class="nx">selectionStart</span> <span class="o">=</span> <span class="nx">start</span><span class="p">;</span>
<span class="nx">el</span><span class="p">.</span><span class="nx">selectionEnd</span> <span class="o">=</span> <span class="nx">end</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">el</span><span class="p">.</span><span class="nx">createTextRange</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">r</span> <span class="o">=</span> <span class="nx">el</span><span class="p">.</span><span class="nx">createTextRange</span><span class="p">();</span>
<span class="nx">r</span><span class="p">.</span><span class="nx">moveStart</span><span class="p">(</span><span class="s1">'character'</span><span class="p">,</span> <span class="nx">start</span><span class="p">);</span>
<span class="nx">end</span> <span class="o">=</span> <span class="nx">end</span> <span class="o">||</span> <span class="nx">start</span><span class="p">;</span>
<span class="nx">r</span><span class="p">.</span><span class="nx">moveEnd</span><span class="p">(</span><span class="s1">'character'</span><span class="p">,</span> <span class="nx">end</span> <span class="o">-</span> <span class="nx">el</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span>
<span class="nx">r</span><span class="p">.</span><span class="nx">select</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">win</span><span class="p">.</span><span class="nx">getSelection</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">doc</span> <span class="o">=</span> <span class="nx">win</span><span class="p">.</span><span class="nb">document</span><span class="p">,</span>
<span class="nx">sel</span> <span class="o">=</span> <span class="nx">win</span><span class="p">.</span><span class="nx">getSelection</span><span class="p">(),</span>
<span class="nx">range</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">createRange</span><span class="p">(),</span>
<span class="nx">ranges</span> <span class="o">=</span> <span class="p">[</span><span class="nx">start</span><span class="p">,</span> <span class="nx">end</span> <span class="o">!==</span> <span class="kc">undefined</span> <span class="o">?</span> <span class="nx">end</span> <span class="o">:</span> <span class="nx">start</span><span class="p">];</span>
<span class="nx">getCharElement</span><span class="p">([</span><span class="nx">el</span><span class="p">],</span> <span class="nx">ranges</span><span class="p">);</span>
<span class="nx">range</span><span class="p">.</span><span class="nx">setStart</span><span class="p">(</span><span class="nx">ranges</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">el</span><span class="p">,</span> <span class="nx">ranges</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">count</span><span class="p">);</span>
<span class="nx">range</span><span class="p">.</span><span class="nx">setEnd</span><span class="p">(</span><span class="nx">ranges</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="nx">el</span><span class="p">,</span> <span class="nx">ranges</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="nx">count</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">¶</a> </div> <p>removeAllRanges is necessary for webkit</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">sel</span><span class="p">.</span><span class="nx">removeAllRanges</span><span class="p">();</span>
<span class="nx">sel</span><span class="p">.</span><span class="nx">addRange</span><span class="p">(</span><span class="nx">range</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">win</span><span class="p">.</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">createTextRange</span><span class="p">)</span> <span class="p">{</span> <span class="c1">//IE's weirdness</span>
<span class="kd">var</span> <span class="nx">range</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">createTextRange</span><span class="p">();</span>
<span class="nx">range</span><span class="p">.</span><span class="nx">moveToElementText</span><span class="p">(</span><span class="nx">el</span><span class="p">);</span>
<span class="nx">range</span><span class="p">.</span><span class="nx">collapse</span><span class="p">()</span>
<span class="nx">range</span><span class="p">.</span><span class="nx">moveStart</span><span class="p">(</span><span class="s1">'character'</span><span class="p">,</span> <span class="nx">start</span><span class="p">)</span>
<span class="nx">range</span><span class="p">.</span><span class="nx">moveEnd</span><span class="p">(</span><span class="s1">'character'</span><span class="p">,</span> <span class="nx">end</span> <span class="o">!==</span> <span class="kc">undefined</span> <span class="o">?</span> <span class="nx">end</span> <span class="o">:</span> <span class="nx">start</span><span class="p">)</span>
<span class="nx">range</span><span class="p">.</span><span class="nx">select</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">¶</a> </div> <p>If one of the range values is within start and len, replace the range
value with the element and its offset.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">replaceWithLess</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">start</span><span class="p">,</span> <span class="nx">len</span><span class="p">,</span> <span class="nx">range</span><span class="p">,</span> <span class="nx">el</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">range</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">===</span> <span class="s1">'number'</span> <span class="o">&&</span> <span class="nx">range</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o"><</span> <span class="nx">len</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">range</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">el</span><span class="o">:</span> <span class="nx">el</span><span class="p">,</span>
<span class="nx">count</span><span class="o">:</span> <span class="nx">range</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">-</span> <span class="nx">start</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">range</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o">===</span> <span class="s1">'number'</span> <span class="o">&&</span> <span class="nx">range</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o"><=</span> <span class="nx">len</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">range</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">el</span><span class="o">:</span> <span class="nx">el</span><span class="p">,</span>
<span class="nx">count</span><span class="o">:</span> <span class="nx">range</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o">-</span> <span class="nx">start</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="nx">getCharElement</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">elems</span><span class="p">,</span> <span class="nx">range</span><span class="p">,</span> <span class="nx">len</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">elem</span><span class="p">,</span> <span class="nx">start</span><span class="p">;</span>
<span class="nx">len</span> <span class="o">=</span> <span class="nx">len</span> <span class="o">||</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">elems</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">elem</span> <span class="o">=</span> <span class="nx">elems</span><span class="p">[</span><span class="nx">i</span><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>Get the text from text nodes and CDATA nodes</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">elem</span><span class="p">.</span><span class="nx">nodeType</span> <span class="o">===</span> <span class="mi">3</span> <span class="o">||</span> <span class="nx">elem</span><span class="p">.</span><span class="nx">nodeType</span> <span class="o">===</span> <span class="mi">4</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">start</span> <span class="o">=</span> <span class="nx">len</span>
<span class="nx">len</span> <span class="o">+=</span> <span class="nx">elem</span><span class="p">.</span><span class="nx">nodeValue</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">¶</a> </div> <p>check if len is now greater than what's in counts</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">replaceWithLess</span><span class="p">(</span><span class="nx">start</span><span class="p">,</span> <span class="nx">len</span><span class="p">,</span> <span class="nx">range</span><span class="p">,</span> <span class="nx">elem</span><span class="p">)</span></pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">¶</a> </div> <p>Traverse everything else, except comment nodes</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">elem</span><span class="p">.</span><span class="nx">nodeType</span> <span class="o">!==</span> <span class="mi">8</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">len</span> <span class="o">=</span> <span class="nx">getCharElement</span><span class="p">(</span><span class="nx">elem</span><span class="p">.</span><span class="nx">childNodes</span><span class="p">,</span> <span class="nx">range</span><span class="p">,</span> <span class="nx">len</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">len</span><span class="p">;</span>
<span class="p">};</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">selection</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">start</span><span class="p">,</span> <span class="nx">end</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">start</span> <span class="o">!==</span> <span class="kc">undefined</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">select</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">start</span><span class="p">,</span> <span class="nx">end</span><span class="p">)</span>
<span class="p">})</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">getSelection</span><span class="p">(</span><span class="k">this</span><span class="p">[</span><span class="mi">0</span><span class="p">])</span>
<span class="p">}</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">¶</a> </div> <p>for testing</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">selection</span><span class="p">.</span><span class="nx">getCharElement</span> <span class="o">=</span> <span class="nx">getCharElement</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">$</span><span class="p">;</span>
<span class="p">})(</span><span class="nx">jQuery</span><span class="p">);</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>