[Resolved] Click to Copy Button At The End/Start of Heading Tags

Home Forums Support Click to Copy Button At The End/Start of Heading Tags

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1487754
    culpable

    Hiya GP Support,

    How would one go about using GP to create a “Click to Copy” button at the end/start of heading tags?

    Essentially similar functionality to the links + screenshots shown here: https://imgur.com/a/DjloCgE.

    When you hover over these buttons at the end of headings tags, it copies the URL and appends the ID of the heading tag.

    Would this be possible within GP? If not, any external tools/code (plugin/PHP/JavaScript) that you could point me to that would provide similar functionality would be very useful.

    Thank you! πŸ™‚

    #1487801
    Elvin
    Staff
    Customer Support

    Hi,

    I believe this is what you’re looking for.

    https://www.bryanbraun.com/anchorjs/

    A wise man once said:
    "Have you cleared your cache?"

    #1491266
    culpable

    Thank you Elvin!

    That solves the issue of the anchors πŸ™‚

    After reading through all the documentation and searching online for 30 minutes, I can’t seem to find a way to add the “Click to Copy” functionality, as shown here: https://imgur.com/F4RObSJ

    The anchors are being added via:

    <script src="https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js"></script>
    <script>
      anchors.add();
    </script>

    With a generate_after_content GP hook (as the author mentions here https://www.bryanbraun.com/anchorjs/#dont-run-it-too-late not to run it too late).

    They are appearing, but I can’t figure out how to “Click to Copy”. Any ideas Elvin? Thank you for your help.

    #1491272
    Elvin
    Staff
    Customer Support

    You need to add the link’s class name or ID on your script along with the options.

    Example:

    <script src="https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js"></script>
    <script>
    anchors.options = {
      placement: 'left',
      visible: 'always',
      icon: 'ΒΆ'
    };
    anchors.add('.entry-content > a');
    </script>

    A wise man once said:
    "Have you cleared your cache?"

    #1494903
    culpable

    Sorry if I have misunderstood. Do the links have a “Click to Copy” functionality for you?

    The code you have added seems to add the ‘ΒΆ’ icon before all anchor text links within the content. This isn’t quite what I’m looking for.

    I want to add the anchors to only the heading tags within the content, and a “Click to Copy” functionality which will copy the URL to the clipboard (e.g. example.net/blog-post/#heading-tag), as shown here: https://imgur.com/F4RObSJ

    The code below:

    <script src="https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js"></script>
    <script>
      anchors.add();
    </script>

    Add the anchors to the RHS to the heading tags, without the need to target IDs. Reading the docs, it looks like this is because “If no selector is provided, it falls back to a default selector of ‘h2, h3, h4, h5, h6′”.

    Which is what I’m looking for. Although it counldn’t hurt to specify .entry-content headers, as below:

    <script src="https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js"></script>
    <script>
      anchors.add('.entry-content > h2,.entry-content > h3,.entry-content > h4,.entry-content > h5,.entry-content > h6')
    </script>

    While both work, I have updated the code to this in the case that I have missed something and the default anchors.add(); setup is not acceptable.

    While I currently have the anchors showing when you hover over the right hand side of the title (this is what I’m looking for!), clicking this anchor does not copy the URL of the heading to my clipboard (e.g. example.net/blog-post/#heading-tag).

    I have included a URL in under the image here as an example of the functionality I’m looking for.

    Sorry to be confusing Elvin. Thank you very much for your help! πŸ™‚

    #1494964
    Elvin
    Staff
    Customer Support

    My sincere apologies, I should’ve mentioned anchorJS is only half the battle. It’s only for adding anchors to tags.

    While I currently have the anchors showing when you hover over the right hand side of the title (this is what I’m looking for!), clicking this anchor does not copy the URL of the heading to my clipboard (e.g. example.net/blog-post/#heading-tag).

    Frankly, this is way outside of GeneratePress’ scope of support but luckily, I have experience applying this manually on sites.

    For the sake of helping you out, here it goes:

    Here’s the actually full code I did before:

    <script src="https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js"></script>
    <script>
    anchors.options = {
      placement: 'left',
      visible: 'always',
      icon: 'ΒΆ'
    };
    anchors.add('.entry-content > a');
    
    function copyToClipboard(text) {
        var dummy = document.createElement("textarea");
        // to avoid breaking orgain page when copying more words
        // cant copy when adding below this code
        // dummy.style.display = 'none'
        document.body.appendChild(dummy);
        //Be careful if you use texarea. setAttribute('value', value), which works with "input" does not work with "textarea". – Eduard
        dummy.value = text;
        dummy.select();
        document.execCommand("copy");
        document.body.removeChild(dummy);
    	alert("Link Copied!");
    }
    
    function click_to_copy_to_clipboard(){
    	var anchors = document.getElementsByClassName("anchorjs-link");
    	for(i=0;i<anchors.length;i++){
    	anchors.addEventListener("click", function() {
    		var link = document.location.href.replace(location.hash , "" ) + this.getAttribute("href");
    		console.log(link);
    		copyToClipboard(link);
    	});
    	}
    }
    
    document.addEventListener('DOMContentLoaded', (event) => {
        click_to_copy_to_clipboard();
    });
    </script>

    What this basically does is it gets uses the “clipboard icon” w/ anchorjs-link class. It then adds event listeners on click that copies the link (including the jumplink #hash) to clipboard and then alerts the user that a link has been copied.

    Reference/s:
    https://stackoverflow.com/a/46118025 (for actual copying to clipboard)
    https://stackoverflow.com/a/19043725 (getting base url – hash)

    This is pretty advanced stuff. If you find this intimidating, perhaps browsing through WP plugins for a similar thing could be better than wrapping your head around the code trying to learn it.

    Let us know if it works for you. πŸ™‚

    A wise man once said:
    "Have you cleared your cache?"

    #1499125
    culpable

    Not a problem at all Elvin.

    The code makes sense to me. Thank you so much for going above and beyond GP support’s scope by providing the code above.

    You’re a legend πŸ’˜οΈ

    #1499138
    Elvin
    Staff
    Customer Support

    Were you able to make it work on your end?

    Let us know if you had any trouble w/ it. I’ve tested the code prior to posting it here to make sure it works. I can put up a demo site so you can see it in action.

    A wise man once said:
    "Have you cleared your cache?"

    #1499362
    culpable

    Yes, I was able to get it working! It’s just not on the live site yet; it’s on a staging domain πŸ™‚

    You’re too kind sir, thank you very much.

    #1499380
    Elvin
    Staff
    Customer Support

    Good to know. No problem. πŸ™‚

    A wise man once said:
    "Have you cleared your cache?"

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.