e87738b0cac8f1ca37b108014fad8d9c7dd2635d
[wolnelektury.git] / apps / wolnelektury_core / static / js / ierange-m2.js
1 /*
2   DOM Ranges for Internet Explorer (m2)
3   
4   Copyright (c) 2009 Tim Cameron Ryan
5   Released under the MIT/X License
6  */
7  
8 /*
9   Range reference:
10     http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html
11     http://mxr.mozilla.org/mozilla-central/source/content/base/src/nsRange.cpp
12     https://developer.mozilla.org/En/DOM:Range
13   Selection reference:
14     http://trac.webkit.org/browser/trunk/WebCore/page/DOMSelection.cpp
15   TextRange reference:
16     http://msdn.microsoft.com/en-us/library/ms535872.aspx
17   Other links:
18     http://jorgenhorstink.nl/test/javascript/range/range.js
19     http://jorgenhorstink.nl/2006/07/05/dom-range-implementation-in-ecmascript-completed/
20     http://dylanschiemann.com/articles/dom2Range/dom2RangeExamples.html
21 */
22
23 //[TODO] better exception support
24
25 (function () {  // sandbox
26
27 /*
28   DOM functions
29  */
30
31 var DOMUtils = {
32         findChildPosition: function (node) {
33                 for (var i = 0; node = node.previousSibling; i++)
34                         continue;
35                 return i;
36         },
37         isDataNode: function (node) {
38                 return node && node.nodeValue !== null && node.data !== null;
39         },
40         isAncestorOf: function (parent, node) {
41                 return !DOMUtils.isDataNode(parent) &&
42                     (parent.contains(DOMUtils.isDataNode(node) ? node.parentNode : node) ||                 
43                     node.parentNode == parent);
44         },
45         isAncestorOrSelf: function (root, node) {
46                 return DOMUtils.isAncestorOf(root, node) || root == node;
47         },
48         findClosestAncestor: function (root, node) {
49                 if (DOMUtils.isAncestorOf(root, node))
50                         while (node && node.parentNode != root)
51                                 node = node.parentNode;
52                 return node;
53         },
54         getNodeLength: function (node) {
55                 return DOMUtils.isDataNode(node) ? node.length : node.childNodes.length;
56         },
57         splitDataNode: function (node, offset) {
58                 if (!DOMUtils.isDataNode(node))
59                         return false;
60                 var newNode = node.cloneNode(false);
61                 node.deleteData(offset, node.length);
62                 newNode.deleteData(0, offset);
63                 node.parentNode.insertBefore(newNode, node.nextSibling);
64         }
65 };
66
67 /*
68   Text Range utilities
69   functions to simplify text range manipulation in ie
70  */
71
72 var TextRangeUtils = {
73         convertToDOMRange: function (textRange, document) {
74                 function adoptBoundary(domRange, textRange, bStart) {
75                         // iterate backwards through parent element to find anchor location
76                         var cursorNode = document.createElement('a'), cursor = textRange.duplicate();
77                         cursor.collapse(bStart);
78                         var parent = cursor.parentElement();
79                         do {
80                                 parent.insertBefore(cursorNode, cursorNode.previousSibling);
81                                 cursor.moveToElementText(cursorNode);
82                         } while (cursor.compareEndPoints(bStart ? 'StartToStart' : 'StartToEnd', textRange) > 0 && cursorNode.previousSibling);
83
84                         // when we exceed or meet the cursor, we've found the node
85                         if (cursor.compareEndPoints(bStart ? 'StartToStart' : 'StartToEnd', textRange) == -1 && cursorNode.nextSibling) {
86                                 // data node
87                                 cursor.setEndPoint(bStart ? 'EndToStart' : 'EndToEnd', textRange);
88                                 domRange[bStart ? 'setStart' : 'setEnd'](cursorNode.nextSibling, cursor.text.length);
89                         } else {
90                                 // element
91                                 domRange[bStart ? 'setStartBefore' : 'setEndBefore'](cursorNode);
92                         }
93                         cursorNode.parentNode.removeChild(cursorNode);
94                 }
95         
96                 // return a DOM range
97                 var domRange = new DOMRange(document);
98                 adoptBoundary(domRange, textRange, true);
99                 adoptBoundary(domRange, textRange, false);
100                 return domRange;
101         },
102
103         convertFromDOMRange: function (domRange) {
104                 function adoptEndPoint(textRange, domRange, bStart) {
105                         // find anchor node and offset
106                         var container = domRange[bStart ? 'startContainer' : 'endContainer'];
107                         var offset = domRange[bStart ? 'startOffset' : 'endOffset'], textOffset = 0;
108                         var anchorNode = DOMUtils.isDataNode(container) ? container : container.childNodes[offset];
109                         var anchorParent = DOMUtils.isDataNode(container) ? container.parentNode : container;
110                         // visible data nodes need a text offset
111                         if (container.nodeType == 3 || container.nodeType == 4)
112                                 textOffset = offset;
113
114                         // create a cursor element node to position range (since we can't select text nodes)
115                         var cursorNode = domRange._document.createElement('a');
116                         anchorParent.insertBefore(cursorNode, anchorNode);
117                         var cursor = domRange._document.body.createTextRange();
118                         cursor.moveToElementText(cursorNode);
119                         cursorNode.parentNode.removeChild(cursorNode);
120                         // move range
121                         textRange.setEndPoint(bStart ? 'StartToStart' : 'EndToStart', cursor);
122                         textRange[bStart ? 'moveStart' : 'moveEnd']('character', textOffset);
123                 }
124                 
125                 // return an IE text range
126                 var textRange = domRange._document.body.createTextRange();
127                 adoptEndPoint(textRange, domRange, true);
128                 adoptEndPoint(textRange, domRange, false);
129                 return textRange;
130         }
131 };
132
133 /*
134   DOM Range
135  */
136  
137 function DOMRange(document) {
138         // save document parameter
139         this._document = document;
140         
141         // initialize range
142 //[TODO] this should be located at document[0], document[0]
143         this.startContainer = this.endContainer = document.body;
144         this.endOffset = DOMUtils.getNodeLength(document.body);
145 }
146 DOMRange.START_TO_START = 0;
147 DOMRange.START_TO_END = 1;
148 DOMRange.END_TO_END = 2;
149 DOMRange.END_TO_START = 3;
150
151 DOMRange.prototype = {
152         // public properties
153         startContainer: null,
154         startOffset: 0,
155         endContainer: null,
156         endOffset: 0,
157         commonAncestorContainer: null,
158         collapsed: false,
159         // private properties
160         _document: null,
161         
162         // private methods
163         _refreshProperties: function () {
164                 // collapsed attribute
165                 this.collapsed = (this.startContainer == this.endContainer && this.startOffset == this.endOffset);
166                 // find common ancestor
167                 var node = this.startContainer;
168                 while (node && node != this.endContainer && !DOMUtils.isAncestorOf(node, this.endContainer))
169                         node = node.parentNode;
170                 this.commonAncestorContainer = node;
171         },
172         
173         // range methods
174 //[TODO] collapse if start is after end, end is before start
175         setStart: function(container, offset) {
176                 this.startContainer = container;
177                 this.startOffset = offset;
178                 this._refreshProperties();
179         },
180         setEnd: function(container, offset) {
181                 this.endContainer = container;
182                 this.endOffset = offset;
183                 this._refreshProperties();
184         },
185         setStartBefore: function (refNode) {
186                 // set start to beore this node
187                 this.setStart(refNode.parentNode, DOMUtils.findChildPosition(refNode));
188         },
189         setStartAfter: function (refNode) {
190                 // select next sibling
191                 this.setStart(refNode.parentNode, DOMUtils.findChildPosition(refNode) + 1);
192         },
193         setEndBefore: function (refNode) {
194                 // set end to beore this node
195                 this.setEnd(refNode.parentNode, DOMUtils.findChildPosition(refNode));
196         },
197         setEndAfter: function (refNode) {
198                 // select next sibling
199                 this.setEnd(refNode.parentNode, DOMUtils.findChildPosition(refNode) + 1);
200         },
201         selectNode: function (refNode) {
202                 this.setStartBefore(refNode);
203                 this.setEndAfter(refNode);
204         },
205         selectNodeContents: function (refNode) {
206                 this.setStart(refNode, 0);
207                 this.setEnd(refNode, DOMUtils.getNodeLength(refNode));
208         },
209         collapse: function (toStart) {
210                 if (toStart)
211                         this.setEnd(this.startContainer, this.startOffset);
212                 else
213                         this.setStart(this.endContainer, this.endOffset);
214         },
215
216         // editing methods
217         cloneContents: function () {
218                 // clone subtree
219                 return (function cloneSubtree(iterator) {
220                         for (var node, frag = document.createDocumentFragment(); node = iterator.next(); ) {
221                                 node = node.cloneNode(!iterator.hasPartialSubtree());
222                                 if (iterator.hasPartialSubtree())
223                                         node.appendChild(cloneSubtree(iterator.getSubtreeIterator()));
224                                 frag.appendChild(node);
225                         }
226                         return frag;
227                 })(new RangeIterator(this));
228         },
229         extractContents: function () {
230                 // cache range and move anchor points
231                 var range = this.cloneRange();
232                 if (this.startContainer != this.commonAncestorContainer)
233                         this.setStartAfter(DOMUtils.findClosestAncestor(this.commonAncestorContainer, this.startContainer));
234                 this.collapse(true);
235                 // extract range
236                 return (function extractSubtree(iterator) {
237                         for (var node, frag = document.createDocumentFragment(); node = iterator.next(); ) {
238                                 iterator.hasPartialSubtree() ? node = node.cloneNode(false) : iterator.remove();
239                                 if (iterator.hasPartialSubtree())
240                                         node.appendChild(extractSubtree(iterator.getSubtreeIterator()));
241                                 frag.appendChild(node);
242                         }
243                         return frag;
244                 })(new RangeIterator(range));
245         },
246         deleteContents: function () {
247                 // cache range and move anchor points
248                 var range = this.cloneRange();
249                 if (this.startContainer != this.commonAncestorContainer)
250                         this.setStartAfter(DOMUtils.findClosestAncestor(this.commonAncestorContainer, this.startContainer));
251                 this.collapse(true);
252                 // delete range
253                 (function deleteSubtree(iterator) {
254                         while (iterator.next())
255                                 iterator.hasPartialSubtree() ? deleteSubtree(iterator.getSubtreeIterator()) : iterator.remove();
256                 })(new RangeIterator(range));
257         },
258         insertNode: function (newNode) {
259                 // set original anchor and insert node
260                 if (DOMUtils.isDataNode(this.startContainer)) {
261                         DOMUtils.splitDataNode(this.startContainer, this.startOffset);
262                         this.startContainer.parentNode.insertBefore(newNode, this.startContainer.nextSibling);
263                 } else {
264                         this.startContainer.insertBefore(newNode, this.startContainer.childNodes[this.startOffset]);
265                 }
266                 // resync start anchor
267                 this.setStart(this.startContainer, this.startOffset);
268         },
269         surroundContents: function (newNode) {
270                 // extract and surround contents
271                 var content = this.extractContents();
272                 this.insertNode(newNode);
273                 newNode.appendChild(content);
274                 this.selectNode(newNode);
275         },
276
277         // other methods
278         compareBoundaryPoints: function (how, sourceRange) {
279                 // get anchors
280                 var containerA, offsetA, containerB, offsetB;
281                 switch (how) {
282                     case DOMRange.START_TO_START:
283                     case DOMRange.START_TO_END:
284                         containerA = this.startContainer;
285                         offsetA = this.startOffset;
286                         break;
287                     case DOMRange.END_TO_END:
288                     case DOMRange.END_TO_START:
289                         containerA = this.endContainer;
290                         offsetA = this.endOffset;
291                         break;
292                 }
293                 switch (how) {
294                     case DOMRange.START_TO_START:
295                     case DOMRange.END_TO_START:
296                         containerB = sourceRange.startContainer;
297                         offsetB = sourceRange.startOffset;
298                         break;
299                     case DOMRange.START_TO_END:
300                     case DOMRange.END_TO_END:
301                         containerB = sourceRange.endContainer;
302                         offsetB = sourceRange.endOffset;
303                         break;
304                 }
305                 
306                 // compare
307                 return containerA.sourceIndex < containerB.sourceIndex ? -1 :
308                     containerA.sourceIndex == containerB.sourceIndex ?
309                         offsetA < offsetB ? -1 : offsetA == offsetB ? 0 : 1
310                         : 1;
311         },
312         cloneRange: function () {
313                 // return cloned range
314                 var range = new DOMRange(this._document);
315                 range.setStart(this.startContainer, this.startOffset);
316                 range.setEnd(this.endContainer, this.endOffset);
317                 return range;
318         },
319         detach: function () {
320 //[TODO] Releases Range from use to improve performance. 
321         },
322         toString: function () {
323                 return TextRangeUtils.convertFromDOMRange(this).text;
324         },
325         createContextualFragment: function (tagString) {
326                 // parse the tag string in a context node
327                 var content = (DOMUtils.isDataNode(this.startContainer) ? this.startContainer.parentNode : this.startContainer).cloneNode(false);
328                 content.innerHTML = tagString;
329                 // return a document fragment from the created node
330                 for (var fragment = this._document.createDocumentFragment(); content.firstChild; )
331                         fragment.appendChild(content.firstChild);
332                 return fragment;
333         }
334 };
335
336 /*
337   Range iterator
338  */
339
340 function RangeIterator(range) {
341         this.range = range;
342         if (range.collapsed)
343                 return;
344
345 //[TODO] ensure this works
346         // get anchors
347         var root = range.commonAncestorContainer;
348         this._next = range.startContainer == root && !DOMUtils.isDataNode(range.startContainer) ?
349             range.startContainer.childNodes[range.startOffset] :
350             DOMUtils.findClosestAncestor(root, range.startContainer);
351         this._end = range.endContainer == root && !DOMUtils.isDataNode(range.endContainer) ?
352             range.endContainer.childNodes[range.endOffset] :
353             DOMUtils.findClosestAncestor(root, range.endContainer).nextSibling;
354 }
355
356 RangeIterator.prototype = {
357         // public properties
358         range: null,
359         // private properties
360         _current: null,
361         _next: null,
362         _end: null,
363
364         // public methods
365         hasNext: function () {
366                 return !!this._next;
367         },
368         next: function () {
369                 // move to next node
370                 var current = this._current = this._next;
371                 this._next = this._current && this._current.nextSibling != this._end ?
372                     this._current.nextSibling : null;
373
374                 // check for partial text nodes
375                 if (DOMUtils.isDataNode(this._current)) {
376                         if (this.range.endContainer == this._current)
377                                 (current = current.cloneNode(true)).deleteData(this.range.endOffset, current.length - this.range.endOffset);
378                         if (this.range.startContainer == this._current)
379                                 (current = current.cloneNode(true)).deleteData(0, this.range.startOffset);
380                 }
381                 return current;
382         },
383         remove: function () {
384                 // check for partial text nodes
385                 if (DOMUtils.isDataNode(this._current) &&
386                     (this.range.startContainer == this._current || this.range.endContainer == this._current)) {
387                         var start = this.range.startContainer == this._current ? this.range.startOffset : 0;
388                         var end = this.range.endContainer == this._current ? this.range.endOffset : this._current.length;
389                         this._current.deleteData(start, end - start);
390                 } else
391                         this._current.parentNode.removeChild(this._current);
392         },
393         hasPartialSubtree: function () {
394                 // check if this node be partially selected
395                 return !DOMUtils.isDataNode(this._current) &&
396                     (DOMUtils.isAncestorOrSelf(this._current, this.range.startContainer) ||
397                         DOMUtils.isAncestorOrSelf(this._current, this.range.endContainer));
398         },
399         getSubtreeIterator: function () {
400                 // create a new range
401                 var subRange = new DOMRange(this.range._document);
402                 subRange.selectNodeContents(this._current);
403                 // handle anchor points
404                 if (DOMUtils.isAncestorOrSelf(this._current, this.range.startContainer))
405                         subRange.setStart(this.range.startContainer, this.range.startOffset);
406                 if (DOMUtils.isAncestorOrSelf(this._current, this.range.endContainer))
407                         subRange.setEnd(this.range.endContainer, this.range.endOffset);
408                 // return iterator
409                 return new RangeIterator(subRange);
410         }
411 };
412
413 /*
414   DOM Selection
415  */
416  
417 //[NOTE] This is a very shallow implementation of the Selection object, based on Webkit's
418 // implementation and without redundant features. Complete selection manipulation is still
419 // possible with just removeAllRanges/addRange/getRangeAt.
420
421 function DOMSelection(document) {
422         // save document parameter
423         this._document = document;
424         
425         // add DOM selection handler
426         var selection = this;
427         document.attachEvent('onselectionchange', function () { selection._selectionChangeHandler(); });
428 }
429
430 DOMSelection.prototype = {
431         // public properties
432         rangeCount: 0,
433         // private properties
434         _document: null,
435         
436         // private methods
437         _selectionChangeHandler: function () {
438                 // check if there exists a range
439                 this.rangeCount = this._selectionExists(this._document.selection.createRange()) ? 1 : 0;
440         },
441         _selectionExists: function (textRange) {
442                 // checks if a created text range exists or is an editable cursor
443                 return textRange.compareEndPoints('StartToEnd', textRange) != 0 ||
444                     textRange.parentElement().isContentEditable;
445         },
446         
447         // public methods
448         addRange: function (range) {
449                 // add range or combine with existing range
450                 var selection = this._document.selection.createRange(), textRange = TextRangeUtils.convertFromDOMRange(range);
451                 if (!this._selectionExists(selection))
452                 {
453                         // select range
454                         textRange.select();
455                 }
456                 else
457                 {
458                         // only modify range if it intersects with current range
459                         if (textRange.compareEndPoints('StartToStart', selection) == -1)
460                                 if (textRange.compareEndPoints('StartToEnd', selection) > -1 &&
461                                     textRange.compareEndPoints('EndToEnd', selection) == -1)
462                                         selection.setEndPoint('StartToStart', textRange);
463                         else
464                                 if (textRange.compareEndPoints('EndToStart', selection) < 1 &&
465                                     textRange.compareEndPoints('EndToEnd', selection) > -1)
466                                         selection.setEndPoint('EndToEnd', textRange);
467                         selection.select();
468                 }
469         },
470         removeAllRanges: function () {
471                 // remove all ranges
472                 this._document.selection.empty();
473         },
474         getRangeAt: function (index) {
475                 // return any existing selection, or a cursor position in content editable mode
476                 var textRange = this._document.selection.createRange();
477                 if (this._selectionExists(textRange))
478                         return TextRangeUtils.convertToDOMRange(textRange, this._document);
479                 return null;
480         },
481         toString: function () {
482                 // get selection text
483                 return this._document.selection.createRange().text;
484         }
485 };
486
487 /*
488   scripting hooks
489  */
490
491 document.createRange = function () {
492         return new DOMRange(document);
493 };
494
495 var selection = new DOMSelection(document);
496 window.getSelection = function () {
497         return selection;
498 };
499
500 //[TODO] expose DOMRange/DOMSelection to window.?
501
502 })();