Refactor typeahead into new conversation view

index.html

@@ -46,53 +46,9 @@
                 </span>
             </div>
         </script>
-        <script type='text/x-tmpl-mustache' id='new-message-form'>
+        <script type='text/x-tmpl-mustache' id='new-conversation'>
-          <form class='send message'>
+            <div class='new-contact'></div>
-            <div class="phone-number-input"></div>
+            <div class='contacts'></div>
-            <div class='send-message-area'>
-                <div class='message-composer'>
-                    <input name='message' class='send-message' rows='6' type='textarea'>
-                    <div class='attachments'>
-                      <input type='file' name='files[]' class='file-input'>
-                    </div>
-                    <input type='submit'>
-                </div>
-                <div class='extension-details'>
-                    <ul>
-                        <li>Signal for Chrome</li>
-                        <li><a href="https://github.com/whispersystems">Version 0.1</a></li>
-                        <li>by <a href="http://whispersystems.org">Open Whisper Systems</a></li>
-                        <li><a href="http://support.whispersystems.org/">Need Help?</a></li>
-                    </ul>
-                </div>
-            </div>
-          </form>
-        </script>
-        <script type='text/x-tmpl-mustache' id='new-group-form'>
-          <form class='send group'>
-            <div><input name='name' class='name' placeholder='Group Name'></div>
-            <div class='group-avatar'>
-              <div><input type='file' name='avatar' class='file-input'></div>
-            </div>
-            <div><input name='numbers' class='numbers' data-role=tagsinput></div>
-            <div class='send-message-area'>
-                <div class='message-composer'>
-                    <input class='send-message' rows='6' type='textarea'>
-                    <div class='attachments'>
-                      <input type='file' name='files[]' class='file-input'>
-                    </div>
-                    <input type='submit'>
-                </div>
-                <div class='extension-details'>
-                    <ul>
-                        <li>Signal for Chrome</li>
-                        <li><a href="https://github.com/whispersystems">Version 0.1</a></li>
-                        <li>by <a href="http://whispersystems.org">Open Whisper Systems</a></li>
-                        <li><a href="http://support.whispersystems.org/">Need Help?</a></li>
-                    </ul>
-                </div>
-            </div>
-          </form>
         </script>
         <script type="text/javascript" src="js/components.js"></script>
 

js/views/inbox_view.js

@@ -18,42 +18,17 @@
 
     window.Whisper = window.Whisper || {};
 
-    var typeahead = Backbone.TypeaheadCollection.extend({
-        typeaheadAttributes: ['name'],
-        database: Whisper.Database,
-        storeName: 'conversations',
-        model: Whisper.Conversation,
-
-        comparator: function(m) {
-            return m.get('name');
-        },
-
-        _tokenize: function(s) {
-            s = $.trim(s);
-            if (s.length === 0) {
-                return null;
-            }
-
-            return s.toLowerCase().split(/[\s\-_+]+/)
-        }
-    });
-
     Whisper.InboxView = Backbone.View.extend({
         initialize: function () {
-            this.gutter = $('#gutter');
+            this.$gutter = $('#gutter');
-            this.contacts = $('#contacts');
+            this.$contacts = $('#contacts');
 
-            this.typeahead_collection = new typeahead();
+            this.newConversationView = new Whisper.NewConversationView();
-            this.typeahead_view = new Whisper.ConversationListView({
+            this.newConversationView.$el.appendTo(this.$gutter);
-                collection : new Whisper.ConversationCollection(),
-                className: 'typeahead'
-            });
-            this.typeahead_view.$el.hide().insertAfter(this.contacts);
-            this.typeahead_collection.fetch();
 
             this.conversations = new Whisper.ConversationCollection();
             this.inbox = new Whisper.ConversationListView({
-                el         : $('#contacts'),
+                el         : this.$contacts,
                 collection : this.conversations
             });
 
@@ -66,43 +41,14 @@
             }.bind(this));
         },
         events: {
-            'click #new-message': 'new_message',
+            'change input.new-message': 'compose',
-            'click #new-group': 'new_group',
+            'keyup input.new-message': 'compose'
-            'change input.new-message': 'filterContacts',
-            'keyup input.new-message': 'filterContacts'
         },
