Add message detail view

js/views/conversation_view.js

@@ -53,7 +53,19 @@
             'click .leave-group': 'leaveGroup',
             'click .new-group-update': 'newGroupUpdate',
             'click .hamburger': 'toggleMenu',
-            'click' : 'closeMenu'
+            'click' : 'closeMenu',
+            'select .entry': 'messageDetail'
+        },
+
+        messageDetail: function(e, data) {
+            var view = new Whisper.MessageDetailView({ model: data.message, conversation: this.model });
+            view.$el.insertAfter(this.$el);
+            this.$el.hide();
+            view.render();
+            this.listenTo(view, 'back', function() {
+                view.remove();
+                this.$el.show();
+            }.bind(this));
         },
 
         closeMenu: function(e) {

js/views/message_detail_view.js

@@ -0,0 +1,49 @@
+/* vim: ts=4:sw=4:expandtab
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+(function () {
+    'use strict';
+
+    window.Whisper = window.Whisper || {};
+
+    Whisper.MessageDetailView = Backbone.View.extend({
+        className: 'message-detail',
+        initialize: function(options) {
+            this.template = $('#message-detail').html();
+            Mustache.parse(this.template);
+            this.view = new Whisper.MessageView({model: this.model});
+            this.conversation = options.conversation;
+        },
+        events: {
+            'click .back': 'goBack'
+        },
+        goBack: function() {
+            this.trigger('back');
+        },
+        render: function() {
+            this.$el.html(Mustache.render(this.template, {
+                sent_at: moment(this.model.get('sent_at')).toString(),
+                received_at: moment(this.model.get('received_at')).toString(),
+                tofrom: this.model.isIncoming() ? 'From' : 'To',
+                contacts: {
+                    name     : this.conversation.getTitle(),
+                    avatar   : this.conversation.get('avatar')
+                }
+            }));
+            this.view.render().$el.prependTo(this.$el.find('.message-container'));
+        }
+    });
+
+})();

js/views/message_view.js

@@ -91,9 +91,13 @@
 
             this.listenTo(this.model, 'change',  this.render); // auto update
             this.listenTo(this.model, 'destroy', this.remove); // auto update
-
         },
-
+        events: {
+            'click .timestamp': 'select'
+        },
+        select: function() {
+            this.$el.trigger('select', {message: this.model});
+        },
         render: function() {
             this.view.render();
             return this;