Re: [Roundup-users] Feature Request : Copy Issue id and title separated by '; ' to the clipboard

[John P. R. <ro...@cs...>]

Hi Norbert:

In message <DU2PR01MB8557DF8C05C168671C6D7844E8A8A@DU2PR01MB8557.eurprd01.prod.
exchangelabs.com>,
SCHLEMMER Norbert writes:
>How can we add a button to the "Editing issue" template to copy
>the issue id and the title separated by '; ' to the clipboard.
>
>I need this very often to add references to other issues.

Try this:

      <button id="copyreference" type="button"
	      tal:condition="context/is_edit_ok">
	 Copy Reference
      </button>

      <script tal:attributes="nonce request/client/client_nonce">
      (function () {
	 "use strict";

	 let crb = document.querySelector("#copyreference");
	 if ( ! crb ) return
	 crb.addEventListener("click", async (e) => {
	     e.preventDefault()
	     if ( ! navigator.clipboard ) {
		 alert("Clipboard is not available")
		 return
	     }

	     let issueDesignator = new URL(document.URL)
		 .pathname
		 .split("/")
		 .pop()
	     let issueTitleText = document.querySelector("#title").value;

	     await navigator.clipboard.writeText(`${issueDesignator}: ${issueTitleText}`)

	     let originalCrbInnerText =  crb.innerText
	     crb.innerText = "Reference copied"
	     setTimeout(() => {crb.innerText = originalCrbInnerText}, 2000)

	 }
			     );
      })();
    </script>

Place the button where you want in you issue.item.html. Place the
script anywhere in the issue.item.html file after the button element.
Usually I put it as close to the bottom of the generated page as I
can.

Note that the button element only shows up if the user can edit the
issue.  When the user is in view only (not edit) mode, there are no
id's or CSS selectors that can be used to find the title. I made my
best guess as to the CSS selectors I needed to use. See below if they
don't work out.

When clicking on the button (or hitting space or return when focused
on the button) you will get something like:

  issue1: nosier test change scrummage but longer than title mung.

copied to the clipboard.  The text of the button will change to
"Reference copied" and then reset to the original message after 2
seconds.

This code depends on the browser having the clipboard API. If it
doesn't an alert will pop up.

There is nothing with an id or CSS selector that contains the
designator.  I am using the final element of the path of the URL to
get the designator.

The code structure is called an IIFE. I am using it to allow me to
exit/return if the button is missing from the document (e.g. the user
only has view permission).

There is some other error checking that probably needs to happen:

   if the user is not permitted to edit the title, this will fail
     as the input element with the id will not exist.

but this should provide you with the 80% solution.

If you do need to have this work in view only mode:

 * change the TAL to output an id="title" for the element enclosing the title
 * remove the condition from the button.

Then try replacing:

	     let issueTitleText = document.querySelector("#title").value;

with:

	     let issueTitle = document.querySelector("input#title");
	     if ( ! issueTitle ) {
	       issueTitle = document.querySelector("#title");
	       issueTitleText = issueTitle.innerText
	     } else {
	       issueTitleText = issueTitle.value
	     }

I think that may work if you need support for view only mode.

If your HTML doesn't have a title id on the title element you can try
replacing "#title" with "input[name=title]".

Hope this works. Have a great day.

--
				-- rouilj
John Rouillard
===========================================================================
My employers don't acknowledge my existence much less my opinions.