modules/documentCanvas/canvas.js

   1 define([\r
   2 'libs/jquery-1.9.1.min',\r
   3 'libs/underscore-min',\r
   4 'modules/documentCanvas/transformations',\r
   5 'modules/documentCanvas/wlxmlNode',\r
   6 'libs/text!./template.html'\r
   7 ], function($, _, transformations, wlxmlNode, template) {\r
   8 \r
   9 'use strict';\r
  10 \r
  11 var Canvas = function(xml) {\r
  12     this.dom = $(template);\r
  13     this.content = this.dom.find('#rng-module-documentCanvas-content');\r
  14     this.setXML(xml);\r
  15 }\r
  16 \r
  17 Canvas.prototype.setXML = function(xml) {\r
  18     this.xml = xml;\r
  19     this.content.html(transformations.fromXML.getHTMLTree(xml));  \r
  20 }\r
  21 \r
  22 Canvas.prototype.toXML = function() {\r
  23     return transformations.toXML.getXML(this.content.html());\r
  24 }\r
  25 \r
  26 Canvas.prototype.getNode = function(desc) {\r
  27     var selector = '';\r
  28     if(desc.klass)\r
  29         selector += '[wlxml-class=' + desc.klass + ']';\r
  30     if(desc.tag)\r
  31         selector += '[wlxml-tag=' + desc.tag + ']';\r
  32     var toret = [];\r
  33     this.content.find(selector).each(function() {\r
  34         toret.push(new wlxmlNode.Node($(this)));\r
  35     });\r
  36     return toret;\r
  37 }\r
  38 \r
  39 Canvas.prototype._createNode = function(wlxmlTag, wlxmlClass) {\r
  40             var toBlock = ['div', 'document', 'section', 'header'];\r
  41             var htmlTag = _.contains(toBlock, wlxmlTag) ? 'div' : 'span';\r
  42             var toret = $('<' + htmlTag + '>');\r
  43             toret.attr('wlxml-tag', wlxmlTag);\r
  44             if(wlxmlClass)\r
  45                 toret.attr('wlxml-class', wlxmlClass);\r
  46             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);}));\r
  47             return toret;\r
  48         };\r
  49 \r
  50 Canvas.prototype.insertNode = function(options) {\r
  51     var element = $(this.content.find('#' + options.context.id).get(0));\r
  52     if(options.place == 'after')\r
  53         element[options.place](this._createNode(options.tag, options.klass));\r
  54     else if(options.place == 'wrapText') {\r
  55         var elementContents = element.contents();\r
  56         if(elementContents.length !== 1 || elementContents.get(0).nodeType != 3)\r
  57             return false;\r
  58         var textElement = elementContents.get(0);\r
  59 \r
  60         var prefix = textElement.data.substr(0, options.offsetStart);\r
  61         var suffix = textElement.data.substr(options.offsetEnd);\r
  62         var core = textElement.data.substr(options.offsetStart, options.offsetEnd - options.offsetStart);\r
  63         var newNode = this._createNode(options.tag, options.klass);\r
  64         newNode.text(core);\r
  65         $(textElement).replaceWith(newNode);\r
  66         newNode.before(prefix);\r
  67         newNode.after(suffix);\r
  68     }\r
  69 }\r
  70 \r
  71 Canvas.prototype.splitNode = function(options) {\r
  72     options = _.extend({textNodeIdx: 0}, options);\r
  73     \r
  74     var nodeToSplit = $(this.content.find('#' + options.node.id).get(0));\r
  75     \r
  76     var nodeContents = nodeToSplit.contents();\r
  77     if(nodeContents.length === 0 || \r
  78        nodeContents.length - 1 < options.textNodeIdx || \r
  79        nodeContents.get(options.textNodeIdx).nodeType != 3)\r
  80         return false;\r
  81     \r
  82     var textNode = $(nodeContents.get(options.textNodeIdx));\r
  83 \r
  84     var succeedingNodes = [];\r
  85     var passed = false;\r
  86     nodeContents.each(function() {\r
  87         var node = this;\r
  88         if(passed)\r
  89             succeedingNodes.push(node);\r
  90         if(node.isSameNode(textNode.get(0)))\r
  91             passed = true;\r
  92     });\r
  93     \r
  94     var prefix = textNode.text().substr(0, options.offset);\r
  95     var suffix = textNode.text().substr(options.offset);\r
  96     \r
  97     textNode.before(prefix);\r
  98     textNode.remove();\r
  99     \r
 100     var newNode = this._createNode(nodeToSplit.attr('wlxml-tag'), nodeToSplit.attr('wlxml-class'));\r
 101     newNode.append(suffix);\r
 102     succeedingNodes.forEach(function(node) {\r
 103         newNode.append(node)\r
 104     });\r
 105     nodeToSplit.after(newNode);\r
 106     return newNode;\r
 107 }\r
 108 \r
 109 Canvas.prototype.removeNode = function(options) {\r
 110     var toRemove = $(this.content.find('#' + options.node.id).get(0));\r
 111     toRemove.remove();\r
 112 \r
 113 }\r
 114 \r
 115 Canvas.prototype.createList = function(options) {\r
 116     var element1 = $(this.content.find('#' + options.start.id).get(0));\r
 117     var element2 = $(this.content.find('#' + options.end.id).get(0));\r
 118     if(!element1.parent().get(0).isSameNode(element2.parent().get(0)))\r
 119         return false;\r
 120         \r
 121     var parent = element1.parent();\r
 122     var nodesToWrap = [];\r
 123     \r
 124     var place = 'before';\r
 125     var canvas = this;\r
 126     parent.contents().each(function() {\r
 127         var node = this;\r
 128         if(node.isSameNode(element1.get(0)))\r
 129             place = 'inside';\r
 130         if(place === 'inside') {\r
 131             var $node;\r
 132             if(node.nodeType === 3) {\r
 133                 $node = canvas._createNode('div').text(node.data);\r
 134                 $(node).remove();\r
 135             }\r
 136             else {\r
 137                 $node = $(node);\r
 138             }\r
 139             $node.attr('wlxml-class', 'list.item');\r
 140             nodesToWrap.push($node);\r
 141         }\r
 142         if(node.isSameNode(element2.get(0)))\r
 143             return;\r
 144     });\r
 145     \r
 146     var list = this._createNode('div', 'list');\r
 147     element1.before(list);\r
 148     \r
 149     nodesToWrap.forEach(function(node) {\r
 150         node.remove();\r
 151         list.append(node);\r
 152     });\r
 153     \r
 154     \r
 155     \r
 156 }\r
 157 \r
 158 \r
 159 return {Canvas: Canvas, Node: Node};\r
 160 \r
 161 });