trace down the modal unload error and fix it in uswds

This commit is contained in:
Rachid Mrad 2024-06-18 14:57:48 -04:00
parent 0b4cdf7a69
commit ff3d18eeae
No known key found for this signature in database
2 changed files with 42 additions and 42 deletions

View file

@ -33,6 +33,33 @@ const showElement = (element) => {
element.classList.remove('display-none');
};
/**
* Helper function that scrolls to an element
* @param {string} attributeName - The string "class" or "id"
* @param {string} attributeValue - The class or id name
*/
function ScrollToElement(attributeName, attributeValue) {
let targetEl = null;
if (attributeName === 'class') {
targetEl = document.getElementsByClassName(attributeValue)[0];
} else if (attributeName === 'id') {
targetEl = document.getElementById(attributeValue);
} else {
console.log('Error: unknown attribute name provided.');
return; // Exit the function if an invalid attributeName is provided
}
if (targetEl) {
const rect = targetEl.getBoundingClientRect();
const scrollTop = window.scrollY || document.documentElement.scrollTop;
window.scrollTo({
top: rect.top + scrollTop,
behavior: 'smooth' // Optional: for smooth scrolling
});
}
}
/** Makes an element invisible. */
function makeHidden(el) {
el.style.position = "absolute";
@ -895,33 +922,6 @@ function unloadModals() {
window.modal.off();
}
/**
* Helper function that scrolls to an element
* @param {string} attributeName - The string "class" or "id"
* @param {string} attributeValue - The class or id name
*/
function ScrollToElement(attributeName, attributeValue) {
let targetEl = null;
if (attributeName === 'class') {
targetEl = document.getElementsByClassName(attributeValue)[0];
} else if (attributeName === 'id') {
targetEl = document.getElementById(attributeValue);
} else {
console.log('Error: unknown attribute name provided.');
return; // Exit the function if an invalid attributeName is provided
}
if (targetEl) {
const rect = targetEl.getBoundingClientRect();
const scrollTop = window.scrollY || document.documentElement.scrollTop;
window.scrollTo({
top: rect.top + scrollTop,
behavior: 'smooth' // Optional: for smooth scrolling
});
}
}
/**
* Generalized function to update pagination for a list.
* @param {string} itemName - The name displayed in the counter
@ -1469,7 +1469,7 @@ document.addEventListener('DOMContentLoaded', function() {
</svg>
</button>
</div>
`
`
domainRequestsSectionWrapper.appendChild(modal);
}
@ -1507,13 +1507,10 @@ document.addEventListener('DOMContentLoaded', function() {
modals.forEach(modal => {
const submitButton = modal.querySelector('.usa-modal__submit');
const closeButton = modal.querySelector('.usa-modal__close');
// Clone the submit button to remove all existing event listeners
const newSubmitButton = submitButton.cloneNode(true);
submitButton.parentNode.replaceChild(newSubmitButton, submitButton);
newSubmitButton.addEventListener('click', function() {
pk = newSubmitButton.getAttribute('data-pk');
submitButton.addEventListener('click', function() {
pk = submitButton.getAttribute('data-pk');
// Close the modal to remove the USWDS UI local classes
closeButton.click();
// If we're deleting the last item on a page that is not page 1, we'll need to refresh the display to the previous page

View file

@ -5311,14 +5311,17 @@ const cleanUpModal = baseComponent => {
const modalID = modalWrapper.getAttribute("id");
const originalLocationPlaceHolder = document.querySelector(`[data-placeholder-for="${modalID}"]`);
if (originalLocationPlaceHolder) {
for (let attributeIndex = 0; attributeIndex < originalLocationPlaceHolder.attributes.length; attributeIndex += 1) {
const attribute = originalLocationPlaceHolder.attributes[attributeIndex];
if (attribute.name.startsWith('data-original-')) {
// data-original- is 14 long
modalContent.setAttribute(attribute.name.substr(14), attribute.value);
}
}
originalLocationPlaceHolder.after(modalContent);
// DOTGOV
// Why is this line here? It seems to be recreating the original placeholder and then adding a
// copy of it after that first placeholder, which is netralizing our call of off()
// for (let attributeIndex = 0; attributeIndex < originalLocationPlaceHolder.attributes.length; attributeIndex += 1) {
// const attribute = originalLocationPlaceHolder.attributes[attributeIndex];
// if (attribute.name.startsWith('data-original-')) {
// // data-original- is 14 long
// modalContent.setAttribute(attribute.name.substr(14), attribute.value);
// }
// }
//originalLocationPlaceHolder.after(modalContent);
originalLocationPlaceHolder.parentElement.removeChild(originalLocationPlaceHolder);
}
modalWrapper.parentElement.removeChild(modalWrapper);