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