X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/4c81ad4075b0e8e67f984cce3494f9853179a9d6..8bf6c2bb6ef0a358a3591d19d6aff7a1f7f22b92:/modules/documentCanvas/canvas.js?ds=inline diff --git a/modules/documentCanvas/canvas.js b/modules/documentCanvas/canvas.js index 44f88a9..9177968 100644 --- a/modules/documentCanvas/canvas.js +++ b/modules/documentCanvas/canvas.js @@ -2,152 +2,227 @@ define([ 'libs/jquery-1.9.1.min', 'libs/underscore-min', 'modules/documentCanvas/transformations', -'modules/documentCanvas/wlxmlNode', +'modules/documentCanvas/canvasNode', 'libs/text!./template.html' -], function($, _, transformations, wlxmlNode, template) { +], function($, _, transformations, canvasNode, template) { 'use strict'; -var Canvas = function(xml) { - this.xml = xml; +var Canvas = function(html) { this.dom = $(template); - - this.content = this.dom.find('#rng-module-documentCanvas-content') - - - this.content.html(transformations.fromXML.getHTMLTree(xml)); -} + this.content = this.dom.find('#rng-module-documentCanvas-content'); + this.setHTML(html); +}; -Canvas.prototype.toXML = function() { - return transformations.toXML.getXML(this.content.html()); -} +Canvas.prototype.setHTML = function(html) { + if(html) { + this.content.html(html); + } +}; + +Canvas.prototype.getContent = function() { + return this.content.contents(); +}; -Canvas.prototype.getNode = function(desc) { +Canvas.prototype.findNodes = function(desc) { var selector = ''; - if(desc.klass) - selector += '[wlxml-class=' + desc.klass + ']'; - if(desc.tag) - selector += '[wlxml-tag=' + desc.tag + ']'; + if(typeof desc === 'string') { + selector = desc; + } + else { + if(desc.klass) + selector += '[wlxml-class=' + desc.klass + ']'; + if(desc.tag) + selector += '[wlxml-tag=' + desc.tag + ']'; + } var toret = []; this.content.find(selector).each(function() { - toret.push(new wlxmlNode.Node($(this))); + toret.push(canvasNode.create($(this))); }); return toret; +}; + +Canvas.prototype.getNodeById = function(id) { + return canvasNode.create($(this.content.find('#' +id))); } -Canvas.prototype._createNode = function(wlxmlTag, wlxmlClass) { - var toBlock = ['div', 'document', 'section', 'header']; - var htmlTag = _.contains(toBlock, wlxmlTag) ? 'div' : 'span'; - var toret = $('<' + htmlTag + '>'); - toret.attr('wlxml-tag', wlxmlTag); - if(wlxmlClass) - toret.attr('wlxml-class', wlxmlClass); - 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);})); - return toret; - }; - -Canvas.prototype.insertNode = function(options) { - var element = $(this.content.find('#' + options.context.id).get(0)); - if(options.place == 'after') - element[options.place](this._createNode(options.tag, options.klass)); - else if(options.place == 'wrapText') { - var elementContents = element.contents(); - if(elementContents.length !== 1 || elementContents.get(0).nodeType != 3) - return false; - var textElement = elementContents.get(0); - - var prefix = textElement.data.substr(0, options.offsetStart); - var suffix = textElement.data.substr(options.offsetEnd); - var core = textElement.data.substr(options.offsetStart, options.offsetEnd - options.offsetStart); - var newNode = this._createNode(options.tag, options.klass); - newNode.text(core); - $(textElement).replaceWith(newNode); - newNode.before(prefix); - newNode.after(suffix); +Canvas.prototype.nodeAppend = function(options) { + var element; // = $(this.content.find('#' + options.context.id).get(0)); + if(options.to === 'root') { + element = this.content; + } else { + element = $(this.content.find('#' + options.to.getId()).get(0)); } -} + element.append(options.node.dom); +}; + +Canvas.prototype.nodeInsertAfter = function(options) { + var element = $(this.content.find('#' + options.after.getId()).get(0)); + element.after(options.node.dom); +}; + +Canvas.prototype.nodeWrap = function(options) { + var element = $(this.content.find('#' + options.inside.getId()).get(0)); + + var elementContents = element.contents(); + if(elementContents.length !== 1 || elementContents.get(0).nodeType != 3) + return false; + var textElement = elementContents.get(0); + + var prefix = textElement.data.substr(0, options.offsetStart); + var suffix = textElement.data.substr(options.offsetEnd); + var core = textElement.data.substr(options.offsetStart, options.offsetEnd - options.offsetStart); + options._with.setContent(core); -Canvas.prototype.splitNode = function(options) { + $(textElement).replaceWith(options._with.dom); + options._with.dom.before(prefix); + options._with.dom.after(suffix); +}; + +Canvas.prototype.nodeSplit = function(options) { options = _.extend({textNodeIdx: 0}, options); - var element = $(this.content.find('#' + options.node.id).get(0)); + var nodeToSplit = $(this.content.find('#' + options.node.getId()).get(0)); - var elementContents = element.contents(); - if(elementContents.length === 0 || - elementContents.length - 1 < options.textNodeIdx || - elementContents.get(options.textNodeIdx).nodeType != 3) + var nodeContents = nodeToSplit.contents(); + if(nodeContents.length === 0 || + nodeContents.length - 1 < options.textNodeIdx || + nodeContents.get(options.textNodeIdx).nodeType != 3) return false; - var textElement = elementContents.get(options.textNodeIdx); + var textNode = $(nodeContents.get(options.textNodeIdx)); var succeedingNodes = []; var passed = false; - elementContents.each(function() { + nodeContents.each(function() { var node = this; if(passed) succeedingNodes.push(node); - if(node.isSameNode(textElement)) + if(node === textNode.get(0)) passed = true; }); - var prefix = textElement.data.substr(0, options.offset); - var suffix = textElement.data.substr(options.offset); + var prefix = $.trim(textNode.text().substr(0, options.offset)); + var suffix = $.trim(textNode.text().substr(options.offset)); - var $textElement = $(textElement); - $textElement.before(prefix); - $textElement.remove(); - var newNode = this._createNode(element.attr('wlxml-tag'), element.attr('wlxml-class')); - newNode.append(suffix); + textNode.before(prefix); + textNode.remove(); + + var newNode = canvasNode.create({tag: nodeToSplit.attr('wlxml-tag'), klass: nodeToSplit.attr('wlxml-class')}); + newNode.dom.append(suffix); succeedingNodes.forEach(function(node) { - newNode.append(node) + newNode.dom.append(node) }); - element.after(newNode); -} + nodeToSplit.after(newNode.dom); + return newNode; +}; + +Canvas.prototype.nodeRemove = function(options) { + var toRemove = $(this.content.find('#' + options.node.getId()).get(0)); + toRemove.remove(); +}; -Canvas.prototype.createList = function(options) { - var element1 = $(this.content.find('#' + options.start.id).get(0)); - var element2 = $(this.content.find('#' + options.end.id).get(0)); - if(!element1.parent().get(0).isSameNode(element2.parent().get(0))) +Canvas.prototype.listCreate = function(options) { + var element1 = $(this.content.find('#' + options.start.getId()).get(0)); + var element2 = $(this.content.find('#' + options.end.getId()).get(0)); + if(!element1.parent().get(0) === element2.parent().get(0)) return false; var parent = element1.parent(); + + if(parent.contents().index(element1) > parent.contents().index(element2)) { + var tmp = element1; + element1 = element2; + element2 = tmp; + } + var nodesToWrap = []; var place = 'before'; var canvas = this; parent.contents().each(function() { var node = this; - if(node.isSameNode(element1.get(0))) + if(node === element1.get(0)) place = 'inside'; if(place === 'inside') { var $node; if(node.nodeType === 3) { - $node = canvas._createNode('div').text(node.data); + $node = canvasNode.create({tag: 'div', content: $.trim(node.data)}).dom; //canvas._createNode('div').text(node.data); $(node).remove(); } else { $node = $(node); } - $node.attr('wlxml-class', 'list.item'); + $node.attr('wlxml-class', 'item'); nodesToWrap.push($node); } - if(node.isSameNode(element2.get(0))) - return; + if(node === element2.get(0)) + return false; }); - var list = this._createNode('div', 'list'); - element1.before(list); + var list = canvasNode.create({tag: 'div', klass: 'list-items' + (options.type === 'enum' ? '-enum' : '')}).dom; //this._createNode('div', 'list-items'); + + var parentNode = options.start.parent(); + + var toret; + if(parentNode && parentNode.isOfClass('list-items')) { + list.wrap('