changeset 364:48d21192fe85

add a message length counter so users know when they've typed too much for targets that don't allow more than a certain number of characters to be sent to them
author Myk Melez <myk@mozilla.org>
date Tue, 04 Nov 2008 19:09:11 -0800
parents 61e5d18f4428
children 03a77e6d86cd
files content/stream.css content/stream.js content/stream.xul modules/target.js modules/twitter.js
diffstat 5 files changed, 41 insertions(+), 4 deletions(-) [+]
line wrap: on
line diff
--- a/content/stream.css	Tue Nov 04 18:44:57 2008 -0800
+++ b/content/stream.css	Tue Nov 04 19:09:11 2008 -0800
@@ -132,6 +132,9 @@
   list-style-image: url(chrome://global/skin/icons/loading_16.png);
 }
 
+#writeCounter {
+  font-size: 200%;
+}
 
 /* Border styles to clarify the structure for debugging purposes. */
 
--- a/content/stream.js	Tue Nov 04 18:44:57 2008 -0800
+++ b/content/stream.js	Tue Nov 04 19:09:11 2008 -0800
@@ -104,6 +104,11 @@
     return this._writeTextbox = document.getElementById("writeTextbox");
   },
 
+  get _writeCounter() {
+    delete this._writeCounter;
+    return this._writeCounter = document.getElementById("writeCounter");
+  },
+
   get _sendButton() {
     delete this._sendButton;
     return this._sendButton = document.getElementById("sendButton");
@@ -277,9 +282,22 @@
   // Writing and Sending Messages
 
   // FIXME: if there is more than one target, let the user choose which one to use.
+  _target: null,
 
   onWriteMessage: function(event) {
     this._writeBox.hidden = !event.target.checked;
+    this._target = SnowlService.targets[0];
+    this.onInputMessage();
+  },
+
+  onInputMessage: function() {
+    // Update the counter to reflect how many characters the user can still type.
+    this._writeCounter.value =
+      this._target.maxMessageLength - this._writeTextbox.value.length;
+
+    // If the user has typed more than they can send, disable the Send button.
+    this._sendButton.disabled =
+      (this._writeTextbox.value.length > this._target.maxMessageLength);
   },
 
   onSendMessage: function() {
@@ -288,11 +306,10 @@
     this._sendButton.disabled = true;
     this._writeTextbox.disabled = true;
 
-    let target = SnowlService.targets[0];
     let content = this._writeTextbox.value;
     let callback = function() { SnowlMessageView.onMessageSent() };
     // FIXME: pass an error callback and display a message to users on error.
-    target.send(content, callback);
+    this._target.send(content, callback);
   },
 
   onMessageSent: function() {
@@ -310,6 +327,7 @@
     this._sendButton.disabled = false;
     this._writeTextbox.disabled = false;
     this._writeTextbox.value = "";
+    this._target = null;
   },
 
 
--- a/content/stream.xul	Tue Nov 04 18:44:57 2008 -0800
+++ b/content/stream.xul	Tue Nov 04 19:09:11 2008 -0800
@@ -60,8 +60,9 @@
   <toolbar id="snowlToolbar"/>
 
   <vbox id="writeBox">
-    <textbox id="writeTextbox" multiline="true" rows="3"/>
+    <textbox id="writeTextbox" multiline="true" rows="3" oninput="SnowlMessageView.onInputMessage()"/>
     <hbox>
+      <description id="writeCounter"/>
       <spacer flex="1"/>
       <button id="sendButton" label="&sendButton.label;" oncommand="SnowlMessageView.onSendMessage()"/>
     </hbox>
--- a/modules/target.js	Tue Nov 04 18:44:57 2008 -0800
+++ b/modules/target.js	Tue Nov 04 19:09:11 2008 -0800
@@ -51,5 +51,18 @@
 function SnowlTarget() {}
 
 SnowlTarget.prototype = {
-  send: function(content) {}
+  /**
+   * The maximum number of characters a message can contain.
+   */
+  maxMessageLength: null,
+
+  /**
+   * Send a message to this target.
+   *
+   * @param content {string} the content of the message
+   * @param callback {Function} a function to call when the send completes
+   *
+   * FIXME: add an error callback to call if the send fails.
+   */
+  send: function(content, callback) {}
 };
--- a/modules/twitter.js	Tue Nov 04 18:44:57 2008 -0800
+++ b/modules/twitter.js	Tue Nov 04 19:09:11 2008 -0800
@@ -562,6 +562,8 @@
   //**************************************************************************//
   // Sending
 
+  maxMessageLength: 140,
+
   _sendCallback: null,
 
   send: function(content, callback) {