From 01f7e29e2bb5315c37f2690771f29e7d3ff5a63f Mon Sep 17 00:00:00 2001
From: Dan Niles <56271899+dan-niles@users.noreply.github.com>
Date: Thu, 28 Mar 2024 17:24:14 +0530
Subject: [PATCH] Add option to turn off external link warning #891 (#1236)

Signed off by @dan-niles.
---
 i18n/en.jsonp.js     |  3 +++
 i18n/es.jsonp.js     |  3 +++
 i18n/fr.jsonp.js     |  3 +++
 www/index.html       | 19 +++++++++++++++----
 www/js/app.js        |  4 ++++
 www/js/init.js       |  3 +++
 www/js/lib/uiUtil.js | 29 +++++++++++++++++++++++------
 7 files changed, 54 insertions(+), 10 deletions(-)

diff --git a/i18n/en.jsonp.js b/i18n/en.jsonp.js
index fc43344f..1d8b3ff1 100644
--- a/i18n/en.jsonp.js
+++ b/i18n/en.jsonp.js
@@ -94,6 +94,8 @@ document.localeJson = {
       "configure-expert-panel-header": "Troubleshooting and development",
       "configure-expert-hideactivecontentwarning": "<strong>Permanently hide active content warning</strong> (for experienced users)",
       "configure-expert-hideactivecontentwarning-tip": "A warning is shown if you load a ZIM that has active or dynamic content while you are in Safe mode. It is not recommended to disable this warning.",
+      "configure-expert-hideexternallinkwarning": "<strong>Permanently hide \"Opening external link\" warning</strong>",
+      "configure-expert-hideexternallinkwarning-tip": "If this option is checked, links to external sites will open in a new tab without confirmation.",
       "configure-expert-disabledragdrop": "<strong>Disable drag-and-drop</strong> (in case it is causing anomalies)",
       "configure-expert-disabledragdrop-tip": "This option disables drag-and-drop of ZIM files onto the app. It is not recommended to disable this feature.",
       "configure-expert-bypassappcache": "<b>Bypass AppCache</b> (<i>disables offline use of this app!</i>)",
@@ -137,6 +139,7 @@ document.localeJson = {
       "dialog-article-readerror-title": "Error reading article",
       "dialog-cancel": "Cancel",
       "dialog-ok": "Okay",
+      "dialog-hide": "Don't ask again",
       "dialog-confirm": "Confirm",
       "dialog-blocked-fileprotocol": "<p>You seem to be opening kiwix-js with the file:// protocol, which is blocked by your browser for security reasons.</p><p>The easiest way to run it is to download and run it as a browser extension (from the vendor store).</p><p>Or else you can open it through a web server: either through a local one (http://localhost/...) or through a remote one (but you will need a secure connection, e.g.: https://webserver/...)</p><p>Another option is to force your browser to accept that (but you'll open a security breach): on Chrome, you can start it with --allow-file-access-from-files command-line argument; on Firefox, you can set privacy.file_unique_origin to false in about:config</p>",
       "dialog-bypassappcachecheck-message": "This setting can only be used in ServiceWorker mode!",
diff --git a/i18n/es.jsonp.js b/i18n/es.jsonp.js
index 8da5c075..b33edca4 100644
--- a/i18n/es.jsonp.js
+++ b/i18n/es.jsonp.js
@@ -94,6 +94,8 @@ document.localeJson = {
       "configure-expert-panel-header": "Resolución de problemas y desarrollo",
       "configure-expert-hideactivecontentwarning": "<strong>Ocultar permanentemente la advertencia de contenido activo</strong> (para usuarios experimentados)",
       "configure-expert-hideactivecontentwarning-tip": "Se muestra una advertencia si carga un ZIM que tiene contenido activo o dinámico mientras está en modo Seguro. No se recomienda desactivar esta advertencia.",
+      "configure-expert-hideexternallinkwarning": "<strong>Ocultar permanentemente el aviso \"Abrir enlace externo\"</strong>",
+      "configure-expert-hideexternallinkwarning-tip": "Si esta opción está marcada, los enlaces a sitios externos se abrirán en una nueva pestaña sin confirmación.",
       "configure-expert-disabledragdrop": "<strong>Desactivar función de arrastrar y soltar</strong> (en caso de que esté causando anomalías)",
       "configure-expert-disabledragdrop-tip": "Esta opción desactiva la función de arrastrar y soltar los archivos ZIM para cargarlos en la aplicación. No se recomienda desactivar esta función.",
       "configure-expert-bypassappcache": "<b>Desactivar AppCache</b> (<i>¡desactiva el uso sin conexión de esta aplicación!</i>)",
@@ -137,6 +139,7 @@ document.localeJson = {
       "dialog-article-readerror-title": "Error al leer artículo",
       "dialog-cancel": "Cancelar",
       "dialog-ok": "OK",
+      "dialog-hide": "No vuelva a preguntar",
       "dialog-confirm": "Confirmar",
       "dialog-blocked-fileprotocol": "<p>Parece que está abriendo kiwix-js con el protocolo file://, lo cual está bloqueado por su navegador por razones de seguridad.</p><p>La forma más fácil de ejecutar esta aplicación es en forma de una extensión (se puede obtenir gratis de la tienda de extensiones de su navegador).</p><p>O bien puede abrirlo a través de un servidor web: ya sea a través de uno local (http://localhost/...) o a través de uno remoto (pero necesitará una conexión segura, p.ej.: https://webserver/...)</p><p>Otra opción es forzar a su navegador a que lo acepte (pero abrirá una brecha de seguridad): en Chrome/Edge, puede iniciarlo con el argumento de línea de comandos --allow-file-access-from-files; en Firefox, puede cambiar la opción privacy.file_unique_origin a falso en about:config</p>",
       "dialog-bypassappcachecheck-message": "¡Este ajuste sólo se puede usar en el modo ServiceWorker!",
diff --git a/i18n/fr.jsonp.js b/i18n/fr.jsonp.js
index e41fc1eb..87c3b3e0 100644
--- a/i18n/fr.jsonp.js
+++ b/i18n/fr.jsonp.js
@@ -94,6 +94,8 @@ document.localeJson = {
       "configure-expert-panel-header": "Dépannage et développement",
       "configure-expert-hideactivecontentwarning": "<strong>Masquer l'avertissement de contenu actif</strong> (pour les utilisateurs expérimentés)",
       "configure-expert-hideactivecontentwarning-tip": "Un avertissement s'affiche si vous chargez un ZIM qui contient du contenu actif ou dynamique en mode Sécurisé. Il n'est pas recommandé de désactiver cet avertissement.",
+      "configure-expert-hideexternallinkwarning": "<strong>Masquer définitivement l'avertissement \"Ouverture d'un lien externe\".</strong>",
+      "configure-expert-hideexternallinkwarning-tip": "Si cette option est cochée, les liens vers des sites externes s'ouvriront dans un nouvel onglet sans confirmation.",
       "configure-expert-disabledragdrop": "<strong>Désactiver le glisser-déposer</strong> (si cela provoque des anomalies)",
       "configure-expert-disabledragdrop-tip": "Cette option désactive la fonctionnalité de glisser-déposer des fichiers ZIM pour les charger dans l'application. Il n'est pas recommandé de désactiver cette fonctionnalité.",
       "configure-expert-bypassappcache": "<strong>Désactiver AppCache</strong> (<i>désactive l'utilisation hors ligne de cette application !</i>)",
@@ -137,6 +139,7 @@ document.localeJson = {
       "dialog-article-readerror-title": "Erreur lors de la lecture de l'article",
       "dialog-cancel": "Annuler",
       "dialog-ok": "OK",
+      "dialog-hide": "Ne demandez plus",
       "dialog-confirm": "Confirmer",
       "dialog-blocked-fileprotocol": "<p>Il semble que vous ouvrez kiwix-js avec le protocole file://, ce qui est bloqué par votre navigateur pour des raisons de sécurité.</p><p>La façon la plus simple d'exécuter cette application est sous la forme d'une extension (vous pouvez l'obtenir gratuitement dans le magasin d'extensions de votre navigateur).</p><p>Vous pouvez également l'ouvrir via un serveur Web&nbsp;: soit via un serveur local (http://localhost/...) ou via un serveur distant (mais vous aurez besoin d'une connexion sécurisée, p. ex.&nbsp;: https://webserver/...)</p><p>Une autre option consiste à forcer votre navigateur à l'accepter (mais cela ouvrira une faille de sécurité)&nbsp;: dans Chrome/Edge, vous pouvez le démarrer avec l'argument de ligne de commande --allow-file-access-from-files&nbsp;; dans Firefox, vous pouvez changer l'option privacy.file_unique_origin à false dans about:config</p>",
       "dialog-bypassappcachecheck-message": "Ce paramètre ne peut être utilisé que dans le mode ServiceWorker !",
diff --git a/www/index.html b/www/index.html
index f30aec21..e341e404 100644
--- a/www/index.html
+++ b/www/index.html
@@ -61,10 +61,15 @@
                     <div class="modal-body">
                         <p id="modalText">Modal text goes here.</p>
                     </div>
-                    <div class="modal-footer" id="modalFooter">
-                        <button type="button" class="btn btn-primary" id="approveConfirm" data-dismiss="modal">Confirm</button>
-                        <button type="button" class="btn btn-secondary" id="declineConfirm" data-dismiss="modal">Cancel</button>
-                        <button type="button" class="btn btn-primary" id="closeMessage" data-dismiss="modal">Okay</button>
+                    <div class="modal-footer justify-content-between" id="modalFooter">
+                        <div>
+                            <button type="button" class="btn btn-link" id="hideOption" data-dismiss="modal">Don't ask again</button>
+                        </div>
+                        <div>
+                            <button type="button" class="btn btn-primary" id="approveConfirm" data-dismiss="modal">Confirm</button>
+                            <button type="button" class="btn btn-secondary" id="declineConfirm" data-dismiss="modal">Cancel</button>
+                            <button type="button" class="btn btn-primary" id="closeMessage" data-dismiss="modal">Okay</button>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -685,6 +690,12 @@
                                         experienced users)</span>
                                     </label>
                                 </div>
+                                <div class="checkbox">
+                                    <label data-i18n-tip="configure-expert-hideexternallinkwarning-tip" title="If this option is checked, links to external sites will open in a new tab without confirmation.">
+                                        <input type="checkbox" name="hideExternalLinkWarning" id="hideExternalLinkWarningCheck">
+                                        <span data-i18n="configure-expert-hideexternallinkwarning"><strong>Permanently hide "Opening external link" warning</strong></span>
+                                    </label>
+                                </div>
                                 <div class="checkbox">
                                     <label data-i18n-tip="configure-expert-disabledragdrop-tip" title="In some browsers on some platforms, drag-and-drop may malfunction and make it difficult to select text, and other operations. Disable it here if it is causing issues." >
                                         <input type="checkbox" name="disableDragAndDrop"
diff --git a/www/js/app.js b/www/js/app.js
index c1ad45cd..121980f8 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -534,6 +534,10 @@ document.querySelectorAll('input[type="checkbox"][name=hideActiveContentWarning]
         settingsStore.setItem('hideActiveContentWarning', params.hideActiveContentWarning, Infinity);
     })
 });
+document.getElementById('hideExternalLinkWarningCheck').addEventListener('change', function () {
+    params.hideExternalLinkWarning = this.checked;
+    settingsStore.setItem('hideExternalLinkWarning', params.hideExternalLinkWarning, Infinity);
+})
 document.getElementById('slideAwayCheck').addEventListener('change', function (e) {
     params.slideAway = e.target.checked;
     if (typeof navigator.getDeviceStorages === 'function') {
diff --git a/www/js/init.js b/www/js/init.js
index faaaa380..092aa740 100644
--- a/www/js/init.js
+++ b/www/js/init.js
@@ -35,6 +35,7 @@
  * @property {string} storeType - A parameter to determine the Settings Store API in use.
  * @property {string} keyPrefix - The key prefix used by the settingsStore.js.
  * @property {boolean} hideActiveContentWarning - A boolean indicating whether to hide the active content warning.
+ * @property {boolean} hideExternalLinkWarning - A boolean indicating whether to hide the external link warning.
  * @property {boolean} slideAway - A boolean indicating whether to slide away the header and footer when scrolling.
  * @property {boolean} showUIAnimations - A boolean indicating whether to show UI animations.
  * @property {number} maxSearchResultsSize - The maximum number of article titles to return.
@@ -89,6 +90,7 @@ params['storeType'] = getBestAvailableStorageAPI();
 // The key prefix used by the settingsStore.js (see comment there for explanation), but we also need it below
 params['keyPrefix'] = 'kiwixjs-';
 params['hideActiveContentWarning'] = getSetting('hideActiveContentWarning') === true;
+params['hideExternalLinkWarning'] = getSetting('hideExternalLinkWarning') === true;
 // A parameter to determine whether to slide away the header and footer when scrolling (defaults to true except on Firefox OS devices which may be buggy with this setting)
 params['slideAway'] = getSetting('slideAway') === false ? false : typeof navigator.getDeviceStorages !== 'function';
 params['showUIAnimations'] = getSetting('showUIAnimations') === true;
@@ -182,6 +184,7 @@ params.appCache = params.contentInjectionMode === 'jquery' ? true : params.appCa
  * Set the State and UI settings associated with parameters defined above
  */
 document.getElementById('hideActiveContentWarningCheck').checked = params.hideActiveContentWarning;
+document.getElementById('hideExternalLinkWarningCheck').checked = params.hideExternalLinkWarning;
 document.getElementById('disableDragAndDropCheck').checked = params.disableDragAndDrop;
 document.getElementById('slideAwayCheck').checked = params.slideAway;
 document.getElementById('showUIAnimationsCheck').checked = params.showUIAnimations;
diff --git a/www/js/lib/uiUtil.js b/www/js/lib/uiUtil.js
index 792dfa69..d573fdff 100644
--- a/www/js/lib/uiUtil.js
+++ b/www/js/lib/uiUtil.js
@@ -181,12 +181,16 @@ function slideAway (e) {
  * @param {String} declineConfirmLabel The text to display on the decline confirmation button (optional, Default = "Cancel")
  * @param {String} approveConfirmLabel  The text to display on the approve confirmation button (optional, Default = "Confirm")
  * @param {String} closeMessageLabel  The text to display on the close alert message button (optional, Default = "Okay")
+ * @param {String} hideOptionLabel  The text to display on the hide option button (optional, Default = "Don't ask again")
+ * @param {Boolean} displayHideOption If true, option to permanently hide the modal will be shown (currently only implemented for hideExternalLinkWarning)
  * @returns {Promise<Boolean>} A promise which resolves to true if the user clicked Confirm, false if the user clicked Cancel/Okay, backdrop or the cross(x) button
  */
-function systemAlert (message, label, isConfirm, declineConfirmLabel, approveConfirmLabel, closeMessageLabel) {
+function systemAlert (message, label, isConfirm, declineConfirmLabel, approveConfirmLabel, closeMessageLabel, hideOptionLabel, displayHideOption) {
     declineConfirmLabel = declineConfirmLabel || (translateUI.t('dialog-cancel') || 'Cancel');
     approveConfirmLabel = approveConfirmLabel || (translateUI.t('dialog-confirm') || 'Confirm');
     closeMessageLabel = closeMessageLabel || (translateUI.t('dialog-ok') || 'Okay');
+    hideOptionLabel = hideOptionLabel || (translateUI.t('dialog-hide') || "Don't ask again");
+    displayHideOption = displayHideOption || false;
     label = label || (isConfirm ? 'Confirmation' : 'Message');
     return util.PromiseQueue.enqueue(function () {
         return new Promise(function (resolve, reject) {
@@ -195,6 +199,7 @@ function systemAlert (message, label, isConfirm, declineConfirmLabel, approveCon
             document.getElementById('approveConfirm').textContent = approveConfirmLabel;
             document.getElementById('declineConfirm').textContent = declineConfirmLabel;
             document.getElementById('closeMessage').textContent = closeMessageLabel;
+            document.getElementById('hideOption').textContent = hideOptionLabel;
             // Some titles need &nbsp; or other HTML, so we have to use innerHTML
             document.getElementById('modalLabel').innerHTML = label;
             // Using innerHTML to set the message to allow HTML formatting
@@ -203,6 +208,7 @@ function systemAlert (message, label, isConfirm, declineConfirmLabel, approveCon
             document.getElementById('approveConfirm').style.display = isConfirm ? 'inline' : 'none';
             document.getElementById('declineConfirm').style.display = isConfirm ? 'inline' : 'none';
             document.getElementById('closeMessage').style.display = isConfirm ? 'none' : 'inline';
+            document.getElementById('hideOption').style.display = displayHideOption ? 'inline' : 'none';
             // Display the modal
             const modal = document.querySelector('#alertModal');
             const backdrop = document.createElement('div');
@@ -234,6 +240,7 @@ function systemAlert (message, label, isConfirm, declineConfirmLabel, approveCon
                 document.getElementById('declineConfirm').removeEventListener('click', close);
                 document.getElementById('closeMessage').removeEventListener('click', close);
                 document.getElementById('approveConfirm').removeEventListener('click', closeConfirm);
+                document.getElementById('hideOption').removeEventListener('click', hideConfirm);
                 modal.removeEventListener('click', close);
                 document.getElementsByClassName('modal-dialog')[0].removeEventListener('click', stopOutsideModalClick);
                 modal.removeEventListener('keyup', keyHandler);
@@ -248,6 +255,11 @@ function systemAlert (message, label, isConfirm, declineConfirmLabel, approveCon
                 closeModalHandler();
                 resolve(true);
             };
+            var hideConfirm = function () {
+                document.getElementById('hideExternalLinkWarningCheck').click();
+                closeModalHandler();
+                resolve(true);
+            };
             var stopOutsideModalClick = function (e) {
                 e.stopPropagation();
             };
@@ -272,6 +284,7 @@ function systemAlert (message, label, isConfirm, declineConfirmLabel, approveCon
             document.getElementById('declineConfirm').addEventListener('click', close);
             document.getElementById('closeMessage').addEventListener('click', close);
             document.getElementById('approveConfirm').addEventListener('click', closeConfirm);
+            document.getElementById('hideOption').addEventListener('click', hideConfirm);
 
             modal.addEventListener('click', close);
             document.getElementsByClassName('modal-dialog')[0].addEventListener('click', stopOutsideModalClick);
@@ -969,16 +982,20 @@ function warnAndOpenExternalLinkInNewTab (event, clickedAnchor, archive) {
         clickedAnchor.href = clickedAnchor.href.replace(clickedAnchor.origin, archive.source.replace(/\/$/, ''));
     }
     var target = clickedAnchor.target;
+    if (!target) {
+        target = '_blank';
+    }
+    if (params.hideExternalLinkWarning) {
+        window.open(clickedAnchor.href, target);
+        return;
+    }
     var message = translateUI.t('dialog-open-externalurl-message') || '<p>Do you want to open this external link?';
-    if (!target || target === '_blank') {
+    if (target === '_blank') {
         message += ' ' + (translateUI.t('dialog-open-externalurl-newtab') || '(in a new tab)');
     }
     message += '</p><p style="word-break:break-all;">' + clickedAnchor.href + '</p>';
-    systemAlert(message, translateUI.t('dialog-open-externalurl-title') || 'Opening external link', true).then(function (response) {
+    systemAlert(message, translateUI.t('dialog-open-externalurl-title') || 'Opening external link', true, null, null, null, null, true).then(function (response) {
         if (response) {
-            if (!target) {
-                target = '_blank';
-            }
             window.open(clickedAnchor.href, target);
         }
     });