X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/b9166b62220208f49bfd3521e547d60d377ab7c1..049c5959e33d29e4c0044c235d291144d49d3c45:/src/redakcja/static/js/wiki/caret.js?ds=sidebyside diff --git a/src/redakcja/static/js/wiki/caret.js b/src/redakcja/static/js/wiki/caret.js index 8b3cbd84..97336f98 100644 --- a/src/redakcja/static/js/wiki/caret.js +++ b/src/redakcja/static/js/wiki/caret.js @@ -3,37 +3,45 @@ class Caret { let self = this; self.view = view; self.singleClick = false; - - let caret = this.element = $(''); - + + let caret = this.element = $(''); + // When user writes into caret, add it to the document. $('textarea', caret).on('input', function() { let v = $(this).val(); $(this).val(''); self.insertChar(v); - + }); - + // On click on x-node element, set caret position. self.view.on('click', '*[x-node]', function(e) { - if (e.redakcja_caret_inserted) return; - e.redakcja_caret_inserted = true; - + if (e.redakcja_caret_ignore) return; + e.redakcja_caret_ignore = true; + if (self.singleClick) { self.singleClick = false; return; } - + self.detach(); - + var selection = window.getSelection(); if (!selection.isCollapsed) return; - + var anchorNode = selection.anchorNode; + if (anchorNode.nodeType != Node.TEXT_NODE) return; + // This selection is not from this click. Ignore it. + if (anchorNode.parentNode != e.target) return; + // Is selection still inside a node? + if (!$(anchorNode).closest('[x-node]').length) return; + if ($(anchorNode).parents('[x-annotation-box]').not('.editing').length) return; + self.singleClick = true; setTimeout(function() { if (self.singleClick) { + $.wiki.activePerspective().flush(); self.element.insertBefore( - selection.anchorNode.splitText( + anchorNode.splitText( selection.anchorOffset ) ) @@ -41,27 +49,25 @@ class Caret { } self.singleClick = false; }, 250); - + }); - + self.element.on('keydown', function(e) { - console.log('KEY'); - // TODO: // delete selection? - + // cases: // we are in (no going up) // we are in (can go up) // we are next to (can go inside) - + switch (e.key) { case "ArrowRight": if (e.shiftKey) { self.detach(); return; } - + self.moveRight(); break; case "ArrowLeft": @@ -69,7 +75,7 @@ class Caret { self.detach(); return; } - + self.moveLeft(); break; case "ArrowUp": @@ -98,14 +104,12 @@ class Caret { } }) } - + get attached() { return this.element.parent().length; } - + detach() { - console.log(this.view); - let p; if (this.attached) { p = this.element.parent()[0] @@ -113,45 +117,62 @@ class Caret { p.normalize() } } - + focus() { $("textarea", self.element).focus(); } - + normalize() { this.element.parent()[0].normalize(); } - + + insert(elem) { + elem.insertBefore(this.element); + } + insertChar(ch) { - $(document.createTextNode(ch)).insertBefore(this.element); + this.insert( + $(document.createTextNode(ch)) + ); this.normalize(); } - + deleteBefore() { let contents = this.element.parent().contents(); // Find the text before caret. let textBefore = contents[contents.index(this.element) - 1]; - + // Should be text, but what if not? textBefore.textContent = textBefore.textContent.substr(0, textBefore.textContent.length - 1); this.normalize(); - + } - + deleteAfter() { let contents = this.element.parent().contents(); // Find the text after caret. let textAfter = contents[contents.index(this.element) + 1]; textAfter.textContent = textAfter.textContent.substr(1); } - + splitBlock() { let splitter = this.element; let parent, newParent, splitIndex, index; - + while (!splitter.is('div[x-node]')) { parent = splitter.parent(); splitIndex = parent.contents().index(splitter); + + if (parent.is('[x-annotation-box]')) { + // We're splitting inside an inline-style annotation. + // Convert into a block-style annotation now. + let p = $('
'); + parent.contents().appendTo(p); + parent.empty(); + parent.append(p); + parent = p; + } + newParent = parent.clone(); index = parent.contents().length - 1; while (index >= splitIndex) { @@ -159,17 +180,15 @@ class Caret { --index; } while (index >= 0) { - console.log(newParent, index); parent.contents()[index].remove(); -- index; } newParent.insertBefore(parent); - - console.log('split', parent); + splitter = parent; } } - + moveLeft() { this.move({ move: -1, @@ -179,7 +198,7 @@ class Caret { noSplitTarget: (t) => {return t.splitText(t.length);}, }) } - + moveRight() { this.move({ move: 1, @@ -189,22 +208,24 @@ class Caret { noSplitTarget: (t) => {return t;}, }) } - + move(opts) { if (!this.attached) return; - + + $.wiki.activePerspective().flush(); + this.normalize(); - + let contents = this.element.parent().contents(); let index = contents.index(this.element); let target, moved, oldparent; - + let parent = this.element.parent()[0]; - + if (opts.edge(index, contents.length)) { // We're at the end -- what to do? // can we go up? - + if (parent.nodeName == 'EM') { oldparent = parent; parent = parent.parentNode; @@ -212,22 +233,22 @@ class Caret { index = contents.index(oldparent); } } - + index += opts.move; target = contents[index]; moved = false; - - while (target.nodeType == 1) { + + while (target !== undefined && target.nodeType == Node.ELEMENT_NODE) { // we've encountered a node. // can we go inside? - + if (target.nodeName == 'EM') { // enter parent = $(target); contents = parent.contents(); index = opts.enter(contents.length); target = contents[index]; - + // what if it has no elements? } else { // skip @@ -235,19 +256,19 @@ class Caret { target = contents[index]; moved = true; } - + // if editable? // what if editable but empty? - + } - - if (target.nodeType == 3) { + + if (target !== undefined && target.nodeType == Node.TEXT_NODE ) { if (!moved) { target = opts.splitTarget(target); } else { target = opts.noSplitTarget(target); } - + this.element.insertBefore(target); } this.normalize();