Fixed compiler, fixed edge case where copy-paste doesn't work in plain text situations

This commit is contained in:
CocoByte 2024-07-31 14:06:38 -06:00
parent f1d896e6b6
commit 4bc19d020c
No known key found for this signature in database
GPG key ID: BBFAA2526384C97F
3 changed files with 32 additions and 39 deletions

9
src/package-lock.json generated
View file

@ -9,7 +9,7 @@
"version": "1.0.0", "version": "1.0.0",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@uswds/uswds": "^3.8.0", "@uswds/uswds": "^3.8.1",
"pa11y-ci": "^3.0.1", "pa11y-ci": "^3.0.1",
"sass": "^1.54.8" "sass": "^1.54.8"
}, },
@ -187,9 +187,10 @@
} }
}, },
"node_modules/@uswds/uswds": { "node_modules/@uswds/uswds": {
"version": "3.8.0", "version": "3.8.1",
"resolved": "https://registry.npmjs.org/@uswds/uswds/-/uswds-3.8.0.tgz", "resolved": "https://registry.npmjs.org/@uswds/uswds/-/uswds-3.8.1.tgz",
"integrity": "sha512-rMwCXe/u4HGkfskvS1Iuabapi/EXku3ChaIFW7y/dUhc7R1TXQhbbfp8YXEjmXPF0yqJnv9T08WPgS0fQqWZ8w==", "integrity": "sha512-bKG/B9mJF1v0yoqth48wQDzST5Xyu3OxxpePIPDyhKWS84oDrCehnu3Z88JhSjdIAJMl8dtjtH8YvdO9kZUpAg==",
"license": "SEE LICENSE IN LICENSE.md",
"dependencies": { "dependencies": {
"classlist-polyfill": "1.2.0", "classlist-polyfill": "1.2.0",
"object-assign": "4.1.1", "object-assign": "4.1.1",

View file

@ -10,7 +10,7 @@
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@uswds/uswds": "^3.8.0", "@uswds/uswds": "^3.8.1",
"pa11y-ci": "^3.0.1", "pa11y-ci": "^3.0.1",
"sass": "^1.54.8" "sass": "^1.54.8"
}, },

View file

@ -628,21 +628,19 @@ function initializeWidgetOnList(list, parentId) {
const bulletList = document.createElement('ul'); const bulletList = document.createElement('ul');
// CASE 1 - Contacts are not in a table (this happens if there is only one or two other contacts) // CASE 1 - Contacts are not in a table (this happens if there is only one or two other contacts)
const contacts = document.querySelectorAll('.field-other_contacts .dja-detail-list dt'); const contacts = document.querySelectorAll('.field-other_contacts .dja-detail-list dd');
if (contacts) { if (contacts) {
contacts.forEach(contact => { contacts.forEach(contact => {
// Check if the <dl> element is not empty // Check if the <dl> element is not empty
if (contact.children.length > 0) { const name = contact.querySelector('a#contact_info_name')?.innerText;
const name = contact.querySelector('a#contact_info_name').innerText; const title = contact.querySelector('span#contact_info_title')?.innerText;
const title = contact.querySelector('span#contact_info_title').innerText; const email = contact.querySelector('span#contact_info_email')?.innerText;
const email = contact.querySelector('span#contact_info_email').innerText; const phone = contact.querySelector('span#contact_info_phone')?.innerText;
const phone = contact.querySelector('span#contact_info_phone').innerText;
const url = nameToUrlMap[name] || '#'; const url = nameToUrlMap[name] || '#';
// Format the contact information // Format the contact information
const listItem = document.createElement('li'); const listItem = document.createElement('li');
listItem.innerHTML = `<a href="${url}">${name}</a>, ${title}, ${email}, ${phone}`; listItem.innerHTML = `<a href="${url}">${name}</a>, ${title}, ${email}, ${phone}`;
bulletList.appendChild(listItem); bulletList.appendChild(listItem);
}
}); });
} }
@ -699,35 +697,29 @@ function initializeWidgetOnList(list, parentId) {
const seniorOfficialPhone = extractTextById('contact_info_phone', seniorOfficialDiv); const seniorOfficialPhone = extractTextById('contact_info_phone', seniorOfficialDiv);
let seniorOfficialInfo = `${seniorOfficialName}${seniorOfficialTitle}${seniorOfficialEmail}${seniorOfficialPhone}`; let seniorOfficialInfo = `${seniorOfficialName}${seniorOfficialTitle}${seniorOfficialEmail}${seniorOfficialPhone}`;
const summary = `<strong>Recommendation:</strong></br>` + const html_summary = `<strong>Recommendation:</strong></br>` +
`<strong>Organization Type:</strong> ${organizationType}</br>` + `<strong>Organization Type:</strong> ${organizationType}</br>` +
`<strong>Requested Domain:</strong> ${requestedDomain}</br>` + `<strong>Requested Domain:</strong> ${requestedDomain}</br>` +
`<strong>Existing website(s):</strong> ${existingWebsites.join(', ')}</br>` + `<strong>Current Websites:</strong> ${existingWebsites.join(', ')}</br>` +
`<strong>Rationale:</strong></br>` + `<strong>Rationale:</strong></br>` +
`<strong>Alternate Domain(s):</strong> ${alternativeDomains.join(', ')}</br>` + `<strong>Alternative Domains:</strong> ${alternativeDomains.join(', ')}</br>` +
`<strong>Submitter:</strong> ${submitterInfo}</br>` + `<strong>Submitter:</strong> ${submitterInfo}</br>` +
`<strong>Senior Official:</strong> ${seniorOfficialInfo}</br>` + `<strong>Senior Official:</strong> ${seniorOfficialInfo}</br>` +
`<strong>Additional Contact(s):</strong> ${otherContactsSummary}</br>`; `<strong>Other Employees:</strong> ${otherContactsSummary}</br>`;
const plain_summary = html_summary.replace(/<\/?[^>]+(>|$)/g, '');
// Create a temporary element // Create Blobs with the summary content
let tempElement = document.createElement('div'); const html_blob = new Blob([html_summary], { type: 'text/html' });
tempElement.innerHTML = summary; const plain_blob = new Blob([plain_summary], { type: 'text/plain' });
// Append the element to the body
document.body.appendChild(tempElement);
// Use the Selection and Range APIs to select the element's content // Create a ClipboardItem with the Blobs
let range = document.createRange(); const clipboardItem = new ClipboardItem({
range.selectNodeContents(tempElement); 'text/html': html_blob,
let selection = window.getSelection(); 'text/plain': plain_blob
selection.removeAllRanges(); });
selection.addRange(range);
// Use the Clipboard API to write the selected HTML content to the clipboard // Write the ClipboardItem to the clipboard
navigator.clipboard.write([ navigator.clipboard.write([clipboardItem]).then(() => {
new ClipboardItem({
'text/plain': new Blob([tempElement.innerHTML], { type: 'text/plain' })
})
]).then(() => {
// Change the icon to a checkmark on successful copy // Change the icon to a checkmark on successful copy
let buttonIcon = copyButton.querySelector('use'); let buttonIcon = copyButton.querySelector('use');
if (buttonIcon) { if (buttonIcon) {