Added a status bar with char/line display

mralexgray · Aug 31, 2010 · 59d1c9f · 59d1c9f
1 parent f54dc12
commit 59d1c9f
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 12 deletions.
diff --git 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
@@ -73,6 +73,7 @@
         <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
@@ -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
@@ -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 {