refactor hotkeys

browser/main/Components/BlueprintDeleteModal.jsx

@@ -9,6 +9,7 @@ var BlueprintDeleteModal = React.createClass({
   },
   componentDidMount: function () {
     this.unsubscribe = PlanetStore.listen(this.onListen)
+    React.findDOMNode(this.refs.submit).focus()
   },
   componentWillUnmount: function () {
     this.unsubscribe()
@@ -23,12 +24,18 @@ var BlueprintDeleteModal = React.createClass({
   stopPropagation: function (e) {
     e.stopPropagation()
   },
+  handleKeyDown: function (e) {
+    if ((e.keyCode === 13 && e.metaKey)) {
+      e.preventDefault()
+      this.submit()
+    }
+  },
   submit: function () {
     PlanetActions.deleteBlueprint(this.props.blueprint.id)
   },
   render: function () {
     return (
-      <div onClick={this.stopPropagation} className='BlueprintDeleteModal modal'>
+      <div onKeyDown={this.handleKeyDown} onClick={this.stopPropagation} className='BlueprintDeleteModal modal'>
         <div className='modal-header'>
           <h1>Delete Blueprint</h1>
         </div>
@@ -37,8 +44,8 @@ var BlueprintDeleteModal = React.createClass({
         </div>
         <div className='modal-footer'>
           <div className='modal-control'>
-            <button onClick={this.props.close} className='btn-default'>Cancle</button>
+            <button onClick={this.props.close} className='btn-default'>Cancel</button>
-            <button onClick={this.submit} className='btn-primary'>Delete</button>
+            <button ref='submit' onClick={this.submit} className='btn-primary'>Delete</button>
           </div>
         </div>
       </div>

browser/main/Components/BlueprintForm.jsx

@@ -94,6 +94,7 @@ var BlueprintForm = React.createClass({
   handleKeyDown: function (e) {
     if (e.keyCode === 13 && e.metaKey) {
       this.submit()
+      e.stopPropagation()
     }
   },
   render: function () {

browser/main/Components/ModalBase.jsx

@@ -9,7 +9,7 @@ var ModalBase = React.createClass({
   render: function () {
     if (this.props.isOpen) {
       return (
-        <div onClick={this.props.close} className='ModalBase'>
+        <div ref='modal' onClick={this.props.close} className='ModalBase'>
           {this.props.children}
         </div>
       )

browser/main/Components/PlanetArticleDetail.jsx

@@ -2,11 +2,6 @@ var React = require('react/addons')
 var moment = require('moment')
 
 var CodeViewer = require('../Components/CodeViewer')
-var ModalBase = require('../Components/ModalBase')
-var SnippetEditModal = require('../Components/SnippetEditModal')
-var SnippetDeleteModal = require('../Components/SnippetDeleteModal')
-var BlueprintEditModal = require('../Components/BlueprintEditModal')
-var BlueprintDeleteModal = require('../Components/BlueprintDeleteModal')
 
 var ForceUpdate = require('../Mixins/ForceUpdate')
 var Markdown = require('../Mixins/Markdown')
@@ -14,31 +9,15 @@ var Markdown = require('../Mixins/Markdown')
 var PlanetArticleDetail = React.createClass({
   mixins: [ForceUpdate(60000), Markdown],
   propTypes: {
-    article: React.PropTypes.object
+    article: React.PropTypes.object,
+    onOpenEditModal: React.PropTypes.func,
+    onOpenDeleteModal: React.PropTypes.func
   },
   getInitialState: function () {
     return {
       isEditModalOpen: false
     }
   },
-  openEditModal: function () {
-    this.setState({isEditModalOpen: true})
-  },
-  closeEditModal: function () {
-    this.setState({isEditModalOpen: false})
-  },
-  submitEditModal: function () {
-    this.setState({isEditModalOpen: false})
-  },
-  openDeleteModal: function () {
-    this.setState({isDeleteModalOpen: true})
-  },
-  closeDeleteModal: function () {
-    this.setState({isDeleteModalOpen: false})
-  },
-  submitDeleteModal: function () {
-    this.setState({isDeleteModalOpen: false})
-  },
   render: function () {
     var article = this.props.article
 
@@ -55,17 +34,9 @@ var PlanetArticleDetail = React.createClass({
           <div className='viewer-header'>
             <i className='fa fa-code fa-fw'></i> {article.callSign} <small className='updatedAt'>{moment(article.updatedAt).fromNow()}</small>
             <span className='control-group'>
-              <button onClick={this.openEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
+              <button onClick={this.props.onOpenEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
-              <button onClick={this.openDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
+              <button onClick={this.props.onOpenDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
             </span>
-
-            <ModalBase isOpen={this.state.isEditModalOpen} close={this.closeEditModal}>
-              <SnippetEditModal snippet={article} submit={this.submitEditModal} close={this.closeEditModal}/>
-            </ModalBase>
-
-            <ModalBase isOpen={this.state.isDeleteModalOpen} close={this.closeDeleteModal}>
-              <SnippetDeleteModal snippet={article} submit={this.submitDeleteModal} close={this.closeDeleteModal}/>
-            </ModalBase>
           </div>
           <div className='viewer-body'>
             <div className='viewer-detail'>
@@ -84,17 +55,9 @@ var PlanetArticleDetail = React.createClass({
         <div className='viewer-header'>
           <i className='fa fa-file-text-o fa-fw'></i> {article.title} <small className='updatedAt'>{moment(article.updatedAt).fromNow()}</small>
           <span className='control-group'>
-            <button onClick={this.openEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
+            <button onClick={this.props.onOpenEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
-            <button onClick={this.openDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
+            <button onClick={this.props.onOpenDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
           </span>
-
-          <ModalBase isOpen={this.state.isEditModalOpen} close={this.closeEditModal}>
-            <BlueprintEditModal blueprint={article} submit={this.submitEditModal} close={this.closeEditModal}/>
-          </ModalBase>
-
-          <ModalBase isOpen={this.state.isDeleteModalOpen} close={this.closeDeleteModal}>
-            <BlueprintDeleteModal blueprint={article} submit={this.submitDeleteModal} close={this.closeDeleteModal}/>
-          </ModalBase>
         </div>
         <div className='viewer-body'>
           <div className='tags'><i className='fa fa-tags'/>{tags}</div>

browser/main/Components/PlanetArticleList.jsx

@@ -8,20 +8,10 @@ var Markdown = require('../Mixins/Markdown')
 var PlanetArticleList = React.createClass({
   mixins: [ReactRouter.Navigation, ReactRouter.State, ForceUpdate(60000), Markdown],
   propTypes: {
-    articles: React.PropTypes.array,
+    articles: React.PropTypes.array
-    onPressDown: React.PropTypes.func,
-    onPressUp: React.PropTypes.func
   },
   handleKeyDown: function (e) {
-    switch (e.keyCode) {
-      case 38:
     e.preventDefault()
-        this.props.onPressUp()
-        break
-      case 40:
-        e.preventDefault()
-        this.props.onPressDown()
-    }
   },
   render: function () {
     var articles = this.props.articles.map(function (article) {

browser/main/Components/PlanetHeader.jsx

@@ -8,7 +8,8 @@ var PlanetHeader = React.createClass({
   },
   getInitialState: function () {
     return {
-      isMenuDropDownOpen: false
+      isMenuDropDownOpen: false,
+      search: ''
     }
   },
   componentDidMount: function () {
@@ -32,6 +33,11 @@ var PlanetHeader = React.createClass({
     this.setState({search: e.target.value})
     this.props.onSearchChange(e.target.value)
   },
+  handleKeyDown: function (e) {
+    if (e.keyCode === 27) {
+      React.findDOMNode(this.refs.search).blur()
+    }
+  },
   render: function () {
     var currentPlanetName = this.props.currentPlanet.name
 
@@ -48,7 +54,7 @@ var PlanetHeader = React.createClass({
         </div>
         <span className='searchInput'>
           <i className='fa fa-search'/>
-          <input onChange={this.handleChange} value={this.state.search} ref='search' tabIndex='1' type='text' className='inline-input circleInput' placeholder='Search...'/>
+          <input onKeyDown={this.handleKeyDown} onChange={this.handleChange} value={this.state.search} ref='search' tabIndex='1' type='text' className='inline-input circleInput' placeholder='Search...'/>
         </span>
         <a className='downloadBtn btn-primary'>Download Mac app</a>
       </div>

browser/main/Components/PlanetNavigator.jsx

@@ -1,8 +1,5 @@
 var React = require('react/addons')
 
-var ModalBase = require('../Components/ModalBase')
-var LaunchModal = require('../Components/LaunchModal')
-
 var PlanetNavigator = React.createClass({
   propTypes: {
     currentPlanet: React.PropTypes.shape({
@@ -10,31 +7,14 @@ var PlanetNavigator = React.createClass({
     }),
     currentUser: React.PropTypes.shape({
       name: React.PropTypes.string
-    })
+    }),
+    onOpenLaunchModal: React.PropTypes.func
   },
   getInitialState: function () {
     return {
       isLaunchModalOpen: false
     }
   },
-  handleKeyDown: function (e) {
-    if (e.keyCode === 13 && e.metaKey) {
-      e.preventDefault()
-      this.openLaunchModal()
-    }
-  },
-  componentDidMount: function () {
-    document.addEventListener('keydown', this.handleKeyDown, false)
-  },
-  componentWillUnmount: function () {
-    document.removeEventListener('keydown', this.handleKeyDown, false)
-  },
-  openLaunchModal: function () {
-    this.setState({isLaunchModalOpen: true})
-  },
-  closeLaunchModal: function () {
-    this.setState({isLaunchModalOpen: false})
-  },
   submitLaunchModal: function (ret) {
     console.log(ret)
     this.setState({isLaunchModalOpen: false})
@@ -42,12 +22,9 @@ var PlanetNavigator = React.createClass({
   render: function () {
     return (
       <div className='PlanetNavigator'>
-        <button onClick={this.openLaunchModal} className='btn-primary btn-block'>
+        <button onClick={this.props.onOpenLaunchModal} className='btn-primary btn-block'>
           <i className='fa fa-rocket fa-fw'/> Launch
         </button>
-        <ModalBase isOpen={this.state.isLaunchModalOpen} close={this.closeLaunchModal}>
-          <LaunchModal submit={this.submitLaunchModal} close={this.closeLaunchModal}/>
-        </ModalBase>
         <nav>
           <a>
             <i className='fa fa-home fa-fw'/> Home

browser/main/Components/SnippetDeleteModal.jsx

@@ -9,6 +9,7 @@ var SnippetDeleteModal = React.createClass({
   },
   componentDidMount: function () {
     this.unsubscribe = PlanetStore.listen(this.onListen)
+    React.findDOMNode(this.refs.submit).focus()
   },
   componentWillUnmount: function () {
     this.unsubscribe()
@@ -23,12 +24,18 @@ var SnippetDeleteModal = React.createClass({
   stopPropagation: function (e) {
     e.stopPropagation()
   },
+  handleKeyDown: function (e) {
+    if ((e.keyCode === 13 && e.metaKey)) {
+      e.preventDefault()
+      this.submit()
+    }
+  },
   submit: function () {
     PlanetActions.deleteSnippet(this.props.snippet.id)
   },
   render: function () {
     return (
-      <div onClick={this.stopPropagation} className='SnippetDeleteModal modal'>
+      <div onKeyDown={this.handleKeyDown} onClick={this.stopPropagation} className='SnippetDeleteModal modal'>
         <div className='modal-header'>
           <h1>Delete Snippet</h1>
         </div>
@@ -37,8 +44,8 @@ var SnippetDeleteModal = React.createClass({
         </div>
         <div className='modal-footer'>
           <div className='modal-control'>
-            <button onClick={this.props.close} className='btn-default'>Cancle</button>
+            <button onClick={this.props.close} className='btn-default'>Cancel</button>
-            <button onClick={this.submit} className='btn-primary'>Delete</button>
+            <button ref='submit' onClick={this.submit} className='btn-primary'>Delete</button>
           </div>
         </div>
       </div>

browser/main/Components/SnippetForm.jsx

@@ -86,6 +86,7 @@ var SnippetForm = React.createClass({
   handleKeyDown: function (e) {
     if (e.keyCode === 13 && e.metaKey) {
       this.submit()
+      e.stopPropagation()
     }
   },
   render: function () {

browser/main/Containers/PlanetContainer.jsx

@@ -5,6 +5,12 @@ var PlanetHeader = require('../Components/PlanetHeader')
 var PlanetNavigator = require('../Components/PlanetNavigator')
 var PlanetArticleList = require('../Components/PlanetArticleList')
 var PlanetArticleDetail = require('../Components/PlanetArticleDetail')
+var ModalBase = require('../Components/ModalBase')
+var LaunchModal = require('../Components/LaunchModal')
+var SnippetEditModal = require('../Components/SnippetEditModal')
+var SnippetDeleteModal = require('../Components/SnippetDeleteModal')
+var BlueprintEditModal = require('../Components/BlueprintEditModal')
+var BlueprintDeleteModal = require('../Components/BlueprintDeleteModal')
 
 var PlanetActions = require('../Actions/PlanetActions')
 
@@ -27,11 +33,13 @@ module.exports = React.createClass({
     this.unsubscribe = PlanetStore.listen(this.onFetched)
 
     PlanetActions.fetchPlanet(this.props.params.userName + '/' + this.props.params.planetName)
+    document.addEventListener('keydown', this.handleKeyDown)
   },
   componentWillUnmount: function () {
     this.unsubscribe()
+    document.removeEventListener('keydown', this.handleKeyDown)
   },
-  getIndexOfCurrentArticle: function () {
+  getFilteredIndexOfCurrentArticle: function () {
     var params = this.props.params
     var index = 0
 
@@ -53,12 +61,35 @@ module.exports = React.createClass({
 
     return index
   },
+  getIndexOfCurrentArticle: function () {
+    var params = this.props.params
+    var index = 0
+
+    if (this.isActive('snippets')) {
+      this.state.currentPlanet.Articles.some(function (_article, _index) {
+        if (_article.type === 'snippet' && _article.localId === parseInt(params.localId, 10)) {
+          index = _index
+        }
+      })
+    } else if (this.isActive('blueprints')) {
+      this.state.currentPlanet.Articles.some(function (_article, _index) {
+        if (_article.type === 'blueprint' && _article.localId === parseInt(params.localId, 10)) {
+          index = _index
+          return true
+        }
+        return false
+      })
+    }
+
+    return index
+  },
   selectArticleByIndex: function (index) {
     var article = this.state.filteredArticles[index]
     var params = this.props.params
 
     if (article == null) {
       this.transitionTo('planetHome', params)
+      return
     }
 
     if (article.type === 'snippet') {
@@ -76,28 +107,42 @@ module.exports = React.createClass({
   selectNextArticle: function () {
     if (this.state.currentPlanet == null || this.state.filteredArticles.length === 0) return
 
-    var index = this.getIndexOfCurrentArticle()
+    var index = this.getFilteredIndexOfCurrentArticle()
 
     if (index < this.state.filteredArticles.length - 1) {
       this.selectArticleByIndex(index + 1)
     }
   },
   selectPriorArticle: function () {
-    if (this.state.currentPlanet == null || this.state.filteredArticles.length === 0) return
+    if (this.state.currentPlanet == null || this.state.filteredArticles.length === 0) {
-
+      return
-    var index = this.getIndexOfCurrentArticle()
+    }
+    var index = this.getFilteredIndexOfCurrentArticle()
 
     if (index > 0) {
       this.selectArticleByIndex(index - 1)
+    } else {
+      React.findDOMNode(this).querySelector('.PlanetHeader .searchInput input').focus()
     }
   },
   onFetched: function (res) {
     var articles = this.state.currentPlanet == null ? null : this.state.currentPlanet.Articles
+    var filteredArticles = this.state.filteredArticles
 
     if (res.status === 'planetFetched') {
       var planet = res.data
       this.setState({currentPlanet: planet, filteredArticles: planet.Articles}, function () {
-        if (planet.Articles.length > 0) {
+        if (this.state.filteredArticles.length > 0) {
+          if (this.props.params.localId == null) {
+            var article = this.state.filteredArticles[0]
+            if (article == null) return
+            this.transitionTo(article.type === 'snippet' ? 'snippets' : 'blueprints', {
+              userName: this.props.params.userName,
+              planetName: this.props.params.planetName,
+              localId: planet.Articles[0].localId
+            })
+            return
+          }
           if (this.isActive('snippets')) {
             this.transitionTo('snippets', {
               userName: this.props.params.userName,
@@ -117,6 +162,7 @@ module.exports = React.createClass({
     }
 
     var article = res.data
+    var filteredIndex = this.getFilteredIndexOfCurrentArticle()
     var index = this.getIndexOfCurrentArticle()
 
     if (article.PlanetId === this.state.currentPlanet.id) {
@@ -124,7 +170,7 @@ module.exports = React.createClass({
         case 'articleCreated':
           articles.unshift(article)
 
-          this.setState({planet: this.state.currentPlanet}, function () {
+          this.setState({planet: this.state.currentPlanet, filteredArticles: filteredArticles}, function () {
             this.selectArticleByIndex(0)
           })
           break
@@ -132,16 +178,17 @@ module.exports = React.createClass({
           articles.splice(index, 1)
           articles.unshift(article)
 
-          this.setState({planet: this.state.currentPlanet})
+          this.setState({planet: this.state.currentPlanet, filteredArticles: filteredArticles})
           break
         case 'articleDeleted':
           articles.splice(index, 1)
 
-          this.setState({planet: this.state.currentPlanet}, function () {
+          this.setState({planet: this.state.currentPlanet, filteredArticles: filteredArticles}, function () {
+            this.closeDeleteModal()
             if (index > 0) {
-              this.selectArticleByIndex(index - 1)
+              this.selectArticleByIndex(filteredIndex - 1)
             } else {
-              this.selectArticleByIndex(index)
+              this.selectArticleByIndex(filteredIndex)
             }
           })
       }
@@ -178,40 +225,159 @@ module.exports = React.createClass({
       this.selectArticleByIndex(0)
     })
   },
+  openLaunchModal: function () {
+    this.setState({isLaunchModalOpen: true})
+  },
+  closeLaunchModal: function () {
+    this.setState({isLaunchModalOpen: false})
+  },
+  openEditModal: function () {
+    this.setState({isEditModalOpen: true})
+  },
+  closeEditModal: function () {
+    this.setState({isEditModalOpen: false})
+  },
+  submitEditModal: function () {
+    this.setState({isEditModalOpen: false})
+  },
+  openDeleteModal: function () {
+    this.setState({isDeleteModalOpen: true})
+  },
+  closeDeleteModal: function () {
+    this.setState({isDeleteModalOpen: false})
+  },
+  submitDeleteModal: function () {
+    this.setState({isDeleteModalOpen: false})
+  },
+  handleKeyDown: function (e) {
+    console.log(e.keyCode)
+    if (this.state.isLaunchModalOpen) {
+      if (e.keyCode === 27) this.closeLaunchModal()
+      return
+    }
+    if (this.state.isEditModalOpen) {
+      if (e.keyCode === 27) this.closeEditModal()
+      return
+    }
+    if (this.state.isDeleteModalOpen) {
+      if (e.keyCode === 27) this.closeDeleteModal()
+      return
+    }
+
+    if ((e.keyCode === 13 && e.metaKey)) {
+      e.preventDefault()
+      this.openLaunchModal()
+    }
+    var searchInput = React.findDOMNode(this).querySelector('.PlanetHeader .searchInput input')
+
+    if (document.activeElement === searchInput) {
+      switch (e.keyCode) {
+        case 38:
+          e.preventDefault()
+          break
+        case 40:
+          e.preventDefault()
+          searchInput.blur()
+          break
+        case 27:
+          searchInput.blur()
+          break
+      }
+      return
+    }
+
+    if (document.activeElement !== searchInput) {
+      switch (e.keyCode) {
+        case 38:
+          e.preventDefault()
+          this.selectPriorArticle()
+          break
+        case 40:
+          e.preventDefault()
+          this.selectNextArticle()
+          break
+        case 27:
+          searchInput.focus()
+          break
+      }
+
+      switch (e.keyCode) {
+        case 65:
+          e.preventDefault()
+          this.openLaunchModal()
+          break
+        case 68:
+          e.preventDefault()
+          this.openDeleteModal()
+          break
+        case 69:
+          e.preventDefault()
+          this.openEditModal()
+      }
+    }
+
+  },
   render: function () {
     var user = AuthStore.getUser()
     if (user == null) return (<div/>)
     if (this.state.currentPlanet == null) return (<div/>)
 
-    var content = (<div>Nothing selected</div>)
     var localId = parseInt(this.props.params.localId, 10)
+
+    var article
     if (this.isActive('snippets')) {
-      this.state.currentPlanet.Articles.some(function (article) {
+      this.state.currentPlanet.Articles.some(function (_article) {
-        if (article.type === 'snippet' && localId === article.localId) {
+        if (_article.type === 'snippet' && localId === _article.localId) {
-          content = (
+          article = _article
-            <PlanetArticleDetail article={article}/>
-          )
           return true
         }
         return false
       })
     } else if (this.isActive('blueprints')) {
-      this.state.currentPlanet.Articles.some(function (article) {
+      this.state.currentPlanet.Articles.some(function (_article) {
-        if (article.type === 'blueprint' && localId === article.localId) {
+        if (_article.type === 'blueprint' && localId === _article.localId) {
-          content = (
+          article = _article
-            <PlanetArticleDetail article={article}/>
-          )
           return true
         }
         return false
       })
     }
 
+    var content = article != null ? (
+      <PlanetArticleDetail article={article} onOpenEditModal={this.openEditModal} onOpenDeleteModal={this.openDeleteModal}/>
+    ) : (
+      <div>Nothing selected</div>
+    )
+
+    var editModal = article != null ? (article.type === 'snippet' ? (
+      <SnippetEditModal snippet={article} submit={this.submitEditModal} close={this.closeEditModal}/>
+    ) : (
+      <BlueprintEditModal blueprint={article} submit={this.submitEditModal} close={this.closeEditModal}/>
+    )) : null
+
+    var deleteModal = article != null ? (article.type === 'snippet' ? (
+      <SnippetDeleteModal snippet={article} close={this.closeDeleteModal}/>
+    ) : (
+      <BlueprintDeleteModal blueprint={article} close={this.closeDeleteModal}/>
+    )) : null
+
     return (
       <div className='PlanetContainer'>
+        <ModalBase isOpen={this.state.isLaunchModalOpen} close={this.closeLaunchModal}>
+          <LaunchModal submit={this.submitLaunchModal} close={this.closeLaunchModal}/>
+        </ModalBase>
+
+        <ModalBase isOpen={this.state.isEditModalOpen} close={this.closeEditModal}>
+          {editModal}
+        </ModalBase>
+
+        <ModalBase isOpen={this.state.isDeleteModalOpen} close={this.closeDeleteModal}>
+          {deleteModal}
+        </ModalBase>
+
         <PlanetHeader onSearchChange={this.handleSearchChange} currentPlanet={this.state.currentPlanet} currentUser={user}/>
-        <PlanetNavigator currentPlanet={this.state.currentPlanet} currentUser={user}/>
+        <PlanetNavigator onOpenLaunchModal={this.openLaunchModal} currentPlanet={this.state.currentPlanet} currentUser={user}/>
-        <PlanetArticleList onPressUp={this.selectPriorArticle} onPressDown={this.selectNextArticle} articles={this.state.filteredArticles}/>
+        <PlanetArticleList articles={this.state.filteredArticles}/>
         {content}
       </div>
     )