Add UI option to prevent app reload warnings #662 (#663)

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## Interim release 3.4.7
+
+* ENHANCEMENT: Add option in Configuration to disable accidental reload protection
+* REGRESSION: Fix build of Win7 32bit app with wrong Electron version and block autoupdate
+
 ## Release 3.4.5 / 3.4.6
 
 * ENHANCEMENT: Prevent accidental app reload if an archive is loaded

www/index.html

@@ -103,10 +103,12 @@ <h3>Please read this important information</h3>
                             <h3 style="margin-top:0;">Changes in version <span class="version">3.0</span></h3>
                             <ul style="padding-left: 15px;">
                                 <li>Prevent accidental app reload if an archive is loaded</li>
+                                <li>Add option in Configuration to disable accidental reload protection</li>
                                 <li>Fix failure to display Wikimedia URLs ending in a question mark</li>
                                 <li>Fix failure to display articles from links clicked in popovers</li>
                                 <li>Remove title description from popovers in new Wikimedia ZIMs</li>
                                 <li>Remove unused scripts from Wikimedia ZIMs scraped with mobile-html API</li>
+                                <li>Fix build of Win7 32bit app with wrong Electron version and block autoupdate</li>
                                 <li>Switched to new eSigner code-signing certificate</li>
                                 <li>Disabled signing of nightly binaries due to cost</li>
                                 <li>Added info in release templates regarding SmartScreen popups on Windows</li>
@@ -1222,6 +1224,28 @@ <h4 class="panel-group-heading">Performance / compatibility</h4>
                     </div>
                     <div class="row">
                         <h4 class="panel-group-heading">Expert settings</h4>
+                        <div class="panel panel-warning" id="defaultBehaviourssDiv">
+                            <div class="panel-heading">Modify default behavours</div>
+                            <div class="panel-body">
+                                <div class="column">
+                                    <label class="checkbox" title="In some contexts, reloading the app will disconnect the currently loaded ZIM archive, requiring you to re-pick it. You may disable default interception here.">
+                                        <input type="checkbox" name="inerceptBeforeUnload" id="interceptBeforeUnloadCheck">
+                                        <span class="checkmark"></span>
+                                        <b>Warn before leaving page with loaded archive</b> (<i>prevents accidental closing/reloading</i>)
+                                    </label>
+                                    <label class="checkbox" title="In some browsers on some platforms, drag-and-drop may malfunction. Disable it here if it is causing issues." >
+                                        <input type="checkbox" name="disableDragAndDrop" id="disableDragAndDropCheck">
+                                        <span class="checkmark"></span>
+                                        <b>Disable drag-and-drop</b> (in case it is causing anomalies)
+                                    </label>
+                                    <label class="checkbox" data-i18n-tip="configure-expert-enable-source-verification-tip" title="Warning: Some ZIM archives from untrusted sources could run malicious code in your browser. This can be prevented by using Restricted mode, which cannot run active content from the ZIM. Highly dynamic ZIMs will probably fail in Restricted mode, but ZIMs with largely static content should work. If you trust the source of all of your ZIMs, then disabling this option will use ServiceWorker mode by default, if available.">
+                                        <input type="checkbox" name="disableFileVerification" id="enableSourceVerificationCheck">
+                                        <span data-i18n="configure-expert-enable-source-verification-check-box" class="checkmark"></span>
+                                        <b>Enable source verification of new files</b> (<i>recommended</i>: you will only be prompted the first time you open a ZIM)
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
                         <div class="panel panel-warning" id="expertSettingsDiv">
                             <div class="panel-heading">Troubleshooting and development</div>
                             <div class="panel-body">
@@ -1251,16 +1275,6 @@ <h4 class="panel-group-heading">Expert settings</h4>
                                         <span class="checkmark"></span>
                                         <b>Use legacy method for reading Zimit-based archives</b> (may be faster on some systems)
                                     </label>
-                                    <label class="checkbox" title="In some browsers on some platforms, drag-and-drop may malfunction. Disable it here if it is causing issues." >
-                                        <input type="checkbox" name="disableDragAndDrop" id="disableDragAndDropCheck">
-                                        <span class="checkmark"></span>
-                                        <b>Disable drag-and-drop</b> (in case it is causing anomalies)
-                                    </label>
-                                    <label class="checkbox" data-i18n-tip="configure-expert-enable-source-verification-tip" title="Warning: Some ZIM archives from untrusted sources could run malicious code in your browser. This can be prevented by using Restricted mode, which cannot run active content from the ZIM. Highly dynamic ZIMs will probably fail in Restricted mode, but ZIMs with largely static content should work. If you trust the source of all of your ZIMs, then disabling this option will use ServiceWorker mode by default, if available.">
-                                        <input type="checkbox" name="disableFileVerification" id="enableSourceVerificationCheck" >
-                                        <span data-i18n="configure-expert-enable-source-verification-check-box" class="checkmark"></span>
-                                        <b>Enable source verification of new files</b> (<i>recommended</i>: you will only be prompted the first time you open a ZIM)
-                                    </label>
                                     <div id="expressPortInputDiv" style="display: none;" title="If you allowed network access on startup, you can access this app from any local browser by going to localhost:port in the browser address bar (e.g. http://localhost:3000).">
                                         <b>Customize the localhost port when accessing this app from a browser</b>:<br />
                                         <label>
