message_view.js: eslint fixes and a bit of fixup

pull/1/head
Scott Nonnenberg 8 years ago
parent 09c3fbc5e2
commit 2def6afe45
No known key found for this signature in database
GPG Key ID: 5F82280C35134661

@ -110,6 +110,7 @@ module.exports = function(grunt) {
'!js/signal_protocol_store.js', '!js/signal_protocol_store.js',
'!js/views/conversation_search_view.js', '!js/views/conversation_search_view.js',
'!js/views/debug_log_view.js', '!js/views/debug_log_view.js',
'!js/views/message_view.js',
'!js/WebAudioRecorderMp3.js', '!js/WebAudioRecorderMp3.js',
'_locales/**/*' '_locales/**/*'
], ],

@ -1,436 +1,436 @@
/* eslint-disable */
/* global Whisper: false */ /* global Whisper: false */
/* global i18n: false */
/* global textsecure: false */
/* global _: false */
/* global emoji_util: false */
/* global Mustache: false */
// eslint-disable-next-line func-names
(function () { (function () {
'use strict'; 'use strict';
window.Whisper = window.Whisper || {};
const { HTML } = window.Signal;
const { HTML } = window.Signal; const { loadAttachmentData } = window.Signal.Migrations;
const { Attachment } = window.Signal.Types;
const { loadAttachmentData } = window.Signal.Migrations; window.Whisper = window.Whisper || {};
var URL_REGEX = /(^|[\s\n]|<br\/?>)((?:https?|ftp):\/\/[\-A-Z0-9\u00A0-\uD7FF\uE000-\uFDCF\uFDF0-\uFFFD+\u0026\u2019@#\/%?=()~_|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_|])/gi; const ErrorIconView = Whisper.View.extend({
templateName: 'error-icon',
var ErrorIconView = Whisper.View.extend({ className: 'error-icon-container',
templateName: 'error-icon', initialize() {
className: 'error-icon-container', if (this.model.name === 'UnregisteredUserError') {
initialize: function() { this.$el.addClass('unregistered-user-error');
if (this.model.name === 'UnregisteredUserError') { }
this.$el.addClass('unregistered-user-error'); },
} });
} const NetworkErrorView = Whisper.View.extend({
}); tagName: 'span',
var NetworkErrorView = Whisper.View.extend({ className: 'hasRetry',
tagName: 'span', templateName: 'hasRetry',
className: 'hasRetry', render_attributes() {
templateName: 'hasRetry', let messageNotSent;
render_attributes: function() {
var messageNotSent; if (!this.model.someRecipientsFailed()) {
messageNotSent = i18n('messageNotSent');
if (!this.model.someRecipientsFailed()) { }
messageNotSent = i18n('messageNotSent');
} return {
messageNotSent,
return { resend: i18n('resend'),
messageNotSent: messageNotSent, };
resend: i18n('resend') },
}; });
} const SomeFailedView = Whisper.View.extend({
}); tagName: 'span',
var SomeFailedView = Whisper.View.extend({ className: 'some-failed',
tagName: 'span', templateName: 'some-failed',
className: 'some-failed', render_attributes: {
templateName: 'some-failed', someFailed: i18n('someRecipientsFailed'),
render_attributes: { },
someFailed: i18n('someRecipientsFailed') });
} const TimerView = Whisper.View.extend({
}); templateName: 'hourglass',
var TimerView = Whisper.View.extend({ initialize() {
templateName: 'hourglass', this.listenTo(this.model, 'unload', this.remove);
initialize: function() { },
this.listenTo(this.model, 'unload', this.remove); update() {
}, if (this.timeout) {
update: function() { clearTimeout(this.timeout);
if (this.timeout) { this.timeout = null;
clearTimeout(this.timeout); }
this.timeout = null; if (this.model.isExpired()) {
} return this;
if (this.model.isExpired()) { }
return this; if (this.model.isExpiring()) {
} this.render();
if (this.model.isExpiring()) { const totalTime = this.model.get('expireTimer') * 1000;
this.render(); const remainingTime = this.model.msTilExpire();
var totalTime = this.model.get('expireTimer') * 1000; const elapsed = (totalTime - remainingTime) / totalTime;
var remainingTime = this.model.msTilExpire(); this.$('.sand').css('transform', `translateY(${elapsed * 100}%)`);
var elapsed = (totalTime - remainingTime) / totalTime; this.$el.css('display', 'inline-block');
this.$('.sand').css('transform', 'translateY(' + elapsed*100 + '%)'); this.timeout = setTimeout(this.update.bind(this), Math.max(totalTime / 100, 500));
this.$el.css('display', 'inline-block'); }
this.timeout = setTimeout(this.update.bind(this), Math.max(totalTime / 100, 500)); return this;
} },
return this; });
}
}); Whisper.ExpirationTimerUpdateView = Whisper.View.extend({
tagName: 'li',
Whisper.ExpirationTimerUpdateView = Whisper.View.extend({ className: 'expirationTimerUpdate advisory',
tagName: 'li', templateName: 'expirationTimerUpdate',
className: 'expirationTimerUpdate advisory', id() {
templateName: 'expirationTimerUpdate', return this.model.id;
id: function() { },
return this.model.id; initialize() {
}, this.conversation = this.model.getExpirationTimerUpdateSource();
initialize: function() { this.listenTo(this.conversation, 'change', this.render);
this.conversation = this.model.getExpirationTimerUpdateSource(); this.listenTo(this.model, 'unload', this.remove);
this.listenTo(this.conversation, 'change', this.render); },
this.listenTo(this.model, 'unload', this.remove); render_attributes() {
}, const seconds = this.model.get('expirationTimerUpdate').expireTimer;
render_attributes: function() { let timerMessage;
var seconds = this.model.get('expirationTimerUpdate').expireTimer;
var timerMessage; const timerUpdate = this.model.get('expirationTimerUpdate');
const prettySeconds = Whisper.ExpirationTimerOptions.getName(seconds);
var timerUpdate = this.model.get('expirationTimerUpdate');
var prettySeconds = Whisper.ExpirationTimerOptions.getName(seconds); if (timerUpdate && timerUpdate.fromSync) {
timerMessage = i18n('timerSetOnSync', prettySeconds);
if (timerUpdate && timerUpdate.fromSync) { } else if (this.conversation.id === textsecure.storage.user.getNumber()) {
timerMessage = i18n('timerSetOnSync', prettySeconds); timerMessage = i18n('youChangedTheTimer', prettySeconds);
} else if (this.conversation.id === textsecure.storage.user.getNumber()) { } else {
timerMessage = i18n('youChangedTheTimer', prettySeconds); timerMessage = i18n('theyChangedTheTimer', [
} else { this.conversation.getTitle(),
timerMessage = i18n('theyChangedTheTimer', [ prettySeconds,
this.conversation.getTitle(), ]);
prettySeconds, }
]); return { content: timerMessage };
} },
return { content: timerMessage }; });
}
}); Whisper.KeyChangeView = Whisper.View.extend({
tagName: 'li',
Whisper.KeyChangeView = Whisper.View.extend({ className: 'keychange advisory',
tagName: 'li', templateName: 'keychange',
className: 'keychange advisory', id() {
templateName: 'keychange', return this.model.id;
id: function() { },
return this.model.id; initialize() {
}, this.conversation = this.model.getModelForKeyChange();
initialize: function() { this.listenTo(this.conversation, 'change', this.render);
this.conversation = this.model.getModelForKeyChange(); this.listenTo(this.model, 'unload', this.remove);
this.listenTo(this.conversation, 'change', this.render); },
this.listenTo(this.model, 'unload', this.remove); events: {
}, 'click .content': 'showIdentity',
events: { },
'click .content': 'showIdentity' render_attributes() {
}, return {
render_attributes: function() { content: this.model.getNotificationText(),
return { };
content: this.model.getNotificationText() },
}; showIdentity() {
}, this.$el.trigger('show-identity', this.conversation);
showIdentity: function() { },
this.$el.trigger('show-identity', this.conversation); });
Whisper.VerifiedChangeView = Whisper.View.extend({
tagName: 'li',
className: 'verified-change advisory',
templateName: 'verified-change',
id() {
return this.model.id;
},
initialize() {
this.conversation = this.model.getModelForVerifiedChange();
this.listenTo(this.conversation, 'change', this.render);
this.listenTo(this.model, 'unload', this.remove);
},
events: {
'click .content': 'showIdentity',
},
render_attributes() {
let key;
if (this.model.get('verified')) {
if (this.model.get('local')) {
key = 'youMarkedAsVerified';
} else {
key = 'youMarkedAsVerifiedOtherDevice';
} }
}); return {
icon: 'verified',
Whisper.VerifiedChangeView = Whisper.View.extend({ content: i18n(key, this.conversation.getTitle()),
tagName: 'li', };
className: 'verified-change advisory', }
templateName: 'verified-change',
id: function() { if (this.model.get('local')) {
return this.model.id; key = 'youMarkedAsNotVerified';
}, } else {
initialize: function() { key = 'youMarkedAsNotVerifiedOtherDevice';
this.conversation = this.model.getModelForVerifiedChange(); }
this.listenTo(this.conversation, 'change', this.render);
this.listenTo(this.model, 'unload', this.remove); return {
}, icon: 'shield',
events: { content: i18n(key, this.conversation.getTitle()),
'click .content': 'showIdentity' };
}, },
render_attributes: function() { showIdentity() {
var key; this.$el.trigger('show-identity', this.conversation);
},
if (this.model.get('verified')) { });
if (this.model.get('local')) {
key = 'youMarkedAsVerified'; Whisper.MessageView = Whisper.View.extend({
} else { tagName: 'li',
key = 'youMarkedAsVerifiedOtherDevice'; templateName: 'message',
} id() {
return { return this.model.id;
icon: 'verified', },
content: i18n(key, this.conversation.getTitle()) initialize() {
}; // loadedAttachmentViews :: Promise (Array AttachmentView) | null
} this.loadedAttachmentViews = null;
if (this.model.get('local')) { this.listenTo(this.model, 'change:errors', this.onErrorsChanged);
key = 'youMarkedAsNotVerified'; this.listenTo(this.model, 'change:body', this.render);
} else { this.listenTo(this.model, 'change:delivered', this.renderDelivered);
key = 'youMarkedAsNotVerifiedOtherDevice'; this.listenTo(this.model, 'change:read_by', this.renderRead);
} this.listenTo(this.model, 'change:expirationStartTimestamp', this.renderExpiring);
this.listenTo(this.model, 'change', this.renderSent);
return { this.listenTo(this.model, 'change:flags change:group_update', this.renderControl);
icon: 'shield', this.listenTo(this.model, 'destroy', this.onDestroy);
content: i18n(key, this.conversation.getTitle()) this.listenTo(this.model, 'unload', this.onUnload);
}; this.listenTo(this.model, 'expired', this.onExpired);
}, this.listenTo(this.model, 'pending', this.renderPending);
showIdentity: function() { this.listenTo(this.model, 'done', this.renderDone);
this.$el.trigger('show-identity', this.conversation); this.timeStampView = new Whisper.ExtendedTimestampView();
this.contact = this.model.isIncoming() ? this.model.getContact() : null;
if (this.contact) {
this.listenTo(this.contact, 'change:color', this.updateColor);
}
},
events: {
'click .retry': 'retryMessage',
'click .error-icon': 'select',
'click .timestamp': 'select',
'click .status': 'select',
'click .some-failed': 'select',
'click .error-message': 'select',
},
retryMessage() {
const retrys = _.filter(
this.model.get('errors'),
this.model.isReplayableError.bind(this.model)
);
_.map(retrys, 'number').forEach((number) => {
this.model.resend(number);
});
},
onExpired() {
this.$el.addClass('expired');
this.$el.find('.bubble').one('webkitAnimationEnd animationend', (e) => {
if (e.target === this.$('.bubble')[0]) {
this.remove();
} }
}); });
Whisper.MessageView = Whisper.View.extend({ // Failsafe: if in the background, animation events don't fire
tagName: 'li', setTimeout(this.remove.bind(this), 1000);
templateName: 'message', },
id: function() {
return this.model.id;
},
initialize: function() {
// loadedAttachmentViews :: Promise (Array AttachmentView) | null
this.loadedAttachmentViews = null;
this.listenTo(this.model, 'change:errors', this.onErrorsChanged);
this.listenTo(this.model, 'change:body', this.render);
this.listenTo(this.model, 'change:delivered', this.renderDelivered);
this.listenTo(this.model, 'change:read_by', this.renderRead);
this.listenTo(this.model, 'change:expirationStartTimestamp', this.renderExpiring);
this.listenTo(this.model, 'change', this.renderSent);
this.listenTo(this.model, 'change:flags change:group_update', this.renderControl);
this.listenTo(this.model, 'destroy', this.onDestroy);
this.listenTo(this.model, 'unload', this.onUnload);
this.listenTo(this.model, 'expired', this.onExpired);
this.listenTo(this.model, 'pending', this.renderPending);
this.listenTo(this.model, 'done', this.renderDone);
this.timeStampView = new Whisper.ExtendedTimestampView();
this.contact = this.model.isIncoming() ? this.model.getContact() : null;
if (this.contact) {
this.listenTo(this.contact, 'change:color', this.updateColor);
}
},
events: {
'click .retry': 'retryMessage',
'click .error-icon': 'select',
'click .timestamp': 'select',
'click .status': 'select',
'click .some-failed': 'select',
'click .error-message': 'select'
},
retryMessage: function() {
var retrys = _.filter(this.model.get('errors'),
this.model.isReplayableError.bind(this.model));
_.map(retrys, 'number').forEach(function(number) {
this.model.resend(number);
}.bind(this));
},
onExpired: function() {
this.$el.addClass('expired');
this.$el.find('.bubble').one('webkitAnimationEnd animationend', function(e) {
if (e.target === this.$('.bubble')[0]) {
this.remove();
}
}.bind(this));
// Failsafe: if in the background, animation events don't fire
setTimeout(this.remove.bind(this), 1000);
},
/* jshint ignore:start */
onUnload: function() {
if (this.avatarView) {
this.avatarView.remove();
}
if (this.errorIconView) {
this.errorIconView.remove();
}
if (this.networkErrorView) {
this.networkErrorView.remove();
}
if (this.someFailedView) {
this.someFailedView.remove();
}
if (this.timeStampView) {
this.timeStampView.remove();
}
// NOTE: We have to do this in the background (`then` instead of `await`)
// as our tests rely on `onUnload` synchronously removing the view from
// the DOM.
// eslint-disable-next-line more/no-then
this.loadAttachmentViews()
.then(views => views.forEach(view => view.unload()));
// No need to handle this one, since it listens to 'unload' itself:
// this.timerView
this.remove();
},
/* jshint ignore:end */
onDestroy: function() {
if (this.$el.hasClass('expired')) {
return;
}
this.onUnload();
},
select: function(e) {
this.$el.trigger('select', {message: this.model});
e.stopPropagation();
},
className: function() {
return ['entry', this.model.get('type')].join(' ');
},
renderPending: function() {
this.$el.addClass('pending');
},
renderDone: function() {
this.$el.removeClass('pending');
},
renderSent: function() {
if (this.model.isOutgoing()) {
this.$el.toggleClass('sent', !!this.model.get('sent'));
}
},
renderDelivered: function() {
if (this.model.get('delivered')) { this.$el.addClass('delivered'); }
},
renderRead: function() {
if (!_.isEmpty(this.model.get('read_by'))) {
this.$el.addClass('read');
}
},
onErrorsChanged: function() {
if (this.model.isIncoming()) {
this.render();
} else {
this.renderErrors();
}
},
renderErrors: function() {
var errors = this.model.get('errors');
this.$('.error-icon-container').remove();
if (this.errorIconView) {
this.errorIconView.remove();
this.errorIconView = null;
}
if (_.size(errors) > 0) {
if (this.model.isIncoming()) {
this.$('.content').text(this.model.getDescription()).addClass('error-message');
}
this.errorIconView = new ErrorIconView({ model: errors[0] });
this.errorIconView.render().$el.appendTo(this.$('.bubble'));
}
this.$('.meta .hasRetry').remove();
if (this.networkErrorView) {
this.networkErrorView.remove();
this.networkErrorView = null;
}
if (this.model.hasNetworkError()) {
this.networkErrorView = new NetworkErrorView({model: this.model});
this.$('.meta').prepend(this.networkErrorView.render().el);
}
this.$('.meta .some-failed').remove();
if (this.someFailedView) {
this.someFailedView.remove();
this.someFailedView = null;
}
if (this.model.someRecipientsFailed()) {
this.someFailedView = new SomeFailedView();
this.$('.meta').prepend(this.someFailedView.render().el);
}
},
renderControl: function() {
if (this.model.isEndSession() || this.model.isGroupUpdate()) {
this.$el.addClass('control');
var content = this.$('.content');
content.text(this.model.getDescription());
emoji_util.parse(content);
} else {
this.$el.removeClass('control');
}
},
renderExpiring: function() {
if (!this.timerView) {
this.timerView = new TimerView({ model: this.model });
}
this.timerView.setElement(this.$('.timer'));
this.timerView.update();
},
isImageWithoutCaption: function() {
var attachments = this.model.get('attachments');
var body = this.model.get('body');
if (!attachments || attachments.length === 0) {
return false;
}
if (body && body.trim()) {
return false;
}
var first = attachments[0];
if (first.contentType.startsWith('image/') && first.contentType !== 'image/tiff') {
return true;
}
return false;
},
render: function() {
var contact = this.model.isIncoming() ? this.model.getContact() : null;
this.$el.html(
Mustache.render(_.result(this, 'template', ''), {
message: this.model.get('body'),
timestamp: this.model.get('sent_at'),
sender: (contact && contact.getTitle()) || '',
avatar: (contact && contact.getAvatar()),
profileName: (contact && contact.getProfileName()),
innerBubbleClasses: this.isImageWithoutCaption() ? '' : 'with-tail',
}, this.render_partials())
);
this.timeStampView.setElement(this.$('.timestamp'));
this.timeStampView.update();
this.renderControl();
var body = this.$('.body');
emoji_util.parse(body);
if (body.length > 0) {
const escapedBody = body.html();
body.html(HTML.render(escapedBody));
}
this.renderSent();
this.renderDelivered();
this.renderRead();
this.renderErrors();
this.renderExpiring();
// NOTE: We have to do this in the background (`then` instead of `await`)
// as our code / Backbone seems to rely on `render` synchronously returning
// `this` instead of `Promise MessageView` (this):
// eslint-disable-next-line more/no-then
this.loadAttachmentViews().then(views => this.renderAttachmentViews(views));
return this;
},
updateColor: function() {
var bubble = this.$('.bubble');
// this.contact is known to be non-null if we're registered for color changes
var color = this.contact.getColor();
if (color) {
bubble.removeClass(Whisper.Conversation.COLORS);
bubble.addClass(color);
}
this.avatarView = new (Whisper.View.extend({
templateName: 'avatar',
render_attributes: { avatar: this.contact.getAvatar() }
}))();
this.$('.avatar').replaceWith(this.avatarView.render().$('.avatar'));
},
/* eslint-enable */
/* jshint ignore:start */ /* jshint ignore:start */
onUnload() {
if (this.avatarView) {
this.avatarView.remove();
}
if (this.errorIconView) {
this.errorIconView.remove();
}
if (this.networkErrorView) {
this.networkErrorView.remove();
}
if (this.someFailedView) {
this.someFailedView.remove();
}
if (this.timeStampView) {
this.timeStampView.remove();
}
// NOTE: We have to do this in the background (`then` instead of `await`)
// as our tests rely on `onUnload` synchronously removing the view from
// the DOM.
// eslint-disable-next-line more/no-then
this.loadAttachmentViews()
.then(views => views.forEach(view => view.unload()));
// No need to handle this one, since it listens to 'unload' itself:
// this.timerView
this.remove();
},
/* jshint ignore:end */
onDestroy() {
if (this.$el.hasClass('expired')) {
return;
}
this.onUnload();
},
select(e) {
this.$el.trigger('select', { message: this.model });
e.stopPropagation();
},
className() {
return ['entry', this.model.get('type')].join(' ');
},
renderPending() {
this.$el.addClass('pending');
},
renderDone() {
this.$el.removeClass('pending');
},
renderSent() {
if (this.model.isOutgoing()) {
this.$el.toggleClass('sent', !!this.model.get('sent'));
}
},
renderDelivered() {
if (this.model.get('delivered')) { this.$el.addClass('delivered'); }
},
renderRead() {
if (!_.isEmpty(this.model.get('read_by'))) {
this.$el.addClass('read');
}
},
onErrorsChanged() {
if (this.model.isIncoming()) {
this.render();
} else {
this.renderErrors();
}
},
renderErrors() {
const errors = this.model.get('errors');
this.$('.error-icon-container').remove();
if (this.errorIconView) {
this.errorIconView.remove();
this.errorIconView = null;
}
if (_.size(errors) > 0) {
if (this.model.isIncoming()) {
this.$('.content').text(this.model.getDescription()).addClass('error-message');
}
this.errorIconView = new ErrorIconView({ model: errors[0] });
this.errorIconView.render().$el.appendTo(this.$('.bubble'));
}
this.$('.meta .hasRetry').remove();
if (this.networkErrorView) {
this.networkErrorView.remove();
this.networkErrorView = null;
}
if (this.model.hasNetworkError()) {
this.networkErrorView = new NetworkErrorView({ model: this.model });
this.$('.meta').prepend(this.networkErrorView.render().el);
}
this.$('.meta .some-failed').remove();
if (this.someFailedView) {
this.someFailedView.remove();
this.someFailedView = null;
}
if (this.model.someRecipientsFailed()) {
this.someFailedView = new SomeFailedView();
this.$('.meta').prepend(this.someFailedView.render().el);
}
},
renderControl() {
if (this.model.isEndSession() || this.model.isGroupUpdate()) {
this.$el.addClass('control');
const content = this.$('.content');
content.text(this.model.getDescription());
emoji_util.parse(content);
} else {
this.$el.removeClass('control');
}
},
renderExpiring() {
if (!this.timerView) {
this.timerView = new TimerView({ model: this.model });
}
this.timerView.setElement(this.$('.timer'));
this.timerView.update();
},
isImageWithoutCaption() {
const attachments = this.model.get('attachments');
const body = this.model.get('body');
if (!attachments || attachments.length === 0) {
return false;
}
if (body && body.trim()) {
return false;
}
const first = attachments[0];
if (first.contentType.startsWith('image/') && first.contentType !== 'image/tiff') {
return true;
}
return false;
},
render() {
const contact = this.model.isIncoming() ? this.model.getContact() : null;
this.$el.html(Mustache.render(_.result(this, 'template', ''), {
message: this.model.get('body'),
timestamp: this.model.get('sent_at'),
sender: (contact && contact.getTitle()) || '',
avatar: (contact && contact.getAvatar()),
profileName: (contact && contact.getProfileName()),
innerBubbleClasses: this.isImageWithoutCaption() ? '' : 'with-tail',
}, this.render_partials()));
this.timeStampView.setElement(this.$('.timestamp'));
this.timeStampView.update();
this.renderControl();
const body = this.$('.body');
emoji_util.parse(body);
if (body.length > 0) {
const escapedBody = body.html();
body.html(HTML.render(escapedBody));
}
this.renderSent();
this.renderDelivered();
this.renderRead();
this.renderErrors();
this.renderExpiring();
// NOTE: We have to do this in the background (`then` instead of `await`)
// as our code / Backbone seems to rely on `render` synchronously returning
// `this` instead of `Promise MessageView` (this):
// eslint-disable-next-line more/no-then
this.loadAttachmentViews().then(views => this.renderAttachmentViews(views));
return this;
},
updateColor() {
const bubble = this.$('.bubble');
// this.contact is known to be non-null if we're registered for color changes
const color = this.contact.getColor();
if (color) {
bubble.removeClass(Whisper.Conversation.COLORS);
bubble.addClass(color);
}
this.avatarView = new (Whisper.View.extend({
templateName: 'avatar',
render_attributes: { avatar: this.contact.getAvatar() },
}))();
this.$('.avatar').replaceWith(this.avatarView.render().$('.avatar'));
},
loadAttachmentViews() { loadAttachmentViews() {
if (this.loadedAttachmentViews !== null) { if (this.loadedAttachmentViews !== null) {
return this.loadedAttachmentViews; return this.loadedAttachmentViews;
@ -483,7 +483,5 @@
view.setElement(view.el); view.setElement(view.el);
this.trigger('afterChangeHeight'); this.trigger('afterChangeHeight');
}, },
/* jshint ignore:end */ });
/* eslint-disable */ }());
});
})();

Loading…
Cancel
Save