Removed usage of jquery while opening and closing bootstrap modals #921…

… (#968) Signed off by @aritroCoder.
kiwix · Mar 26, 2023 · 0b2211c · 0b2211c
1 parent b9db118
commit 0b2211c
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 26 deletions.
diff --git a/www/index.html b/www/index.html
@@ -53,7 +53,7 @@
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title" id="modalLabel">Modal title goes here</h5>
-                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <button type="button" id="modalCloseBtn" class="close" data-dismiss="modal" aria-label="Close">
                             <span aria-hidden="true">&times;</span>
                         </button>
                     </div>

diff --git a/www/js/lib/uiUtil.js b/www/js/lib/uiUtil.js
@@ -45,36 +45,73 @@ define(rqDef, function(settingsStore) {
      * @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) {
-        declineConfirmLabel = declineConfirmLabel || "Cancel";
-        approveConfirmLabel = approveConfirmLabel || "Confirm";
-        closeMessageLabel = closeMessageLabel || "Okay";
-        label = label || (isConfirm ? "Confirmation" : "Message");
+        declineConfirmLabel = declineConfirmLabel || 'Cancel';
+        approveConfirmLabel = approveConfirmLabel || 'Confirm';
+        closeMessageLabel = closeMessageLabel || 'Okay';
+        label = label || (isConfirm ? 'Confirmation' : 'Message');
         return new Promise(function (resolve, reject) {
-            if (!message) reject("Missing body message");
+            if (!message) reject('Missing body message');
             // Set the text to the modal and its buttons
-            document.getElementById("approveConfirm").textContent = approveConfirmLabel;
-            document.getElementById("declineConfirm").textContent = declineConfirmLabel;
-            document.getElementById("closeMessage").textContent = closeMessageLabel;
-            document.getElementById("modalLabel").textContent = label;
+            document.getElementById('approveConfirm').textContent = approveConfirmLabel;
+            document.getElementById('declineConfirm').textContent = declineConfirmLabel;
+            document.getElementById('closeMessage').textContent = closeMessageLabel;
+            document.getElementById('modalLabel').textContent = label;
             // Using innerHTML to set the message to allow HTML formatting
-            document.getElementById("modalText").innerHTML = message;
+            document.getElementById('modalText').innerHTML = message;
             // Display buttons acc to the type of alert
-            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('approveConfirm').style.display = isConfirm ? 'inline' : 'none';
+            document.getElementById('declineConfirm').style.display = isConfirm ? 'inline' : 'none';
+            document.getElementById('closeMessage').style.display = isConfirm ? 'none' : 'inline';
             // 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 === "approveConfirm") {
-                    resolve(true);
-                } else {
-                    resolve(false);
+            const modal = document.querySelector('#alertModal');
+            const backdrop = document.createElement('div');
+            backdrop.classList.add('modal-backdrop');
+            document.body.appendChild(backdrop);
+
+            // Show the modal
+            document.body.classList.add('modal-open');
+            modal.classList.add('show');
+            modal.style.display = 'block';
+            backdrop.classList.add('show');
+
+            // Set the ARIA attributes for the modal
+            modal.setAttribute('aria-hidden', 'false');
+            modal.setAttribute('aria-modal', 'true');
+            modal.setAttribute('role', 'dialog');
+
+            // Hide modal handlers
+            var closeModalHandler = function () {
+                document.body.classList.remove('modal-open');
+                modal.classList.remove('show');
+                modal.style.display = 'none';
+                backdrop.classList.remove('show');
+                if(Array.from(document.body.children).indexOf(backdrop)>=0){ 
+                    document.body.removeChild(backdrop);
                 }
-            });
-            document.getElementById('alertModal').addEventListener('keyup', function (e) {
-                if (/Enter/.test(e.key)){
+                //remove event listeners
+                document.getElementById('modalCloseBtn').removeEventListener('click', close);
+                document.getElementById('declineConfirm').removeEventListener('click', close);
+                document.getElementById('closeMessage').removeEventListener('click', close);
+                document.getElementById('approveConfirm').removeEventListener('click', closeConfirm);
+                modal.removeEventListener('click', close);
+                document.getElementsByClassName('modal-dialog')[0].removeEventListener('click', stopOutsideModalClick);
+                modal.removeEventListener('keyup', keyHandler);
+            };
+
+            // function to call when modal is closed
+            var close = function () {
+                closeModalHandler();
+                resolve(false);
+            };
+            var closeConfirm = function () {
+                closeModalHandler();
+                resolve(true);
+            };
+            var stopOutsideModalClick = function (e) {
+                e.stopPropagation();
+            };
+            var keyHandler = function (e) {
+                if (/Enter/.test(e.key)) {
                     // We need to focus before clicking the button, because the handler above is based on document.activeElement
                     if (isConfirm) {
                         document.getElementById('approveConfirm').focus();
@@ -83,8 +120,24 @@ define(rqDef, function(settingsStore) {
                         document.getElementById('closeMessage').focus();
                         document.getElementById('closeMessage').click();
                     }
+                } else if (/Esc/.test(e.key)) {
+                    document.getElementById('modalCloseBtn').focus();
+                    document.getElementById('modalCloseBtn').click();
                 }
-            });
+            };
+
+            // When hide modal is called, resolve promise with true if hidden using approve button, false otherwise
+            document.getElementById('modalCloseBtn').addEventListener('click', close);
+            document.getElementById('declineConfirm').addEventListener('click', close);
+            document.getElementById('closeMessage').addEventListener('click', close);
+            document.getElementById('approveConfirm').addEventListener('click', closeConfirm);
+
+            modal.addEventListener('click', close);
+            document.getElementsByClassName('modal-dialog')[0].addEventListener('click', stopOutsideModalClick);
+
+            modal.addEventListener('keyup', keyHandler);
+            // Set focus to the first focusable element inside the modal
+            modal.focus();
         });
     }