public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 17:56:25 +00:00
Code Issues Releases Wiki Activity

refactor hotkeys

Browse Source
This commit is contained in:
Rokt33r
2015-07-19 15:06:36 +09:00
parent 16b60ada50
commit e9308bdd69
10 changed files with 233 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
browser/main/Containers/PlanetContainer.jsx
View File

@@ -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
var index = this.getIndexOfCurrentArticle()
if (this.state.currentPlanet == null || this.state.filteredArticles.length === 0) {
return
}
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) {
if (article.type === 'snippet' && localId === article.localId) {
content = (
<PlanetArticleDetail article={article}/>
)
this.state.currentPlanet.Articles.some(function (_article) {
if (_article.type === 'snippet' && localId === _article.localId) {
article = _article
return true
}
return false
})
} else if (this.isActive('blueprints')) {
this.state.currentPlanet.Articles.some(function (article) {
if (article.type === 'blueprint' && localId === article.localId) {
content = (
<PlanetArticleDetail article={article}/>
)
this.state.currentPlanet.Articles.some(function (_article) {
if (_article.type === 'blueprint' && localId === _article.localId) {
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}/>
<PlanetArticleList onPressUp={this.selectPriorArticle} onPressDown={this.selectNextArticle} articles={this.state.filteredArticles}/>
<PlanetNavigator onOpenLaunchModal={this.openLaunchModal} currentPlanet={this.state.currentPlanet} currentUser={user}/>
<PlanetArticleList articles={this.state.filteredArticles}/>
{content}
</div>
)