Adding follow/unfollow buttons. Preparing to modelize with Backbone.

media/css/reader.css

@@ -6659,11 +6659,11 @@ background: transparent;
     padding-left: 12px;
 }
 .NB-modal-friends .NB-profile-badge .NB-profile-badge-bio {
-    clear: both;
+    clear: left;
 }
 .NB-modal-friends .NB-profile-badge .NB-profile-badge-stats {
-    clear: both;
-    color: #5A6C8A;
+    clear: left;
+    color: #AE5D15;
     font-size: 11px;
     text-transform: uppercase;
 }
@@ -6671,3 +6671,11 @@ background: transparent;
     padding-right: 3px;
     font-weight: bold;
 }
+.NB-modal-friends .NB-profile-badge-actions {
+    float: right;
+    margin-top: 10px;
+}
+.NB-modal-friends .NB-profile-badge-actions .NB-modal-submit-button {
+    width: 80px;
+    text-align: center;
+}

media/js/newsblur/assetmodel.js

@@ -31,6 +31,8 @@ NEWSBLUR.AssetModel.Reader = function() {
     this.story_keys = {};
     this.queued_read_stories = {};
     this.classifiers = {};
+    this.friends = {};
+    this.profile = {};
     this.starred_stories = [];
     this.starred_count = 0;
     this.read_stories_river_count = 0;
@@ -916,7 +918,11 @@ NEWSBLUR.AssetModel.Reader.prototype = {
     },
     
     fetch_friends: function(callback) {
-        this.make_request('/social/friends', null, callback);
+        var pre_callback = _.bind(function(data) {
+            // this.profile = 
+            callback(data);
+        }, this);
+        this.make_request('/social/friends', null, pre_callback);
     },
     
     disconnect_social_service: function(service, callback) {

media/js/newsblur/reader_friends.js

@@ -92,6 +92,7 @@ _.extend(NEWSBLUR.ReaderFriends.prototype, {
     
     make_find_friends_and_services: function(data) {
         console.log(["data", data]);
+        this.profile = data.social_profile;
         $('.NB-modal-loading', this.$modal).removeClass('NB-active');
         var $services = $('.NB-friends-services', this.$modal).empty();
         
@@ -226,6 +227,7 @@ _.extend(NEWSBLUR.ReaderFriends.prototype, {
     
     make_profile_badge: function(profile) {
         var $badge = $.make('div', { className: "NB-profile-badge" }, [
+            $.make('div', { className: 'NB-profile-badge-actions' }),
             $.make('div', { className: 'NB-profile-badge-photo' }, [
                 $.make('img', { src: profile.photo_url })
             ]),
@@ -243,6 +245,19 @@ _.extend(NEWSBLUR.ReaderFriends.prototype, {
                 'followers'
             ])
         ]);
+        
+        var $actions;
+        if (_.contains(this.profile.following_user_ids, profile.user_id)) {
+            $actions = $.make('div', { 
+                className: 'NB-profile-badge-action-unfollow NB-modal-submit-button NB-modal-submit-close' 
+            }, 'Following');
+        } else {
+            $actions = $.make('div', { 
+                className: 'NB-profile-badge-action-unfollow NB-modal-submit-button NB-modal-submit-green' 
+            }, 'Follow');
+        }
+        $('.NB-profile-badge-actions', $badge).append($actions);
+
         return $badge;
     },
     

settings.py

@@ -187,6 +187,7 @@ COMPRESS_JS = {
             # 'js/socket.io-client.0.8.7.js',
             'js/underscore.js',
             'js/underscore.string.js',
+            'js/backbone-0.5.3.js',
             'js/newsblur/reader_utils.js',
             'js/newsblur/assetmodel.js',
             'js/newsblur/reader.js',