Use a 2 row textarea, and add a characters remaining countdown

diff --git a/horde/js/twitterclient.js b/horde/js/twitterclient.js
index 75cfef3..20ff458 100644 (file)
--- a/horde/js/twitterclient.js
+++ b/horde/js/twitterclient.js
@@ -16,6 +16,7 @@ var Horde_Twitter = Class.create({
     * Const'r
     *
     * opts.input   The domid of the input form element.
+    * opts.counter The domid of the node to display chars remaining.
     * opts.spinner The domid of the spinner element.
     * opts.content The main content area, where the tweets are placed.
     * opts.endpoint  The url endpoint for horde/servcies/twitter.php
@@ -37,6 +38,10 @@ var Horde_Twitter = Class.create({
             }
         }.bind(this));
 
+        $(this.opts.input).observe('keyup', function() {
+            $(this.opts.counter).update(140 - $F(this.opts.input).length);
+        }.bind(this));
+        
         /* Get the first page */
         this.getNewEntries();
    },

diff --git a/horde/lib/Block/twitter_timeline.php b/horde/lib/Block/twitter_timeline.php
index 7524d1d..56d4f85 100644 (file)
--- a/horde/lib/Block/twitter_timeline.php
+++ b/horde/lib/Block/twitter_timeline.php
@@ -149,6 +149,7 @@ class Horde_Block_Horde_twitter_timeline extends Horde_Block
                endpoint: '{$endpoint}',
                inreplyto: '{$inReplyToNode}',
                refreshrate: {$refresh},
+               counter: '{$instance}_counter',
                strings: { inreplyto: '{$inReplyToText}', defaultText: '{$defaultText}', justnow: '{$justNowText}' }
             });
 EOT;
@@ -159,8 +160,8 @@ EOT;
 
         /* Build the UI */
         $html = '<div style="padding-left:8px;padding-right:8px;">'
-           . '<div class="fbgreybox"><input style="width:98%;margin-top:4px;margin-bottom:4px;" type="text" id="' . $instance . '_newStatus" name="' . $instance . '_newStatus" value="' . $defaultText . '" />'
-           . '<a class="button" onclick="Horde.twitter.updateStatus($F(\'' . $instance . '_newStatus\'));" href="#">' . _("Update") . '</a><span id="' . $instance . '_inReplyTo"></span>'
+           . '<div class="fbgreybox"><textarea rows="2" style="width:98%;margin-top:4px;margin-bottom:4px;" type="text" id="' . $instance . '_newStatus" name="' . $instance . '_newStatus">' . $defaultText . '</textarea>'
+           . '<a class="button" onclick="Horde.twitter.updateStatus($F(\'' . $instance . '_newStatus\'));" href="#">' . _("Update") . '</a><span id="' . $instance . '_counter" style="color: rgb(204, 204, 204);margin-left:6px;">140</span>  <span id="' . $instance . '_inReplyTo"></span>'
            . Horde::img('loading.gif', '', array('id' => $instance . '_loading', 'style' => 'display:none;'));
         $html .= '<div id="currentStatus" class="" style="margin: 10px;"><strong>' . _("Latest") . '</strong> ' . $latestStatus . ' - <span class="fbstreaminfo">' . Horde_Date_Utils::relativeDateTime(strtotime($this->_profile->status->created_at), $GLOBALS['prefs']->getValue('date_format'), ($GLOBALS['prefs']->getValue('twentyFour') ? "%H:%M" : "%I:%M %P")) . '</span></div></div>';
         $html .= '<div style="height:' . (empty($this->_params['height']) ? 350 : $this->_params['height']) . 'px;overflow-y:auto;" id="twitter_body' . $instance . '">';