Add button to copy broken links on nofo_edit page

We have a little alert box that lists broken links in a NOFO document,
which is very convenient, but a bit tricky to copy manually.

Both Adam and one of our gov users have mentioned that it would be
good to have a button to just copy the list of broken links and email
them to whoever the NOFO writer is.

This button is pretty basic but it works!

Doesn’t bother copying the hrefs because the point is that these links
are broken anyway.

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is based on Keep a Changelog, and this project adheres to Semantic Ve
 
 ### Added
 
+- Add button to copy list of broken links on nofo_edit page
 - Convert 'Heading 7' styles from Word
 - Add cover image for CDC-RFA-DD-25-0157
 - Add cover image for CDC-RFA-DP-25-0024
@@ -17,6 +18,8 @@ The format is based on Keep a Changelog, and this project adheres to Semantic Ve
 
 ### Fixed
 
+- Added more known styles for the mammoth style map
+
 ## [1.29.0] - 2023-10-19
 
 ### Added

bloom_nofos/bloom_nofos/static/styles.css

@@ -301,6 +301,14 @@ details > summary > span:hover {
   margin-bottom: 0;
 }
 
+.nofo_edit .usa-site-alert .usa-button-icon--copy-button {
+  padding: 0.75rem 1rem 0.75rem 0.9rem;
+  position: absolute;
+  right: 0;
+  top: 2rem;
+  margin-right: 4rem; /* match the padding on usa-alert__body */
+}
+
 .nofo_edit .usa-site-alert--heading-errors .usa-alert {
   border-left-color: var(--color--usa-error-bg-dark);
 }
@@ -389,6 +397,20 @@ details > summary > span:hover {
   height: 17px;
 }
 
+.nofo_edit .usa-alert__body .usa-button-icon--copy-button::before {
+  content: "";
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+  display: inline-flex;
+  background-image: url("/static/img/usa-icons/content_copy.svg");
+  filter: invert(99%) sepia(100%) saturate(207%) hue-rotate(194deg)
+    brightness(111%) contrast(100%);
+  width: 13px;
+  height: 12px;
+  margin-right: 4px;
+}
+
 .nofo_edit
   .section--copy-button
   .usa-button-icon--copy-button.usa-button-icon--copy-button--copied::after,

bloom_nofos/nofos/templates/nofos/nofo_edit.html

@@ -105,6 +105,7 @@ <h2 class="usa-summary-box__heading font-heading-sm" id="summary-box-key-informa
   <div class="usa-alert">
     <div class="usa-alert__body">
       <h3 class="usa-alert__heading">Warning: some internal links are broken</h3>
+      <button class="usa-button usa-button--outline usa-button--inverse usa-button-icon--copy-button font-sans-2xs" type="button">Copy links</button>
       <div>
         <details>
           <summary>
@@ -423,9 +424,9 @@ <h2 class="margin-bottom-0" id="{{ section.html_id }}">{{ section.name }}</h2>
 {% block js_footer %}
 <script>
   document.addEventListener('DOMContentLoaded', function() {
-    const buttons = document.querySelectorAll('.usa-button-icon--copy-button');
-
-    buttons.forEach(button => {
+    // Copy buttons for the heading ids
+    const tableButtons = document.querySelectorAll('.table--section .usa-button-icon--copy-button');
+    tableButtons.forEach(button => {
         button.addEventListener('click', function() {
             // Copy data-section-id to clipboard
             navigator.clipboard.writeText(`#${this.getAttribute('data-section-id')}`);
@@ -443,6 +444,44 @@ <h2 class="margin-bottom-0" id="{{ section.html_id }}">{{ section.name }}</h2>
             }, 1000);
         });
     });
+
+    // Copy buttons inside of the alert boxes (eg, copy broken links)
+    const alertButtons = document.querySelectorAll('.usa-site-alert .usa-button-icon--copy-button');
+    alertButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            // Find the nearest parent with the class '.usa-site-alert'
+            const alertBox = this.closest('.usa-site-alert');
+            if (!alertBox) {
+                return console.error('Error: no alert box.');
+            }
+
+            const detailsElement = alertBox.querySelector('details');
+
+            const wasClosed = !detailsElement.open;
+            // Temporarily open the <details> element if it's closed
+            if (wasClosed) {
+                detailsElement.open = true;
+            }
+
+            const summaryText = alertBox.querySelector('summary').innerText;
+            const listText = Array.from(alertBox.querySelectorAll('ol li'))
+                .map((item, i) => `${i + 1}. ${item.innerText}`)
+                .join('\n');
+
+            navigator.clipboard.writeText(`${summaryText}\n\n${listText}`)
+                .then(() => {
+                    // Change button text on success
+                    button.innerHTML = 'Copied!';
+                    // Revert text after 1 second
+                    setTimeout(() => button.innerHTML = 'Copy links', 1000);
+                })
+                .catch(err => console.error('Failed to copy text: ' + err));
+
+            if (wasClosed) {
+                detailsElement.open = false;
+            }
+        });
+    });
   });
 </script>
 {% endblock %}