Char counter for notice update text area. http://laconi.ca/PITS/00094

Added a util.js and this uses JQuery.

darcs-hash:20080624174613-982e4-1a6f11365957e6f4ed70b87ce64fb9938441f01f.gz

diff --git a/js/util.js b/js/util.js
new file mode 100644 (file)
index 0000000..59a4891
--- /dev/null
+++ b/js/util.js
@@ -0,0 +1,21 @@
+$(document).ready(function(){
+        // count character on keyup
+        function counter(){ 
+            var maxLength     = 140; 
+            var currentLength = $("#status_textarea").val().length;
+            var remaining = 140 - currentLength;
+            $("#counter").text(remaining);
+
+            if(remaining <= 0) {
+                $("#counter").attr("class", "toomuch");
+                } else {
+                $("#counter").attr("class", "");
+                }
+        }
+
+        if ($("#status_textarea").length) {
+            $("#status_textarea").bind("keyup", counter);
+        }
+
+});
+

diff --git a/lib/util.php b/lib/util.php
index f9abb6d902dc6f03e75dd91410880f05481f852f..0762d3a8f52c30230d066604e68a89c9f10c932c 100644 (file)
--- a/lib/util.php
+++ b/lib/util.php
@@ -170,6 +170,9 @@ function common_show_header($pagetitle, $callable=NULL, $data=NULL, $headercall=
        common_element('script', array('type' => 'text/javascript',
                                                                   'src' => common_path('js/jquery.min.js')),
                                   ' ');
+       common_element('script', array('type' => 'text/javascript',
+                                                                  'src' => common_path('js/util.js')),
+                                  ' ');
 
        if ($callable) {
                if ($data) {
@@ -834,6 +837,7 @@ function common_notice_form($action=NULL, $content=NULL) {
        common_element('label', array('for' => 'status_update',
                                                                  'id' => 'status_label'),
                                   _t('What\'s up, ').$user->nickname.'?');
+        common_element('span', array('id' => 'counter', 'class' => 'counter'), '140');
        common_element('textarea', array('id' => 'status_textarea',
                                                                         'name' => 'status_textarea'),
                                   ($content) ? $content : ' ');

diff --git a/theme/default/display.css b/theme/default/display.css
index b2e703a03bb0876e66ae5c592e2bfce95b3ea7ef..98dad5d02a51b6e3b96c5d6115179315fb541249 100644 (file)
--- a/theme/default/display.css
+++ b/theme/default/display.css
@@ -476,7 +476,7 @@ textarea {
        padding: 0;
        }       
 #status_label {
-       display: block;
+       display: inline;
        clear: both;
        margin: 0;
        padding: 0 0 3px 0;
@@ -510,10 +510,21 @@ textarea {
        color: #fff6d5;
        cursor: pointer;
        border: 0;
-       }
+       } 
 #status_submit:hover {
        background-color: #d1451a;
        }
+#counter {
+    position: relative;
+    color: black;
+    font-weight: bold;
+    font-size: 18px;
+    left: 255px;
+}
+
+#counter.toomuch {
+    color: red;
+}
        
 /* ----- Subscribe Form ----- */
 #subscribe .button, #unsubscribe .button, #remotesubscribe .button {