Front-end complete. Need to send the email now.

apps/reader/urls.py

@@ -31,6 +31,7 @@ urlpatterns = patterns('',
     url(r'^save_feed_order', views.save_feed_order, name='save-feed-order'),
     url(r'^feeds_trainer', views.feeds_trainer, name='feeds-trainer'),
     url(r'^save_feed_chooser', views.save_feed_chooser, name='save-feed-chooser'),
+    url(r'^send_story_email', views.send_story_email, name='send-story-email'),
     url(r'^retrain_all_sites', views.retrain_all_sites, name='retrain-all-sites'),
     url(r'^buster', views.iframe_buster, name='iframe-buster'),
 )

apps/reader/views.py

@@ -955,4 +955,18 @@ def mark_story_as_unstarred(request):
         code = -1
     
     return {'code': code}
-    
+
+@ajax_login_required
+@json.json_view
+def send_story_email(request):
+    code       = 1
+    story_id   = request.POST['story_id']
+    feed_id    = request.POST['feed_id']
+    to_address = request.POST['to']
+    from_name  = request.POST['from']
+    comments   = request.POST['comments']
+    
+    story = MStory.objects(story_feed_id=feed_id, story_guid=story_id)[0]
+    print story
+    
+    return {'code': code}

media/css/reader.css

@@ -4102,6 +4102,9 @@ background: transparent;
 .NB-menu-manage .NB-menu-manage-story-thirdparty .NB-menu-manage-thirdparty-readability {
     background: transparent url('../img/reader/readability.png') no-repeat 0 0;
 }
+.NB-menu-manage .NB-menu-manage-story-thirdparty .NB-menu-manage-thirdparty-email {
+    background: transparent url('../img/icons/silk/email_open.png') no-repeat 0 0;
+}
 .NB-menu-manage .NB-menu-manage-story-thirdparty .NB-menu-manage-thirdparty-twitter {
     background: transparent url('../img/reader/twitter_icon_2.png') no-repeat 0 0;
 }
@@ -4380,11 +4383,20 @@ background: transparent;
 .NB-modal-email .NB-modal-loading {
   margin: 6px 8px 0;
 }
+.NB-modal-email .NB-input {
+  width: 300px;
+}
+.NB-modal-email .NB-modal-email-feed {
+  font-size: 13px;
+  margin: 4px 0; 
+}
+.NB-modal-email .NB-modal-email-story-permalink {
+  color: #808080;
+  font-size: 11px;
+}
 .NB-modal.NB-modal-email .NB-modal-email-comments-container {
-  padding: 6px 0;
+  padding: 6px 0 0;
   margin: 4px 0;
-  border-top: 1px solid #C0C0C0;
-  border-bottom: 1px solid #C0C0C0;
 }
 .NB-modal-email .NB-modal-email-comments {
   width: 558px;
@@ -4397,20 +4409,24 @@ background: transparent;
   border: 1px solid #E0E0E0;
   font-family: "Lucida Sans", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
 }
-.NB-modal-email .NB-modal-email-name-container {
+.NB-modal-email .NB-modal-email-to-container,
+.NB-modal-email .NB-modal-email-from-container {
   color: #505050;
   font-size: 12px;
   margin: 4px 0;
+  border-top: 1px solid #F0F0F0;
+  padding: 6px 0 6px;
 }
-.NB-modal-email .NB-modal-email-name {
+.NB-modal-email .NB-modal-email-from {
   
 }
 .NB-modal-email .NB-modal-email-explanation {
   clear: both;
   color: #505050;
   font-size: 12px;
-  margin: 12px 0 14px;
+  margin: 0;
-  padding: 0 1px;
+  padding: 14px 1px 0;
+  border-top: 1px solid #F0F0F0;
 }
 
 

media/js/newsblur/assetmodel.js

@@ -788,6 +788,14 @@ NEWSBLUR.AssetModel.Reader.prototype = {
         }
     },
     
+    send_story_email: function(data, callback, error_callback) {
+        if (NEWSBLUR.Globals.is_authenticated) {
+          this.make_request('/reader/send_story_email', data, callback, error_callback);
+        } else {
+          error_callback('You must be logged in to send a story over email. Just log in or create an account.');
+        }
+    },
+    
     recalculate_story_scores: function(feed_id) {
         _.each(this.stories, _.bind(function(story, i) {
             if (story.story_feed_id != feed_id) return;

media/js/newsblur/modal.js

@@ -37,6 +37,10 @@ NEWSBLUR.Modal.prototype = {
                 $('.NB-modal-holder').empty().remove();
             }
         });
+    },
+    
+    close: function() {
+        $.modal.close();
     }
     
 };

media/js/newsblur/reader_send_email.js

@@ -1,11 +1,14 @@
 NEWSBLUR.ReaderSendEmail = function(story_id, options) {
     var defaults = {};
+    
+    _.bindAll(this, 'close');
 
     this.options = $.extend({}, defaults, options);
     this.model = NEWSBLUR.AssetModel.reader();
     this.story_id = story_id;
     this.story = this.model.get_story(story_id);
-    this.feed = this.model.get_feed(this.story.story_feed_id);
+    this.feed_id = this.story.story_feed_id;
+    this.feed = this.model.get_feed(this.feed_id);
 
     this.runner();
 };
@@ -25,20 +28,26 @@ NEWSBLUR.ReaderSendEmail.prototype = _.extend({}, NEWSBLUR.Modal.prototype, {
         this.$modal = $.make('div', { className: 'NB-modal-email NB-modal' }, [
             $.make('h2', { className: 'NB-modal-title' }, 'Send Story by Email'),
             $.make('h2', { className: 'NB-modal-subtitle' }, [
-                $.make('img', { className: 'NB-modal-feed-image feed_favicon', src: $.favicon(this.feed.favicon) }),
-                $.make('div', { className: 'NB-modal-feed-title' }, this.feed.feed_title),
                 $.make('div', { className: 'NB-modal-email-story-title' }, this.story.story_title),
+                $.make('div', { className: 'NB-modal-email-feed' }, [
+                  $.make('img', { className: 'NB-modal-feed-image feed_favicon', src: $.favicon(this.feed.favicon) }),
+                  $.make('div', { className: 'NB-modal-feed-title' }, this.feed.feed_title)
+                ]),
                 $.make('div', { className: 'NB-modal-email-story-permalink' }, this.story.story_permalink)
             ]),
+            $.make('div', { className: 'NB-modal-email-to-container' }, [
+              '» Recipient\'s email: ',
+              $.make('input', { className: 'NB-input NB-modal-to', name: 'to', value: "" })
+            ]),
             $.make('div', { className: 'NB-modal-email-explanation' }, [
-                "Add an optional comment to send with the story. The contents of the story will be sent below this comment."
+                "Add an optional comment to send with the story. The story will be sent below your comment."
             ]),
             $.make('div', { className: 'NB-modal-email-comments-container' }, [
                 $.make('textarea', { className: 'NB-modal-email-comments' })
             ]),
-            $.make('div', { className: 'NB-modal-email-name-container' }, [
+            $.make('div', { className: 'NB-modal-email-from-container' }, [
-              '» Who is this from: ',
+              '» Your name: ',
-              $.make('input', { className: 'NB-input NB-modal-email-name', value: NEWSBLUR.Globals.username })
+              $.make('input', { className: 'NB-input NB-modal-email-from', name: 'from', value: NEWSBLUR.Globals.username })
             ]),
             $.make('form', { className: 'NB-recommend-form' }, [
                 $.make('div', { className: 'NB-modal-submit' }, [
@@ -50,6 +59,25 @@ NEWSBLUR.ReaderSendEmail.prototype = _.extend({}, NEWSBLUR.Modal.prototype, {
         ]);
     },
     
+    save: function(e) {
+        var from     = $('input[name=from]', this.$modal).val();
+        var to       = $('input[name=to]', this.$modal).val();
+        var comments = $('textarea', this.$modal).val();
+        var $save    = $('input[type=submit]', this.$modal);
+        
+        $save.addClass('NB-disabled').val('Sending...');
+        
+        this.model.send_story_email({
+          story_id : this.story_id,
+          feed_id  : this.feed_id,
+          from     : from,
+          to       : to,
+          comments : comments
+        }, this.close, function(error) {
+            $save.removeClass('NB-disabled').val('Send Email');
+        });
+    },
+    
     // ===========
     // = Actions =
     // ===========
@@ -57,10 +85,11 @@ NEWSBLUR.ReaderSendEmail.prototype = _.extend({}, NEWSBLUR.Modal.prototype, {
     handle_click: function(elem, e) {
         var self = this;
         
-        $.targetIs(e, { tagSelector: '.NB-goodies-bookmarklet-button' }, function($t, $p) {
+        $.targetIs(e, { tagSelector: '.NB-modal-submit-save' }, function($t, $p) {
             e.preventDefault();
             
-            alert('Drag this button to your bookmark toolbar.');
+            self.save();
+            return false;
         });
     }