'use strict';
-var Canvas = function(wlxml, publisher) {
+var Canvas = function(wlxmlDocument, publisher) {
this.eventBus = _.extend({}, Backbone.Events);
- this.loadWlxmlDocument(wlxml);
+ this.wrapper = $('<div>').addClass('canvas-wrapper').attr('contenteditable', true);
+ this.loadWlxmlDocument(wlxmlDocument);
this.publisher = publisher ? publisher : function() {};
};
$.extend(Canvas.prototype, {
loadWlxmlDocument: function(wlxmlDocument) {
+ wlxmlDocument = wlxmlDocument || this.wlxmlDocument;
+ if(!wlxmlDocument) {
+ return false;
+ }
var canvasDOM = this.generateCanvasDOM(wlxmlDocument.root);
- this.wrapper = $('<div>').addClass('canvas-wrapper').attr('contenteditable', true);
+ this.wrapper.empty();
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 canvas = this;
- var element = documentElement.DocumentNodeElement.create(wlxmlNode, this);
+ var findCanvasElement = function(node) {
+ if(node.nodeType === Node.ELEMENT_NODE) {
+ return node.getData('canvasElement');
+ }
+ if(node.nodeType === Node.TEXT_NODE) {
+ var parent = node.parent(),
+ toret;
+
+ parent.children().forEach(function(child) {
+ if(child.data('wlxmlNode').sameNode(node))
+ toret = child;
+ });
+ if(toret)
+ return toret;
+ }
+ }
+ if(this.wlxmlDocument !== wlxmlDocument) {
+ wlxmlDocument.on('change', function(event) {
+ var canvasNode = findCanvasElement(event.meta.node);
+ if(event.type === 'nodeAttrChange' && event.meta.attr === 'class') {
+ canvasNode.setWlxmlClass(event.meta.newVal);
+ }
- ['orig-before', 'orig-after', 'orig-begin', 'orig-end'].forEach(function(attr) {
- element.data(attr, '');
- });
+ });
+ }
+ this.wlxmlDocument = wlxmlDocument;
+ },
+
+ generateCanvasDOM: function(wlxmlNode) {
+ var element = documentElement.DocumentNodeElement.create(wlxmlNode, this);
return element.dom();
},
})
return {
- fromXML: function(wlxmlNode, publisher) {
- return new Canvas(wlxmlNode, publisher);
+ fromXMLDocument: function(wlxmlDocument, publisher) {
+ return new Canvas(wlxmlDocument, publisher);
}
};