Refactor conversation list view

Pull apart UI classes for displaying and creating threads.
Also get rid of ugly alert popup in favor of Whisper.notify.

js/popup.js

@@ -19,6 +19,9 @@ textsecure.registerOnLoadFunction(function() {
 	if (textsecure.storage.getUnencrypted("number_id") === undefined) {
 		extension.navigator.tabs.create("options.html");
 	} else {
+
+		new Whisper.ConversationListView();
+		new Whisper.ConversationComposeView({el: $('body')});
 		$('.my-number').text(textsecure.storage.getUnencrypted("number_id").split(".")[0]);
 		textsecure.storage.putUnencrypted("unreadCount", 0);
 		extension.navigator.setBadgeText("");

js/views/conversations/index.js

@@ -3,7 +3,7 @@ var Whisper = Whisper || {};
 (function () {
   'use strict';
 
-  Whisper.ConversationListView = new (Backbone.View.extend({ // singleton
+  Whisper.ConversationListView = Backbone.View.extend({
 
     tagName: 'ul',
     id: 'conversations',
@@ -24,41 +24,6 @@ var Whisper = Whisper || {};
       Whisper.Messages.fetch();
 
       this.$el.appendTo($('#inbox'));
-
-      $('#send_link').click(function(e) {
-        $('#send').fadeIn().find('input[type=text]').focus();
-      });
-
-      $('#send').click(function() {
-        $('#send input[type=text]').focus();
-      });
-
-      $("#compose-cancel").click(function(e) {
-        $('#send').hide();
-        e.preventDefault();
-      });
-      $("#send").submit((function(e) {
-        e.preventDefault();
-        var numbers = [];
-        var splitString = $("#send_numbers").val().split(",");
-        for (var i = 0; i < splitString.length; i++) {
-          try {
-            numbers.push(textsecure.utils.verifyNumber(splitString[i]));
-          } catch (numberError) {
-            alert(numberError);
-          }
-        }
-        $("#send_numbers").val('');
-        numbers = _.filter(numbers, _.identity); // rm undefined, null, "", etc...
-        if (numbers.length) {
-          $('#send').hide();
-          Whisper.Threads.findOrCreateForRecipient(numbers).trigger('select');
-        } else {
-          Whisper.notify('recipient missing or invalid');
-          $('#send input[type=text]').focus();
-        }
-      }).bind(this));
-
     },
 
     addThread: function(thread) {
@@ -74,5 +39,5 @@ var Whisper = Whisper || {};
     addMessage: function(message) {
       message.thread().trigger('message', message);
     }
-  }))();
+  });
 })();

js/views/conversations/new.js

@@ -0,0 +1,45 @@
+(function () {
+  'use strict';
+
+  Whisper.ConversationComposeView = Backbone.View.extend({
+    events : {
+      'click #send_link'      : 'show_send',
+      'click #send'           : 'focus_send',
+      'click #compose-cancel' : 'hide_send',
+      'submit #send'          : 'submit_send'
+    },
+    show_send: function(e) {
+      $('#send').fadeIn().find('input[type=text]').focus();
+    },
+    focus_send: function(e) {
+      $('#send input[type=text]').focus();
+    },
+    hide_send: function(e) {
+      $('#send').hide();
+      e.preventDefault();
+    },
+    submit_send: function(e) {
+      e.preventDefault();
+      var numbers = [];
+      var splitString = $("#send_numbers").val().split(",");
+      for (var i = 0; i < splitString.length; i++) {
+        try {
+          numbers.push(textsecure.utils.verifyNumber(splitString[i]));
+        } catch (numberError) {
+          if (!numberError.countryCodeValid) {
+            Whisper.notify('Invalid country code');
+          }
+          if (!numberError.numberValid) {
+            Whisper.notify('Invalid number');
+          }
+          $('#send input[type=text]').focus();
+          return;
+        }
+      }
+      $("#send_numbers").val('');
+      $('#send').hide();
+      Whisper.Threads.findOrCreateForRecipient(numbers).trigger('select');
+    }
+  });
+})();
+

popup.html

@@ -66,8 +66,9 @@
 	<script type="text/javascript" src="js/chromium.js"></script>
 	<script type="text/javascript" src="js/views/notifications.js"></script>
 	<script type="text/javascript" src="js/views/message.js"></script>
-	<script type="text/javascript" src="js/views/conversation.js"></script>
+	<script type="text/javascript" src="js/views/conversations/show.js"></script>
-	<script type="text/javascript" src="js/views/messages.js"></script>
+	<script type="text/javascript" src="js/views/conversations/index.js"></script>
+	<script type="text/javascript" src="js/views/conversations/new.js"></script>
 	<script type="text/javascript" src="js/popup.js"></script>
 </body>
 </html>