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