add preloader for build console

This commit is contained in:
oleg 2015-12-17 22:41:51 +03:00
parent b07ae57499
commit cbbf1db699
5 changed files with 34 additions and 4 deletions

2
app.js
View File

@ -32,7 +32,7 @@ var server = http.createServer(function(req, res) {
} }
if (req.url.indexOf('/data.io.js') === -1) { if (req.url.indexOf('/data.io.js') === -1) {
if (/(js|css|fonts)/.test(req.url)) { if (/(js|css|fonts|images)/.test(req.url)) {
staticServer.serve(req, res); staticServer.serve(req, res);
} else { } else {
// serve index for all app pages // serve index for all app pages

BIN
static/images/preloader.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

View File

@ -1,3 +1,3 @@
.terminal .terminal
pre.terminal_code pre.terminal_code
.terminal_footer(style={height: '30px'}) .terminal_footer

View File

@ -5,9 +5,18 @@ define([
'react', 'react',
'reflux', 'reflux',
'app/stores/terminal', 'app/stores/terminal',
'app/stores/build',
'ansi_up', 'ansi_up',
'templates/app/components/terminal/terminal', 'templates/app/components/terminal/terminal'
], function(_, React, Reflux, terminalStore, ansiUp, template) { ], function(
_,
React,
Reflux,
terminalStore,
buildStore,
ansiUp,
template
) {
var Component = React.createClass({ var Component = React.createClass({
mixins: [Reflux.ListenerMixin], mixins: [Reflux.ListenerMixin],
@ -19,9 +28,26 @@ define([
this.listenTo(terminalStore, this.updateItems); this.listenTo(terminalStore, this.updateItems);
var node = document.getElementsByClassName('terminal')[0]; var node = document.getElementsByClassName('terminal')[0];
this.initialScrollPosition = node.getBoundingClientRect().top; this.initialScrollPosition = node.getBoundingClientRect().top;
if (this.props.showPreloader) {
this.getTerminal().insertAdjacentHTML('afterend',
'<img src="/images/preloader.gif" class="terminal_preloader"/>'
);
this.listenTo(buildStore, function(build) {
if (build.completed) {
this.removePreloader();
}
});
}
window.onscroll = this.onScroll; window.onscroll = this.onScroll;
}, },
removePreloader: function() {
var preloader = document.getElementsByClassName(
'terminal_preloader'
)[0];
preloader.parentNode.removeChild(preloader);
},
componentWillUnmount: function() { componentWillUnmount: function() {
window.onscroll = null; window.onscroll = null;
}, },
@ -91,6 +117,9 @@ define([
this.data = build.data; this.data = build.data;
this.renderBuffer(); this.renderBuffer();
} }
if (this.props.showPreloader && build.buildCompleted) {
this.removePreloader();
}
}, },
shouldComponentUpdate: function() { shouldComponentUpdate: function() {
return false; return false;

View File

@ -36,6 +36,7 @@ define([
self.lines = self.lines.concat(data.lines); self.lines = self.lines.concat(data.lines);
self.trigger({ self.trigger({
buildId: build.id, buildId: build.id,
buildCompleted: build.completed,
name: 'Console for build #' + build.id, name: 'Console for build #' + build.id,
data: _(self.lines).pluck('text') data: _(self.lines).pluck('text')
}); });