65 lines
1.8 KiB
JavaScript
65 lines
1.8 KiB
JavaScript
|
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();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
})();
|