'use strict';
-var Canvas = function(wlxml, publisher) {
+var Canvas = function(wlxml, publisher, ver) {
this.eventBus = _.extend({}, Backbone.Events);
- this.loadWlxml(wlxml);
+ if(ver === 2) {
+ this.loadWlxmlDocument(wlxml);
+ } else {
+ this.loadWlxml(wlxml);
+ }
this.publisher = publisher ? publisher : function() {};
};
$.extend(Canvas.prototype, {
+ loadWlxmlDocument: function(wlxmlDocument) {
+ var canvasDOM = this.generateCanvasDOM(wlxmlDocument.root);
+
+ this.wrapper = $('<div>').addClass('canvas-wrapper').attr('contenteditable', true);
+ this.wrapper.append(canvasDOM);
+ this.d = this.wrapper.children(0);
+ this.setupEventHandling();
+ },
+
+ generateCanvasDOM: function(wlxmlNode) {
+ // var element = this.createNodeElement2({
+ // tag: wlxmlNode.getTagName(),
+ // klass: wlxmlNode.getClass(), //currentTag.attr('class'),
+ // meta: wlxmlNode.getMetaAttributes(), //meta,
+ // others: wlxmlNode.getOtherAttributes(), // ~ //others,
+ // rawChildren: wlxmlNode.contents(),
+ // prepopulateOnEmpty: true
+ // }); //->create2
+
+ var element = documentElement.DocumentNodeElement.create2(wlxmlNode, this);
+
+
+ ['orig-before', 'orig-after', 'orig-begin', 'orig-end'].forEach(function(attr) {
+ element.data(attr, '');
+ });
+ return element.dom();
+ },
+
loadWlxml: function(wlxml) {
var d = wlxml ? $($.trim(wlxml)) : null;
if(d) {
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});
- });
+ this.setupEventHandling();
- 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);
+ } else {
+ this.d = null;
+ }
+ },
+ setupEventHandling: function() {
+ var canvas = this;
+ this.wrapper.on('keyup keydown keypress', function(e) {
+ keyboard.handleKey(e, this);
+ }.bind(this));
- 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);
- });
+ this.wrapper.on('click', '[document-node-element], [document-text-element]', function(e) {
+ e.stopPropagation();
+ canvas.setCurrentElement(canvas.getDocumentElement(e.currentTarget), {caretTo: false});
+ });
- this.eventBus.on('elementToggled', function(toggle, element) {
- if(!toggle) {
- canvas.setCurrentElement(element.getPreviousTextElement());
+ 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);
+ });
- } else {
- this.d = null;
- }
+ this.eventBus.on('elementToggled', function(toggle, element) {
+ if(!toggle) {
+ canvas.setCurrentElement(element.getPreviousTextElement());
+ }
+ });
},
view: function() {
return {
fromXML: function(xml, publisher) {
return new Canvas(xml, publisher);
+ },
+ fromXML2: function(wlxmlNode, publisher) {
+ return new Canvas(wlxmlNode, publisher, 2);
}
};
};
+var elementTypeFromNode = function(wlxmlNode) {
+ return wlxmlNode.nodeType === Node.TEXT_NODE ? DocumentTextElement : DocumentNodeElement;
+}
+
$.extend(DocumentElement, {
create: function(params, canvas) {
return elementTypeFromParams(params).create(params);
},
- createDOM: function(params) {
- return elementTypeFromParams(params).createDOM(params);
+ create2: function(node, canvas) {
+ return elementTypeFromNode(node).create2(node, canvas);
+ },
+
+ createDOM: function(wlxmlNode) {
+ return elementTypeFromParams(wlxmlNode).createDOM(params);
},
fromHTMLElement: function(htmlElement, canvas) {
fromHTMLElement: function(htmlElement, canvas) {
return new this(htmlElement, canvas);
+ },
+
+ createDOM2: function(wlxmlNode, canvas) {
+
+ // tag: wlxmlNode.getTagName(),
+ // klass: wlxmlNode.getClass(), //currentTag.attr('class'),
+ // meta: wlxmlNode.getMetaAttributes(), //meta,
+ // others: wlxmlNode.getOtherAttributes(), // ~ //others,
+ // rawChildren: wlxmlNode.contents(),
+ // prepopulateOnEmpty: true
+
+ var dom = $('<div>')
+ .attr('document-node-element', ''),
+ widgetsContainer = $('<div>')
+ .addClass('canvas-widgets')
+ .attr('contenteditable', false),
+ container = $('<div>')
+ .attr('document-element-content', '');
+
+ dom.append(widgetsContainer, container);
+ // Make sure widgets aren't navigable with arrow keys
+ widgetsContainer.find('*').add(widgetsContainer).attr('tabindex', -1);
+
+ var element = this.fromHTMLElement(dom[0], canvas);
+
+ element.setWlxml({tag: wlxmlNode.getTagName(), klass: wlxmlNode.getClass()});
+
+ _.keys(wlxmlNode.getMetaAttributes()).forEach(function(key) {
+ element.setWlxmlMetaAttr(key, params.meta[key]);
+ });
+
+ //element.data('other-attrs', params.others);
+
+ // element.contents
+
+ wlxmlNode.contents().forEach((function(node) {
+ container.append(DocumentElement.create2(node).dom());
+ }).bind(this));
+
+ // if(params.rawChildren && params.rawChildren.length) {
+ // container.append(params.rawChildren);
+ // } else if(params.prepopulateOnEmpty) {
+ // element.append(DocumentTextElement.create({text: ''}));
+ // }
+ return dom;
+ },
+
+ create2: function(params, canvas) {
+ return this.fromHTMLElement2(this.createDOM2(params, canvas)[0], canvas);
+ },
+
+ fromHTMLElement2: function(htmlElement, canvas) {
+ return new this(htmlElement, canvas);
}
});
.text(params.text || utils.unicode.ZWS);
},
+ createDOM2: function(wlxmlTextNode) {
+ return $('<div>')
+ .attr('document-text-element', '')
+ .text(wlxmlTextNode.getText() || utils.unicode.ZWS);
+ },
+
create: function(params, canvas) {
return this.fromHTMLElement(this.createDOM(params)[0]);
},
+ create2: function(wlxmlTextNode, canvas) {
+ return this.fromHTMLElement(this.createDOM2(wlxmlTextNode)[0]);
+ },
+
fromHTMLElement: function(htmlElement, canvas) {
return new this(htmlElement, canvas);
},
fnp / fnpeditor.git / commitdiff