Add a button that allows the user to copy the URL to an anchor element

[MartinKjunior]

I'm going to write down what I've managed to figure out, but it's not quite working yet. I'm having trouble getting the button to show up, right now it just renders as text which you can click.

1. Inside javascripts/ create a file named extra.js
2. In this file include the following:

   function copyToClip(str) {
   function listener(e) {
     e.clipboardData.setData("text/html", str);
     e.clipboardData.setData("text/plain", str);
     e.preventDefault();
   }
   document.addEventListener("copy", listener);
   document.execCommand("copy");
   document.removeEventListener("copy", listener);
   };

   3. An example of adding the button to an OSIPI name cell is <a id="GRE model" href="#GRE model"></a>Gradient echo model <button class="visible" type="button" onclick="copyToClip(document.getElementById('GRE model').href)">test</button>
   4. Clicking on test that appears in the cell puts http://127.0.0.1:8000/perfusionModels/#GRE%20model into the clipboard (this should be the actual URL once it's up on github pages)
      • Issue is that the button renders as transparent by default and I have no idea why Adding commands into extra.css doesn't seem to have any effect. If someone figures out how to get it to work and creates a nice template for a small button with perhaps an icon for people to click, we can add it everywhere.

[MartinKjunior]

The solution was to literally just add <button class="md-button" onclick=... and it works perfectly fine... Now just use https://material.angularjs.org/latest/CSS/button to make it nice and copy-paste across the entire website.

• For some reason adding .md-button {} element to extra.css and changing its values does not seem to affect the button properties.

[MartinKjunior]

Brief explanation for <a id="GRE model" href="#GRE model"></a>Gradient echo model <button class="md-button" onclick="copyToClip(document.getElementById('GRE model').href)">test</button>

href specifies the destination of a link. If you added something between <a></a> that text would turn blue and clicking on the link would send you to href (we are not using this right now). class="md-button" creates the default markdown button. onclick= defines the function that is run when you click on the button. copyToClip() copies text into your clipboard. document is a reference to the currently open page. .getElementById() uses id= to find an element (there is also .getElementByName() which does the same for name= but id must be unique within a page). .href pulls out the contents of href which are then copied into clipboard.

[MartinKjunior]

As a quick note, my IDE tells me one of the functions inside copyToClip is deprecated (document.execCommand()) but I have no idea how to replicate that function so if it stops working in the future, might need to look into this.