(1) add status bar to text mode

(2)add caret position to text mode status bar

src/js/textmode.js

@@ -98,7 +98,7 @@ textmode.create = function (container, options) {
   this.frame.onkeydown = function (event) {
     me._onKeyDown(event);
   };
-
+  
   // create menu
   this.menu = document.createElement('div');
   this.menu.className = 'jsoneditor-menu';
@@ -247,55 +247,53 @@ textmode.create = function (container, options) {
   }
 
   if (options.statusBar) {
-      if (this.mode === 'code') {
+    util.addClassName(this.content, 'has-status-bar');
-        util.addClassName(this.content, 'has-status-bar');
 
-        this.curserInfoElements = {};
+    this.curserInfoElements = {};
-        var statusBar = document.createElement('div');
+    var statusBar = document.createElement('div');
-        statusBar.className = 'jsoneditor-statusbar';
+    statusBar.className = 'jsoneditor-statusbar';
-        this.frame.appendChild(statusBar);
+    this.frame.appendChild(statusBar);
 
-        var lnLabel = document.createElement('span');
+    var lnLabel = document.createElement('span');
-        lnLabel.className = 'jsoneditor-curserinfo-label';
+    lnLabel.className = 'jsoneditor-curserinfo-label';
-        lnLabel.innerText = 'Ln:';
+    lnLabel.innerText = 'Ln:';
-  
-        var lnVal = document.createElement('span');
-        lnVal.className = 'jsoneditor-curserinfo-val';
-        lnVal.innerText = 0;
-  
-        statusBar.appendChild(lnLabel);
-        statusBar.appendChild(lnVal);
-  
-        var colLabel = document.createElement('span');
-        colLabel.className = 'jsoneditor-curserinfo-label';
-        colLabel.innerText = 'Col:';
-  
-        var colVal = document.createElement('span');
-        colVal.className = 'jsoneditor-curserinfo-val';
-        colVal.innerText = 0;
-  
-        statusBar.appendChild(colLabel);
-        statusBar.appendChild(colVal);
-  
-        this.curserInfoElements.colVal = colVal;
-        this.curserInfoElements.lnVal = lnVal;
 
-        var countLabel = document.createElement('span');
+    var lnVal = document.createElement('span');
-        countLabel.className = 'jsoneditor-curserinfo-label';
+    lnVal.className = 'jsoneditor-curserinfo-val';
-        countLabel.innerText = 'characters selected';
+    lnVal.innerText = 0;
-        countLabel.style.display = 'none';
 
-        var countVal = document.createElement('span');
+    statusBar.appendChild(lnLabel);
-        countVal.className = 'jsoneditor-curserinfo-count';
+    statusBar.appendChild(lnVal);
-        countVal.innerText = 0;
-        countVal.style.display = 'none';
 
-        this.curserInfoElements.countLabel = countLabel;
+    var colLabel = document.createElement('span');
-        this.curserInfoElements.countVal = countVal;
+    colLabel.className = 'jsoneditor-curserinfo-label';
+    colLabel.innerText = 'Col:';
 
-        statusBar.appendChild(countVal);
+    var colVal = document.createElement('span');
-        statusBar.appendChild(countLabel);
+    colVal.className = 'jsoneditor-curserinfo-val';
-      }
+    colVal.innerText = 0;
+
+    statusBar.appendChild(colLabel);
+    statusBar.appendChild(colVal);
+
+    this.curserInfoElements.colVal = colVal;
+    this.curserInfoElements.lnVal = lnVal;
+
+    var countLabel = document.createElement('span');
+    countLabel.className = 'jsoneditor-curserinfo-label';
+    countLabel.innerText = 'characters selected';
+    countLabel.style.display = 'none';
+
+    var countVal = document.createElement('span');
+    countVal.className = 'jsoneditor-curserinfo-count';
+    countVal.innerText = 0;
+    countVal.style.display = 'none';
+
+    this.curserInfoElements.countLabel = countLabel;
+    this.curserInfoElements.countVal = countVal;
+
+    statusBar.appendChild(countVal);
+    statusBar.appendChild(countLabel);
   }
 
   this.setSchema(this.options.schema, this.options.schemaRefs);  
@@ -329,19 +327,7 @@ textmode._onChange = function () {
  */
 textmode._onSelect = function () {
   if(this.options.statusBar) {
-    if (this.textarea) {
+    this._setCursorInfoDisplay();
-      var selectionRange = util.getInputSelection(this.textarea);
-      if (selectionRange.start !== selectionRange.end) {
-        this._setSelectionCountDisplay(Math.abs(selectionRange.end - selectionRange.start));
-      }
-    } else if (this.aceEditor && this.curserInfoElements) {
-      var curserPos = this.aceEditor.getCursorPosition();
-      var selectedText = this.aceEditor.getSelectedText();
-
-      this.curserInfoElements.lnVal.innerText = curserPos.row + 1;
-      this.curserInfoElements.colVal.innerText = curserPos.column + 1;
-      this._setSelectionCountDisplay(selectedText.length);
-    }
   }
 };
 
@@ -371,7 +357,7 @@ textmode._onKeyDown = function (event) {
     event.stopPropagation();
   }
 
-  this._setSelectionCountDisplay();
+  this._setCursorInfoDisplay();
 };
 
 /**
@@ -380,7 +366,7 @@ textmode._onKeyDown = function (event) {
  * @private
  */
 textmode._onMouseDown = function (event) {
-  this._setSelectionCountDisplay();
+  this._setCursorInfoDisplay();
 };
 
 /**
@@ -389,18 +375,46 @@ textmode._onMouseDown = function (event) {
  * @private
  */
 textmode._onBlur = function (event) {
-  this._setSelectionCountDisplay();
+  this._setCursorInfoDisplay();
 };
 
-textmode._setSelectionCountDisplay = function (value) {
+/**
-  if (this.options.statusBar && this.curserInfoElements) {
+ * Update the status bar cursor info
-    if (value && this.curserInfoElements && this.curserInfoElements.countVal) {
+ */
-      this.curserInfoElements.countVal.innerText = value;
+textmode._setCursorInfoDisplay = function () {
-      this.curserInfoElements.countVal.style.display = 'inline';
+  if(this.options.statusBar) {
-      this.curserInfoElements.countLabel.style.display = 'inline';
+    var me = this;
-    } else {
+    var line, col, count;
-      this.curserInfoElements.countVal.style.display = 'none';
+    if (this.textarea) {
-      this.curserInfoElements.countLabel.style.display = 'none';
+      setTimeout(function() { //this to varify we get the most updated textarea cursor selection
+        var selectionRange = util.getInputSelection(me.textarea);      
+        line = selectionRange.row;
+        col = selectionRange.col;
+        if (selectionRange.start !== selectionRange.end) {
+          count = selectionRange.end - selectionRange.start;
+        }
+        updateDisplay.apply(me);
+      },0);
+      
+    } else if (this.aceEditor && this.curserInfoElements) {
+      var curserPos = this.aceEditor.getCursorPosition();
+      var selectedText = this.aceEditor.getSelectedText();
+
+      line = curserPos.row + 1;
+      col = curserPos.column + 1;
+      count = selectedText.length;
+      updateDisplay.apply(me);
+    }
+
+    function updateDisplay() {
+
+      if (this.curserInfoElements.countVal.innerText !== count) {
+        this.curserInfoElements.countVal.innerText = count;
+        this.curserInfoElements.countVal.style.display = count ? 'inline' : 'none';
+        this.curserInfoElements.countLabel.style.display = count ? 'inline' : 'none';
+      } 
+      this.curserInfoElements.lnVal.innerText = line;
+      this.curserInfoElements.colVal.innerText = col;
     }
   }
 };

src/js/util.js

@@ -863,9 +863,15 @@ exports.getInputSelection = function(el) {
       }
   }
 
+  var textTillCaret = el.value.substring(0,end);
+  var row = (textTillCaret.match(/\n/g) || []).length + 1;
+  var col = textTillCaret.length - textTillCaret.lastIndexOf("\n");
+
   return {
       start: start,
-      end: end
+      end: end,
+      col: col,
+      row: row
   };
 }