Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Removed usage of jquery while opening and closing bootstrap modals #968

Merged
merged 17 commits into from
Mar 26, 2023
Merged

Removed usage of jquery while opening and closing bootstrap modals #968

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
142757d
removed usage of jquery while opening and closing bootstrap modals
aritroCoder Feb 28, 2023
b1662c1
fixed original formatting
aritroCoder Feb 28, 2023
d8a66a0
Fixed minor issue with modal closing
aritroCoder Mar 5, 2023
bfed24d
Modal: fixed modal not closing on outside click
aritroCoder Mar 8, 2023
e529b6a
fixed no unused vars
aritroCoder Mar 8, 2023
ed8edee
fixed no unused vars
aritroCoder Mar 8, 2023
b894770
Merge branch 'main' into remove-jquery-where-possible
aritroCoder Mar 11, 2023
940b994
added key press support
aritroCoder Mar 14, 2023
c114be6
Merge branch 'main' into remove-jquery-where-possible
aritroCoder Mar 14, 2023
60bfbaa
minor change
aritroCoder Mar 21, 2023
6c198db
Merge branch 'remove-jquery-where-possible' of https://github.com/ari…
aritroCoder Mar 21, 2023
2c685c8
fixed typo and modal focused
aritroCoder Mar 21, 2023
2d87ecd
removed event listeners
aritroCoder Mar 21, 2023
0b06068
resolved event listeners not removing
aritroCoder Mar 23, 2023
23b0833
corrected function declarations and fixed indentation
aritroCoder Mar 25, 2023
1c5e069
added spaces in function calls
aritroCoder Mar 26, 2023
5675912
changed let to var to support firefox os
aritroCoder Mar 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion www/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
103 changes: 78 additions & 25 deletions www/js/lib/uiUtil.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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();
});
}

Expand Down