Improvements to printing and styling

Former-commit-id: 475e189c55cd22e4541b1c0d8f84592210ae1828 [formerly a7502fcc94a1eb0d378f83cba90e583550c20f0f]
Former-commit-id: df8bfd9592b208e7915e0922cf3912ea9bbba886

www/js/app.js

@@ -264,13 +264,29 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'images', 'cooki
             btnContinue.innerHTML = "Please wait";
             goToArticle(decodeURIComponent(params.lastPageVisit.replace(/@kiwixKey@.+/, "")));
         });
+        document.getElementById('printImageCheck').addEventListener('click', function (e) {
+            //Reload article if user wants to print images
+            if (e.target.checked && !params.allowHTMLExtraction) {
+                params.printIntercept = true;
+                params.printInterception = false;
+                params.allowHTMLExtraction = true;
+                var btnContinue = document.getElementById('confirm-print-continue');
+                var btnCancel = document.getElementById('confirm-print-cancel');
+                btnCancel.disabled = true;
+                btnContinue.disabled = true;
+                btnContinue.innerHTML = "Please wait";
+                goToArticle(decodeURIComponent(params.lastPageVisit.replace(/@kiwixKey@.+/, "")));
+            }
+        });
 
         function printCleanup() {
             params.printIntercept = false;
             params.printInterception = false;
+            // Immediately restore temporarily changed values
+            params.allowHTMLExtraction = cookies.getItem('allowHTMLExtraction') == "true";
             goToArticle(decodeURIComponent(params.lastPageVisit.replace(/@kiwixKey@.+/, "")));
             setTimeout(function () { //Restore temporarily changed value after page has reloaded
-                params.rememberLastPage = cookies.getItem('rememberLastPage') == "false" ? false : true;
+                params.rememberLastPage = cookies.getItem('rememberLastPage') == "true";
                 if (!params.rememberLastPage) {
                     cookies.setItem('lastPageVisit', "", Infinity);
                     if (typeof Storage !== "undefined") {
@@ -301,13 +317,16 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'images', 'cooki
             if (determinedTheme != "light") {
                 printModalContent.classList.add('dark');
             }
-            //If document is in wrong style, reload it
+            //If document is in wrong style, or images are one-time BLOBs, reload it
             var innerDoc = window.frames[0].frameElement.contentDocument;
+            var printDesktopCheck = document.getElementById("printDesktopCheck").checked;
+            var printImageCheck = document.getElementById("printImageCheck").checked;
             var styleIsDesktop = !/\bhref\s*=\s*["'][^"']*?(?:minerva|mobile)/i.test(innerDoc.head.innerHTML);
-            if (styleIsDesktop != document.getElementById("printDesktopCheck").checked) {
+            if (styleIsDesktop != printDesktopCheck || printImageCheck && !params.allowHTMLExtraction) {
-                //We need to reload the document because it doesn't match the requested style
+                //We need to reload the document because it doesn't match the requested style or images are one-time BLOBs
-                params.cssSource = styleIsDesktop ? "mobile" : "desktop";
+                params.cssSource = printDesktopCheck ? "desktop" : "mobile";
                 params.rememberLastPage = true; //Re-enable caching to speed up reloading of page
+                params.allowHTMLExtraction = true;
                 params.printIntercept = true;
                 params.printInterception = false;
                 btnCancel.disabled = true;
@@ -323,6 +342,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'images', 'cooki
             //Pre-load all images in case user wants to print them
             if (params.imageDisplay) {
                 document.getElementById("printImageCheck").disabled = false;
+                if (printImageCheck) {
                     btnCancel.disabled = true;
                     btnContinue.disabled = true;
                     btnContinue.innerHTML = "Loading images...";
@@ -334,6 +354,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'images', 'cooki
                         btnContinue.innerHTML = "Continue";
                     };
                     images.prepareImagesJQuery(printIntercept);
+                }
             } else {
                 document.getElementById("printImageCheck").checked = false;
                 document.getElementById("printImageCheck").disabled = true;
@@ -2193,7 +2214,8 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'images', 'cooki
                     $("#prefix").val("");
                     iframeArticleContent.onload = function () {
                         // The content is fully loaded by the browser : we can hide the spinner
-                        $("#searchingArticles").hide();
+                        //$("#searchingArticles").hide();
+                        setTab();
                         // Deflect drag-and-drop of ZIM file on the iframe to Config
                         var doc = iframeArticleContent.contentDocument ? iframeArticleContent.contentDocument.documentElement : null;
                         var docBody = doc ? doc.getElementsByTagName('body') : null;
@@ -2216,7 +2238,12 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'images', 'cooki
                     // Display the iframe content
                     $("#articleContent").show();
                 };
-                iframeArticleContent.src = "article.html";
+                // iframeArticleContent.src = "article.html";
+                var articleContent = iframeArticleContent.contentDocument;
+                articleContent.open('text/html', 'replace');
+                articleContent.write("<!DOCTYPE html>"); // Ensures browsers parse iframe in Standards mode
+                articleContent.write("<html><body></body></html>");
+                articleContent.close();
             } else {
                 // In jQuery mode, we read the article content in the backend and manually insert it in the iframe
                 if (dirEntry.isRedirect()) {

www/js/lib/transformStyles.js

@@ -83,6 +83,9 @@ define(['util', 'uiUtil'], function (util, uiUtil) {
                 if (/(-\/s\/style\.css)|minerva|inserted_style_mobile/i.test(zl)) { //If it matches one of the required styles...
                     zl = (cs == "mobile") ? "-/s/style-mobile.css" : "-/s/style.css";
                 }
+                // Rename this required mobile style so that we don't trigger reading ZIM as mobile in print intercept
+                zl = /css_modules\/mobile_main_page\.css/.test(zl) ? "-/s/css_modules/newstyle_main_page.css" : zl;
+                // Replace bootstrap with own: DEV: when upgrading to Bootstrap 4, stop doing this!
                 zl = zl.replace(/.+(bootstrap[^\/]*?\.css)/i, "css/$1");
                 //Make link href relative to root
                 //zl = zl.replace(/[\s\S]+?\/-\//i, "-/");

www/js/lib/uiUtil.js

@@ -55,10 +55,9 @@ define(['util'], function(util) {
             myReader.readAsDataURL(blob);
         } else {
             url = URL.createObjectURL(blob);
-            // We cannot revoke images if we wish to print
+            node.addEventListener('load', function () {
-            // node.addEventListener('load', function () {
+                URL.revokeObjectURL(url);
-            //     URL.revokeObjectURL(url);
+            });
-            // });
             node.setAttribute(nodeAttribute, url);
             if (callback) callback();
         }
@@ -134,6 +133,9 @@ define(['util'], function(util) {
         innerDocument.body.innerHTML = innerDocument.body.innerHTML.replace(/(<h2\b[^<]+external_links(?:[^<]|<\/)+<ul\s+(?!class="externalLinks"))/i, '$1class="externalLinks" ');
         innerDocument.body.innerHTML = innerDocument.body.innerHTML.replace(/(<h2\b[^<]+see_also(?:[^<]|<\/)+<ul\s+(?!class="seeAlso"))/i, '$1class="seeAlso" ');
         innerDocument.body.innerHTML = innerDocument.body.innerHTML.replace(/(<div\s+)([^>]+>\s+This article is issued from)/i, '$1class="copyLeft" $2');
+        // Using @media print on images doesn't get rid of them all, so use brute force
+        if (!document.getElementById("printImageCheck").checked) 
+            innerDocument.body.innerHTML = innerDocument.body.innerHTML.replace(/<img\b[^>]*>\s*/ig, '');
         var printOptions = innerDocument.getElementById("printOptions");
         //If there is no printOptions style block in the iframe, create it
         if (!printOptions) {
@@ -144,11 +146,11 @@ define(['util'], function(util) {
         }
         var printStyleInnerHTML = "@media print { ";
         printStyleInnerHTML += document.getElementById("printNavBoxCheck").checked ? "" : ".navbox, .vertical-navbox { display: none; } ";
-        printStyleInnerHTML += document.getElementById("printEndNoteCheck").checked ? "" : ".reflist { display: none; } ";
+        printStyleInnerHTML += document.getElementById("printEndNoteCheck").checked ? "" : ".reflist, div[class*=references] { display: none; } ";
         printStyleInnerHTML += document.getElementById("externalLinkCheck").checked ? "" : ".externalLinks { display: none; } ";
         printStyleInnerHTML += document.getElementById("seeAlsoLinkCheck").checked ? "" : ".seeAlso { display: none; } ";
         printStyleInnerHTML += document.getElementById("printInfoboxCheck").checked ? "" : ".mw-stack, .infobox, .infobox_v2, .infobox_v3, .qbRight, .qbRightDiv, .wv-quickbar, .wikitable { display: none; } ";
-        printStyleInnerHTML += document.getElementById("printImageCheck").checked ? "" : "img { display: none; } ";
+        // printStyleInnerHTML += document.getElementById("printImageCheck").checked ? "" : "img, .gallery { display: none; } ";
         printStyleInnerHTML += ".copyLeft { display: none } ";
         printStyleInnerHTML += ".map-pin { display: none } ";
         printStyleInnerHTML += ".external { padding-right: 0 !important } ";
@@ -158,6 +160,7 @@ define(['util'], function(util) {
         printStyleInnerHTML += "body { font-size: " + sliderVal + "% !important; } ";
         printStyleInnerHTML += "}";
         printOptions.innerHTML = printStyleInnerHTML;
+        
     }
 
     function downloadBlobUWP(blob, filename, message) {