define([
-'modules/documentCanvas/canvas/documentElement',
+'libs/jquery',
'modules/documentCanvas/canvas/utils'
-], function(documentElement, utils) {
+], function($, utils) {
'use strict';
-
+/* globals gettext */
var KEYS = {
ENTER: 13,
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;
+var scroll = function(place, textElement) {
+ var rect = textElement.getBoundingClientRect(),
+ scroll = $('#rng-module-documentCanvas-contentWrapper'),
+ border = rect.bottom - (place === 'top' ? rect.height : 0) - scroll.offset().top + scroll[0].scrollTop,
+ visible = scroll[0].scrollTop + {top: 0, bottom: scroll.height()}[place],
+ padding = 16,
+ toScroll = 0;
+
+ if(place === 'top' && (border - padding < visible)) {
+ toScroll = border - visible - padding;
+ } else if(place === 'bottom' && (border + padding > visible)) {
+ toScroll = border - visible + padding;
}
- if(handler.keys && handler.keys.indexOf(event.which) !== -1) {
- return true;
+ if(toScroll) {
+ scroll[0].scrollTop = scroll[0].scrollTop + toScroll;
}
- return false;
+ return toScroll;
};
-var handlers = [];
+var getLastRectAbove = function(node, y) {
+ var rects = node.getClientRects(),
+ idx = 0,
+ rect, toret;
+ while((rect = rects[idx])) {
+ if(rect.bottom < y) {
+ toret = rect;
+ } else {
+ break;
+ }
+ idx++;
+ }
+ return toret;
+};
+var getFirstRectBelow = function(node, y) {
+ var rects = node.getClientRects(),
+ idx = 0,
+ rect, toret;
+ while((rect = rects[idx])) {
+ if(rect.top > y) {
+ toret = rect;
+ break;
+ }
+ idx++;
+ }
+ return toret;
+};
-handlers.push({key: KEYS.ENTER,
- keydown: function(event, canvas) {
- event.preventDefault();
- var cursor = canvas.getCursor(),
- position = cursor.getPosition(),
- element = position.element,
- added;
+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(Object.keys(cursor.getPosition()).length === 0) {
- var currentElement = canvas.getCurrentNodeElement();
- if(currentElement) {
- canvas.wlxmlDocument.startTransaction();
- added = currentElement.wlxmlNode.after({
- tagName: currentElement.getWlxmlTag() || 'div',
- attrs: {'class': currentElement.getWlxmlClass() || 'p'}
+
+ 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;
+ }
});
- added.append({text:''});
- canvas.wlxmlDocument.endTransaction();
- canvas.setCurrentElement(utils.findCanvasElement(added), {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});
+ }
+ }
+ if(target) {
+ scrolled = scroll('top', target);
+ 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});
}
- return;
}
+ },
+ {
+ 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(!cursor.isSelecting()) {
- if(event.ctrlKey) {
- if(element instanceof documentElement.DocumentTextElement) {
- element = element.parent();
+ 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});
}
-
- canvas.wlxmlDocument.startTransaction();
- added = element.wlxmlNode.after(
- {tagName: element.getWlxmlTag() || 'div', attrs: {'class': element.getWlxmlClass() || 'p'}}
- );
- added.append({text: ''});
- canvas.wlxmlDocument.endTransaction();
- canvas.setCurrentElement(utils.findCanvasElement(added), {caretTo: 'start'});
-
- } else {
-
- if(!(element.parent().parent())) {
- return false; // top level element is unsplittable
+ }
+ if(target) {
+ scrolled = scroll('bottom', target);
+ 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});
+ }
+ }
+ },
+ {
+ applies: function(e, s) {
+ return e.key === KEYS.ARROW_LEFT && s.type === 'caret';
+ },
+ run: function(e, s) {
+ /* globals window */
+ var prev;
- //var nodes = position.element.data('wlxmlNode').split({offset: position.offset}),
- // var nodes = position.element.data('wlxmlNode').transform('split', {offset: position.offset}),
- // newEmpty,
- // goto,
- // gotoOptions;
-
- // if(position.offsetAtBeginning)
- // newEmpty = nodes.first;
- // else if(position.offsetAtEnd)
- // newEmpty = nodes.second;
-
- // if(newEmpty) {
- // //goto = newEmpty.append({text: ''});
- // gotoOptions = {};
- // } else {
- // goto = nodes.second;
- // gotoOptions = {caretTo: 'start'};
- // }
-
- var result = position.element.wlxmlNode.breakContent({offset: position.offset}),
- goto, gotoOptions;
- if(result.emptyText) {
- goto = result.emptyText;
- gotoOptions = {};
- } else {
- goto = result.second;
- gotoOptions = {caretTo: 'start'};
+ 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'});
}
-
- canvas.setCurrentElement(utils.findCanvasElement(goto), gotoOptions);
}
}
- }
-});
+ },
+ {
+ 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 {
+ 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'});
+ }
+ }
+ }
+ },
+ { // 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)});
+ }
+ },
+ { // backspace/delete through an edge (behaves weirdly at spans)
+ applies: function(e, s) {
+ return s.type === 'caret' && (
+ (s.isAtBeginning() && e.key === KEYS.BACKSPACE) ||
+ (s.isAtEnd() && e.key === KEYS.DELETE)
+ );
+ },
+ run: function(e,s) {
+ var direction, caretTo, cursorAtOperationEdge, goto, element;
-handlers.push({keys: [KEYS.ARROW_UP, KEYS.ARROW_DOWN, KEYS.ARROW_LEFT, KEYS.ARROW_RIGHT],
- keydown: function(event, canvas) {
- var position = canvas.getCursor().getPosition(),
- element = position.element;
- if(element && (element instanceof documentElement.DocumentTextElement) && element.isEmpty()) {
- var direction, caretTo;
- if(event.which === KEYS.ARROW_LEFT || event.which === KEYS.ARROW_UP) {
+ if(e.key === KEYS.BACKSPACE) {
direction = 'above';
caretTo = 'end';
- } else {
+ cursorAtOperationEdge = s.isAtBeginning(); // always true?
+ element = s.element;
+ }
+ else {
direction = 'below';
caretTo = 'start';
+ cursorAtOperationEdge = s.isAtEnd(); // always true?
+ element = cursorAtOperationEdge && s.canvas.getNearestTextElement(direction, s.element);
}
- var el = canvas.getDocumentElement(utils.nearestInDocumentOrder('[document-text-element]', direction, element.dom()[0]));
- if(el) {
- canvas.setCurrentElement(el, {caretTo: caretTo});
+
+ if(!cursorAtOperationEdge || !element) {
+ return;
}
- }
- },
- keyup: function(event, canvas) {
- var element = canvas.getCursor().getPosition().element,
- caretTo = false;
- if(!element) {
- // Chrome hack
- var moves = [{direction: 'above', caretTo: 'end'}, {direction: 'below', caretTo: 'start'}];
- if(event.which === KEYS.ARROW_RIGHT || event.which === KEYS.ARROW_DOWN) {
- moves.reverse();
+
+ 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;
}
- moves.some(function(move) {
- /* globals window */
- var targetNode = utils.nearestInDocumentOrder('[document-text-element]:visible', move.direction, window.getSelection().focusNode);
- if(targetNode) {
- element = canvas.getDocumentElement(targetNode);
- caretTo = move.caretTo;
- return true; // break
+
+ e.preventDefault();
+
+ s.canvas.wlxmlDocument.transaction(function() {
+ if(element.wlxmlNode.getIndex() === 0) {
+ goto = element.wlxmlNode.parent().moveUp();
+ } else {
+ goto = element.wlxmlNode.moveUp();
+ }
+ if(goto) {
+ s.canvas.setCurrentElement(goto.node, {caretTo: goto.offset});
+ }
+ }, {
+ metadata: {
+ description: gettext('Remove text')
}
});
}
- if(element) {
- canvas.setCurrentElement(element, {caretTo: caretTo});
- }
- }
-});
-
-
-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();
+ { // 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();
+ s.element.wlxmlNode.setText('');
+ s.canvas.setCurrentElement(s.element, {caretTo: 0});
}
- }
-});
+ },
-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;
+ {
+ applies: function(e, s) {
+ return s.type === 'textSelection' && (e.key === KEYS.BACKSPACE || e.key === KEYS.DELETE);
+ },
+ run: function(e, s) {
+ var direction = 'above',
+ caretTo = 'end',
+ goto;
- if(!element || !node) {
- return;
- }
-
- if(event.which === KEYS.DELETE) {
- direction = 'below';
- caretTo = 'start';
- }
+ if(e.key === KEYS.DELETE) {
+ direction = 'below';
+ caretTo = 'start';
+ }
- if(cursor.isSelecting() && !cursor.isSelectingWithinElement()) {
- event.preventDefault();
- var start = cursor.getSelectionStart(),
- end = cursor.getSelectionEnd();
+ e.preventDefault();
- if(direction === 'above') {
- if(start.offsetAtBeginning) {
- goto = start.element.getNearestTextElement('above');
+ if(s.startsAtBeginning && s.endsAtEnd && s.startElement.sameNode(s.endElement)) {
+ goto = s.startElement;
+ caretTo = s.startOffset;
+ } else if(direction === 'above') {
+ if(s.startsAtBeginning()) {
+ goto = s.canvas.getNearestTextElement('above', s.startElement);
caretTo = 'end';
} else {
- goto = start.element;
- caretTo = start.offset;
+ goto = s.startElement;
+ caretTo = s.startOffset;
}
} else {
- if(end.offsetAtEnd) {
- goto = start.element.getNearestTextElement('below');
+ if(s.endsAtEnd()) {
+ goto = s.canvas.getNearestTextElement('below', s.startElement);
caretTo = 'start';
} else {
- goto = end.element;
+ goto = s.endElement;
caretTo = 0;
}
}
- canvas.wlxmlDocument.deleteText({
- from: {
- node: start.element.wlxmlNode,
- offset: start.offset
- },
- to: {
- node: end.element.wlxmlNode,
- offset: end.offset
+ var doc = s.canvas.wlxmlDocument;
+ doc.transaction(function() {
+
+ doc.deleteText({
+ from: {
+ node: s.startElement.wlxmlNode,
+ offset: s.startOffset
+ },
+ to: {
+ node: s.endElement.wlxmlNode,
+ offset: s.endOffset
+ }
+ });
+
+ }, {
+ success: function() {
+ if(goto) {
+ s.canvas.setCurrentElement(goto, {caretTo: caretTo});
+ }
}
});
- if(goto) {
- canvas.setCurrentElement(goto, {caretTo: caretTo});
- }
- return;
+
}
-
- var cursorAtOperationEdge = position.offsetAtBeginning;
- if(event.which === KEYS.DELETE) {
- cursorAtOperationEdge = position.offsetAtEnd;
+ },
+ { // 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');
+ return s.type === 'caret' && e.key === KEYS.ENTER && s.element.isEmpty() && 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 parent = s.element.parent(),
+ children = parent.children(),
+ result, goto, gotoOptions;
+ void(e);
+ e.preventDefault();
- var willDeleteWholeText = function() {
- return element.getText().length === 1 || selectsWholeTextElement(cursor);
- };
-
- canvas.wlxmlDocument.transaction(function() {
- if(willDeleteWholeText()) {
- event.preventDefault();
- node.setText('');
+ if(children.length === 1 && s.element.isEmpty()) {
+ return;
}
- else if(element.isEmpty()) {
- event.preventDefault();
- var parent = element.parent(),
- grandParent = parent ? parent.parent() : null;
- if(!grandParent && parent.children().length === 1) {
- return;
- }
- if(parent.children().length === 1 && parent.children()[0].sameNode(element)) {
- if(grandParent && grandParent.children().length === 1) {
- goto = grandParent.wlxmlNode.append({text: ''});
- } else {
- goto = element.getNearestTextElement(direction);
- }
- parent.wlxmlNode.detach();
- } else {
- goto = element.getNearestTextElement(direction);
- element.wlxmlNode.detach();
+
+ s.canvas.wlxmlDocument.transaction(function() {
+ result = s.element.wlxmlNode.breakContent({offset: s.offset});
+ }, {
+ metadata: {
+ description: gettext('Splitting text'),
+ fragment: s.toDocumentFragment()
}
- canvas.setCurrentElement(goto, {caretTo: caretTo});
+ });
+
+ if(result.emptyText) {
+ goto = result.emptyText;
+ gotoOptions = {};
+ } else {
+ goto = result.second;
+ gotoOptions = {caretTo: 'start'};
}
- else if(cursorAtOperationEdge) {
- if(direction === 'below') {
- element = element.getNearestTextElement(direction);
- }
- if(element) {
- goto = element.wlxmlNode.mergeContentUp();
- canvas.setCurrentElement(goto.node, {caretTo: goto.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()
}
- event.preventDefault();
- }
- });
+ });
+
+ s.canvas.setCurrentElement(utils.getElementForNode(result), {caretTo: 'start'});
+ }
}
-});
+];
return {
- handleKey: handleKey
+ handleKeyEvent: handleKeyEvent,
+ KEYS: KEYS
};
});
\ No newline at end of file
fnp / fnpeditor.git / blobdiff