this.reloadRoot();
},
+ createElement: function(wlxmlNode) {
+ var Factory = wlxmlNode.nodeType === Node.TEXT_NODE ? documentElement.DocumentTextElement : documentElement.DocumentNodeElement;
+ return new Factory(wlxmlNode, this);
+ },
+
+ getDocumentElement: function(htmlElement) {
+ /* globals HTMLElement, Text */
+ if(!htmlElement || !(htmlElement instanceof HTMLElement || htmlElement instanceof Text)) {
+ return null;
+ }
+ var $element = $(htmlElement);
+ if(htmlElement.nodeType === Node.ELEMENT_NODE && $element.attr('document-node-element') !== undefined) {
+ return $element.data('canvas-element');
+ }
+
+ if(htmlElement.nodeType === Node.TEXT_NODE && $element.parent().attr('document-text-element') !== undefined) {
+ $element = $element.parent();
+ }
+
+ if($element.attr('document-text-element') !== undefined || (htmlElement.nodeType === Node.TEXT_NODE && $element.parent().attr('document-text-element') !== undefined)) {
+ //return DocumentTextElement.fromHTMLElement(htmlElement, canvas);
+ return $element.data('canvas-element');
+ }
+ },
+
reloadRoot: function() {
var canvasDOM = this.generateCanvasDOM(this.wlxmlDocument.root);
//var canvasDOM = this.wlxmlDocument.root.getData('canvasElement') ? this.wlxmlDocument.root.getData('canvasElement').dom() : this.generateCanvasDOM(this.wlxmlDocument.root);
},
generateCanvasDOM: function(wlxmlNode) {
- var element = documentElement.DocumentNodeElement.create(wlxmlNode, this);
- return element.dom();
+ //var element = new documentElement.DocumentNodeElement(wlxmlNode, this);
+ //return element.dom();
+ return this.createElement(wlxmlNode).dom();
},
setupEventHandling: function() {
//textElement.data('wlxmlNode').setText(toSet);
//textElement.data('wlxmlNode').document.transform('setText', {node: textElement.data('wlxmlNode'), text: toSet});
- if(textElement.data('wlxmlNode').getText() !== toSet) {
- canvas.textHandler.handle(textElement.data('wlxmlNode'), toSet);
+ if(textElement.wlxmlNode.getText() !== toSet) {
+ canvas.textHandler.handle(textElement.wlxmlNode, toSet);
}
}
});
if(this.d === null) {
return null;
}
- return documentElement.DocumentNodeElement.fromHTMLElement(this.d.get(0), this); //{wlxmlTag: this.d.prop('tagName')};
+ return this.getDocumentElement(this.d[0]);
},
toggleElementHighlight: function(node, toggle) {
element.toggleHighlight(toggle);
},
- createNodeElement: function(params) {
- return documentElement.DocumentNodeElement.create(params, this);
- },
-
- getDocumentElement: function(from) {
- /* globals HTMLElement, Text */
- if(from instanceof HTMLElement || from instanceof Text) {
- return documentElement.DocumentElement.fromHTMLElement(from, this);
- }
- },
getCursor: function() {
return new Cursor(this);
},
getCurrentNodeElement: function() {
- return this.getDocumentElement(this.wrapper.find('.current-node-element').parent()[0]);
+ var htmlElement = this.wrapper.find('.current-node-element').parent()[0];
+ if(htmlElement) {
+ return this.getDocumentElement(htmlElement);
+ }
},
getCurrentTextElement: function() {
- return this.getDocumentElement(this.wrapper.find('.current-text-element')[0]);
+ var htmlElement = this.wrapper.find('.current-text-element')[0];
+ if(htmlElement) {
+ return this.getDocumentElement(htmlElement);
+ }
},
contains: function(element) {
this._moveCaretToTextElement(textElementToLand, params.caretTo); // as method on element?
}
if(!(textElementToLand.sameNode(currentTextElement))) {
- this.publisher('currentTextElementSet', textElementToLand.data('wlxmlNode'));
+ this.publisher('currentTextElementSet', textElementToLand.wlxmlNode);
}
} else {
document.getSelection().removeAllRanges();
if(!(currentNodeElement && currentNodeElement.sameNode(nodeElementToLand))) {
_markAsCurrent(nodeElementToLand);
- this.publisher('currentNodeElementSet', nodeElementToLand.data('wlxmlNode'));
+ this.publisher('currentNodeElementSet', nodeElementToLand.wlxmlNode);
}
},
expect(c.doc().children()).to.have.length(3);
expect(c.doc().children()[0].canvas).to.equal(c);
+ expect(c.doc().children()[0].wlxmlNode.sameNode(doc.root));
});
});
c = canvas.fromXMLDocument(doc);
var header = doc.root.replaceWith({tagName: 'header'});
- expect(c.doc().data('wlxmlNode').sameNode(header)).to.equal(true);
+ expect(c.doc().wlxmlNode.sameNode(header)).to.equal(true);
});
});
/* Make sure we handle invalidation of reference to wlxmlNode after changing its tag */
expect(headerNode.getData('canvasElement').sameNode(headerElement)).to.equal(true, 'node->element');
- expect(headerElement.data('wlxmlNode').sameNode(headerNode)).to.equal(true, 'element->node');
+ expect(headerElement.wlxmlNode.sameNode(headerNode)).to.equal(true, 'element->node');
});
it('Handles nodeDetached event for an empty text node', function(done) {
wait(function() {
var parent = aTextElement.parent();
expect(aTextElement.getText({raw:true})).to.equal(utils.unicode.ZWS, 'canvas represents this as empty node');
- aTextElement.data('wlxmlNode').detach();
+ aTextElement.wlxmlNode.detach();
expect(parent.children().length).to.equal(1);
expect(parent.children()[0].getWlxmlTag()).to.equal('span');
done();
// DocumentElement represents a text or an element node from WLXML document rendered inside Canvas
-var DocumentElement = function(htmlElement, canvas) {
+var DocumentElement = function(wlxmlNode, canvas) {
if(arguments.length === 0) {
return;
}
+ this.wlxmlNode = wlxmlNode;
this.canvas = canvas;
- this._setupDOMHandler(htmlElement);
-};
-
-var elementTypeFromWlxmlNode = function(wlxmlNode) {
- return wlxmlNode.nodeType === Node.TEXT_NODE ? DocumentTextElement : DocumentNodeElement;
+ this.$element = this.createDOM();
+ this.$element.data('canvas-element', this);
};
-$.extend(DocumentElement, {
- create: function(node, canvas) {
- return elementTypeFromWlxmlNode(node).create(node, canvas);
- },
-
- fromHTMLElement: function(htmlElement, canvas) {
- var $element = $(htmlElement);
- if(htmlElement.nodeType === Node.ELEMENT_NODE && $element.attr('document-node-element') !== undefined) {
- return DocumentNodeElement.fromHTMLElement(htmlElement, canvas);
- }
- if($element.attr('document-text-element') !== undefined || (htmlElement.nodeType === Node.TEXT_NODE && $element.parent().attr('document-text-element') !== undefined)) {
- return DocumentTextElement.fromHTMLElement(htmlElement, canvas);
- }
- return undefined;
- }
-});
-
$.extend(DocumentElement.prototype, {
- _setupDOMHandler: function(htmlElement) {
- this.$element = $(htmlElement);
- },
bound: function() {
return $.contains(document.documentElement, this.dom()[0]);
},
dom: function() {
return this.$element;
},
- data: function() {
- var dom = this.dom(),
- args = Array.prototype.slice.call(arguments, 0);
- if(args.length === 2 && args[1] === undefined) {
- return dom.removeData(args[0]);
- }
- return dom.data.apply(dom, arguments);
- },
parent: function() {
var parents = this.$element.parents('[document-node-element]');
if(parents.length) {
- return DocumentElement.fromHTMLElement(parents[0], this.canvas);
+ return this.canvas.getDocumentElement(parents[0]);
}
return null;
},
},
exec: function(method) {
- var manager = this.data('_wlxmlManager');
- if(manager[method]) {
- return manager[method].apply(manager, Array.prototype.slice.call(arguments, 1));
+ if(this.manager && this.manager[method]) {
+ return this.manager[method].apply(this.manager, Array.prototype.slice.call(arguments, 1));
}
}
});
// DocumentNodeElement represents an element node from WLXML document rendered inside Canvas
-var DocumentNodeElement = function(htmlElement, canvas) {
- DocumentElement.call(this, htmlElement, canvas);
+var DocumentNodeElement = function(wlxmlNode, canvas) {
+ DocumentElement.call(this, wlxmlNode, canvas);
+ wlxmlNode.setData('canvasElement', this);
};
-$.extend(DocumentNodeElement, {
- create: function(wlxmlNode, canvas) {
- return this.fromHTMLElement(this.createDOM(wlxmlNode, canvas)[0], canvas);
- },
-
- fromHTMLElement: function(htmlElement, canvas) {
- return new this(htmlElement, canvas);
- },
-
- createDOM: function(wlxmlNode, canvas) {
- 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.data('wlxmlNode', wlxmlNode);
- wlxmlNode.setData('canvasElement', element);
-
- element.setWlxml({tag: wlxmlNode.getTagName(), klass: wlxmlNode.getClass()});
-
- wlxmlNode.contents().forEach(function(node) {
- container.append(DocumentElement.create(node, canvas).dom());
- }.bind(this));
-
- return dom;
- }
-
-});
var manipulate = function(e, params, action) {
var element;
if(params instanceof DocumentElement) {
element = params;
} else {
- element = DocumentElement.create(params);
+ element = e.canvas.createElement(params);
}
var target = (action === 'append' || action === 'prepend') ? e._container() : e.dom();
target[action](element.dom());
$.extend(DocumentNodeElement.prototype, {
+ createDOM: function() {
+ 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);
+ this.$element = dom; //@!!!
+ this.setWlxml({tag: this.wlxmlNode.getTagName(), klass: this.wlxmlNode.getClass()});
+
+ this.wlxmlNode.contents().forEach(function(node) {
+ container.append(this.canvas.createElement(node).dom());
+ }.bind(this));
+ return dom;
+ },
_container: function() {
return this.dom().children('[document-element-content]');
},
var elementContent = this._container().contents();
var element = this;
elementContent.each(function() {
- var childElement = DocumentElement.fromHTMLElement(this, element.canvas);
+ var childElement = element.canvas.getDocumentElement(this);
if(childElement === undefined) {
return true;
}
this.__updatingWlxml = false;
},
_updateWlxmlManager: function() {
- var manager = wlxmlManagers.getFor(this);
- this.data('_wlxmlManager', manager);
- manager.setup();
+ this.manager = wlxmlManagers.getFor(this);
+ this.manager.setup();
},
is: function(what) {
if(what === 'list' && _.contains(['list.items', 'list.items.enum'], this.getWlxmlClass())) {
},
toggle: function(toggle) {
- var mng = this.data('_wlxmlManager');
- if(mng) {
- mng.toggle(toggle);
+ if(this.manager) {
+ this.manager.toggle(toggle);
}
}
});
// DocumentNodeElement represents a text node from WLXML document rendered inside Canvas
-var DocumentTextElement = function(htmlElement, canvas) {
- DocumentElement.call(this, htmlElement, canvas);
+var DocumentTextElement = function(wlxmlTextNode, canvas) {
+ DocumentElement.call(this, wlxmlTextNode, canvas);
};
$.extend(DocumentTextElement, {
- createDOM: function(wlxmlTextNode, canvas) {
- var dom = $('<div>')
- .attr('document-text-element', '')
- .text(wlxmlTextNode.getText() || utils.unicode.ZWS),
- element = this.fromHTMLElement(dom[0], canvas);
- element.data('wlxmlNode', wlxmlTextNode);
- return dom;
- },
-
- create: function(wlxmlTextNode, canvas) {
- return this.fromHTMLElement(this.createDOM(wlxmlTextNode, canvas)[0], canvas);
- },
-
- fromHTMLElement: function(htmlElement, canvas) {
- return new this(htmlElement, canvas);
- },
isContentContainer: function(htmlElement) {
return htmlElement.nodeType === Node.TEXT_NODE && $(htmlElement).parent().is('[document-text-element]');
}
DocumentTextElement.prototype = new DocumentElement();
$.extend(DocumentTextElement.prototype, {
- _setupDOMHandler: function(htmlElement) {
- var $element = $(htmlElement);
- if(htmlElement.nodeType === Node.TEXT_NODE) {
- this.$element = $element.parent();
- }
- else {
- this.$element = $element;
- }
+ createDOM: function() {
+ return $('<div>')
+ .attr('document-text-element', '')
+ .text(this.wlxmlNode.getText() || utils.unicode.ZWS);
},
detach: function() {
this.dom().detach();
if(params instanceof DocumentNodeElement) {
element = params;
} else {
- element = DocumentElement.create(params, this.canvas);
+ element = this.canvas.createElement(params);
}
this.dom().wrap('<div>');
this.dom().parent().after(element.dom());
if(params instanceof DocumentNodeElement) {
element = params;
} else {
- element = DocumentNodeElement.create(params, this.canvas);
+ element = this.canvas.createElement(params);
}
this.dom().wrap('<div>');
this.dom().parent().before(element.dom());
return element;
},
- divide: function(params) {
- var myText = this.getText();
-
- if(params.offset === myText.length) {
- return this.after(params);
- }
- if(params.offset === 0) {
- return this.before(params);
- }
-
- var lhsText = myText.substr(0, params.offset),
- rhsText = myText.substr(params.offset),
- newElement = DocumentNodeElement.create({tag: params.tag, klass: params.klass}, this.canvas),
- rhsTextElement = DocumentTextElement.create({text: rhsText});
-
- this.setText(lhsText);
- this.after(newElement);
- newElement.after(rhsTextElement);
- return newElement;
- },
-
toggleHighlight: function() {
// do nothing for now
}
var currentElement = canvas.getCurrentNodeElement();
if(currentElement) {
canvas.wlxmlDocument.startTransaction();
- added = currentElement.data('wlxmlNode').after({
+ added = currentElement.wlxmlNode.after({
tagName: currentElement.getWlxmlTag() || 'div',
attrs: {'class': currentElement.getWlxmlClass() || 'p'}
});
}
canvas.wlxmlDocument.startTransaction();
- added = element.data('wlxmlNode').after(
+ added = element.wlxmlNode.after(
{tagName: element.getWlxmlTag() || 'div', attrs: {'class': element.getWlxmlClass() || 'p'}}
);
added.append({text: ''});
// gotoOptions = {caretTo: 'start'};
// }
- var result = position.element.data('wlxmlNode').breakContent({offset: position.offset}),
+ var result = position.element.wlxmlNode.breakContent({offset: position.offset}),
goto, gotoOptions;
if(result.emptyText) {
goto = result.emptyText;
var cursor = canvas.getCursor(),
position = canvas.getCursor().getPosition(),
element = position.element,
- node = element.data('wlxmlNode'),
+ node = element.wlxmlNode,
direction = 'above',
caretTo = 'end',
goto;
canvas.wlxmlDocument.deleteText({
from: {
- node: start.element.data('wlxmlNode'),
+ node: start.element.wlxmlNode,
offset: start.offset
},
to: {
- node: end.element.data('wlxmlNode'),
+ node: end.element.wlxmlNode,
offset: end.offset
}
});
}
if(parent.children().length === 1 && parent.children()[0].sameNode(element)) {
if(grandParent && grandParent.children().length === 1) {
- goto = grandParent.data('wlxmlNode').append({text: ''});
+ goto = grandParent.wlxmlNode.append({text: ''});
} else {
goto = element.getNearestTextElement(direction);
}
- parent.data('wlxmlNode').detach();
+ parent.wlxmlNode.detach();
} else {
goto = element.getNearestTextElement(direction);
- element.data('wlxmlNode').detach();
+ element.wlxmlNode.detach();
}
canvas.setCurrentElement(goto, {caretTo: caretTo});
}
element = element.getNearestTextElement(direction);
}
if(element) {
- goto = element.data('wlxmlNode').mergeContentUp();
+ goto = element.wlxmlNode.mergeContentUp();
canvas.setCurrentElement(goto.node, {caretTo: goto.offset});
}
event.preventDefault();
} else {
parentElement = findCanvasElement(wlxmlParentNode);
parentElement.children().forEach(function(child) {
- if(child.data('wlxmlNode').sameNode(wlxmlChildNode)) { // czemu tu, przy drugim undo child nie mial data?
+ if(child.wlxmlNode.sameNode(wlxmlChildNode)) { // czemu tu, przy drugim undo child nie mial data?
toret = child;
}
});
nodeTagChange: function(event) {
var canvasNode = utils.findCanvasElement(event.meta.node);
canvasNode.setWlxmlTag(event.meta.newTagName);
- canvasNode.data('wlxmlNode', event.meta.node);
+ canvasNode.wlxmlNode = event.meta.node;
},
nodeAdded: function(event, checkForExistence) {
if(event.meta.node.isRoot()) {
eventBus.trigger.apply(eventBus, arguments);
};
- this.node = documentElement.data('wlxmlNode');
-
+ this.node = documentElement.wlxmlNode;
};
var getDisplayStyle = function(tag, klass) {
});
commands.register('remove-node', function(canvas) {
- canvas.getCurrentNodeElement().data('wlxmlNode').detach();
+ canvas.getCurrentNodeElement().wlxmlNode.detach();
});
commands.register('unwrap-node', function(canvas) {
parent2 = selectionEnd.element.parent() || undefined;
var selectionAnchor = cursor.getSelectionAnchor(),
- node1 = parent1.data('wlxmlNode'),
- node2 = parent2.data('wlxmlNode'),
+ node1 = parent1.wlxmlNode,
+ node2 = parent2.wlxmlNode,
doc = node1.document;
if(doc.areItemsOfSameList({node1: node1, node2: node2})) {
doc.extractItems({item1: node1, item2: node2});
canvas.setCurrentElement(selectionAnchor.element, {caretTo: selectionAnchor.offset});
} else if(!cursor.isSelecting()) {
- var nodeToUnwrap = cursor.getPosition().element.data('wlxmlNode'),
+ var nodeToUnwrap = cursor.getPosition().element.wlxmlNode,
parentNode = nodeToUnwrap.unwrap();
if(parentNode) {
canvas.setCurrentElement(utils.findCanvasElement(parentNode));
parent1 = selectionStart.element.parent() || undefined,
parent2 = selectionEnd.element.parent() || undefined;
- var node1 = parent1.data('wlxmlNode'),
- node2 = parent2.data('wlxmlNode'),
+ var node1 = parent1.wlxmlNode,
+ node2 = parent2.wlxmlNode,
doc = node1.document;
if(doc.areItemsOfSameList({node1: node1, node2: node2})) {
return;
}
- var node1 = parent1.data('wlxmlNode'),
- node2 = parent2.data('wlxmlNode'),
+ var node1 = parent1.wlxmlNode,
+ node2 = parent2.wlxmlNode,
doc = node1.document;
doc.createList({node1: node1, node2: node2});
if(cursor.isSelecting()) {
if(cursor.isSelectingSiblings()) {
if(cursor.isSelectingWithinElement()) {
- wlxmlNode = selectionStart.element.data('wlxmlNode');
+ wlxmlNode = selectionStart.element.wlxmlNode;
caretTo = selectionStart.offset < selectionEnd.offset ? 'start' : 'end';
insertNode(
);
}
else {
- wlxmlNode = selectionStart.element.data('wlxmlNode').parent();
+ wlxmlNode = selectionStart.element.wlxmlNode.parent();
caretTo = selectionStart.element.sameNode(cursor.getSelectionAnchor().element) ? 'end' : 'start';
insertNode(
_with: {tagName: params.wlxmlTag, attrs: {'class': params.wlxmlClass}},
offsetStart: selectionStart.offset,
offsetEnd: selectionEnd.offset,
- textNodeIdx: [wlxmlNode.indexOf(selectionStart.element.data('wlxmlNode')), wlxmlNode.indexOf(selectionEnd.element.data('wlxmlNode'))] //parent.childIndex(selectionEnd.element)]
+ textNodeIdx: [wlxmlNode.indexOf(selectionStart.element.wlxmlNode), wlxmlNode.indexOf(selectionEnd.element.wlxmlNode)] //parent.childIndex(selectionEnd.element)]
});
},
function(wrapper) {
);
}
} else {
- var node1 = selectionStart.element.data('wlxmlNode'),
- node2 = selectionEnd.element.data('wlxmlNode'),
+ var node1 = selectionStart.element.wlxmlNode,
+ node2 = selectionEnd.element.wlxmlNode,
siblingParents = canvas.wlxmlDocument.getSiblingParents({node1: node1, node2: node2});
if(siblingParents) {
}
}
} else if(canvas.getCurrentNodeElement()) {
- wlxmlNode = canvas.getCurrentNodeElement().data('wlxmlNode');
+ wlxmlNode = canvas.getCurrentNodeElement().wlxmlNode;
var linkFound = [wlxmlNode].concat(wlxmlNode.parents()).some(function(node) {
if(node.getClass() === 'link') {
if(cursor.isSelectingWithinElement()) {
- asideNode = position.element.data('wlxmlNode').wrapWith({tagName: 'aside', attrs:{'class': 'footnote'}, start: cursor.getSelectionStart().offset, end: cursor.getSelectionEnd().offset});
+ asideNode = position.element.wlxmlNode.wrapWith({tagName: 'aside', attrs:{'class': 'footnote'}, start: cursor.getSelectionStart().offset, end: cursor.getSelectionEnd().offset});
} else {
- node = position.element.data('wlxmlNode');
+ node = position.element.wlxmlNode;
node.document.transaction(function() {
asideNode = node.divideWithElementNode({tagName: 'aside', attrs:{'class': 'footnote'}}, {offset: position.offset});
asideNode.append({text: ''});
return;
}
- var range = nodeElement.data('wlxmlNode').unwrapContent();
+ var range = nodeElement.wlxmlNode.unwrapContent();
if(element) {
var elementIsFirstChild = nodeElement.childIndex(element);
fnp / fnpeditor.git / commitdiff