Переход курсора на следующий и предыдущий блоки при нажатии на кнопки вверх/вниз

codex-editor.js

@@ -21,7 +21,7 @@ var cEditor = (function (cEditor) {
  wrapper : null,
  toolbar : null,
  toolbarButtons : {}, // { type : DomEl, ... }
- redactor : null
+ redactor : null,
  }
 
  // Current editor state
@@ -211,24 +211,43 @@ cEditor.ui = {
 
  /** Mouse click to radactor */
  cEditor.nodes.redactor.addEventListener('click', function (event) {
+
  cEditor.callback.redactorClicked(event);
 
- cEditor.content.saveCaretPosition();
- // console.log(cEditor.content.caretOffset, cEditor.content.focusedNodeIndex);
+ cEditor.caret.save();
 
  }, false );
 
- /** Any redactor changes: keyboard input, mouse cut/paste, drag-n-drop text */
+ /**
+ * @deprecated;
+ * Any redactor changes: keyboard input, mouse cut/paste, drag-n-drop text
+ */
  cEditor.nodes.redactor.addEventListener('input', function (event) {
+
+ /** Saving caret in every modifications */
+ cEditor.caret.save();
+
  cEditor.callback.redactorInputEvent(event);
+
  }, false );
 
  /** Bind click listeners on toolbar buttons */
  for (button in cEditor.nodes.toolbarButtons){
  cEditor.nodes.toolbarButtons[button].addEventListener('click', function (event) {
  cEditor.callback.toolbarButtonClicked(event, this);
  }, false);
- }
+ };
+
+ },
+
+ addBlockHandlers : function(block) {
+
+ block.addEventListener('keydown', function(event) {
+
+ cEditor.caret.save();
+ cEditor.callback.blockTransition(event, block);
+
+ }, false);
 
  }
 
@@ -242,9 +261,9 @@ cEditor.callback = {
  globalKeydown : function(event){
 
  switch (event.keyCode){
- case cEditor.core.keys.TAB : this.tabKeyPressed(event); break;
- case cEditor.core.keys.ENTER : this.enterKeyPressed(event); break;
- case cEditor.core.keys.ESC : this.escapeKeyPressed(event); break;
+ case cEditor.core.keys.TAB : this.tabKeyPressed(event);  break;
+ case cEditor.core.keys.ENTER : this.enterKeyPressed(event);  break;
+ case cEditor.core.keys.ESC : this.escapeKeyPressed(event);  break;
  }
 
  },
@@ -253,6 +272,8 @@ cEditor.callback = {
 
  switch (event.keyCode){
  case cEditor.core.keys.UP :
+ case cEditor.core.keys.LEFT :
+ case cEditor.core.keys.RIGHT :
  case cEditor.core.keys.DOWN : this.arrowKeyPressed(event); break;
  }
 
@@ -298,6 +319,7 @@ cEditor.callback = {
 
  cEditor.content.workingNodeChanged();
 
+ /* Closing toolbar */
  cEditor.toolbar.close();
  cEditor.toolbar.move();
 
@@ -344,7 +366,26 @@ cEditor.callback = {
 
  }, 500);
 
- }
+ },
+
+ blockTransition : function(event, block) {
+
+ if (event.keyCode == cEditor.core.keys.DOWN || event.keyCode == cEditor.core.keys.RIGHT ) {
+
+ if ( block.nextSibling == null )
+ return ;
+
+ cEditor.caret.setToNextBlock( block );
+ }
+
+ else if (event.keyCode == cEditor.core.keys.UP || event.keyCode == cEditor.core.keys.LEFT ) {
+
+ if ( block.previousSibling == null )
+ return ;
+
+ cEditor.caret.setToPreviousBlock( block );
+ }
+ },
 
 };
 
