diff --git a/README.mdown b/README.mdown index 9f44a439..4edada5f 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 77700c8d..1b166f6a 100644 --- a/index.php +++ b/index.php @@ -73,6 +73,7 @@
+
Line: 1, Column: 1
diff --git a/php-console.js b/php-console.js index 2bbcb5d6..dff1f1ae 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 b1d1c1bc..50d108c7 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 {