a6f52cfed9a86e534896c89dab2a63649536fd6f
[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     if(handler.keys && handler.keys.indexOf(event.which) !== -1)
33         return true;
34     return false;
35 };
36
37 var handlers = [];
38
39
40 handlers.push({key: KEYS.ENTER,
41     keydown: function(event, canvas) {
42         event.preventDefault();
43         var cursor = canvas.getCursor(),
44             position = cursor.getPosition(),
45             element = position.element;
46
47         if(!cursor.isSelecting()) {
48             if(event.ctrlKey) {
49                 var added = element.after({tag: element.getWlxmlTag() || 'div', klass: element.getWlxmlClass() || 'p'});
50                 added.append({text:''});
51                 canvas.setCurrentElement(added, {caretTo: 'start'});
52
53             } else {
54
55                 if(!(element.parent().parent())) {
56                     return false; // top level element is unsplittable
57                 }
58
59                 var elements = position.element.split({offset: position.offset}),
60                     newEmpty,
61                     goto,
62                     gotoOptions;
63
64                 if(position.offsetAtBeginning)
65                     newEmpty = elements.first;
66                 else if(position.offsetAtEnd)
67                     newEmpty = elements.second;
68                 
69                 if(newEmpty) {
70                     goto = newEmpty.append(documentElement.DocumentTextElement.create({text: ''}, this));
71                     gotoOptions = {};
72                 } else {
73                     goto = elements.second;
74                     gotoOptions = {caretTo: 'start'};
75                 }
76
77                 canvas.setCurrentElement(goto, gotoOptions);
78             }
79         }
80     }
81 });
82
83 handlers.push({keys: [KEYS.ARROW_UP, KEYS.ARROW_DOWN, KEYS.ARROW_LEFT, KEYS.ARROW_RIGHT],
84     keydown: function(event, canvas) {
85         var position = canvas.getCursor().getPosition(),
86             element = position.element;
87         if(element && (element instanceof documentElement.DocumentTextElement) && element.isEmpty()) {
88             var direction, caretTo;
89             if(event.which === KEYS.ARROW_LEFT  || event.which === KEYS.ARROW_UP) {
90                 direction = 'above';
91                 caretTo = 'end';
92             } else {
93                 direction = 'below';
94                 caretTo = 'start';
95             }
96             var el = canvas.getDocumentElement(utils.nearestInDocumentOrder('[document-text-element]', direction, element.dom()[0]));
97             canvas.setCurrentElement(el, {caretTo: caretTo});
98         }
99     },
100     keyup: function(event, canvas) {
101         var element = canvas.getCursor().getPosition().element,
102             caretTo = false;
103         if(!element) {
104             // Chrome hack
105             var direction;
106             if(event.which === KEYS.ARROW_LEFT  || event.which === KEYS.ARROW_UP) {
107                 direction = 'above';
108                 caretTo = 'end';
109             } else {
110                 direction = 'below';
111                 caretTo = 'start';
112             }
113             element = canvas.getDocumentElement(utils.nearestInDocumentOrder('[document-text-element]:visible', direction, window.getSelection().focusNode));
114         }
115         canvas.setCurrentElement(element, {caretTo: caretTo});
116     }
117 });
118
119
120 var selectsWholeTextElement = function(cursor) {
121     if(cursor.isSelecting() && cursor.getSelectionStart().offsetAtBeginning && cursor.getSelectionEnd().offsetAtEnd)
122         return true;
123     return false;
124 }
125
126 handlers.push({key: KEYS.X,
127     keydown: function(event, canvas) {
128         if(event.ctrlKey && selectsWholeTextElement(canvas.getCursor()))
129             event.preventDefault();
130     }
131 });
132
133 handlers.push({keys: [KEYS.BACKSPACE, KEYS.DELETE],
134     keydown: function(event, canvas) {
135         var cursor = canvas.getCursor(),
136             position = canvas.getCursor().getPosition(),
137             element = position.element;
138
139         if(cursor.isSelecting() && !cursor.isSelectingWithinElement()) {
140             event.preventDefault();
141             return;
142         }
143             
144         var cursorAtOperationEdge = position.offsetAtBeginning;
145         if(event.which === KEYS.DELETE) {
146             cursorAtOperationEdge = position.offsetAtEnd;
147         }
148
149         var willDeleteWholeText = function() {
150             return element.getText().length === 1 || selectsWholeTextElement(cursor);
151         }
152
153         if(willDeleteWholeText()) {
154             event.preventDefault();
155             element.setText('');
156         }
157         else if(element.isEmpty()) {
158
159             var direction = 'above',
160                 caretTo = 'end';
161                 
162             if(event.which === KEYS.DELETE) {
163                 direction = 'below';
164                 caretTo = 'start';
165             }
166
167             event.preventDefault();
168
169             var parent = element.parent(),
170                 grandParent = parent ? parent.parent() : null,
171                 goto;
172             if(parent.children().length === 1 && parent.children()[0].sameNode(element)) {
173                 if(grandParent && grandParent.children().length === 1) {
174                     goto = grandParent.append({text: ''});
175                 } else {
176                     goto = element.getNearestTextElement(direction);
177                 }
178                 parent.detach();
179             } else {
180                 goto = element.getNearestTextElement(direction);
181                 element.detach();
182             }
183             canvas.setCurrentElement(goto, {caretTo: caretTo});
184             canvas.publisher('contentChanged');
185         }
186         else if(cursorAtOperationEdge) {
187             // todo
188             event.preventDefault();
189         }
190     }
191 });
192
193 return {
194     handleKey: handleKey
195 };
196
197 });