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
*