zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-07-03 09:43:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

Use modal

Browse source
This commit is contained in:
zandercymatics 2024-02-09 11:50:05 -07:00
parent d18baa773c
commit a1769b50c6
No known key found for this signature in database
GPG key ID: FF4636ABEC9682B7
3 changed files with 99 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/registrar/assets/js/get-gov-admin.js
View file

@ -23,6 +23,33 @@ function openInNewTab(el, removeAttribute = false){
// <<>><<>><<>><<>><<>><<>><<>><<>><<>><<>><<>><<>><<>><<>><<>>
// Initialization code.
/** An IIFE for pages in DjangoAdmin that use modals.
* Dja strips out form elements, and modals generate their content outside
* of the current form scope, so we need to "inject" these inputs.
*/
(function (){
function createPhantomModalFormButtons(){
let submitButtons = document.querySelectorAll('.usa-modal button[type="submit"]');
form = document.querySelector("form")
submitButtons.forEach((button) => {
let input = document.createElement("input");
input.type = "submit";
input.name = button.name;
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();
})
})
}
createPhantomModalFormButtons();
})();
/** 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.
@ -44,24 +71,6 @@ function openInNewTab(el, removeAttribute = false){
domainSubmitButton.addEventListener("mouseover", () => openInNewTab(domainFormElement, true));
domainSubmitButton.addEventListener("mouseout", () => openInNewTab(domainFormElement, false));
}
let extendExpirationDateButton = document.getElementById("extend-expiration-button")
let confirmationButtons = document.querySelector(".admin-confirmation-buttons")
let cancelExpirationButton = document.querySelector(".cancel-extend-button")
if (extendExpirationDateButton && confirmationButtons && cancelExpirationButton){
// Tie logic to the extend button to show confirmation options
extendExpirationDateButton.addEventListener("click", () => {
extendExpirationDateButton.hidden = true
confirmationButtons.hidden = false
})
// Tie logic to the cancel button to hide the confirmation options
cancelExpirationButton.addEventListener("click", () => {
confirmationButtons.hidden = true
extendExpirationDateButton.hidden = false
})
}
}
prepareDjangoAdmin();

7
src/registrar/assets/sass/_theme/_admin.scss
View file

@ -278,3 +278,10 @@ h1, h2, h3,
input.admin-confirm-button{
text-transform: none !important;
}
// Button groups in /admin incorrectly have bullets.
// Remove that!
.usa-modal__footer .usa-button-group__item{
list-style-type: none;
}

66
src/registrar/templates/django/admin/domain_change_form.html
View file

@ -17,7 +17,14 @@
<span>&nbsp;</span>
<input class="cancel-extend-button" type="button" value="Cancel">
</span>
<input id="extend-expiration-button" type="button" value="Extend expiration date" class="custom-link-button">
<a
class="text-middle"
href="#toggle-extend-expiration-alert"
aria-controls="toggle-extend-expiration-alert"
data-open-modal
>
Extend expiration date
</a>
<span class="margin-left-05 margin-right-05 text-middle"> | </span>
{% endif %}
{% if original.state == original.State.READY %}
@ -35,3 +42,60 @@
</div>
{{ block.super }}
{% endblock %}
{% block submit_buttons_bottom %}
<div
class="usa-modal"
id="toggle-extend-expiration-alert"
aria-labelledby="Are you sure you want to extend this expiration date?"
aria-describedby="This expiration date will be extended."
>
<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 extend this expiration date?
</h2>
<div class="usa-prose">
<p id="modal-1-description">
This action will extend the expiration date by a year.
</p>
</div>
<div class="usa-modal__footer">
<ul class="usa-button-group">
<li class="usa-button-group__item">
<button
id="extend_expiration_date_button"
type="submit"
class="usa-button dja-form-placeholder"
name="_extend_expiration_date"
>
Confirm
</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>
</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 %}