Add option to turn off external link warning #891 (#1236)

Signed off by @dan-niles.
2025-09-08 06:37:04 -04:00 · 2024-03-28 17:24:14 +05:30 · 2024-03-28 17:24:14 +05:30 · 01f7e29e2b
commit 01f7e29e2b
parent 733a9d72ba
7 changed files with 54 additions and 10 deletions
--- 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!",
--- 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!",
--- 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 !",
--- 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"
--- 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') {
--- 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;
--- 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);
        }
    });