|
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
|
|
117
|
4 //var $hoverText = $("#hoverText");
|
|
115
|
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
|
117 $("p").click(function(e) {
|
|
115
|
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;
|
|
116
|
126 res.css("visibility","visible");
|
|
117
|
127 res.css("left",(pageX-10) + "px").css("top",(pageY-15) + "px");
|
|
115
|
128 res.text(word);
|
|
|
129 }
|
|
116
|
130 });
|
|
117
|
131 $("#result").mousemove(function(e) {
|
|
116
|
132 $("#result").css("visibility","hidden");
|
|
|
133 });
|
|
117
|
134 $("#result").click(function(e) {
|
|
|
135 alert(e.target.innerHTML + " clicked");
|
|
|
136 $("#result").css("visibility","hidden");
|
|
|
137 });
|
|
|
138 // $("p").mousemove(function(e) {
|
|
|
139 // $("#result").css("visibility","hidden");
|
|
|
140 // });
|
|
115
|
141 });
|
|
|
142
|
|
|
143 // Helper functions
|
|
|
144
|
|
|
145 // Whitespace checker
|
|
|
146 function isW(s) {
|
|
|
147 return /[ \f\n\r\t\v\u00A0\u2028\u2029]/.test(s);
|
|
|
148 }
|
|
|
149
|
|
|
150 // Barrier nodes are BR, DIV, P, PRE, TD, TR, ...
|
|
|
151 function isBarrierNode(node) {
|
|
|
152 return node ? /^(BR|DIV|P|PRE|TD|TR|TABLE)$/i.test(node.nodeName) : true;
|
|
|
153 }
|
|
|
154
|
|
|
155 // Try to find the next adjacent node
|
|
|
156 function getNextNode(node) {
|
|
|
157 var n = null;
|
|
|
158 // Does this node have a sibling?
|
|
|
159 if (node.nextSibling) {
|
|
|
160 n = node.nextSibling;
|
|
|
161
|
|
|
162 // Doe this node's container have a sibling?
|
|
|
163 } else if (node.parentNode && node.parentNode.nextSibling) {
|
|
|
164 n = node.parentNode.nextSibling;
|
|
|
165 }
|
|
|
166 return isBarrierNode(n) ? null : n;
|
|
|
167 }
|
|
|
168
|
|
|
169 // Try to find the prev adjacent node
|
|
|
170 function getPrevNode(node) {
|
|
|
171 var n = null;
|
|
|
172
|
|
|
173 // Does this node have a sibling?
|
|
|
174 if (node.previousSibling) {
|
|
|
175 n = node.previousSibling;
|
|
|
176
|
|
|
177 // Doe this node's container have a sibling?
|
|
|
178 } else if (node.parentNode && node.parentNode.previousSibling) {
|
|
|
179 n = node.parentNode.previousSibling;
|
|
|
180 }
|
|
|
181 return isBarrierNode(n) ? null : n;
|
|
|
182 }
|
|
|
183
|
|
|
184 // REF: http://stackoverflow.com/questions/3127369/how-to-get-selected-textnode-in-contenteditable-div-in-ie
|
|
|
185 function getChildIndex(node) {
|
|
|
186 var i = 0;
|
|
|
187 while( (node = node.previousSibling) ) {
|
|
|
188 i++;
|
|
|
189 }
|
|
|
190 return i;
|
|
|
191 }
|
|
|
192
|
|
|
193 // All this code just to make this work with IE, OTL
|
|
|
194 // REF: http://stackoverflow.com/questions/3127369/how-to-get-selected-textnode-in-contenteditable-div-in-ie
|
|
|
195 function getTextRangeBoundaryPosition(textRange, isStart) {
|
|
|
196 var workingRange = textRange.duplicate();
|
|
|
197 workingRange.collapse(isStart);
|
|
|
198 var containerElement = workingRange.parentElement();
|
|
|
199 var workingNode = document.createElement("span");
|
|
|
200 var comparison, workingComparisonType = isStart ?
|
|
|
201 "StartToStart" : "StartToEnd";
|
|
|
202
|
|
|
203 var boundaryPosition, boundaryNode;
|
|
|
204
|
|
|
205 // Move the working range through the container's children, starting at
|
|
|
206 // the end and working backwards, until the working range reaches or goes
|
|
|
207 // past the boundary we're interested in
|
|
|
208 do {
|
|
|
209 containerElement.insertBefore(workingNode, workingNode.previousSibling);
|
|
|
210 workingRange.moveToElementText(workingNode);
|
|
|
211 } while ( (comparison = workingRange.compareEndPoints(
|
|
|
212 workingComparisonType, textRange)) > 0 && workingNode.previousSibling);
|
|
|
213
|
|
|
214 // We've now reached or gone past the boundary of the text range we're
|
|
|
215 // interested in so have identified the node we want
|
|
|
216 boundaryNode = workingNode.nextSibling;
|
|
|
217 if (comparison == -1 && boundaryNode) {
|
|
|
218 // This must be a data node (text, comment, cdata) since we've overshot.
|
|
|
219 // The working range is collapsed at the start of the node containing
|
|
|
220 // the text range's boundary, so we move the end of the working range
|
|
|
221 // to the boundary point and measure the length of its text to get
|
|
|
222 // the boundary's offset within the node
|
|
|
223 workingRange.setEndPoint(isStart ? "EndToStart" : "EndToEnd", textRange);
|
|
|
224
|
|
|
225 boundaryPosition = {
|
|
|
226 node: boundaryNode,
|
|
|
227 offset: workingRange.text.length
|
|
|
228 };
|
|
|
229 } else {
|
|
|
230 // We've hit the boundary exactly, so this must be an element
|
|
|
231 boundaryPosition = {
|
|
|
232 node: containerElement,
|
|
|
233 offset: getChildIndex(workingNode)
|
|
|
234 };
|
|
|
235 }
|
|
|
236
|
|
|
237 // Clean up
|
|
|
238 workingNode.parentNode.removeChild(workingNode);
|
|
|
239
|
|
|
240 return boundaryPosition;
|
|
|
241 }
|
|
|
242
|
|
|
243 // DEMO-ONLY code - this shows how the word is recombined across boundaries
|
|
|
244 function showBridge(word, nextText, prevText) {
|
|
|
245 if (nextText) {
|
|
|
246 $("#bridge").html("<span class=\"word\">" + word + "</span> | " + nextText.substring(0, 20) + "...").show();
|
|
|
247 } else if (prevText) {
|
|
|
248 $("#bridge").html("..." + prevText.substring(prevText.length - 20, prevText.length) + " | <span class=\"word\">" + word + "</span>").show();
|
|
|
249 } else {
|
|
|
250 $("#bridge").hide();
|
|
|
251 }
|
|
|
252 }
|
