-
Notifications
You must be signed in to change notification settings - Fork 943
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
This PR adds a headerLinkCopy function/script that will auto copy H2 and H3 header links when header or 🔗 icon is clicked. The script also has a pop up confirming the link was auto copied and times out after 3 seconds.
- Loading branch information
Showing
5 changed files
with
100 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
/* eslint-disable */ | ||
|
||
// Get all the headers with anchor links. | ||
// The 'click' event worked over 'popstate' because click captures page triggers, as well as back/forward button triggers | ||
// Adding the 'load' event to also capture the initial page load | ||
window.addEventListener("click", copyHeader); | ||
window.addEventListener("load", copyHeader); | ||
|
||
// separating function from eventlistener to understand they are two separate things | ||
function copyHeader () { | ||
const headers = document.querySelectorAll("h2.anchor, h3.anchor"); | ||
|
||
headers.forEach((header) => { | ||
header.style.cursor = "pointer"; | ||
const clipboard = new ClipboardJS(header, { | ||
text: function(trigger) { | ||
const anchorLink = trigger.getAttribute("id"); | ||
return window.location.href.split('#')[0] + '#' + anchorLink; | ||
} | ||
}); | ||
|
||
clipboard.on('success', function(e) { | ||
// Provide user feedback (e.g., alert or tooltip) here | ||
const popup = document.createElement('div'); | ||
popup.classList.add('copy-popup'); | ||
popup.innerText = 'Link copied!'; | ||
document.body.appendChild(popup); | ||
|
||
// Set up timeout to remove the popup after 3 seconds | ||
setTimeout(() => { | ||
document.body.removeChild(popup); | ||
}, 3000); | ||
|
||
// Add close button ('x') | ||
const closeButton = document.createElement('span'); | ||
closeButton.classList.add('close-button'); | ||
closeButton.innerHTML = ' ×'; // '×' symbol for 'x' | ||
closeButton.addEventListener('click', () => { | ||
if (document.body.contains(popup)) { | ||
document.body.removeChild(popup); | ||
} | ||
}); | ||
popup.appendChild(closeButton); | ||
|
||
// Add and remove the 'clicked' class for styling purposes | ||
e.trigger.classList.add("clicked"); | ||
setTimeout(() => { | ||
if (document.body.contains(popup)) { | ||
document.body.removeChild(popup); | ||
} | ||
}, 3000); | ||
}); | ||
|
||
clipboard.on('error', function(e) { | ||
console.error("Unable to copy to clipboard: " + e.text); | ||
}); | ||
}); | ||
}; |