Refactor typeahead into new conversation view
This commit is contained in:
lilia
parent
f207137b35
commit
e149650d94
3 changed files with 53 additions and 137 deletions
50
index.html
50
index.html
|
|
@ -46,53 +46,9 @@
|
|||
</span>
|
||||
</div>
|
||||
</script>
|
||||
<script type='text/x-tmpl-mustache' id='new-message-form'>
|
||||
<form class='send message'>
|
||||
<div class="phone-number-input"></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 type='text/x-tmpl-mustache' id='new-conversation'>
|
||||
<div class='new-contact'></div>
|
||||
<div class='contacts'></div>
|
||||
</script>
|
||||
<script type="text/javascript" src="js/components.js"></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -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.contacts = $('#contacts');
|
||||
this.$gutter = $('#gutter');
|
||||
this.$contacts = $('#contacts');
|
||||
|
||||
this.typeahead_collection = new typeahead();
|
||||
this.typeahead_view = new Whisper.ConversationListView({
|
||||
collection : new Whisper.ConversationCollection(),
|
||||
className: 'typeahead'
|
||||
});
|
||||
this.typeahead_view.$el.hide().insertAfter(this.contacts);
|
||||
this.typeahead_collection.fetch();
|
||||
this.newConversationView = new Whisper.NewConversationView();
|
||||
this.newConversationView.$el.appendTo(this.$gutter);
|
||||
|
||||
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',
|
||||
'click #new-group': 'new_group',
|
||||
'change input.new-message': 'filterContacts',
|
||||
'keyup input.new-message': 'filterContacts'
|
||||
'change input.new-message': 'compose',
|
||||
'keyup input.new-message': 'compose'
|
||||
},
|
||||
filterContacts: function() {
|
||||
compose: function() {
|
||||
var query = this.$el.find('input.new-message').val();
|
||||
if (query.length) {
|
||||
this.typeahead_view.collection.reset(
|
||||
this.typeahead_collection.typeahead(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);
|
||||
this.$contacts.toggle(!query.length);
|
||||
this.newConversationView.$el.toggle(!!query.length);
|
||||
this.newConversationView.filterContacts(query);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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.fileInput = new Whisper.FileInputView({el: this.$el.find('.attachments')});
|
||||
this.$el.find('div.phone-number-input').append(this.input.render().el);
|
||||
this.input = new Whisper.PhoneInputView({
|
||||
el: this.$el.find('div.phone-number-input')
|
||||
});
|
||||
|
||||
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: {
|
||||
'submit .send': 'send',
|
||||
'close': 'remove'
|
||||
},
|
||||
|
||||
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("");
|
||||
filterContacts: function(query) {
|
||||
if (query.length) {
|
||||
this.typeahead_view.collection.reset(
|
||||
this.typeahead_collection.typeahead(query)
|
||||
);
|
||||
}
|
||||
this.remove();
|
||||
convo.trigger('open');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue