mirror/pcottle.learnGitBranching
1
0
Fork 0
mirror of https://github.com/pcottle/learnGitBranching.git synced 2025-06-28 08:50:06 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

BOOM redid the command history view

Browse source
This commit is contained in:
Peter Cottle 2015-04-16 19:17:49 +10:00
parent 855a0402d7
commit 9a266a3cc4
4 changed files with 113 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/js/app/index.js
View file

@ -1,6 +1,7 @@
var _ = require('underscore');
var Backbone = require('backbone');
var React = require('react');
var CommandHistoryView = require('../react_views/CommandHistoryView.jsx');
var util = require('../util');
var intl = require('../intl');
@ -292,10 +293,13 @@ function CommandUI() {
el: $('#commandLineBar')
});
this.commandLineHistoryView = new CommandViews.CommandLineHistoryView({
el: $('#commandLineHistory'),
collection: this.commandCollection
});
React.render(
React.createElement(
CommandHistoryView,
{ commandCollection: this.commandCollection }
),
document.getElementById('commandDisplay')
);
}
exports.getEvents = function() {

2
src/js/models/commandModel.js
View file

@ -29,7 +29,7 @@ var Command = Backbone.Model.extend({
},
initialize: function(options) {
initialize: function() {
this.initDefaults();
this.validateAtInit();

103
src/js/react_views/CommandHistoryView.jsx Normal file
View file

@ -0,0 +1,103 @@
var CommandView = require('../react_views/CommandView.jsx');
var Main = require('../app');
var React = require('react');
var reactUtil = require('../util/reactUtil');
var _subscribeEvents = [
'add',
'reset',
'change',
'all'
];
var CommandHistoryView = React.createClass({
propTypes: {
// the backbone command model collection
commandCollection: React.PropTypes.object.isRequired
},
componentDidMount: function() {
for (var i = 0; i < _subscribeEvents.length; i++) {
this.props.commandCollection.on(
_subscribeEvents[i],
this.updateFromCollection,
this
);
}
this.props.commandCollection.on('change', this.scrollDown, this);
Main.getEvents().on('commandScrollDown', this.scrollDown, this);
Main.getEvents().on('clearOldCommands', this.clearOldCommands, this);
},
componentWillUnmount: function() {
for (var i = 0; i < _subscribeEvents.length; i++) {
this.props.commandCollection.off(
_subscribeEvents[i],
this.updateFromCollection,
this
);
}
},
updateFromCollection: function() {
this.forceUpdate();
},
render: function() {
var allCommands = [];
this.props.commandCollection.each(function(command) {
allCommands.push(
<CommandView command={command} key={command.cid} />
);
}, this);
return (
<div>
{allCommands}
</div>
);
},
scrollDown: function() {
var cD = this.getDOMNode();
var t = document.getElementById('terminal');
// firefox hack
var shouldScroll = (cD.clientHeight > t.clientHeight) ||
(window.innerHeight < cD.clientHeight);
// ugh sometimes i wish i had toggle class
var hasScroll = t.className.match(/shouldScroll/g);
if (shouldScroll && !hasScroll) {
t.className += ' scrolling';
} else if (!shouldScroll && hasScroll) {
t.className = t.className.replace(/shouldScroll/g, '');
}
if (shouldScroll) {
t.scrollTop = t.scrollHeight;
}
},
clearOldCommands: function() {
// go through and get rid of every command that is "processed" or done
var toDestroy = [];
this.props.commandCollection.each(function(command) {
if (command.get('status') !== 'inqueue' &&
command.get('status') !== 'processing') {
toDestroy.push(command);
}
}, this);
for (var i = 0; i < toDestroy.length; i++) {
toDestroy[i].destroy();
}
this.updateFromCollection();
this.scrollDown();
}
});
module.exports = CommandHistoryView;

84
src/js/views/commandViews.js
View file

@ -1,21 +1,15 @@
var _ = require('underscore');
var Backbone = require('backbone');
var React = require('react');
var Main = require('../app');
var Command = require('../models/commandModel').Command;
var CommandLineStore = require('../stores/CommandLineStore');
var CommandLineActions = require('../actions/CommandLineActions');
var CommandView = require('../react_views/CommandView.jsx');
var Errors = require('../util/errors');
var Warning = Errors.Warning;
var log = require('../log');
var keyboard = require('../util/keyboard');
var CommandPromptView = Backbone.View.extend({
initialize: function(options) {
initialize: function() {
Main.getEvents().on('commandSubmittedPassive', this.addToCommandHistory, this);
this.index = -1;
@ -205,81 +199,5 @@ var CommandPromptView = Backbone.View.extend({
}
});
var CommandLineHistoryView = Backbone.View.extend({
initialize: function(options) {
this.collection = options.collection;
this.commandNum = 0;
this.collection.on('add', this.addOne, this);
this.collection.on('reset', this.addAll, this);
this.collection.on('all', this.render, this);
this.collection.on('change', this.scrollDown, this);
Main.getEvents().on('commandScrollDown', this.scrollDown, this);
Main.getEvents().on('clearOldCommands', this.clearOldCommands, this);
},
addWarning: function(msg) {
var err = new Warning({
msg: msg
});
var command = new Command({
error: err,
rawStr: 'Warning:'
});
this.collection.add(command);
},
clearOldCommands: function() {
// go through and get rid of every command that is "processed" or done
var toDestroy = [];
this.collection.each(function(command) {
if (command.get('status') !== 'inqueue' &&
command.get('status') !== 'processing') {
toDestroy.push(command);
}
}, this);
_.each(toDestroy, function(command) {
command.destroy();
}, this);
this.scrollDown();
},
scrollDown: function() {
// if commandDisplay is ever bigger than #terminal, we need to
// add overflow-y to terminal and scroll down
var cD = $('#commandDisplay')[0];
var t = $('#terminal')[0];
// firefox hack
var shouldScroll = (cD.clientHeight > t.clientHeight) ||
($(window).height() < cD.clientHeight);
$(t).toggleClass('scrolling', shouldScroll);
if (shouldScroll) {
t.scrollTop = t.scrollHeight;
}
},
addOne: function(command) {
var div = document.createElement('div');
div.id = 'command_' + this.commandNum++;
React.render(
React.createElement(CommandView, {command: command}),
div
);
this.$('#commandDisplay').append(div);
this.scrollDown();
},
addAll: function() {
this.collection.each(this.addOne);
}
});
exports.CommandPromptView = CommandPromptView;
exports.CommandLineHistoryView = CommandLineHistoryView;