Open images in a lightbox

Adds file-write permission for saving to disk from lightbox.

Fixes #810

// FREEBIE

js/views/attachment_view.js

@@ -31,14 +31,10 @@
       },
       events: {
           'load': 'update',
-          'click': 'open'
       },
       update: function() {
         this.trigger('update');
       },
-      open: function () {
-        window.open(this.dataUrl, '_blank');
-      },
       render: function() {
         this.$el.attr('src', this.dataUrl);
         return this;
@@ -72,16 +68,42 @@
   Whisper.AttachmentView = Backbone.View.extend({
     tagName: 'span',
     className: 'attachment',
+    initialize: function() {
+        this.blob = new Blob([this.model.data], {type: this.model.contentType});
+
+        var parts = this.model.contentType.split('/');
+        this.contentType = parts[0];
+        this.fileType = parts[1];
+    },
+    events: {
+        'click': 'onclick'
+    },
+    onclick: function(e) {
+        if (this.contentType === 'image') {
+            var view = new Whisper.LightboxView({
+                model: {
+                    url      : this.objectUrl,
+                    blob     : this.blob,
+                    fileType : this.fileType
+                }
+            });
+            view.render();
+            view.$el.appendTo(this.el);
+            view.$el.trigger('show');
+        }
+    },
     render: function() {
         var View;
-        switch(this.model.contentType.split('/')[0]) {
+        switch(this.contentType) {
             case 'image': View = ImageView; break;
             case 'audio': View = AudioView; break;
             case 'video': View = VideoView; break;
             default     : View = FileView; break;
         }
-        var blob = new Blob([this.model.data], {type: this.model.contentType});
-        var view = new View(window.URL.createObjectURL(blob), this.model.contentType);
+        if (!this.objectUrl) {
+            this.objectUrl = window.URL.createObjectURL(this.blob);
+        }
+        var view = new View(this.objectUrl, this.model.contentType);
         view.$el.appendTo(this.$el);
         view.on('update', this.trigger.bind(this, 'update'));
         view.render();
@@ -89,4 +111,46 @@
     }
   });
 
+  Whisper.LightboxView = Whisper.View.extend({
+      templateName: 'lightbox',
+      className: 'modal lightbox',
+      events: {
+          'click .save': 'save',
+          'click .close': 'remove',
+          'click': 'onclick'
+      },
+      save: function(e) {
+            var suggestedName;
+            if (this.model.fileType) {
+                suggestedName = 'signal.' + this.model.fileType;
+            }
+            var w = extension.windows.getViews()[0];
+            if (w && w.chrome && w.chrome.fileSystem) {
+                w.chrome.fileSystem.chooseEntry({
+                    type: 'saveFile', suggestedName: suggestedName
+                }, function(entry) {
+                    if (!entry) {
+                        return;
+                    }
+                    entry.createWriter(function(fileWriter) {
+                        fileWriter.write(this.model.blob);
+                    }.bind(this));
+                }.bind(this));
+            } else {
+                console.log('Failed to get window');
+            }
+      },
+      onclick: function(e) {
+          var $el = this.$(e.target);
+          if (!$el.hasClass('image') && !$el.closest('.controls').length ) {
+              e.preventDefault();
+              this.remove();
+              return false;
+          }
+      },
+      render_attributes: function() {
+          return { url: this.model.url };
+      }
+  });
+
 })();

js/views/inbox_view.js

@@ -118,7 +118,8 @@
             'click .settings': 'showSettings',
             'select .gutter .conversation-list-item': 'openConversation',
             'input input.search': 'filterContacts',
-            'click .restart-signal': 'reloadBackgroundPage'
+            'click .restart-signal': 'reloadBackgroundPage',
+            'show .lightbox': 'showLightbox'
         },
         focusConversation: function(e) {
             if (e && this.$(e.target).closest('.placeholder').length) {
@@ -163,6 +164,9 @@
             this.$('.debug-log').remove();
             new Whisper.DebugLogView().$el.appendTo(this.el);
         },
+        showLightbox: function(e) {
+            this.$el.append(e.target);
+        },
         closeMenu: function(e) {
             if (e && this.$(e.target).parent('.global-menu').length > 0 ) {
                 return;