-
-
Save visnup/3456262 to your computer and use it in GitHub Desktop.
IE8 equivalent of HTML5/W3C Range object's startContainer,startOffset,endContainer and endOffset properties
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function selectionPolyfill(window, document) { | |
| if (window.getSelection || !document.selection) return; | |
| // convert an IE TextRange to a W3C one | |
| function convert(range, startOrEnd) { | |
| var point = range.duplicate() | |
| , result = {}; | |
| // point is either the start or end of the range | |
| point.collapse(startOrEnd); | |
| var span = document.createElement('span') | |
| , cursor = document.body.createTextRange() | |
| , parent = point.parentElement(); | |
| // `point`'s `parentElement` is the first full-fledged element node above | |
| // us in the hierarchy. everything between its boundaries and `point` is an | |
| // inline element. insert an empty span inside the parent element and keep | |
| // moving it back until its gets to the left of `point`. | |
| parent.appendChild(span); | |
| cursor.moveToElementText(span); | |
| while (cursor.compareEndPoints('StartToStart', point) > 0 && span.previousSibling) { | |
| parent.insertBefore(span, span.previousSibling); | |
| cursor.moveToElementText(span); | |
| } | |
| // that means `span`'s `nextSibling` is point's text node container. | |
| result.container = span.nextSibling; | |
| // extend our cursor out from the beginning of `point`'s text node to | |
| // `point` and use the text length to find its offset. | |
| cursor.setEndPoint('EndToStart', point); | |
| result.offset = cursor.text.length; | |
| parent.removeChild(span); | |
| return result; | |
| } | |
| window.getSelection = function() { | |
| var range = document.selection.createRange() | |
| , start = convert(range, true) | |
| , end = convert(range, false); | |
| return { | |
| rangeCount: 1, | |
| getRangeAt: function() { | |
| return { | |
| commonAncestorContainer: range.parentElement(), | |
| startContainer: start.container, | |
| startOffset: start.offset, | |
| endContainer: end.container, | |
| endOffset: end.offset | |
| }; | |
| } | |
| }; | |
| }; | |
| })(window, document); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style type="text/css"> | |
| #text { float: left; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="text"> | |
| Select some text: | |
| <p> | |
| `Twas brillig, and the slithy toves<br/> | |
| Did gyre and gimble in the wabe:<br/> | |
| All mimsy were the borogoves,<br/> | |
| And the mome raths outgrabe. | |
| </p> | |
| <p> | |
| "Beware the Jabberwock, my son!<br/> | |
| The jaws that bite, the claws that catch!<br/> | |
| Beware the Jubjub bird, and shun<br/> | |
| The frumious Bandersnatch!" | |
| </p> | |
| <p> | |
| He took his vorpal sword in hand:<br/> | |
| Long time the manxome foe he sought --<br/> | |
| So rested he by the Tumtum tree,<br/> | |
| And stood awhile in thought. | |
| </p> | |
| <p> | |
| And, as in uffish thought he stood,<br/> | |
| The Jabberwock, with eyes of flame,<br/> | |
| Came whiffling through the tulgey wood,<br/> | |
| And burbled as it came! | |
| </p> | |
| <p> | |
| One, two! One, two! And through and through<br/> | |
| The vorpal blade went snicker-snack!<br/> | |
| He left it dead, and with its head<br/> | |
| He went galumphing back. | |
| </p> | |
| <p> | |
| "And, has thou slain the Jabberwock?<br/> | |
| Come to my arms, my beamish boy!<br/> | |
| O frabjous day! Callooh! Callay!'<br/> | |
| He chortled in his joy. | |
| </p> | |
| <p> | |
| `Twas brillig, and the slithy toves<br/> | |
| Did gyre and gimble in the wabe;<br/> | |
| All mimsy were the borogoves,<br/> | |
| And the mome raths outgrabe. | |
| </p> | |
| </div> | |
| <div id="output"></div> | |
| <script type="text/javascript" src="selection.js"></script> | |
| <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| $(function() { | |
| $(document).on('mouseup', function() { | |
| var selection = window.getSelection(); | |
| if (selection.rangeCount > 0) { | |
| var range = selection.getRangeAt(0) | |
| , ancestor = range.commonAncestorContainer | |
| , output = [ | |
| '<br/>rangeCount: ', | |
| selection.rangeCount, | |
| '<br/>commonAncestorContainer: ', | |
| ancestor.tagType == 3 ? 'TEXT' : ancestor.tagName, | |
| '<br/>startContainer: ', | |
| range.startContainer.data, | |
| '<br/>startOffset: ', | |
| range.startOffset, | |
| '<br/>endContainer: ', | |
| range.endContainer.data, | |
| '<br/>endOffset: ', | |
| range.endOffset | |
| ]; | |
| $('#output').html(output.join(' ')); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment