From 2bff31524f32962758205cf02e90e79d888941e3 Mon Sep 17 00:00:00 2001 From: Jaifroid Date: Fri, 4 Feb 2022 11:30:07 +0000 Subject: [PATCH] Further changes to systemAlert from KJS Former-commit-id: 797ee22a1baee8efb787efc5da702f5db0015c8b [formerly 13e2a72a6ddf50ff00bd554e697724d019bc09b5] [formerly 8f4c2c3a42131affaa226ad7e049fd73bc29fbd3] [formerly ff8ba0c6027c3adc4f2ac53d170f2b9302cdf4b4 [formerly dccf72e42880bd9fd92d022fe668db4721b3a690 [formerly 175c2431c20f66ff378b1ee39358e1aff14327d2]]] Former-commit-id: 8fb31307977b0d0f593af360cefdf1c0909d918a [formerly 0a990b11213b386c200bec9c38e99f08068ffb34 [formerly c9fc95479ac35d8f1e9188bb9590e6fbfc4eec66]] Former-commit-id: 90e695990a855f86bd7b7cfd7dc70ac86f3d2d2d [formerly 86ebf8f88f4e15b11688a3bb7ddb68c015b1bf5a] Former-commit-id: cd5ff01980ff481a49ffcabe6b1eaa88c5300df0 --- www/index.html | 5 +++-- www/js/app.js | 22 +++++++++++++--------- www/js/lib/uiUtil.js | 41 +++++++++++++++++++++++++---------------- 3 files changed, 41 insertions(+), 27 deletions(-) diff --git a/www/index.html b/www/index.html index 4d163a3b..cd326d6a 100644 --- a/www/index.html +++ b/www/index.html @@ -171,8 +171,9 @@

Modal text goes here.

diff --git a/www/js/app.js b/www/js/app.js index 8aa3e21c..44a653a5 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -1947,18 +1947,22 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett refreshAPIStatus(); } else if (value === 'serviceworker') { if (!isServiceWorkerAvailable()) { - uiUtil.systemAlert("The ServiceWorker API is not available on your device. Falling back to JQuery mode"); - setContentInjectionMode('jquery'); + uiUtil.systemAlert("The ServiceWorker API is not available on your device. Falling back to JQuery mode").then(function () { + setContentInjectionMode('jquery'); + }); return; } if (!isMessageChannelAvailable()) { - uiUtil.systemAlert("The MessageChannel API is not available on your device. Falling back to JQuery mode"); - setContentInjectionMode('jquery'); + uiUtil.systemAlert("The MessageChannel API is not available on your device. Falling back to JQuery mode").then(function () { + setContentInjectionMode('jquery'); + }); return; } if (window.nw && nw.process.versions.nw === '0.14.7') { - uiUtil.systemAlert('Service Worker mode is not available in the XP version of this app, due to the age of the Chromium build. Falling back to JQuery mode...'); - setContentInjectionMode('jquery'); + uiUtil.systemAlert('Service Worker mode is not available in the XP version of this app, due to the age of the Chromium build. Falling back to JQuery mode...') + .then(function () { + setContentInjectionMode('jquery'); + }); return; } if (!isServiceWorkerReady()) { @@ -2011,10 +2015,10 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett message += "\nPlease vote for https://bugzilla.mozilla.org/show_bug.cgi?id=1344561 so that some future Firefox versions support it"; } else if (protocol === 'file:') { message += "\n\nYou seem to be opening kiwix-js with the file:// protocol. You should open it through a web server : either through a local one (http://localhost/...) or through a remote one (but you need SSL : https://webserver/...)"; - } else { - uiUtil.systemAlert(message, 'Information'); } - setContentInjectionMode("jquery"); + uiUtil.systemAlert(message, 'Information').then(function () { + setContentInjectionMode("jquery"); + }); return; }); } diff --git a/www/js/lib/uiUtil.js b/www/js/lib/uiUtil.js index fbafe99e..b8093f72 100644 --- a/www/js/lib/uiUtil.js +++ b/www/js/lib/uiUtil.js @@ -580,27 +580,36 @@ define(rqDef, function(util) { * Credit to @gaurav7019 for this code (slightly adapted here) - see Kiwix JS #804 * * @param {String} message The alert message to display in the body of the modal - * @param {String} label The modal's label or title which appears in the header - * @param {Boolean} isConfirm If true, the modal will be a confirm dialog box, otherwise it will be an alert - * @param {String} declineButtonText The text to display on the decline button (optional, Default = "Cancel") - * @param {String} approveButtonText The text to display on the approve button (optional, Default = "Confirm") - * @returns {Promise} A promise which resolves to true if the user clicked Confirm, false if the user clicked Cancel, backdrop or the cross(x) button + * @param {String} label The modal's label or title which appears in the header (optional, Default = "Confirmation" or "Message") + * @param {Boolean} isConfirm If true, the modal will be a confirm dialog box, otherwise it will be a simple alert message + * @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") + * @returns {Promise} 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, declineButtonText, approveButtonText) { - label = label || (isConfirm ? 'Confirm' : 'Message'); + function systemAlert(message, label, isConfirm, declineConfirmLabel, approveConfirmLabel, closeMessageLabel) { + declineConfirmLabel = declineConfirmLabel || document.getElementById("declineConfirm").textContent; + approveConfirmLabel = approveConfirmLabel || document.getElementById("approveConfirm").textContent; + closeMessageLabel = closeMessageLabel || document.getElementById("closeMessage").textContent; + label = label || (isConfirm ? "Confirmation" : "Message"); return new Promise(function (resolve, reject) { - if (!message) reject("Missing parameters"); - if (declineButtonText) document.getElementById("declineModal").innerHTML = declineButtonText; - if (approveButtonText) document.getElementById("approveModal").innerHTML = approveButtonText; - document.getElementById("modalLabel").innerHTML = label; - document.getElementById("modalText").innerHTML = message; - // Displays an additional Confirm button if isConfirm is true - document.getElementById("approveModal").style.visibility = isConfirm ? "visible" : "hidden"; + if (!message) reject("Missing body message"); + // Set the text to the modal and it's buttons + document.getElementById("approveConfirm").textContent = approveConfirmLabel; + document.getElementById("declineConfirm").textContent = declineConfirmLabel; + document.getElementById("closeMessage").textContent = closeMessageLabel; + document.getElementById("modalLabel").textContent = label; + document.getElementById("modalText").textContent = message; + // Display buttons acc to the type of alert + document.getElementById("approveConfirm").style.display = isConfirm ? "block" : "none"; + document.getElementById("declineConfirm").style.display = isConfirm ? "block" : "none"; + document.getElementById("closeMessage").style.display = isConfirm ? "none" : "block"; + // Display the modal $("#alertModal").modal("show"); // When hide model is called, resolve promise with true if hidden using approve button, false otherwise $("#alertModal").on("hide.bs.modal", function () { const closeSource = document.activeElement; - if (closeSource.id === "approveModal") { + if (closeSource.id === "approveConfirm") { resolve(true); } else { resolve(false); @@ -608,7 +617,7 @@ define(rqDef, function(util) { }); }); } - + /** * Checks if a server is accessible by attempting to load a test image from the server *