Refactor components for the main content section

Each conversation views now manages its own separate elements
rather than all binding to a shared #conversation element, and
similarly for message composition ui.

Also includes the beginnings of group creation UI (not working yet),
featuring bootstrap-tagsinput field for entering group recipients

js/models/messages.js

@@ -48,26 +48,9 @@ var Whisper = Whisper || {};
       if (decrypted.message.timestamp > thread.get('timestamp')) {
         thread.set('timestamp', decrypted.message.timestamp);
       }
-      thread.set('unreadCount', thread.get('unreadCount') + 1);
-      thread.set('active', true);
-      thread.save();
-      return m;
-    },
-
-    addOutgoingMessage: function(message, thread) {
-      var m = thread.messages().add({
-        threadId: thread.id,
-        body: message,
-        type: 'outgoing',
-        timestamp: new Date().getTime()
-      });
-      m.save();
-
-      thread.set('timestamp', new Date().getTime());
-      thread.set('unreadCount', 0);
-      thread.set('active', true);
-      thread.save();
+      thread.save({unreadCount: thread.get('unreadCount') + 1, active: true});
       return m;
     }
+
   }))();
 })()

js/models/threads.js

@@ -21,7 +21,15 @@ var Whisper = Whisper || {};
     },
 
     sendMessage: function(message) {
-      var m = Whisper.Messages.addOutgoingMessage(message, this);
+      this.messages().add({ type: 'outgoing',
+                            body: message,
+                            threadId: this.id,
+                            timestamp: new Date().getTime() }).save();
+
+      this.save({ timestamp:   new Date().getTime(),
+                  unreadCount: 0,
+                  active:      true});
+
       if (this.get('type') == 'private') {
         var promise = textsecure.messaging.sendMessageToNumber(this.get('id'), message, []);
       }
@@ -57,6 +65,18 @@ var Whisper = Whisper || {};
       return thread;
     },
 
