From a05f44cf3244d008918dd6d6acb17187ff8ec5f0 Mon Sep 17 00:00:00 2001
From: Jaifroid <egk10@cam.ac.uk>
Date: Tue, 31 May 2022 02:45:02 +0100
Subject: [PATCH] Improve CSS rendering in Zimit archives

Former-commit-id: 8769e7b760a0689e87aec43bf994ac22fe9f2b42 [formerly f08d021ba6b6f3fac72256e6e86d9bc809246ce0 [formerly bc43f9b50dd87955c40f0e5d983b4279bf720fe4]]
Former-commit-id: a3f2a57f92cd218d8f9195528878ddd1992c3506 [formerly 552ded0128b039024697db53b46311fd6a5d25d9]
Former-commit-id: e11caebd562b7e0a5f53cf6068dc0180759f5897
---
 www/js/app.js | 49 ++++++++++++++++++++++++++++---------------------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/www/js/app.js b/www/js/app.js
index 75a27e12..205bf370 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -1600,6 +1600,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'cache', 'images
             }
             document.getElementById('darkInvert').style.display = determinedWikiTheme == 'light' ? 'none' : 'block';
         }
+
         document.getElementById('resetDisplayOnResizeCheck').addEventListener('click', function () {
             params.resetDisplayOnResize = this.checked;
             settingsStore.setItem('resetDisplayOnResize', this.checked, Infinity);
@@ -3667,6 +3668,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'cache', 'images
                     setupTableOfContents();
                     listenForSearchKeys();
                 }
+                switchCSSTheme();
                 //Set relative font size + Stackexchange-family multiplier
                 var zimType = /-\/s\/style\.css/i.test(doc.head.innerHTML) ? "desktop" : "mobile";
                 zimType = /-\/static\/main\.css/i.test(doc.head.innerHTML) ? "desktop-stx" : zimType; //Support stackexchange
@@ -4217,6 +4219,11 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'cache', 'images
             params.containsMathTex = params.useMathJax ? /<script\s+type\s*=\s*['"]\s*math\/tex\s*['"]/i.test(htmlArticle) : false;
             params.containsMathSVG = params.useMathJax ? /<img\s+(?=[^>]+?math-fallback-image)[^>]*?alt\s*=\s*['"][^'"]+[^>]+>/i.test(htmlArticle) : false;
 
+            // If there is no CSP, add one to prevent external scripts and content
+            if (!/<meta\b[^>]+Content-Security-Policy/i.test(htmlArticle)) {
+                htmlArticle = htmlArticle.replace(/(\s*<\/head>)/, '\n    <meta http-equiv="Content-Security-Policy" content="default-src \'self\' data: blob: bingmaps: \'unsafe-inline\' \'unsafe-eval\';"></meta>$1');
+            }
+
             if (params.zimType === 'open') {
                 //Adapt German Wikivoyage POI data format
                 var regexpGeoLocationDE = /<span\s+class="[^"]+?listing-coordinates[\s\S]+?latitude">([^<]+)[\s\S]+?longitude">([^<]+)<[\s\S]+?(<bdi\s[^>]+?listing-name[^>]+>(?:<a\b\s+href[^>]+>)?([^<]+))/ig;
@@ -4283,28 +4290,28 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'cache', 'images
                 });
             }
 
-            // If there is no CSP, add one to prevent external scripts and content
-            if (!/<meta\b[^>]+Content-Security-Policy/i.test(htmlArticle)) {
-                htmlArticle = htmlArticle.replace(/(\s*<\/head>)/, '\n    <meta http-equiv="Content-Security-Policy" content="default-src \'self\' data: blob: bingmaps: \'unsafe-inline\' \'unsafe-eval\';"></meta>$1');
-            }
-
-            //Preload stylesheets [kiwix-js #149]
-            console.log("Loading stylesheets...");
-            //Set up blobArray of promises
-            var prefix = (window.location.protocol + '//' + window.location.host + window.location.pathname).replace(/\/[^/]*$/, '');
-            var cssArray = htmlArticle.match(regexpSheetHref);
-            var blobArray = [];
-            var cssSource = params.cssSource;
-            var cssCache = params.cssCache;
-            var zimType = "";
-            if (cssArray) {
-                getBLOB(cssArray);
+            if (params.zimType === 'open' || params.contentInjectionMode === 'jquery') {
+                //Preload stylesheets [kiwix-js #149]
+                console.log("Loading stylesheets...");
+                //Set up blobArray of promises
+                var prefix = (window.location.protocol + '//' + window.location.host + window.location.pathname).replace(/\/[^/]*$/, '');
+                var cssArray = htmlArticle.match(regexpSheetHref);
+                var blobArray = [];
+                var cssSource = params.cssSource;
+                var cssCache = params.cssCache;
+                var zimType = "";
+                if (cssArray) {
+                    getBLOB(cssArray);
+                } else {
+                    // Apply dark or light content theme if necessary
+                    var determinedTheme = params.cssTheme == 'auto' ? cssUIThemeGetOrSet('auto', true) : params.cssTheme;
+                    var contentThemeStyle = (determinedTheme == "dark") ? '<link href="' + prefix + '/-/s/style-dark.css" rel="stylesheet" type="text/css">\r\n' :
+                        params.cssTheme == "invert" ? '<link href="' + prefix + '/-/s/style-dark-invert.css" rel="stylesheet" type="text/css">\r\n' : "";
+                    htmlArticle = htmlArticle.replace(/\s*(<\/head>)/i, contentThemeStyle + '$1');
+                    injectHTML();
+                }
             } else {
-                // Apply dark or light content theme if necessary
-                var determinedTheme = params.cssTheme == 'auto' ? cssUIThemeGetOrSet('auto', true) : params.cssTheme;
-                var contentThemeStyle = (determinedTheme == "dark") ? '<link href="' + prefix + '/-/s/style-dark.css" rel="stylesheet" type="text/css">\r\n' :
-                    params.cssTheme == "invert" ? '<link href="' + prefix + '/-/s/style-dark-invert.css" rel="stylesheet" type="text/css">\r\n' : "";
-                htmlArticle = htmlArticle.replace(/\s*(<\/head>)/i, contentThemeStyle + '$1');
+                // Zimit ZIMs in SW mode should not manipulate styles
                 injectHTML();
             }