bd66c6ecfb27d4da7cd48a768f9f706c0cf79caa
[fnpeditor.git] / src / editor / modules / documentCanvas / canvas / keyboard.js
1 define([
2 'libs/jquery',
3 'modules/documentCanvas/canvas/documentElement',
4 'modules/documentCanvas/canvas/utils'
5 ], function($, documentElement, utils) {
6     
7 'use strict';
8 /* globals gettext */
9
10 var KEYS = {
11     ENTER: 13,
12     ARROW_LEFT: 37,
13     ARROW_UP: 38,
14     ARROW_RIGHT: 39,
15     ARROW_DOWN: 40,
16     BACKSPACE: 8,
17     DELETE: 46,
18     X: 88
19 };
20
21 var handleKey = function(event, canvas) {
22     handlers.some(function(handler) {
23         if(handles(handler, event) && handler[event.type]) {
24             handler[event.type](event, canvas);
25             return true;
26         }
27     });
28 };
29
30 var handles = function(handler, event) {
31     if(handler.key === event.which) {
32         return true;
33     }
34     if(handler.keys && handler.keys.indexOf(event.which) !== -1) {
35         return true;
36     }
37     return false;
38 };
39
40
41 var scroll = function(place, textElement) {
42     var rect = textElement.getBoundingClientRect(),
43         scroll = $('#rng-module-documentCanvas-contentWrapper'),
44         border = rect.bottom - (place === 'top' ? rect.height : 0) - scroll.offset().top + scroll[0].scrollTop,
45         visible = scroll[0].scrollTop + {top: 0, bottom: scroll.height()}[place],
46         padding = 16,
47         toScroll = 0;
48     
49     if(place === 'top' && (border - padding < visible)) {
50         toScroll =  border - visible - padding;
51     } else if(place === 'bottom' && (border + padding > visible))  {
52         toScroll = border - visible + padding;
53     }
54     if(toScroll) {
55         scroll[0].scrollTop = scroll[0].scrollTop + toScroll;
56     }
57     return toScroll;
58 };
59
60 var getLastRectAbove = function(node, y) {
61     var rects = node.getClientRects(),
62         idx = 0,
63         rect, toret;
64     while((rect = rects[idx])) {
65         if(rect.bottom < y) {
66             toret = rect;
67         } else {
68             break;
69         }
70         idx++;
71     }
72     return toret;
73 };
74
75 var getFirstRectBelow = function(node, y) {
76     var rects = node.getClientRects(),
77         idx = 0,
78         rect, toret;
79     while((rect = rects[idx])) {
80         if(rect.top > y) {
81             toret = rect;
82             break;
83         }
84         idx++;
85     }
86     return toret;
87 };
88
89 var handlers = [];
90
91
92 handlers.push({key: KEYS.ENTER,
93     keydown: function(event, canvas) {
94         event.preventDefault();
95         var cursor = canvas.getCursor(),
96             position = cursor.getPosition(),
97             element = position.element;
98
99         if(Object.keys(cursor.getPosition()).length === 0) {
100             var currentElement = canvas.getCurrentNodeElement();
101             if(currentElement && !currentElement.wlxmlNode.isRoot()) {
102                 canvas.wlxmlDocument.transaction(function() {
103                     var added = currentElement.wlxmlNode.after({
104                         tagName: currentElement.wlxmlNode.getTagName() || 'div',
105                         attrs: {'class': currentElement.wlxmlNode.getClass() || 'p'}
106                     });
107                     added.append({text:''});
108                     return added;
109                 }, {
110                     metadata: {
111                         description: gettext('Splitting text')
112                     },
113                     success: function(ret) {
114                         canvas.setCurrentElement(utils.getElementForNode(ret), {caretTo: 'start'});
115                     }
116                 });
117
118             }
119             return;
120         }
121
122         if(!cursor.isSelecting()) {
123             if(event.ctrlKey) {
124                 if(element instanceof documentElement.DocumentTextElement) {
125                     element = element.parent();
126                 }
127
128                 canvas.wlxmlDocument.transaction(function() {
129                     var added = element.wlxmlNode.after(
130                         {tagName: element.wlxmlNode.getTagName() || 'div', attrs: {'class': element.wlxmlNode.getClass() || 'p'}}
131                     );
132                     added.append({text: ''});
133                     return added;
134                 }, {
135                     metadata: {
136                         description: gettext('Splitting text')
137                     },
138                     success: function(ret) {
139                         canvas.setCurrentElement(utils.getElementForNode(ret), {caretTo: 'start'});
140                     }
141                 });
142
143             } else {
144
145                 if(!(element.parent().parent())) {
146                     return false; // top level element is unsplittable
147                 }
148
149                 var node = position.element.wlxmlNode,
150                     result, goto, gotoOptions;
151
152                 node.document.transaction(function() {
153                     result = position.element.wlxmlNode.breakContent({offset: position.offset});
154                 }, {
155                     metadata: {
156                         description: gettext('Splitting text')
157                     }
158                 });
159
160                 if(result.emptyText) {
161                     goto = result.emptyText;
162                     gotoOptions = {};
163                 } else {
164                     goto = result.second;
165                     gotoOptions = {caretTo: 'start'};
166                 }
167
168                 canvas.setCurrentElement(utils.getElementForNode(goto), gotoOptions);
169             }
170         }
171     }
172 });
173
174 handlers.push({keys: [KEYS.ARROW_UP],
175     keydown: function(event, canvas) {
176         /* globals window */
177         var element = canvas.getCursor().getPosition().element,
178             caretRect = window.getSelection().getRangeAt(0).getClientRects()[0],
179             frameRects = element.dom[0].getClientRects(),
180             caretTop = caretRect.bottom - caretRect.height,
181             position, target,rect, scrolled;
182
183         
184         if((frameRects[0].bottom === caretRect.bottom) || (caretRect.left < frameRects[0].left)) {
185             event.preventDefault();
186             canvas.rootWrapper.find('[document-text-element]').each(function() {
187                 var test = getLastRectAbove(this, caretTop);
188                 if(test) {
189                     target = this;
190                     rect = test;
191                 } else {
192                     return false;
193                 }
194             });
195             if(target) {
196                 scrolled = scroll('top', target);
197                 position = utils.caretPositionFromPoint(caretRect.left, rect.bottom - 1 - scrolled);
198                 canvas.setCurrentElement(canvas.getDocumentElement(position.textNode), {caretTo: position.offset});
199             }
200         }
201     }
202 });
203
204 handlers.push({keys: [KEYS.ARROW_DOWN],
205     keydown: function(event, canvas) {
206         /* globals window */
207         var element = canvas.getCursor().getPosition().element,
208             caretRect = window.getSelection().getRangeAt(0).getClientRects()[0],
209             frameRects = element.dom[0].getClientRects(),
210             lastRect = frameRects[frameRects.length-1],
211             position, target,rect, scrolled;
212
213         if(lastRect.bottom === caretRect.bottom || (caretRect.left > lastRect.left + lastRect.width)) {
214             event.preventDefault();
215             canvas.rootWrapper.find('[document-text-element]').each(function() {
216                 var test = getFirstRectBelow(this, caretRect.bottom);
217                 if(test) {
218                     target = this;
219                     rect = test;
220                     return false;
221                 }
222             });
223             if(target) {
224                 scrolled = scroll('bottom', target);
225                 position = utils.caretPositionFromPoint(caretRect.left, rect.top +1 - scrolled);
226                 canvas.setCurrentElement(canvas.getDocumentElement(position.textNode), {caretTo: position.offset});
227             }
228         }
229     }
230 });
231
232 handlers.push({keys: [KEYS.ARROW_LEFT],
233     keydown: function(event, canvas) {
234         /* globals window */
235         var position = canvas.getCursor().getPosition(),
236             element = position.element,
237             prev;
238
239         if(position.offset === 0) {
240             event.preventDefault();
241             prev = canvas.getPreviousTextElement(element);
242             if(prev) {
243                 scroll('top', prev.dom[0]);
244                 canvas.setCurrentElement(canvas.getDocumentElement(prev.dom.contents()[0]), {caretTo: 'end'});
245             }
246         }
247     }
248 });
249
250 handlers.push({keys: [KEYS.ARROW_RIGHT],
251     keydown: function(event, canvas) {
252         /* globals window */
253         var position = canvas.getCursor().getPosition(),
254             element = position.element,
255             next;
256         if(position.offsetAtEnd) {
257             event.preventDefault();
258             next = canvas.getNextTextElement(element);
259             if(next) {
260                 scroll('bottom', next.dom[0]);
261                 canvas.setCurrentElement(canvas.getDocumentElement(next.dom.contents()[0]), {caretTo: 0});
262             }
263         } else {
264             var secondToLast = (position.offset === element.wlxmlNode.getText().length -1);
265             if(secondToLast) {
266                 // Only Flying Spaghetti Monster knows why this is need for FF (for versions at least 26 to 31)
267                 event.preventDefault();
268                 canvas.setCurrentElement(element, {caretTo: 'end'});
269             }
270         }
271
272     }
273 });
274
275 var selectsWholeTextElement = function(cursor) {
276     if(cursor.isSelecting() && cursor.getSelectionStart().offsetAtBeginning && cursor.getSelectionEnd().offsetAtEnd) {
277         return true;
278     }
279     return false;
280 };
281
282 handlers.push({key: KEYS.X,
283     keydown: function(event, canvas) {
284         if(event.ctrlKey && selectsWholeTextElement(canvas.getCursor())) {
285             event.preventDefault();
286         }
287     }
288 });
289
290 handlers.push({keys: [KEYS.BACKSPACE, KEYS.DELETE],
291     keydown: function(event, canvas) {
292         var cursor = canvas.getCursor(),
293             position = canvas.getCursor().getPosition(),
294             element = position.element,
295             node = element ? element.wlxmlNode : null,
296             direction = 'above',
297             caretTo = 'end',
298             goto;
299
300         if(!element || !node) {
301             return;
302         }
303             
304         if(event.which === KEYS.DELETE) {
305             direction = 'below';
306             caretTo = 'start';
307         }
308
309         if(cursor.isSelecting()) {
310             event.preventDefault();
311             var start = cursor.getSelectionStart(),
312                 end = cursor.getSelectionEnd();
313
314             if(direction === 'above') {
315                 if(start.offsetAtBeginning) {
316                     goto = canvas.getNearestTextElement('above', start.element);
317                     caretTo = 'end';
318                 } else {
319                     goto = start.element;
320                     caretTo = start.offset;
321                 }
322             } else {
323                 if(end.offsetAtEnd) {
324                     goto = canvas.getNearestTextElement('below', start.element);
325                     caretTo = 'start';
326                 } else {
327                     goto = end.element;
328                     caretTo = 0;
329                 }
330             }
331
332             canvas.wlxmlDocument.deleteText({
333                 from: {
334                     node: start.element.wlxmlNode,
335                     offset: start.offset
336                 },
337                 to: {
338                     node: end.element.wlxmlNode,
339                     offset: end.offset
340                 }
341             });
342             if(goto) {
343                 canvas.setCurrentElement(goto, {caretTo: caretTo});
344             }
345             return;
346         }
347             
348         var cursorAtOperationEdge = position.offsetAtBeginning;
349         if(event.which === KEYS.DELETE) {
350             cursorAtOperationEdge = position.offsetAtEnd;
351         }
352
353         var willDeleteWholeText = function() {
354             return element.getText().length === 1 || selectsWholeTextElement(cursor);
355         };
356
357         canvas.wlxmlDocument.transaction(function() {
358             if(willDeleteWholeText()) {
359                 event.preventDefault();
360                 node.setText('');
361             }
362             else if(cursorAtOperationEdge) {
363                 if(direction === 'below') {
364                     element = canvas.getNearestTextElement(direction, element);
365                 }
366                 if(element && element.wlxmlNode.getIndex() === 0) {
367                     goto = element.wlxmlNode.parent().moveUp();
368                     if(goto) {
369                         canvas.setCurrentElement(goto.node, {caretTo: goto.offset});
370                     }
371                 }
372                 event.preventDefault();
373             }
374         }, {
375             metadata: {
376                 description: gettext('Remove text')
377             }
378         });
379     }
380 });
381
382 var handleKeyEvent = function(e, s) {
383     keyEventHandlers.some(function(handler) {
384         if(handler.applies(e, s)) {
385             handler.run(e, s);
386             return true;
387         }
388     });
389 };
390 // todo: whileRemoveWholetext
391 var keyEventHandlers = [
392     {
393         applies: function(e, s) {
394             return s.type === 'caret' && (
395                 (s.isAtBeginning() && e.key === KEYS.BACKSPACE) ||
396                 (s.isAtEnd() && e.key === KEYS.DELETE)
397             );
398         },
399         run: function(e,s) {
400             var direction, caretTo, cursorAtOperationEdge, goto, element;
401
402             if(e.key === KEYS.BACKSPACE) {
403                 direction = 'above';
404                 caretTo = 'end';
405                 cursorAtOperationEdge = s.isAtBeginning();
406                 element = s.element;
407             }
408             else {
409                 direction = 'below';
410                 caretTo = 'start';
411                 cursorAtOperationEdge = s.isAtEnd();
412                 element = cursorAtOperationEdge && s.canvas.getNearestTextElement(direction, s.element);
413             }
414
415             if(!cursorAtOperationEdge || !element) {
416                 return;
417             }
418
419             e.preventDefault();
420
421             s.canvas.wlxmlDocument.transaction(function() {
422                 if(element.wlxmlNode.getIndex() === 0) {
423                     goto = element.wlxmlNode.parent().moveUp();
424                     if(goto) {
425                         s.canvas.setCurrentElement(goto.node, {caretTo: goto.offset});
426                     }
427                 }
428             }, {
429                 metadata: {
430                     description: gettext('Remove text')
431                 }
432             });
433         }
434     },
435
436     {
437         applies: function(e,s) {
438             return s.type === 'caret' && s.element.getText().length === 1 && (e.key === KEYS.BACKSPACE || e.key === KEYS.DELETE);
439         },
440         run: function(e,s) {
441             e.preventDefault();
442             e.element.wlxmlNode.setText('');
443             s.canvas.setCurrentElement(s.element, {caretTo: 0});
444         }
445     },
446
447     {
448         applies: function(e, s) {
449             return s.type === 'textSelection' && (e.key === KEYS.BACKSPACE || e.key === KEYS.DELETE);
450         },
451         run: function(e, s) {
452             var direction = 'above',
453                 caretTo = 'end',
454                 goto;
455
456             if(e.key === KEYS.DELETE) {
457                 direction = 'below';
458                 caretTo = 'start';
459             }
460
461             e.preventDefault();
462
463             if(s.startsAtBeginning && s.endsAtEnd && s.startElement.sameNode(s.endElement)) {
464                 goto = s.startElement;
465                 caretTo = s.startOffset;
466             } else if(direction === 'above') {
467                 if(s.startsAtBeginning()) {
468                     goto = s.canvas.getNearestTextElement('above', s.startElement);
469                     caretTo = 'end';
470                 } else {
471                     goto = s.startElement;
472                     caretTo = s.startOffset;
473                 }
474             } else {
475                 if(s.endsAtEnd()) {
476                     goto = s.canvas.getNearestTextElement('below', s.startElement);
477                     caretTo = 'start';
478                 } else {
479                     goto = s.endElement;
480                     caretTo = 0;
481                 }
482             }
483
484             var doc = s.canvas.wlxmlDocument;
485             doc.transaction(function() {
486                 
487                 doc.deleteText({
488                     from: {
489                         node: s.startElement.wlxmlNode,
490                         offset: s.startOffset
491                     },
492                     to: {
493                         node: s.endElement.wlxmlNode,
494                         offset: s.endOffset
495                     }
496                 });
497
498             }, {
499                 success: function() {
500                     if(goto) {
501                         s.canvas.setCurrentElement(goto, {caretTo: caretTo});
502                     }
503                 }
504             });
505
506         }
507     },
508     {
509         applies: function(e, s) {
510             return s.type === 'caret' && e.key === KEYS.ENTER && !s.element.parent().isRootElement();
511         },
512         run: function(e, s) {
513             var result, goto, gotoOptions;
514             void(e);
515             e.preventDefault();
516             s.canvas.wlxmlDocument.transaction(function() {
517                 result = s.element.wlxmlNode.breakContent({offset: s.offset});
518             }, {
519                 metadata: {
520                     description: gettext('Splitting text'),
521                     fragment: s.toDocumentFragment()
522                 }
523             });
524
525             if(result.emptyText) {
526                 goto = result.emptyText;
527                 gotoOptions = {};
528             } else {
529                 goto = result.second;
530                 gotoOptions = {caretTo: 'start'};
531             }
532
533             s.canvas.setCurrentElement(utils.getElementForNode(goto), gotoOptions);
534         }
535     }
536 ];
537
538 return {
539     handleKey: handleKey,
540     handleKeyEvent: handleKeyEvent,
541     KEYS: KEYS
542 };
543
544 });