Use power-up to copy to clipboard on click

232 views Asked by At

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.

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

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

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

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

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.

EDIT: Here is the error I get in Firefox's console:

Uncaught (in promise) TypeError: 'clipboard-write' (value of 'name' member of PermissionDescriptor) is not a valid value for enumeration PermissionName.

and in Chrome I don't get an error but this message:

'clipboard permission state is denied'

Which is definitely not true based on the flags.

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.

0

There are 0 answers