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