mirror of
https://github.com/signalapp/Signal-Desktop.git
synced 2026-04-24 18:38:15 +01:00
ce3c5eb909
Pull apart UI classes for displaying and creating threads. Also get rid of ugly alert popup in favor of Whisper.notify.
117 lines
3.5 KiB
JavaScript
117 lines
3.5 KiB
JavaScript
var Whisper = Whisper || {};
|
|
|
|
(function () {
|
|
'use strict';
|
|
|
|
var destroyer = Backbone.View.extend({
|
|
tagName: 'button',
|
|
className: 'btn btn-square btn-sm destroy',
|
|
initialize: function() {
|
|
this.$el.html('×');
|
|
this.$el.click(this.destroy.bind(this));
|
|
},
|
|
|
|
destroy: function() {
|
|
_.each(this.model.messages(), function(message) { message.destroy(); });
|
|
this.model.destroy();
|
|
}
|
|
});
|
|
|
|
var menu = Backbone.View.extend({
|
|
tagName: 'ul',
|
|
className: 'menu',
|
|
initialize: function() {
|
|
this.$el.html("<li>delete</li>");
|
|
}
|
|
});
|
|
|
|
Whisper.ConversationView = Backbone.View.extend({
|
|
tagName: 'li',
|
|
className: 'conversation',
|
|
|
|
initialize: function() {
|
|
this.listenTo(this.model, 'change', this.render); // auto update
|
|
this.listenTo(this.model, 'message', this.addMessage); // auto update
|
|
this.listenTo(this.model, 'destroy', this.remove); // auto update
|
|
this.listenTo(this.model, 'select', this.open);
|
|
this.listenTo(Whisper.Messages, 'reset', this.addAllMessages); // auto update
|
|
|
|
this.$el.addClass('closed');
|
|
this.$destroy = (new destroyer({model: this.model})).$el;
|
|
|
|
this.$image = $('<div class="image">');
|
|
this.$name = $('<span class="name">');
|
|
this.$header = $('<div class="header">').append(this.$image, this.$name);
|
|
|
|
this.$button = $('<button class="btn">').append($('<span>').text('Send'));
|
|
this.$input = $('<input type="text">').attr('autocomplete','off');
|
|
this.$form = $("<form class=''>").append(this.$input);
|
|
|
|
this.$messages = $('<ul class="messages">');
|
|
this.$collapsable = $('<div class="collapsable">').hide();
|
|
this.$collapsable.append(this.$messages, this.$form);
|
|
|
|
this.$el.append(this.$destroy, this.$header, this.$collapsable);
|
|
|
|
this.$form.submit(function(input,thread){ return function(e) {
|
|
if (!input.val().length) { return false; }
|
|
thread.sendMessage(input.val());
|
|
input.val("");
|
|
e.preventDefault();
|
|
};}(this.$input, this.model));
|
|
|
|
this.$header.click(function(e) {
|
|
var $conversation = $(e.target).closest('.conversation');
|
|
if (!$conversation.hasClass('closed')) {
|
|
$conversation.addClass('closed');
|
|
$conversation.find('.collapsable').slideUp(600);
|
|
e.stopPropagation();
|
|
}
|
|
});
|
|
|
|
this.$button.click(function(button,input,thread){ return function(e) {
|
|
if (!input.val().length) { return false; }
|
|
button.attr("disabled", "disabled");
|
|
button.find('span').text("Sending");
|
|
|
|
thread.sendMessage(input.val()).then(function(){
|
|
button.removeAttr("disabled");
|
|
button.find('span').text("Send");
|
|
});
|
|
|
|
input.val("");
|
|
};}(this.$button, this.$input, this.model));
|
|
|
|
this.$el.click(this.open.bind(this));
|
|
},
|
|
|
|
remove: function() {
|
|
this.$el.remove();
|
|
},
|
|
|
|
open: function(e) {
|
|
if (this.$el.hasClass('closed')) {
|
|
this.$el.removeClass('closed');
|
|
this.$collapsable.slideDown(600);
|
|
}
|
|
this.$input.focus();
|
|
},
|
|
|
|
addMessage: function (message) {
|
|
var view = new Whisper.MessageView({ model: message });
|
|
this.$messages.append(view.render().el);
|
|
},
|
|
|
|
addAllMessages: function () {
|
|
_.each(this.model.messages(), this.addMessage, this);
|
|
this.render();
|
|
},
|
|
|
|
render: function() {
|
|
this.$name.text(this.model.get('name'));
|
|
this.$image.css('background-image: ' + this.model.get('image') + ';');
|
|
return this;
|
|
}
|
|
});
|
|
})();
|