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             mediator.nodeCreated(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                 mediator.nodeCreated(newNode);\r
 119                 //isDirty = true;\r
 120                 sandbox.publish('contentChanged');\r
 121             }\r
 122         },\r
 123         splitWithNewNode: function(node) {\r
 124             var selection = window.getSelection();\r
 125             if(selection.anchorNode === selection.focusNode && selection.anchorNode.nodeType === Node.TEXT_NODE) {\r
 126                 var startOffset = selection.anchorOffset;\r
 127                 var endOffset = selection.focusOffset;\r
 128                 if(startOffset > endOffset) {\r
 129                     var tmp = startOffset;\r
 130                     startOffset = endOffset;\r
 131                     endOffset = tmp;\r
 132                 }\r
 133                 var anchor = selection.anchorNode;\r
 134                 var prefix = anchor.data.substr(0, startOffset);\r
 135                 var suffix = anchor.data.substr(endOffset);\r
 136                 var prefixNode = this._createNode(node.attr('wlxml-tag'), node.attr('wlxml-class'));\r
 137                 var newNode = this._createNode(node.attr('wlxml-tag'), node.attr('wlxml-class'));\r
 138                 var suffixNode = this._createNode(node.attr('wlxml-tag'), node.attr('wlxml-class'));\r
 139                 prefixNode.text(prefix);\r
 140                 suffixNode.text(suffix);\r
 141                 node.replaceWith(newNode);\r
 142                 newNode.before(prefixNode);\r
 143                 newNode.after(suffixNode);\r
 144                 mediator.nodeCreated(newNode);\r
 145                 //isDirty = true;\r
 146                 sandbox.publish('contentChanged');\r
 147             }\r
 148         },\r
 149         setBody: function(HTMLTree) {\r
 150             this.node.find('#rng-module-documentCanvas-content').html(HTMLTree);\r
 151         },\r
 152         getBody: function() {\r
 153             return this.node.find('#rng-module-documentCanvas-content').html();\r
 154         }, \r
 155         _markSelected: function(node) {\r
 156             this.dimNode(node);\r
 157             \r
 158             this.node.find('.rng-current').removeClass('rng-current');\r
 159             \r
 160             node.addClass('rng-current');\r
 161 \r
 162             this.currentNode = node;\r
 163             sandbox.publish('nodeSelected', node);\r
 164             \r
 165         },\r
 166         selectNode: function(node) {\r
 167             view._markSelected(node);\r
 168             var range = document.createRange();\r
 169             range.selectNodeContents(node[0]);\r
 170             range.collapse(false);\r
 171 \r
 172             var selection = document.getSelection();\r
 173             selection.removeAllRanges()\r
 174             selection.addRange(range);\r
 175         },\r
 176         selectNodeById: function(id) {\r
 177             var node = this.node.find('#'+id);\r
 178             if(node)\r
 179                 this.selectNode(node);\r
 180         },\r
 181         highlightNode: function(node) {\r
 182             if(!this.gridToggled) {\r
 183                 node.addClass('rng-hover');\r
 184                 var label = node.attr('wlxml-tag');\r
 185                 if(node.attr('wlxml-class'))\r
 186                     label += ' / ' + node.attr('wlxml-class');\r
 187                 var tag = $('<div>').addClass('rng-visualEditor-nodeHoverTag').text(label);\r
 188                 node.append(tag);\r
 189             }\r
 190         },\r
 191         dimNode: function(node) {\r
 192             if(!this.gridToggled) {\r
 193                 node.removeClass('rng-hover');\r
 194                 node.find('.rng-visualEditor-nodeHoverTag').remove();\r
 195             }\r
 196         },\r
 197         highlightNodeById: function(id) {\r
 198             var node = this.node.find('#'+id);\r
 199             if(node)\r
 200                 this.highlightNode(node);\r
 201         },\r
 202         dimNodeById: function(id) {\r
 203             var node = this.node.find('#'+id);\r
 204             if(node)\r
 205                 this.dimNode(node);\r
 206         },\r
 207         selectFirstNode: function() {\r
 208             var firstNodeWithText = this.node.find('[wlxml-tag]').filter(function() {\r
 209                 return $(this).clone().children().remove().end().text().trim() !== '';\r
 210             }).first();\r
 211             var node;\r
 212             if(firstNodeWithText.length)\r
 213                 node = $(firstNodeWithText[0])\r
 214             else {\r
 215                 node = this.node.find('[wlxml-class|="p"]')\r
 216             }\r
 217             this.selectNode(node);\r
 218         },\r
 219         toggleGrid: function(toggle) {\r
 220             this.node.find('[wlxml-tag]').toggleClass('rng-hover', toggle);\r
 221             this.gridToggled = toggle;\r
 222         }\r
 223     };\r
 224     \r
 225     view.setup();\r
 226 \r
 227     /* public api */\r
 228     return {\r
 229         start: function() { sandbox.publish('ready'); },\r
 230         getView: function() { return view.node; },\r
 231         setDocument: function(xml) {\r
 232             var transformed = transformations.fromXML.getDocumentDescription(xml);\r
 233             view.setBody(transformed.HTMLTree);\r
 234             view.selectFirstNode();\r
 235             //isDirty = false;\r
 236         },\r
 237         modifyCurrentNode: function(attr, value) {\r
 238             if(view.currentNode)\r
 239                 view.currentNode.attr('wlxml-'+attr, value);\r
 240         },\r
 241         highlightNode: function(id) {\r
 242             view.highlightNodeById(id);\r
 243         },\r
 244         dimNode: function(id) {\r
 245             view.dimNodeById(id);\r
 246         },\r
 247         selectNode: function(id) {\r
 248             view.selectNodeById(id);\r
 249         }\r
 250         \r
 251     }\r
 252     \r
 253 };\r
 254 \r
 255 });