X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/02a91f42fa120c3f1d5f08100cf0f85bc571b5d1..34ca0e947bbf0afdc520c025daabbe1221d69628:/modules/documentCanvas/canvas/documentElement.js?ds=sidebyside diff --git a/modules/documentCanvas/canvas/documentElement.js b/modules/documentCanvas/canvas/documentElement.js index 5e3983e..0e2cb3d 100644 --- a/modules/documentCanvas/canvas/documentElement.js +++ b/modules/documentCanvas/canvas/documentElement.js @@ -1,92 +1,255 @@ define([ -'libs/jquery-1.9.1.min' -], function($) { +'libs/jquery-1.9.1.min', +'libs/underscore-min' +], function($, _) { 'use strict'; + // DocumentElement represents a node from WLXML document rendered inside Canvas -var DocumentElement = function(htmlElement) { +var DocumentElement = function(htmlElement, canvas) { if(arguments.length === 0) return; + this.canvas = canvas; this.$element = $(htmlElement); - this.wlxmlTag = this.$element.prop('tagName'); -}; +} $.extend(DocumentElement.prototype, { + dom: function() { + return this.$element; + }, + parent: function() { + var parents = this.$element.parents('[wlxml-tag]'); + if(parents.length) + return documentElementFromHTMLElement(parents[0], this.canvas); + return null; + }, + + 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; + } +}); + + +var DocumentNodeElement = function(htmlElement, canvas) { + DocumentElement.call(this, htmlElement, canvas); +}; + +var DocumentTextElement = function(htmlElement, canvas) { + DocumentElement.call(this, htmlElement, canvas); +}; + +DocumentNodeElement.prototype = new DocumentElement(); +DocumentTextElement.prototype = new DocumentElement(); + +var manipulate = function(e, params, action) { + var dom; + if(params instanceof DocumentElement) { + dom = params.dom() + } else { + dom = DocumentNodeElement.createDOM(params); + } + e.dom()[action](dom); + return documentElementFromHTMLElement(dom); +}; + +$.extend(DocumentNodeElement.prototype, { + append: function(params) { + manipulate(this, params, 'append'); + }, + before: function(params) { + manipulate(this, params, 'before'); + + }, + after: function(params) { + manipulate(this, params, 'after'); + }, children: function() { var toret = []; if(this instanceof DocumentTextElement) return toret; - var elementContent = this.$element.contents(); + var elementContent = this.dom().contents(); + var element = this; elementContent.each(function(idx) { - var element = documentElementFromHTMLElement(this); - if(idx === 0 && elementContent.length > 1 && elementContent[1].nodeType === Node.ELEMENT_NODE && (element instanceof DocumentTextElement) && $.trim($(this).text()) === '') + 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 && element instanceof DocumentTextElement) { + if(idx > 0 && childElement instanceof DocumentTextElement) { if(toret[toret.length-1] instanceof DocumentNodeElement && $.trim($(this).text()) === '') return true; } - toret.push(element); + toret.push(childElement); }); return toret; }, - parent: function() { - return documentElementFromHTMLElement(this.$element.parent()[0]); + childIndex: function(child) { + var children = this.children(), + toret = null; + children.forEach(function(c, idx) { + if(c.sameNode(child)) { + toret = idx; + return false; + } + }); + return toret; }, - - sameNode: function(other) { - return other && (typeof other === typeof this) && other.$element[0] === this.$element[0]; + getWlxmlTag: function() { + return this.dom().attr('wlxml-tag'); }, - - wrapWithNodeElement: function(wlxmlNode) { - this.$element.wrap($('<' + wlxmlNode.tag + ' class="' + wlxmlNode.klass + '"">')[0]); - return documentElementFromHTMLElement(this.$element.parent().get(0)); + setWlxmlTag: function(tag) { + this.dom().attr('wlxml-tag', tag); + }, + getWlxmlClass: function() { + var klass = this.dom().attr('wlxml-class'); + if(klass) + return klass.replace('-', '.'); + return undefined; + }, + setWlxmlClass: function(klass) { + if(klass) + this.dom().attr('wlxml-class', klass); + else + this.dom().removeAttr('wlxml-class'); + }, + is: function(what) { + if(what === 'list' && _.contains(['list-items', 'list-items-enum'], this.dom().attr('wlxml-class'))) + return true; + return false; } }); -var DocumentNodeElement = function(htmlElement) { - DocumentElement.call(this, htmlElement); +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; }; -var DocumentTextElement = function(htmlElement) { - DocumentElement.call(this, htmlElement); + +DocumentNodeElement.create = function(params, canvas) { + return documentElementFromHTMLElement(DocumentNodeElement.createDOM(params)[0]); }; -DocumentNodeElement.prototype = new DocumentElement(); -DocumentTextElement.prototype = new DocumentElement(); -$.extend(DocumentNodeElement.prototype, { - append: function(params) { - var to_append = DocumentNodeElement.createDOM(params.tag, params.klass); - this.$element.append(to_append); - return documentElementFromHTMLElement(to_append); +$.extend(DocumentTextElement.prototype, { + setText: function(text) { + this.dom()[0].data = text; + }, + getText: function() { + return this.dom().text(); }, after: function(params) { - var to_append = DocumentNodeElement.createDOM(params.tag, params.klass); - this.$element.after(to_append); - return documentElementFromHTMLElement(to_append); + if(params instanceof DocumentTextElement || params.text) + return false; + var dom; + if(params instanceof DocumentNodeElement) { + dom = params.dom(); + } else { + dom = DocumentNodeElement.createDOM(params); + } + this.dom().wrap('
'); + this.dom().parent().after(dom[0]); + this.dom().unwrap(); + return documentElementFromHTMLElement(dom[0]); + }, + before: function(params) { + if(params instanceof DocumentTextElement || params.text) + return false; + var dom; + if(params instanceof DocumentNodeElement) { + dom = params.dom(); + } else { + dom = DocumentNodeElement.createDOM(params); + } + this.dom().wrap('
'); + this.dom().parent().before(dom[0]); + this.dom().unwrap(); + return documentElementFromHTMLElement(dom[0]); + }, + wrapWithNodeElement: function(wlxmlNode) { + if(typeof wlxmlNode.start === 'number' && typeof wlxmlNode.end === 'number') { + return this.canvas.wrapText({ + inside: this.parent(), + textNodeIdx: this.parent().childIndex(this), + 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() { + if(this.parent().children().length === 1) { + var parent = this.parent(); + parent.after(this); + parent.detach(); + } + }, + split: function(params) { + var parentElement = this.parent(), + myIdx = parentElement.childIndex(this), + myCanvas = this.canvas, + passed = false, + succeedingChildren = [], + thisElement = this, + prefix = this.getText().substr(0, params.offset), + suffix = this.getText().substr(params.offset); + + parentElement.children().forEach(function(child) { + if(passed) + succeedingChildren.push(child); + if(child.sameNode(thisElement)) + passed = true; + }); + + if(prefix.length > 0) + this.setText(prefix); + else + this.detach(); + + var newElement = DocumentNodeElement.create({tag: parentElement.getWlxmlTag(), klass: parentElement.getWlxmlClass()}, myCanvas); + parentElement.after(newElement); + + if(suffix.length > 0) + newElement.append({text: suffix}); + succeedingChildren.forEach(function(child) { + newElement.append(child); + }); } }); -DocumentNodeElement.createDOM = function(tag, klass) { - var dom = $('<' + tag + '>'); - if(klass) - dom.attr('class', klass); - return dom; -}; - -var documentElementFromHTMLElement = function(htmlElement) { +var documentElementFromHTMLElement = function(htmlElement, canvas) { + // if(!canvas) + // throw 'no canvas specified'; if(htmlElement.nodeType === Node.ELEMENT_NODE) - return new DocumentNodeElement(htmlElement); + return new DocumentNodeElement(htmlElement, canvas); if(htmlElement.nodeType === Node.TEXT_NODE) - return new DocumentTextElement(htmlElement); + return new DocumentTextElement(htmlElement, canvas); }; return { - wrap: function(htmlElement) { - return documentElementFromHTMLElement(htmlElement); + wrap: function(htmlElement, canvas) { + return documentElementFromHTMLElement(htmlElement, canvas); }, DocumentElement: DocumentElement, DocumentNodeElement: DocumentNodeElement,