mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-08-05 01:11:55 +02:00
Undo getgov js changes
This commit is contained in:
zandercymatics
parent
f1c8c94a8a
commit
da3d568517
1 changed files with 264 additions and 136 deletions
|
|
@ -134,19 +134,10 @@ function _checkDomainAvailability(el) {
|
|||
const callback = (response) => {
|
||||
toggleInputValidity(el, (response && response.available), msg=response.message);
|
||||
announce(el.id, response.message);
|
||||
|
||||
// Determines if we ignore the field if it is just blank
|
||||
ignore_blank = el.classList.contains("blank-ok")
|
||||
if (el.validity.valid) {
|
||||
el.classList.add('usa-input--success');
|
||||
// use of `parentElement` due to .gov inputs being wrapped in www/.gov decoration
|
||||
inlineToast(el.parentElement, el.id, SUCCESS, response.message);
|
||||
} else if (ignore_blank && response.code == "required"){
|
||||
// Visually remove the error
|
||||
error = "usa-input--error"
|
||||
if (el.classList.contains(error)){
|
||||
el.classList.remove(error)
|
||||
}
|
||||
} else {
|
||||
inlineToast(el.parentElement, el.id, ERROR, response.message);
|
||||
}
|
||||
|
|
@ -236,147 +227,205 @@ function handleValidationClick(e) {
|
|||
for(const button of activatesValidation) {
|
||||
button.addEventListener('click', handleValidationClick);
|
||||
}
|
||||
|
||||
|
||||
// Add event listener to the "Check availability" button
|
||||
const checkAvailabilityButton = document.getElementById('check-availability-button');
|
||||
if (checkAvailabilityButton) {
|
||||
const targetId = checkAvailabilityButton.getAttribute('validate-for');
|
||||
const checkAvailabilityInput = document.getElementById(targetId);
|
||||
checkAvailabilityButton.addEventListener('click', removeFormErrors(checkAvailabilityInput));
|
||||
}
|
||||
|
||||
// Add event listener to the alternate domains input
|
||||
const alternateDomainsInputs = document.querySelectorAll('[auto-validate]');
|
||||
if (alternateDomainsInputs) {
|
||||
for (const domainInput of alternateDomainsInputs){
|
||||
// Only apply this logic to alternate domains input
|
||||
if (domainInput.classList.contains('alternate-domain-input')){
|
||||
domainInput.addEventListener('input', removeFormErrors(domainInput));
|
||||
}
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
/**
|
||||
* Removes form errors surrounding a form input
|
||||
* Delete method for formsets that diff in the view and delete in the model (Nameservers, DS Data)
|
||||
*
|
||||
*/
|
||||
function removeFormErrors(input){
|
||||
// Remove error message
|
||||
let errorMessage = document.getElementById(`${input.id}__error-message`);
|
||||
if (errorMessage) {
|
||||
errorMessage.remove();
|
||||
}
|
||||
function removeForm(e, formLabel, isNameserversForm, addButton, formIdentifier){
|
||||
let totalForms = document.querySelector(`#id_${formIdentifier}-TOTAL_FORMS`);
|
||||
let formToRemove = e.target.closest(".repeatable-form");
|
||||
formToRemove.remove();
|
||||
let forms = document.querySelectorAll(".repeatable-form");
|
||||
totalForms.setAttribute('value', `${forms.length}`);
|
||||
|
||||
// Remove error classes
|
||||
if (input.classList.contains('usa-input--error')) {
|
||||
input.classList.remove('usa-input--error');
|
||||
}
|
||||
let formNumberRegex = RegExp(`form-(\\d){1}-`, 'g');
|
||||
let formLabelRegex = RegExp(`${formLabel} (\\d+){1}`, 'g');
|
||||
// For the example on Nameservers
|
||||
let formExampleRegex = RegExp(`ns(\\d+){1}`, 'g');
|
||||
|
||||
let label = document.querySelector(`label[for="${input.id}"]`);
|
||||
if (label) {
|
||||
label.classList.remove('usa-label--error');
|
||||
forms.forEach((form, index) => {
|
||||
// Iterate over child nodes of the current element
|
||||
Array.from(form.querySelectorAll('label, input, select')).forEach((node) => {
|
||||
// Iterate through the attributes of the current node
|
||||
Array.from(node.attributes).forEach((attr) => {
|
||||
// Check if the attribute value matches the regex
|
||||
if (formNumberRegex.test(attr.value)) {
|
||||
// Replace the attribute value with the updated value
|
||||
attr.value = attr.value.replace(formNumberRegex, `form-${index}-`);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Remove error classes from parent div
|
||||
let parentDiv = label.parentElement;
|
||||
if (parentDiv) {
|
||||
parentDiv.classList.remove('usa-form-group--error');
|
||||
// h2 and legend for DS form, label for nameservers
|
||||
Array.from(form.querySelectorAll('h2, legend, label, p')).forEach((node) => {
|
||||
|
||||
// If the node is a nameserver label, one of the first 2 which was previously 3 and up (not required)
|
||||
// inject the USWDS required markup and make sure the INPUT is required
|
||||
if (isNameserversForm && index <= 1 && node.innerHTML.includes('server') && !node.innerHTML.includes('*')) {
|
||||
// Create a new element
|
||||
const newElement = document.createElement('abbr');
|
||||
newElement.textContent = '*';
|
||||
newElement.setAttribute("title", "required");
|
||||
newElement.classList.add("usa-hint", "usa-hint--required");
|
||||
|
||||
// Append the new element to the label
|
||||
node.appendChild(newElement);
|
||||
// Find the next sibling that is an input element
|
||||
let nextInputElement = node.nextElementSibling;
|
||||
|
||||
while (nextInputElement) {
|
||||
if (nextInputElement.tagName === 'INPUT') {
|
||||
// Found the next input element
|
||||
nextInputElement.setAttribute("required", "")
|
||||
break;
|
||||
}
|
||||
nextInputElement = nextInputElement.nextElementSibling;
|
||||
}
|
||||
nextInputElement.required = true;
|
||||
}
|
||||
|
||||
let innerSpan = node.querySelector('span')
|
||||
if (innerSpan) {
|
||||
innerSpan.textContent = innerSpan.textContent.replace(formLabelRegex, `${formLabel} ${index + 1}`);
|
||||
} else {
|
||||
node.textContent = node.textContent.replace(formLabelRegex, `${formLabel} ${index + 1}`);
|
||||
node.textContent = node.textContent.replace(formExampleRegex, `ns${index + 1}`);
|
||||
}
|
||||
});
|
||||
|
||||
// Display the add more button if we have less than 13 forms
|
||||
if (isNameserversForm && forms.length <= 13) {
|
||||
addButton.removeAttribute("disabled");
|
||||
}
|
||||
|
||||
if (isNameserversForm && forms.length < 3) {
|
||||
// Hide the delete buttons on the remaining nameservers
|
||||
Array.from(form.querySelectorAll('.delete-record')).forEach((deleteButton) => {
|
||||
deleteButton.setAttribute("disabled", "true");
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete method for formsets using the DJANGO DELETE widget (Other Contacts)
|
||||
*
|
||||
*/
|
||||
function markForm(e, formLabel){
|
||||
// Unlike removeForm, we only work with the visible forms when using DJANGO's DELETE widget
|
||||
let totalShownForms = document.querySelectorAll(`.repeatable-form:not([style*="display: none"])`).length;
|
||||
|
||||
if (totalShownForms == 1) {
|
||||
// toggle the radio buttons
|
||||
let radioButton = document.querySelector('input[name="other_contacts-has_other_contacts"][value="False"]');
|
||||
radioButton.checked = true;
|
||||
// Trigger the change event
|
||||
let event = new Event('change');
|
||||
radioButton.dispatchEvent(event);
|
||||
} else {
|
||||
|
||||
// Grab the hidden delete input and assign a value DJANGO will look for
|
||||
let formToRemove = e.target.closest(".repeatable-form");
|
||||
if (formToRemove) {
|
||||
let deleteInput = formToRemove.querySelector('input[class="deletion"]');
|
||||
if (deleteInput) {
|
||||
deleteInput.value = 'on';
|
||||
}
|
||||
}
|
||||
|
||||
// Set display to 'none'
|
||||
formToRemove.style.display = 'none';
|
||||
}
|
||||
|
||||
// Update h2s on the visible forms only. We won't worry about the forms' identifiers
|
||||
let shownForms = document.querySelectorAll(`.repeatable-form:not([style*="display: none"])`);
|
||||
let formLabelRegex = RegExp(`${formLabel} (\\d+){1}`, 'g');
|
||||
shownForms.forEach((form, index) => {
|
||||
// Iterate over child nodes of the current element
|
||||
Array.from(form.querySelectorAll('h2')).forEach((node) => {
|
||||
node.textContent = node.textContent.replace(formLabelRegex, `${formLabel} ${index + 1}`);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Prepare the namerservers, DS data and Other Contacts formsets' delete button
|
||||
* for the last added form. We call this from the Add function
|
||||
*
|
||||
*/
|
||||
function prepareNewDeleteButton(btn, formLabel) {
|
||||
let formIdentifier = "form"
|
||||
let isNameserversForm = document.querySelector(".nameservers-form");
|
||||
let isOtherContactsForm = document.querySelector(".other-contacts-form");
|
||||
let addButton = document.querySelector("#add-form");
|
||||
|
||||
if (isOtherContactsForm) {
|
||||
formIdentifier = "other_contacts";
|
||||
// We will mark the forms for deletion
|
||||
btn.addEventListener('click', function(e) {
|
||||
markForm(e, formLabel);
|
||||
});
|
||||
} else {
|
||||
// We will remove the forms and re-order the formset
|
||||
btn.addEventListener('click', function(e) {
|
||||
removeForm(e, formLabel, isNameserversForm, addButton, formIdentifier);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Prepare the namerservers and DS data forms delete buttons
|
||||
* We will call this on the forms init, and also every time we add a form
|
||||
* Prepare the namerservers, DS data and Other Contacts formsets' delete buttons
|
||||
* We will call this on the forms init
|
||||
*
|
||||
*/
|
||||
function prepareDeleteButtons(formLabel) {
|
||||
let formIdentifier = "form"
|
||||
let deleteButtons = document.querySelectorAll(".delete-record");
|
||||
let totalForms = document.querySelector("#id_form-TOTAL_FORMS");
|
||||
let isNameserversForm = document.title.includes("DNS name servers |");
|
||||
let isNameserversForm = document.querySelector(".nameservers-form");
|
||||
let isOtherContactsForm = document.querySelector(".other-contacts-form");
|
||||
let addButton = document.querySelector("#add-form");
|
||||
|
||||
if (isOtherContactsForm) {
|
||||
formIdentifier = "other_contacts";
|
||||
}
|
||||
|
||||
// Loop through each delete button and attach the click event listener
|
||||
deleteButtons.forEach((deleteButton) => {
|
||||
deleteButton.addEventListener('click', removeForm);
|
||||
if (isOtherContactsForm) {
|
||||
// We will mark the forms for deletion
|
||||
deleteButton.addEventListener('click', function(e) {
|
||||
markForm(e, formLabel);
|
||||
});
|
||||
} else {
|
||||
// We will remove the forms and re-order the formset
|
||||
deleteButton.addEventListener('click', function(e) {
|
||||
removeForm(e, formLabel, isNameserversForm, addButton, formIdentifier);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function removeForm(e){
|
||||
let formToRemove = e.target.closest(".repeatable-form");
|
||||
formToRemove.remove();
|
||||
let forms = document.querySelectorAll(".repeatable-form");
|
||||
totalForms.setAttribute('value', `${forms.length}`);
|
||||
/**
|
||||
* DJANGO formset's DELETE widget
|
||||
* On form load, hide deleted forms, ie. those forms with hidden input of class 'deletion'
|
||||
* with value='on'
|
||||
*/
|
||||
function hideDeletedForms() {
|
||||
let hiddenDeleteButtonsWithValueOn = document.querySelectorAll('input[type="hidden"].deletion[value="on"]');
|
||||
|
||||
let formNumberRegex = RegExp(`form-(\\d){1}-`, 'g');
|
||||
let formLabelRegex = RegExp(`${formLabel} (\\d+){1}`, 'g');
|
||||
// For the example on Nameservers
|
||||
let formExampleRegex = RegExp(`ns(\\d+){1}`, 'g');
|
||||
|
||||
forms.forEach((form, index) => {
|
||||
// Iterate over child nodes of the current element
|
||||
Array.from(form.querySelectorAll('label, input, select')).forEach((node) => {
|
||||
// Iterate through the attributes of the current node
|
||||
Array.from(node.attributes).forEach((attr) => {
|
||||
// Check if the attribute value matches the regex
|
||||
if (formNumberRegex.test(attr.value)) {
|
||||
// Replace the attribute value with the updated value
|
||||
attr.value = attr.value.replace(formNumberRegex, `form-${index}-`);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// h2 and legend for DS form, label for nameservers
|
||||
Array.from(form.querySelectorAll('h2, legend, label, p')).forEach((node) => {
|
||||
|
||||
// If the node is a nameserver label, one of the first 2 which was previously 3 and up (not required)
|
||||
// inject the USWDS required markup and make sure the INPUT is required
|
||||
if (isNameserversForm && index <= 1 && node.innerHTML.includes('server') && !node.innerHTML.includes('*')) {
|
||||
// Create a new element
|
||||
const newElement = document.createElement('abbr');
|
||||
newElement.textContent = '*';
|
||||
newElement.setAttribute("title", "required");
|
||||
newElement.classList.add("usa-hint", "usa-hint--required");
|
||||
|
||||
// Append the new element to the label
|
||||
node.appendChild(newElement);
|
||||
// Find the next sibling that is an input element
|
||||
let nextInputElement = node.nextElementSibling;
|
||||
|
||||
while (nextInputElement) {
|
||||
if (nextInputElement.tagName === 'INPUT') {
|
||||
// Found the next input element
|
||||
nextInputElement.setAttribute("required", "")
|
||||
break;
|
||||
}
|
||||
nextInputElement = nextInputElement.nextElementSibling;
|
||||
}
|
||||
nextInputElement.required = true;
|
||||
}
|
||||
|
||||
let innerSpan = node.querySelector('span')
|
||||
if (innerSpan) {
|
||||
innerSpan.textContent = innerSpan.textContent.replace(formLabelRegex, `${formLabel} ${index + 1}`);
|
||||
} else {
|
||||
node.textContent = node.textContent.replace(formLabelRegex, `${formLabel} ${index + 1}`);
|
||||
node.textContent = node.textContent.replace(formExampleRegex, `ns${index + 1}`);
|
||||
}
|
||||
});
|
||||
|
||||
// Display the add more button if we have less than 13 forms
|
||||
if (isNameserversForm && forms.length <= 13) {
|
||||
console.log('remove disabled');
|
||||
addButton.removeAttribute("disabled");
|
||||
// Iterating over the NodeList of hidden inputs
|
||||
hiddenDeleteButtonsWithValueOn.forEach(function(hiddenInput) {
|
||||
// Finding the closest parent element with class "repeatable-form" for each hidden input
|
||||
var repeatableFormToHide = hiddenInput.closest('.repeatable-form');
|
||||
|
||||
// Checking if a matching parent element is found for each hidden input
|
||||
if (repeatableFormToHide) {
|
||||
// Setting the display property to "none" for each matching parent element
|
||||
repeatableFormToHide.style.display = 'none';
|
||||
}
|
||||
|
||||
if (isNameserversForm && forms.length < 3) {
|
||||
// Hide the delete buttons on the remaining nameservers
|
||||
Array.from(form.querySelectorAll('.delete-record')).forEach((deleteButton) => {
|
||||
deleteButton.setAttribute("disabled", "true");
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -386,25 +435,38 @@ function prepareDeleteButtons(formLabel) {
|
|||
* it everywhere.
|
||||
*/
|
||||
(function prepareFormsetsForms() {
|
||||
let formIdentifier = "form"
|
||||
let repeatableForm = document.querySelectorAll(".repeatable-form");
|
||||
let container = document.querySelector("#form-container");
|
||||
let addButton = document.querySelector("#add-form");
|
||||
let totalForms = document.querySelector("#id_form-TOTAL_FORMS");
|
||||
let cloneIndex = 0;
|
||||
let formLabel = '';
|
||||
let isNameserversForm = document.title.includes("DNS name servers |");
|
||||
let isNameserversForm = document.querySelector(".nameservers-form");
|
||||
let isOtherContactsForm = document.querySelector(".other-contacts-form");
|
||||
let isDsDataForm = document.querySelector(".ds-data-form");
|
||||
// The Nameservers formset features 2 required and 11 optionals
|
||||
if (isNameserversForm) {
|
||||
cloneIndex = 2;
|
||||
formLabel = "Name server";
|
||||
} else if ((document.title.includes("DS Data |")) || (document.title.includes("Key Data |"))) {
|
||||
formLabel = "DS Data record";
|
||||
// DNSSEC: DS Data
|
||||
} else if (isDsDataForm) {
|
||||
formLabel = "DS data record";
|
||||
// The Other Contacts form
|
||||
} else if (isOtherContactsForm) {
|
||||
formLabel = "Organization contact";
|
||||
container = document.querySelector("#other-employees");
|
||||
formIdentifier = "other_contacts"
|
||||
}
|
||||
let totalForms = document.querySelector(`#id_${formIdentifier}-TOTAL_FORMS`);
|
||||
|
||||
// On load: Disable the add more button if we have 13 forms
|
||||
if (isNameserversForm && document.querySelectorAll(".repeatable-form").length == 13) {
|
||||
addButton.setAttribute("disabled", "true");
|
||||
}
|
||||
|
||||
// Hide forms which have previously been deleted
|
||||
hideDeletedForms()
|
||||
|
||||
// Attach click event listener on the delete buttons of the existing forms
|
||||
prepareDeleteButtons(formLabel);
|
||||
|
||||
|
|
@ -415,7 +477,7 @@ function prepareDeleteButtons(formLabel) {
|
|||
let forms = document.querySelectorAll(".repeatable-form");
|
||||
let formNum = forms.length;
|
||||
let newForm = repeatableForm[cloneIndex].cloneNode(true);
|
||||
let formNumberRegex = RegExp(`form-(\\d){1}-`,'g');
|
||||
let formNumberRegex = RegExp(`${formIdentifier}-(\\d){1}-`,'g');
|
||||
let formLabelRegex = RegExp(`${formLabel} (\\d){1}`, 'g');
|
||||
// For the eample on Nameservers
|
||||
let formExampleRegex = RegExp(`ns(\\d){1}`, 'g');
|
||||
|
|
@ -448,16 +510,27 @@ function prepareDeleteButtons(formLabel) {
|
|||
}
|
||||
|
||||
formNum++;
|
||||
newForm.innerHTML = newForm.innerHTML.replace(formNumberRegex, `form-${formNum-1}-`);
|
||||
newForm.innerHTML = newForm.innerHTML.replace(formLabelRegex, `${formLabel} ${formNum}`);
|
||||
|
||||
newForm.innerHTML = newForm.innerHTML.replace(formNumberRegex, `${formIdentifier}-${formNum-1}-`);
|
||||
// For the other contacts form, we need to update the fieldset headers based on what's visible vs hidden,
|
||||
// since the form on the backend employs Django's DELETE widget. For the other formsets, we delete the form
|
||||
// in JS (completely remove from teh DOM) so we update the headers/labels based on total number of forms.
|
||||
if (isOtherContactsForm) {
|
||||
let totalShownForms = document.querySelectorAll(`.repeatable-form:not([style*="display: none"])`).length;
|
||||
newForm.innerHTML = newForm.innerHTML.replace(formLabelRegex, `${formLabel} ${totalShownForms + 1}`);
|
||||
} else {
|
||||
newForm.innerHTML = newForm.innerHTML.replace(formLabelRegex, `${formLabel} ${formNum}`);
|
||||
}
|
||||
newForm.innerHTML = newForm.innerHTML.replace(formExampleRegex, `ns${formNum}`);
|
||||
container.insertBefore(newForm, addButton);
|
||||
|
||||
newForm.style.display = 'block';
|
||||
|
||||
let inputs = newForm.querySelectorAll("input");
|
||||
// Reset the values of each input to blank
|
||||
inputs.forEach((input) => {
|
||||
input.classList.remove("usa-input--error");
|
||||
if (input.type === "text" || input.type === "number" || input.type === "password") {
|
||||
if (input.type === "text" || input.type === "number" || input.type === "password" || input.type === "email" || input.type === "tel") {
|
||||
input.value = ""; // Set the value to an empty string
|
||||
|
||||
} else if (input.type === "checkbox" || input.type === "radio") {
|
||||
|
|
@ -494,7 +567,8 @@ function prepareDeleteButtons(formLabel) {
|
|||
totalForms.setAttribute('value', `${formNum}`);
|
||||
|
||||
// Attach click event listener on the delete buttons of the new form
|
||||
prepareDeleteButtons(formLabel);
|
||||
let newDeleteButton = newForm.querySelector(".delete-record");
|
||||
prepareNewDeleteButton(newDeleteButton, formLabel);
|
||||
|
||||
// Disable the add more button if we have 13 forms
|
||||
if (isNameserversForm && formNum == 13) {
|
||||
|
|
@ -538,3 +612,57 @@ function prepareDeleteButtons(formLabel) {
|
|||
}, 50);
|
||||
}
|
||||
})();
|
||||
|
||||
// A generic display none/block toggle function that takes an integer param to indicate how the elements toggle
|
||||
function toggleTwoDomElements(ele1, ele2, index) {
|
||||
let element1 = document.getElementById(ele1);
|
||||
let element2 = document.getElementById(ele2);
|
||||
if (element1 && element2) {
|
||||
// Toggle display based on the index
|
||||
element1.style.display = index === 1 ? 'block' : 'none';
|
||||
element2.style.display = index === 2 ? 'block' : 'none';
|
||||
} else {
|
||||
console.error('One or both elements not found.');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* An IIFE that listens to the other contacts radio form on DAs and toggles the contacts/no other contacts forms
|
||||
*
|
||||
*/
|
||||
(function otherContactsFormListener() {
|
||||
// Get the radio buttons
|
||||
let radioButtons = document.querySelectorAll('input[name="other_contacts-has_other_contacts"]');
|
||||
|
||||
function handleRadioButtonChange() {
|
||||
// Check the value of the selected radio button
|
||||
// Attempt to find the radio button element that is checked
|
||||
let radioButtonChecked = document.querySelector('input[name="other_contacts-has_other_contacts"]:checked');
|
||||
|
||||
// Check if the element exists before accessing its value
|
||||
let selectedValue = radioButtonChecked ? radioButtonChecked.value : null;
|
||||
|
||||
switch (selectedValue) {
|
||||
case 'True':
|
||||
toggleTwoDomElements('other-employees', 'no-other-employees', 1);
|
||||
break;
|
||||
|
||||
case 'False':
|
||||
toggleTwoDomElements('other-employees', 'no-other-employees', 2);
|
||||
break;
|
||||
|
||||
default:
|
||||
toggleTwoDomElements('other-employees', 'no-other-employees', 0);
|
||||
}
|
||||
}
|
||||
|
||||
if (radioButtons.length) {
|
||||
// Add event listener to each radio button
|
||||
radioButtons.forEach(function (radioButton) {
|
||||
radioButton.addEventListener('change', handleRadioButtonChange);
|
||||
});
|
||||
|
||||
// initialize
|
||||
handleRadioButtonChange();
|
||||
}
|
||||
})();
|
||||
Loading…
Add table
Add a link
Reference in a new issue