Feat: Add Button + JS To Copy Image URL

[nelsonic]

At present we are simply displaying the URL when an image is uploaded:

It would be very nice to have a copy-to-clipboard button next to the URL as a convenience.

Ref: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard
Quite like the icon that MDN are using for this:

But happy for anyone else to suggest an alternative.

[nelsonic]

[ndrean]

I used this way below but it goes to the server to flash (I initially wanted this). This link shows how to change the innerText of the "copy" button into "copied". I found this cool, could for example animate the svg instead, and perhaps more important no round trip to the server for this.

<button
  id="copy-url-btn"
  phx-hook="Url2Clip"
  data-copy-url={file.resized_url}
  class="over:bg-green-200 focus:bg-green-400 p-2 rounded"
 >
    <.icon name="hero-clipboard-document-list" />
</button>

a hook so that you can push a flash

//url2Clip.js
export default {
  mounted() {
    this.el.addEventListener("click", () => {
      navigator.clipboard.writeText(this.el.dataset.copyUrl);
      this.pushEvent("copy-clip", {});
    });
  },
};

# LVLive.ex
 def handle_event("copy-clip", _, socket), do:
    {:noreply, put_flash(socket, :info, "Copied to clipboard")}