From 9a266a3cc4ee614ba04ba8c4643b9b9b09f2df23 Mon Sep 17 00:00:00 2001 From: Peter Cottle Date: Thu, 16 Apr 2015 19:17:49 +1000 Subject: [PATCH] BOOM redid the command history view --- src/js/app/index.js | 12 ++- src/js/models/commandModel.js | 2 +- src/js/react_views/CommandHistoryView.jsx | 103 ++++++++++++++++++++++ src/js/views/commandViews.js | 84 +----------------- 4 files changed, 113 insertions(+), 88 deletions(-) create mode 100644 src/js/react_views/CommandHistoryView.jsx diff --git a/src/js/app/index.js b/src/js/app/index.js index 06a4ee80..cd0839a3 100644 --- a/src/js/app/index.js +++ b/src/js/app/index.js @@ -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() { diff --git a/src/js/models/commandModel.js b/src/js/models/commandModel.js index 282a55d6..9fd1a104 100644 --- a/src/js/models/commandModel.js +++ b/src/js/models/commandModel.js @@ -29,7 +29,7 @@ var Command = Backbone.Model.extend({ }, - initialize: function(options) { + initialize: function() { this.initDefaults(); this.validateAtInit(); diff --git a/src/js/react_views/CommandHistoryView.jsx b/src/js/react_views/CommandHistoryView.jsx new file mode 100644 index 00000000..d67d2302 --- /dev/null +++ b/src/js/react_views/CommandHistoryView.jsx @@ -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( + + ); + }, this); + return ( +
+ {allCommands} +
+ ); + }, + + 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; diff --git a/src/js/views/commandViews.js b/src/js/views/commandViews.js index d74a9c76..4019e5d5 100644 --- a/src/js/views/commandViews.js +++ b/src/js/views/commandViews.js @@ -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;