added copy url button

[Ayush1404]

Closes #8802

Adds way to copy the URL of the page you're on to share it.

Technical

Testing

Go to any books page and click on share.

Screenshot

Stakeholders

@mekarpeles

[mekarpeles]

This seems to work though it's unclear to the patron whether the copying has succeeded. We either need some message or to show the text in a popup, like the "embed" option.

[mekarpeles]

Some confirmation required (e.g. a toast message or popup) that the url copying succeeded

[mekarpeles]

@jimchamp is this a good place to use toast? Do we have an example of doing this via js?

[jimchamp]

@jimchamp is this a good place to use toast? Do we have an example of doing this via js?

Yes, and the modal should close when the URL copy icon is clicked. Will provide guidance shortly...

[jimchamp]

Thanks, @Ayush1404! Happy to merge this once the suggested changes have been made.

You may already be aware of this, but when any .less or .js file is modified, the CSS and JS assets must be recompiled. There is more information about this here.

Let me know if you have any questions about anything.

[jimchamp]

Suggested change

	alt="CopyURL icon"
	alt="$_('Copy URL icon')"

Add space between Copy and URL. Use localized strings (more information about this here).

[jimchamp]

Suggested change

	<a class="copy-url-btn" title="$_('Copy url to clipboard')" data-ol-link-track="Share|CopyURL"
	onclick="navigator.clipboard.writeText('openlibrary.org'+'$page_url');">
	<a class="copy-url-btn" title="$_('Copy url to clipboard')" data-ol-link-track="Share|CopyURL">

Move inline JS to Webpack. To do so, you can update this function to do the following:

1. Get a reference to the "Copy URL" icon. This query should work #social-modal-content .copy-url-btn.
2. Add a click listener to the icon.

The click listener should:

1. Copy the URL to the clipboard.
2. Close the modal. (Running $.colorbox.close() will achieve this)
3. Display a toast message that tells the patron that the message has been copied to their clipboard. You can use this function to display the toast message (only pass message --- $parent is not needed).

[Ayush1404]

Hey @jimchamp, I have done all the corrections suggested by you. While doing so I realized that embed-work-btn button also has some js in Share_Modal.html Here . Should I move that code also to Webpack?

[mekarpeles]

@jimchamp question, is there a way we handle i18n in JS like this?

[jimchamp]

Yes. I'll include that in the follow-up issue (mentioned here).

[jimchamp]

Hey @jimchamp, I have done all the corrections suggested by you. While doing so I realized that embed-work-btn button also has some js in Share_Modal.html Here . Should I move that code also to Webpack?

Thanks for pointing that out. Let's consider this out of scope for this PR. As a follow-up, I'll open an issue for this.

[jimchamp]

Thanks, @Ayush1404!

I'm going to commit my small suggested changes, then merge this branch.

[jimchamp]

Suggested change

	/**
	* Adds click listeners to buttons in all notes modals on a page.
	*/
	/**
	* Adds click listener which copies the current page's URL to the clipboard.
	*/

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 0% with 7 lines in your changes are missing coverage. Please review.

Project coverage is 16.02%. Comparing base (f0796d7) to head (d965477).
Report is 121 commits behind head on master.

Files	Patch %	Lines
openlibrary/plugins/openlibrary/js/modals/index.js	0.00%	7 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #8806      +/-   ##
==========================================
- Coverage   16.62%   16.02%   -0.61%     
==========================================
  Files          88       89       +1     
  Lines        4698     4693       -5     
  Branches      838      818      -20     
==========================================
- Hits          781      752      -29     
- Misses       3399     3434      +35     
+ Partials      518      507      -11     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[jimchamp]

I ended up moving the inline embed html code to Webpack in #8853.