1 // Module that implements main WYSIWIG edit area
\r
4 'libs/underscore-min',
\r
5 './transformations',
\r
7 'libs/text!./template.html'], function(_, transformations, wlxmlNode, template) {
\r
11 return function(sandbox) {
\r
14 node: $(_.template(template)()),
\r
19 this.node.find('#rng-module-documentCanvas-content').on('keyup', function() {
\r
21 sandbox.publish('contentChanged');
\r
24 this.node.on('mouseover', '[wlxml-tag]', function(e) {
\r
25 e.stopPropagation();
\r
26 sandbox.publish('nodeHovered', new wlxmlNode.Node($(e.target)));
\r
28 this.node.on('mouseout', '[wlxml-tag]', function(e) {
\r
29 e.stopPropagation();
\r
30 sandbox.publish('nodeBlured', new wlxmlNode.Node($(e.target)));
\r
32 this.node.on('click', '[wlxml-tag]', function(e) {
\r
33 e.stopPropagation();
\r
34 console.log('clicked node type: '+e.target.nodeType);
\r
35 view.selectNode(new wlxmlNode.Node($(e.target)));
\r
38 this.node.on('keyup', '#rng-module-documentCanvas-contentWrapper', function(e) {
\r
39 var anchor = $(window.getSelection().anchorNode);
\r
40 if(anchor[0].nodeType === Node.TEXT_NODE)
\r
41 anchor = anchor.parent();
\r
42 if(!anchor.is('[wlxml-tag]'))
\r
44 view.selectNode(new wlxmlNode.Node(anchor));
\r
47 this.node.on('keydown', '#rng-module-documentCanvas-contentWrapper', function(e) {
\r
48 if(e.which === 13) {
\r
50 view.insertNewNode(null, null);
\r
55 var observer = new MutationObserver(function(mutations) {
\r
56 mutations.forEach(function(mutation) {
\r
57 _.each(mutation.addedNodes, function(node) {
\r
59 node.parent().find('[wlxml-tag]').each(function() {
\r
62 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
67 var config = { attributes: true, childList: true, characterData: true, subtree: true };
\r
68 observer.observe(this.node.find('#rng-module-documentCanvas-contentWrapper')[0], config);
\r
70 this.gridToggled = false;
\r
72 _createNode: function(wlxmlTag, wlxmlClass) {
\r
73 var toBlock = ['div', 'document', 'section', 'header'];
\r
74 var htmlTag = _.contains(toBlock, wlxmlTag) ? 'div' : 'span';
\r
75 var toret = $('<' + htmlTag + '>');
\r
76 toret.attr('wlxml-tag', wlxmlTag);
\r
78 toret.attr('wlxml-class', wlxmlClass);
\r
81 insertNewNode: function(wlxmlTag, wlxmlClass) {
\r
82 //TODO: Insert inline
\r
83 var anchor = $(window.getSelection().anchorNode);
\r
84 var anchorOffset = window.getSelection().anchorOffset;
\r
85 if(anchor[0].nodeType === Node.TEXT_NODE)
\r
86 anchor = anchor.parent();
\r
87 if(anchor.text() === '') {
\r
89 anchor = anchor.parent();
\r
92 if(anchorOffset > 0 && anchorOffset < anchor.text().length) {
\r
93 if(wlxmlTag === null && wlxmlClass === null) {
\r
94 return this.splitWithNewNode(anchor);
\r
96 return this.wrapSelectionWithNewNode(wlxmlTag, wlxmlClass);
\r
98 var newNode = this._createNode(wlxmlTag || anchor.attr('wlxml-tag'), wlxmlClass || anchor.attr('wlxml-class'));
\r
99 if(anchorOffset === 0)
\r
100 anchor.before(newNode)
\r
102 anchor.after(newNode);
\r
103 this.selectNode(newNode);
\r
105 sandbox.publish('contentChanged');
\r
107 wrapSelectionWithNewNode: function(wlxmlTag, wlxmlClass) {
\r
108 var selection = window.getSelection();
\r
109 if(selection.anchorNode === selection.focusNode && selection.anchorNode.nodeType === Node.TEXT_NODE) {
\r
110 var startOffset = selection.anchorOffset;
\r
111 var endOffset = selection.focusOffset;
\r
112 if(startOffset > endOffset) {
\r
113 var tmp = startOffset;
\r
114 startOffset = endOffset;
\r
117 var node = selection.anchorNode;
\r
118 var prefix = node.data.substr(0, startOffset);
\r
119 var suffix = node.data.substr(endOffset);
\r
120 var core = node.data.substr(startOffset, endOffset - startOffset);
\r
121 var newNode = this._createNode(wlxmlTag, wlxmlClass);
\r
122 newNode.text(core || 'test');
\r
123 $(node).replaceWith(newNode);
\r
124 newNode.before(prefix);
\r
125 newNode.after(suffix);
\r
127 this.selectNode(newNode);
\r
129 sandbox.publish('contentChanged');
\r
132 splitWithNewNode: function(node) {
\r
133 var selection = window.getSelection();
\r
134 if(selection.anchorNode === selection.focusNode && selection.anchorNode.nodeType === Node.TEXT_NODE) {
\r
135 var startOffset = selection.anchorOffset;
\r
136 var endOffset = selection.focusOffset;
\r
137 if(startOffset > endOffset) {
\r
138 var tmp = startOffset;
\r
139 startOffset = endOffset;
\r
142 var anchor = selection.anchorNode;
\r
143 var prefix = anchor.data.substr(0, startOffset);
\r
144 var suffix = anchor.data.substr(endOffset);
\r
145 var prefixNode = this._createNode(node.attr('wlxml-tag'), node.attr('wlxml-class'));
\r
146 var newNode = this._createNode(node.attr('wlxml-tag'), node.attr('wlxml-class'));
\r
147 var suffixNode = this._createNode(node.attr('wlxml-tag'), node.attr('wlxml-class'));
\r
148 prefixNode.text(prefix);
\r
149 suffixNode.text(suffix);
\r
150 node.replaceWith(newNode);
\r
151 newNode.before(prefixNode);
\r
152 newNode.after(suffixNode);
\r
154 this.selectNode(newNode);
\r
156 sandbox.publish('contentChanged');
\r
159 setBody: function(HTMLTree) {
\r
160 this.node.find('#rng-module-documentCanvas-content').html(HTMLTree);
\r
162 getBody: function() {
\r
163 return this.node.find('#rng-module-documentCanvas-content').html();
\r
165 selectNode: function(wlxmlNode, options) {
\r
166 options = options || {};
\r
167 var nodeElement = this.getNodeElement(wlxmlNode)
\r
169 this.dimNode(wlxmlNode);
\r
171 this.node.find('.rng-module-documentCanvas-currentNode').removeClass('rng-module-documentCanvas-currentNode');
\r
172 nodeElement.addClass('rng-module-documentCanvas-currentNode');
\r
174 if(options.moveCarret) {
\r
175 var range = document.createRange();
\r
176 range.selectNodeContents(nodeElement[0]);
\r
177 range.collapse(false);
\r
178 var selection = document.getSelection();
\r
179 selection.removeAllRanges()
\r
180 selection.addRange(range);
\r
183 this.currentNode = wlxmlNode;
\r
184 sandbox.publish('nodeSelected', wlxmlNode);
\r
186 highlightNode: function(wlxmlNode) {
\r
187 var nodeElement = this.getNodeElement(wlxmlNode);
\r
188 if(!this.gridToggled) {
\r
189 nodeElement.addClass('rng-common-hoveredNode');
\r
190 var label = nodeElement.attr('wlxml-tag');
\r
191 if(nodeElement.attr('wlxml-class'))
\r
192 label += ' / ' + nodeElement.attr('wlxml-class');
\r
193 var tag = $('<div>').addClass('rng-module-documentCanvas-hoveredNodeTag').text(label);
\r
194 nodeElement.append(tag);
\r
197 dimNode: function(wlxmlNode) {
\r
198 var nodeElement = this.getNodeElement(wlxmlNode);
\r
199 if(!this.gridToggled) {
\r
200 nodeElement.removeClass('rng-common-hoveredNode');
\r
201 nodeElement.find('.rng-module-documentCanvas-hoveredNodeTag').remove();
\r
204 selectFirstNode: function() {
\r
205 var firstNodeWithText = this.node.find('[wlxml-tag]').filter(function() {
\r
206 return $(this).clone().children().remove().end().text().trim() !== '';
\r
209 if(firstNodeWithText.length)
\r
210 node = $(firstNodeWithText[0])
\r
212 node = this.node.find('[wlxml-class|="p"]')
\r
214 this.selectNode(new wlxmlNode.Node(node));
\r
216 toggleGrid: function(toggle) {
\r
217 this.node.find('[wlxml-tag]').toggleClass('rng-common-hoveredNode', toggle);
\r
218 this.gridToggled = toggle;
\r
220 getNodeElement: function(wlxmlNode) {
\r
221 return this.node.find('#'+wlxmlNode.id);
\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 sandbox.publish('documentSet');
\r
237 getDocument: function() {
\r
238 return transformations.toXML.getXML(view.getBody());
\r
240 modifyCurrentNode: function(attr, value) {
\r
241 if(view.currentNode) {
\r
242 view.getNodeElement(view.currentNode).attr('wlxml-'+attr, value);
\r
243 sandbox.publish('contentChanged');
\r
246 highlightNode: function(wlxmlNode) {
\r
247 view.highlightNode(wlxmlNode);
\r
249 dimNode: function(wlxmlNode) {
\r
250 view.dimNode(wlxmlNode);
\r
252 selectNode: function(wlxmlNode) {
\r
253 if(!wlxmlNode.is(view.currentNode))
\r
254 view.selectNode(wlxmlNode, {moveCarret: true});
\r
256 toggleGrid: function(toggle) {
\r
257 view.toggleGrid(toggle);
\r
259 insertNewNode: function(wlxmlTag, wlxmlClass) {
\r
260 view.insertNewNode(wlxmlTag, wlxmlClass);
\r
262 wrapSelectionWithNewNode: function(wlxmlTag, wlxmlClass) {
\r
263 view.wrapSelectionWithNewNode(wlxmlTag, wlxmlClass);
\r