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     }\r
  80 }\r
  81 \r
  82 Canvas.prototype.splitNode = function(options) {\r
  83     options = _.extend({textNodeIdx: 0}, options);\r
  84     \r
  85     var nodeToSplit = $(this.content.find('#' + options.node.id).get(0));\r
  86     \r
  87     var nodeContents = nodeToSplit.contents();\r
  88     if(nodeContents.length === 0 || \r
  89        nodeContents.length - 1 < options.textNodeIdx || \r
  90        nodeContents.get(options.textNodeIdx).nodeType != 3)\r
  91         return false;\r
  92     \r
  93     var textNode = $(nodeContents.get(options.textNodeIdx));\r
  94 \r
  95     var succeedingNodes = [];\r
  96     var passed = false;\r
  97     nodeContents.each(function() {\r
  98         var node = this;\r
  99         if(passed)\r
 100             succeedingNodes.push(node);\r
 101         if(node.isSameNode(textNode.get(0)))\r
 102             passed = true;\r
 103     });\r
 104     \r
 105     var prefix = textNode.text().substr(0, options.offset);\r
 106     var suffix = textNode.text().substr(options.offset);\r
 107     \r
 108     textNode.before(prefix);\r
 109     textNode.remove();\r
 110     \r
 111     var newNode = this._createNode(nodeToSplit.attr('wlxml-tag'), nodeToSplit.attr('wlxml-class'));\r
 112     newNode.append(suffix);\r
 113     succeedingNodes.forEach(function(node) {\r
 114         newNode.append(node)\r
 115     });\r
 116     nodeToSplit.after(newNode);\r
 117     return newNode;\r
 118 }\r
 119 \r
 120 Canvas.prototype.removeNode = function(options) {\r
 121     var toRemove = $(this.content.find('#' + options.node.id).get(0));\r
 122     toRemove.remove();\r
 123 \r
 124 }\r
 125 \r
 126 Canvas.prototype.createList = function(options) {\r
 127     var element1 = $(this.content.find('#' + options.start.id).get(0));\r
 128     var element2 = $(this.content.find('#' + options.end.id).get(0));\r
 129     if(!element1.parent().get(0).isSameNode(element2.parent().get(0)))\r
 130         return false;\r
 131         \r
 132     var parent = element1.parent();\r
 133     var nodesToWrap = [];\r
 134     \r
 135     var place = 'before';\r
 136     var canvas = this;\r
 137     parent.contents().each(function() {\r
 138         var node = this;\r
 139         if(node.isSameNode(element1.get(0)))\r
 140             place = 'inside';\r
 141         if(place === 'inside') {\r
 142             var $node;\r
 143             if(node.nodeType === 3) {\r
 144                 $node = canvas._createNode('div').text(node.data);\r
 145                 $(node).remove();\r
 146             }\r
 147             else {\r
 148                 $node = $(node);\r
 149             }\r
 150             $node.attr('wlxml-class', 'item');\r
 151             nodesToWrap.push($node);\r
 152         }\r
 153         if(node.isSameNode(element2.get(0)))\r
 154             return false;\r
 155     });\r
 156     \r
 157     var list = this._createNode('div', 'list-items');\r
 158     element1.before(list);\r
 159     \r
 160     nodesToWrap.forEach(function(node) {\r
 161         node.remove();\r
 162         list.append(node);\r
 163     });\r
 164 }\r
 165 \r
 166 Canvas.prototype.removeList = function(options) {\r
 167     var pointerElement = $(this.content.find('#' + options.pointer.id));\r
 168     var listElement = options.pointer.klass === 'list-items' ? pointerElement : \r
 169         pointerElement.parent('[wlxml-class="list-items"][wlxml-tag]');\r
 170     \r
 171     listElement.find('[wlxml-class=item]').each(function() {\r
 172         $(this).attr('wlxml-class', '');\r
 173     });;\r
 174     listElement.children().unwrap();\r
 175     \r
 176 }\r
 177 \r
 178 Canvas.prototype.insideList = function(options) {\r
 179     if(options.pointer) {\r
 180         if(options.pointer.klass === 'list-items' || options.pointer.klass === 'item')\r
 181             return true;\r
 182         var pointerElement = $(this.content.find('#' + options.pointer.id));\r
 183         return pointerElement.parents('list-items').length > 0;\r
 184     }\r
 185     return false;\r
 186 }\r
 187 \r
 188 \r
 189 return {Canvas: Canvas, Node: Node};\r
 190 \r
 191 });