Permalink
Browse files

Replace event bus with property-based function references

  • Loading branch information...
1 parent 2145be5 commit a64f9dbbfc1879470a3c0f3d81b12ed00fa13b6a Brandon Tilley committed Feb 21, 2014
@@ -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.