+ parent: function() {
+ var parents = this.$element.parents('[document-node-element]');
+ if(parents.length)
+ return DocumentElement.fromHTMLElement(parents[0], this.canvas);
+ return null;
+ },
+
+ parents: function() {
+ var parents = [],
+ parent = this.parent();
+ while(parent) {
+ parents.push(parent);
+ parent = parent.parent();
+ }
+ return parents;
+ },
+
+ sameNode: function(other) {
+ return other && (typeof other === typeof this) && other.dom()[0] === this.dom()[0];
+ },
+
+ wrapWithNodeElement: function(wlxmlNode) {
+ var wrapper = DocumentNodeElement.create({tag: wlxmlNode.tag, klass: wlxmlNode.klass});
+ this.dom().replaceWith(wrapper.dom());
+ wrapper.append(this);
+ return wrapper;
+ },
+
+ detach: function() {
+ this.dom().detach();
+ this.canvas = null;
+ return this;
+ },
+
+ markAsCurrent: function() {
+ this.canvas.markAsCurrent(this);
+ },
+
+ getVerticallyFirstTextElement: function() {
+ var toret;
+ this.children().some(function(child) {
+ if(!child.isVisible())
+ return false; // continue
+ if(child instanceof DocumentTextElement) {
+ toret = child;
+ return true; // break
+ } else {
+ toret = child.getVerticallyFirstTextElement();
+ if(toret)
+ return true; // break
+ }
+ });
+ return toret;
+ },
+
+ isVisible: function() {
+ return this instanceof DocumentTextElement || this.getWlxmlTag() !== 'metadata';
+ }
+});
+
+
+// DocumentNodeElement represents an element node from WLXML document rendered inside Canvas
+var DocumentNodeElement = function(htmlElement, canvas) {
+ DocumentElement.call(this, htmlElement, canvas);
+};
+
+$.extend(DocumentNodeElement, {
+ createDOM: function(params, 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.setWlxmlTag(params.tag);
+ if(params.klass)
+ element.setWlxmlClass(params.klass);
+ if(params.meta) {
+ _.keys(params.meta).forEach(function(key) {
+ element.setWlxmlMetaAttr(key, params.meta[key]);
+ });
+ }
+ element.data('other-attrs', params.others);
+
+ if(params.rawChildren) {
+ container.append(params.rawChildren);
+ }
+ return dom;
+ },
+
+ create: function(params, canvas) {
+ return this.fromHTMLElement(this.createDOM(params, canvas)[0], canvas);
+ },
+
+ fromHTMLElement: function(htmlElement, canvas) {
+ return new this(htmlElement, canvas);
+ }
+});
+
+var manipulate = function(e, params, action) {
+ var element;
+ if(params instanceof DocumentElement) {
+ element = params;
+ } else {
+ element = DocumentElement.create(params);
+ }
+ var target = (action === 'append' || action === 'prepend') ? e._container() : e.dom();
+ target[action](element.dom());
+ return element;
+};
+
+DocumentNodeElement.prototype = new DocumentElement();
+
+
+$.extend(DocumentNodeElement.prototype, {
+ _container: function() {
+ return this.dom().children('[document-element-content]');
+ },
+ 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);
+ },
+ toXML: function(level) {
+ var node = $('<' + this.getWlxmlTag() + '>');
+
+ if(this.getWlxmlClass())
+ node.attr('class', this.getWlxmlClass());
+ var meta = this.getWlxmlMetaAttrs();
+ meta.forEach(function(attr) {
+ if(attr.value)
+ node.attr('meta-' + attr.name, attr.value);
+ });
+ _.keys(this.data('other-attrs') || {}).forEach(function(key) {
+ node.attr(key, this.data('other-attrs')[key]);
+ }, this);
+
+ var addFormatting = function() {
+ var toret = $('<div>');
+ var formattings = {};
+
+ if(this.data('orig-before') !== undefined) {
+ if(this.data('orig-before')) {
+ toret.prepend(document.createTextNode(this.data('orig-before')));
+ }
+ } else if(level && this.getWlxmlTag() !== 'span') {
+ toret.append('\n' + (new Array(level * 2 + 1)).join(' '));
+ }
+
+ toret.append(node);
+
+ if(this.data('orig-after')) {
+ toret.append(document.createTextNode(this.data('orig-after')));
+ }
+
+ /* Inside node */
+ if(this.data('orig-begin')) {
+ node.prepend(this.data('orig-begin'));
+ formattings.begin = true;
+ }
+
+ if(this.data('orig-end') !== undefined) {
+ if(this.data('orig-end')) {
+ node.append(this.data('orig-end'));
+ }
+ } else if(this.getWlxmlTag() !== 'span' && children.length){
+ node.append('\n' + (new Array(level * 2 + 1)).join(' '));
+ }
+
+ return {parts: toret.contents(), formattings: formattings};
+ }.bind(this);
+
+
+
+ var children = this.children(),
+ childParts;
+
+ var formatting = addFormatting(node);
+
+ for(var i = children.length - 1; i >= 0; i--) {
+ childParts = children[i].toXML(level + 1);
+ if(typeof childParts === 'string')
+ childParts = [document.createTextNode(childParts)];
+
+ if(formatting.formattings.begin) {
+ $(node.contents()[0]).after(childParts);
+ } else
+ node.prepend(childParts);
+ }
+ return formatting.parts;
+ },
+ append: function(params) {
+ if(params.tag !== 'span')
+ this.data('orig-end', undefined);
+ return manipulate(this, params, 'append');
+ },
+ prepend: function(params) {
+ return manipulate(this, params, 'prepend');
+ },
+ before: function(params) {
+ return manipulate(this, params, 'before');
+
+ },
+ after: function(params) {
+ return manipulate(this, params, 'after');
+ },
fnp / fnpeditor.git / blobdiff