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 });