Thread model and UI improvements
Adds thread model/collection for managing conversation-level state, such as unreadCounts, group membership, thread order, etc... plus various UI improvements enabled by thread model, including an improved compose flow, and thread-destroy button. Adds Whisper.notify for presenting messages to the user in an orderly fashion. Currently using a growl-style fade in/out effect. Also some housekeeping: Cut up views into separate files. Partial fix for formatTimestamp. Tweaked buttons and other styles.
This commit is contained in:
lilia
parent
2d12a33ead
commit
83508abab8
13 changed files with 460 additions and 211 deletions
|
|
@ -34,6 +34,7 @@
|
|||
<script type="text/javascript" src="js-deps/backbone.js"></script>
|
||||
<script type="text/javascript" src="js-deps/backbone.localStorage.js"></script>
|
||||
<script type="text/javascript" src="js/models/messages.js"></script>
|
||||
<script type="text/javascript" src="js/models/threads.js"></script>
|
||||
<script type="text/javascript" src="js/helpers.js"></script>
|
||||
<script type="text/javascript" src="js/api.js"></script>
|
||||
<script type="text/javascript" src="js/chromium.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,44 @@
|
|||
.btn span {
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.5em;
|
||||
border: 2px solid #7fd0ed;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.btn {
|
||||
border: 2px solid #acdbf5;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
padding: 2px;
|
||||
border: none;
|
||||
color: #7fd0ed;
|
||||
font-weight: bold;
|
||||
}
|
||||
.btn:hover, .btn:focus {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
background-color: #f1fafd;
|
||||
}
|
||||
.btn:hover {
|
||||
background-color: #7fd0ed;
|
||||
border-color: #acdbf5;
|
||||
color: #fff;
|
||||
}
|
||||
.btn:active {
|
||||
outline: 2px dashed #acdbf5;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.btn.selected span,
|
||||
.btn:active span {
|
||||
.btn.selected ,
|
||||
.btn:active {
|
||||
background-color: #7fd0ed;
|
||||
border: 2px solid #acdbf5;
|
||||
color: #fff;
|
||||
}
|
||||
.btn:active {
|
||||
background-color: #f1fafd;
|
||||
color: #7fd0ed;
|
||||
}
|
||||
|
||||
.btn-square {
|
||||
display: inline-block;
|
||||
width: 32px;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
.btn-sm.btn-square {
|
||||
padding: 0;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.conversation {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
max-width: 400px;
|
||||
min-height: 64px;
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
border-radius: 10px;
|
||||
|
|
@ -47,9 +48,12 @@
|
|||
}
|
||||
|
||||
.conversation .header {
|
||||
padding: 0.3em 0.6em 0.3em 46px;
|
||||
padding: 0.3em 0 0.3em 46px;
|
||||
}
|
||||
.avatar {
|
||||
.conversation .btn.destroy {
|
||||
float: right;
|
||||
}
|
||||
.conversation .image {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 10px;
|
||||
|
|
@ -69,18 +73,20 @@
|
|||
.collapsable {
|
||||
background-color: #fff;
|
||||
border: 2px solid #acdbf5;
|
||||
padding: 1em 0em;
|
||||
padding: 1em 0em 0em;
|
||||
line-height: 1.2em;
|
||||
font-family: sans-serif;
|
||||
border-radius: 30px;
|
||||
border-radius: 20px 0;
|
||||
}
|
||||
|
||||
.messages + form {
|
||||
text-align: right;
|
||||
.collapsable form {
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.conversation form {
|
||||
margin-top: 0.5em;
|
||||
.collapsable input[type=text] {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
input[type=text], textarea {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 7px;
|
||||
padding: 0.5em;
|
||||
border: 2px solid #7fd0ed;
|
||||
border-radius: 4px;
|
||||
background-color: #fafafa;
|
||||
|
|
@ -9,6 +9,7 @@ input[type=text], textarea {
|
|||
}
|
||||
|
||||
|
||||
input[type=submit]:focus,
|
||||
input[type=text]:focus {
|
||||
outline: 2px dashed #acdbf5;
|
||||
outline-offset: 2px;
|
||||
|
|
|
|||
|
|
@ -35,22 +35,19 @@ header {
|
|||
padding: 5px 0;
|
||||
}
|
||||
|
||||
form.compose {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
label {
|
||||
float: left;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
form.compose input[type=text], form.compose textarea {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
#send input[type=submit] {
|
||||
#compose-cancel {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#send .conversation {
|
||||
padding: 0.3em 1em;
|
||||
}
|
||||
|
||||
#popup_send_numbers {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -95,5 +92,19 @@ ul {
|
|||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Formatting */
|
||||
#send_link ~ #new-chat-help,
|
||||
#new-group ~ #new-group-help {
|
||||
display: none;
|
||||
}
|
||||
#send_link:hover ~ #new-chat-help,
|
||||
#new-group:hover ~ #new-group-help {
|
||||
display: block;
|
||||
}
|
||||
.help {
|
||||
display: inline-block;
|
||||
position: fixed;
|
||||
top: 10;
|
||||
right: 10;
|
||||
font-size: 0.8em;
|
||||
color: #7fd0ed;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,18 @@ var Whisper = Whisper || {};
|
|||
'use strict';
|
||||
|
||||
var Message = Backbone.Model.extend({
|
||||
validate: function(attributes, options) {
|
||||
var required = ['body', 'timestamp', 'threadId'];
|
||||
var missing = _.filter(required, function(attr) { return !attributes[attr]; });
|
||||
if (missing.length) { return "Message must have " + missing; }
|
||||
},
|
||||
|
||||
toProto: function() {
|
||||
return new textsecure.protos.PushMessageContentProtobuf({body: this.get('body')});
|
||||
},
|
||||
|
||||
thread: function() {
|
||||
return Whisper.Threads.get(this.get('threadId'));
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -20,28 +30,36 @@ var Whisper = Whisper || {};
|
|||
for (var i = 0; i < decrypted.message.attachments.length; i++)
|
||||
attachments[i] = "data:" + decrypted.message.attachments[i].contentType + ";base64," + btoa(getString(decrypted.message.attachments[i].decrypted));
|
||||
|
||||
var thread = Whisper.Threads.findOrCreateForIncomingMessage(decrypted);
|
||||
var m = Whisper.Messages.add({
|
||||
person: decrypted.pushMessage.source,
|
||||
group: decrypted.message.group,
|
||||
threadId: thread.id,
|
||||
body: decrypted.message.body,
|
||||
attachments: attachments,
|
||||
type: 'incoming',
|
||||
timestamp: decrypted.message.timestamp
|
||||
});
|
||||
m.save();
|
||||
|
||||
if (decrypted.message.timestamp > thread.get('timestamp')) {
|
||||
thread.set('timestamp', decrypted.message.timestamp);
|
||||
thread.set('unreadCount', thread.get('unreadCount') + 1);
|
||||
thread.save();
|
||||
}
|
||||
thread.trigger('message', m);
|
||||
return m;
|
||||
},
|
||||
|
||||
addOutgoingMessage: function(message, recipients) {
|
||||
addOutgoingMessage: function(message, thread) {
|
||||
var m = Whisper.Messages.add({
|
||||
person: recipients[0], // TODO: groups
|
||||
threadId: thread.id,
|
||||
body: message,
|
||||
type: 'outgoing',
|
||||
timestamp: new Date().getTime()
|
||||
});
|
||||
m.save();
|
||||
thread.trigger('message', m);
|
||||
return m;
|
||||
}
|
||||
}))();
|
||||
|
||||
})()
|
||||
|
|
|
|||
94
js/models/threads.js
Normal file
94
js/models/threads.js
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
var Whisper = Whisper || {};
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var Thread = Backbone.Model.extend({
|
||||
defaults: function() {
|
||||
return {
|
||||
image: '/images/default.png',
|
||||
unreadCount: 0,
|
||||
timestamp: new Date().getTime()
|
||||
};
|
||||
},
|
||||
|
||||
validate: function(attributes, options) {
|
||||
var required = ['id', 'type', 'recipients', 'timestamp', 'image', 'name'];
|
||||
var missing = _.filter(required, function(attr) { return !attributes[attr]; });
|
||||
if (missing.length) { return "Thread must have " + missing; }
|
||||
if (attributes.recipients.length === 0) {
|
||||
return "No recipients for thread " + this.id;
|
||||
}
|
||||
for (var person in attributes.recipients) {
|
||||
if (!person) return "Invalid recipient";
|
||||
}
|
||||
},
|
||||
|
||||
sendMessage: function(message) {
|
||||
return new Promise(function(resolve) {
|
||||
var m = Whisper.Messages.addOutgoingMessage(message, this);
|
||||
textsecure.sendMessage(this.get('recipients'), m.toProto(),
|
||||
function(result) {
|
||||
console.log(result);
|
||||
resolve();
|
||||
}
|
||||
);
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
messages: function() {
|
||||
return Whisper.Messages.where({threadId: this.id});
|
||||
},
|
||||
});
|
||||
|
||||
Whisper.Threads = new (Backbone.Collection.extend({
|
||||
localStorage: new Backbone.LocalStorage("Threads"),
|
||||
model: Thread,
|
||||
comparator: 'timestamp',
|
||||
findOrCreate: function(attributes) {
|
||||
var thread = Whisper.Threads.add(attributes, {merge: true});
|
||||
thread.save();
|
||||
return thread;
|
||||
},
|
||||
|
||||
findOrCreateForRecipients: function(recipients) {
|
||||
var attributes = {};
|
||||
if (recipients.length > 1) {
|
||||
attributes = {
|
||||
//TODO group id formatting?
|
||||
name : recipients,
|
||||
recipients : recipients,
|
||||
type : 'group',
|
||||
};
|
||||
} else {
|
||||
attributes = {
|
||||
id : recipients[0],
|
||||
name : recipients[0],
|
||||
recipients : recipients,
|
||||
type : 'private',
|
||||
};
|
||||
}
|
||||
return this.findOrCreate(attributes);
|
||||
},
|
||||
|
||||
findOrCreateForIncomingMessage: function(decrypted) {
|
||||
var attributes = {};
|
||||
if (decrypted.message.group) {
|
||||
attributes = {
|
||||
id : decrypted.message.group.id,
|
||||
name : decrypted.message.group.name,
|
||||
recipients : decrypted.message.group.members,
|
||||
type : 'group',
|
||||
};
|
||||
} else {
|
||||
attributes = {
|
||||
id : decrypted.pushMessage.source,
|
||||
name : decrypted.pushMessage.source,
|
||||
recipients : [decrypted.pushMessage.source],
|
||||
type : 'private'
|
||||
};
|
||||
}
|
||||
return this.findOrCreate(attributes);
|
||||
}
|
||||
}))();
|
||||
})();
|
||||
33
js/popup.js
33
js/popup.js
|
|
@ -14,49 +14,16 @@
|
|||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
$('#inbox_link').click(function(e) {
|
||||
$('#send').hide();
|
||||
$('#send_link').removeClass('selected');
|
||||
$('#inbox').show();
|
||||
$('#inbox_link').addClass('selected');
|
||||
});
|
||||
$('#send_link').click(function(e) {
|
||||
$('#inbox').hide();
|
||||
$('#inbox_link').removeClass('selected');
|
||||
$('#send').show();
|
||||
$('#send_link').addClass('selected');
|
||||
});
|
||||
|
||||
textsecure.registerOnLoadFunction(function() {
|
||||
if (textsecure.storage.getUnencrypted("number_id") === undefined) {
|
||||
chrome.tabs.create({url: "options.html"});
|
||||
} else {
|
||||
$(window).bind('storage', function(e) { Whisper.Messages.fetch(); });
|
||||
Whisper.Messages.fetch();
|
||||
$('.my-number').text(textsecure.storage.getUnencrypted("number_id").split(".")[0]);
|
||||
textsecure.storage.putUnencrypted("unreadCount", 0);
|
||||
chrome.browserAction.setBadgeText({text: ""});
|
||||
$("#me").click(function() {
|
||||
$('#popup_send_numbers').val($('.my-number').text());
|
||||
});
|
||||
|
||||
$("#popup_send_button").click(function() {
|
||||
var numbers = [];
|
||||
var splitString = $("#popup_send_numbers").val().split(",");
|
||||
for (var i = 0; i < splitString.length; i++) {
|
||||
try {
|
||||
numbers.push(verifyNumber(splitString[i]));
|
||||
} catch (numberError) {
|
||||
//TODO
|
||||
alert(numberError);
|
||||
}
|
||||
}
|
||||
var message = Whisper.Messages.addOutgoingMessage(
|
||||
$("#popup_send_text").val(), numbers
|
||||
);
|
||||
textsecure.sendMessage(numbers, message.toProto(),
|
||||
//TODO: Handle result
|
||||
function(thing) {console.log(thing);});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
|||
116
js/views/conversation.js
Normal file
116
js/views/conversation.js
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
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.$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.addAllMessages();
|
||||
|
||||
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;
|
||||
}
|
||||
});
|
||||
})();
|
||||
64
js/views/message.js
Normal file
64
js/views/message.js
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
var Whisper = Whisper || {};
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var Destroyer = Backbone.View.extend({
|
||||
tagName: 'button',
|
||||
className: 'btn btn-square btn-sm',
|
||||
initialize: function() {
|
||||
this.$el.html('×');
|
||||
this.listenTo(this.$el, 'click', this.model.destroy);
|
||||
}
|
||||
});
|
||||
|
||||
Whisper.MessageView = Backbone.View.extend({
|
||||
tagName: "li",
|
||||
className: "message",
|
||||
|
||||
initialize: function() {
|
||||
this.$el.
|
||||
append($('<div class="bubble">').
|
||||
append(
|
||||
$('<span class="message-text">'),
|
||||
$('<span class="message-attachment">'),
|
||||
$('<span class="metadata">')
|
||||
)
|
||||
);
|
||||
this.$el.addClass(this.model.get('type'));
|
||||
this.listenTo(this.model, 'change', this.render); // auto update
|
||||
this.listenTo(this.model, 'destroy', this.remove); // auto update
|
||||
},
|
||||
|
||||
render: function() {
|
||||
this.$el.find('.message-text').text(this.model.get('body'));
|
||||
var attachments = this.model.get('attachments');
|
||||
if (attachments) {
|
||||
for (var i = 0; i < attachments.length; i++)
|
||||
this.$el.find('.message-attachment').append('<img src="' + attachments[i] + '" />');
|
||||
}
|
||||
|
||||
this.$el.find('.metadata').text(this.formatTimestamp());
|
||||
return this;
|
||||
},
|
||||
|
||||
remove: function() {
|
||||
this.$el.remove();
|
||||
},
|
||||
|
||||
formatTimestamp: function() {
|
||||
var timestamp = this.model.get('timestamp');
|
||||
var now = new Date().getTime();
|
||||
var date = new Date();
|
||||
date.setTime(timestamp*1000);
|
||||
if (now - timestamp > 60*60*24*7) {
|
||||
return date.toLocaleDateString('en-US',{month: 'short', day: 'numeric'});
|
||||
}
|
||||
if (now - timestamp > 60*60*24) {
|
||||
return date.toLocaleDateString('en-US',{weekday: 'short'});
|
||||
}
|
||||
return date.toTimeString();
|
||||
}
|
||||
});
|
||||
|
||||
})();
|
||||
|
|
@ -3,152 +3,71 @@ var Whisper = Whisper || {};
|
|||
(function () {
|
||||
'use strict';
|
||||
|
||||
var MessageView = Backbone.View.extend({
|
||||
tagName: "li",
|
||||
className: "message",
|
||||
|
||||
initialize: function() {
|
||||
this.$el.
|
||||
append($('<div class="bubble">').
|
||||
append($('<span class="message-text">')).
|
||||
append($('<span class="message-attachment">')).
|
||||
append($('<span class="metadata">'))
|
||||
);
|
||||
this.$el.addClass(this.model.get('type'));
|
||||
this.listenTo(this.model, 'change:completed', this.render); // auto update
|
||||
},
|
||||
|
||||
render: function() {
|
||||
this.$el.find('.message-text').text(this.model.get('body'));
|
||||
|
||||
var attachments = this.model.get('attachments');
|
||||
if (attachments) {
|
||||
for (var i = 0; i < attachments.length; i++)
|
||||
this.$el.find('.message-attachment').append('<img src="' + attachments[i] + '" />');
|
||||
}
|
||||
|
||||
this.$el.find('.metadata').text(this.formatTimestamp());
|
||||
return this;
|
||||
},
|
||||
|
||||
formatTimestamp: function() {
|
||||
var timestamp = this.model.get('timestamp');
|
||||
var now = new Date().getTime() / 1000;
|
||||
var date = new Date();
|
||||
date.setTime(timestamp*1000);
|
||||
if (now - timestamp > 60*60*24*7) {
|
||||
return date.toLocaleDateString({month: 'short', day: 'numeric'});
|
||||
}
|
||||
if (now - timestamp > 60*60*24) {
|
||||
return date.toLocaleDateString({weekday: 'short'});
|
||||
}
|
||||
return date.toTimeString();
|
||||
}
|
||||
});
|
||||
|
||||
var ConversationView = Backbone.View.extend({
|
||||
tagName: 'li',
|
||||
className: 'conversation',
|
||||
|
||||
initialize: function(options) {
|
||||
this.$el.addClass('closed');
|
||||
this.$header = $('<div class="header">').
|
||||
append($('<span>').text(options.name)).appendTo(this.$el);
|
||||
this.$header.prepend($('<div class="avatar">'));
|
||||
this.$collapsable = $('<div class="collapsable">').hide();
|
||||
this.$messages = $('<ul>').addClass('messages').appendTo(this.$collapsable);
|
||||
|
||||
this.$button = $('<button class="btn">').attr('id', 'button' + this.id).
|
||||
append($('<span>').text('Send'));
|
||||
this.$input = $('<input type="text">').attr('autocomplete','off');
|
||||
this.$form = $("<form class='container'>").append(this.$input, this.$button);
|
||||
this.$form.appendTo(this.$collapsable);
|
||||
this.$collapsable.appendTo(this.$el);
|
||||
|
||||
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.$el.click(function(e) {
|
||||
var $conversation = $(e.target).closest('.conversation');
|
||||
if ($conversation.hasClass('closed')) {
|
||||
$conversation.removeClass('closed');
|
||||
$conversation.find('.collapsable').slideDown(600);
|
||||
$conversation.find('input').focus();
|
||||
}
|
||||
});
|
||||
|
||||
this.$button.click(function(e) {
|
||||
var $button = $(e.target).closest('.btn');
|
||||
var $input = $button.closest('form').find('input');
|
||||
$button.attr("disabled", "disabled");
|
||||
$button.find('span').text("Sending");
|
||||
|
||||
|
||||
var message = Whisper.Messages.addOutgoingMessage(
|
||||
$input.val(), options.recipients
|
||||
);
|
||||
|
||||
textsecure.sendMessage(options.recipients, message.toProto(),
|
||||
function(result) {
|
||||
console.log(result);
|
||||
$button.removeAttr("disabled");
|
||||
$button.find('span').text("Send");
|
||||
$input.val("");
|
||||
}
|
||||
);
|
||||
});
|
||||
},
|
||||
|
||||
addMessage: function (message) {
|
||||
var view = new MessageView({ model: message });
|
||||
this.$messages.append(view.render().el);
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
Whisper.ConversationListView = new (Backbone.View.extend({ // singleton
|
||||
|
||||
tagName: 'ul',
|
||||
id: 'conversations',
|
||||
initialize: function() {
|
||||
this.views = [];
|
||||
this.messages = Whisper.Messages;
|
||||
this.listenTo(this.messages, 'change:completed', this.render);
|
||||
this.listenTo(this.messages, 'add', this.addMessage);
|
||||
this.listenTo(this.messages, 'reset', this.addAll);
|
||||
this.listenTo(this.messages, 'all', this.render);
|
||||
this.threads = Whisper.Threads;
|
||||
this.listenTo(this.threads, 'change:completed', this.render); // auto update
|
||||
this.listenTo(this.threads, 'add', this.addThread);
|
||||
this.listenTo(this.threads, 'reset', this.addAll);
|
||||
this.listenTo(this.threads, 'all', this.render);
|
||||
|
||||
// Suppresses 'add' events with {reset: true} and prevents the app view
|
||||
// from being re-rendered for every model. Only renders when the 'reset'
|
||||
// event is triggered at the end of the fetch.
|
||||
//this.messages.fetch({reset: true});
|
||||
//this.messages.threads({reset: true});
|
||||
Whisper.Messages.fetch();
|
||||
Whisper.Threads.fetch({reset: true});
|
||||
|
||||
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(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.findOrCreateForRecipients(numbers).trigger('select');
|
||||
} else {
|
||||
Whisper.notify('recipient missing or invalid');
|
||||
$('#send input[type=text]').focus();
|
||||
}
|
||||
}).bind(this));
|
||||
|
||||
},
|
||||
|
||||
addMessage: function (message) {
|
||||
// todo: find the right existing view
|
||||
var threadId = message.get('person'); // TODO: groups
|
||||
if (this.views[threadId] === undefined) {
|
||||
this.views[threadId] = new ConversationView({
|
||||
name: threadId, recipients: [threadId]
|
||||
});
|
||||
this.$el.append(this.views[threadId].render().el);
|
||||
}
|
||||
|
||||
this.views[threadId].addMessage(message);
|
||||
addThread: function(thread) {
|
||||
this.views[thread.id] = new Whisper.ConversationView({model: thread});
|
||||
this.$el.prepend(this.views[thread.id].render().el);
|
||||
},
|
||||
|
||||
// Add all items in the collection at once
|
||||
addAll: function () {
|
||||
addAll: function() {
|
||||
this.$el.html('');
|
||||
this.messages.each(this.addMessage, this);
|
||||
this.threads.each(this.addThread, this);
|
||||
},
|
||||
}))();
|
||||
})();
|
||||
|
|
|
|||
34
js/views/notifications.js
Normal file
34
js/views/notifications.js
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
var Whisper = Whisper || {};
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
// This is an ephemeral collection of global notification messages to be
|
||||
// presented in some nice way to the user. In this case they will fade in/out
|
||||
// one at a time.
|
||||
|
||||
var queue = new Backbone.Collection();
|
||||
var view = new (Backbone.View.extend({
|
||||
className: 'help',
|
||||
initialize: function() {
|
||||
this.$el.appendTo($('body'));
|
||||
this.listenToOnce(queue, 'add', this.presentNext);
|
||||
},
|
||||
presentNext: function() {
|
||||
var next = queue.shift();
|
||||
if (next) {
|
||||
this.$el.text(next.get('message')).fadeIn(this.setFadeOut.bind(this));
|
||||
} else {
|
||||
this.listenToOnce(queue, 'add', this.presentNext);
|
||||
}
|
||||
},
|
||||
setFadeOut: function() {
|
||||
setTimeout(this.fadeOut.bind(this), 1500);
|
||||
},
|
||||
fadeOut: function() {
|
||||
this.$el.fadeOut(this.presentNext.bind(this));
|
||||
},
|
||||
}))();
|
||||
|
||||
Whisper.notify = function(str) { queue.add({message: str}); }
|
||||
|
||||
})();
|
||||
28
popup.html
28
popup.html
|
|
@ -24,29 +24,25 @@
|
|||
<body data-name="curve25519" data-tools="pnacl" data-configs="Debug Release" data-path="pnacl/{config}">
|
||||
<header class="clearfix">
|
||||
<div class='container'>
|
||||
<button class='btn selected' id='inbox_link'><span>Inbox</span></button>
|
||||
<button class='btn' id='send_link'><span>Compose</span></button>
|
||||
<button class='btn btn-square' id='send_link'>+</button>
|
||||
<span class='help' id='new-chat-help'>new message</span>
|
||||
</div>
|
||||
</header>
|
||||
<div class='container'>
|
||||
<div id="listener"></div>
|
||||
<div id="log"></div>
|
||||
<div id="send" style="display:none;">
|
||||
<form class="compose" action="#">
|
||||
<input id="popup_send_numbers" type='text' placeholder="To">
|
||||
<div class='contacts'>
|
||||
<div id='me' class='contact'>
|
||||
<span class='pic'></span>
|
||||
<span class='name'>Me</span>
|
||||
<span class='number my-number'></span>
|
||||
<div id="inbox">
|
||||
<form id="send" style="display:none;">
|
||||
<div class='closed conversation'>
|
||||
<div class='header'>
|
||||
<span class='image'></span>
|
||||
<input id="send_numbers" type='text' placeholder="+xxxxxxxxxx">
|
||||
<input type=submit id="compose-create" class='btn btn-square' value='>'>
|
||||
<button id="compose-cancel" class='btn btn-square'>×</button>
|
||||
</div>
|
||||
</div>
|
||||
<textarea id="popup_send_text"></textarea>
|
||||
<button id="popup_send_button">Send</button>
|
||||
</form>
|
||||
</div>
|
||||
<div id="inbox">
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="js/webcrypto.js"></script>
|
||||
<script type="text/javascript" src="js/crypto.js"></script>
|
||||
|
|
@ -56,6 +52,10 @@
|
|||
<script type="text/javascript" src="js-deps/backbone.js"></script>
|
||||
<script type="text/javascript" src="js-deps/backbone.localStorage.js"></script>
|
||||
<script type="text/javascript" src="js/models/messages.js"></script>
|
||||
<script type="text/javascript" src="js/models/threads.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/messages.js"></script>
|
||||
<script type="text/javascript" src="js-deps/core.js"></script>
|
||||
<script type="text/javascript" src="js-deps/enc-base64.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue