PERF: fast docking of timeline so it does not overlap

In the past we debounced all dock check this causes situations where
sometimes timeline would not dock in time especially on slow computers

This works around it by performing the dock by hand.

Also there was missing integer casting causing over aggressive re-rendering
This commit is contained in:
Sam 2018-02-22 12:52:30 +11:00
parent 964624f3ab
commit f4418ae884
2 changed files with 20 additions and 2 deletions

View File

@ -47,6 +47,17 @@ export default MountWidget.extend(Docking, {
this.queueRerender(); this.queueRerender();
}, },
fastDockCheck(){
// we need to dock super fast here, avoid any slow methods
// this is not debounced
const offset = window.pageYOffset;
if (offset && this.fastDockAt && offset > this.fastDockAt) {
this.fastDockAt = null;
$('.timeline-container').addClass('timeline-docked timeline-docked-bottom');
}
},
dockCheck(info) { dockCheck(info) {
const mainOffset = $('#main').offset(); const mainOffset = $('#main').offset();
const offsetTop = mainOffset ? mainOffset.top : 0; const offsetTop = mainOffset ? mainOffset.top : 0;
@ -62,13 +73,14 @@ export default MountWidget.extend(Docking, {
this.dockBottom = false; this.dockBottom = false;
if (posTop < topicTop) { if (posTop < topicTop) {
this.dockAt = topicTop; this.dockAt = parseInt(topicTop, 10);
} else if (pos > topicBottom + footerHeight) { } else if (pos > topicBottom + footerHeight) {
this.dockAt = (topicBottom - timelineHeight) + footerHeight; this.dockAt = parseInt((topicBottom - timelineHeight) + footerHeight, 10);
this.dockBottom = true; this.dockBottom = true;
if (this.dockAt < 0) { this.dockAt = 0; } if (this.dockAt < 0) { this.dockAt = 0; }
} else { } else {
this.dockAt = null; this.dockAt = null;
this.fastDockAt = parseInt(topicBottom - timelineHeight + footerHeight - offsetTop, 10);
} }
if (this.dockAt !== prev) { if (this.dockAt !== prev) {

View File

@ -12,6 +12,12 @@ export default Ember.Mixin.create({
init() { init() {
this._super(); this._super();
this.queueDockCheck = () => { this.queueDockCheck = () => {
// we want to do a very fast non-debounced check first
if (this.fastDockCheck) {
this.fastDockCheck();
}
Ember.run.debounce(this, this.safeDockCheck, 5); Ember.run.debounce(this, this.safeDockCheck, 5);
}; };
}, },