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'])) {
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 {