-        filterContacts: function() {
+        compose: function() {
             var query = this.$el.find('input.new-message').val();
-            if (query.length) {
+            this.$contacts.toggle(!query.length);
-                this.typeahead_view.collection.reset(
+            this.newConversationView.$el.toggle(!!query.length);
-                    this.typeahead_collection.typeahead(query)
+            this.newConversationView.filterContacts(query);
-                );
-                this.contacts.hide();
-                this.typeahead_view.$el.show();
-
-            } else {
-                this.contacts.show();
-                this.typeahead_view.$el.hide();
-            }
-        },
-        new_message: function (e) {
-            e.preventDefault();
-            $('.conversation').hide().trigger('close'); // detach any existing conversation views
-            this.view = new Whisper.NewConversationView({
-                collection: this.conversations
-            });
-            this.setContent(this.view.render().$el.show());
-        },
-        new_group: function (e) {
-            e.preventDefault();
-            $('.conversation').trigger('close'); // detach any existing conversation views
-            var view = new Whisper.NewGroupView({
-                collection: this.conversations
-            });
-            this.setContent(view.render().$el.show());
-        },
-        setContent: function (content) {
-            $(content).insertAfter(this.gutter);
         }
     });
 

js/views/new_conversation_view.js

@@ -18,38 +18,52 @@ var Whisper = Whisper || {};
 (function () {
   'use strict';
 
+  var typeahead = Backbone.TypeaheadCollection.extend({
+      typeaheadAttributes: ['name'],
+      database: Whisper.Database,
+      storeName: 'conversations',
+      model: Whisper.Conversation,
+
+      comparator: function(m) {
+          return m.get('name');
+      },
+
+      _tokenize: function(s) {
+          s = $.trim(s);
+          if (s.length === 0) {
+              return null;
+          }
+
+          return s.toLowerCase().split(/[\s\-_+]+/)
+      }
+  });
+
   Whisper.NewConversationView = Backbone.View.extend({
-    className: 'conversation',
+    className: 'new-conversation',
     initialize: function() {
-      this.template = $('#new-message-form').html();
+      this.template = $('#new-conversation').html();
       Mustache.parse(this.template);
       this.$el.html($(Mustache.render(this.template)));
-      this.input = new Whisper.PhoneInputView({el: this.$el.find('div.phone-number-input')});
+      this.input = new Whisper.PhoneInputView({
-      this.fileInput = new Whisper.FileInputView({el: this.$el.find('.attachments')});
+          el: this.$el.find('div.phone-number-input')
-      this.$el.find('div.phone-number-input').append(this.input.render().el);
+      });
+
+      this.typeahead_collection = new typeahead();
+      this.typeahead_view = new Whisper.ConversationListView({
+          collection : new Whisper.ConversationCollection(),
+          className: 'typeahead'
+      });
+
+      this.typeahead_view.$el.appendTo(this.$el.find('.contacts'));
+      this.typeahead_collection.fetch();
     },
 
-    events: {
+    filterContacts: function(query) {
-      'submit .send': 'send',
+        if (query.length) {
-      'close': 'remove'
+            this.typeahead_view.collection.reset(
-    },
+                this.typeahead_collection.typeahead(query)
-
+            );
-    send: function(e) {
-      e.preventDefault();
-      var number = this.input.validateNumber();
-      if (number) {
-        var convo = this.collection.findOrCreateForRecipient(number);
-        var message_input = this.$el.find('input.send-message');
-        var message = message_input.val();
-        if (message.length > 0 || this.fileInput.hasFiles()) {
-          this.fileInput.getFiles().then(function(attachments) {
-            convo.sendMessage(message, attachments);
-          });
-          message_input.val("");
         }
-        this.remove();
-        convo.trigger('open');
-      }
     }
   });