X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/d1825bb5d7358c72956bf30b6e6881fa62d2ba18..f2a4c98c8681e58fb9ee794129ce66ec0b06f0be:/src/editor/modules/documentCanvas/canvas/canvas.js?ds=sidebyside diff --git a/src/editor/modules/documentCanvas/canvas/canvas.js b/src/editor/modules/documentCanvas/canvas/canvas.js index 2c7ddff..cf63c47 100644 --- a/src/editor/modules/documentCanvas/canvas/canvas.js +++ b/src/editor/modules/documentCanvas/canvas/canvas.js @@ -4,14 +4,16 @@ define([ 'libs/backbone', 'modules/documentCanvas/canvas/documentElement', 'modules/documentCanvas/canvas/keyboard', -'modules/documentCanvas/canvas/utils' -], function($, _, Backbone, documentElement, keyboard, utils) { +'modules/documentCanvas/canvas/utils', +'modules/documentCanvas/canvas/wlxmlListener' +], function($, _, Backbone, documentElement, keyboard, utils, wlxmlListener) { 'use strict'; var Canvas = function(wlxmlDocument, publisher) { this.eventBus = _.extend({}, Backbone.Events); this.wrapper = $('
').addClass('canvas-wrapper').attr('contenteditable', true); + this.wlxmlListener = wlxmlListener.create(this); this.loadWlxmlDocument(wlxmlDocument); this.publisher = publisher ? publisher : function() {}; }; @@ -22,19 +24,22 @@ $.extend(Canvas.prototype, { if(!wlxmlDocument) { return false; } - var canvasDOM = this.generateCanvasDOM(wlxmlDocument.root); + this.wlxmlListener.listenTo(wlxmlDocument); + this.wlxmlDocument = wlxmlDocument; + this.reloadRoot(); + this.setupEventHandling(); + }, + + reloadRoot: function() { + var canvasDOM = this.generateCanvasDOM(this.wlxmlDocument.root); this.wrapper.empty(); this.wrapper.append(canvasDOM); this.d = this.wrapper.children(0); - this.setupEventHandling(); }, generateCanvasDOM: function(wlxmlNode) { - var element = documentElement.DocumentNodeElement.create(wlxmlNode, this); - - return element.dom(); }, @@ -61,6 +66,11 @@ $.extend(Canvas.prototype, { } observer.observe(canvas.d[0], config); canvas.publisher('contentChanged'); + + var textElement = canvas.getDocumentElement(mutation.target), + toSet = mutation.target.data !== utils.unicode.ZWS ? mutation.target.data : ''; + + textElement.data('wlxmlNode').setText(toSet); } }); }); @@ -104,101 +114,13 @@ $.extend(Canvas.prototype, { return documentElement.DocumentNodeElement.fromHTMLElement(this.d.get(0), this); //{wlxmlTag: this.d.prop('tagName')}; }, - createNodeElement: function(params) { - return documentElement.DocumentNodeElement.create(params, this); - }, - - wrapText: function(params) { - params = _.extend({textNodeIdx: 0}, params); - if(typeof params.textNodeIdx === 'number') - params.textNodeIdx = [params.textNodeIdx]; - - var childrenInside = params.inside.children(), - idx1 = Math.min.apply(Math, params.textNodeIdx), - idx2 = Math.max.apply(Math, params.textNodeIdx), - textNode1 = childrenInside[idx1], - textNode2 = childrenInside[idx2], - sameNode = textNode1.sameNode(textNode2), - prefixOutside = textNode1.getText().substr(0, params.offsetStart), - prefixInside = textNode1.getText().substr(params.offsetStart), - suffixInside = textNode2.getText().substr(0, params.offsetEnd), - suffixOutside = textNode2.getText().substr(params.offsetEnd) - ; - - var wrapperElement = this.createNodeElement({tag: params._with.tag, klass: params._with.klass}); - textNode1.after(wrapperElement); - textNode1.detach(); - - if(prefixOutside.length > 0) - wrapperElement.before({text:prefixOutside}); - if(sameNode) { - var core = textNode1.getText().substr(params.offsetStart, params.offsetEnd - params.offsetStart); - wrapperElement.append({text: core}); - } else { - textNode2.detach(); - if(prefixInside.length > 0) - wrapperElement.append({text: prefixInside}); - for(var i = idx1 + 1; i < idx2; i++) { - wrapperElement.append(childrenInside[i]); - } - if(suffixInside.length > 0) - wrapperElement.append({text: suffixInside}); - } - if(suffixOutside.length > 0) - wrapperElement.after({text: suffixOutside}); - return wrapperElement; - }, - - wrapElements: function(params) { - if(!(params.element1.parent().sameNode(params.element2.parent()))) - return; - - var parent = params.element1.parent(), - parentChildren = parent.children(), - wrapper = this.createNodeElement({ - tag: params._with.tag, - klass: params._with.klass}), - idx1 = parent.childIndex(params.element1), - idx2 = parent.childIndex(params.element2); - - if(idx1 > idx2) { - var tmp = idx1; - idx1 = idx2; - idx2 = tmp; - } - - var insertingMethod, insertingTarget; - if(idx1 === 0) { - insertingMethod = 'prepend'; - insertingTarget = parent; - } else { - insertingMethod = 'after'; - insertingTarget = parentChildren[idx1-1]; - } - - for(var i = idx1; i <= idx2; i++) { - wrapper.append(parentChildren[i].detach()); - } - - insertingTarget[insertingMethod](wrapper); - return wrapper; + toggleElementHighlight: function(node, toggle) { + var element = utils.findCanvasElement(node); + element.toggleHighlight(toggle); }, - getSiblingParents: function(params) { - var parents1 = [params.element1].concat(params.element1.parents()).reverse(), - parents2 = [params.element2].concat(params.element2.parents()).reverse(), - noSiblingParents = null; - - if(parents1.length === 0 || parents2.length === 0 || !(parents1[0].sameNode(parents2[0]))) - return noSiblingParents; - - var i; - for(i = 0; i < Math.min(parents1.length, parents2.length); i++) { - if(parents1[i].sameNode(parents2[i])) - continue; - break; - } - return {element1: parents1[i], element2: parents2[i]}; + createNodeElement: function(params) { + return documentElement.DocumentNodeElement.create(params, this); }, getDocumentElement: function(from) { @@ -224,6 +146,10 @@ $.extend(Canvas.prototype, { setCurrentElement: function(element, params) { + if(!(element instanceof documentElement.DocumentElement)) { + element = utils.findCanvasElement(element); + } + params = _.extend({caretTo: 'end'}, params); var findFirstDirectTextChild = function(e, nodeToLand) { var byBrowser = this.getCursor().getPosition().element; @@ -262,7 +188,7 @@ $.extend(Canvas.prototype, { if(params.caretTo || !textElementToLand.sameNode(this.getCursor().getPosition().element)) this._moveCaretToTextElement(textElementToLand, params.caretTo); // as method on element? if(!(textElementToLand.sameNode(currentTextElement))) - this.publisher('currentTextElementSet', textElementToLand); + this.publisher('currentTextElementSet', textElementToLand.data('wlxmlNode')); } else { document.getSelection().removeAllRanges(); } @@ -270,7 +196,7 @@ $.extend(Canvas.prototype, { if(!(currentNodeElement && currentNodeElement.sameNode(nodeElementToLand))) { _markAsCurrent(nodeElementToLand); - this.publisher('currentNodeElementSet', nodeElementToLand); + this.publisher('currentNodeElementSet', nodeElementToLand.data('wlxmlNode')); } }, @@ -299,13 +225,6 @@ $.extend(Canvas.prototype, { setCursorPosition: function(position) { if(position.element) this._moveCaretToTextElement(position.element, position.offset); - }, - - toXML: function() { - var parent = $('
'), - parts = this.doc().toXML(0); - parent.append(parts); - return parent.html(); } });