Liking comments. Somehow makes n requests per comment like. Riiiight.

This commit is contained in:
Samuel Clay 2013-01-10 22:26:52 -08:00
parent 3d0cd44e71
commit 7e3958cdf5
7 changed files with 130 additions and 36 deletions

View file

@ -1709,6 +1709,9 @@ class MSharedStory(mongo.Document):
for r, reply in enumerate(comment['replies']):
if reply['user_id'] in profiles:
stories[s][comment_set][c]['replies'][r]['user'] = profiles[reply['user_id']]
stories[s][comment_set][c]['liking_user_ids'] = list(comment['liking_users'])
for u, user_id in enumerate(comment['liking_users']):
stories[s][comment_set][c]['liking_users'][u] = profiles[user_id]
return stories
@ -1720,6 +1723,9 @@ class MSharedStory(mongo.Document):
comment['source_user'] = profiles[comment['source_user_id']]
for r, reply in enumerate(comment['replies']):
comment['replies'][r]['user'] = profiles[reply['user_id']]
comment['liking_user_ids'] = list(comment['liking_users'])
for u, user_id in enumerate(comment['liking_users']):
comment['liking_users'][u] = profiles[user_id]
return comment

View file

@ -55,7 +55,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
}
body {
background: #ebedee url('/../../../media/img/circular/background.png?1357864825') repeat 0 0;
background: #ebedee url('/../../../media/img/circular/background.png?1357879882') repeat 0 0;
font-family: Helvetica, arial, sans-serif;
color: #333333;
}
@ -128,6 +128,7 @@ blockquote {
}
.NB-container {
background: transparent;
width: 100%;
height: 100%;
}
@ -217,7 +218,7 @@ blockquote {
}
.NB-authenticated .NB-header {
background: #f2f2f2 url('/../../../media/img/circular/header_background_logged_in.png?1357864825') repeat 0 0;
background: #f2f2f2 url('/../../../media/img/circular/header_background_logged_in.png?1357879882') repeat 0 0;
height: 44px;
bottom: 0;
}
@ -242,7 +243,7 @@ blockquote {
}
.NB-authenticated .NB-header ul li.NB-active {
cursor: default;
background: url('/../../../media/img/circular/header_highlight_border.png?1357864825') no-repeat center bottom;
background: url('/../../../media/img/circular/header_highlight_border.png?1357879882') no-repeat center bottom;
}
.NB-authenticated .NB-header ul li.NB-active div.NB-tab-inner {
color: #62a4d3;
@ -273,22 +274,22 @@ blockquote {
.NB-authenticated .NB-header ul li.NB-trending-tab .NB-icon {
width: 17px;
height: 17px;
background: url('/../../../media/img/circular/header/icon_trending.png?1357864825') no-repeat center bottom;
background: url('/../../../media/img/circular/header/icon_trending.png?1357879882') no-repeat center bottom;
}
.NB-authenticated .NB-header ul li.NB-active.NB-trending-tab .NB-icon, .NB-authenticated .NB-header ul li.NB-trending-tab:hover .NB-icon {
background: url('/../../../media/img/circular/header/icon_trending_active.png?1357864825') no-repeat center bottom;
background: url('/../../../media/img/circular/header/icon_trending_active.png?1357879882') no-repeat center bottom;
}
.NB-authenticated .NB-header ul li.NB-following-tab .NB-icon {
width: 17px;
height: 17px;
background: url('/../../../media/img/circular/header/icon_follow.png?1357864825') no-repeat center bottom;
background: url('/../../../media/img/circular/header/icon_follow.png?1357879882') no-repeat center bottom;
}
.NB-authenticated .NB-header ul li.NB-active.NB-following-tab .NB-icon, .NB-authenticated .NB-header ul li.NB-following-tab:hover .NB-icon {
background: url('/../../../media/img/circular/header/icon_follow_active.png?1357864825') no-repeat center bottom;
background: url('/../../../media/img/circular/header/icon_follow_active.png?1357879882') no-repeat center bottom;
}
.NB-unauthenticated .NB-header {
background: url('/../../../media/img/circular/header_background_transparent.png?1357864825') repeat 0 0;
background: url('/../../../media/img/circular/header_background_transparent.png?1357879882') repeat 0 0;
height: 72px;
top: 0;
}
@ -436,10 +437,10 @@ blockquote {
.NB-popover .NB-popover-inner {
width: 240px;
padding: 45px 38px 0 30px;
background: transparent url('/../../../media/img/circular/popover_top.png?1357864825') no-repeat 0 0;
background: transparent url('/../../../media/img/circular/popover_top.png?1357879882') no-repeat 0 0;
}
.NB-popover .NB-popover-bottom {
background: transparent url('/../../../media/img/circular/popover_bottom.png?1357864825') no-repeat left bottom;
background: transparent url('/../../../media/img/circular/popover_bottom.png?1357879882') no-repeat left bottom;
height: 40px;
}
.NB-popover input {
@ -587,7 +588,7 @@ blockquote {
width: 100%;
height: 14px;
z-index: 0;
background: transparent url('/../../../media/img/circular/module_cutoff.png?1357864825') repeat-x left bottom;
background: transparent url('/../../../media/img/circular/module_cutoff.png?1357879882') repeat-x left bottom;
}
.NB-story-content-wrapper .NB-story-content-expander .NB-story-content-expander-text,
.NB-story-content-wrapper .NB-story-content-expander .NB-story-content-expander-pages {
@ -987,6 +988,36 @@ blockquote {
border-bottom: 1px solid #bdbdbd;
padding: 3px 0;
}
.NB-story-comments-container .NB-story-comment-likes {
overflow: hidden;
height: 14px;
margin: 3px 2px 0;
}
.NB-story-comments-container .NB-story-comment-like {
float: right;
width: 16px;
background: transparent url("/media/embed/reader/star_grey.png") no-repeat center 0;
text-transform: uppercase;
padding: 1px 6px 1px 6px;
height: 11px;
}
.NB-story-comments-container .NB-story-comment-like:hover, .NB-story-comments-container .NB-story-comment-like.NB-active {
cursor: pointer;
background: transparent url("/media/embed/reader/star_green.png") no-repeat center 0;
}
.NB-story-comments-container .NB-story-comment-like:active {
cursor: pointer;
}
.NB-story-comments-container .NB-story-comment-likes-users .NB-user-avatar {
float: right;
width: auto;
height: auto;
}
.NB-story-comments-container .NB-story-comment-likes-users .NB-user-avatar img {
position: static;
width: 12px;
height: 12px;
}
.NB-page-controls {
margin: 0 auto 54px;

View file

@ -166,6 +166,7 @@ blockquote {
// ========
.NB-container {
background: transparent;
width: 100%;
height: 100%;
}
@ -886,6 +887,42 @@ blockquote {
border-bottom: 1px solid $border-color;
padding: 3px 0;
}
.NB-story-comment-likes {
overflow: hidden;
height: 14px;
margin: 3px 2px 0;
}
.NB-story-comment-like {
float: right;
width: 16px;
background: transparent url('/media/embed/reader/star_grey.png') no-repeat center 0;
text-transform: uppercase;
padding: 1px 6px 1px 6px;
height: 11px;
&:hover,
&.NB-active {
cursor: pointer;
background: transparent url('/media/embed/reader/star_green.png') no-repeat center 0;
}
&:active {
cursor: pointer;
}
}
.NB-story-comment-likes-users {
.NB-user-avatar {
float: right;
width: auto;
height: auto;
img {
position: static;
width: 12px;
height: 12px;
}
}
}
}
// ==========

View file

@ -124,6 +124,28 @@ NEWSBLUR.SocialPageAssets = Backbone.Router.extend({
});
},
like_comment: function(story_id, story_feed_id, comment_user_id, callback, error_callback) {
this.make_request('/social/like_comment', {
story_id: story_id,
story_feed_id: story_feed_id,
comment_user_id: comment_user_id,
format: 'html'
}, callback, error_callback, {
request_type: 'POST'
});
},
remove_like_comment: function(story_id, story_feed_id, comment_user_id, callback, error_callback) {
this.make_request('/social/remove_like_comment', {
story_id: story_id,
story_feed_id: story_feed_id,
comment_user_id: comment_user_id,
format: 'html'
}, callback, error_callback, {
request_type: 'POST'
});
},
login: function(username, password, callback, error_callback) {
this.make_request('/api/login', {
username: username,

View file

@ -131,13 +131,7 @@ NEWSBLUR.Views.SocialPageComment = Backbone.View.extend({
comment_user_id, comment_reply,
reply_id,
_.bind(function(data) {
if (this.options.on_social_page) {
this.options.story_comments_view.replace_comment(this.model.get('user_id'), data);
} else {
this.model.set(data.comment);
this.render();
NEWSBLUR.app.story_list.fetch_story_locations_in_feed_view();
}
this.options.story_comments_view.replace_comment(this, data);
}, this), _.bind(function(data) {
var message = data && data.message || "Sorry, this reply could not be posted. Probably a bug.";
if (!NEWSBLUR.Globals.is_authenticated) {
@ -174,13 +168,7 @@ NEWSBLUR.Views.SocialPageComment = Backbone.View.extend({
this.options.story.get('story_feed_id'),
comment_user_id, reply_id,
_.bind(function(data) {
if (this.options.on_social_page) {
this.options.story_comments_view.replace_comment(this.model.get('user_id'), data);
} else {
this.model.set(data.comment);
this.render();
NEWSBLUR.app.story_list.fetch_story_locations_in_feed_view();
}
this.options.story_comments_view.replace_comment(this, data);
}, this), _.bind(function(data) {
var message = data && data.message || "Sorry, this reply could not be deleted.";
var $error = $.make('div', { className: 'NB-error' }, message);
@ -195,20 +183,22 @@ NEWSBLUR.Views.SocialPageComment = Backbone.View.extend({
},
like_comment: function() {
var liking_user_ids = this.model.get('liking_users') || [];
console.log(["like_comment", this]);
var comment_user_id = this.model.get('user_id');
var liked = _.contains(liking_user_ids, NEWSBLUR.Globals.user_id);
var liked = $(".NB-story-comment-like", this.$el).hasClass('NB-active');
if (!liked) {
this.model.set('liking_users', _.union(liking_user_ids, NEWSBLUR.Globals.user_id));
NEWSBLUR.assets.like_comment(this.options.story.id,
this.options.story.get('story_feed_id'),
comment_user_id);
comment_user_id, _.bind(function(data) {
this.options.story_comments_view.replace_comment(this, data);
}, this));
} else {
this.model.set('liking_users', _.without(liking_user_ids, NEWSBLUR.Globals.user_id));
NEWSBLUR.assets.remove_like_comment(this.options.story.id,
this.options.story.get('story_feed_id'),
comment_user_id);
comment_user_id, _.bind(function(data) {
this.options.story_comments_view.replace_comment(this, data);
}, this));
}
}

View file

@ -88,13 +88,12 @@ NEWSBLUR.Views.SocialPageComments = Backbone.View.extend({
this.initialize();
},
replace_comment: function(comment_user_id, html) {
var comment_view = _.detect(this.comment_views, function(view) {
return view.model.get('user_id') == comment_user_id;
});
replace_comment: function(comment_view, html) {
var $new_comment = $(html);
comment_view.$el.replaceWith($new_comment);
comment_view.setElement($new_comment);
this.story_view.attach_tooltips();
this.initialize();
}

View file

@ -27,7 +27,16 @@
<div class="NB-story-comment-button-wrapper NB-story-comment-edit-button-wrapper">edit</div>
</div>
{% endif %}
<div class="NB-story-comment-likes"></div>
<div class="NB-story-comment-likes">
<div class="NB-story-comment-like {% if user.pk in comment.liking_user_ids %}NB-active{% endif %}"></div>
<div class="NB-story-comment-likes-users">
{% for user in comment.liking_users %}
<a href="{{ user.feed_link }}" class="NB-user-avatar" title="{{ user.username }}">
<img src="{{ user.photo_url }}">
</a>
{% endfor %}
</div>
</div>
<div class="NB-story-comment-error"></div>
<div class="NB-spinner"></div>
</div>