Use the new compose API

(imported from commit fb91febbd5c257aea15292d8071da69a3e6b9a99)

templates/zephyr/home.html

@@ -51,7 +51,7 @@
 
 <div class="row">
   <div class="span9 compose" id="compose">
-    <div class="close composebox-close" onclick="compose.hide()">&times;</div>
+    <div class="close composebox-close" onclick="compose.cancel()">&times;</div>
     <div class="message_comp">
       <div class="alert" id="send-status"></div>
       <form action="/json/send_message/" method="post" class="zephyr">

templates/zephyr/index.html

@@ -116,10 +116,11 @@ var people_list = [
                   </a>
                 </li>
                 {% endif %}
-                <button type="button" class="visible-phone btn btn-small phone_new_message_button" onclick="compose.button_press('stream');">New Message</button>
+
+                <button type="button" class="visible-phone btn btn-small phone_new_message_button" onclick="compose.start('stream');">New Message</button>
               </ul>
               <div class="hidden-phone new_message_button">
-                <button type="button" class="btn btn-large btn-block" id="new_message_button" onclick="compose.button_press('stream');">New Message</button>
+                <button type="button" class="btn btn-large btn-block" id="new_message_button" onclick="compose.start('stream');">New Message</button>
               </div>
 
                 <div class="alert alert_sidebar alert-error home-error-bar" id="connection-error">

zephyr/static/js/compose.js

@@ -55,13 +55,6 @@ exports.clear = function () {
     $("#compose").find('input[type=text], textarea').val('');
 };
 
-exports.button_press = function (tabname) {
-    exports.clear();
-    $('#sidebar a[href="#home"]').tab('show');
-    exports.show(tabname, $("#" + tabname));
-    hotkeys.set_compose();
-};
-
 exports.toggle_mode = function () {
     if ($("#message-type-tabs li.active").find("a[href=#stream-message]").length !== 0) {
         // In stream tab, switch to personals.

zephyr/static/js/hotkey.js

@@ -79,18 +79,18 @@ function process_hotkey(code) {
             select_message(rows.last_visible(), false);
         }
         return false;
-    case 27: // Esc: hide compose pane or un-narrow
+    case 27: // Esc: cancel compose or un-narrow
         if (compose.composing()) {
-            compose.hide();
+            compose.cancel();
         } else {
             narrow.show_all_messages();
         }
         return process_hotkey;
     case 99: // 'c': compose
-        compose.button_press('stream');
+        compose.start('stream');
         return process_compose_hotkey;
     case 67: // 'C': compose huddle
-        compose.button_press('personal');
+        compose.start('personal');
         return process_compose_hotkey;
     case 114: // 'r': respond to message
         respond_to_message();
@@ -115,7 +115,7 @@ var goto_hotkeys = {
     105: narrow.by_subject,        // 'i'
     112: narrow.all_personals,     // 'p'
     97:  narrow.show_all_messages, // 'a'
-    27:  compose.hide              // Esc
+    27:  compose.cancel   // Esc
 };
 
 process_goto_hotkey = function (code) {
@@ -131,8 +131,8 @@ process_goto_hotkey = function (code) {
 
 process_key_in_input = function (code) {
     if (code === 27) {
-        // If the user hit the escape key, hide the compose window
+        // If the user hit the escape key, cancel the current compose
-        compose.hide();
+        compose.cancel();
     }
     // Otherwise, let the browser handle the key normally
     return false;

zephyr/static/js/zephyr.js

@@ -159,32 +159,33 @@ function get_huddle_recipient_names(message) {
 }
 
 function respond_to_message(reply_type) {
-    var message, tabname;
+    var message, msg_type;
     message = message_dict[selected_message_id];
-    compose.clear();
+
+    var stream = '';
+    var subject = '';
     if (message.type === "stream") {
-        $("#stream").val(message.display_recipient);
+        stream = message.display_recipient;
-        $("#subject").val(message.subject);
+        subject = message.subject;
-    } else {
-        $("#stream").val("");
-        $("#subject").val("");
     }
-    $("#huddle_recipient").val(message.reply_to);
+
+    var huddle_recipient = message.reply_to;
     if (reply_type === "personal" && message.type === "huddle") {
         // reply_to for huddle messages is the whole huddle, so for
         // personals replies we need to set the the huddle recipient
         // to just the sender
-        $("#huddle_recipient").val(message.sender_email);
+        huddle_recipient = message.sender_email;
     }
-    tabname = reply_type;
+    msg_type = reply_type;
-    if (tabname === undefined) {
+    if (msg_type === undefined) {
-        tabname = message.type;
+        msg_type = message.type;
     }
-    if (tabname === "huddle") {
+    if (msg_type === "huddle") {
         // Huddle messages use the personals compose box
-        tabname = "personal";
+        msg_type = "personal";
     }
-    compose.show(tabname, $("#new_message_content"));
+    compose.show(msg_type, {'stream': stream, 'subject': subject,
+                            'huddle_recipient': huddle_recipient});
 }
 
 // Called by mouseover etc.
@@ -568,21 +569,12 @@ $(function () {
 
     var tab;
     var send_now = parseInt(vars.send_after_reload, 10);
-    if (vars.msg_type === "stream") {
-        if (! send_now) {
-            compose.show("stream", $("#new_message_content"));
-        }
-        compose.stream_name(vars.stream);
-        compose.subject(vars.subject);
-    } else {
-        if (! send_now) {
-            compose.show("huddle", $("#new_message_content"));
-        }
-        compose.show("huddle", $("#new_message_content"));
-        compose.recipient(vars.recipient);
-    }
-    compose.message(vars.msg);
 
+    // TODO: preserve focus
+   compose.start(vars.msg_type, {stream: vars.stream,
+                                 subject: vars.subject,
+                                 huddle_recipient: vars.recipient,
+                                 message: vars.msg});
     if (send_now) {
         $("#compose form").ajaxSubmit();
     }