99201bc9504b318fc25056d3991f9d46508df291
[fnpeditor.git] / src / editor / modules / documentCanvas / canvas / keyboard.js
1 define([
2 'libs/jquery',
3 'modules/documentCanvas/canvas/utils'
4 ], function($, utils) {
5     
6 'use strict';
7 /* globals gettext */
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 scroll = function(place, textElement) {
21     var rect = textElement.getBoundingClientRect(),
22         scroll = $('#rng-module-documentCanvas-contentWrapper'),
23         border = rect.bottom - (place === 'top' ? rect.height : 0) - scroll.offset().top + scroll[0].scrollTop,
24         visible = scroll[0].scrollTop + {top: 0, bottom: scroll.height()}[place],
25         padding = 16,
26         toScroll = 0;
27     
28     if(place === 'top' && (border - padding < visible)) {
29         toScroll =  border - visible - padding;
30     } else if(place === 'bottom' && (border + padding > visible))  {
31         toScroll = border - visible + padding;
32     }
33     if(toScroll) {
34         scroll[0].scrollTop = scroll[0].scrollTop + toScroll;
35     }
36     return toScroll;
37 };
38
39 var getLastRectAbove = function(node, y) {
40     var rects = node.getClientRects(),
41         idx = 0,
42         rect, toret;
43     while((rect = rects[idx])) {
44         if(rect.bottom < y) {
45             toret = rect;
46         } else {
47             break;
48         }
49         idx++;
50     }
51     return toret;
52 };
53
54 var getFirstRectBelow = function(node, y) {
55     var rects = node.getClientRects(),
56         idx = 0,
57         rect, toret;
58     while((rect = rects[idx])) {
59         if(rect.top > y) {
60             toret = rect;
61             break;
62         }
63         idx++;
64     }
65     return toret;
66 };
67
68 var handleKeyEvent = function(e, s) {
69     keyEventHandlers.some(function(handler) {
70         if(handler.applies(e, s)) {
71             handler.run(e, s);
72             return true;
73         }
74     });
75 };
76 // todo: whileRemoveWholetext
77 var keyEventHandlers = [
78     { // ctrl+x - prevented (?)
79         applies: function(e, s) {
80             return e.ctrlKey &&
81                 e.key === KEYS.X &&
82                 s.type === 'textSelection' &&
83                 s.startsAtBeginning() &&
84                 s.endsAtEnd();
85         },
86         run: function(e,s) {
87             void(s);
88             e.preventDefault();
89         }
90     },
91     {
92         applies: function(e, s) {
93             return e.key === KEYS.ARROW_UP && s.type === 'caret';
94         },
95         run: function(e, s) {
96             /* globals window */
97             var caretRect = window.getSelection().getRangeAt(0).getClientRects()[0],
98                 frameRects = s.element.dom[0].getClientRects(),
99                 caretTop = caretRect.bottom - caretRect.height,
100                 position, target,rect, scrolled;
101
102             
103             if((frameRects[0].bottom === caretRect.bottom) || (caretRect.left < frameRects[0].left)) {
104                 e.preventDefault();
105                 s.canvas.rootWrapper.find('[document-text-element]').each(function() {
106                     var test = getLastRectAbove(this, caretTop);
107                     if(test) {
108                         target = this;
109                         rect = test;
110                     } else {
111                         return false;
112                     }
113                 });
114                 if(target) {
115                     scrolled = scroll('top', target);
116                     position = utils.caretPositionFromPoint(caretRect.left, rect.bottom - 1 - scrolled);
117                     s.canvas.setCurrentElement(s.canvas.getDocumentElement(position.textNode), {caretTo: position.offset});
118                 }
119             }
120             if(target) {
121                 scrolled = scroll('top', target);
122                 var left = caretRect.left;
123                 if(left > rect.left + rect.width) {
124                     left = rect.left + rect.width;
125                 } else if(left < rect.left ) {
126                     left = rect.left;
127                 }
128                 position = utils.caretPositionFromPoint(left, rect.bottom - 1 - scrolled);
129                 s.canvas.setCurrentElement(s.canvas.getDocumentElement(position.textNode), {caretTo: position.offset});
130             }
131         }
132     },
133     {
134         applies: function(e, s) {
135             return e.key === KEYS.ARROW_DOWN && s.type === 'caret';
136         },
137         run: function(e, s) {
138             /* globals window */
139             var caretRect = window.getSelection().getRangeAt(0).getClientRects()[0],
140                 frameRects = s.element.dom[0].getClientRects(),
141                 lastRect = frameRects[frameRects.length-1],
142                 position, target,rect, scrolled;
143
144             if(lastRect.bottom === caretRect.bottom || (caretRect.left > lastRect.left + lastRect.width)) {
145                 e.preventDefault();
146                 s.canvas.rootWrapper.find('[document-text-element]').each(function() {
147                     var test = getFirstRectBelow(this, caretRect.bottom);
148                     if(test) {
149                         target = this;
150                         rect = test;
151                         return false;
152                     }
153                 });
154                 if(target) {
155                     scrolled = scroll('bottom', target);
156                     position = utils.caretPositionFromPoint(caretRect.left, rect.top +1 - scrolled);
157                     s.canvas.setCurrentElement(s.canvas.getDocumentElement(position.textNode), {caretTo: position.offset});
158                 }
159             }
160             if(target) {
161                 scrolled = scroll('bottom', target);
162                 var left = caretRect.left;
163                 if(left > rect.left + rect.width) {
164                     left = rect.left + rect.width;
165                 } else if(left < rect.left ) {
166                     left = rect.left;
167                 }
168                 position = utils.caretPositionFromPoint(left, rect.top +1 - scrolled);
169                 s.canvas.setCurrentElement(s.canvas.getDocumentElement(position.textNode), {caretTo: position.offset});
170             }
171         }
172     },
173     {
174         applies: function(e, s) {
175             return e.key === KEYS.ARROW_LEFT && s.type === 'caret';
176         },
177         run: function(e, s) {
178             /* globals window */
179             var prev;
180
181             if(s.offset === 0) {
182                 e.preventDefault();
183                 prev = s.canvas.getPreviousTextElement(s.element);
184                 if(prev) {
185                     scroll('top', prev.dom[0]);
186                     s.canvas.setCurrentElement(s.canvas.getDocumentElement(prev.dom.contents()[0]), {caretTo: 'end'});
187                 }
188             }
189         }
190     },
191     {
192         applies: function(e, s) {
193             return e.key === KEYS.ARROW_RIGHT && s.type === 'caret';
194         },
195         run: function(e, s) {
196             /* globals window */
197             var next;
198             if(s.isAtEnd()) {
199                 e.preventDefault();
200                 next = s.canvas.getNextTextElement(s.element);
201                 if(next) {
202                     scroll('bottom', next.dom[0]);
203                     s.canvas.setCurrentElement(s.canvas.getDocumentElement(next.dom.contents()[0]), {caretTo: 0});
204                 }
205             } else {
206                 var secondToLast = (s.offset === s.element.wlxmlNode.getText().length -1);
207                 if(secondToLast) {
208                     // Only Flying Spaghetti Monster knows why this is need for FF (for versions at least 26 to 31)
209                     e.preventDefault();
210                     s.canvas.setCurrentElement(s.element, {caretTo: 'end'});
211                 }
212             }
213         }
214     },
215     { // backspace removing the last character in a span
216         applies: function(e, s) {
217             return s.type === 'caret' &&
218                 s.element.wlxmlNode.parent().is({tagName: 'span'}) &&
219                 s.element.wlxmlNode.getText().length === 1 &&
220                 s.offset === 1 &&
221                 (e.key === KEYS.BACKSPACE);
222         },
223         run: function(e, s) {
224             var params = {},
225                 prevTextNode = s.element.canvas.getPreviousTextElement(s.element).wlxmlNode;
226             e.preventDefault();
227             s.element.wlxmlNode.parent().detach(params);
228             s.canvas.setCurrentElement(
229                 (params.ret && params.ret.mergedTo) || prevTextNode,
230                 {caretTo: params.ret ? params.ret.previousLen : (prevTextNode ? prevTextNode.getText().length : 0)});
231         }
232     },
233     { // backspace/delete through an edge (behaves weirdly at spans)
234         applies: function(e, s) {
235             return s.type === 'caret' && (
236                 (s.isAtBeginning() && e.key === KEYS.BACKSPACE) ||
237                 (s.isAtEnd() && e.key === KEYS.DELETE)
238             );
239         },
240         run: function(e,s) {
241             var goto, element;
242
243             if(e.key === KEYS.BACKSPACE) {
244                 element = s.element;
245             }
246             else {
247                 element = s.canvas.getNearestTextElement('below', s.element);
248             }
249
250             e.preventDefault();
251
252             if(!element) {
253                 return;
254             }
255
256             var parent = element.wlxmlNode.parent();
257             if(element.wlxmlNode.getIndex() === 0 && parent.isContextRoot() && (!parent.is('item') || parent.getIndex() === 0)) {
258                 // Don't even try to do anything at the edge of a context root, except for non-first items
259                 // - this is a temporary solution until key events handling get refactored into something more sane.
260                 return;
261             }
262
263             s.canvas.wlxmlDocument.transaction(function() {
264                 if(element.wlxmlNode.getIndex() === 0) {
265                     goto = element.wlxmlNode.parent().moveUp();
266                 } else {
267                     goto = element.wlxmlNode.moveUp();
268                 }
269                 if(goto) {
270                    s.canvas.setCurrentElement(goto.node, {caretTo: goto.offset});
271                 }
272             }, {
273                 metadata: {
274                     description: gettext('Remove text')
275                 }
276             });
277         }
278     },
279
280     { // backspace/delete last character in a node - why is it needed?
281         applies: function(e,s) {
282             return s.type === 'caret' && s.element.getText().length === 1 && (e.key === KEYS.BACKSPACE || e.key === KEYS.DELETE);
283         },
284         run: function(e,s) {
285             e.preventDefault();
286             s.element.wlxmlNode.setText('');
287             s.canvas.setCurrentElement(s.element, {caretTo: 0});
288         }
289     },
290
291     {
292         applies: function(e, s) {
293             return s.type === 'textSelection' && (e.key === KEYS.BACKSPACE || e.key === KEYS.DELETE);
294         },
295         run: function(e, s) {
296             var direction = 'above',
297                 caretTo = 'end',
298                 goto;
299
300             if(e.key === KEYS.DELETE) {
301                 direction = 'below';
302                 caretTo = 'start';
303             }
304
305             e.preventDefault();
306
307             if(s.startsAtBeginning && s.endsAtEnd && s.startElement.sameNode(s.endElement)) {
308                 goto = s.startElement;
309                 caretTo = s.startOffset;
310             } else if(direction === 'above') {
311                 if(s.startsAtBeginning()) {
312                     goto = s.canvas.getNearestTextElement('above', s.startElement);
313                     caretTo = 'end';
314                 } else {
315                     goto = s.startElement;
316                     caretTo = s.startOffset;
317                 }
318             } else {
319                 if(s.endsAtEnd()) {
320                     goto = s.canvas.getNearestTextElement('below', s.startElement);
321                     caretTo = 'start';
322                 } else {
323                     goto = s.endElement;
324                     caretTo = 0;
325                 }
326             }
327
328             var doc = s.canvas.wlxmlDocument;
329             doc.transaction(function() {
330                 
331                 doc.deleteText({
332                     from: {
333                         node: s.startElement.wlxmlNode,
334                         offset: s.startOffset
335                     },
336                     to: {
337                         node: s.endElement.wlxmlNode,
338                         offset: s.endOffset
339                     }
340                 });
341
342             }, {
343                 success: function() {
344                     if(goto) {
345                         s.canvas.setCurrentElement(goto, {caretTo: caretTo});
346                     }
347                 }
348             });
349
350         }
351     },
352     { // enter on an empty list item - creates paragraph after list
353         applies: function(e, s) {
354             var parent = s.element && s.element.wlxmlNode.parent(),
355                 parentIsItem = parent && parent.is('item'),
356                 itemIsOnList = parent && parent.parent() && parent.parent().is('list'),
357                 onlyChild = parent.contents().length === 1;
358             return s.type === 'caret' && e.key === KEYS.ENTER && s.element.isEmpty() && onlyChild &&
359                 parentIsItem && itemIsOnList;
360         },
361         run: function(e, s) {
362             var item = s.element.wlxmlNode.parent(),
363                 list = item.parent();
364             e.preventDefault();
365             s.canvas.wlxmlDocument.transaction(function() {
366                 var p = list.after({tagName: 'div', attrs: {'class': 'p'}});
367                 p.append({text: ''});
368                 item.detach();
369                 if(list.contents().length === 0) {
370                     list.detach();
371                 }
372                 return p;
373             }, {
374                 success: function(p) {
375                     s.canvas.setCurrentElement(p);
376                 }
377             });
378         }
379     },
380     { // enter - split node
381         applies: function(e, s) {
382             return s.type === 'caret' && e.key === KEYS.ENTER && !s.element.parent().isRootElement();
383         },
384         run: function(e, s) {
385             var parent = s.element.parent(),
386                 children = parent.children(),
387                 result, goto, gotoOptions;
388             void(e);
389             e.preventDefault();
390
391             if(children.length === 1 && s.element.isEmpty()) {
392                 return;
393             }
394
395             s.canvas.wlxmlDocument.transaction(function() {
396                 result = s.element.wlxmlNode.breakContent({offset: s.offset});
397             }, {
398                 metadata: {
399                     description: gettext('Splitting text'),
400                     fragment: s.toDocumentFragment()
401                 }
402             });
403
404             if(result.emptyText) {
405                 goto = result.emptyText;
406                 gotoOptions = {};
407             } else {
408                 goto = result.second;
409                 gotoOptions = {caretTo: 'start'};
410             }
411
412             s.canvas.setCurrentElement(utils.getElementForNode(goto), gotoOptions);
413         }
414     },
415     { // enter - new paragraph after image/video
416         applies: function (e, s) {
417             return s.type === 'nodeSelection' && e.key === KEYS.ENTER && !s.element.isRootElement();
418         },
419         run: function (e, s) {
420             var parent = s.element.parent(),
421                 children = parent.children(),
422                 result, goto, gotoOptions;
423             e.preventDefault();
424
425             s.canvas.wlxmlDocument.transaction(function() {
426                 result = s.element.wlxmlNode.insertNewNode();
427             }, {
428                 metadata: {
429                     description: gettext('Inserting node'),
430                     fragment: s.toDocumentFragment()
431                 }
432             });
433
434             s.canvas.setCurrentElement(utils.getElementForNode(result), {caretTo: 'start'});
435         }
436     }
437 ];
438
439 return {
440     handleKeyEvent: handleKeyEvent,
441     KEYS: KEYS
442 };
443
444 });