mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-06-22 04:58:40 +00:00
Add print cycle events and loading msg
Since the print cycle now loads all images not-yet-loaded (due to lazy loading), there can be a moment of time where it appears pressing Get PDF is doing nothing, depending on connection speed. To add a "loading" message, a custom event is fired at the start and end of the print cycle (before the print dialog comes up).
This commit is contained in:
+23
-16
@@ -107,26 +107,33 @@ const splitTextStyleAndMetadata = (brew)=>{
|
||||
|
||||
const printCurrentBrew = async ()=>{
|
||||
if(window.typeof !== 'undefined') {
|
||||
const iframeDoc = window.frames['BrewRenderer'].contentDocument;
|
||||
// fire a custom event for the print cycle
|
||||
document.dispatchEvent(new CustomEvent('print:startprep'));
|
||||
try {
|
||||
const iframeDoc = window.frames['BrewRenderer'].contentDocument;
|
||||
|
||||
// get all img elements with lazy loading (currently only elements generated through MarkedJS)
|
||||
const lazyImages = [...iframeDoc.querySelectorAll('img[loading="lazy"]')];
|
||||
lazyImages.forEach((img)=>{ img.loading = 'eager'; });
|
||||
// get all img elements with lazy loading (currently only elements generated through MarkedJS)
|
||||
const lazyImages = [...iframeDoc.querySelectorAll('img[loading="lazy"]')];
|
||||
lazyImages.forEach((img)=>{ img.loading = 'eager'; });
|
||||
|
||||
// waits for images to load before resolving promise and opening print dialog
|
||||
await Promise.all(
|
||||
lazyImages
|
||||
.filter((img)=>!img.complete)
|
||||
.map((img)=>new Promise((resolve)=>{ img.onload = resolve; img.onerror = resolve; }))
|
||||
);
|
||||
// waits for images to load before resolving promise and opening print dialog
|
||||
await Promise.all(
|
||||
lazyImages
|
||||
.filter((img)=>!img.complete)
|
||||
.map((img)=>new Promise((resolve)=>{ img.onload = resolve; img.onerror = resolve; }))
|
||||
);
|
||||
|
||||
window.frames['BrewRenderer'].contentWindow.print();
|
||||
window.frames['BrewRenderer'].contentWindow.print();
|
||||
|
||||
//Force DOM reflow; Print dialog causes a repaint, and @media print CSS somehow makes out-of-view pages disappear
|
||||
const node = iframeDoc.getElementsByClassName('brewRenderer').item(0);
|
||||
node.style.display='none';
|
||||
node.offsetHeight; // accessing this is enough to trigger a reflow
|
||||
node.style.display='';
|
||||
//Force DOM reflow; Print dialog causes a repaint, and @media print CSS somehow makes out-of-view pages disappear
|
||||
const node = iframeDoc.getElementsByClassName('brewRenderer').item(0);
|
||||
node.style.display='none';
|
||||
node.offsetHeight; // accessing this is enough to trigger a reflow
|
||||
node.style.display='';
|
||||
} finally {
|
||||
// when lazy load images have all been loaded, and the doc re-rendered for print preview, emit 'finished' event.
|
||||
document.dispatchEvent(new CustomEvent('print:finishedprep'));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user