From: Aleksander Ɓukasz Date: Tue, 9 Jul 2013 09:20:26 +0000 (+0200) Subject: integration wip: changing representation of a DocumentNode from naive 1:1 to xml X-Git-Url: https://git.mdrn.pl/fnpeditor.git/commitdiff_plain/0b195120fbfdc78b01142167f82dbe8e5670da4b integration wip: changing representation of a DocumentNode from naive 1:1 to xml --- diff --git a/modules/documentCanvas/canvas/canvas.js b/modules/documentCanvas/canvas/canvas.js index 5ec69ea..ba7daef 100644 --- a/modules/documentCanvas/canvas/canvas.js +++ b/modules/documentCanvas/canvas/canvas.js @@ -13,11 +13,26 @@ var Canvas = function(wlxml) { $.extend(Canvas.prototype, { loadWlxml: function(wlxml) { - var xml = $.parseXML(wlxml); - this.d = xml !== null ? $(xml.childNodes[0]) : null; - if(this.d) { + var d = wlxml ? $($.trim(wlxml)) : null; + if(d) { var wrapper = $('
'); - wrapper.append(this.d); + wrapper.append(d); + + wrapper.find('*').replaceWith(function() { + var currentTag = $(this); + if(currentTag.attr('wlxml-tag')) + return; + var toret = $('
').attr('wlxml-tag', currentTag.prop('tagName').toLowerCase()); + toret.attr('id', 'xxxxxxxx-xxxx-xxxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {var r = Math.random()*16|0,v=c=='x'?r:r&0x3|0x8;return v.toString(16);})); + for(var i = 0; i < this.attributes.length; i++) { + var attr = this.attributes.item(i); + var value = attr.name === 'class' ? attr.value.replace(/\./g, '-') : attr.value; + toret.attr('wlxml-' + attr.name, value); + } + toret.append(currentTag.contents()); + return toret; + }); + wrapper.find(':not(iframe)').addBack().contents() .filter(function() {return this.nodeType === Node.TEXT_NODE}) .each(function() { @@ -25,9 +40,9 @@ $.extend(Canvas.prototype, { var el = $(this); // TODO: use DocumentElement API - var spanParent = el.parent().prop('tagName') === 'span', - spanBefore = el.prev().length > 0 && $(el.prev()[0]).prop('tagName') === 'span', - spanAfter = el.next().length > 0 && $(el.next()[0]).prop('tagName') === 'span'; + var spanParent = el.parent().attr('wlxml-tag') === 'span', + spanBefore = el.prev().length > 0 && $(el.prev()[0]).attr('wlxml-tag') === 'span', + spanAfter = el.next().length > 0 && $(el.next()[0]).attr('wlxml-tag') === 'span'; if(spanParent || spanBefore || spanAfter) { var startSpace = /\s/g.test(this.data.substr(0,1)); @@ -41,8 +56,12 @@ $.extend(Canvas.prototype, { this.data = $.trim(this.data); } }); + + this.d = wrapper.children(0); this.d.unwrap(); - }; + } else { + this.d = null; + } }, doc: function() { diff --git a/modules/documentCanvas/canvas/documentElement.js b/modules/documentCanvas/canvas/documentElement.js index da9b148..0d08aab 100644 --- a/modules/documentCanvas/canvas/documentElement.js +++ b/modules/documentCanvas/canvas/documentElement.js @@ -13,9 +13,8 @@ var DocumentElement = function(htmlElement, canvas) { this.canvas = canvas; this.$element = $(htmlElement); - var tagNameProp = this.$element.prop('tagName'); - this.wlxmlTag = tagNameProp ? tagNameProp.toLowerCase() : undefined; -}; + this.wlxmlTag = this.$element.attr('wlxml-tag'); +} $.extend(DocumentElement.prototype, { dom: function() { @@ -110,7 +109,7 @@ $.extend(DocumentNodeElement.prototype, { this.$element.attr('class', klass); }, is: function(what) { - if(what === 'list' && _.contains(['list-items', 'list-items-enum'], this.$element.attr('class'))) + if(what === 'list' && _.contains(['list-items', 'list-items-enum'], this.$element.attr('wlxml-class'))) return true; return false; } @@ -121,9 +120,9 @@ DocumentNodeElement.createDOM = function(params) { if(params.text) { dom = $(document.createTextNode(params.text)); } else { - dom = $('<' + params.tag + '>'); + dom = $('
').attr('wlxml-tag', params.tag); if(params.klass) - dom.attr('class', params.klass); + dom.attr('wlxml-class', params.klass); } return dom; }; diff --git a/modules/documentCanvas/nodes.less b/modules/documentCanvas/nodes.less index 3c52bce..57e4385 100644 --- a/modules/documentCanvas/nodes.less +++ b/modules/documentCanvas/nodes.less @@ -8,7 +8,7 @@ text-indent: 0; } -span[wlxml-tag] { +[wlxml-tag=span] { display:inline-block; min-width: 10px; }