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 = $.trim(xml);\r
  19     this.content.html(transformations.fromXML.getHTMLTree(this.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.getPreviousNode = function(options) {\r
  40     var element = $(this.content.find('#' + options.node.id).get(0));\r
  41     var prev = element.prev()\r
  42     if(prev.length === 0)\r
  43         prev = element.parent();\r
  44     return new wlxmlNode.Node(prev);\r
  45 }\r
  46 \r
  47 Canvas.prototype._createNode = function(wlxmlTag, wlxmlClass) {\r
  48             var toBlock = ['div', 'document', 'section', 'header'];\r
  49             var htmlTag = _.contains(toBlock, wlxmlTag) ? 'div' : 'span';\r
  50             var toret = $('<' + htmlTag + '>');\r
  51             toret.attr('wlxml-tag', wlxmlTag);\r
  52             if(wlxmlClass)\r
  53                 toret.attr('wlxml-class', wlxmlClass);\r
  54             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
  55             return toret;\r
  56         };\r
  57 \r
  58 Canvas.prototype.insertNode = function(options) {\r
  59     var element = $(this.content.find('#' + options.context.id).get(0));\r
  60     if(options.place == 'after') {\r
  61         var node = this._createNode(options.tag, options.klass);\r
  62         element[options.place](node);\r
  63         return node;\r
  64     }\r
  65     else if(options.place == 'wrapText') {\r
  66         var elementContents = element.contents();\r
  67         if(elementContents.length !== 1 || elementContents.get(0).nodeType != 3)\r
  68             return false;\r
  69         var textElement = elementContents.get(0);\r
  70 \r
  71         var prefix = textElement.data.substr(0, options.offsetStart);\r
  72         var suffix = textElement.data.substr(options.offsetEnd);\r
  73         var core = textElement.data.substr(options.offsetStart, options.offsetEnd - options.offsetStart);\r
  74         var newNode = this._createNode(options.tag, options.klass);\r
  75         newNode.text(core);\r
  76         $(textElement).replaceWith(newNode);\r
  77         newNode.before(prefix);\r
  78         newNode.after(suffix);\r
  79         return newNode;\r
  80     }\r
  81 }\r
  82 \r
  83 Canvas.prototype.splitNode = function(options) {\r
  84     options = _.extend({textNodeIdx: 0}, options);\r
  85     \r
  86     var nodeToSplit = $(this.content.find('#' + options.node.id).get(0));\r
  87     \r
  88     var nodeContents = nodeToSplit.contents();\r
  89     if(nodeContents.length === 0 || \r
  90        nodeContents.length - 1 < options.textNodeIdx || \r
  91        nodeContents.get(options.textNodeIdx).nodeType != 3)\r
  92         return false;\r
  93     \r
  94     var textNode = $(nodeContents.get(options.textNodeIdx));\r
  95 \r
  96     var succeedingNodes = [];\r
  97     var passed = false;\r
  98     nodeContents.each(function() {\r
  99         var node = this;\r
 100         if(passed)\r
 101             succeedingNodes.push(node);\r
 102         if(node.isSameNode(textNode.get(0)))\r
 103             passed = true;\r
 104     });\r
 105     \r
 106     var prefix = textNode.text().substr(0, options.offset);\r
 107     var suffix = textNode.text().substr(options.offset);\r
 108     \r
 109     textNode.before(prefix);\r
 110     textNode.remove();\r
 111     \r
 112     var newNode = this._createNode(nodeToSplit.attr('wlxml-tag'), nodeToSplit.attr('wlxml-class'));\r
 113     newNode.append(suffix);\r
 114     succeedingNodes.forEach(function(node) {\r
 115         newNode.append(node)\r
 116     });\r
 117     nodeToSplit.after(newNode);\r
 118     return newNode;\r
 119 }\r
 120 \r
 121 Canvas.prototype.removeNode = function(options) {\r
 122     var toRemove = $(this.content.find('#' + options.node.id).get(0));\r
 123     toRemove.remove();\r
 124 \r
 125 }\r
 126 \r
 127 Canvas.prototype.createList = function(options) {\r
 128     var element1 = $(this.content.find('#' + options.start.id).get(0));\r
 129     var element2 = $(this.content.find('#' + options.end.id).get(0));\r
 130     if(!element1.parent().get(0).isSameNode(element2.parent().get(0)))\r
 131         return false;\r
 132         \r
 133     var parent = element1.parent();\r
 134     var nodesToWrap = [];\r
 135     \r
 136     var place = 'before';\r
 137     var canvas = this;\r
 138     parent.contents().each(function() {\r
 139         var node = this;\r
 140         if(node.isSameNode(element1.get(0)))\r
 141             place = 'inside';\r
 142         if(place === 'inside') {\r
 143             var $node;\r
 144             if(node.nodeType === 3) {\r
 145                 $node = canvas._createNode('div').text(node.data);\r
 146                 $(node).remove();\r
 147             }\r
 148             else {\r
 149                 $node = $(node);\r
 150             }\r
 151             $node.attr('wlxml-class', 'item');\r
 152             nodesToWrap.push($node);\r
 153         }\r
 154         if(node.isSameNode(element2.get(0)))\r
 155             return false;\r
 156     });\r
 157     \r
 158     var list = this._createNode('div', 'list-items');\r
 159     element1.before(list);\r
 160     \r
 161     nodesToWrap.forEach(function(node) {\r
 162         node.remove();\r
 163         list.append(node);\r
 164     });\r
 165 }\r
 166 \r
 167 Canvas.prototype.removeList = function(options) {\r
 168     var pointerElement = $(this.content.find('#' + options.pointer.id));\r
 169     var listElement = options.pointer.klass === 'list-items' ? pointerElement : \r
 170         pointerElement.parent('[wlxml-class="list-items"][wlxml-tag]');\r
 171     \r
 172     listElement.find('[wlxml-class=item]').each(function() {\r
 173         $(this).attr('wlxml-class', '');\r
 174     });;\r
 175     listElement.children().unwrap();\r
 176     \r
 177 }\r
 178 \r
 179 Canvas.prototype.insideList = function(options) {\r
 180     if(options.pointer) {\r
 181         if(options.pointer.klass === 'list-items' || options.pointer.klass === 'item')\r
 182             return true;\r
 183         var pointerElement = $(this.content.find('#' + options.pointer.id));\r
 184         return pointerElement.parents('list-items').length > 0;\r
 185     }\r
 186     return false;\r
 187 }\r
 188 \r
 189 \r
 190 return {Canvas: Canvas, Node: Node};\r
 191 \r
 192 });