@@ -1279,6 +1293,9 @@ <h4 class="panel-group-heading">Expert settings</h4>
                                 </div>
                             </div>
                         </div>
+                    </div>
+                    &nbsp;
+                    <div class="row">
                         <div class="panel panel-warning" id="apiStatusDiv">
                             <div class="panel-heading">API Status</div>
                             <div class="panel-body">

www/js/app.js

@@ -2165,6 +2165,10 @@ document.getElementById('hideToolbarsCheck').addEventListener('click', function
     settingsStore.setItem('hideToolbars', params.hideToolbars, Infinity);
     checkToolbar();
 });
+document.getElementById('interceptBeforeUnloadCheck').addEventListener('change', function () {
+    params.interceptBeforeUnload = this.checked;
+    settingsStore.setItem('interceptBeforeUnload', params.interceptBeforeUnload, Infinity);
+});
 Array.prototype.slice.call(document.querySelectorAll('.aboutLink')).forEach(function (link) {
     link.addEventListener('click', function () {
         document.getElementById('btnAbout').click();

www/js/init.js

@@ -34,7 +34,7 @@ window.onerror = function (msg, url, line, col, error) {
 
 // Set a beforeUnload handler to prevent app reloads without confirmation if a ZIM file is loaded
 window.addEventListener('beforeunload', function (event) {
-    if (appstate && appstate.selectedArchive && params.appCache && !/Electron/.test(params.appType)) {
+    if (params.interceptBeforeUnload && appstate && appstate.selectedArchive && params.appCache && !/Electron/.test(params.appType)) {
         var confirmationMessage = 'Warning: you may have to reload the ZIM archive if you leave this page!';
         event.preventDefault();
         // Included for legacy support, e.g. Chrome/Edge < 119
@@ -125,6 +125,7 @@ params['navButtonsPos'] = getSetting('navButtonsPos') || 'bottom'; // 'top|botto
 params['useOPFS'] = getSetting('useOPFS') === true; // A setting that determines whether to use OPFS (experimental)
 params['useLegacyZimitSupport'] = getSetting('useLegacyZimitSupport') === true; // A setting that determines whether to force the use of legacy Zimit support
 params['sourceVerification'] = params.contentInjectionMode === 'serviceworker' ? (getSetting('sourceVerification') === null ? true : getSetting('sourceVerification')) : false; // Sets a boolean indicating weather a user trusts the source of zim files
+params['interceptBeforeUnload'] = getSetting('interceptBeforeUnload') !== null ? getSetting('interceptBeforeUnload') : true; // A setting that determines whether to warn user before leaving the app (default is true)
 
 // Do not touch these values unless you know what they do! Some are global variables, some are set programmatically
 params['cacheAPI'] = 'kiwixjs-assetsCache'; // Set the global Cache API database or cache name here, and synchronize with Service Worker
@@ -282,10 +283,10 @@ document.getElementById('disableDragAndDropCheck').checked = params.disableDragA
 document.getElementById('debugLibzimASMDrop').value = params.debugLibzimASM || '';
 if (params.debugLibzimASM === 'disable') document.getElementById('debugLibzimASMDrop').style.color = 'red';
 if (params.windowOpener === null) { // Setting has never been activated, so determine a sensible default
-    params.windowOpener = /UWP/.test(params.appType) && params.contentInjectionMode === 'jquery' ? false :
-    /iOS/.test(params.appType) ? false :
-    ('MSBlobBuilder' in window || params.PWAInstalled) ? 'window' : // IE11/Edge Legacy/UWP work best in window mode, not in tab mode, as does installed PWA!
-    /PWA/.test(params.appType) ? 'tab' : false;
+    params.windowOpener = /UWP/.test(params.appType) && params.contentInjectionMode === 'jquery' ? false
+        : /iOS/.test(params.appType) ? false
+            : ('MSBlobBuilder' in window || params.PWAInstalled) ? 'window' // IE11/Edge Legacy/UWP work best in window mode, not in tab mode, as does installed PWA!
+                : /PWA/.test(params.appType) ? 'tab' : false;
 }
 if (params.windowOpener) params.allowHTMLExtraction = false;
 document.getElementById('allowHTMLExtractionCheck').checked = params.allowHTMLExtraction;
@@ -296,6 +297,7 @@ if (/^http/i.test(window.location.protocol) && params.allowInternetAccess === nu
     params.allowInternetAccess = true;
 }
 document.getElementById('bypassAppCacheCheck').checked = !params.appCache;
+document.getElementById('interceptBeforeUnloadCheck').checked = params.interceptBeforeUnload;
 // If we're in a PWA served from http, change the app titles
 if (/^http/i.test(window.location.protocol)) {
     Array.prototype.slice.call(document.querySelectorAll('span.identity')).forEach(function (ele) {

www/js/lib/settingsStore.js

@@ -176,6 +176,8 @@ function getCacheNames (callback) {
 // Deregisters all Service Workers and reboots the app
 function _reloadApp () {
   var reboot = function () {
+    // Temporarily disable the beforeunload event listener
+    params.interceptBeforeUnload = false;
     console.debug('Performing app reload...');
     setTimeout(function () {
       window.location.href = location.origin + location.pathname + uriParams