0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-25 03:12:40 +00:00

Force browser repaint after closing Print dialog

This commit is contained in:
Trevor Buckner
2024-05-23 17:08:24 -04:00
parent a227a792c0
commit 24769d69d4
5 changed files with 42 additions and 18 deletions

View File

@@ -72,7 +72,7 @@
.pages {
margin: 0px;
&>.page {
box-shadow: unset;
box-shadow: unset;
}
}
}

View File

@@ -1,13 +1,8 @@
const React = require('react');
const Nav = require('naturalcrit/nav/nav.jsx');
module.exports = function(props){
const printPage = () => {
if (window.typeof !== 'undefined')
window.frames['BrewRenderer'].contentWindow.print();
};
return <Nav.item onClick={printPage} color='purple' icon='far fa-file-pdf'>
module.exports = function({printFunction}){
return <Nav.item onClick={printFunction} color='purple' icon='far fa-file-pdf'>
get PDF
</Nav.item>;
};

View File

@@ -95,13 +95,24 @@ const EditPage = createClass({
const S_KEY = 83;
const P_KEY = 80;
if(e.keyCode == S_KEY) this.trySave(true);
if(e.keyCode == P_KEY) window.frames['BrewRenderer'].contentWindow.print();
if(e.keyCode == P_KEY) this.printPage();
if(e.keyCode == P_KEY || e.keyCode == S_KEY){
e.stopPropagation();
e.preventDefault();
}
},
printPage : function(){
if (window.typeof !== 'undefined') {
window.frames['BrewRenderer'].contentWindow.print();
//Force DOM reflow; Print dialog causes a repaint, and @media print CSS somehow makes out-of-view pages disappear
let node = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer').item(0);
node.style.display='none';
node.offsetHeight; // accessing this is enough to trigger a reflow
node.style.display='';
}
},
handleSplitMove : function(){
this.editor.current.update();
},
@@ -378,7 +389,7 @@ const EditPage = createClass({
post to reddit
</Nav.item>
</Nav.dropdown>
<PrintNavItem/>
<PrintNavItem printFunction={this.printPage}/>
<RecentNavItem brew={this.state.brew} storageKey='edit' />
<Account />
</Nav.section>

View File

@@ -90,13 +90,24 @@ const NewPage = createClass({
const S_KEY = 83;
const P_KEY = 80;
if(e.keyCode == S_KEY) this.save();
if(e.keyCode == P_KEY) window.frames['BrewRenderer'].contentWindow.print();
if(e.keyCode == P_KEY) this.printPage();
if(e.keyCode == P_KEY || e.keyCode == S_KEY){
e.stopPropagation();
e.preventDefault();
}
},
printPage : function(){
if (window.typeof !== 'undefined') {
window.frames['BrewRenderer'].contentWindow.print();
//Force DOM reflow; Print dialog causes a repaint, and @media print CSS somehow makes out-of-view pages disappear
let node = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer').item(0);
node.style.display='none';
node.offsetHeight; // accessing this is enough to trigger a reflow
node.style.display='';
}
},
handleSplitMove : function(){
this.editor.current.update();
},
@@ -181,10 +192,6 @@ const NewPage = createClass({
}
},
print : function(){
window.open('/print?dialog=true&local=print', '_blank');
},
renderNavbar : function(){
return <Navbar>
@@ -197,7 +204,7 @@ const NewPage = createClass({
<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
this.renderSaveButton()
}
<PrintNavItem/>
<PrintNavItem printFunction={this.printPage}/><PrintNavItem/>
<HelpNavItem />
<RecentNavItem />
<AccountNavItem />

View File

@@ -35,12 +35,23 @@ const SharePage = createClass({
if(!(e.ctrlKey || e.metaKey)) return;
const P_KEY = 80;
if(e.keyCode == P_KEY){
if(e.keyCode == P_KEY) window.frames['BrewRenderer'].contentWindow.print();
if(e.keyCode == P_KEY) this.printPage();
e.stopPropagation();
e.preventDefault();
}
},
printPage : function(){
if (window.typeof !== 'undefined') {
window.frames['BrewRenderer'].contentWindow.print();
//Force DOM reflow; Print dialog causes a repaint, and @media print CSS somehow makes out-of-view pages disappear
let node = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer').item(0);
node.style.display='none';
node.offsetHeight; // accessing this is enough to trigger a reflow
node.style.display='';
}
},
processShareId : function() {
return this.props.brew.googleId && !this.props.brew.stubbed ?
this.props.brew.googleId + this.props.brew.shareId :
@@ -72,7 +83,7 @@ const SharePage = createClass({
<Nav.section>
{this.props.brew.shareId && <>
<PrintNavItem/>
<PrintNavItem printFunction={this.printPage}/>
<Nav.dropdown>
<Nav.item color='red' icon='fas fa-code'>
source