X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/e54a6bc1fa5737591083883e7e610745e2eec168..ab1a529433f11e19769abf9bb1aa2c8c3194abeb:/modules/documentCanvas/canvas/canvas.js?ds=sidebyside diff --git a/modules/documentCanvas/canvas/canvas.js b/modules/documentCanvas/canvas/canvas.js index 0449a9a..6f4e089 100644 --- a/modules/documentCanvas/canvas/canvas.js +++ b/modules/documentCanvas/canvas/canvas.js @@ -38,17 +38,22 @@ $.extend(Canvas.prototype, { tag: currentTag.prop('tagName').toLowerCase(), klass: currentTag.attr('class'), meta: meta, - others: others + others: others, + rawChildren: currentTag.contents() }); - element.dom().append(currentTag.contents()); ['orig-before', 'orig-after', 'orig-begin', 'orig-end'].forEach(function(attr) { element.data(attr, ''); }); return element.dom(); }); - var FIRST_CONTENT_INDEX = 1; + var FIRST_CONTENT_INDEX = 0; + + // @@ TODO - refactor! + var getNode = function(element) { + return element.children('[document-element-content]'); + } this.wrapper.find(':not(iframe)').addBack().contents() .filter(function() {return this.nodeType === Node.TEXT_NODE}) @@ -60,8 +65,8 @@ $.extend(Canvas.prototype, { text = {original: el.text(), trimmed: $.trim(el.text())}, elParent = el.parent(), hasSpanParent = elParent.attr('wlxml-tag') === 'span', - hasSpanBefore = el.prev().length > 0 && $(el.prev()[0]).attr('wlxml-tag') === 'span', - hasSpanAfter = el.next().length > 0 && $(el.next()[0]).attr('wlxml-tag') === 'span'; + hasSpanBefore = el.prev().length > 0 && getNode($(el.prev()[0])).attr('wlxml-tag') === 'span', + hasSpanAfter = el.next().length > 0 && getNode($(el.next()[0])).attr('wlxml-tag') === 'span'; if(el.parent().hasClass('canvas-widget')) return true; // continue @@ -74,10 +79,10 @@ $.extend(Canvas.prototype, { target, key; if(where === 'above') { - target = prev ? $(prev) : elParent; + target = prev ? $(prev) : elParent.parent(); key = prev ? 'orig-after' : 'orig-begin'; } else if(where === 'below') { - target = next ? $(next) : elParent; + target = next ? $(next) : elParent.parent(); key = next ? 'orig-before' : 'orig-end'; } else { throw new Object;} @@ -93,7 +98,7 @@ $.extend(Canvas.prototype, { + text.trimmed + (endSpace && (hasSpanParent || hasSpanAfter) ? ' ' : ''); } else { - if(text.trimmed.length === 0 && text.original.length > 0 && elParent.contents().length === 2) + if(text.trimmed.length === 0 && text.original.length > 0 && elParent.contents().length === 1) text.transformed = ' '; } @@ -164,8 +169,23 @@ $.extend(Canvas.prototype, { } this.wrapper.on('keyup', function(e) { - if(e.which >= 37 && e.which <= 40) - canvas.setCurrentElement(canvas.getCursor().getPosition().element, {caretTo: false}) + if(e.which >= 37 && e.which <= 40) { + var element = canvas.getCursor().getPosition().element, + caretTo = false; + if(!element) { + // Chrome hack + var direction; + if(e.which === (KEYS.ARROW_LEFT || KEYS.ARROW_DOWN)) { + direction = 'above'; + caretTo = 'end'; + } else { + direction = 'below'; + caretTo = 'start'; + } + element = canvas.getDocumentElement(utils.nearestInDocumentOrder('[document-text-element]', direction, window.getSelection().focusNode)); + } + canvas.setCurrentElement(element, {caretTo: caretTo}); + } }); this.wrapper.on('keydown', function(e) { @@ -201,9 +221,9 @@ $.extend(Canvas.prototype, { } }); - this.wrapper.on('click', '[wlxml-tag], [wlxml-text]', function(e) { + this.wrapper.on('click', '[document-node-element], [document-text-element]', function(e) { e.stopPropagation(); - canvas.setCurrentElement(canvas.getDocumentElement(e.target), {caretTo: false}); + canvas.setCurrentElement(canvas.getDocumentElement(e.currentTarget), {caretTo: false}); }); var observer = new MutationObserver(function(mutations) { @@ -215,8 +235,9 @@ $.extend(Canvas.prototype, { var config = { attributes: false, childList: false, characterData: true, subtree: true, characterDataOldValue: true}; observer.observe(this.d[0], config); - this.wrapper.on('mouseover', '[wlxml-tag], [wlxml-text]', function(e) { - var el = canvas.getDocumentElement(e.target); + + this.wrapper.on('mouseover', '[document-node-element], [document-text-element]', function(e) { + var el = canvas.getDocumentElement(e.currentTarget); if(!el) return; e.stopPropagation(); @@ -224,8 +245,8 @@ $.extend(Canvas.prototype, { el = el.parent(); el.toggleLabel(true); }); - this.wrapper.on('mouseout', '[wlxml-tag], [wlxml-text]', function(e) { - var el = canvas.getDocumentElement(e.target); + this.wrapper.on('mouseout', '[document-node-element], [document-text-element]', function(e) { + var el = canvas.getDocumentElement(e.currentTarget); if(!el) return; e.stopPropagation(); @@ -300,19 +321,9 @@ $.extend(Canvas.prototype, { list: {}, - - - highlightElement: function(element) { - this.wrapper.find('.highlighted-element').removeClass('highlighted-element'); - element.dom().addClass('highlighted-element'); - }, - - dimElement: function(element) { - element.dom().removeClass('highlighted-element'); - }, getCurrentNodeElement: function() { - return this.getDocumentElement(this.wrapper.find('.current-node-element')[0]); + return this.getDocumentElement(this.wrapper.find('.current-node-element').parent()[0]); }, getCurrentTextElement: function() { @@ -340,7 +351,7 @@ $.extend(Canvas.prototype, { element.dom().addClass('current-text-element'); } else { this.wrapper.find('.current-node-element').removeClass('current-node-element') - element.dom().addClass('current-node-element'); + element._container().addClass('current-node-element'); this.publisher('currentElementChanged', element); } }.bind(this);