Add "copy to clipboard" button

[erikreagan]

Looks like you don't need Flash for this anymore. Look into adding a button so users can click once to copy code to the clipboard.

https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent

[alexsailer]

What about something like this?

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="19" height="22" viewBox="0 0 19 22">
  <defs>
    <style>

      .cls-2 {
        fill: #9f9f9f;
      }
    </style>
  </defs>
  <path d="M16.973,19.000 C16.973,19.000 16.023,19.000 16.023,19.000 C16.023,19.000 16.000,18.000 16.000,18.000 C16.000,18.000 17.000,18.000 17.000,18.000 C17.671,18.000 18.000,17.675 18.000,17.000 C18.000,17.000 18.000,2.000 18.000,2.000 C18.000,1.325 17.671,1.000 17.000,1.000 C17.000,1.000 5.000,1.000 5.000,1.000 C4.329,1.000 4.000,1.325 4.000,2.000 C4.000,2.000 4.000,3.000 4.000,3.000 C4.000,3.000 13.973,3.000 13.973,3.000 C15.091,3.000 16.000,3.916 16.000,5.041 C16.000,5.041 16.000,19.959 16.000,19.959 C16.000,21.085 15.091,22.000 13.973,22.000 C13.973,22.000 2.027,22.000 2.027,22.000 C0.909,22.000 -0.000,21.085 -0.000,19.959 C-0.000,19.959 -0.000,5.041 -0.000,5.041 C-0.000,3.916 0.909,3.000 2.027,3.000 C2.027,3.000 3.000,3.000 3.000,3.000 C3.000,3.000 3.000,2.041 3.000,2.041 C3.000,0.916 3.909,0.000 5.027,0.000 C5.027,0.000 16.973,0.000 16.973,0.000 C18.091,0.000 19.000,0.916 19.000,2.041 C19.000,2.041 19.000,16.959 19.000,16.959 C19.000,18.085 18.091,19.000 16.973,19.000 ZM2.000,4.000 C1.329,4.000 1.000,4.325 1.000,5.000 C1.000,5.000 1.000,20.000 1.000,20.000 C1.000,20.675 1.329,21.000 2.000,21.000 C2.000,21.000 14.000,21.000 14.000,21.000 C14.671,21.000 15.000,20.675 15.000,20.000 C15.000,20.000 15.000,5.000 15.000,5.000 C15.000,4.325 14.671,4.000 14.000,4.000 C14.000,4.000 2.000,4.000 2.000,4.000 ZM10.454,15.011 C10.454,15.011 9.881,14.484 9.881,14.484 C9.881,14.484 12.026,12.509 12.026,12.509 C12.026,12.509 9.881,10.533 9.881,10.533 C9.881,10.533 10.454,10.005 10.454,10.005 C10.454,10.005 12.886,12.245 12.886,12.245 C13.045,12.390 13.045,12.626 12.886,12.772 C12.886,12.772 10.454,15.011 10.454,15.011 ZM5.540,15.011 C5.540,15.011 3.107,12.772 3.107,12.772 C2.949,12.626 2.949,12.390 3.107,12.245 C3.107,12.245 5.540,10.005 5.540,10.005 C5.540,10.005 6.113,10.533 6.113,10.533 C6.113,10.533 3.967,12.509 3.967,12.509 C3.967,12.509 6.113,14.484 6.113,14.484 C6.113,14.484 5.540,15.011 5.540,15.011 Z" id="path-1" class="cls-2" fill-rule="evenodd"/>
</svg>

[andyfought]

I like that, can you throw together a design for a hover state? Maybe a small tooltip when hovering that says "Copy to clipboard" or "Click to copy" @alexsailer

[erikreagan]

Love it.

[alexsailer]

@andyfought what do you think?

[andyfought]

Yup, looking good

[erikreagan]

Re-opening and assigning to me for js implementation.