+    createGroup: function(recipients, name) {
+      var group = textsecure.storage.groups.createNewGroup(numbers);
+      var attributes = {};
+      attributes = {
+        id        : group.id,
+        name      : name,
+        numbers   : group.numbers,
+        type      : 'group',
+      };
+      return this.findOrCreate(attributes);
+    },
+
     findOrCreateForRecipient: function(recipient) {
       var attributes = {};
       attributes = {

js/popup.js

@@ -17,6 +17,7 @@
 
 
 new Whisper.ConversationListView({el: $('#contacts')});
+new Whisper.Header({el: $('#header')});
 Whisper.Threads.fetch({reset: true});
 
 textsecure.registerOnLoadFunction(function() {

js/views/conversation_list_item_view.js

@@ -21,12 +21,9 @@ var Whisper = Whisper || {};
     },
 
     open: function(e) {
-      $('#conversation').trigger('close'); // detach any existing conversation views
+      $('.conversation').trigger('close'); // detach any existing conversation views
       if (!this.view) {
-        this.view = new Whisper.ConversationView({
-          el: $('#conversation'),
-          model: this.model
-        });
+        this.view = new Whisper.ConversationView({ model: this.model });
       } else {
         this.view.delegateEvents();
       }

js/views/conversation_view.js

@@ -4,19 +4,24 @@ var Whisper = Whisper || {};
   'use strict';
 
   Whisper.ConversationView = Backbone.View.extend({
+    className: 'conversation',
     initialize: function() {
       this.listenTo(this.model, 'destroy', this.stopListening); // auto update
+      this.template = $('#conversation').html();
+      Mustache.parse(this.template);
+      this.$el.html(Mustache.render(this.template));
 
       this.view = new Whisper.MessageListView({collection: this.model.messages()});
+      this.$el.find('.discussion').append(this.view.el);
     },
     events: {
-      'submit #send': 'sendMessage',
-      'close': 'undelegateEvents'
+      'submit .send': 'sendMessage',
+      'close': 'remove'
     },
 
     sendMessage: function(e) {
       e.preventDefault();
-      var input = this.$el.find('#send input');
+      var input = this.$el.find('.send input');
       if (input.val().length > 0) {
         this.model.sendMessage(input.val());
         input.val("");
@@ -24,7 +29,7 @@ var Whisper = Whisper || {};
     },
 
     render: function() {
-      this.view.render();
+      this.$el.show().insertAfter($('#gutter'));
       return this;
     }
   });

js/views/message_list_view.js

@@ -6,10 +6,6 @@ var Whisper = Whisper || {};
   Whisper.MessageListView = Whisper.ListView.extend({
     tagName: 'ul',
     className: 'discussion',
-    itemView: Whisper.MessageView,
-
-    render: function() {
-      $('#discussion').html('').append(this.el);
-    }
+    itemView: Whisper.MessageView
   });
 })();

js/views/new_message_button.js

@@ -0,0 +1,120 @@
+var Whisper = Whisper || {};
+
+(function () {
+  'use strict';
+
+  Whisper.GroupRecipientsInputView = Backbone.View.extend({
+    initialize: function() {
+      this.$el.tagsinput({ tagClass: this.tagClass });
+    },
+
+    tagClass: function(item) {
+      try {
+        if (textsecure.utils.verifyNumber(item)) {
+          return;
+        }
+      } catch(ex) {}
+      return 'error';
+    }
+  });
+
+  Whisper.NewGroupView = Backbone.View.extend({
+    initialize: function() {
+      this.template = $('#new-group-form').html();
+      Mustache.parse(this.template);
+      this.render();
+      new Whisper.GroupRecipientsInputView({el: this.$el.find('input.numbers')}).$el.appendTo(this.$el);
+    },
+    events: {
+      'submit #send': 'send'
+    },
+
+    send: function(e) {
+      var numbers = this.$el.find('input.numbers').val().split(',');
+      var name = this.$el.find('input.name').val();
+      var thread = Whisper.Threads.createGroup(numbers, name);
+      thread.sendMessage(input.val());
+      // close this, select the new thread
+    },
+
+    render: function() {
+      this.$el.prepend($(Mustache.render(this.template)));
+      return this;
+    }
+  });
+
+  Whisper.MessageRecipientInputView = Backbone.View.extend({
+    events: {
+      'change': 'verifyNumber',
+      'focus' : 'removeError'
+    },
+
+    removeError: function() {
+      this.$el.removeClass('error');
+    },
+
+    verifyNumber: function(item) {
+      try {
+        if (textsecure.utils.verifyNumber(this.$el.val())) {
+          this.removeError();
+          return;
+        }
+      } catch(ex) { console.log(ex); }
+      this.$el.addClass('error');
+    }
+  });
+
+  Whisper.NewConversationView = Backbone.View.extend({
+    initialize: function() {
+      this.template = $('#new-message-form').html();
+      Mustache.parse(this.template);
+      this.input = this.$el.find('input.number');
+      new Whisper.MessageRecipientInputView({el: this.input});
+    },
+
+    events: {
+      'submit #send': 'send',
+      'close': 'undelegateEvents'
+    },
+
+    send: function(e) {
+      e.preventDefault();
+      var number = this.input.val();
+      if (textsecure.utils.verifyNumber(number)) {
+        var thread = Whisper.Threads.findOrCreateForRecipient(number);
+        var send_input = this.$el.find('#send input');
+        thread.sendMessage(send_input.val());
+        send_input.val('');
+        this.$el.find('form.message').remove();
+        this.$el.trigger('close');
+        new Whisper.ConversationView({model: thread});
+      }
+    },
+
+    render: function() {
+      this.$el.html(Mustache.render(this.template));
+      return this;
+    }
+  });
+
+  Whisper.Header = Backbone.View.extend({
+    events: {
+      'click #new-message': 'new_message',
+      'click #new-group': 'new_group'
+    },
+
+    new_message: function(e) {
+      e.preventDefault();
+      $('.conversation').hide().trigger('close'); // detach any existing conversation views
+      this.view = new Whisper.NewConversationView().render().$el.insertAfter($('#gutter'));
+      //todo: less new
+    },
+
+    new_group: function(e) {
+      e.preventDefault();
+      $('.conversation').trigger('close'); // detach any existing conversation views
+      new Whisper.NewGroupView({ el: $('.conversation') });
+    }
+  });
+
+})();