Copy repository url to clipboard with JS

[mystygage]

Most browser today support document.execCommand('copy') so it would be nice to have this option instead of the 1-step flash or 3-step JS solution

[TDesjardins]

Another solution is to simply use https://clipboardjs.com/

[piradix]

I would like to propose a patch, for the copy in the cliboard in automatic on the click of the text.

How can I do it ? I indicate where to modify the sources (here), or ...

I can propose something more elaborate with a copy icon on the right of the text, but it affects more files than the first solution

[flaix]

Ideally, you would create a pull request.
Alternatively, you could attach a patch as a file to this issue.
If you need help with either of the two, let mw know.
The solution I would implement would work like the one used earlier with the Flash button, i.e. click the copy button to copy the URL. Which is not unlike Github does it.

[piradix]

ok for copy button. ...

[piradix]

To integrate a copy button (remove flash button et prompt button) do this (it is a js solution) :

• download clipboard.js from https://clipboardjs.com/ : https://codeload.github.com/zenorocha/clipboard.js/zip/refs/heads/master
• copy from this archive the file clipboard.js-master/dist/clipboard.min.js into src/main/resources/clipboard.js/clipboard.min.js
• edit file src/main/java/com/gitblit/wicket/pages/BasePage.html line 56 after <script type="text/javascript" src="gitblit/js/collapsible-table.js"></script>
  copy the code

                <script type="text/javascript" src="clipboard/js/clipboard.min.js"></script>
		<script type="text/javascript"> 
		  var clipboardJsList = [
			  new ClipboardJS(".clipboardjs",{ target: function(trigger) { 
				  var items = trigger.parentElement.getElementsByClassName("clipboardjs-text");
				  if( items!=null && items.length>0 ) 
					  return items[0];
				  return trigger; }  
			  }),			  
		  ]; 		  
		</script>

• save the file
• edit file "/src/main/java/com/gitblit/wicket/panels/RepositoryUrlPanel.html"
• find (line 18) replace all <div class="repositoryUrl "> ... </div> by

<div class="repositoryUrl ">
  <span class="clipboardjs-text"><span wicket:id="primaryUrl">[repository primary url]</span></span>
  <span class="fa fa-copy clipboardjs" ></span>
</div>

• save the file
• try it (see image) ....
  
  

[flaix]

I was just spending some time, looking into clipboardjs and the ways it can be integrated. Is there any specific reason why you chose the function an to work with a parent element?

[flaix]

I have started the implementation in pull request #1438. Feel invited to review it.
Do you have a good idea how to display a tooltip, like when you click the copy button on Github's repository page? It will give you a "Copied" tooltip for a few seconds.

[piradix]

Is there a specific reason why you chose the an function to work with a parent element?

Yes, I don't know the java framework used and it removes the "span" declaration when it affects the text. So, I wrote a button where the click is used by the clipboardjs library. The problem is then to recover the text (without knowing the Id, because it is the java framework that puts it). So I use the parent as search point followed by the "clipboard-text" class. It's easier and can be adapted to many situations.
In general, I try to decorate the back-office from UX/UI (front office)

PS : usually, I use Java back offices as data service, and the user interface, I write it in html/js/css with the framework Aurelia.io (kind of Angular framework, VueJS, but simpler) => MVC.
Here, if I understood correctly, the framework mixes controller+vue, like React does in JS.