mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Use timeout-based animation for hourglasses

Browse source 
CSS animations are convenient but costly if you have hundreds of them.

Fixes #945
This commit is contained in:
lilia 2016-10-30 16:53:17 +09:00
parent c0a160b1dd
commit 35270dbbb4
3 changed files with 17 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

17
js/views/message_view.js
View file

@ -29,14 +29,20 @@
templateName: 'hourglass',
className: 'timer',
initialize: function() {
this.update();
},
update: function() {
if (this.timeout) {
clearTimeout(this.timeout);
this.timeout = null;
}
if (this.model.isExpiring()) {
this.render();
var totalTime = this.model.get('expireTimer') * 1000;
var remainingTime = this.model.msTilExpire();
var elapsed = (totalTime - remainingTime) / totalTime;
this.$('.sand')
.css('animation-duration', remainingTime*0.001 + 's')
.css('transform', 'translateY(' + elapsed*100 + '%)');
this.$('.sand').css('transform', 'translateY(' + elapsed*100 + '%)');
this.timeout = setTimeout(this.update.bind(this), totalTime / 100);
this.$el.css('display', 'inline-block');
}
return this;
@ -201,7 +207,10 @@
}
},
renderExpiring: function() {
new TimerView({ model: this.model, el: this.$('.timer') });
if (!this.timerView) {
this.timerView = new TimerView({ model: this.model, el: this.$('.timer') });
}
this.timerView.update();
},
render: function() {
var contact = this.model.isIncoming() ? this.model.getContact() : null;