modules/documentCanvas/documentCanvas.js

   1 // Module that implements main WYSIWIG edit area\r
   2 \r
   3 define([\r
   4 'libs/underscore-min',\r
   5 './transformations', \r
   6 './wlxmlNode',\r
   7 './canvas',\r
   8 './canvasManager',\r
   9 'libs/text!./template.html'], function(_, transformations, wlxmlNode, Canvas, CanvasManager, template) {\r
  10 \r
  11 'use strict';\r
  12 \r
  13 return function(sandbox) {\r
  14 \r
  15     var canvas = new Canvas.Canvas();\r
  16     \r
  17     var manager = new CanvasManager(canvas, sandbox);\r
  18     \r
  19 \r
  20     var view = {\r
  21 \r
  22         insertNewNode: function(wlxmlTag, wlxmlClass) {\r
  23             //TODO: Insert inline\r
  24             var anchor = $(window.getSelection().anchorNode);\r
  25             var anchorOffset = window.getSelection().anchorOffset;\r
  26             var textLen;\r
  27             if(anchor[0].nodeType === Node.TEXT_NODE) {\r
  28                 textLen = anchor.text().length;\r
  29                 anchor = anchor.parent();\r
  30             }\r
  31             if(anchor.text() === '') {\r
  32                 var todel = anchor;\r
  33                 anchor = anchor.parent();\r
  34                 todel.remove();\r
  35             }\r
  36             if(anchorOffset > 0 && anchorOffset < textLen) {\r
  37                 if(wlxmlTag === null && wlxmlClass === null) {\r
  38                     return this.splitWithNewNode(anchor);\r
  39                 }\r
  40                 return this.wrapSelectionWithNewNode(wlxmlTag, wlxmlClass);\r
  41             }\r
  42             var newNode = this._createNode(wlxmlTag || anchor.attr('wlxml-tag'), wlxmlClass || anchor.attr('wlxml-class'));\r
  43             if(anchorOffset === 0)\r
  44                 anchor.before(newNode)\r
  45             else\r
  46                 anchor.after(newNode);\r
  47             this.selectNode(new wlxmlNode.Node(newNode), {movecaret: true});\r
  48             //isDirty = true;\r
  49             sandbox.publish('contentChanged');\r
  50         },\r
  51         wrapSelectionWithNewNode: function(wlxmlTag, wlxmlClass) {\r
  52             var selection = window.getSelection();\r
  53             if(selection.anchorNode === selection.focusNode && selection.anchorNode.nodeType === Node.TEXT_NODE) {\r
  54                 var startOffset = selection.anchorOffset;\r
  55                 var endOffset = selection.focusOffset;\r
  56                 if(startOffset > endOffset) {\r
  57                     var tmp = startOffset;\r
  58                     startOffset = endOffset;\r
  59                     endOffset = tmp;\r
  60                 }\r
  61                 var node = selection.anchorNode;\r
  62                 var prefix = node.data.substr(0, startOffset);\r
  63                 var suffix = node.data.substr(endOffset);\r
  64                 var core = node.data.substr(startOffset, endOffset - startOffset);\r
  65                 var newNode = this._createNode(wlxmlTag, wlxmlClass);\r
  66                 newNode.text(core || 'test');\r
  67                 $(node).replaceWith(newNode);\r
  68                 newNode.before(prefix);\r
  69                 newNode.after(suffix);\r
  70                 \r
  71                 this.selectNode(new wlxmlNode.Node(newNode), {movecaret: true});\r
  72                 //isDirty = true;\r
  73                 sandbox.publish('contentChanged');\r
  74             }\r
  75         },\r
  76         splitWithNewNode: function(node) {\r
  77             var selection = window.getSelection();\r
  78             if(selection.anchorNode === selection.focusNode && selection.anchorNode.nodeType === Node.TEXT_NODE) {\r
  79                 var startOffset = selection.anchorOffset;\r
  80                 var endOffset = selection.focusOffset;\r
  81                 if(startOffset > endOffset) {\r
  82                     var tmp = startOffset;\r
  83                     startOffset = endOffset;\r
  84                     endOffset = tmp;\r
  85                 }\r
  86                 var anchor = selection.anchorNode;\r
  87                 var prefix = anchor.data.substr(0, startOffset);\r
  88                 var suffix = anchor.data.substr(endOffset);\r
  89                 var prefixNode = this._createNode(node.attr('wlxml-tag'), node.attr('wlxml-class'));\r
  90                 var newNode = this._createNode(node.attr('wlxml-tag'), node.attr('wlxml-class'));\r
  91                 var suffixNode = this._createNode(node.attr('wlxml-tag'), node.attr('wlxml-class'));\r
  92                 prefixNode.text(prefix);\r
  93                 suffixNode.text(suffix);\r
  94                 node.replaceWith(newNode);\r
  95                 newNode.before(prefixNode);\r
  96                 newNode.after(suffixNode);\r
  97                 \r
  98                 this.selectNode(new wlxmlNode.Node(newNode), {movecaret: true});\r
  99                 //isDirty = true;\r
 100                 sandbox.publish('contentChanged');\r
 101             }\r
 102         }\r
 103 \r
 104     };\r
 105     \r
 106 \r
 107     /* public api */\r
 108     return {\r
 109         start: function() { sandbox.publish('ready'); },\r
 110         getView: function() { \r
 111             return canvas.dom;\r
 112         },\r
 113         setDocument: function(xml) {\r
 114             canvas.setXML(xml);\r
 115             sandbox.publish('documentSet');\r
 116         },\r
 117         getDocument: function() {\r
 118             return canvas.toXML();\r
 119         },\r
 120         modifyCurrentNode: function(attr, value) {\r
 121             if(manager.currentNode) {\r
 122                 manager.getNodeElement(manager.currentNode).attr('wlxml-'+attr, value);\r
 123                 sandbox.publish('contentChanged');\r
 124             }\r
 125         },\r
 126         highlightNode: function(wlxmlNode) {\r
 127             manager.highlightNode(wlxmlNode);\r
 128         },\r
 129         dimNode: function(wlxmlNode) {\r
 130             manager.dimNode(wlxmlNode);\r
 131         },\r
 132         selectNode: function(wlxmlNode) {\r
 133             if(!wlxmlNode.is(manager.currentNode))\r
 134                 manager.selectNode(wlxmlNode, {movecaret: true});\r
 135         },\r
 136         toggleGrid: function(toggle) {\r
 137             manager.toggleGrid(toggle);\r
 138         },\r
 139         insertNewNode: function(wlxmlTag, wlxmlClass) {\r
 140             manager.insertNewNode(wlxmlTag, wlxmlClass);\r
 141         },\r
 142         wrapSelectionWithNewNode: function(wlxmlTag, wlxmlClass) {\r
 143             manager.wrapSelectionWithNewNode(wlxmlTag, wlxmlClass);\r
 144         }\r
 145     }\r
 146     \r
 147 };\r
 148 \r
 149 });