Use power-up to copy to clipboard on click

JonHerbert

I've created a button to take the url of a card and add the relative path to our own url to stop it showing a description when posted to Flock.

Right now it shows the spliced url in a popup which we have to manually copy, the functionality we want is to click the button and have it copy the text.

<span>var</span> GRAY_ICON = <span>'https://cdn.hyperdev.com/us-east-1%3A3d31b21c-01a0-4da2-8827-4bc6e88b7618%2Ficon-gray.svg'</span>;

<span>var</span> onBtnClick = <span>function (t, opts) </span>{
  <span>return</span> t.card(<span>"url"</span>).then(<span>function (card) </span>{
    <span>var</span> str = <span>JSON</span>.stringify(card, <span>null</span>, <span>2</span>);
    <span>var</span> parsedURL = <span>JSON</span>.parse(str);
    <span>const</span> url = <span>new</span> URL(parsedURL.url);
    <span>var</span> shortUrl = <span>"Our custom URL"</span> + url.pathname
    updateClipboard(shortUrl); <span>//DOESN'T WORK</span>
    <span>return</span> t.popup({
      <span>title</span>: <span>"Flock Link"</span>,
      <span>items</span>: [{
        <span>text</span>: <span>"Our custom URL"</span> + url.pathname <span>//WORKS AND SHOWS IN POPUP</span>
      }]
    });
  }).catch(<span>error =></span> <span>console</span>.log(error));
};

<span>function updateClipboard(newClip) </span>{
  navigator.clipboard.writeText(newClip).then(<span>function () </span>{
    <span>console</span>.log(<span>'Success: '</span> + newClip);
  }, <span>function () </span>{
    <span>console</span>.log(<span>'Failed to copy'</span>);
  });
} +

<span>window</span>.TrelloPowerUp.initialize({
  <span>'card-buttons'</span>: <span>function (t, opts) </span>{
    <span>return</span> [{
      <span>icon</span>: GRAY_ICON,
      <span>text</span>: <span>'Flock Link'</span>,
      <span>callback</span>: onBtnClick,
      <span>condition</span>: <span>'edit'</span>,
      <span>backgroundColor</span>: <span>'#263340'</span>,
      <span>color</span>: <span>'#ffffff'</span>
    }, <span>() =></span> {
      <span>console</span>.log(<span>'reached'</span>);
      <span>var</span> btn = <span>document</span>.querySelector(<span>'.button-link[title="Flock Link"]'</span>)
      btn.style.backgroundColor = <span>'#263340'</span>;
      btn.style.color = <span>'#ffffff'</span>;
    }];
  }
});

So, I have tried to remove the t.popup and instead use either navigator.clipboard or document.execCommand as per the docs but I just can't get it to work.

The second issue is trying to change the colour of the button - this should be super simple but I must be overthinking it as I cannot get any subsequent function or other properties to affect the button in anyway.

Emil Kjær Eriksen

I would love to be able to do this as well (although in my case, within the card-detail-badges capability).

Unfortunately, I don't think it's possible without specific support within Trello. Power-Ups work from within iframes. When a card button or a card badge is clicked the iframe document will not be in focus since these Power-Ups are rendered natively within Trello outside the iframe. Browsers do not allow clipboard access when the document is not focused.

Of course it's possible to send the text to be copied to the parent (Trello) which could then take over and copy the text to the clipboard but obviously that would require support by Trello.

Did you ever figure out a workaround?