85fbd4336140b61475fcd6a00a10785ade59f781
[fnpeditor.git] / src / editor / modules / documentCanvas / canvas / keyboard.js
1 define([
2 'modules/documentCanvas/canvas/documentElement',
3 'modules/documentCanvas/canvas/utils'
4 ], function(documentElement, utils) {
5     
6 'use strict';
7
8
9 var KEYS = {
10     ENTER: 13,
11     ARROW_LEFT: 37,
12     ARROW_UP: 38,
13     ARROW_RIGHT: 39,
14     ARROW_DOWN: 40,
15     BACKSPACE: 8,
16     DELETE: 46,
17     X: 88
18 };
19
20 var handleKey = function(event, canvas) {
21     handlers.some(function(handler) {
22         if(handles(handler, event) && handler[event.type]) {
23             handler[event.type](event, canvas);
24             return true;
25         }
26     });
27 };
28
29 var handles = function(handler, event) {
30     if(handler.key === event.which) {
31         return true;
32     }
33     if(handler.keys && handler.keys.indexOf(event.which) !== -1) {
34         return true;
35     }
36     return false;
37 };
38
39 var handlers = [];
40
41
42 handlers.push({key: KEYS.ENTER,
43     keydown: function(event, canvas) {
44         event.preventDefault();
45         var cursor = canvas.getCursor(),
46             position = cursor.getPosition(),
47             element = position.element,
48             added;
49
50         if(Object.keys(cursor.getPosition()).length === 0) {
51             var currentElement = canvas.getCurrentNodeElement();
52             if(currentElement) {
53                 canvas.wlxmlDocument.startTransaction();
54                 added = currentElement.data('wlxmlNode').after({
55                     tagName: currentElement.getWlxmlTag() || 'div',
56                     attrs: {'class': currentElement.getWlxmlClass() || 'p'}
57                 });
58                 added.append({text:''});
59                 canvas.wlxmlDocument.endTransaction();
60                 canvas.setCurrentElement(utils.findCanvasElement(added), {caretTo: 'start'});
61             }
62             return;
63         }
64
65         if(!cursor.isSelecting()) {
66             if(event.ctrlKey) {
67                 if(element instanceof documentElement.DocumentTextElement) {
68                     element = element.parent();
69                 }
70
71                 canvas.wlxmlDocument.startTransaction();
72                 added = element.data('wlxmlNode').after(
73                     {tagName: element.getWlxmlTag() || 'div', attrs: {'class': element.getWlxmlClass() || 'p'}}
74                 );
75                 added.append({text: ''});
76                 canvas.wlxmlDocument.endTransaction();
77                 canvas.setCurrentElement(utils.findCanvasElement(added), {caretTo: 'start'});
78
79             } else {
80
81                 if(!(element.parent().parent())) {
82                     return false; // top level element is unsplittable
83                 }
84
85                 //var nodes = position.element.data('wlxmlNode').split({offset: position.offset}),
86                 // var nodes = position.element.data('wlxmlNode').transform('split', {offset: position.offset}),
87                 //     newEmpty,
88                 //     goto,
89                 //     gotoOptions;
90
91                 // if(position.offsetAtBeginning)
92                 //     newEmpty = nodes.first;
93                 // else if(position.offsetAtEnd)
94                 //     newEmpty = nodes.second;
95                 
96                 // if(newEmpty) {
97                 //     //goto = newEmpty.append({text: ''});
98                 //     gotoOptions = {};
99                 // } else {
100                 //     goto = nodes.second;
101                 //     gotoOptions = {caretTo: 'start'};
102                 // }
103
104                 var result = position.element.data('wlxmlNode').breakContent({offset: position.offset}),
105                     goto, gotoOptions;
106                 if(result.emptyText) {
107                     goto = result.emptyText;
108                     gotoOptions = {};
109                 } else {
110                     goto = result.second;
111                     gotoOptions = {caretTo: 'start'};
112                 }
113
114                 canvas.setCurrentElement(utils.findCanvasElement(goto), gotoOptions);
115             }
116         }
117     }
118 });
119
120 handlers.push({keys: [KEYS.ARROW_UP, KEYS.ARROW_DOWN, KEYS.ARROW_LEFT, KEYS.ARROW_RIGHT],
121     keydown: function(event, canvas) {
122         var position = canvas.getCursor().getPosition(),
123             element = position.element;
124         if(element && (element instanceof documentElement.DocumentTextElement) && element.isEmpty()) {
125             var direction, caretTo;
126             if(event.which === KEYS.ARROW_LEFT  || event.which === KEYS.ARROW_UP) {
127                 direction = 'above';
128                 caretTo = 'end';
129             } else {
130                 direction = 'below';
131                 caretTo = 'start';
132             }
133             var el = canvas.getDocumentElement(utils.nearestInDocumentOrder('[document-text-element]', direction, element.dom()[0]));
134             if(el) {
135                 canvas.setCurrentElement(el, {caretTo: caretTo});
136             }
137         }
138     },
139     keyup: function(event, canvas) {
140         var element = canvas.getCursor().getPosition().element,
141             caretTo = false;
142         if(!element) {
143             // Chrome hack
144
145             var moves = [{direction: 'above', caretTo: 'end'}, {direction: 'below', caretTo: 'start'}];
146             if(event.which === KEYS.ARROW_RIGHT  || event.which === KEYS.ARROW_DOWN) {
147                 moves.reverse();
148             }
149             moves.some(function(move) {
150                 /* globals window */
151                 var targetNode = utils.nearestInDocumentOrder('[document-text-element]:visible', move.direction, window.getSelection().focusNode);
152                 if(targetNode) {
153                     element = canvas.getDocumentElement(targetNode);
154                     caretTo = move.caretTo;
155                     return true; // break
156                 }
157             });
158         }
159         if(element) {
160             canvas.setCurrentElement(element, {caretTo: caretTo});
161         }
162     }
163 });
164
165
166 var selectsWholeTextElement = function(cursor) {
167     if(cursor.isSelecting() && cursor.getSelectionStart().offsetAtBeginning && cursor.getSelectionEnd().offsetAtEnd) {
168         return true;
169     }
170     return false;
171 };
172
173 handlers.push({key: KEYS.X,
174     keydown: function(event, canvas) {
175         if(event.ctrlKey && selectsWholeTextElement(canvas.getCursor())) {
176             event.preventDefault();
177         }
178     }
179 });
180
181 handlers.push({keys: [KEYS.BACKSPACE, KEYS.DELETE],
182     keydown: function(event, canvas) {
183         var cursor = canvas.getCursor(),
184             position = canvas.getCursor().getPosition(),
185             element = position.element,
186             node = element.data('wlxmlNode'),
187             direction = 'above',
188             caretTo = 'end',
189             goto;
190
191             
192         if(event.which === KEYS.DELETE) {
193             direction = 'below';
194             caretTo = 'start';
195         }
196
197         if(cursor.isSelecting() && !cursor.isSelectingWithinElement()) {
198             event.preventDefault();
199             var start = cursor.getSelectionStart(),
200                 end = cursor.getSelectionEnd();
201
202             if(direction === 'above') {
203                 if(start.offsetAtBeginning) {
204                     goto = start.element.getNearestTextElement('above');
205                     caretTo = 'end';
206                 } else {
207                     goto = start.element;
208                     caretTo = start.offset;
209                 }
210             } else {
211                 if(end.offsetAtEnd) {
212                     goto = start.element.getNearestTextElement('below');
213                     caretTo = 'start';
214                 } else {
215                     goto = end.element;
216                     caretTo = 0;
217                 }
218             }
219
220             canvas.wlxmlDocument.deleteText({
221                 from: {
222                     node: start.element.data('wlxmlNode'),
223                     offset: start.offset
224                 },
225                 to: {
226                     node: end.element.data('wlxmlNode'),
227                     offset: end.offset
228                 }
229             });
230             if(goto) {
231                 canvas.setCurrentElement(goto, {caretTo: caretTo});
232             }
233             return;
234         }
235             
236         var cursorAtOperationEdge = position.offsetAtBeginning;
237         if(event.which === KEYS.DELETE) {
238             cursorAtOperationEdge = position.offsetAtEnd;
239         }
240
241         var willDeleteWholeText = function() {
242             return element.getText().length === 1 || selectsWholeTextElement(cursor);
243         };
244
245         canvas.wlxmlDocument.transaction(function() {
246             if(willDeleteWholeText()) {
247                 event.preventDefault();
248                 node.setText('');
249             }
250             else if(element.isEmpty()) {
251                 event.preventDefault();
252                 var parent = element.parent(),
253                     grandParent = parent ? parent.parent() : null;
254                 if(!grandParent && parent.children().length === 1) {
255                     return;
256                 }
257                 if(parent.children().length === 1 && parent.children()[0].sameNode(element)) {
258                     if(grandParent && grandParent.children().length === 1) {
259                         goto = grandParent.data('wlxmlNode').append({text: ''});
260                     } else {
261                         goto = element.getNearestTextElement(direction);
262                     }
263                     parent.data('wlxmlNode').detach();
264                 } else {
265                     goto = element.getNearestTextElement(direction);
266                     element.data('wlxmlNode').detach();
267                 }
268                 canvas.setCurrentElement(goto, {caretTo: caretTo});
269             }
270             else if(cursorAtOperationEdge) {
271                 if(direction === 'below') {
272                     element = element.getNearestTextElement(direction);
273                 }
274                 if(element) {
275                     goto = element.data('wlxmlNode').mergeContentUp();
276                     canvas.setCurrentElement(goto.node, {caretTo: goto.offset});
277                 }
278                 event.preventDefault();
279             }
280         });
281     }
282 });
283
284 return {
285     handleKey: handleKey
286 };
287
288 });