7e322e4f7b
* WIP - basic init of comment dropdowns with open and close on click * WIP - initialize the share dropdown * initialize all post dropdowns within packs, init copy to clipboard announcer * refactor and add JSDocs to helper * undo changes to base jsx * update accessible name of post actions button in cypress test * make sure dropdowns pack loaded on comment index page * undo prettier changes in base jsx * undo prettier changes in base jsx * initialize comment dropdowns in podcasts * add test for the post actions * add article comment tests * add cypress tests for comment dropdowns
71 lines
2.1 KiB
JavaScript
71 lines
2.1 KiB
JavaScript
import { addSnackbarItem } from '../Snackbar';
|
|
import { initializeDropdown } from '@utilities/dropdownUtils';
|
|
|
|
/* global Runtime */
|
|
|
|
const handleCopyPermalink = (closeDropdown) => {
|
|
return (event) => {
|
|
event.preventDefault();
|
|
const permalink = event.target.href;
|
|
Runtime.copyToClipboard(permalink).then(() => {
|
|
addSnackbarItem({ message: 'Copied to clipboard' });
|
|
});
|
|
closeDropdown();
|
|
};
|
|
};
|
|
|
|
const initializeArticlePageDropdowns = () => {
|
|
const dropdownTriggers = document.querySelectorAll(
|
|
'button[id^=comment-dropdown-trigger]',
|
|
);
|
|
for (const dropdownTrigger of dropdownTriggers) {
|
|
if (dropdownTrigger.dataset.initialized) {
|
|
// Make sure we only initialize once
|
|
continue;
|
|
}
|
|
|
|
const dropdownContentId = dropdownTrigger.getAttribute('aria-controls');
|
|
|
|
const { closeDropdown } = initializeDropdown({
|
|
triggerElementId: dropdownTrigger.id,
|
|
dropdownContentId,
|
|
});
|
|
|
|
// Add actual link location (SEO doesn't like these "useless" links, so adding in here instead of in HTML)
|
|
const dropdownElement = document.getElementById(dropdownContentId);
|
|
const reportAbuseWrapper = dropdownElement.querySelector(
|
|
'.report-abuse-link-wrapper',
|
|
);
|
|
if (reportAbuseWrapper) {
|
|
reportAbuseWrapper.innerHTML = `<a href="${reportAbuseWrapper.dataset.path}" class="crayons-link crayons-link--block">Report abuse</a>`;
|
|
}
|
|
|
|
// Initialize the "Copy link" functionality
|
|
dropdownElement
|
|
.querySelector('.permalink-copybtn')
|
|
?.addEventListener('click', handleCopyPermalink(closeDropdown));
|
|
|
|
dropdownTrigger.dataset.initialized = 'true';
|
|
}
|
|
};
|
|
|
|
const observer = new MutationObserver((mutationsList) => {
|
|
mutationsList.forEach((mutation) => {
|
|
if (mutation.type === 'childList') {
|
|
initializeArticlePageDropdowns();
|
|
}
|
|
});
|
|
});
|
|
observer.observe(document.getElementById('comment-trees-container'), {
|
|
childList: true,
|
|
subtree: true,
|
|
});
|
|
InstantClick.on('change', () => {
|
|
observer.disconnect();
|
|
});
|
|
|
|
window.addEventListener('beforeunload', () => {
|
|
observer.disconnect();
|
|
});
|
|
|
|
initializeArticlePageDropdowns();
|