zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-08-15 14:04:10 +02:00
Code Issues Projects Releases Packages Wiki Activity

simplify javascript (a lot)

Browse source
This commit is contained in:
zandercymatics 2024-10-30 15:28:05 -06:00
parent 98842c1aa0
commit 603e2eb767
No known key found for this signature in database
GPG key ID: FF4636ABEC9682B7
1 changed files with 33 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

87
src/registrar/assets/js/get-gov.js
View file

@ -2742,78 +2742,53 @@ document.addEventListener('DOMContentLoaded', function() {
(function handleRequestingEntityFieldset() { (function handleRequestingEntityFieldset() {
// Sadly, these ugly ids are the auto generated with this prefix // Sadly, these ugly ids are the auto generated with this prefix
const formPrefix = "portfolio_requesting_entity" const formPrefix = "portfolio_requesting_entity"
const radioFieldset = document.getElementById(`id_${formPrefix}-requesting_entity_is_suborganization__fieldset`);
// This determines if we are on the requesting entity page or not. const radios = radioFieldset?.querySelectorAll(`input[name="${formPrefix}-requesting_entity_is_suborganization"]`);
const isSubOrgFieldset = document.getElementById(`id_${formPrefix}-requesting_entity_is_suborganization__fieldset`); const select = document.getElementById(`id_${formPrefix}-sub_organization`);
if (!isSubOrgFieldset) return;
// Get the is_suborganization radio buttons
const isSuborgRadios = isSubOrgFieldset.querySelectorAll(`input[name="${formPrefix}-requesting_entity_is_suborganization"]`);
const subOrgSelect = document.getElementById(`id_${formPrefix}-sub_organization`);
// The suborganization section is its own div
// Within the suborganization section, we also have a div that contains orgname, city, and stateterritory.
const suborganizationContainer = document.getElementById("suborganization-container"); const suborganizationContainer = document.getElementById("suborganization-container");
const suborganizationDetailsContainer = document.getElementById("suborganization-container__details"); const suborganizationDetailsContainer = document.getElementById("suborganization-container__details");
if (!radios || !select || !suborganizationContainer || !suborganizationDetailsContainer) return;
// This variable determines if the user is trying to *create* a new suborganization or not. // requestingSuborganization: This just broadly determines if they're requesting a suborg at all
var isRequestingSuborganization = document.getElementById(`id_${formPrefix}-is_requesting_new_suborganization`) // requestingNewSuborganization: This variable determines if the user is trying to *create* a new suborganization or not.
var requestingSuborganization = false;
var requestingNewSuborganization = document.getElementById(`id_${formPrefix}-is_requesting_new_suborganization`);
// Don't do anything if we are missing crucial page elements
if (!isSuborgRadios || !subOrgSelect || !suborganizationContainer || !suborganizationDetailsContainer) return;
// Function to toggle suborganization based on is_suborganization selection
function toggleSuborganization(radio) { function toggleSuborganization(radio) {
if (radio && radio.checked && radio.value === "True") { requestingSuborganization = radio?.checked && radio.value === "True";
if (requestingSuborganization) {
showElement(suborganizationContainer); showElement(suborganizationContainer);
}else {
// Handle custom suborganizations
if (subOrgSelect.value === "other") {
showElement(suborganizationDetailsContainer);
isRequestingSuborganization.value = "True";
} else {
hideElement(suborganizationDetailsContainer);
isRequestingSuborganization.value = "False";
}
} else {
hideElement(suborganizationContainer); hideElement(suborganizationContainer);
hideElement(suborganizationDetailsContainer);
} }
}; }
function toggleSuborganizationDetails() {
if (requestingSuborganization && select.value === "other") {
showElement(suborganizationDetailsContainer);
requestingNewSuborganization.value = "True";
}else {
hideElement(suborganizationDetailsContainer);
requestingNewSuborganization.value = "False";
}
}
// Add fake "other" option to sub_organization select // Add fake "other" option to sub_organization select
if (subOrgSelect && !Array.from(subOrgSelect.options).some(option => option.value === "other")) { if (select && !Array.from(select.options).some(option => option.value === "other")) {
const fakeOption = document.createElement("option"); select.add(new Option("Other (enter your organization manually)", "other"));
fakeOption.value = "other";
fakeOption.text = "Other (enter your organization manually)";
subOrgSelect.add(fakeOption);
} }
if (isRequestingSuborganization.value === "True") { if (requestingNewSuborganization.value === "True") {
subOrgSelect.value = "other" select.value = "other";
} }
// Add event listener to is_suborganization radio buttons // Add event listener to is_suborganization radio buttons, and run for initial display
isSuborgRadios.forEach(radio => { radios.forEach(radio => {
// Run this here for initial display.
// Since there are only two radio buttons and since this has (practically speaking) no performance impact, this is fine to do.
toggleSuborganization(radio); toggleSuborganization(radio);
radio.addEventListener("click", () => toggleSuborganization(radio));
// Add an event listener to each to show/hide the relevant fields
radio.addEventListener("click", () => {
toggleSuborganization(radio);
});
}); });
// Add event listener to the suborg dropdown to show/hide the suborg details section // Add event listener to the suborg dropdown to show/hide the suborg details section
subOrgSelect.addEventListener("change", () => { toggleSuborganizationDetails();
// Handle the custom suborganization field select.addEventListener("change", () => toggleSuborganizationDetails());
if (subOrgSelect.value === "other") {
showElement(suborganizationDetailsContainer);
isRequestingSuborganization.value = "True";
} else {
hideElement(suborganizationDetailsContainer);
isRequestingSuborganization.value = "False";
}
});
})(); })();