Implemented Get rid of Clipboard.JS

[Kirby]

XenForo does use the 3rd party library Clipboard.JS to provide copy to clipboard functionality for share controls on supporting browsers.

This library is loaded on every page, weighs in at about 10.000 bytes of JavaScript (uncompressed) and uses rather complicated "hacks" (by using execCommand) to access the clipboard.

By now, all major browsers (eg. Chromium based browsers, Firefox, Safari on MacOS and iOS) support the required writeText call of the modern Clipboard API.

As I'd expect this functionality to be used rather seldom, it would be nice to get rid if that lib and just use the native API.
While this would mean that the copy to clipboard button/link would not longer be available for IE users, I think the reduced overhead would be worth it.

 

[Karelke]

While this would mean that the copy to clipboard button/link would not longer be available for IE users

Well, XenForo could still load clipboard.js if the browser does not support Clipboard API.

if ('undefinned' == typeof navigator.clipboard) {
    loadJs(' clipboard.js ');
}

Or something like that.

 

[Mendalla]

the copy to clipboard button/link would not longer be available for IE users

Which should be a non-issue because IE is officially unsupported now and no one should really be using it.

 

[Karelke]

Though there are still some issues with the Clipboard API. Most modern browsers offer just partial support.

 

[Kirby]

Correct, but that partial support would be fully sufficient for XenForo usecase.

It would indeed be possible to fallback to Clipboard.JS if the Clipboard API is not available, but personally I think this would just not be worth it.

 

[Chris D]

It's gone.

We're now exclusively using the async clipboard API navigator.clipboard and its writeText function. There are no fallbacks, either navigator.clipboard is available or the copy to clipboard function is not present.

There are some fairly significant caveats to this.

As well as browser support - basically no longer allowing clipboard interactions on any version of Internet Explorer and pre-Chromium Edge - it also requires the site to be accessed via https.

But we think these are reasonable trade-offs to save upwards of 10KB on every page load for a function that most people have no intention of using.

 

[JoyFreak]

I'm trying to work out how to use the built-in copy to clipboard feature. Can someone guide me please? Thanks!

 

[Chris D]

There are a few different features that copy text to the clipboard and the correct one to use very much depends on what you're trying to do with it.

This isn't the thread to discuss that though.

This is more of a dev discussion type thread as it touches upon the JavaScript framework. I'd recommend creating a new thread in there detailing what exactly you want to do and what you want copying to the clipboard and I'm sure we'll be able to recommend an approach.

 

[JoyFreak]

There are a few different features that copy text to the clipboard and the correct one to use very much depends on what you're trying to do with it.

This isn't the thread to discuss that though.

This is more of a dev discussion type thread as it touches upon the JavaScript framework. I'd recommend creating a new thread in there detailing what exactly you want to do and what you want copying to the clipboard and I'm sure we'll be able to recommend an approach.

Apologies, I have created the thread here. Any help would be appreciated, thank you! https://xenforo.com/community/threads/using-xfs-built-in-copy-to-clipboard.187819/