From 120b74c6777aa9411591300f63a765d43d66d3b7 Mon Sep 17 00:00:00 2001
From: Jaifroid <egk10@cam.ac.uk>
Date: Mon, 20 Nov 2023 18:44:56 +0000
Subject: [PATCH] Add rudimentary support for static Zimit content (#1163)

Only supports static content, does not attempt to support anything dynamic. Clearly explains this to user when they load such a ZIM.
---
 i18n/en.jsonp.js         |   2 +-
 i18n/es.jsonp.js         |   2 +-
 i18n/fr.jsonp.js         |   2 +-
 www/js/app.js            | 138 ++++++++++++++++++++++++++-------------
 www/js/lib/zimArchive.js |  18 ++++-
 5 files changed, 111 insertions(+), 51 deletions(-)

diff --git a/i18n/en.jsonp.js b/i18n/en.jsonp.js
index 168d72218..2e5a55dc0 100644
--- a/i18n/en.jsonp.js
+++ b/i18n/en.jsonp.js
@@ -180,7 +180,7 @@ document.localeJson = {
       "dialog-serviceworker-defaultmodechange-title": "Change of default content injection mode",
       "dialog-serviceworker-defaultmodechange-message": "<p>We have switched you to ServiceWorker mode (this is now the default). It supports more types of ZIM archives and is much more robust.</p><p>If you experience problems with this mode, you can switch back to the (now deprecated) JQuery mode. In that case, please report the problems you experienced to us (see About section).</p>",
       "dialog-slideawaycheck-message": "This setting may not work correctly on Firefox OS. If you find that some ZIM links become unresponsive, try turning this setting off.",
-      "dialog-unsupported-archivetype-message": "<p>You are attempting to open a Zimit-style archive, which is currently unsupported in this app.</p><p>There is experimental support for this kind of archive in the Kiwix JS PWA. Go to: <a href=\"https://pwa.kiwix.org\" target=\"_blank\">https://pwa.kiwix.org</a>.</p><p>Alternatively, you can use Kiwix Serve to serve this archive to your browser from localhost. Kiwix Serve is included with <a href=\"https://www.kiwix.org/applications/\" target=\"_blank\">Kiwix Desktop</a>.</p>",
+      "dialog-unsupported-archivetype-message": "<p>You are attempting to open a Zimit-style archive, which is currently unsupported in this app.</p><p>A basic view of some static content is shown, but JavaScript and many hyperlinks are non-functional. There is more complete support for this kind of archive in the Kiwix JS PWA. Go to: <a href=\"https://pwa.kiwix.org\" target=\"_blank\">https://pwa.kiwix.org</a>.</p><p>Alternatively, you can use Kiwix Serve to serve this archive to your browser from localhost. Kiwix Serve is included with <a href=\"https://www.kiwix.org/applications/\" target=\"_blank\">Kiwix Desktop</a>.</p>",
       "dialog-unsupported-archivetype-title": "Unsupported archive type!",
       "dialog-warning": "Warning",
       "dialog-welcome-title": "Welcome",
diff --git a/i18n/es.jsonp.js b/i18n/es.jsonp.js
index 3bfa9f734..bc38a9f3a 100644
--- a/i18n/es.jsonp.js
+++ b/i18n/es.jsonp.js
@@ -180,7 +180,7 @@ document.localeJson = {
       "dialog-serviceworker-defaultmodechange-title": "Cambio del modo de inyección de contenido predeterminado",
       "dialog-serviceworker-defaultmodechange-message": "<p>Le hemos cambiado al modo ServiceWorker (ahora es el modo predeterminado). Soporta más tipos de archivo ZIM y es mucho más robusto.</p><p>Si tiene problemas con este modo, puede volver al modo JQuery (ahora obsoleto). En tal caso, por favor, informe de los problemas que ha experimentado (véase la página Información).</p>",
       "dialog-slideawaycheck-message": "Esta configuración puede no funcionar correctamente en Firefox OS. Si encuentra que algunos enlaces ZIM no responden, se recomienda desactivar esta configuración.",
-      "dialog-unsupported-archivetype-message": "<p>Está intentando abrir un archivo de estilo Zimit, que actualmente no es compatible con esta aplicación.</p><p>Hay soporte experimental para este tipo de archivo en la PWA de Kiwix JS. Vaya a: <a href=\"https://pwa.kiwix.org\" target=\"_blank\">https://pwa.kiwix.org</a>.</p><p>Alternativamente, puede usar Kiwix Serve para servir este archivo a su navegador desde localhost. Kiwix Serve está incluido con <a href=\"https://www.kiwix.org/applications/\" target=\"_blank\">Kiwix Desktop</a>.</p>",
+      "dialog-unsupported-archivetype-message": "<p>Está intentando abrir un archivo de estilo Zimit, que actualmente no es compatible con esta aplicación.</p><p>Se muestra una vista básica del contenido estático, pero JavaScript y muchos hipervínculos no son funcionales. Existe un soporte más completo para este tipo de archivo en la PWA de Kiwix JS. Vaya a: <a href=\"https://pwa.kiwix.org\" target=\"_blank\">https://pwa.kiwix.org</a>.</p><p>Alternativamente, puede usar Kiwix Serve para servir este archivo a su navegador desde localhost. Kiwix Serve está incluido con <a href=\"https://www.kiwix.org/applications/\" target=\"_blank\">Kiwix Desktop</a>.</p>",
       "dialog-unsupported-archivetype-title": "¡Tipo de archivo no compatible!",
       "dialog-warning": "¡Aviso!",
       "dialog-welcome-title": "Bienvenide",
diff --git a/i18n/fr.jsonp.js b/i18n/fr.jsonp.js
index ffa6e3450..6a82fb96e 100644
--- a/i18n/fr.jsonp.js
+++ b/i18n/fr.jsonp.js
@@ -180,7 +180,7 @@ document.localeJson = {
       "dialog-serviceworker-defaultmodechange-title": "Changement du mode d'injection de contenu par défaut",
       "dialog-serviceworker-defaultmodechange-message": "<p>Nous vous avons basculé en mode ServiceWorker (c'est maintenant le mode par défaut). Il prend en charge plus de types de fichiers ZIM et est beaucoup plus robuste.</p><p>Si vous rencontrez des problèmes avec ce mode, vous pouvez revenir au mode JQuery (maintenant obsolète). Dans ce cas, veuillez signaler les problèmes que vous avez rencontrés (voir la page Informations).</p>",
       "dialog-slideawaycheck-message": "Ce paramètre peut ne pas fonctionner correctement chez Firefox OS. Si vous constatez que certains liens ZIM deviennent inactifs, veuillez désactiver ce paramètre.",
-      "dialog-unsupported-archivetype-message": "<p>Vous essayez d'ouvrir un fichier de style Zimit, qui n'est actuellement pas pris en charge par cette application.</p><p>Il existe une prise en charge expérimentale de ce type de fichier dans la PWA de Kiwix JS. Allez sur&nbsp;: <a href=\"https://pwa.kiwix.org\" target=\"_blank\">https://pwa.kiwix.org</a>.</p><p>Alternativement, vous pouvez utiliser Kiwix Serve pour servir ce fichier à votre navigateur à partir de localhost. Kiwix Serve est inclus dans <a href=\"https://www.kiwix.org/applications/\" target=\"_blank\">Kiwix Desktop</a>.</p>",
+      "dialog-unsupported-archivetype-message": "<p>Vous essayez d'ouvrir un fichier de style Zimit, qui n'est actuellement pas pris en charge par cette application.</p><p>Une vue élémentaire du contenu statique est affichée, mais JavaScript et de nombreux liens hypertextes ne sont pas fonctionnels. La PWA Kiwix JS offre un support plus complet pour ce type d'archives. Allez sur&nbsp;: <a href=\"https://pwa.kiwix.org\" target=\"_blank\">https://pwa.kiwix.org</a>.</p><p>Alternativement, vous pouvez utiliser Kiwix Serve pour servir ce fichier à votre navigateur à partir de localhost. Kiwix Serve est inclus dans <a href=\"https://www.kiwix.org/applications/\" target=\"_blank\">Kiwix Desktop</a>.</p>",
       "dialog-unsupported-archivetype-title": "Type de fichier non pris en charge&nbsp;!",
       "dialog-warning": "Avertissement",
       "dialog-welcome-title": "Bienvenue",
diff --git a/www/js/app.js b/www/js/app.js
index f2e1d108b..9b2b5c7b1 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -1765,6 +1765,11 @@ function isDirEntryExpectedToBeDisplayed (dirEntry) {
  * @param {DirEntry} dirEntry The directory entry of the article to read
  */
 function readArticle (dirEntry) {
+    if (dirEntry === null || dirEntry === undefined) {
+        console.error('The directory entry for the requested article was not found (null or undefined)');
+        uiUtil.spinnerDisplay(false);
+        return;
+    }
     // Reset search prefix to allow users to search the same string again if they want to
     appstate.search.prefix = '';
     // Only update for expectedArticleURLToBeDisplayed.
@@ -1872,7 +1877,14 @@ function readArticle (dirEntry) {
             // Line below was inserted to prevent the spinner being hidden, possibly by an async function, when pressing the Random button in quick succession
             // TODO: Investigate whether it is really an async issue or whether there is a rogue .hide() statement in the chain
             document.getElementById('searchingArticles').style.display = '';
-            selectedArchive.readUtf8File(dirEntry, displayArticleContentInIframe);
+            selectedArchive.readUtf8File(dirEntry, function (fileDirEntry, content) {
+                // Because a Zimit landing page will change the dirEntry, we have to check again for a redirect
+                if (fileDirEntry.zimitRedirect) {
+                    return selectedArchive.getDirEntryByPath(fileDirEntry.zimitRedirect).then(readArticle);
+                } else {
+                    displayArticleContentInIframe(fileDirEntry, content);
+                }
+            });
         }
     }
 }
@@ -1955,7 +1967,7 @@ function displayArticleContentInIframe (dirEntry, htmlArticle) {
         return;
     }
     // Display Bootstrap warning alert if the landing page contains active content
-    if (!params.hideActiveContentWarning && params.isLandingPage) {
+    if (!params.hideActiveContentWarning && !selectedArchive.zimType === 'zimit' && params.isLandingPage) {
         if (regexpActiveContent.test(htmlArticle)) {
             // Exempted scripts: active content warning will not be displayed if any listed script is in the html [kiwix-js #889]
             if (!/<script\b[^'"]+['"][^'"]*?mooc\.js/i.test(htmlArticle)) {
@@ -1971,6 +1983,10 @@ function displayArticleContentInIframe (dirEntry, htmlArticle) {
     // This replacement also processes the URL relative to the page's ZIM URL so that we can find the ZIM URL of the asset
     // with the correct namespace (this works for old-style -,I,J namespaces and for new-style C namespace)
     htmlArticle = htmlArticle.replace(regexpTagsWithZimUrl, function (match, blockStart, equals, quote, relAssetUrl) {
+        if (selectedArchive.zimitPrefix && baseUrl === selectedArchive.zimitPrefix) {
+            // We are at the root of a Zimit archive, so we shouldn't allow any navigation higher than root
+            relAssetUrl = relAssetUrl.replace(/^[./]+/, '');
+        }
         var assetZIMUrl = uiUtil.deriveZimUrlFromRelativeUrl(relAssetUrl, baseUrl);
         // DEV: Note that deriveZimUrlFromRelativeUrl produces a *decoded* URL (and incidentally would remove any URI component
         // if we had captured it). We therefore re-encode the URI with encodeURI (which does not encode forward slashes) instead
@@ -2089,44 +2105,65 @@ function displayArticleContentInIframe (dirEntry, htmlArticle) {
             var anchorTarget = href.match(regexpLocalAnchorHref);
             if (href.length === 0) {
                 // It's a link with an empty href, pointing to the current page: do nothing.
-            } else if (anchorTarget) {
+                return;
+            }
+            if (anchorTarget) {
                 // It's a local anchor link : remove escapedUrl if any (see above)
                 anchor.setAttribute('href', '#' + anchorTarget[1]);
-            } else if ((anchor.protocol !== currentProtocol ||
-                anchor.host !== currentHost) && params.openExternalLinksInNewTabs) {
-                // It's an external URL : we should open it in a new tab
-                anchor.addEventListener('click', function (event) {
-                    // Find the closest enclosing A tag
-                    var clickedAnchor = uiUtil.closestAnchorEnclosingElement(event.target);
-                    uiUtil.warnAndOpenExternalLinkInNewTab(event, clickedAnchor);
-                });
-            } else {
-                // It's a link to an article or file in the ZIM
-                var uriComponent = uiUtil.removeUrlParameters(href);
-                var contentType;
-                var downloadAttrValue;
-                // Some file types need to be downloaded rather than displayed (e.g. *.epub)
-                // The HTML download attribute can be Boolean or a string representing the specified filename for saving the file
-                // For Boolean values, getAttribute can return any of the following: download="" download="download" download="true"
-                // So we need to test hasAttribute first: see https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute
-                // However, we cannot rely on the download attribute having been set, so we also need to test for known download file types
-                var isDownloadableLink = anchor.hasAttribute('download') || regexpDownloadLinks.test(href);
-                if (isDownloadableLink) {
-                    downloadAttrValue = anchor.getAttribute('download');
-                    // Normalize the value to a true Boolean or a filename string or true if there is no download attribute
-                    downloadAttrValue = /^(download|true|\s*)$/i.test(downloadAttrValue) || downloadAttrValue || true;
-                    contentType = anchor.getAttribute('type');
+                return;
+            }
+            if ((anchor.protocol !== currentProtocol ||
+              anchor.host !== currentHost) && params.openExternalLinksInNewTabs) {
+                var newHref = href;
+                if (selectedArchive.zimType === 'zimit') {
+                    // We need to check that the link isn't from a domain contained in the Zimit archive
+                    var zimitDomain = selectedArchive.zimitPrefix.replace(/^[CA/]+([^/]+).*/, '$1');
+                    newHref = href.replace(anchor.protocol + '//' + zimitDomain + '/', '');
                 }
-                // Add an onclick event to extract this article or file from the ZIM
-                // instead of following the link
-                anchor.addEventListener('click', function (e) {
-                    anchorParameter = href.match(/#([^#;]+)$/);
-                    anchorParameter = anchorParameter ? anchorParameter[1] : '';
-                    var zimUrl = uiUtil.deriveZimUrlFromRelativeUrl(uriComponent, baseUrl);
-                    goToArticle(zimUrl, downloadAttrValue, contentType);
-                    e.preventDefault();
-                });
+                if (newHref === href) {
+                    // It's an external URL : we should open it in a new tab
+                    anchor.addEventListener('click', function (event) {
+                        // Find the closest enclosing A tag
+                        var clickedAnchor = uiUtil.closestAnchorEnclosingElement(event.target);
+                        uiUtil.warnAndOpenExternalLinkInNewTab(event, clickedAnchor);
+                    });
+                    return;
+                } else {
+                    href = selectedArchive.zimitPrefix + newHref;
+                }
+            }
+            // It's a link to an article or file in the ZIM
+            var uriComponent = uiUtil.removeUrlParameters(href);
+            var contentType;
+            var downloadAttrValue;
+            // Some file types need to be downloaded rather than displayed (e.g. *.epub)
+            // The HTML download attribute can be Boolean or a string representing the specified filename for saving the file
+            // For Boolean values, getAttribute can return any of the following: download="" download="download" download="true"
+            // So we need to test hasAttribute first: see https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute
+            // However, we cannot rely on the download attribute having been set, so we also need to test for known download file types
+            var isDownloadableLink = anchor.hasAttribute('download') || regexpDownloadLinks.test(href);
+            if (isDownloadableLink) {
+                downloadAttrValue = anchor.getAttribute('download');
+                // Normalize the value to a true Boolean or a filename string or true if there is no download attribute
+                downloadAttrValue = /^(download|true|\s*)$/i.test(downloadAttrValue) || downloadAttrValue || true;
+                contentType = anchor.getAttribute('type');
             }
+            // Add an onclick event to extract this article or file from the ZIM
+            // instead of following the link
+            anchor.addEventListener('click', function (e) {
+                anchorParameter = href.match(/#([^#;]+)$/);
+                anchorParameter = anchorParameter ? anchorParameter[1] : '';
+                var zimUrl;
+                if (selectedArchive.zimitPrefix && ~href.indexOf(selectedArchive.zimitPrefix)) {
+                    // It's already a full ZIM URL, so we can use it directly
+                    zimUrl = href;
+                } else {
+                    // It's a relative URL, so we need to calculate the full ZIM URL
+                    zimUrl = uiUtil.deriveZimUrlFromRelativeUrl(uriComponent, baseUrl);
+                }
+                goToArticle(zimUrl, downloadAttrValue, contentType);
+                e.preventDefault();
+            });
         });
     }
 
@@ -2417,23 +2454,30 @@ function goToMainArticle () {
             // For now, this code doesn't support reading Zimit archives without error, so we warn the user and suggest some solutions
             if (selectedArchive.zimType === 'zimit') {
                 uiUtil.systemAlert(translateUI.t('dialog-unsupported-archivetype-message') || '<p>You are attempting to open a Zimit-style archive, which is currently unsupported in this app.</p>' +
-                    '<p>There is experimental support for this kind of archive in the Kiwix JS PWA. Go to: ' +
+                    '<p>A basic view of some static content is shown, but JavaScript and many hyperlinks are non-functional. ' +
+                    'There is more complete support for this kind of archive in the Kiwix JS PWA. Go to: ' +
                     '<a href="https://pwa.kiwix.org" target="_blank">https://pwa.kiwix.org</a>.</p>' +
                     '<p>Alternatively, you can use Kiwix Serve to serve this archive to your browser from localhost. ' +
                     'Kiwix Serve is included with <a href="https://www.kiwix.org/applications/" target="_blank">Kiwix Desktop</a>.</p>',
                 translateUI.t('dialog-unsupported-archivetype-title') || 'Unsupported archive type!');
                 document.getElementById('searchingArticles').style.display = 'none';
-                document.getElementById('welcomeText').style.display = '';
+                // document.getElementById('welcomeText').style.display = '';
+                // Some basic support for displaying Zimit content is available if we set the contentInjectionMode to jquery, storing the original value
+                params.originalContentInjectionMode = params.originalContentInjectionMode || params.contentInjectionMode;
+                params.contentInjectionMode = 'jquery';
             } else {
-                // DEV: see comment above under goToRandomArticle()
-                if (dirEntry.redirect || dirEntry.getMimetype() === 'text/html' || dirEntry.namespace === 'A') {
-                    params.isLandingPage = true;
-                    readArticle(dirEntry);
-                } else {
-                    console.error('The main page of this archive does not seem to be an article');
-                    document.getElementById('searchingArticles').style.display = 'none';
-                    document.getElementById('welcomeText').style.display = '';
-                }
+                // Restore the contentInjectionMode to its original value if it was changed above
+                params.contentInjectionMode = params.originalContentInjectionMode || params.contentInjectionMode;
+                params.originalContentInjectionMode = null;
+            }
+            // DEV: see comment above under goToRandomArticle()
+            if (dirEntry.redirect || dirEntry.getMimetype() === 'text/html' || dirEntry.namespace === 'A') {
+                params.isLandingPage = true;
+                readArticle(dirEntry);
+            } else {
+                console.error('The main page of this archive does not seem to be an article');
+                document.getElementById('searchingArticles').style.display = 'none';
+                document.getElementById('welcomeText').style.display = '';
             }
         }
     });
diff --git a/www/js/lib/zimArchive.js b/www/js/lib/zimArchive.js
index 07f20e835..00103a1e2 100644
--- a/www/js/lib/zimArchive.js
+++ b/www/js/lib/zimArchive.js
@@ -540,8 +540,24 @@ ZIMArchive.prototype.resolveRedirect = function (dirEntry, callback) {
  * @param {callbackStringContent} callback
  */
 ZIMArchive.prototype.readUtf8File = function (dirEntry, callback) {
+    var that = this;
     dirEntry.readData().then(function (data) {
-        callback(dirEntry, utf8.parse(data));
+        var html = utf8.parse(data);
+        if (that && that.zimType === 'zimit' && params.isLandingPage) {
+            // We are dealing with a Zimit ZIM, so we need to extract the redirect from the landing page
+            var redirect = html.match(/window\.mainUrl\s*=\s*(['"])https?:\/\/([^/]+)(.+?)\1/);
+            if (redirect && redirect[2] && redirect[3]) {
+                // Logic added to distinguish between Type 0 and Type 1 Zimit ZIMs
+                var relativeZimitPrefix = (dirEntry.namespace === 'C' ? 'A/' : '') + redirect[2];
+                var zimitStartPage = dirEntry.namespace + '/' + relativeZimitPrefix + redirect[3];
+                // Store a full Zimit prefix in the archive object
+                that.zimitPrefix = dirEntry.namespace + '/' + relativeZimitPrefix + '/';
+                // Mark the directory entry as a redirect
+                dirEntry.isredirect = true;
+                dirEntry.zimitRedirect = zimitStartPage;
+            }
+        }
+        callback(dirEntry, html);
     });
 };