JS changes

This commit is contained in:
zandercymatics 2024-02-29 10:15:21 -07:00
parent eeff5586d2
commit 7d65b2cf5c
No known key found for this signature in database
GPG key ID: FF4636ABEC9682B7
2 changed files with 135 additions and 66 deletions

View file

@ -35,14 +35,20 @@ function openInNewTab(el, removeAttribute = false){
let input = document.createElement("input");
input.type = "submit";
input.name = button.name;
input.value = button.value;
if(button.name){
input.name = button.name;
}
if(button.value){
input.value = button.value;
}
input.style.display = "none"
// Add the hidden input to the form
form.appendChild(input);
button.addEventListener("click", () => {
console.log("clicking")
input.click();
})
})
@ -50,6 +56,60 @@ function openInNewTab(el, removeAttribute = false){
createPhantomModalFormButtons();
})();
/** An IIFE for DomainApplication to hook a modal to a dropdown option.
* This intentionally does not interact with createPhantomModalFormButtons()
*/
(function (){
function displayModalOnDropdownClick(){
// Grab the invisible element that will hook to the modal.
// This doesn't technically need to be done with one, but this is simpler to manage.
let linkClickedDisplaysModal = document.getElementById("invisible-ineligible-modal-toggler")
let statusDropdown = document.getElementById("id_status")
// If these exist all at the same time, we're on the right page
if (linkClickedDisplaysModal && statusDropdown && statusDropdown.value){
// Store the previous value in the event the user cancels.
// We only need to do this if we're on the correct page.
let previousValue = statusDropdown.value;
// Because the modal button does not have the class "dja-form-placeholder",
// it will not be affected by the createPhantomModalFormButtons() function.
let cancelButton = document.querySelector('button[name="_cancel_application_ineligible"]');
if (cancelButton){
console.log(`This is the previous val: ${previousValue}`)
cancelButton.addEventListener('click', function() {
// Revert the dropdown to its previous value
statusDropdown.value = previousValue;
});
// Add a change event listener to the dropdown.
statusDropdown.addEventListener('change', function() {
// Check if "Ineligible" is selected
if (this.value && this.value.toLowerCase() === "ineligible") {
// Display the modal.
linkClickedDisplaysModal.click()
}
// Update previousValue if another option is selected and confirmed
previousValue = this.value;
console.log(`This is the previous val NOW: ${previousValue}`)
});
} else{
console.error("displayModalOnDropdownClick() -> No cancel button defined.")
}
}
}
// Adds event listeners on the confirm and cancel modal buttons
function handleModalButtons(){
}
displayModalOnDropdownClick();
})();
/** An IIFE for pages in DjangoAdmin which may need custom JS implementation.
* Currently only appends target="_blank" to the domain_form object,
* but this can be expanded.

View file

@ -1,6 +1,12 @@
{% extends 'admin/change_form.html' %}
{% load i18n static %}
{% block field_sets %}
{# Create an invisible <a> tag so that we can use a click event to toggle the modal. #}
<a id="invisible-ineligible-modal-toggler" class="display-none" href="#toggle-set-ineligible" aria-controls="toggle-set-ineligible" data-open-modal></a>
{{ block.super }}
{% endblock %}
{% block submit_buttons_bottom %}
{% comment %}
Modals behave very weirdly in django admin.
@ -16,72 +22,75 @@
In addition, the modal element MUST be placed low in the DOM. The script loads slower on DJA than on other portions
of the application, so this means that it will briefly "populate", causing unintended visual effects.
{% endcomment %}
{# Create a modal for when a domain is marked as ineligible #}
<div
class="usa-modal"
id="toggle-remove-from-registry"
aria-labelledby="Are you sure you want to select ineligible status?"
aria-describedby="This domain will be removed."
>
<div class="usa-modal__content">
<div class="usa-modal__main">
<h2 class="usa-modal__heading" id="modal-1-heading">
Are you sure you want to select ineligible status?
</h2>
<div class="usa-prose">
<p>
When a domain request is in ineligible status, the registrant's permissions within the registrar are restricted as follows:
</p>
<ul>
<li>They cannot edit the ineligible request or any other pending requests.</li>
<li>They cannot manage any of their approved domains.</li>
<li>They cannot initiate a new domain request.</li>
</ul>
<p>
This action can be reversed, if needed.
</p>
<p>
{# Acts as a <br> #}
<div class="display-inline"></div>
Domain: <b>{{ original.name }}</b>
New status: <b>{{ original.State }}</b>
</p>
</div>
{# Create a modal for when a domain is marked as ineligible #}
<div
class="usa-modal"
id="toggle-set-ineligible"
aria-labelledby="Are you sure you want to select ineligible status?"
aria-describedby="This application will be marked as ineligible."
>
<div class="usa-modal__content">
<div class="usa-modal__main">
<h2 class="usa-modal__heading" id="modal-1-heading">
Are you sure you want to select ineligible status?
</h2>
<div class="usa-prose">
<p>
When a domain request is in ineligible status, the registrant's permissions within the registrar are restricted as follows:
</p>
<ul>
<li>They cannot edit the ineligible request or any other pending requests.</li>
<li>They cannot manage any of their approved domains.</li>
<li>They cannot initiate a new domain request.</li>
</ul>
<p>
The restrictions will not take effect until you “save” the changes for this domain request.
This action can be reversed, if needed.
</p>
<p>
{# Acts as a <br> #}
<div class="display-inline"></div>
Domain: <b>{{ original.name }}</b>
New status: <b>{{ original.State }}</b>
</p>
</div>
<div class="usa-modal__footer">
<ul class="usa-button-group">
<li class="usa-button-group__item">
<button
type="submit"
class="usa-button dja-form-placeholder"
name="_delete_domain"
>
Yes, remove from registry
</button>
</li>
<li class="usa-button-group__item">
<button
type="button"
class="usa-button usa-button--unstyled padding-105 text-center"
data-close-modal
>
Cancel
</button>
</li>
</ul>
<div class="usa-modal__footer">
<ul class="usa-button-group">
<li class="usa-button-group__item">
<button
type="submit"
class="usa-button"
name="_set_application_ineligible"
data-close-modal
>
Yes, select ineligible status
</button>
</li>
<li class="usa-button-group__item">
<button
type="button"
class="usa-button usa-button--unstyled padding-105 text-center"
name="_cancel_application_ineligible"
data-close-modal
>
Cancel
</button>
</li>
</ul>
</div>
</div>
<button
type="button"
class="usa-button usa-modal__close"
aria-label="Close this window"
data-close-modal
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
</svg>
</button>
</div>
<button
type="button"
class="usa-button usa-modal__close"
aria-label="Close this window"
data-close-modal
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
</svg>
</button>
</div>
</div>
{{ block.super }}
{% endblock %}