X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/efe36f4f1b5df351eeb4d40a54c3900cf9a7079b..d003018e2fe4d6ccb51151b755cdc337672d9bf0:/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 d8db2bc..48f03de 100644 --- a/src/editor/modules/documentCanvas/canvas/canvas.js +++ b/src/editor/modules/documentCanvas/canvas/canvas.js @@ -4,200 +4,102 @@ 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(wlxml, publisher) { +var Canvas = function(wlxmlDocument, publisher) { this.eventBus = _.extend({}, Backbone.Events); - this.loadWlxml(wlxml); + this.wrapper = $('
').addClass('canvas-wrapper').attr('contenteditable', true); + this.wlxmlListener = wlxmlListener.create(this); + this.loadWlxmlDocument(wlxmlDocument); this.publisher = publisher ? publisher : function() {}; }; $.extend(Canvas.prototype, { - loadWlxml: function(wlxml) { - var d = wlxml ? $($.trim(wlxml)) : null; - if(d) { - this.wrapper = $('
').addClass('canvas-wrapper').attr('contenteditable', true); - this.wrapper.append(d); - var canvas = this; - - this.wrapper.find('*').replaceWith(function() { - var currentTag = $(this); - if(currentTag.attr('wlxml-tag')) - return; - - var meta = {}, others = {}; - for(var i = 0; i < this.attributes.length; i++) { - var attr = this.attributes[i]; - if(attr.name.substr(0, 5) === 'meta-') - meta[attr.name.substr(5)] = attr.value; - else if(attr.name !== 'class') - others[attr.name] = attr.value; - } + loadWlxmlDocument: function(wlxmlDocument) { + if(!wlxmlDocument) { + return false; + } - var element = canvas.createNodeElement({ - tag: currentTag.prop('tagName').toLowerCase(), - klass: currentTag.attr('class'), - meta: meta, - others: others, - rawChildren: currentTag.contents(), - prepopulateOnEmpty: true - }); - - ['orig-before', 'orig-after', 'orig-begin', 'orig-end'].forEach(function(attr) { - element.data(attr, ''); - }); - return element.dom(); - }); + var canvasDOM = this.generateCanvasDOM(wlxmlDocument.root); - var FIRST_CONTENT_INDEX = 0; + this.wrapper.empty(); + this.wrapper.append(canvasDOM); + this.d = this.wrapper.children(0); + this.setupEventHandling(); - // @@ TODO - refactor! - var getNode = function(element) { - return element.children('[document-element-content]'); - } + this.wlxmlListener.listenTo(wlxmlDocument); + this.wlxmlDocument = wlxmlDocument; + }, - this.wrapper.find(':not(iframe)').addBack().contents() - .filter(function() {return this.nodeType === Node.TEXT_NODE}) - .each(function() { - - // TODO: use DocumentElement API - - var el = $(this), - text = {original: el.text(), trimmed: $.trim(el.text())}, - elParent = el.parent(), - hasSpanParent = elParent.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') || elParent.attr('document-text-element') !== undefined) - return true; // continue - - var addInfo = function(toAdd, where) { - var parentContents = elParent.contents(), - idx = parentContents.index(el[0]), - prev = idx > FIRST_CONTENT_INDEX ? parentContents[idx-1] : null, - next = idx < parentContents.length - 1 ? parentContents[idx+1] : null, - target, key; - - if(where === 'above') { - target = prev ? $(prev) : elParent.parent(); - key = prev ? 'orig-after' : 'orig-begin'; - } else if(where === 'below') { - target = next ? $(next) : elParent.parent(); - key = next ? 'orig-before' : 'orig-end'; - } else { throw new Object;} - - target.data(key, toAdd); - } + generateCanvasDOM: function(wlxmlNode) { + var element = documentElement.DocumentNodeElement.create(wlxmlNode, this); + return element.dom(); + }, - text.transformed = text.trimmed; - - if(hasSpanParent || hasSpanBefore || hasSpanAfter) { - var startSpace = /\s/g.test(text.original.substr(0,1)), - endSpace = /\s/g.test(text.original.substr(-1)) && text.original.length > 1; - text.transformed = (startSpace && (hasSpanParent || hasSpanBefore) ? ' ' : '') - + text.trimmed - + (endSpace && (hasSpanParent || hasSpanAfter) ? ' ' : ''); - } else { - if(text.trimmed.length === 0 && text.original.length > 0 && elParent.contents().length === 1) - text.transformed = ' '; - } + setupEventHandling: function() { + var canvas = this; + this.wrapper.on('keyup keydown keypress', function(e) { + keyboard.handleKey(e, this); + }.bind(this)); - if(!text.transformed) { - addInfo(text.original, 'below'); - el.remove(); - return true; // continue - } + this.wrapper.on('click', '[document-node-element], [document-text-element]', function(e) { + e.stopPropagation(); + canvas.setCurrentElement(canvas.getDocumentElement(e.currentTarget), {caretTo: false}); + }); - if(text.transformed !== text.original) { - if(!text.trimmed) { - addInfo(text.original, 'below'); - } else { - var startingMatch = text.original.match(/^\s+/g), - endingMatch = text.original.match(/\s+$/g), - startingWhiteSpace = startingMatch ? startingMatch[0] : null, - endingWhiteSpace = endingMatch ? endingMatch[0] : null; - - if(endingWhiteSpace) { - if(text.transformed[text.transformed.length - 1] === ' ' && endingWhiteSpace[0] === ' ') - endingWhiteSpace = endingWhiteSpace.substr(1); - addInfo(endingWhiteSpace, 'below'); - } - - if(startingWhiteSpace) { - if(text.transformed[0] === ' ' && startingWhiteSpace[startingWhiteSpace.length-1] === ' ') - startingWhiteSpace = startingWhiteSpace.substr(0, startingWhiteSpace.length -1); - addInfo(startingWhiteSpace, 'above'); - } - } + var observer = new MutationObserver(function(mutations) { + mutations.forEach(function(mutation) { + if(documentElement.DocumentTextElement.isContentContainer(mutation.target)) { + observer.disconnect(); + if(mutation.target.data === '') + mutation.target.data = utils.unicode.ZWS; + else if(mutation.oldValue === utils.unicode.ZWS) { + mutation.target.data = mutation.target.data.replace(utils.unicode.ZWS, ''); + canvas._moveCaretToTextElement(canvas.getDocumentElement(mutation.target), 'end'); } + observer.observe(canvas.d[0], config); + canvas.publisher('contentChanged'); - var element = documentElement.DocumentTextElement.create({text: text.transformed}); - el.replaceWith(element.dom()); - }); - - this.d = this.wrapper.children(0); - - this.wrapper.on('keyup keydown keypress', function(e) { - keyboard.handleKey(e, this); - }.bind(this)); - - this.wrapper.on('click', '[document-node-element], [document-text-element]', function(e) { - e.stopPropagation(); - canvas.setCurrentElement(canvas.getDocumentElement(e.currentTarget), {caretTo: false}); - }); - - var observer = new MutationObserver(function(mutations) { - mutations.forEach(function(mutation) { - if(documentElement.DocumentTextElement.isContentContainer(mutation.target)) { - observer.disconnect(); - if(mutation.target.data === '') - mutation.target.data = utils.unicode.ZWS; - else if(mutation.oldValue === utils.unicode.ZWS) { - mutation.target.data = mutation.target.data.replace(utils.unicode.ZWS, ''); - canvas._moveCaretToTextElement(canvas.getDocumentElement(mutation.target), 'end'); - } - observer.observe(canvas.d[0], config); - canvas.publisher('contentChanged'); - } - }); - }); - var config = { attributes: false, childList: false, characterData: true, subtree: true, characterDataOldValue: true}; - observer.observe(this.d[0], config); - - - this.wrapper.on('mouseover', '[document-node-element], [document-text-element]', function(e) { - var el = canvas.getDocumentElement(e.currentTarget); - if(!el) - return; - e.stopPropagation(); - if(el instanceof documentElement.DocumentTextElement) - el = el.parent(); - el.toggleLabel(true); - }); - this.wrapper.on('mouseout', '[document-node-element], [document-text-element]', function(e) { - var el = canvas.getDocumentElement(e.currentTarget); - if(!el) - return; - e.stopPropagation(); - if(el instanceof documentElement.DocumentTextElement) - el = el.parent(); - el.toggleLabel(false); - }); + var textElement = canvas.getDocumentElement(mutation.target), + toSet = mutation.target.data !== utils.unicode.ZWS ? mutation.target.data : ''; - this.eventBus.on('elementToggled', function(toggle, element) { - if(!toggle) { - canvas.setCurrentElement(element.getPreviousTextElement()); + textElement.data('wlxmlNode').setText(toSet); } - }) + }); + }); + var config = { attributes: false, childList: false, characterData: true, subtree: true, characterDataOldValue: true}; + observer.observe(this.d[0], config); + + + this.wrapper.on('mouseover', '[document-node-element], [document-text-element]', function(e) { + var el = canvas.getDocumentElement(e.currentTarget); + if(!el) + return; + e.stopPropagation(); + if(el instanceof documentElement.DocumentTextElement) + el = el.parent(); + el.toggleLabel(true); + }); + this.wrapper.on('mouseout', '[document-node-element], [document-text-element]', function(e) { + var el = canvas.getDocumentElement(e.currentTarget); + if(!el) + return; + e.stopPropagation(); + if(el instanceof documentElement.DocumentTextElement) + el = el.parent(); + el.toggleLabel(false); + }); - } else { - this.d = null; - } + this.eventBus.on('elementToggled', function(toggle, element) { + if(!toggle) { + canvas.setCurrentElement(element.getPreviousTextElement()); + } + }); }, view: function() { @@ -210,6 +112,11 @@ $.extend(Canvas.prototype, { return documentElement.DocumentNodeElement.fromHTMLElement(this.d.get(0), this); //{wlxmlTag: this.d.prop('tagName')}; }, + toggleElementHighlight: function(node, toggle) { + var element = utils.findCanvasElement(node); + element.toggleHighlight(toggle); + }, + createNodeElement: function(params) { return documentElement.DocumentNodeElement.create(params, this); }, @@ -330,6 +237,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; @@ -368,7 +279,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(); } @@ -376,7 +287,7 @@ $.extend(Canvas.prototype, { if(!(currentNodeElement && currentNodeElement.sameNode(nodeElementToLand))) { _markAsCurrent(nodeElementToLand); - this.publisher('currentNodeElementSet', nodeElementToLand); + this.publisher('currentNodeElementSet', nodeElementToLand.data('wlxmlNode')); } }, @@ -649,8 +560,8 @@ $.extend(Cursor.prototype, { }) return { - fromXML: function(xml, publisher) { - return new Canvas(xml, publisher); + fromXMLDocument: function(wlxmlDocument, publisher) { + return new Canvas(wlxmlDocument, publisher); } };