2 'libs/jquery-1.9.1.min',
\r
4 ], function($, canvasNode) {
\r
8 var getCursorPosition = function() {
\r
9 var selection = window.getSelection();
\r
10 var anchorNode = $(selection.anchorNode);
\r
11 var parent = anchorNode.parent();
\r
13 textNode: anchorNode,
\r
14 textNodeOffset: selection.anchorOffset,
\r
15 textNodeIndex: parent.contents().index(anchorNode),
\r
17 focusNode: $(selection.focusNode).parent(),
\r
18 isAtEnd: selection.anchorOffset === anchorNode.text().length
\r
22 var Manager = function(canvas, sandbox) {
\r
23 this.canvas = canvas;
\r
24 this.sandbox = sandbox;
\r
25 this.shownAlready = false;
\r
26 this.gridToggled = false;
\r
27 this.scrollbarPosition = 0;
\r
28 this.currentNode = null;
\r
31 canvas.dom.find('#rng-module-documentCanvas-content').on('keyup', function() {
\r
32 manager.sandbox.publish('contentChanged');
\r
35 canvas.dom.on('mouseover', '[wlxml-tag]', function(e) {
\r
36 e.stopPropagation();
\r
37 manager.sandbox.publish('nodeHovered', canvasNode.create($(e.target)));
\r
39 canvas.dom.on('mouseout', '[wlxml-tag]', function(e) {
\r
40 e.stopPropagation();
\r
41 manager.sandbox.publish('nodeBlured', canvasNode.create($(e.target)));
\r
43 canvas.dom.on('click', '[wlxml-tag]', function(e) {
\r
44 e.stopPropagation();
\r
45 console.log('clicked node type: '+e.target.nodeType);
\r
46 manager.selectNode(canvasNode.create($(e.target)));
\r
49 canvas.dom.on('keyup', '#rng-module-documentCanvas-contentWrapper', function(e) {
\r
50 var anchor = $(window.getSelection().anchorNode);
\r
52 if(anchor[0].nodeType === Node.TEXT_NODE)
\r
53 anchor = anchor.parent();
\r
54 if(!anchor.is('[wlxml-tag]'))
\r
56 manager.selectNode(canvasNode.create(anchor));
\r
59 canvas.dom.on('keydown', '#rng-module-documentCanvas-contentWrapper', function(e) {
\r
60 if(e.which === 13) {
\r
61 manager.onEnterKey(e);
\r
64 manager.onBackspaceKey(e);
\r
68 canvas.dom.onShow = function() {
\r
69 if(!manager.shownAlready) {
\r
70 manager.shownAlready = true;
\r
71 manager.selectFirstNode();
\r
72 } else if(manager.currentNode) {
\r
73 manager.movecaretToNode(manager.getNodeElement(manager.currentNode));
\r
74 canvas.dom.find('#rng-module-documentCanvas-contentWrapper').scrollTop(manager.scrollbarPosition);
\r
77 canvas.dom.onHide = function() {
\r
78 manager.scrollbarPosition = canvas.dom.find('#rng-module-documentCanvas-contentWrapper').scrollTop();
\r
82 Manager.prototype.selectNode = function(cnode, options) {
\r
83 options = options || {};
\r
84 var nodeElement = this.getNodeElement(cnode)
\r
86 this.dimNode(cnode);
\r
88 this.canvas.dom.find('.rng-module-documentCanvas-currentNode').removeClass('rng-module-documentCanvas-currentNode');
\r
89 nodeElement.addClass('rng-module-documentCanvas-currentNode');
\r
91 if(options.movecaret) {
\r
92 this.movecaretToNode(nodeElement, options.movecaret);
\r
95 this.currentNode = cnode;
\r
96 this.sandbox.publish('nodeSelected', cnode);
\r
99 Manager.prototype.insertNewNode = function(wlxmlTag, wlxmlClass) {
\r
100 var selection = window.getSelection();
\r
102 if(selection.getRangeAt(0).collapsed) {
\r
105 var offsetStart = selection.anchorOffset;
\r
106 var offsetEnd = selection.focusOffset;
\r
107 if(offsetStart > offsetEnd) {
\r
108 var tmp = offsetStart;
\r
109 offsetStart = offsetEnd;
\r
114 var wrapper = canvasNode.create({tag: wlxmlTag, klass: wlxmlClass});
\r
115 var parent = $(selection.anchorNode).parent();
\r
117 var textNodeIdx = parent.contents().index($(selection.anchorNode));
\r
118 if(selection.anchorNode != selection.focusNode) {
\r
119 textNodeIdx = [textNodeIdx, parent.contents().index($(selection.focusNode))];
\r
121 this.canvas.nodeWrap({inside: canvasNode.create(parent),
\r
123 offsetStart: offsetStart,
\r
124 offsetEnd: offsetEnd,
\r
125 textNodeIdx: textNodeIdx
\r
127 this.selectNode(wrapper, {movecaret: 'end'});
\r
133 Manager.prototype.getNodeElement = function(cnode) {
\r
134 return this.canvas.dom.find('#'+cnode.getId());
\r
137 Manager.prototype.highlightNode = function(cnode) {
\r
138 var nodeElement = this.getNodeElement(cnode);
\r
139 if(!this.gridToggled) {
\r
140 nodeElement.addClass('rng-common-hoveredNode');
\r
141 var label = nodeElement.attr('wlxml-tag');
\r
142 if(nodeElement.attr('wlxml-class'))
\r
143 label += ' / ' + nodeElement.attr('wlxml-class');
\r
144 var tag = $('<div>').addClass('rng-module-documentCanvas-hoveredNodeTag').text(label);
\r
145 nodeElement.append(tag);
\r
149 Manager.prototype.dimNode = function(cnode) {
\r
150 var nodeElement = this.getNodeElement(cnode);
\r
151 if(!this.gridToggled) {
\r
152 nodeElement.removeClass('rng-common-hoveredNode');
\r
153 nodeElement.find('.rng-module-documentCanvas-hoveredNodeTag').remove();
\r
157 Manager.prototype.selectFirstNode = function() {
\r
158 var firstNodeWithText = this.canvas.dom.find('[wlxml-tag]').filter(function() {
\r
159 return $(this).clone().children().remove().end().text().trim() !== '';
\r
162 if(firstNodeWithText.length)
\r
163 node = $(firstNodeWithText[0])
\r
165 node = this.canvas.dom.find('[wlxml-class|="p"]')
\r
167 this.selectNode(canvasNode.create(node), {movecaret: true});
\r
170 Manager.prototype.movecaretToNode = function(nodeElement, where) {
\r
171 if(!nodeElement.length)
\r
173 var range = document.createRange();
\r
174 range.selectNodeContents(nodeElement[0]);
\r
176 var collapseArg = true;
\r
177 if(where === 'end')
\r
178 collapseArg = false;
\r
179 range.collapse(collapseArg);
\r
180 var selection = document.getSelection();
\r
181 selection.removeAllRanges()
\r
182 selection.addRange(range);
\r
185 Manager.prototype.toggleGrid = function(toggle) {
\r
186 this.canvas.dom.find('[wlxml-tag]').toggleClass('rng-common-hoveredNode', toggle);
\r
187 this.gridToggled = toggle;
\r
190 Manager.prototype.onEnterKey = function(e) {
\r
191 e.preventDefault();
\r
192 var pos = getCursorPosition();
\r
193 var contextNode = this.canvas.getNodeById(pos.parentNode.attr('id'));
\r
197 newNode = canvasNode.create({tag: pos.parentNode.attr('wlxml-tag'), klass: pos.parentNode.attr('wlxml-class')});
\r
198 this.canvas.nodeInsertAfter({node: newNode, after: this.canvas.getNodeById(pos.parentNode.attr('id'))});
\r
200 newNode = this.canvas.nodeSplit({node: contextNode, textNodeIdx: pos.textNodeIndex, offset: pos.textNodeOffset});
\r
203 this.selectNode(newNode, {movecaret: true});
\r
204 this.sandbox.publish('contentChanged');
\r
207 Manager.prototype.onBackspaceKey = function(e) {
\r
208 var pos = getCursorPosition();
\r
209 var len = pos.textNode.text().length;
\r
211 // Prevent deleting node by browser after last character removed;
\r
212 e.preventDefault();
\r
213 pos.parentNode.text('');
\r
216 e.preventDefault();
\r
217 var toRemove = canvasNode.create(pos.textNode);
\r
218 var prevNode = this.canvas.getPrecedingNode({node:toRemove});
\r
219 this.canvas.nodeRemove({node: toRemove}); // jesli nie ma tekstu, to anchor nie jest tex nodem
\r
220 this.selectNode(prevNode, {movecaret: 'end'});
\r
224 Manager.prototype.command = function(command, meta) {
\r
225 var pos = getCursorPosition();
\r
227 if(command === 'createList') {
\r
228 var node = canvasNode.create(pos.parentNode);
\r
229 if(window.getSelection().getRangeAt(0).collapsed && this.canvas.nodeInsideList({node: node})) {
\r
230 this.canvas.listRemove({pointer: node});
\r
231 this.selectNode(node, {movecaret: 'end'});
\r
232 this.sandbox.publish('contentChanged');
\r
235 //if(!this.canvas.nodeInsideList({node: node})) {
\r
236 this.canvas.listCreate({start: node, end: canvasNode.create(pos.focusNode), type: meta});
\r
237 this.selectNode(node, {movecaret: 'end'});
\r
238 this.sandbox.publish('contentChanged');
\r