Permalink
Browse files

Replace event bus with property-based function references

  • Loading branch information...
Brandon Tilley
Brandon Tilley committed Feb 21, 2014
1 parent 2145be5 commit a64f9dbbfc1879470a3c0f3d81b12ed00fa13b6a
View
@@ -1,3 +0,0 @@
var EventEmitter = require('events').EventEmitter;
module.exports = new EventEmitter();
@@ -1,5 +1,3 @@
var bus = require('./bus');
module.exports = React.createClass({
render: function() {
return (
@@ -14,6 +12,6 @@ module.exports = React.createClass({
},
onChange: function(evt) {
bus.emit('change:searchAllWindows', evt.target.checked);
this.props.changeSearchAllWindows(evt.target.checked);
}
});
@@ -1,4 +1,3 @@
var bus = require('./bus');
var stringSpanner = require('./string_spanner');
var MATCH_START = '<span class="match">';
@@ -39,10 +38,10 @@ module.exports = React.createClass({
},
onMouseEnter: function(evt) {
bus.emit('change:selected', this.props.tab);
this.props.changeSelected(this.props.tab);
},
onClick: function(evt) {
bus.emit('action:activate');
this.props.activateSelected();
}
});
@@ -7,7 +7,9 @@ module.exports = React.createClass({
<ul>
{this.props.tabs.map(function(tab, i) {
return <TabItem tab={tab} key={tab.id} filter={this.props.filter}
selected={this.props.selectedTab === tab} />;
selected={this.props.selectedTab === tab}
changeSelected={this.props.changeSelected}
activateSelected={this.props.activateSelected} />;
}.bind(this))}
</ul>
/* jshint ignore:end */
@@ -1,5 +1,3 @@
var bus = require('./bus');
var KEY_ENTER = 13;
var KEY_ESC = 27;
var KEY_UP = 38;
@@ -22,24 +20,24 @@ module.exports = React.createClass({
onKeydown: function(evt) {
switch (evt.which) {
case KEY_ESC:
bus.emit('exit');
this.props.exit();
break;
case KEY_ENTER:
bus.emit('action:activate');
this.props.activateSelected();
break;
case KEY_UP:
bus.emit('select:previous');
this.props.modifySelected(-1);
evt.preventDefault();
break;
case KEY_DOWN:
bus.emit('select:next');
this.props.modifySelected(1);
evt.preventDefault();
break;
}
},
onChange: function(evt) {
if (event.target.value !== this.props.filter)
bus.emit('change:filter', event.target.value);
this.props.changeFilter(event.target.value);
}
});
@@ -1,4 +1,3 @@
var bus = require('./bus');
var stringScore = require('../../../vendor/string_score');
var tabBroker = require('./tab_broker')(chrome);
var tabFilter = require('./tab_filter')(stringScore);
@@ -7,24 +6,6 @@ var TabSearchBox = require('./tab_search_box.jsx');
var TabList = require('./tab_list.jsx');
var StatusBar = require('./status_bar.jsx');
/**
* TabSwitcher is the main component of our application. It contains
* all the state, and all other components communicate their intent
* to change that state via events on the bus (which is a Node.js
* EventEmitter). All child components receive their data via properties.
*
* Bus events:
* - change:searchAllWindows(boolean) - the 'search all windows'
* option was toggled
* - change:filter(string) - the filter text was changed
* - change:selected(tab) - the selected tab was changed
* - action:activate - the user wishes to swich to the currently
* selected tab
* - select:previous - the tab above the selected one should be selected
* - select:next - the tab below the selected one should be selected
* - exit - the extension should exit, closing the window
*/
module.exports = React.createClass({
getInitialState: function() {
// TODO: move into a model
@@ -44,26 +25,29 @@ module.exports = React.createClass({
},
componentDidMount: function() {
bus.on('change:filter', this.changeFilter);
bus.on('change:selected', this.changeSelected);
bus.on('change:searchAllWindows', this.changeSearchAllWindows);
bus.on('select:previous', this.moveSelection.bind(this, -1));
bus.on('select:next', this.moveSelection.bind(this, 1));
bus.on('action:activate', this.activateSelection);
bus.on('exit', this.close);
window.onblur = this.close;
this.refreshTabs();
},
render: function() {
return (
/* jshint ignore:start */
<div>
<TabSearchBox filter={this.state.filter} />
<TabList tabs={this.filteredTabs()} filter={this.state.filter}
selectedTab={this.getSelected()} />
<StatusBar searchAllWindows={this.state.searchAllWindows} />
<TabSearchBox
filter={this.state.filter}
exit={this.close}
changeFilter={this.changeFilter}
activateSelected={this.activateSelected}
modifySelected={this.modifySelected} />
<TabList
tabs={this.filteredTabs()}
filter={this.state.filter}
selectedTab={this.getSelected()}
changeSelected={this.changeSelected}
activateSelected={this.activateSelected} />
<StatusBar
searchAllWindows={this.state.searchAllWindows}
changeSearchAllWindows={this.changeSearchAllWindows} />
</div>
/* jshint ignore:end */
);
@@ -94,11 +78,11 @@ module.exports = React.createClass({
return this.state.selected || this.filteredTabs()[0];
},
activateSelection: function() {
activateSelected: function() {
var selected = this.getSelected();
if (selected) {
tabBroker.switchTo(selected);
bus.emit('exit');
this.close();
}
},
@@ -110,7 +94,7 @@ module.exports = React.createClass({
this.setState({selected: tab});
},
moveSelection: function(change) {
modifySelected: function(change) {
var filteredTabs = this.filteredTabs();
if (!filteredTabs.length) return;
@@ -119,7 +103,7 @@ module.exports = React.createClass({
if (newIndex < 0) newIndex = 0;
if (newIndex >= filteredTabs.length) newIndex = filteredTabs.length - 1;
var newTab = filteredTabs[newIndex];
bus.emit('change:selected', newTab);
this.changeSelected(newTab);
},
changeSearchAllWindows: function(value) {

0 comments on commit a64f9db

Please sign in to comment.