Second try at making heart pulse. Go faster, stay coloured.

This commit is contained in:
Robin Ward 2014-12-22 14:39:28 -05:00
parent c0b0b726c7
commit 6e1601c10d
1 changed files with 29 additions and 2 deletions

View File

@ -13,6 +13,18 @@ export var Button = function(action, label, icon, opts) {
this.opts = this.opts || opts || {}; this.opts = this.opts || opts || {};
}; };
function animateHeart($elem, start, end, complete) {
$elem.stop()
.css('textIndent', start)
.animate({ textIndent: end }, {
complete: complete,
step: function(now) {
$(this).css('-webkit-transform','scale('+now+')');
},
duration: 150
}, 'linear');
}
Button.prototype.render = function(buffer) { Button.prototype.render = function(buffer) {
var opts = this.opts; var opts = this.opts;
@ -36,7 +48,6 @@ export default Discourse.View.extend(StringBuffer, {
rerenderTriggers: [ rerenderTriggers: [
'post.deleted_at', 'post.deleted_at',
'post.flagsAvailable.@each',
'post.reply_count', 'post.reply_count',
'post.showRepliesBelow', 'post.showRepliesBelow',
'post.can_delete', 'post.can_delete',
@ -201,7 +212,23 @@ export default Discourse.View.extend(StringBuffer, {
}, },
clickLike: function(post) { clickLike: function(post) {
this.get('controller').send('toggleLike', post); var $heart = this.$('.fa-heart'),
controller = this.get('controller'),
$likeButton = this.$('button[data-action=like]');
var acted = post.get('actionByName.like.acted');
if (acted) {
controller.send('toggleLike', post);
$likeButton.removeClass('has-like').addClass('like');
} else {
var scale = [1.0, 1.5];
animateHeart($heart, scale[0], scale[1], function() {
animateHeart($heart, scale[1], scale[0], function() {
controller.send('toggleLike', post);
$likeButton.removeClass('like').addClass('has-like');
});
});
}
}, },
// Flag button // Flag button