Add "Copy URL" button

[ToogleLiu]

Thank you for developing this project, it helped me a lot. Have you considered adding the function of copying link?

[kytta]

Thank you for developing this project, it helped me a lot.

Thank you for your kind words!

Have you considered adding the function of copying link?

I actually didn't! I considered something similar, that being the Share API that would open the share sheet on mobile devices. This sheet offers the "Copy link" functionality, but it isn't very present on the desktop yet. "Copy URL" would be an excellent addition!

[c00kie123]

Can you share more info about the Copy URL button? Where do you want it?

[kytta]

Can you share more info about the Copy URL button? Where do you want it?

Well, I'd want to have a button, similar to how there already are buttons for social networks. It should have a neutral background (dark grey, I guess), a generic "link" icon (for example: ), and by clicking it, the page url (location.href) should be copied to the clipboard

[ToogleLiu]

Can you share more info about the Copy URL button? Where do you want it?

Well, I'd want to have a button, similar to how there already are buttons for social networks. It should have a neutral background (dark grey, I guess), a generic "link" icon (for example: ), and by clicking it, the page url (location.href) should be copied to the clipboard

Yes, what you describe is exactly what I want.

[c00kie123]

So you want to add new button, next to the social networks button? This button will copies the current page url location.href to the clipboard?

[ToogleLiu]

So you want to add new button, next to the social networks button? This button will copies the current page url location.href to the clipboard?

Yes. Like this:

Just like the one on the https://medium.com/ website.

[c00kie123]

Thanks for sharing! I have been looking through the code and it has been quite confusing for me. Can you share the files where I have to edit to add in this copy link button? Is it in index.html?

[ToogleLiu]

Thanks for sharing! I have been looking through the code and it has been quite confusing for me. Can you share the files where I have to edit to add in this copy link button? Is it in index.html?

Are you planning to add the Copy URL button in this open source project? Your question may require the author of this open source project to answer.

[kytta]

I think that explaining the code will take me more time than actually implementing the feature. I'll take a look at it today :)

[kytta]

To-do list for this issue:

• [x] edit shareon.js — adding to the URL map won't work since it's not a URL
• [x] edit shareon.css — add new style and icon. Colour should be something like #222222, see above for the icon
• [x] edit index.html — it's a testing page that doesn't get published anywhere, but I need it to test my buttons manually
• [x] check that everything works
  • [x] on mobile
  • [x] on desktop
• [x] release as minor

[kytta]

Will release this shortly!

[kytta]

🚀 Released in v2.1.0! See it in action: https://shareon.js.org/

[ToogleLiu]

Great! Thanks.