実装 - Hotkey

browser/main/Containers/HomeContainer.jsx

@@ -7,21 +7,29 @@ var State = ReactRouter.State
 var Navigation = ReactRouter.Navigation
 
 var AuthFilter = require('../Mixins/AuthFilter')
+var KeyCaster = require('../Mixins/KeyCaster')
 
 var HomeNavigator = require('../Components/HomeNavigator')
 
 module.exports = React.createClass({
-  mixins: [AuthFilter.OnlyUser, State, Navigation],
+  mixins: [AuthFilter.OnlyUser, State, Navigation, KeyCaster('homeContainer')],
   componentDidMount: function () {
     if (this.isActive('homeEmpty')) {
       var user = JSON.parse(localStorage.getItem('currentUser'))
       this.transitionTo('userHome', {userName: user.name})
     }
   },
+  onKeyCast: function (e) {
+    switch (e.status) {
+      case 'switchPlanet':
+        this.refs.navigator.switchPlanetByIndex(e.data)
+        break
+    }
+  },
   render: function () {
     return (
       <div className='HomeContainer'>
-        <HomeNavigator/>
+        <HomeNavigator ref='navigator'/>
         <RouteHandler/>
       </div>
     )

browser/main/Containers/PlanetContainer.jsx

@@ -14,12 +14,13 @@ var Hq = require('../Services/Hq')
 var Modal = require('../Mixins/Modal')
 var ArticleFilter = require('../Mixins/ArticleFilter')
 var Helper = require('../Mixins/Helper')
+var KeyCaster = require('../Mixins/KeyCaster')
 
 var UserStore = require('../Stores/UserStore')
 var PlanetStore = require('../Stores/PlanetStore')
 
 module.exports = React.createClass({
-  mixins: [ReactRouter.Navigation, ReactRouter.State, Modal, Reflux.listenTo(UserStore, 'onUserChange'), Reflux.listenTo(PlanetStore, 'onPlanetChange'), ArticleFilter, Helper],
+  mixins: [ReactRouter.Navigation, ReactRouter.State, Modal, Reflux.listenTo(UserStore, 'onUserChange'), Reflux.listenTo(PlanetStore, 'onPlanetChange'), ArticleFilter, Helper, KeyCaster('planetContainer')],
   propTypes: {
     params: React.PropTypes.object,
     planetName: React.PropTypes.string
@@ -62,6 +63,28 @@ module.exports = React.createClass({
       })
     }
   },
+  onKeyCast: function (e) {
+    switch (e.status) {
+      case 'openLaunchModal':
+        this.refs.navigator.openLaunchModal()
+        break
+      case 'selectNextArticle':
+        this.selectNextArticle()
+        break
+      case 'selectPriorArticle':
+        this.selectPriorArticle()
+        break
+      case 'toggleFocusSearchInput':
+        this.toggleFocusSearchInput()
+        break
+      case 'openEditModal':
+        this.refs.detail.openEditModal()
+        break
+      case 'openDeleteModal':
+        this.refs.detail.openDeleteModal()
+        break
+    }
+  },
   onPlanetChange: function (res) {
     if (this.state.planet == null) return
 
@@ -237,9 +260,17 @@ module.exports = React.createClass({
     if (index > 0) {
       this.selectArticleByListIndex(index - 1)
     } else {
-      React.findDOMNode(this).querySelector('.PlanetHeader .searchInput input').focus()
+      React.findDOMNode(this.refs.header.refs.search).focus()
     }
   },
+  toggleFocusSearchInput: function () {
+    var search = React.findDOMNode(this.refs.header.refs.search)
+    if (document.activeElement === search) {
+      React.findDOMNode(this.refs.header.refs.search).blur()
+      return
+    }
+    React.findDOMNode(this.refs.header.refs.search).focus()
+  },
   handleSearchChange: function (e) {
     this.setState({search: e.target.value}, function () {
       this.selectArticleByListIndex(0)
@@ -309,9 +340,6 @@ module.exports = React.createClass({
       this.setState({search: '#' + tag})
     }.bind(this)
   },
-  focus: function () {
-    React.findDOMNode(this).focus()
-  },
   render: function () {
     if (this.state.planet == null) return (<div/>)
 
@@ -346,6 +374,7 @@ module.exports = React.createClass({
     return (
       <div className='PlanetContainer'>
         <PlanetHeader
+          ref='header'
           search={this.state.search}
           fetchPlanet={this.fetchPlanet}
           onSearchChange={this.handleSearchChange}