mirror of
https://github.com/stolksdorf/homebrewery.git
synced 2025-12-16 01:25:57 +00:00
Ctrl p is now hijacked on the edit and share page to auto open to the brews print page
This commit is contained in:
Scott Tolksdorf
@@ -1,198 +1,203 @@
|
||||
var React = require('react');
|
||||
var _ = require('lodash');
|
||||
var cx = require('classnames');
|
||||
var request = require("superagent");
|
||||
|
||||
var Nav = require('naturalcrit/nav/nav.jsx');
|
||||
var Navbar = require('../../navbar/navbar.jsx');
|
||||
|
||||
var EditTitle = require('../../navbar/editTitle.navitem.jsx');
|
||||
var ReportIssue = require('../../navbar/issue.navitem.jsx');
|
||||
var PrintLink = require('../../navbar/print.navitem.jsx');
|
||||
|
||||
|
||||
var SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
|
||||
var Editor = require('../../editor/editor.jsx');
|
||||
var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
|
||||
|
||||
|
||||
|
||||
const SAVE_TIMEOUT = 3000;
|
||||
|
||||
|
||||
|
||||
var EditPage = React.createClass({
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
id : null,
|
||||
brew : {
|
||||
title : '',
|
||||
text : '',
|
||||
shareId : null,
|
||||
editId : null,
|
||||
createdAt : null,
|
||||
updatedAt : null,
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
title : this.props.brew.title,
|
||||
text: this.props.brew.text,
|
||||
isSaving : false,
|
||||
isPending : false,
|
||||
errors : null,
|
||||
lastUpdated : this.props.brew.updatedAt
|
||||
};
|
||||
},
|
||||
savedBrew : null,
|
||||
|
||||
componentDidMount: function(){
|
||||
this.debounceSave = _.debounce(this.save, SAVE_TIMEOUT);
|
||||
window.onbeforeunload = ()=>{
|
||||
if(this.state.isSaving || this.state.isPending){
|
||||
return 'You have unsaved changes!';
|
||||
}
|
||||
}
|
||||
},
|
||||
componentWillUnmount: function() {
|
||||
window.onbeforeunload = function(){};
|
||||
},
|
||||
|
||||
handleSplitMove : function(){
|
||||
this.refs.editor.update();
|
||||
},
|
||||
|
||||
handleTitleChange : function(title){
|
||||
this.setState({
|
||||
title : title,
|
||||
isPending : true
|
||||
});
|
||||
|
||||
(this.hasChanges() ? this.debounceSave() : this.debounceSave.cancel());
|
||||
},
|
||||
|
||||
handleTextChange : function(text){
|
||||
this.setState({
|
||||
text : text,
|
||||
isPending : true
|
||||
});
|
||||
|
||||
(this.hasChanges() ? this.debounceSave() : this.debounceSave.cancel());
|
||||
},
|
||||
|
||||
handleDelete : function(){
|
||||
if(!confirm("are you sure you want to delete this brew?")) return;
|
||||
if(!confirm("are you REALLY sure? You will not be able to recover it")) return;
|
||||
|
||||
request.get('/homebrew/api/remove/' + this.props.brew.editId)
|
||||
.send()
|
||||
.end(function(err, res){
|
||||
window.location.href = '/homebrew';
|
||||
});
|
||||
},
|
||||
|
||||
hasChanges : function(){
|
||||
if(this.savedBrew){
|
||||
if(this.state.text !== this.savedBrew.text) return true;
|
||||
if(this.state.title !== this.savedBrew.title) return true;
|
||||
}else{
|
||||
if(this.state.text !== this.props.brew.text) return true;
|
||||
if(this.state.title !== this.props.brew.title) return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
save : function(){
|
||||
this.debounceSave.cancel();
|
||||
this.setState({
|
||||
isSaving : true,
|
||||
errors : null
|
||||
});
|
||||
|
||||
request
|
||||
.put('/homebrew/api/update/' + this.props.brew.editId)
|
||||
.send({
|
||||
text : this.state.text,
|
||||
title : this.state.title
|
||||
})
|
||||
.end((err, res) => {
|
||||
if(err){
|
||||
this.setState({
|
||||
errors : err,
|
||||
})
|
||||
}else{
|
||||
this.savedBrew = res.body;
|
||||
this.setState({
|
||||
isPending : false,
|
||||
isSaving : false,
|
||||
lastUpdated : res.body.updatedAt
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
renderSaveButton : function(){
|
||||
if(this.state.errors){
|
||||
var errMsg = '';
|
||||
try{
|
||||
errMsg += this.state.errors.toString() + '\n\n';
|
||||
errMsg += '```\n' + JSON.stringify(this.state.errors.response.error, null, ' ') + '\n```';
|
||||
}catch(e){}
|
||||
|
||||
|
||||
return <Nav.item className='save error' icon="fa-warning">
|
||||
Oops!
|
||||
<div className='errorContainer'>
|
||||
Looks like there was a problem saving. <br />
|
||||
Report the issue <a target='_blank' href={'https://github.com/stolksdorf/naturalcrit/issues/new?body='+ encodeURIComponent(errMsg)}>
|
||||
here
|
||||
</a>.
|
||||
</div>
|
||||
</Nav.item>
|
||||
}
|
||||
|
||||
if(this.state.isSaving){
|
||||
return <Nav.item className='save' icon="fa-spinner fa-spin">saving...</Nav.item>
|
||||
}
|
||||
if(!this.state.isPending && !this.state.isSaving){
|
||||
return <Nav.item className='save saved'>saved.</Nav.item>
|
||||
}
|
||||
if(this.state.isPending && this.hasChanges()){
|
||||
return <Nav.item className='save' onClick={this.save} color='blue' icon='fa-save'>Save Now</Nav.item>
|
||||
}
|
||||
},
|
||||
renderNavbar : function(){
|
||||
return <Navbar>
|
||||
<Nav.section>
|
||||
<EditTitle title={this.state.title} onChange={this.handleTitleChange} />
|
||||
</Nav.section>
|
||||
<Nav.section>
|
||||
{this.renderSaveButton()}
|
||||
<Nav.item newTab={true} href={'/homebrew/share/' + this.props.brew.shareId} color='teal' icon='fa-share-alt'>
|
||||
Share
|
||||
</Nav.item>
|
||||
<PrintLink shareId={this.props.brew.shareId} />
|
||||
<Nav.item color='red' icon='fa-trash' onClick={this.handleDelete}>
|
||||
Delete
|
||||
</Nav.item>
|
||||
</Nav.section>
|
||||
</Navbar>
|
||||
},
|
||||
|
||||
render : function(){
|
||||
return <div className='editPage page'>
|
||||
{this.renderNavbar()}
|
||||
|
||||
<div className='content'>
|
||||
<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
|
||||
<Editor value={this.state.text} onChange={this.handleTextChange} ref='editor'/>
|
||||
<BrewRenderer text={this.state.text} />
|
||||
</SplitPane>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = EditPage;
|
||||
var React = require('react');
|
||||
var _ = require('lodash');
|
||||
var cx = require('classnames');
|
||||
var request = require("superagent");
|
||||
|
||||
var Nav = require('naturalcrit/nav/nav.jsx');
|
||||
var Navbar = require('../../navbar/navbar.jsx');
|
||||
|
||||
var EditTitle = require('../../navbar/editTitle.navitem.jsx');
|
||||
var ReportIssue = require('../../navbar/issue.navitem.jsx');
|
||||
var PrintLink = require('../../navbar/print.navitem.jsx');
|
||||
|
||||
|
||||
var SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
|
||||
var Editor = require('../../editor/editor.jsx');
|
||||
var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
|
||||
|
||||
var HijackPrint = require('../hijackPrint.js');
|
||||
|
||||
|
||||
|
||||
const SAVE_TIMEOUT = 3000;
|
||||
|
||||
|
||||
|
||||
var EditPage = React.createClass({
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
id : null,
|
||||
brew : {
|
||||
title : '',
|
||||
text : '',
|
||||
shareId : null,
|
||||
editId : null,
|
||||
createdAt : null,
|
||||
updatedAt : null,
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
title : this.props.brew.title,
|
||||
text: this.props.brew.text,
|
||||
isSaving : false,
|
||||
isPending : false,
|
||||
errors : null,
|
||||
lastUpdated : this.props.brew.updatedAt
|
||||
};
|
||||
},
|
||||
savedBrew : null,
|
||||
|
||||
componentDidMount: function(){
|
||||
this.debounceSave = _.debounce(this.save, SAVE_TIMEOUT);
|
||||
window.onbeforeunload = ()=>{
|
||||
if(this.state.isSaving || this.state.isPending){
|
||||
return 'You have unsaved changes!';
|
||||
}
|
||||
};
|
||||
|
||||
document.onkeydown = HijackPrint(this.props.brew.shareId);
|
||||
},
|
||||
componentWillUnmount: function() {
|
||||
window.onbeforeunload = function(){};
|
||||
document.onkeydown = function(){};
|
||||
},
|
||||
|
||||
handleSplitMove : function(){
|
||||
this.refs.editor.update();
|
||||
},
|
||||
|
||||
handleTitleChange : function(title){
|
||||
this.setState({
|
||||
title : title,
|
||||
isPending : true
|
||||
});
|
||||
|
||||
(this.hasChanges() ? this.debounceSave() : this.debounceSave.cancel());
|
||||
},
|
||||
|
||||
handleTextChange : function(text){
|
||||
this.setState({
|
||||
text : text,
|
||||
isPending : true
|
||||
});
|
||||
|
||||
(this.hasChanges() ? this.debounceSave() : this.debounceSave.cancel());
|
||||
},
|
||||
|
||||
handleDelete : function(){
|
||||
if(!confirm("are you sure you want to delete this brew?")) return;
|
||||
if(!confirm("are you REALLY sure? You will not be able to recover it")) return;
|
||||
|
||||
request.get('/homebrew/api/remove/' + this.props.brew.editId)
|
||||
.send()
|
||||
.end(function(err, res){
|
||||
window.location.href = '/homebrew';
|
||||
});
|
||||
},
|
||||
|
||||
hasChanges : function(){
|
||||
if(this.savedBrew){
|
||||
if(this.state.text !== this.savedBrew.text) return true;
|
||||
if(this.state.title !== this.savedBrew.title) return true;
|
||||
}else{
|
||||
if(this.state.text !== this.props.brew.text) return true;
|
||||
if(this.state.title !== this.props.brew.title) return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
save : function(){
|
||||
this.debounceSave.cancel();
|
||||
this.setState({
|
||||
isSaving : true,
|
||||
errors : null
|
||||
});
|
||||
|
||||
request
|
||||
.put('/homebrew/api/update/' + this.props.brew.editId)
|
||||
.send({
|
||||
text : this.state.text,
|
||||
title : this.state.title
|
||||
})
|
||||
.end((err, res) => {
|
||||
if(err){
|
||||
this.setState({
|
||||
errors : err,
|
||||
})
|
||||
}else{
|
||||
this.savedBrew = res.body;
|
||||
this.setState({
|
||||
isPending : false,
|
||||
isSaving : false,
|
||||
lastUpdated : res.body.updatedAt
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
renderSaveButton : function(){
|
||||
if(this.state.errors){
|
||||
var errMsg = '';
|
||||
try{
|
||||
errMsg += this.state.errors.toString() + '\n\n';
|
||||
errMsg += '```\n' + JSON.stringify(this.state.errors.response.error, null, ' ') + '\n```';
|
||||
}catch(e){}
|
||||
|
||||
|
||||
return <Nav.item className='save error' icon="fa-warning">
|
||||
Oops!
|
||||
<div className='errorContainer'>
|
||||
Looks like there was a problem saving. <br />
|
||||
Report the issue <a target='_blank' href={'https://github.com/stolksdorf/naturalcrit/issues/new?body='+ encodeURIComponent(errMsg)}>
|
||||
here
|
||||
</a>.
|
||||
</div>
|
||||
</Nav.item>
|
||||
}
|
||||
|
||||
if(this.state.isSaving){
|
||||
return <Nav.item className='save' icon="fa-spinner fa-spin">saving...</Nav.item>
|
||||
}
|
||||
if(!this.state.isPending && !this.state.isSaving){
|
||||
return <Nav.item className='save saved'>saved.</Nav.item>
|
||||
}
|
||||
if(this.state.isPending && this.hasChanges()){
|
||||
return <Nav.item className='save' onClick={this.save} color='blue' icon='fa-save'>Save Now</Nav.item>
|
||||
}
|
||||
},
|
||||
renderNavbar : function(){
|
||||
return <Navbar>
|
||||
<Nav.section>
|
||||
<EditTitle title={this.state.title} onChange={this.handleTitleChange} />
|
||||
</Nav.section>
|
||||
<Nav.section>
|
||||
{this.renderSaveButton()}
|
||||
<Nav.item newTab={true} href={'/homebrew/share/' + this.props.brew.shareId} color='teal' icon='fa-share-alt'>
|
||||
Share
|
||||
</Nav.item>
|
||||
<PrintLink shareId={this.props.brew.shareId} />
|
||||
<Nav.item color='red' icon='fa-trash' onClick={this.handleDelete}>
|
||||
Delete
|
||||
</Nav.item>
|
||||
</Nav.section>
|
||||
</Navbar>
|
||||
},
|
||||
|
||||
render : function(){
|
||||
return <div className='editPage page'>
|
||||
{this.renderNavbar()}
|
||||
|
||||
<div className='content'>
|
||||
<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
|
||||
<Editor value={this.state.text} onChange={this.handleTextChange} ref='editor'/>
|
||||
<BrewRenderer text={this.state.text} />
|
||||
</SplitPane>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = EditPage;
|
||||
|
||||
10
client/homebrew/pages/hijackPrint.js
Normal file
10
client/homebrew/pages/hijackPrint.js
Normal file
@@ -0,0 +1,10 @@
|
||||
module.exports = function(shareId){
|
||||
return function(event){
|
||||
event = event || window.event;
|
||||
if(event.ctrlKey && event.keyCode == 80){
|
||||
var win = window.open(`/homebrew/print/${shareId}?dialog=true`, '_blank');
|
||||
win.focus();
|
||||
event.preventDefault();
|
||||
}
|
||||
};
|
||||
};
|
||||
@@ -1,48 +1,57 @@
|
||||
var React = require('react');
|
||||
var _ = require('lodash');
|
||||
var cx = require('classnames');
|
||||
|
||||
var Nav = require('naturalcrit/nav/nav.jsx');
|
||||
var Navbar = require('../../navbar/navbar.jsx');
|
||||
|
||||
var PrintLink = require('../../navbar/print.navitem.jsx');
|
||||
|
||||
var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
|
||||
|
||||
var SharePage = React.createClass({
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
brew : {
|
||||
title : '',
|
||||
text : '',
|
||||
shareId : null,
|
||||
createdAt : null,
|
||||
updatedAt : null,
|
||||
views : 0
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
render : function(){
|
||||
return <div className='sharePage page'>
|
||||
<Navbar>
|
||||
<Nav.section>
|
||||
<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
|
||||
</Nav.section>
|
||||
|
||||
<Nav.section>
|
||||
<PrintLink shareId={this.props.brew.shareId} />
|
||||
<Nav.item href={'/homebrew/source/' + this.props.brew.shareId} color='teal' icon='fa-code'>
|
||||
source
|
||||
</Nav.item>
|
||||
</Nav.section>
|
||||
</Navbar>
|
||||
|
||||
<div className='content'>
|
||||
<BrewRenderer text={this.props.brew.text} />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = SharePage;
|
||||
var React = require('react');
|
||||
var _ = require('lodash');
|
||||
var cx = require('classnames');
|
||||
|
||||
var Nav = require('naturalcrit/nav/nav.jsx');
|
||||
var Navbar = require('../../navbar/navbar.jsx');
|
||||
|
||||
var PrintLink = require('../../navbar/print.navitem.jsx');
|
||||
|
||||
var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
|
||||
|
||||
var HijackPrint = require('../hijackPrint.js');
|
||||
|
||||
var SharePage = React.createClass({
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
brew : {
|
||||
title : '',
|
||||
text : '',
|
||||
shareId : null,
|
||||
createdAt : null,
|
||||
updatedAt : null,
|
||||
views : 0
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
componentDidMount: function() {
|
||||
document.onkeydown = HijackPrint(this.props.brew.shareId);
|
||||
},
|
||||
componentWillUnmount: function() {
|
||||
document.onkeydown = function(){};
|
||||
},
|
||||
|
||||
render : function(){
|
||||
return <div className='sharePage page'>
|
||||
<Navbar>
|
||||
<Nav.section>
|
||||
<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
|
||||
</Nav.section>
|
||||
|
||||
<Nav.section>
|
||||
<PrintLink shareId={this.props.brew.shareId} />
|
||||
<Nav.item href={'/homebrew/source/' + this.props.brew.shareId} color='teal' icon='fa-code'>
|
||||
source
|
||||
</Nav.item>
|
||||
</Nav.section>
|
||||
</Navbar>
|
||||
|
||||
<div className='content'>
|
||||
<BrewRenderer text={this.props.brew.text} />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = SharePage;
|
||||
|
||||
Reference in New Issue
Block a user