mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-07-22 10:46:06 +02:00
JS changes
This commit is contained in:
zandercymatics
parent
eeff5586d2
commit
7d65b2cf5c
2 changed files with 135 additions and 66 deletions
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue