From 59d1c9f4890cd1c952d302780d02a41f62d53a30 Mon Sep 17 00:00:00 2001
From: Jordi Boggiano <j.boggiano@seld.be>
Date: Tue, 31 Aug 2010 21:42:33 +0200
Subject: [PATCH] Added a status bar with char/line display

---
 README.mdown   |  1 +
 index.php      |  1 +
 php-console.js | 19 +++++++++++++++++++
 styles.css     | 38 ++++++++++++++++++++++++++------------
 4 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/README.mdown b/README.mdown
index 9f44a43..4edada5 100644
--- a/README.mdown
+++ b/README.mdown
@@ -32,6 +32,7 @@ Changelog
 
 - 1.1.0
   - Script execution is now done via an async js request, preventing die() and exception to mess up the entire console
+  - Added a status bar with char/line display
   - Added a toggle button to expand/collapse all krumo sub-trees at once
 - 1.0.0
   - Initial Public Release
diff --git a/index.php b/index.php
index 77700c8..1b166f6 100644
--- a/index.php
+++ b/index.php
@@ -73,6 +73,7 @@ if (isset($_POST['code'])) {
         <div class="output"><?php echo $debugOutput ?></div>
         <form method="POST" action="">
             <textarea cols="100" rows="20" name="code"><?php echo (isset($_POST['code']) ? htmlentities($_POST['code'], ENT_QUOTES, 'UTF-8') : null) ?></textarea>
+            <div class="statusbar">Line: 1, Column: 1</div>
             <input type="submit" name="subm" value="Try this!" />
         </form>
         <div class="help">
diff --git a/php-console.js b/php-console.js
index 2bbcb5d..dff1f1a 100644
--- a/php-console.js
+++ b/php-console.js
@@ -12,6 +12,19 @@
  * Source on Github http://github.com/Seldaek/php-console
  */
 $(function() {
+
+    var updateStatusBar;
+
+    // updates the text of the status bar
+    updateStatusBar = function() {
+        var caret, part, matches;
+        caret = $('textarea[name="code"]').getCaret();
+        part = $('textarea[name="code"]').val().substring(0, caret);
+        matches = part.match(/(\r?\n)?([^\r\n]*)/g);
+        part = matches.length > 1 ? matches[matches.length - 2] : matches[0];
+        $('.statusbar').text('Line: ' + Math.max(1, matches.length-1) + ', Column: ' + (matches.length > 2 ? part.length : part.length + 1));
+    };
+
     $('textarea[name="code"]')
         .keydown(function(e) {
             var caret, part, matches;
@@ -46,9 +59,15 @@ $(function() {
                 }
                 break;
             }
+
+            updateStatusBar();
         })
+        .keyup(updateStatusBar)
+        .click(updateStatusBar)
         .focus();
 
+    updateStatusBar();
+
     $('input[name="subm"]').keyup(function(e) {
         // set the focus back to the textarea if pressing tab moved
         // the focus to the submit button (opera bug)
diff --git a/styles.css b/styles.css
index b1d1c1b..50d108c 100644
--- a/styles.css
+++ b/styles.css
@@ -1,17 +1,11 @@
 body, textarea, input {
     font: 12px monospace;
 }
+
 body {
     background: #eee;
 }
 
-textarea {
-    width: 99%;
-    height: 400px;
-    margin: auto;
-    display: block;
-}
-
 input {
     width: 99%;
     margin: auto;
@@ -24,21 +18,41 @@ a {
     color: #88f;
 }
 
+.output, textarea {
+    border: 1px solid #aaa;
+    background: #fff;
+}
+
+textarea {
+    width: 99%;
+    height: 400px;
+    margin: auto;
+    display: block;
+    -moz-border-radius: 5px 5px 0 0;
+    -webkit-border-radius: 5px 5px 0 0;
+    border-radius: 5px 5px 0 0;
+}
+
 .output {
     padding: 5px 10px;
     margin: 10px .4%;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
 }
 
 .output img.loader {
     margin-bottom: -4px;
 }
 
-.output, textarea {
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-    border-radius: 5px;
+.statusbar {
+    margin: 0 .5% 10px;
+    padding: 2px 5px;
+    -moz-border-radius: 0 0 5px 5px;
+    -webkit-border-radius: 0 0 5px 5px;
+    border-radius: 0 0 5px 5px;
     border: 1px solid #aaa;
-    background: #fff;
+    border-top: 0;
 }
 
 .help {