X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/9c5db1c241bd7d0ff38354790dd9fbd43549cd4d..1576b7c8102f5e5a5cd40512b5d22565e8f871d2:/modules/documentCanvas/canvas/documentElement.js?ds=inline diff --git a/modules/documentCanvas/canvas/documentElement.js b/modules/documentCanvas/canvas/documentElement.js index e18f856..230e987 100644 --- a/modules/documentCanvas/canvas/documentElement.js +++ b/modules/documentCanvas/canvas/documentElement.js @@ -1,195 +1,346 @@ define([ 'libs/jquery-1.9.1.min', -'libs/underscore-min' -], function($, _) { +'libs/underscore-min', +'modules/documentCanvas/classAttributes' +], function($, _, classAttributes) { 'use strict'; -// DocumentElement represents a node from WLXML document rendered inside Canvas +// DocumentElement represents a text or an element node from WLXML document rendered inside Canvas var DocumentElement = function(htmlElement, canvas) { if(arguments.length === 0) return; this.canvas = canvas; - this.$element = $(htmlElement); - - this.wlxmlTag = this.$element.attr('wlxml-tag'); + this._setupDOMHandler(htmlElement); } -$.extend(DocumentElement.prototype, { - dom: function() { - return this.$element; +var elementTypeFromParams = function(params) { + return params.text !== undefined ? DocumentTextElement : DocumentNodeElement; + +}; + +$.extend(DocumentElement, { + create: function(params, canvas) { + return elementTypeFromParams(params).create(params); }, - children: function() { - var toret = []; - if(this instanceof DocumentTextElement) - return toret; + createDOM: function(params) { + return elementTypeFromParams(params).createDOM(params); + }, - var elementContent = this.$element.contents(); - var element = this; - elementContent.each(function(idx) { - var childElement = documentElementFromHTMLElement(this, element.canvas); - if(idx === 0 && elementContent.length > 1 && elementContent[1].nodeType === Node.ELEMENT_NODE && (childElement instanceof DocumentTextElement) && $.trim($(this).text()) === '') - return true; - if(idx > 0 && childElement instanceof DocumentTextElement) { - if(toret[toret.length-1] instanceof DocumentNodeElement && $.trim($(this).text()) === '') - return true; - } - toret.push(childElement); - }); - return toret; + fromHTMLElement: function(htmlElement, canvas) { + var $element = $(htmlElement); + if(htmlElement.nodeType === Node.ELEMENT_NODE && $element.attr('wlxml-tag')) + return DocumentNodeElement.fromHTMLElement(htmlElement, canvas); + if($element.attr('wlxml-text') !== undefined || (htmlElement.nodeType === Node.TEXT_NODE && $element.parent().attr('wlxml-text') !== undefined)) + return DocumentTextElement.fromHTMLElement(htmlElement, canvas); + return undefined; + } +}); + +$.extend(DocumentElement.prototype, { + _setupDOMHandler: function(htmlElement) { + this.$element = $(htmlElement); + }, + dom: function() { + return this.$element; }, parent: function() { - return documentElementFromHTMLElement(this.$element.parent()[0], this.canvas); + var parents = this.$element.parents('[wlxml-tag]'); + 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.$element[0] === this.$element[0]; + return other && (typeof other === typeof this) && other.dom()[0] === this.dom()[0]; }, wrapWithNodeElement: function(wlxmlNode) { - this.$element.wrap($('<' + wlxmlNode.tag + ' class="' + wlxmlNode.klass.replace('.', '-') + '">')[0]); - return documentElementFromHTMLElement(this.$element.parent().get(0), this.canvas); + var wrapper = DocumentNodeElement.create({tag: wlxmlNode.tag, klass: wlxmlNode.klass}); + this.dom().replaceWith(wrapper.dom()); + wrapper.append(this); + return wrapper; }, - childIndex: function(child) { - var children = this.children(), - toret = null; - children.forEach(function(c, idx) { - if(c.sameNode(child)) { - toret = idx; - return false; + detach: function() { + this.dom().detach(); + this.canvas = null; + }, + + 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; }, - detach: function() { - this.$element.detach(); - this.canvas = null; + 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); }; -var DocumentTextElement = function(htmlElement, canvas) { - DocumentElement.call(this, htmlElement, canvas); -}; +$.extend(DocumentNodeElement, { + createDOM: function(params) { + var dom = $('
') + .attr('wlxml-tag', params.tag); + if(params.klass) + dom.attr('wlxml-class', params.klass.replace(/\./g, '-')); + if(params.meta) { + _.keys(params.meta).forEach(function(key) { + dom.attr('wlxml-meta-'+key, params.meta[key]); + }); + } + return dom; + }, -DocumentNodeElement.prototype = new DocumentElement(); -DocumentTextElement.prototype = new DocumentElement(); + create: function(params, canvas) { + return this.fromHTMLElement(this.createDOM(params)[0]); + }, + + fromHTMLElement: function(htmlElement, canvas) { + return new this(htmlElement, canvas); + } +}); var manipulate = function(e, params, action) { - var dom; + var element; if(params instanceof DocumentElement) { - dom = params.dom() + element = params; } else { - dom = DocumentNodeElement.createDOM(params); + element = DocumentElement.create(params); } - e.$element[action](dom); - return documentElementFromHTMLElement(dom); + e.dom()[action](element.dom()); + return element; }; +DocumentNodeElement.prototype = new DocumentElement(); + $.extend(DocumentNodeElement.prototype, { append: function(params) { - manipulate(this, params, 'append'); + return manipulate(this, params, 'append'); }, before: function(params) { - manipulate(this, params, 'before'); + return manipulate(this, params, 'before'); }, after: function(params) { - manipulate(this, params, 'after'); + return manipulate(this, params, 'after'); + }, + children: function() { + var toret = []; + if(this instanceof DocumentTextElement) + return toret; + + + var elementContent = this.dom().contents(); + var element = this; + elementContent.each(function(idx) { + var childElement = DocumentElement.fromHTMLElement(this, element.canvas); + if(idx === 0 && elementContent.length > 1 && elementContent[1].nodeType === Node.ELEMENT_NODE && (childElement instanceof DocumentTextElement) && $.trim($(this).text()) === '') + return true; + if(idx > 0 && childElement instanceof DocumentTextElement) { + if(toret[toret.length-1] instanceof DocumentNodeElement && $.trim($(this).text()) === '') + return true; + } + toret.push(childElement); + }); + return toret; + }, + childIndex: function(child) { + var children = this.children(), + toret = null; + children.forEach(function(c, idx) { + if(c.sameNode(child)) { + toret = idx; + return false; + } + }); + return toret; }, getWlxmlTag: function() { - return this.$element.attr('wlxml-tag'); + return this.dom().attr('wlxml-tag'); }, setWlxmlTag: function(tag) { - this.$element.attr('wlxml-tag', tag); + this.dom().attr('wlxml-tag', tag); }, getWlxmlClass: function() { - return this.$element.attr('wlxml-class').replace('-', '.'); + var klass = this.dom().attr('wlxml-class'); + if(klass) + return klass.replace(/-/g, '.'); + return undefined; }, setWlxmlClass: function(klass) { - this.$element.attr('wlxml-class', klass); + this.getWlxmlMetaAttrs().forEach(function(attr) { + if(!classAttributes.hasMetaAttr(klass, attr.name)) + this.dom().removeAttr('wlxml-meta-' + attr.name); + }, this); + + if(klass) + this.dom().attr('wlxml-class', klass.replace(/\./g, '-')); + else + this.dom().removeAttr('wlxml-class'); }, is: function(what) { - if(what === 'list' && _.contains(['list-items', 'list-items-enum'], this.$element.attr('wlxml-class'))) + if(what === 'list' && _.contains(['list-items', 'list-items-enum'], this.dom().attr('wlxml-class'))) return true; return false; + }, + + + getWlxmlMetaAttr: function(attr) { + return this.dom().attr('wlxml-meta-'+attr); + }, + getWlxmlMetaAttrs: function() { + var toret = []; + var attrList = classAttributes.getMetaAttrsList(this.getWlxmlClass()); + attrList.all.forEach(function(attr) { + toret.push({name: attr.name, value: this.getWlxmlMetaAttr(attr.name) || ''}); + }, this); + return toret; + }, + setWlxmlMetaAttr: function(attr, value) { + this.dom().attr('wlxml-meta-'+attr, value); } }); -DocumentNodeElement.createDOM = function(params) { - var dom; - if(params.text) { - dom = $(document.createTextNode(params.text)); - } else { - dom = $('
').attr('wlxml-tag', params.tag); - if(params.klass) - dom.attr('wlxml-class', params.klass); - } - return dom; + +// DocumentNodeElement represents a text node from WLXML document rendered inside Canvas +var DocumentTextElement = function(htmlElement, canvas) { + DocumentElement.call(this, htmlElement, canvas); }; +$.extend(DocumentTextElement, { + createDOM: function(params) { + return $('
') + .attr('wlxml-text', '') + .text(params.text); + }, -DocumentNodeElement.create = function(params, canvas) { - return documentElementFromHTMLElement(DocumentNodeElement.createDOM(params)[0]); -}; + create: function(params, canvas) { + return this.fromHTMLElement(this.createDOM(params)[0]); + }, + fromHTMLElement: function(htmlElement, canvas) { + return new this(htmlElement, canvas); + } +}); + +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; + }, setText: function(text) { - this.$element[0].data = text; + this.dom().contents()[0].data = text; }, getText: function() { - return this.$element.text(); + return this.dom().text(); }, after: function(params) { if(params instanceof DocumentTextElement || params.text) return false; - var dom; + var element; if(params instanceof DocumentNodeElement) { - dom = params.dom(); + element = params; } else { - dom = DocumentNodeElement.createDOM(params); + element = DocumentNodeElement.create(params); } - this.$element.wrap('
'); - this.$element.parent().after(dom[0]); - this.$element.unwrap(); - return documentElementFromHTMLElement(dom[0]); + this.dom().wrap('
'); + this.dom().parent().after(element.dom()); + this.dom().unwrap(); + return element; }, before: function(params) { if(params instanceof DocumentTextElement || params.text) return false; - var dom; + var element; if(params instanceof DocumentNodeElement) { - dom = params.dom(); + element = params; } else { - dom = DocumentNodeElement.createDOM(params); + element = DocumentNodeElement.create(params); } - this.$element.wrap('
'); - this.$element.parent().before(dom[0]); - this.$element.unwrap(); - return documentElementFromHTMLElement(dom[0]); + this.dom().wrap('
'); + this.dom().parent().before(element.dom()); + this.dom().unwrap(); + return element; }, wrapWithNodeElement: function(wlxmlNode) { - if(wlxmlNode.start && wlxmlNode.end) { + if(typeof wlxmlNode.start === 'number' && typeof wlxmlNode.end === 'number') { return this.canvas.wrapText({ inside: this.parent(), textNodeIdx: this.parent().childIndex(this), - offsetStart: wlxmlNode.start, - offsetEnd: wlxmlNode.end, + offsetStart: Math.min(wlxmlNode.start, wlxmlNode.end), + offsetEnd: Math.max(wlxmlNode.start, wlxmlNode.end), _with: {tag: wlxmlNode.tag, klass: wlxmlNode.klass} }); } else { return DocumentElement.prototype.wrapWithNodeElement.call(this, wlxmlNode); } }, + unwrap: function() { + var parent = this.parent(), + toret; + if(parent.children().length === 1) { + toret = parent.parent(); + var grandParent = parent.parent(); + if(grandParent) { + var grandParentChildren = grandParent.children(), + idx = grandParent.childIndex(parent), + prev = idx - 1 > -1 ? grandParentChildren[idx-1] : null, + next = idx + 1 < grandParentChildren.length ? grandParentChildren[idx+1] : null; + if(prev && next) { + prev.setText(prev.getText() + this.getText() + next.getText()); + next.detach(); + } else if (prev || next) { + var target = prev ? prev : next; + target.setText(target.getText() + this.getText()); + } else { + parent.after(this); + } + } else { + parent.after(this); + } + parent.detach(); + return toret; + } + }, split: function(params) { var parentElement = this.parent(), myIdx = parentElement.childIndex(this), @@ -210,9 +361,9 @@ $.extend(DocumentTextElement.prototype, { if(prefix.length > 0) this.setText(prefix); else - this.remove(); + this.detach(); - var newElement = DocumentNodeElement.create({tag: parentElement.wlxmlTag, klass: parentElement.wlxmlClass}, myCanvas); + var newElement = DocumentNodeElement.create({tag: parentElement.getWlxmlTag(), klass: parentElement.getWlxmlClass()}, myCanvas); parentElement.after(newElement); if(suffix.length > 0) @@ -220,22 +371,12 @@ $.extend(DocumentTextElement.prototype, { succeedingChildren.forEach(function(child) { newElement.append(child); }); - } -}); -var documentElementFromHTMLElement = function(htmlElement, canvas) { - // if(!canvas) - // throw 'no canvas specified'; - if(htmlElement.nodeType === Node.ELEMENT_NODE) - return new DocumentNodeElement(htmlElement, canvas); - if(htmlElement.nodeType === Node.TEXT_NODE) - return new DocumentTextElement(htmlElement, canvas); -}; + return {first: parentElement, second: newElement}; + }, +}); return { - wrap: function(htmlElement, canvas) { - return documentElementFromHTMLElement(htmlElement, canvas); - }, DocumentElement: DocumentElement, DocumentNodeElement: DocumentNodeElement, DocumentTextElement: DocumentTextElement