Second try at making heart pulse. Go faster, stay coloured.
This commit is contained in:
parent
c0b0b726c7
commit
6e1601c10d
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue