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.element.wlxmlNode.parent().is({tagName: 'span'}) &&
 396                 s.element.wlxmlNode.getText().length === 1 &&
 397                 s.offset === 1 &&
 398                 (e.key === KEYS.BACKSPACE);
 399         },
 400         run: function(e, s) {
 401             var params = {},
 402                 prevTextNode = s.element.canvas.getPreviousTextElement(s.element).wlxmlNode;
 403             e.preventDefault();
 404             s.element.wlxmlNode.parent().detach(params);
 405             s.canvas.setCurrentElement(
 406                 (params.ret && params.ret.mergedTo) || prevTextNode,
 407                 {caretTo: params.ret ? params.ret.previousLen : (prevTextNode ? prevTextNode.getText().length : 0)});
 408         }
 409     },
 410     {
 411         applies: function(e, s) {
 412             return s.type === 'caret' && (
 413                 (s.isAtBeginning() && e.key === KEYS.BACKSPACE) ||
 414                 (s.isAtEnd() && e.key === KEYS.DELETE)
 415             );
 416         },
 417         run: function(e,s) {
 418             var direction, caretTo, cursorAtOperationEdge, goto, element;
 419
 420             if(e.key === KEYS.BACKSPACE) {
 421                 direction = 'above';
 422                 caretTo = 'end';
 423                 cursorAtOperationEdge = s.isAtBeginning();
 424                 element = s.element;
 425             }
 426             else {
 427                 direction = 'below';
 428                 caretTo = 'start';
 429                 cursorAtOperationEdge = s.isAtEnd();
 430                 element = cursorAtOperationEdge && s.canvas.getNearestTextElement(direction, s.element);
 431             }
 432
 433             if(!cursorAtOperationEdge || !element) {
 434                 return;
 435             }
 436
 437             e.preventDefault();
 438
 439             s.canvas.wlxmlDocument.transaction(function() {
 440                 if(element.wlxmlNode.getIndex() === 0) {
 441                     goto = element.wlxmlNode.parent().moveUp();
 442                 } else {
 443                     goto = element.wlxmlNode.moveUp();
 444                 }
 445                 if(goto) {
 446                    s.canvas.setCurrentElement(goto.node, {caretTo: goto.offset});
 447                 }
 448             }, {
 449                 metadata: {
 450                     description: gettext('Remove text')
 451                 }
 452             });
 453         }
 454     },
 455
 456     {
 457         applies: function(e,s) {
 458             return s.type === 'caret' && s.element.getText().length === 1 && (e.key === KEYS.BACKSPACE || e.key === KEYS.DELETE);
 459         },
 460         run: function(e,s) {
 461             e.preventDefault();
 462             e.element.wlxmlNode.setText('');
 463             s.canvas.setCurrentElement(s.element, {caretTo: 0});
 464         }
 465     },
 466
 467     {
 468         applies: function(e, s) {
 469             return s.type === 'textSelection' && (e.key === KEYS.BACKSPACE || e.key === KEYS.DELETE);
 470         },
 471         run: function(e, s) {
 472             var direction = 'above',
 473                 caretTo = 'end',
 474                 goto;
 475
 476             if(e.key === KEYS.DELETE) {
 477                 direction = 'below';
 478                 caretTo = 'start';
 479             }
 480
 481             e.preventDefault();
 482
 483             if(s.startsAtBeginning && s.endsAtEnd && s.startElement.sameNode(s.endElement)) {
 484                 goto = s.startElement;
 485                 caretTo = s.startOffset;
 486             } else if(direction === 'above') {
 487                 if(s.startsAtBeginning()) {
 488                     goto = s.canvas.getNearestTextElement('above', s.startElement);
 489                     caretTo = 'end';
 490                 } else {
 491                     goto = s.startElement;
 492                     caretTo = s.startOffset;
 493                 }
 494             } else {
 495                 if(s.endsAtEnd()) {
 496                     goto = s.canvas.getNearestTextElement('below', s.startElement);
 497                     caretTo = 'start';
 498                 } else {
 499                     goto = s.endElement;
 500                     caretTo = 0;
 501                 }
 502             }
 503
 504             var doc = s.canvas.wlxmlDocument;
 505             doc.transaction(function() {
 506
 507                 doc.deleteText({
 508                     from: {
 509                         node: s.startElement.wlxmlNode,
 510                         offset: s.startOffset
 511                     },
 512                     to: {
 513                         node: s.endElement.wlxmlNode,
 514                         offset: s.endOffset
 515                     }
 516                 });
 517
 518             }, {
 519                 success: function() {
 520                     if(goto) {
 521                         s.canvas.setCurrentElement(goto, {caretTo: caretTo});
 522                     }
 523                 }
 524             });
 525
 526         }
 527     },
 528     {
 529         applies: function(e, s) {
 530             return s.type === 'caret' && e.key === KEYS.ENTER && !s.element.parent().isRootElement();
 531         },
 532         run: function(e, s) {
 533             var result, goto, gotoOptions;
 534             void(e);
 535             e.preventDefault();
 536             s.canvas.wlxmlDocument.transaction(function() {
 537                 result = s.element.wlxmlNode.breakContent({offset: s.offset});
 538             }, {
 539                 metadata: {
 540                     description: gettext('Splitting text'),
 541                     fragment: s.toDocumentFragment()
 542                 }
 543             });
 544
 545             if(result.emptyText) {
 546                 goto = result.emptyText;
 547                 gotoOptions = {};
 548             } else {
 549                 goto = result.second;
 550                 gotoOptions = {caretTo: 'start'};
 551             }
 552
 553             s.canvas.setCurrentElement(utils.getElementForNode(goto), gotoOptions);
 554         }
 555     }
 556 ];
 557
 558 return {
 559     handleKey: handleKey,
 560     handleKeyEvent: handleKeyEvent,
 561     KEYS: KEYS
 562 };
 563
 564 });