@@ -353,16 +394,6 @@ cEditor.content = {
 
  currentNode : null,
 
- /**
- * @var {int} caretOffset - caret position in a text node.
- */
- caretOffset : null,
-
- /**
- * @var {int} focusedNodeIndex - we get index of child node from first-level block
- */
- focusedNodeIndex: null,
-
  /**
  * Synchronizes redactor with original textarea
  */
@@ -382,54 +413,6 @@ cEditor.content = {
 
  },
 
- /**
- * We need to save caret before we change the block,
- * so that we could return it to original position in a new tag.
- * We save caret offset in a text and index of child node.
- */
- saveCaretPosition () {
-
- var selection = window.getSelection();
- var previousElement = selection.anchorNode.previousSibling,
- nodeIndex = 0;
-
- while (previousElement != null) {
-
- nodeIndex ++;
- previousElement = previousElement.previousSibling;
-
- }
-
- this.caretOffset = selection.anchorOffset;
- this.focusedNodeIndex = nodeIndex;
-
- },
-
- /**
- * Creates Documnt Range and sets caret to the NodeElement.
- * @param {Element} NodeElement - Changed Node.
- */
-
- setCaret : function(NodeElement) {
-
- var nodeIndex = this.focusedNodeIndex || 0,
- caretOffset = this.caretOffset || 0;
-
- var childs = NodeElement.childNodes,
- nodeChild = childs[nodeIndex];
-
- console.log(caretOffset, nodeChild);
-
- var range = document.createRange(),
- selection = window.getSelection();
-
- range.setStart(nodeChild, caretOffset);
- range.setEnd(nodeChild, caretOffset);
-
- selection.removeAllRanges();
- selection.addRange(range);
- },
-
  getNodeFocused : function() {
 
  var selection = window.getSelection(),
@@ -506,7 +489,7 @@ cEditor.content = {
  /**
  * Setting caret
  */
- cEditor.content.setCaret(nodeCreated);
+ cEditor.caret.set(nodeCreated);
 
  return;
 
@@ -535,11 +518,153 @@ cEditor.content = {
  */
  cEditor.content.workingNodeChanged(nodeCreated);
 
- cEditor.content.setCaret(nodeCreated);
- }
+ cEditor.caret.set(nodeCreated);
+ },
 
 }
 
+cEditor.caret = {
+
+ /**
+ * @var {int} caretOffset - caret position in a text node.
+ */
+
+ Offset : null,
+
+ /**
+ * @var {int} focusedNodeIndex - we get index of child node from first-level block
+ */
+
+ focusedNodeIndex: null,
+
+ /**
+ * We need to save caret before we change the block,
+ * so that we could return it to original position in a new tag.
+ * We save caret offset in a text and index of child node.
+ */
+ save : function() {
+
+ var selection = window.getSelection();
+ var previousElement = selection.anchorNode.previousSibling,
+ nodeIndex = 0;
+
+ while (previousElement != null) {
+
+ nodeIndex ++;
+ previousElement = previousElement.previousSibling;
+
+ }
+
+ this.Offset = selection.anchorOffset;
+ this.focusedNodeIndex = nodeIndex;
+
+ },
+
+ /**
+ * Creates Documnt Range and sets caret to the NodeElement.
+ * @param {Element} NodeElement - Changed Node.
+ */
+ set : function(NodeElement) {
+
+ var nodeIndex = this.focusedNodeIndex || 0,
+ caretOffset = this.caretOffset || 0,
+ childs = NodeElement.childNodes,
+ nodeChild = childs[nodeIndex];
+
+ var range = document.createRange();
+
+ if ( NodeElement.childNodes.length == 0 ) {
+
+ nodeChild = NodeElement;
+ caretOffset = 0;
+
+ }
+
+ var range = document.createRange(),
+ selection = window.getSelection();
+
+ range.setStart(nodeChild, caretOffset);
+ range.setEnd(nodeChild, caretOffset);
+
+ selection.removeAllRanges();
+ selection.addRange(range);
+ },
+
+ setToNextBlock : function(block) {
+
+ var selection = window.getSelection(),
+ focusedElement = selection.anchorNode.parentNode;
+
+ /** Stop transition when caret is not at the end of Text node
+ * When we click "DOWN", caret moves to the end of node.
+ * We should check check caret position before we transmit/switch the block.
+ */
+
+ if ( cEditor.caret.Offset != selection.anchorNode.length
+ && typeof( selection.anchorNode.length ) != 'undefined') {
+ cEditor.caret.save();
+ return ;
+
+ }
+
+ /* Setting Caret to the first child of next node */
+ else if ( selection.focusNode.length == cEditor.caret.Offset ) {
+
+ /** Firstchild of block */
+ cEditor.caret.Offset = 0;
+ cEditor.caret.focusedNodeIndex = 0;
+
+ cEditor.caret.set(block.nextSibling);
+
+ } else {
+
+ /** Firstchild of block */
+ cEditor.caret.Offset = 0;
+ cEditor.caret.focusedNodeIndex = 0;
+ cEditor.caret.set(block.nextSibling);
+ }
+ },
+
+ setToPreviousBlock : function(block) {
+
+ var selection = window.getSelection(),
+ focusedElement = selection.anchorNode.parentNode;
+
+ /** Stop transition when caret is not at the beggining of Text node
+ * When we click "UP", caret moves to the end of node.
+ * We should check check caret position before we transmit/switch the block.
+ */
+
+ if ( cEditor.caret.Offset != 0
+ && typeof( selection.anchorNode.length ) != 'undefined') {
+
+ cEditor.caret.save();
+ return ;
+
+ }
+
+ /* Setting Caret to the first child of previous node */
+ else if ( selection.anchorOffset == 0
+ && cEditor.caret.focusedNodeIndex == 0
+ && typeof( block.previousSibling.childNodes.length ) != 'undefined') {
+
+ cEditor.caret.focusedNodeIndex = (block.previousSibling.childNodes.length == 0) ? 0 : block.previousSibling.childNodes.length - 1;
+ cEditor.caret.Offset = (block.previousSibling.childNodes.length == 0) ? 0 : block.previousSibling.childNodes[cEditor.caret.focusedNodeIndex].length;
+
+ cEditor.caret.set(block.previousSibling);
+
+ }
+ else {
+
+ cEditor.caret.Offset = 0;
+ cEditor.caret.focusedNodeIndex = 0;
+
+ cEditor.caret.set(block.previousSibling);
+
+ }
+ },
+};
+
 cEditor.toolbar = {
 
  /**
@@ -768,9 +893,13 @@ cEditor.parser = {
 
  /** Save block to the cEditor.state array */
  cEditor.state.blocks.push(block);
+
+ // return block;
+ cEditor.ui.addBlockHandlers(block);
  };
 
  })
+ // .then(cEditor.ui.addBlockHandlers(block))
 
  /** Log if something wrong with node */
  .catch(function(error) {