diff --git a/src/registrar/assets/js/get-gov-admin.js b/src/registrar/assets/js/get-gov-admin.js index ff73acb65..df748c840 100644 --- a/src/registrar/assets/js/get-gov-admin.js +++ b/src/registrar/assets/js/get-gov-admin.js @@ -76,6 +76,48 @@ function openInNewTab(el, removeAttribute = false){ prepareDjangoAdmin(); })(); +/** An IIFE for pages in DjangoAdmin that use a clipboard button +*/ +(function (){ + function copyToClipboardAndChangeIcon(button) { + // Assuming the input is the previous sibling of the button + let input = button.previousElementSibling; + + // Copy input value to clipboard + if (input) { + navigator.clipboard.writeText(input.value).then(function() { + // Change the icon to a checkmark on successful copy + let buttonIcon = button .querySelector('.usa-button__clipboard use'); + if (buttonIcon) { + let currentHref = buttonIcon.getAttribute('xlink:href'); + let baseHref = currentHref.split('#')[0]; + + // Append the new icon reference + buttonIcon.setAttribute('xlink:href', baseHref + '#check'); + setTimeout(function() { + // Change back to the copy icon + buttonIcon.setAttribute('xlink:href', currentHref); + }, 2000); + } + + }).catch(function(error) { + console.error('Clipboard copy failed', error); + }); + } + } + + function handleClipboardButtons() { + clipboardButtons = document.querySelectorAll(".usa-button__clipboard") + clipboardButtons.forEach((button) => { + button.addEventListener("click", ()=>{copyToClipboardAndChangeIcon(button)}); + }); + } + + handleClipboardButtons(); + +})(); + + /** * An IIFE to listen to changes on filter_horizontal and enable or disable the change/delete/view buttons as applicable * diff --git a/src/registrar/templates/django/admin/includes/contact_fieldset.html b/src/registrar/templates/django/admin/includes/contact_fieldset.html index c2a10f4fd..90e8f911f 100644 --- a/src/registrar/templates/django/admin/includes/contact_fieldset.html +++ b/src/registrar/templates/django/admin/includes/contact_fieldset.html @@ -21,7 +21,7 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html) {% elif field.field.name == "email" %}
{{ field.field }} -