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