martin/nci
1
0
Fork 0
mirror of https://gitlab.silvrtree.co.uk/martind2000/nci.git synced 2025-02-14 04:49:17 +00:00
Code Issues Projects Releases Wiki Activity

fix scroll position add throttle

Browse Source
This commit is contained in:
Vladimir Polyakov 2015-12-02 21:57:44 +03:00
parent 45aac65a3c
commit 46e9b64f59
1 changed files with 29 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
static/js/app/components/terminal/terminal.js
View File

@ -26,10 +26,11 @@ define([
ignoreScrollEvent: false, ignoreScrollEvent: false,
linesCount: 0, linesCount: 0,
componentDidMount: function() { componentDidMount: function() {
console.log('did mount');
this.listenTo(terminalStore, this.updateItems); this.listenTo(terminalStore, this.updateItems);
var node = this.refs.code.getDOMNode(); var node = this.refs.code.getDOMNode();
this.initialScrollPosition = node.getBoundingClientRect().top; this.initialScrollPosition = node.getBoundingClientRect().top;
$(window).scroll(this.onScroll);
}, },
prepareRow: function(row) { prepareRow: function(row) {
return ansiUp.ansi_to_html(row.replace('\r', '')); return ansiUp.ansi_to_html(row.replace('\r', ''));
@ -40,13 +41,13 @@ define([
return self.prepareRow(row); return self.prepareRow(row);
}); });
}, },
componentWillUpdate: function() { onScroll: function() {
var node = this.refs.code.getDOMNode(), var node = this.refs.code.getDOMNode(),
body = document.getElementsByTagName('body')[0]; body = document.getElementsByTagName('body')[0];
this.shouldScrollBottom = window.innerHeight + body.scrollTop >= this.shouldScrollBottom = window.innerHeight + body.scrollTop >=
node.offsetHeight + this.initialScrollPosition; node.offsetHeight + this.initialScrollPosition;
}, },
componentDidUpdate: function() { ensureScrollPosition: function() {
if (this.shouldScrollBottom) { if (this.shouldScrollBottom) {
var node = this.refs.code.getDOMNode(), var node = this.refs.code.getDOMNode(),
body = document.getElementsByTagName('body')[0]; body = document.getElementsByTagName('body')[0];
@ -61,27 +62,34 @@ define([
return '<div class="code-line" data-number="' + index + '">' + return '<div class="code-line" data-number="' + index + '">' +
this.makeCodeLineContent(line) + '</div>'; this.makeCodeLineContent(line) + '</div>';
}, },
renderBuffer: _.throttle(function() {
var data = this.data,
currentLinesCount = data.length,
terminal = $('.terminal_code'),
rows = terminal.children();
if (rows.length) {
// replace our last node
var index = this.linesCount - 1;
$(rows[index]).html(this.makeCodeLineContent(data[index]));
}
var self = this;
terminal.append(
_(data.slice(this.linesCount)).map(function(line, index) {
return self.makeCodeLine(line, self.linesCount + index);
}).join('')
);
this.linesCount = currentLinesCount;
this.ensureScrollPosition();
}, 100),
data: [],
updateItems: function(build) { updateItems: function(build) {
// listen just our console update // listen just our console update
if (build.buildId === this.props.build) { if (build.buildId === this.props.build) {
var currentLinesCount = build.data.length, this.data = build.data;
terminal = $('.terminal_code'), this.renderBuffer();
rows = terminal.children();
if (rows.length) {
// replace our last node
var index = this.linesCount - 1;
$(rows[index]).html(this.makeCodeLineContent(build.data[index]));
}
var self = this;
terminal.append(
_(build.data.slice(this.linesCount)).map(function(line, index) {
return self.makeCodeLine(line, self.linesCount + index);
})
);
this.linesCount = currentLinesCount;
} }
}, },
shouldComponentUpdate: function() { shouldComponentUpdate: function() {