define([
'libs/jquery',
-'modules/documentCanvas/canvas/documentElement',
'modules/documentCanvas/canvas/utils'
-], function($, documentElement, utils) {
+], function($, utils) {
'use strict';
/* globals gettext */
X: 88
};
-var handleKey = function(event, canvas) {
- handlers.some(function(handler) {
- if(handles(handler, event) && handler[event.type]) {
- handler[event.type](event, canvas);
- return true;
- }
- });
-};
-
-var handles = function(handler, event) {
- if(handler.key === event.which) {
- return true;
- }
- if(handler.keys && handler.keys.indexOf(event.which) !== -1) {
- return true;
- }
- return false;
-};
-
-
var scroll = function(place, textElement) {
var rect = textElement.getBoundingClientRect(),
scroll = $('#rng-module-documentCanvas-contentWrapper'),
return toret;
};
-var handlers = [];
-
-
-handlers.push({key: KEYS.ENTER,
- keydown: function(event, canvas) {
- event.preventDefault();
- var cursor = canvas.getCursor(),
- position = cursor.getPosition(),
- element = position.element;
-
- if(Object.keys(cursor.getPosition()).length === 0) {
- var currentElement = canvas.getCurrentNodeElement();
- if(currentElement && !currentElement.wlxmlNode.isRoot()) {
- canvas.wlxmlDocument.transaction(function() {
- var added = currentElement.wlxmlNode.after({
- tagName: currentElement.wlxmlNode.getTagName() || 'div',
- attrs: {'class': currentElement.wlxmlNode.getClass() || 'p'}
- });
- added.append({text:''});
- return added;
- }, {
- metadata: {
- description: gettext('Splitting text')
- },
- success: function(ret) {
- canvas.setCurrentElement(utils.getElementForNode(ret), {caretTo: 'start'});
- }
- });
-
- }
- return;
+var handleKeyEvent = function(e, s) {
+ keyEventHandlers.some(function(handler) {
+ if(handler.applies(e, s)) {
+ handler.run(e, s);
+ return true;
}
+ });
+};
+// todo: whileRemoveWholetext
+var keyEventHandlers = [
+ { // ctrl+x - prevented (?)
+ applies: function(e, s) {
+ return e.ctrlKey &&
+ e.key === KEYS.X &&
+ s.type === 'textSelection' &&
+ s.startsAtBeginning() &&
+ s.endsAtEnd();
+ },
+ run: function(e,s) {
+ void(s);
+ e.preventDefault();
+ }
+ },
+ {
+ applies: function(e, s) {
+ return e.key === KEYS.ARROW_UP && s.type === 'caret';
+ },
+ run: function(e, s) {
+ /* globals window */
+ var caretRect = window.getSelection().getRangeAt(0).getClientRects()[0],
+ frameRects = s.element.dom[0].getClientRects(),
+ caretTop = caretRect.bottom - caretRect.height,
+ position, target,rect, scrolled;
- if(!cursor.isSelecting()) {
- if(event.ctrlKey) {
- if(element instanceof documentElement.DocumentTextElement) {
- element = element.parent();
- }
-
- canvas.wlxmlDocument.transaction(function() {
- var added = element.wlxmlNode.after(
- {tagName: element.wlxmlNode.getTagName() || 'div', attrs: {'class': element.wlxmlNode.getClass() || 'p'}}
- );
- added.append({text: ''});
- return added;
- }, {
- metadata: {
- description: gettext('Splitting text')
- },
- success: function(ret) {
- canvas.setCurrentElement(utils.getElementForNode(ret), {caretTo: 'start'});
- }
- });
-
- } else {
-
- if(!(element.parent().parent())) {
- return false; // top level element is unsplittable
- }
-
- var node = position.element.wlxmlNode,
- result, goto, gotoOptions;
-
- node.document.transaction(function() {
- result = position.element.wlxmlNode.breakContent({offset: position.offset});
- }, {
- metadata: {
- description: gettext('Splitting text')
+
+ if((frameRects[0].bottom === caretRect.bottom) || (caretRect.left < frameRects[0].left)) {
+ e.preventDefault();
+ s.canvas.rootWrapper.find('[document-text-element]').each(function() {
+ var test = getLastRectAbove(this, caretTop);
+ if(test) {
+ target = this;
+ rect = test;
+ } else {
+ return false;
}
});
-
- if(result.emptyText) {
- goto = result.emptyText;
- gotoOptions = {};
- } else {
- goto = result.second;
- gotoOptions = {caretTo: 'start'};
+ if(target) {
+ scrolled = scroll('top', target);
+ position = utils.caretPositionFromPoint(caretRect.left, rect.bottom - 1 - scrolled);
+ s.canvas.setCurrentElement(s.canvas.getDocumentElement(position.textNode), {caretTo: position.offset});
}
-
- canvas.setCurrentElement(utils.getElementForNode(goto), gotoOptions);
}
- }
- }
-});
-
-handlers.push({keys: [KEYS.ARROW_UP],
- keydown: function(event, canvas) {
- /* globals window */
- var element = canvas.getCursor().getPosition().element,
- caretRect = window.getSelection().getRangeAt(0).getClientRects()[0],
- frameRects = element.dom[0].getClientRects(),
- caretTop = caretRect.bottom - caretRect.height,
- position, target,rect, scrolled;
-
-
- if((frameRects[0].bottom === caretRect.bottom) || (caretRect.left < frameRects[0].left)) {
- event.preventDefault();
- canvas.rootWrapper.find('[document-text-element]').each(function() {
- var test = getLastRectAbove(this, caretTop);
- if(test) {
- target = this;
- rect = test;
- } else {
- return false;
- }
- });
if(target) {
scrolled = scroll('top', target);
- position = utils.caretPositionFromPoint(caretRect.left, rect.bottom - 1 - scrolled);
- canvas.setCurrentElement(canvas.getDocumentElement(position.textNode), {caretTo: position.offset});
+ var left = caretRect.left;
+ if(left > rect.left + rect.width) {
+ left = rect.left + rect.width;
+ } else if(left < rect.left ) {
+ left = rect.left;
+ }
+ position = utils.caretPositionFromPoint(left, rect.bottom - 1 - scrolled);
+ s.canvas.setCurrentElement(s.canvas.getDocumentElement(position.textNode), {caretTo: position.offset});
}
}
- }
-});
-
-handlers.push({keys: [KEYS.ARROW_DOWN],
- keydown: function(event, canvas) {
- /* globals window */
- var element = canvas.getCursor().getPosition().element,
- caretRect = window.getSelection().getRangeAt(0).getClientRects()[0],
- frameRects = element.dom[0].getClientRects(),
- lastRect = frameRects[frameRects.length-1],
- position, target,rect, scrolled;
-
- if(lastRect.bottom === caretRect.bottom || (caretRect.left > lastRect.left + lastRect.width)) {
- event.preventDefault();
- canvas.rootWrapper.find('[document-text-element]').each(function() {
- var test = getFirstRectBelow(this, caretRect.bottom);
- if(test) {
- target = this;
- rect = test;
- return false;
+ },
+ {
+ applies: function(e, s) {
+ return e.key === KEYS.ARROW_DOWN && s.type === 'caret';
+ },
+ run: function(e, s) {
+ /* globals window */
+ var caretRect = window.getSelection().getRangeAt(0).getClientRects()[0],
+ frameRects = s.element.dom[0].getClientRects(),
+ lastRect = frameRects[frameRects.length-1],
+ position, target,rect, scrolled;
+
+ if(lastRect.bottom === caretRect.bottom || (caretRect.left > lastRect.left + lastRect.width)) {
+ e.preventDefault();
+ s.canvas.rootWrapper.find('[document-text-element]').each(function() {
+ var test = getFirstRectBelow(this, caretRect.bottom);
+ if(test) {
+ target = this;
+ rect = test;
+ return false;
+ }
+ });
+ if(target) {
+ scrolled = scroll('bottom', target);
+ position = utils.caretPositionFromPoint(caretRect.left, rect.top +1 - scrolled);
+ s.canvas.setCurrentElement(s.canvas.getDocumentElement(position.textNode), {caretTo: position.offset});
}
- });
+ }
if(target) {
scrolled = scroll('bottom', target);
- position = utils.caretPositionFromPoint(caretRect.left, rect.top +1 - scrolled);
- canvas.setCurrentElement(canvas.getDocumentElement(position.textNode), {caretTo: position.offset});
- }
- }
- }
-});
-
-handlers.push({keys: [KEYS.ARROW_LEFT],
- keydown: function(event, canvas) {
- /* globals window */
- var position = canvas.getCursor().getPosition(),
- element = position.element,
- prev;
-
- if(position.offset === 0) {
- event.preventDefault();
- prev = canvas.getPreviousTextElement(element);
- if(prev) {
- scroll('top', prev.dom[0]);
- canvas.setCurrentElement(canvas.getDocumentElement(prev.dom.contents()[0]), {caretTo: 'end'});
+ var left = caretRect.left;
+ if(left > rect.left + rect.width) {
+ left = rect.left + rect.width;
+ } else if(left < rect.left ) {
+ left = rect.left;
+ }
+ position = utils.caretPositionFromPoint(left, rect.top +1 - scrolled);
+ s.canvas.setCurrentElement(s.canvas.getDocumentElement(position.textNode), {caretTo: position.offset});
}
}
- }
-});
-
-handlers.push({keys: [KEYS.ARROW_RIGHT],
- keydown: function(event, canvas) {
- /* globals window */
- var position = canvas.getCursor().getPosition(),
- element = position.element,
- next;
- if(position.offsetAtEnd) {
- event.preventDefault();
- next = canvas.getNextTextElement(element);
- if(next) {
- scroll('bottom', next.dom[0]);
- canvas.setCurrentElement(canvas.getDocumentElement(next.dom.contents()[0]), {caretTo: 0});
- }
- } else {
- var secondToLast = (position.offset === element.wlxmlNode.getText().length -1);
- if(secondToLast) {
- // Only Flying Spaghetti Monster knows why this is need for FF (for versions at least 26 to 31)
- event.preventDefault();
- canvas.setCurrentElement(element, {caretTo: 'end'});
+ },
+ {
+ applies: function(e, s) {
+ return e.key === KEYS.ARROW_LEFT && s.type === 'caret';
+ },
+ run: function(e, s) {
+ /* globals window */
+ var prev;
+
+ if(s.offset === 0) {
+ e.preventDefault();
+ prev = s.canvas.getPreviousTextElement(s.element);
+ if(prev) {
+ scroll('top', prev.dom[0]);
+ s.canvas.setCurrentElement(s.canvas.getDocumentElement(prev.dom.contents()[0]), {caretTo: 'end'});
+ }
}
}
-
- }
-});
-
-var selectsWholeTextElement = function(cursor) {
- if(cursor.isSelecting() && cursor.getSelectionStart().offsetAtBeginning && cursor.getSelectionEnd().offsetAtEnd) {
- return true;
- }
- return false;
-};
-
-handlers.push({key: KEYS.X,
- keydown: function(event, canvas) {
- if(event.ctrlKey && selectsWholeTextElement(canvas.getCursor())) {
- event.preventDefault();
- }
- }
-});
-
-handlers.push({keys: [KEYS.BACKSPACE, KEYS.DELETE],
- keydown: function(event, canvas) {
- var cursor = canvas.getCursor(),
- position = canvas.getCursor().getPosition(),
- element = position.element,
- node = element ? element.wlxmlNode : null,
- direction = 'above',
- caretTo = 'end',
- goto;
-
- if(!element || !node) {
- return;
- }
-
- if(event.which === KEYS.DELETE) {
- direction = 'below';
- caretTo = 'start';
- }
-
- if(cursor.isSelecting()) {
- event.preventDefault();
- var start = cursor.getSelectionStart(),
- end = cursor.getSelectionEnd();
-
- if(direction === 'above') {
- if(start.offsetAtBeginning) {
- goto = canvas.getNearestTextElement('above', start.element);
- caretTo = 'end';
- } else {
- goto = start.element;
- caretTo = start.offset;
+ },
+ {
+ applies: function(e, s) {
+ return e.key === KEYS.ARROW_RIGHT && s.type === 'caret';
+ },
+ run: function(e, s) {
+ /* globals window */
+ var next;
+ if(s.isAtEnd()) {
+ e.preventDefault();
+ next = s.canvas.getNextTextElement(s.element);
+ if(next) {
+ scroll('bottom', next.dom[0]);
+ s.canvas.setCurrentElement(s.canvas.getDocumentElement(next.dom.contents()[0]), {caretTo: 0});
}
} else {
- if(end.offsetAtEnd) {
- goto = canvas.getNearestTextElement('below', start.element);
- caretTo = 'start';
- } else {
- goto = end.element;
- caretTo = 0;
- }
- }
-
- canvas.wlxmlDocument.deleteText({
- from: {
- node: start.element.wlxmlNode,
- offset: start.offset
- },
- to: {
- node: end.element.wlxmlNode,
- offset: end.offset
+ var secondToLast = (s.offset === s.element.wlxmlNode.getText().length -1);
+ if(secondToLast) {
+ // Only Flying Spaghetti Monster knows why this is need for FF (for versions at least 26 to 31)
+ e.preventDefault();
+ s.canvas.setCurrentElement(s.element, {caretTo: 'end'});
}
- });
- if(goto) {
- canvas.setCurrentElement(goto, {caretTo: caretTo});
}
- return;
}
-
- var cursorAtOperationEdge = position.offsetAtBeginning;
- if(event.which === KEYS.DELETE) {
- cursorAtOperationEdge = position.offsetAtEnd;
- }
-
- var willDeleteWholeText = function() {
- return element.getText().length === 1 || selectsWholeTextElement(cursor);
- };
-
- canvas.wlxmlDocument.transaction(function() {
- if(willDeleteWholeText()) {
- event.preventDefault();
- node.setText('');
- }
- else if(cursorAtOperationEdge) {
- if(direction === 'below') {
- element = canvas.getNearestTextElement(direction, element);
- }
- if(element && element.wlxmlNode.getIndex() === 0) {
- goto = element.wlxmlNode.parent().moveUp();
- if(goto) {
- canvas.setCurrentElement(goto.node, {caretTo: goto.offset});
- }
- }
- event.preventDefault();
- }
- }, {
- metadata: {
- description: gettext('Remove text')
- }
- });
- }
-});
-
-var handleKeyEvent = function(e, s) {
- keyEventHandlers.some(function(handler) {
- if(handler.applies(e, s)) {
- handler.run(e, s);
- return true;
+ },
+ { // backspace removing the last character in a span
+ applies: function(e, s) {
+ return s.type === 'caret' &&
+ s.element.wlxmlNode.parent().is({tagName: 'span'}) &&
+ s.element.wlxmlNode.getText().length === 1 &&
+ s.offset === 1 &&
+ (e.key === KEYS.BACKSPACE);
+ },
+ run: function(e, s) {
+ var params = {},
+ prevTextNode = s.element.canvas.getPreviousTextElement(s.element).wlxmlNode;
+ e.preventDefault();
+ s.element.wlxmlNode.parent().detach(params);
+ s.canvas.setCurrentElement(
+ (params.ret && params.ret.mergedTo) || prevTextNode,
+ {caretTo: params.ret ? params.ret.previousLen : (prevTextNode ? prevTextNode.getText().length : 0)});
}
- });
-};
-// todo: whileRemoveWholetext
-var keyEventHandlers = [
- {
+ },
+ { // backspace/delete through an edge (behaves weirdly at spans)
applies: function(e, s) {
return s.type === 'caret' && (
(s.isAtBeginning() && e.key === KEYS.BACKSPACE) ||
);
},
run: function(e,s) {
- var direction, caretTo, cursorAtOperationEdge, goto, element;
+ var goto, element;
if(e.key === KEYS.BACKSPACE) {
- direction = 'above';
- caretTo = 'end';
- cursorAtOperationEdge = s.isAtBeginning();
element = s.element;
}
else {
- direction = 'below';
- caretTo = 'start';
- cursorAtOperationEdge = s.isAtEnd();
- element = cursorAtOperationEdge && s.canvas.getNearestTextElement(direction, s.element);
+ element = s.canvas.getNearestTextElement('below', s.element);
}
- if(!cursorAtOperationEdge || !element) {
+ e.preventDefault();
+
+ if(!element) {
return;
}
- e.preventDefault();
+ var parent = element.wlxmlNode.parent();
+ if(element.wlxmlNode.getIndex() === 0 && parent.isContextRoot() && (!parent.is('item') || parent.getIndex() === 0)) {
+ // Don't even try to do anything at the edge of a context root, except for non-first items
+ // - this is a temporary solution until key events handling get refactored into something more sane.
+ return;
+ }
s.canvas.wlxmlDocument.transaction(function() {
if(element.wlxmlNode.getIndex() === 0) {
goto = element.wlxmlNode.parent().moveUp();
- if(goto) {
- s.canvas.setCurrentElement(goto.node, {caretTo: goto.offset});
- }
+ } else {
+ goto = element.wlxmlNode.moveUp();
+ }
+ if(goto) {
+ s.canvas.setCurrentElement(goto.node, {caretTo: goto.offset});
}
}, {
metadata: {
}
},
- {
+ { // backspace/delete last character in a node - why is it needed?
applies: function(e,s) {
return s.type === 'caret' && s.element.getText().length === 1 && (e.key === KEYS.BACKSPACE || e.key === KEYS.DELETE);
},
run: function(e,s) {
e.preventDefault();
- e.element.wlxmlNode.setText('');
+ s.element.wlxmlNode.setText('');
s.canvas.setCurrentElement(s.element, {caretTo: 0});
}
},
}
},
- {
+ { // enter on an empty list item - creates paragraph after list
+ applies: function(e, s) {
+ var parent = s.element && s.element.wlxmlNode.parent(),
+ parentIsItem = parent && parent.is('item'),
+ itemIsOnList = parent && parent.parent() && parent.parent().is('list'),
+ onlyChild = parent.contents().length === 1;
+ return s.type === 'caret' && e.key === KEYS.ENTER && s.element.isEmpty() && onlyChild &&
+ parentIsItem && itemIsOnList;
+ },
+ run: function(e, s) {
+ var item = s.element.wlxmlNode.parent(),
+ list = item.parent();
+ e.preventDefault();
+ s.canvas.wlxmlDocument.transaction(function() {
+ var p = list.after({tagName: 'div', attrs: {'class': 'p'}});
+ p.append({text: ''});
+ item.detach();
+ if(list.contents().length === 0) {
+ list.detach();
+ }
+ return p;
+ }, {
+ success: function(p) {
+ s.canvas.setCurrentElement(p);
+ }
+ });
+ }
+ },
+ { // enter - split node
applies: function(e, s) {
return s.type === 'caret' && e.key === KEYS.ENTER && !s.element.parent().isRootElement();
},
run: function(e, s) {
- var result, goto, gotoOptions;
+ var parent = s.element.parent(),
+ children = parent.children(),
+ result, goto, gotoOptions;
void(e);
e.preventDefault();
+
+ if(children.length === 1 && s.element.isEmpty()) {
+ return;
+ }
+
s.canvas.wlxmlDocument.transaction(function() {
result = s.element.wlxmlNode.breakContent({offset: s.offset});
}, {
s.canvas.setCurrentElement(utils.getElementForNode(goto), gotoOptions);
}
+ },
+ { // enter - new paragraph after image/video
+ applies: function (e, s) {
+ return s.type === 'nodeSelection' && e.key === KEYS.ENTER && !s.element.isRootElement();
+ },
+ run: function (e, s) {
+ var parent = s.element.parent(),
+ children = parent.children(),
+ result, goto, gotoOptions;
+ e.preventDefault();
+
+ s.canvas.wlxmlDocument.transaction(function() {
+ result = s.element.wlxmlNode.insertNewNode();
+ }, {
+ metadata: {
+ description: gettext('Inserting node'),
+ fragment: s.toDocumentFragment()
+ }
+ });
+
+ s.canvas.setCurrentElement(utils.getElementForNode(result), {caretTo: 'start'});
+ }
}
];
return {
- handleKey: handleKey,
handleKeyEvent: handleKeyEvent,
KEYS: KEYS
};
fnp / fnpeditor.git / blobdiff