set up a new view for displaying the network status
// FREEBIE
This commit is contained in:
parent
e4a21d1a53
commit
ed4991974b
13 changed files with 326 additions and 76 deletions
|
@ -232,6 +232,10 @@
|
|||
if (navigator.onLine) {
|
||||
console.log('retrying in 1 minute');
|
||||
setTimeout(init, 60000);
|
||||
|
||||
if (owsDesktopApp.inboxView) {
|
||||
owsDesktopApp.inboxView.networkStatusView.setSocketReconnectInterval(60000);
|
||||
}
|
||||
} else {
|
||||
console.log('offline');
|
||||
messageReceiver.close();
|
||||
|
|
|
@ -32,12 +32,18 @@
|
|||
return { unreadCount : 0 };
|
||||
},
|
||||
|
||||
handleMessageError: function(message, errors) {
|
||||
this.trigger('messageError', message, errors);
|
||||
},
|
||||
|
||||
initialize: function() {
|
||||
this.contactCollection = new Backbone.Collection();
|
||||
this.messageCollection = new Whisper.MessageCollection([], {
|
||||
conversation: this
|
||||
});
|
||||
|
||||
this.messageCollection.on('change:errors', this.handleMessageError, this);
|
||||
|
||||
this.on('change:avatar', this.updateAvatarUrl);
|
||||
this.on('destroy', this.revokeAvatarUrl);
|
||||
this.on('read', this.onReadMessage);
|
||||
|
|
|
@ -6,37 +6,6 @@
|
|||
|
||||
window.Whisper = window.Whisper || {};
|
||||
|
||||
var SocketView = Whisper.View.extend({
|
||||
className: 'status',
|
||||
initialize: function() {
|
||||
setInterval(this.updateStatus.bind(this), 5000);
|
||||
},
|
||||
updateStatus: function() {
|
||||
var className, message = '';
|
||||
if (typeof getSocketStatus === 'function') {
|
||||
switch(getSocketStatus()) {
|
||||
case WebSocket.CONNECTING:
|
||||
className = 'connecting';
|
||||
break;
|
||||
case WebSocket.OPEN:
|
||||
className = 'open';
|
||||
break;
|
||||
case WebSocket.CLOSING:
|
||||
className = 'closing';
|
||||
break;
|
||||
case WebSocket.CLOSED:
|
||||
className = 'closed';
|
||||
message = i18n('disconnected');
|
||||
break;
|
||||
}
|
||||
if (!this.$el.hasClass(className)) {
|
||||
this.$el.attr('class', className);
|
||||
this.$el.text(message);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Whisper.ConversationStack = Whisper.View.extend({
|
||||
className: 'conversation-stack',
|
||||
open: function(conversation) {
|
||||
|
@ -112,6 +81,11 @@
|
|||
});
|
||||
|
||||
var inboxCollection = getInboxCollection();
|
||||
|
||||
inboxCollection.on('messageError', function() {
|
||||
this.networkStatusView.render();
|
||||
});
|
||||
|
||||
this.inboxListView = new Whisper.ConversationListView({
|
||||
el : this.$('.inbox'),
|
||||
collection : inboxCollection
|
||||
|
@ -139,7 +113,8 @@
|
|||
this.listenTo(this.searchView, 'open',
|
||||
this.openConversation.bind(this, null));
|
||||
|
||||
new SocketView().render().$el.appendTo(this.$('.socket-status'));
|
||||
this.networkStatusView = new Whisper.NetworkStatusView();
|
||||
this.$el.find('.network-status-container').append(this.networkStatusView.render().el);
|
||||
|
||||
extension.windows.onClosed(function() {
|
||||
this.inboxListView.stopListening();
|
||||
|
|
92
js/views/network_status_view.js
Normal file
92
js/views/network_status_view.js
Normal file
|
@ -0,0 +1,92 @@
|
|||
(function () {
|
||||
'use strict';
|
||||
|
||||
window.Whisper = window.Whisper || {};
|
||||
|
||||
Whisper.NetworkStatusView = Whisper.View.extend({
|
||||
className: 'network-status',
|
||||
initialize: function() {
|
||||
this.$el.hide();
|
||||
|
||||
var renderIntervalHandle = setInterval(this.render.bind(this), 5000);
|
||||
extension.windows.onClosed(function () { clearInterval(renderIntervalHandle); });
|
||||
|
||||
setTimeout(this.finishConnectingGracePeriod.bind(this), 5000);
|
||||
|
||||
this.withinConnectingGracePeriod = true;
|
||||
this.setSocketReconnectInterval(null);
|
||||
|
||||
window.addEventListener('online', this.render.bind(this));
|
||||
window.addEventListener('offline', this.render.bind(this));
|
||||
},
|
||||
finishConnectingGracePeriod: function() {
|
||||
this.withinConnectingGracePeriod = false;
|
||||
},
|
||||
setSocketReconnectInterval: function(millis) {
|
||||
this.socketReconnectWaitDuration = moment.duration(millis);
|
||||
},
|
||||
navigatorOnLine: function() { return navigator.onLine; },
|
||||
getSocketStatus: function() { return window.getSocketStatus(); },
|
||||
getNetworkStatus: function() {
|
||||
|
||||
var message = '';
|
||||
var instructions = '';
|
||||
var hasInterruption = false;
|
||||
|
||||
var socketStatus = this.getSocketStatus();
|
||||
switch(socketStatus) {
|
||||
case WebSocket.CONNECTING:
|
||||
message = i18n('connecting');
|
||||
this.setSocketReconnectInterval(null);
|
||||
break;
|
||||
case WebSocket.OPEN:
|
||||
this.setSocketReconnectInterval(null);
|
||||
break;
|
||||
case WebSocket.CLOSING:
|
||||
message = i18n('disconnected');
|
||||
instructions = i18n('checkNetworkConnection');
|
||||
hasInterruption = true;
|
||||
break;
|
||||
case WebSocket.CLOSED:
|
||||
message = i18n('disconnected');
|
||||
instructions = i18n('checkNetworkConnection');
|
||||
hasInterruption = true;
|
||||
break;
|
||||
}
|
||||
|
||||
if (socketStatus == WebSocket.CONNECTING && !this.withinConnectingGracePeriod) {
|
||||
hasInterruption = true;
|
||||
}
|
||||
if (this.socketReconnectWaitDuration.asSeconds() > 0) {
|
||||
instructions = i18n('attemptingReconnection', [this.socketReconnectWaitDuration.asSeconds()]);
|
||||
}
|
||||
if (!this.navigatorOnLine()) {
|
||||
hasInterruption = true;
|
||||
message = i18n('offline');
|
||||
instructions = i18n('checkNetworkConnection');
|
||||
}
|
||||
|
||||
return {
|
||||
message: message,
|
||||
instructions: instructions,
|
||||
hasInterruption: hasInterruption
|
||||
};
|
||||
},
|
||||
render: function() {
|
||||
var status = this.getNetworkStatus();
|
||||
|
||||
if (status.hasInterruption) {
|
||||
this.$el.slideDown();
|
||||
}
|
||||
else {
|
||||
this.$el.hide();
|
||||
}
|
||||
var template = Whisper.View.Templates['networkStatus'];
|
||||
this.$el.html(Mustache.render(template, status, Whisper.View.Templates));
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
})();
|
Loading…
Add table
Add a link
Reference in a new issue