From 1913975fa60c76bfb7e79a908b18e7e93793f71f Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Fri, 27 Mar 2015 21:58:04 +0100 Subject: web: use contexts to pass down stores. Using contexts frees us from the contracts we have using props - namely, we can assume them to be constant for the lifetime of the object. --- web/src/js/components/proxyapp.js | 44 ++++++++++++++++++--------------------- 1 file changed, 20 insertions(+), 24 deletions(-) (limited to 'web/src/js/components/proxyapp.js') diff --git a/web/src/js/components/proxyapp.js b/web/src/js/components/proxyapp.js index 863a9f53..411e1be8 100644 --- a/web/src/js/components/proxyapp.js +++ b/web/src/js/components/proxyapp.js @@ -20,52 +20,48 @@ var Reports = React.createClass({ var ProxyAppMain = React.createClass({ - mixins: [common.State], + mixins: [common.RouterState], + childContextTypes: { + settingsStore: React.PropTypes.object.isRequired, + flowStore: React.PropTypes.object.isRequired, + eventStore: React.PropTypes.object.isRequired + }, + getChildContext: function () { + return { + settingsStore: this.state.settingsStore, + flowStore: this.state.flowStore, + eventStore: this.state.eventStore + }; + }, getInitialState: function () { var eventStore = new store.EventLogStore(); var flowStore = new store.FlowStore(); - var settings = new store.SettingsStore(); + var settingsStore = new store.SettingsStore(); // Default Settings before fetch - _.extend(settings.dict,{ - }); + _.extend(settingsStore.dict, {}); return { - settings: settings, + settingsStore: settingsStore, flowStore: flowStore, eventStore: eventStore }; }, - componentDidMount: function () { - this.state.settings.addListener("recalculate", this.onSettingsChange); - window.app = this; - }, - componentWillUnmount: function () { - this.state.settings.removeListener("recalculate", this.onSettingsChange); - }, - onSettingsChange: function(){ - this.setState({ - settings: this.state.settings - }); - }, render: function () { var eventlog; if (this.getQuery()[Query.SHOW_EVENTLOG]) { eventlog = [ , - + ]; } else { eventlog = null; } return (
- - + + {eventlog} -
+
); } -- cgit v1.2.3 From fd911b75e6a59c1050815a6c183c4eb32aaabb98 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Sun, 29 Mar 2015 01:45:37 +0100 Subject: web: global key handling --- web/src/js/components/proxyapp.js | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) (limited to 'web/src/js/components/proxyapp.js') diff --git a/web/src/js/components/proxyapp.js b/web/src/js/components/proxyapp.js index 411e1be8..4013c3e4 100644 --- a/web/src/js/components/proxyapp.js +++ b/web/src/js/components/proxyapp.js @@ -9,6 +9,7 @@ var header = require("./header.js"); var EventLog = require("./eventlog.js"); var store = require("../store/store.js"); var Query = require("../actions.js").Query; +var Key = require("../utils.js").Key; //TODO: Move out of here, just a stub. @@ -26,6 +27,9 @@ var ProxyAppMain = React.createClass({ flowStore: React.PropTypes.object.isRequired, eventStore: React.PropTypes.object.isRequired }, + componentDidMount: function () { + React.findDOMNode(this).focus(); + }, getChildContext: function () { return { settingsStore: this.state.settingsStore, @@ -46,6 +50,22 @@ var ProxyAppMain = React.createClass({ eventStore: eventStore }; }, + getMainComponent: function () { + return this.refs.view.refs.__routeHandler__; + }, + onKeydown: function (e) { + switch(e.keyCode){ + case Key.I: + console.error("unimplemented: intercept"); + break; + default: + var main = this.getMainComponent(); + if(main && main.onMainKeyDown){ + main.onMainKeyDown(e); + } + } + + }, render: function () { var eventlog; if (this.getQuery()[Query.SHOW_EVENTLOG]) { @@ -57,9 +77,9 @@ var ProxyAppMain = React.createClass({ eventlog = null; } return ( -
+
- + {eventlog}
-- cgit v1.2.3 From 93d1d0416d6b48506e4579456ad3d7cd9dbd3e91 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Sun, 29 Mar 2015 03:24:03 +0200 Subject: web: add more keyboard shortcuts --- web/src/js/components/proxyapp.js | 36 ++++++++++++++++++++++++++++-------- 1 file changed, 28 insertions(+), 8 deletions(-) (limited to 'web/src/js/components/proxyapp.js') diff --git a/web/src/js/components/proxyapp.js b/web/src/js/components/proxyapp.js index 4013c3e4..ead6f7e8 100644 --- a/web/src/js/components/proxyapp.js +++ b/web/src/js/components/proxyapp.js @@ -25,16 +25,18 @@ var ProxyAppMain = React.createClass({ childContextTypes: { settingsStore: React.PropTypes.object.isRequired, flowStore: React.PropTypes.object.isRequired, - eventStore: React.PropTypes.object.isRequired + eventStore: React.PropTypes.object.isRequired, + returnFocus: React.PropTypes.func.isRequired, }, componentDidMount: function () { - React.findDOMNode(this).focus(); + this.focus(); }, getChildContext: function () { return { settingsStore: this.state.settingsStore, flowStore: this.state.flowStore, - eventStore: this.state.eventStore + eventStore: this.state.eventStore, + returnFocus: this.focus, }; }, getInitialState: function () { @@ -50,21 +52,39 @@ var ProxyAppMain = React.createClass({ eventStore: eventStore }; }, + focus: function () { + React.findDOMNode(this).focus(); + }, getMainComponent: function () { return this.refs.view.refs.__routeHandler__; }, onKeydown: function (e) { - switch(e.keyCode){ + + var selectFilterInput = function (name) { + var headerComponent = this.refs.header; + headerComponent.setState({active: header.MainMenu}, function () { + headerComponent.refs.active.refs[name].select(); + }); + }.bind(this); + + switch (e.keyCode) { case Key.I: - console.error("unimplemented: intercept"); + selectFilterInput("intercept"); + break; + case Key.L: + selectFilterInput("filter"); + break; + case Key.H: + selectFilterInput("highlight"); break; default: var main = this.getMainComponent(); - if(main && main.onMainKeyDown){ + if (main.onMainKeyDown) { main.onMainKeyDown(e); } + return; // don't prevent default then } - + e.preventDefault(); }, render: function () { var eventlog; @@ -78,7 +98,7 @@ var ProxyAppMain = React.createClass({ } return (
- + {eventlog}