Merge branch 'master' into v4Metadata

shared/helpers.js

@@ -139,14 +139,35 @@ const splitTextStyleAndMetadata = (brew)=>{
 	if(typeof brew.tags === 'string') brew.tags = brew.tags ? [brew.tags] : [];
 };
 
-const printCurrentBrew = ()=>{
+const printCurrentBrew = async ()=>{
 	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
-		const 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='';
+		// 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'; });
+
+			// 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();
+
+			//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'));
+		}
 	}
 };
 

shared/markdown.js

@@ -83,7 +83,7 @@ renderer.image = function (token) {
 	if(href === null)
 		return text;
 
-	let out = `<img src="${href}" alt="${text}" style="--HB_src:url(${href});"`;
+	let out = `<img loading="lazy" src="${href}" alt="${text}" style="--HB_src:url(${href});"`;
 	if(title)
 		out += ` title="${title}"`;
 

shared/naturalcrit/styles/core.less

@@ -4,14 +4,7 @@
 @import './animations.less';
 @import './colors.less';
 @import './tooltip.less';
-@font-face {
-	font-family : 'CodeLight';
-	src         : url('./CODE Light.otf') format('opentype');
-}
-@font-face {
-	font-family : 'CodeBold';
-	src         : url('./CODE Bold.otf') format('opentype');
-}
+@import './fonts/fonts.css';
 html,body, #reactRoot {
 	height      : 100vh;
 	min-height  : 100vh;

shared/naturalcrit/styles/fonts/fonts.css

@@ -0,0 +1,38 @@
+/* open-sans-latin-wght-normal */
+
+@font-face {
+	font-family   : 'Open Sans';
+	font-style    : normal;
+	font-weight   : normal;
+	src           : url('open-sans-latin-400-normal.woff2') format('woff2');
+	font-display  : swap;
+	unicode-range : U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/*
+* Nowhere is font-weight: 700 actually used with Open Sans, everything is set to 800.
+* But, 800 *is* too bold.  And since we don't have an 800 font file, it's just using the 
+* 700 font file and it looks fine.  Not sure it's worth changing everything to 700?
+*/
+@font-face {
+	font-family   : 'Open Sans';
+	font-style    : normal;
+	font-weight   : bold;
+	src           : url('open-sans-latin-700-normal.woff2') format('woff2');
+	font-display  : swap;
+	unicode-range : U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+@font-face {
+	font-family  : 'CodeLight';
+	font-style   : normal;
+	src          : url('./CODE Light.otf') format('opentype');
+	font-display : block;
+}
+
+@font-face {
+	font-family  : 'CodeBold';
+	font-style   : normal;
+	src          : url('./CODE Bold.otf') format('opentype');
+	font-display : block;
+}