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 'libs/text!./template.html'], function(_, transformations, template) {\r
   7 \r
   8 \r
   9 \r
  10 return function(sandbox) {\r
  11 \r
  12     var view = {\r
  13         node: $(_.template(template)()),\r
  14         currentNode: null,\r
  15         setup: function() {\r
  16             var view = this;\r
  17 \r
  18             this.node.find('#rng-module-documentCanvas-content').on('keyup', function() {\r
  19                 //isDirty = true;\r
  20                 sandbox.publish('contentChanged');\r
  21             });\r
  22 \r
  23             this.node.on('mouseover', '[wlxml-tag]', function(e) { sandbox.publish('nodeHovered', $(e.target)); });\r
  24             this.node.on('mouseout', '[wlxml-tag]', function(e) { sandbox.publish('nodeBlured', $(e.target)); });\r
  25             this.node.on('click', '[wlxml-tag]', function(e) {\r
  26                 console.log('clicked node type: '+e.target.nodeType);\r
  27                 view._markSelected($(e.target));\r
  28             });\r
  29 \r
  30             this.node.on('keyup', '#rng-module-documentCanvas-contentWrapper', function(e) {\r
  31                 var anchor = $(window.getSelection().anchorNode);\r
  32                 if(anchor[0].nodeType === Node.TEXT_NODE)\r
  33                     anchor = anchor.parent();\r
  34                 if(!anchor.is('[wlxml-tag]'))\r
  35                     return;\r
  36                 view._markSelected(anchor);\r
  37             });\r
  38             \r
  39             this.node.on('keydown', '#rng-module-documentCanvas-contentWrapper', function(e) {\r
  40                 if(e.which === 13) { \r
  41                     e.preventDefault();\r
  42                     view.insertNewNode(null, null);\r
  43                 }\r
  44             });\r
  45             \r
  46             \r
  47             var observer = new MutationObserver(function(mutations) {\r
  48               mutations.forEach(function(mutation) {\r
  49                 _.each(mutation.addedNodes, function(node) {\r
  50                     node = $(node);\r
  51                     node.parent().find('[wlxml-tag]').each(function() {\r
  52                         tag = $(this);\r
  53                         if(!tag.attr('id'))\r
  54                             tag.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                     });\r
  56                 });\r
  57               });    \r
  58             });\r
  59             var config = { attributes: true, childList: true, characterData: true, subtree: true };\r
  60             observer.observe(this.node.find('#rng-module-documentCanvas-contentWrapper')[0], config);\r
  61             \r
  62             this.gridToggled = false;\r
  63         },\r
  64         _createNode: function(wlxmlTag, wlxmlClass) {\r
  65             var toBlock = ['div', 'document', 'section', 'header'];\r
  66             var htmlTag = _.contains(toBlock, wlxmlTag) ? 'div' : 'span';\r
  67             var toret = $('<' + htmlTag + '>');\r
  68             toret.attr('wlxml-tag', wlxmlTag);\r
  69             if(wlxmlClass)\r
  70                 toret.attr('wlxml-class', wlxmlClass);\r
  71             return toret;\r
  72         },\r
  73         insertNewNode: function(wlxmlTag, wlxmlClass) {\r
  74             //TODO: Insert inline\r
  75             var anchor = $(window.getSelection().anchorNode);\r
  76             var anchorOffset = window.getSelection().anchorOffset;\r
  77             if(anchor[0].nodeType === Node.TEXT_NODE)\r
  78                 anchor = anchor.parent();\r
  79             if(anchor.text() === '') {\r
  80                 var todel = anchor;\r
  81                 anchor = anchor.parent();\r
  82                 todel.remove();\r
  83             }\r
  84             if(anchorOffset > 0 && anchorOffset < anchor.text().length) {\r
  85                 if(wlxmlTag === null && wlxmlClass === null) {\r
  86                     return this.splitWithNewNode(anchor);\r
  87                 }\r
  88                 return this.wrapSelectionWithNewNode(wlxmlTag, wlxmlClass);\r
  89             }\r
  90             var newNode = this._createNode(wlxmlTag || anchor.attr('wlxml-tag'), wlxmlClass || anchor.attr('wlxml-class'));\r
  91             if(anchorOffset === 0)\r
  92                 anchor.before(newNode)\r
  93             else\r
  94                 anchor.after(newNode);\r
  95             this.selectNode(newNode);\r
  96             //isDirty = true;\r
  97             sandbox.publish('contentChanged');\r
  98         },\r
  99         wrapSelectionWithNewNode: function(wlxmlTag, wlxmlClass) {\r
 100             var selection = window.getSelection();\r
 101             if(selection.anchorNode === selection.focusNode && selection.anchorNode.nodeType === Node.TEXT_NODE) {\r
 102                 var startOffset = selection.anchorOffset;\r
 103                 var endOffset = selection.focusOffset;\r
 104                 if(startOffset > endOffset) {\r
 105                     var tmp = startOffset;\r
 106                     startOffset = endOffset;\r
 107                     endOffset = tmp;\r
 108                 }\r
 109                 var node = selection.anchorNode;\r
 110                 var prefix = node.data.substr(0, startOffset);\r
 111                 var suffix = node.data.substr(endOffset);\r
 112                 var core = node.data.substr(startOffset, endOffset - startOffset);\r
 113                 var newNode = this._createNode(wlxmlTag, wlxmlClass);\r
 114                 newNode.text(core || 'test');\r
 115                 $(node).replaceWith(newNode);\r
 116                 newNode.before(prefix);\r
 117                 newNode.after(suffix);\r
 118                 \r
 119                 this.selectNode(newNode);\r
 120                 //isDirty = true;\r
 121                 sandbox.publish('contentChanged');\r
 122             }\r
 123         },\r
 124         splitWithNewNode: function(node) {\r
 125             var selection = window.getSelection();\r
 126             if(selection.anchorNode === selection.focusNode && selection.anchorNode.nodeType === Node.TEXT_NODE) {\r
 127                 var startOffset = selection.anchorOffset;\r
 128                 var endOffset = selection.focusOffset;\r
 129                 if(startOffset > endOffset) {\r
 130                     var tmp = startOffset;\r
 131                     startOffset = endOffset;\r
 132                     endOffset = tmp;\r
 133                 }\r
 134                 var anchor = selection.anchorNode;\r
 135                 var prefix = anchor.data.substr(0, startOffset);\r
 136                 var suffix = anchor.data.substr(endOffset);\r
 137                 var prefixNode = this._createNode(node.attr('wlxml-tag'), node.attr('wlxml-class'));\r
 138                 var newNode = this._createNode(node.attr('wlxml-tag'), node.attr('wlxml-class'));\r
 139                 var suffixNode = this._createNode(node.attr('wlxml-tag'), node.attr('wlxml-class'));\r
 140                 prefixNode.text(prefix);\r
 141                 suffixNode.text(suffix);\r
 142                 node.replaceWith(newNode);\r
 143                 newNode.before(prefixNode);\r
 144                 newNode.after(suffixNode);\r
 145                 \r
 146                 this.selectNode(newNode);\r
 147                 //isDirty = true;\r
 148                 sandbox.publish('contentChanged');\r
 149             }\r
 150         },\r
 151         setBody: function(HTMLTree) {\r
 152             this.node.find('#rng-module-documentCanvas-content').html(HTMLTree);\r
 153         },\r
 154         getBody: function() {\r
 155             return this.node.find('#rng-module-documentCanvas-content').html();\r
 156         }, \r
 157         _markSelected: function(node) {\r
 158             this.dimNode(node);\r
 159             \r
 160             this.node.find('.rng-module-documentCanvas-currentNode').removeClass('rng-module-documentCanvas-currentNode');\r
 161             \r
 162             node.addClass('rng-module-documentCanvas-currentNode');\r
 163 \r
 164             this.currentNode = node;\r
 165             sandbox.publish('nodeSelected', node);\r
 166             \r
 167         },\r
 168         selectNode: function(node) {\r
 169             view._markSelected(node);\r
 170             var range = document.createRange();\r
 171             range.selectNodeContents(node[0]);\r
 172             range.collapse(false);\r
 173 \r
 174             var selection = document.getSelection();\r
 175             selection.removeAllRanges()\r
 176             selection.addRange(range);\r
 177         },\r
 178         selectNodeById: function(id) {\r
 179             var node = this.node.find('#'+id);\r
 180             if(node)\r
 181                 this.selectNode(node);\r
 182         },\r
 183         highlightNode: function(node) {\r
 184             if(!this.gridToggled) {\r
 185                 node.addClass('rng-hover');\r
 186                 var label = node.attr('wlxml-tag');\r
 187                 if(node.attr('wlxml-class'))\r
 188                     label += ' / ' + node.attr('wlxml-class');\r
 189                 var tag = $('<div>').addClass('rng-module-documentCanvas-hoveredNodeTag').text(label);\r
 190                 node.append(tag);\r
 191             }\r
 192         },\r
 193         dimNode: function(node) {\r
 194             if(!this.gridToggled) {\r
 195                 node.removeClass('rng-hover');\r
 196                 node.find('.rng-module-documentCanvas-hoveredNodeTag').remove();\r
 197             }\r
 198         },\r
 199         highlightNodeById: function(id) {\r
 200             var node = this.node.find('#'+id);\r
 201             if(node)\r
 202                 this.highlightNode(node);\r
 203         },\r
 204         dimNodeById: function(id) {\r
 205             var node = this.node.find('#'+id);\r
 206             if(node)\r
 207                 this.dimNode(node);\r
 208         },\r
 209         selectFirstNode: function() {\r
 210             var firstNodeWithText = this.node.find('[wlxml-tag]').filter(function() {\r
 211                 return $(this).clone().children().remove().end().text().trim() !== '';\r
 212             }).first();\r
 213             var node;\r
 214             if(firstNodeWithText.length)\r
 215                 node = $(firstNodeWithText[0])\r
 216             else {\r
 217                 node = this.node.find('[wlxml-class|="p"]')\r
 218             }\r
 219             this.selectNode(node);\r
 220         },\r
 221         toggleGrid: function(toggle) {\r
 222             this.node.find('[wlxml-tag]').toggleClass('rng-hover', toggle);\r
 223             this.gridToggled = toggle;\r
 224         }\r
 225     };\r
 226     \r
 227     view.setup();\r
 228 \r
 229     /* public api */\r
 230     return {\r
 231         start: function() { sandbox.publish('ready'); },\r
 232         getView: function() { return view.node; },\r
 233         setDocument: function(xml) {\r
 234             var transformed = transformations.fromXML.getDocumentDescription(xml);\r
 235             view.setBody(transformed.HTMLTree);\r
 236             view.selectFirstNode();\r
 237             //isDirty = false;\r
 238         },\r
 239         modifyCurrentNode: function(attr, value) {\r
 240             if(view.currentNode)\r
 241                 view.currentNode.attr('wlxml-'+attr, value);\r
 242         },\r
 243         highlightNode: function(id) {\r
 244             view.highlightNodeById(id);\r
 245         },\r
 246         dimNode: function(id) {\r
 247             view.dimNodeById(id);\r
 248         },\r
 249         selectNode: function(id) {\r
 250             view.selectNodeById(id);\r
 251         },\r
 252         toggleGrid: function(toggle) {\r
 253             view.toggleGrid(toggle);\r
 254         },\r
 255         insertNewNode: function(wlxmlTag, wlxmlClass) {\r
 256             view.insertNewNode(wlxmlTag, wlxmlClass);\r
 257         },\r
 258         wrapSelectionWithNewNode: function(wlxmlTag, wlxmlClass) {\r
 259             view.wrapSelectionWithNewNode(wlxmlTag, wlxmlClass);\r
 260         }\r
 261     }\r
 262     \r
 263 };\r
 264 \r
 265 });