mirror of
https://github.com/stolksdorf/homebrewery.git
synced 2025-12-20 16:31:28 +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 React = require('react');
|
||||||
var _ = require('lodash');
|
var _ = require('lodash');
|
||||||
var cx = require('classnames');
|
var cx = require('classnames');
|
||||||
var request = require("superagent");
|
var request = require("superagent");
|
||||||
|
|
||||||
var Nav = require('naturalcrit/nav/nav.jsx');
|
var Nav = require('naturalcrit/nav/nav.jsx');
|
||||||
var Navbar = require('../../navbar/navbar.jsx');
|
var Navbar = require('../../navbar/navbar.jsx');
|
||||||
|
|
||||||
var EditTitle = require('../../navbar/editTitle.navitem.jsx');
|
var EditTitle = require('../../navbar/editTitle.navitem.jsx');
|
||||||
var ReportIssue = require('../../navbar/issue.navitem.jsx');
|
var ReportIssue = require('../../navbar/issue.navitem.jsx');
|
||||||
var PrintLink = require('../../navbar/print.navitem.jsx');
|
var PrintLink = require('../../navbar/print.navitem.jsx');
|
||||||
|
|
||||||
|
|
||||||
var SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
|
var SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
|
||||||
var Editor = require('../../editor/editor.jsx');
|
var Editor = require('../../editor/editor.jsx');
|
||||||
var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
|
var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
|
||||||
|
|
||||||
|
var HijackPrint = require('../hijackPrint.js');
|
||||||
|
|
||||||
const SAVE_TIMEOUT = 3000;
|
|
||||||
|
|
||||||
|
const SAVE_TIMEOUT = 3000;
|
||||||
|
|
||||||
var EditPage = React.createClass({
|
|
||||||
getDefaultProps: function() {
|
|
||||||
return {
|
var EditPage = React.createClass({
|
||||||
id : null,
|
getDefaultProps: function() {
|
||||||
brew : {
|
return {
|
||||||
title : '',
|
id : null,
|
||||||
text : '',
|
brew : {
|
||||||
shareId : null,
|
title : '',
|
||||||
editId : null,
|
text : '',
|
||||||
createdAt : null,
|
shareId : null,
|
||||||
updatedAt : null,
|
editId : null,
|
||||||
}
|
createdAt : null,
|
||||||
};
|
updatedAt : null,
|
||||||
},
|
}
|
||||||
|
};
|
||||||
getInitialState: function() {
|
},
|
||||||
return {
|
|
||||||
title : this.props.brew.title,
|
getInitialState: function() {
|
||||||
text: this.props.brew.text,
|
return {
|
||||||
isSaving : false,
|
title : this.props.brew.title,
|
||||||
isPending : false,
|
text: this.props.brew.text,
|
||||||
errors : null,
|
isSaving : false,
|
||||||
lastUpdated : this.props.brew.updatedAt
|
isPending : false,
|
||||||
};
|
errors : null,
|
||||||
},
|
lastUpdated : this.props.brew.updatedAt
|
||||||
savedBrew : null,
|
};
|
||||||
|
},
|
||||||
componentDidMount: function(){
|
savedBrew : null,
|
||||||
this.debounceSave = _.debounce(this.save, SAVE_TIMEOUT);
|
|
||||||
window.onbeforeunload = ()=>{
|
componentDidMount: function(){
|
||||||
if(this.state.isSaving || this.state.isPending){
|
this.debounceSave = _.debounce(this.save, SAVE_TIMEOUT);
|
||||||
return 'You have unsaved changes!';
|
window.onbeforeunload = ()=>{
|
||||||
}
|
if(this.state.isSaving || this.state.isPending){
|
||||||
}
|
return 'You have unsaved changes!';
|
||||||
},
|
}
|
||||||
componentWillUnmount: function() {
|
};
|
||||||
window.onbeforeunload = function(){};
|
|
||||||
},
|
document.onkeydown = HijackPrint(this.props.brew.shareId);
|
||||||
|
},
|
||||||
handleSplitMove : function(){
|
componentWillUnmount: function() {
|
||||||
this.refs.editor.update();
|
window.onbeforeunload = function(){};
|
||||||
},
|
document.onkeydown = function(){};
|
||||||
|
},
|
||||||
handleTitleChange : function(title){
|
|
||||||
this.setState({
|
handleSplitMove : function(){
|
||||||
title : title,
|
this.refs.editor.update();
|
||||||
isPending : true
|
},
|
||||||
});
|
|
||||||
|
handleTitleChange : function(title){
|
||||||
(this.hasChanges() ? this.debounceSave() : this.debounceSave.cancel());
|
this.setState({
|
||||||
},
|
title : title,
|
||||||
|
isPending : true
|
||||||
handleTextChange : function(text){
|
});
|
||||||
this.setState({
|
|
||||||
text : text,
|
(this.hasChanges() ? this.debounceSave() : this.debounceSave.cancel());
|
||||||
isPending : true
|
},
|
||||||
});
|
|
||||||
|
handleTextChange : function(text){
|
||||||
(this.hasChanges() ? this.debounceSave() : this.debounceSave.cancel());
|
this.setState({
|
||||||
},
|
text : text,
|
||||||
|
isPending : true
|
||||||
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;
|
(this.hasChanges() ? this.debounceSave() : this.debounceSave.cancel());
|
||||||
|
},
|
||||||
request.get('/homebrew/api/remove/' + this.props.brew.editId)
|
|
||||||
.send()
|
handleDelete : function(){
|
||||||
.end(function(err, res){
|
if(!confirm("are you sure you want to delete this brew?")) return;
|
||||||
window.location.href = '/homebrew';
|
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()
|
||||||
hasChanges : function(){
|
.end(function(err, res){
|
||||||
if(this.savedBrew){
|
window.location.href = '/homebrew';
|
||||||
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;
|
hasChanges : function(){
|
||||||
if(this.state.title !== this.props.brew.title) return true;
|
if(this.savedBrew){
|
||||||
}
|
if(this.state.text !== this.savedBrew.text) return true;
|
||||||
return false;
|
if(this.state.title !== this.savedBrew.title) return true;
|
||||||
},
|
}else{
|
||||||
|
if(this.state.text !== this.props.brew.text) return true;
|
||||||
save : function(){
|
if(this.state.title !== this.props.brew.title) return true;
|
||||||
this.debounceSave.cancel();
|
}
|
||||||
this.setState({
|
return false;
|
||||||
isSaving : true,
|
},
|
||||||
errors : null
|
|
||||||
});
|
save : function(){
|
||||||
|
this.debounceSave.cancel();
|
||||||
request
|
this.setState({
|
||||||
.put('/homebrew/api/update/' + this.props.brew.editId)
|
isSaving : true,
|
||||||
.send({
|
errors : null
|
||||||
text : this.state.text,
|
});
|
||||||
title : this.state.title
|
|
||||||
})
|
request
|
||||||
.end((err, res) => {
|
.put('/homebrew/api/update/' + this.props.brew.editId)
|
||||||
if(err){
|
.send({
|
||||||
this.setState({
|
text : this.state.text,
|
||||||
errors : err,
|
title : this.state.title
|
||||||
})
|
})
|
||||||
}else{
|
.end((err, res) => {
|
||||||
this.savedBrew = res.body;
|
if(err){
|
||||||
this.setState({
|
this.setState({
|
||||||
isPending : false,
|
errors : err,
|
||||||
isSaving : false,
|
})
|
||||||
lastUpdated : res.body.updatedAt
|
}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```';
|
renderSaveButton : function(){
|
||||||
}catch(e){}
|
if(this.state.errors){
|
||||||
|
var errMsg = '';
|
||||||
|
try{
|
||||||
return <Nav.item className='save error' icon="fa-warning">
|
errMsg += this.state.errors.toString() + '\n\n';
|
||||||
Oops!
|
errMsg += '```\n' + JSON.stringify(this.state.errors.response.error, null, ' ') + '\n```';
|
||||||
<div className='errorContainer'>
|
}catch(e){}
|
||||||
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
|
return <Nav.item className='save error' icon="fa-warning">
|
||||||
</a>.
|
Oops!
|
||||||
</div>
|
<div className='errorContainer'>
|
||||||
</Nav.item>
|
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
|
||||||
if(this.state.isSaving){
|
</a>.
|
||||||
return <Nav.item className='save' icon="fa-spinner fa-spin">saving...</Nav.item>
|
</div>
|
||||||
}
|
</Nav.item>
|
||||||
if(!this.state.isPending && !this.state.isSaving){
|
}
|
||||||
return <Nav.item className='save saved'>saved.</Nav.item>
|
|
||||||
}
|
if(this.state.isSaving){
|
||||||
if(this.state.isPending && this.hasChanges()){
|
return <Nav.item className='save' icon="fa-spinner fa-spin">saving...</Nav.item>
|
||||||
return <Nav.item className='save' onClick={this.save} color='blue' icon='fa-save'>Save Now</Nav.item>
|
}
|
||||||
}
|
if(!this.state.isPending && !this.state.isSaving){
|
||||||
},
|
return <Nav.item className='save saved'>saved.</Nav.item>
|
||||||
renderNavbar : function(){
|
}
|
||||||
return <Navbar>
|
if(this.state.isPending && this.hasChanges()){
|
||||||
<Nav.section>
|
return <Nav.item className='save' onClick={this.save} color='blue' icon='fa-save'>Save Now</Nav.item>
|
||||||
<EditTitle title={this.state.title} onChange={this.handleTitleChange} />
|
}
|
||||||
</Nav.section>
|
},
|
||||||
<Nav.section>
|
renderNavbar : function(){
|
||||||
{this.renderSaveButton()}
|
return <Navbar>
|
||||||
<Nav.item newTab={true} href={'/homebrew/share/' + this.props.brew.shareId} color='teal' icon='fa-share-alt'>
|
<Nav.section>
|
||||||
Share
|
<EditTitle title={this.state.title} onChange={this.handleTitleChange} />
|
||||||
</Nav.item>
|
</Nav.section>
|
||||||
<PrintLink shareId={this.props.brew.shareId} />
|
<Nav.section>
|
||||||
<Nav.item color='red' icon='fa-trash' onClick={this.handleDelete}>
|
{this.renderSaveButton()}
|
||||||
Delete
|
<Nav.item newTab={true} href={'/homebrew/share/' + this.props.brew.shareId} color='teal' icon='fa-share-alt'>
|
||||||
</Nav.item>
|
Share
|
||||||
</Nav.section>
|
</Nav.item>
|
||||||
</Navbar>
|
<PrintLink shareId={this.props.brew.shareId} />
|
||||||
},
|
<Nav.item color='red' icon='fa-trash' onClick={this.handleDelete}>
|
||||||
|
Delete
|
||||||
render : function(){
|
</Nav.item>
|
||||||
return <div className='editPage page'>
|
</Nav.section>
|
||||||
{this.renderNavbar()}
|
</Navbar>
|
||||||
|
},
|
||||||
<div className='content'>
|
|
||||||
<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
|
render : function(){
|
||||||
<Editor value={this.state.text} onChange={this.handleTextChange} ref='editor'/>
|
return <div className='editPage page'>
|
||||||
<BrewRenderer text={this.state.text} />
|
{this.renderNavbar()}
|
||||||
</SplitPane>
|
|
||||||
</div>
|
<div className='content'>
|
||||||
</div>
|
<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
|
||||||
}
|
<Editor value={this.state.text} onChange={this.handleTextChange} ref='editor'/>
|
||||||
});
|
<BrewRenderer text={this.state.text} />
|
||||||
|
</SplitPane>
|
||||||
module.exports = EditPage;
|
</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 React = require('react');
|
||||||
var _ = require('lodash');
|
var _ = require('lodash');
|
||||||
var cx = require('classnames');
|
var cx = require('classnames');
|
||||||
|
|
||||||
var Nav = require('naturalcrit/nav/nav.jsx');
|
var Nav = require('naturalcrit/nav/nav.jsx');
|
||||||
var Navbar = require('../../navbar/navbar.jsx');
|
var Navbar = require('../../navbar/navbar.jsx');
|
||||||
|
|
||||||
var PrintLink = require('../../navbar/print.navitem.jsx');
|
var PrintLink = require('../../navbar/print.navitem.jsx');
|
||||||
|
|
||||||
var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
|
var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
|
||||||
|
|
||||||
var SharePage = React.createClass({
|
var HijackPrint = require('../hijackPrint.js');
|
||||||
getDefaultProps: function() {
|
|
||||||
return {
|
var SharePage = React.createClass({
|
||||||
brew : {
|
getDefaultProps: function() {
|
||||||
title : '',
|
return {
|
||||||
text : '',
|
brew : {
|
||||||
shareId : null,
|
title : '',
|
||||||
createdAt : null,
|
text : '',
|
||||||
updatedAt : null,
|
shareId : null,
|
||||||
views : 0
|
createdAt : null,
|
||||||
}
|
updatedAt : null,
|
||||||
};
|
views : 0
|
||||||
},
|
}
|
||||||
|
};
|
||||||
render : function(){
|
},
|
||||||
return <div className='sharePage page'>
|
|
||||||
<Navbar>
|
componentDidMount: function() {
|
||||||
<Nav.section>
|
document.onkeydown = HijackPrint(this.props.brew.shareId);
|
||||||
<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
|
},
|
||||||
</Nav.section>
|
componentWillUnmount: function() {
|
||||||
|
document.onkeydown = function(){};
|
||||||
<Nav.section>
|
},
|
||||||
<PrintLink shareId={this.props.brew.shareId} />
|
|
||||||
<Nav.item href={'/homebrew/source/' + this.props.brew.shareId} color='teal' icon='fa-code'>
|
render : function(){
|
||||||
source
|
return <div className='sharePage page'>
|
||||||
</Nav.item>
|
<Navbar>
|
||||||
</Nav.section>
|
<Nav.section>
|
||||||
</Navbar>
|
<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
|
||||||
|
</Nav.section>
|
||||||
<div className='content'>
|
|
||||||
<BrewRenderer text={this.props.brew.text} />
|
<Nav.section>
|
||||||
</div>
|
<PrintLink shareId={this.props.brew.shareId} />
|
||||||
</div>
|
<Nav.item href={'/homebrew/source/' + this.props.brew.shareId} color='teal' icon='fa-code'>
|
||||||
}
|
source
|
||||||
});
|
</Nav.item>
|
||||||
|
</Nav.section>
|
||||||
module.exports = SharePage;
|
</Navbar>
|
||||||
|
|
||||||
|
<div className='content'>
|
||||||
|
<BrewRenderer text={this.props.brew.text} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = SharePage;
|
||||||
|
|||||||
Reference in New Issue
Block a user