|
115
|
1 // Thanks to https://stackoverflow.com/a/30586239 for word-finder
|
|
|
2 $(function() {
|
|
|
3 // Get the HTML in #hoverText - just a wrapper for convenience
|
|
|
4 var $hoverText = $("#hoverText");
|
|
|
5
|
|
|
6 // Get the full word the cursor is over regardless of span breaks
|
|
|
7 function getFullWord(event) {
|
|
|
8 var i, begin, end, range, textNode, offset;
|
|
|
9
|
|
|
10 // Internet Explorer
|
|
|
11 if (document.body.createTextRange) {
|
|
|
12 try {
|
|
|
13 range = document.body.createTextRange();
|
|
|
14 range.moveToPoint(event.clientX, event.clientY);
|
|
|
15 range.select();
|
|
|
16 range = getTextRangeBoundaryPosition(range, true);
|
|
|
17
|
|
|
18 textNode = range.node;
|
|
|
19 offset = range.offset;
|
|
|
20 } catch(e) {
|
|
|
21 return ""; // Sigh, IE
|
|
|
22 }
|
|
|
23 }
|
|
|
24
|
|
|
25 // Firefox, Safari
|
|
|
26 // REF: https://developer.mozilla.org/en-US/docs/Web/API/Document/caretPositionFromPoint
|
|
|
27 else if (document.caretPositionFromPoint) {
|
|
|
28 range = document.caretPositionFromPoint(event.clientX, event.clientY);
|
|
|
29 textNode = range.offsetNode;
|
|
|
30 offset = range.offset;
|
|
|
31
|
|
|
32 // Chrome
|
|
|
33 // REF: https://developer.mozilla.org/en-US/docs/Web/API/document/caretRangeFromPoint
|
|
|
34 } else if (document.caretRangeFromPoint) {
|
|
|
35 range = document.caretRangeFromPoint(event.clientX, event.clientY);
|
|
|
36 textNode = range.startContainer;
|
|
|
37 offset = range.startOffset;
|
|
|
38 }
|
|
|
39
|
|
|
40 // Only act on text nodes
|
|
|
41 if (!textNode || textNode.nodeType !== Node.TEXT_NODE) {
|
|
|
42 return "";
|
|
|
43 }
|
|
|
44
|
|
|
45 var data = textNode.textContent;
|
|
|
46
|
|
|
47 // Sometimes the offset can be at the 'length' of the data.
|
|
|
48 // It might be a bug with this 'experimental' feature
|
|
|
49 // Compensate for this below
|
|
|
50 if (offset >= data.length) {
|
|
|
51 offset = data.length - 1;
|
|
|
52 }
|
|
|
53
|
|
|
54 // Ignore the cursor on spaces - these aren't words
|
|
|
55 if (isW(data[offset])) {
|
|
|
56 return "";
|
|
|
57 }
|
|
|
58
|
|
|
59 // Scan behind the current character until whitespace is found, or beginning
|
|
|
60 i = begin = end = offset;
|
|
|
61 while (i > 0 && !isW(data[i - 1])) {
|
|
|
62 i--;
|
|
|
63 }
|
|
|
64 begin = i;
|
|
|
65
|
|
|
66 // Scan ahead of the current character until whitespace is found, or end
|
|
|
67 i = offset;
|
|
|
68 while (i < data.length - 1 && !isW(data[i + 1])) {
|
|
|
69 i++;
|
|
|
70 }
|
|
|
71 end = i;
|
|
|
72
|
|
|
73 // This is our temporary word
|
|
|
74 var word = data.substring(begin, end + 1);
|
|
|
75
|
|
|
76 // Demo only
|
|
|
77 showBridge(null, null, null);
|
|
|
78
|
|
|
79 // If at a node boundary, cross over and see what
|
|
|
80 // the next word is and check if this should be added to our temp word
|
|
|
81 if (end === data.length - 1 || begin === 0) {
|
|
|
82
|
|
|
83 var nextNode = getNextNode(textNode);
|
|
|
84 var prevNode = getPrevNode(textNode);
|
|
|
85
|
|
|
86 // Get the next node text
|
|
|
87 if (end == data.length - 1 && nextNode) {
|
|
|
88 var nextText = nextNode.textContent;
|
|
|
89
|
|
|
90 // Demo only
|
|
|
91 showBridge(word, nextText, null);
|
|
|
92
|
|
|
93 // Add the letters from the next text block until a whitespace, or end
|
|
|
94 i = 0;
|
|
|
95 while (i < nextText.length && !isW(nextText[i])) {
|
|
|
96 word += nextText[i++];
|
|
|
97 }
|
|
|
98
|
|
|
99 } else if (begin === 0 && prevNode) {
|
|
|
100 // Get the previous node text
|
|
|
101 var prevText = prevNode.textContent;
|
|
|
102
|
|
|
103 // Demo only
|
|
|
104 // HST: showBridge(word, null, prevText);
|
|
|
105
|
|
|
106 // Add the letters from the next text block until a whitespace, or end
|
|
|
107 i = prevText.length - 1;
|
|
|
108 while (i >= 0 && !isW(prevText[i])) {
|
|
|
109 word = prevText[i--] + word;
|
|
|
110 }
|
|
|
111 }
|
|
|
112 }
|
|
|
113 return word;
|
|
|
114 }
|
|
|
115
|
|
|
116 // Return the word the cursor is over
|
|
|
117 $hoverText.mousemove(function(e) {
|
|
|
118 var word = getFullWord(e);
|
|
|
119 if (word !== "") {
|
|
|
120 var res=$("#result");
|
|
|
121 var pageX = event.pageX;
|
|
|
122 var pageY = event.pageY;
|
|
|
123 //var parentOffset = jQuery('ul li.large', this).parent().offset();
|
|
|
124 //var relX = pageX - parentOffset.left;
|
|
|
125 //var relY = pageY - parentOffset.top;
|
|
|
126
|
|
|
127 res.css("left",pageX + "px").css("top",pageY + "px");
|
|
|
128 res.text(word);
|
|
|
129 }
|
|
|
130 });
|
|
|
131 });
|
|
|
132
|
|
|
133 // Helper functions
|
|
|
134
|
|
|
135 // Whitespace checker
|
|
|
136 function isW(s) {
|
|
|
137 return /[ \f\n\r\t\v\u00A0\u2028\u2029]/.test(s);
|
|
|
138 }
|
|
|
139
|
|
|
140 // Barrier nodes are BR, DIV, P, PRE, TD, TR, ...
|
|
|
141 function isBarrierNode(node) {
|
|
|
142 return node ? /^(BR|DIV|P|PRE|TD|TR|TABLE)$/i.test(node.nodeName) : true;
|
|
|
143 }
|
|
|
144
|
|
|
145 // Try to find the next adjacent node
|
|
|
146 function getNextNode(node) {
|
|
|
147 var n = null;
|
|
|
148 // Does this node have a sibling?
|
|
|
149 if (node.nextSibling) {
|
|
|
150 n = node.nextSibling;
|
|
|
151
|
|
|
152 // Doe this node's container have a sibling?
|
|
|
153 } else if (node.parentNode && node.parentNode.nextSibling) {
|
|
|
154 n = node.parentNode.nextSibling;
|
|
|
155 }
|
|
|
156 return isBarrierNode(n) ? null : n;
|
|
|
157 }
|
|
|
158
|
|
|
159 // Try to find the prev adjacent node
|
|
|
160 function getPrevNode(node) {
|
|
|
161 var n = null;
|
|
|
162
|
|
|
163 // Does this node have a sibling?
|
|
|
164 if (node.previousSibling) {
|
|
|
165 n = node.previousSibling;
|
|
|
166
|
|
|
167 // Doe this node's container have a sibling?
|
|
|
168 } else if (node.parentNode && node.parentNode.previousSibling) {
|
|
|
169 n = node.parentNode.previousSibling;
|
|
|
170 }
|
|
|
171 return isBarrierNode(n) ? null : n;
|
|
|
172 }
|
|
|
173
|
|
|
174 // REF: http://stackoverflow.com/questions/3127369/how-to-get-selected-textnode-in-contenteditable-div-in-ie
|
|
|
175 function getChildIndex(node) {
|
|
|
176 var i = 0;
|
|
|
177 while( (node = node.previousSibling) ) {
|
|
|
178 i++;
|
|
|
179 }
|
|
|
180 return i;
|
|
|
181 }
|
|
|
182
|
|
|
183 // All this code just to make this work with IE, OTL
|
|
|
184 // REF: http://stackoverflow.com/questions/3127369/how-to-get-selected-textnode-in-contenteditable-div-in-ie
|
|
|
185 function getTextRangeBoundaryPosition(textRange, isStart) {
|
|
|
186 var workingRange = textRange.duplicate();
|
|
|
187 workingRange.collapse(isStart);
|
|
|
188 var containerElement = workingRange.parentElement();
|
|
|
189 var workingNode = document.createElement("span");
|
|
|
190 var comparison, workingComparisonType = isStart ?
|
|
|
191 "StartToStart" : "StartToEnd";
|
|
|
192
|
|
|
193 var boundaryPosition, boundaryNode;
|
|
|
194
|
|
|
195 // Move the working range through the container's children, starting at
|
|
|
196 // the end and working backwards, until the working range reaches or goes
|
|
|
197 // past the boundary we're interested in
|
|
|
198 do {
|
|
|
199 containerElement.insertBefore(workingNode, workingNode.previousSibling);
|
|
|
200 workingRange.moveToElementText(workingNode);
|
|
|
201 } while ( (comparison = workingRange.compareEndPoints(
|
|
|
202 workingComparisonType, textRange)) > 0 && workingNode.previousSibling);
|
|
|
203
|
|
|
204 // We've now reached or gone past the boundary of the text range we're
|
|
|
205 // interested in so have identified the node we want
|
|
|
206 boundaryNode = workingNode.nextSibling;
|
|
|
207 if (comparison == -1 && boundaryNode) {
|
|
|
208 // This must be a data node (text, comment, cdata) since we've overshot.
|
|
|
209 // The working range is collapsed at the start of the node containing
|
|
|
210 // the text range's boundary, so we move the end of the working range
|
|
|
211 // to the boundary point and measure the length of its text to get
|
|
|
212 // the boundary's offset within the node
|
|
|
213 workingRange.setEndPoint(isStart ? "EndToStart" : "EndToEnd", textRange);
|
|
|
214
|
|
|
215 boundaryPosition = {
|
|
|
216 node: boundaryNode,
|
|
|
217 offset: workingRange.text.length
|
|
|
218 };
|
|
|
219 } else {
|
|
|
220 // We've hit the boundary exactly, so this must be an element
|
|
|
221 boundaryPosition = {
|
|
|
222 node: containerElement,
|
|
|
223 offset: getChildIndex(workingNode)
|
|
|
224 };
|
|
|
225 }
|
|
|
226
|
|
|
227 // Clean up
|
|
|
228 workingNode.parentNode.removeChild(workingNode);
|
|
|
229
|
|
|
230 return boundaryPosition;
|
|
|
231 }
|
|
|
232
|
|
|
233 // DEMO-ONLY code - this shows how the word is recombined across boundaries
|
|
|
234 function showBridge(word, nextText, prevText) {
|
|
|
235 if (nextText) {
|
|
|
236 $("#bridge").html("<span class=\"word\">" + word + "</span> | " + nextText.substring(0, 20) + "...").show();
|
|
|
237 } else if (prevText) {
|
|
|
238 $("#bridge").html("..." + prevText.substring(prevText.length - 20, prevText.length) + " | <span class=\"word\">" + word + "</span>").show();
|
|
|
239 } else {
|
|
|
240 $("#bridge").hide();
|
|
|
241 }
|
|
|
242 }
|
