Get an HTML5 "click-to-copy" widget

[Aaron Wells]

In Bug 1314890, on the Secret URLs page we added the zeroclipboard library to allow users to click a clipboard icon and have the URL copied to their clipboard. Unfortunately, since then Flash has started dying in a bad way, and now this sort of Flash-based clipboard widget is on the way out, and can cause browsers to pop up warning messages and such.

Now, there is no way to accomplish exactly this same functionality (copy to clipboard) without Flash currently. But, there are some useable alternatives. The one that seems to be poised to replace the click-to-copy pattern, is that you click and it automatically selects the full text, so that you then just have to hit "control-C" instead of first dragging to select it all.

Jen recently added this little clipboard library to the styleguide.php script. It works pretty good, so we may as well adopt it for the Secret URL screen as well.

http://zenorocha.github.io/clipboard.js/

[Aaron Wells (u-aaronw)]

Lol, actually in all the modern browsers, clipboard.js actually *does* copy stuff to the clipboard! The miracles of HTML5. :) I even tried it out on my phone and it worked!

I haven't tested it firsthand, but it says it works in all of Mahara's supported browsers, including IE9. Except for Safari, in which it just selects the text instead of copying it.

[Aaron Wells (u-aaronw)]

Okay, it turns out the current version of clipboard.js does not suit our needs on iOS. In Safari on iOS it doesn't select the text, but rather it just moves the cursor into the text field where the text is (assuming that it's an editable text field like an input or textarea).

It seems like the developer may currently be working on this. Or at least, he's working on another, separate project that enables javascript-based text selection in iOS. Presumably he may link that back in to the original project once it's ready: https://github.com/zenorocha/clipboard.js/issues/26

In the meantime, ZeroClipboard is apparently actively working on an HTML5 functionality: https://github.com/zeroclipboard/zeroclipboard/issues/171

Once that gets implemented, it will probably be the better choice, because it still has better cross-browser fallback behavior (it knows to hide itself when it's not going to work), and it has a larger community maintaining it. So I think for now, we should probably wait and see if ZeroClipboard gets an HTML5 version out in the next couple of months.

[Aaron Wells (u-aaronw)]

Another update on this. The new release of clipboard.js claims that it does support text-select (in input and textareas) in Safari on iOS now. (I haven't tested this yet, firsthand.)

I guess this is a rapidly evolving area! Firefox was the last of the big three browsers to add support for Document.execCommand('copy'), and they just released that in FF 41 back in September.

So, it would still behoove us to wait a couple of weeks to see how things shake out on this. Either that, or upgrade now, but be prepared to come back and update or swap out the library as needed in the months to come. Both ZeroClipboard and clipboard.js have a quite similar API, so it is not that hard to interchange them.

[Robert Lyon (robertl-9)]

I note for clipboard.js it says this on https://github.com/zenorocha/clipboard.js

"Although copy/cut operations with execCommand aren't supported on Safari yet (including mobile), it gracefully degrades because Selection is supported."

"That means you can show a tooltip saying Copied! when success event is called and Press Ctrl+C to copy when error event is called because the text is already selected."

As there is a normal Ctrl+C fallback option it sounds like we could use this going forward as it looks like ZeroClipboard is taking it's time sorting out an HTML5 option.

[Mahara Bot (dev-mahara)]

Patch for "master" branch: https://reviews.mahara.org/8263

[Niranjan (niranjan528)]

URL: https://bugs.launchpad.net/mahara/+bug/1513665
Bug description: Button to reliably copy secret URLs

Environment to be tested: Master
Browser to be tested: Chrome, Firefox, Safari, IE Edge (latest
version), Chrome iOS and Chrome Android

Precondition:

1. Normal user ‘User one’ should exist.
2. A Page ‘Page 01’ should exist.

Steps to reproduce:

1. Log in as ‘User one’.
2. Navigate to Main menu > Portfolio > Shared by me.
3. Click the ‘Secret URL’ icon for ‘Page 01’.
4. Click the ‘New secret URL’ button.
5. Click the ‘Copy secret URL to the clipboard’ button.
6. Open a new tab and paste the secret URL.

Expected result: ‘Page 01’ should be displayed.

6. Log out as ‘User one’.

7. Open a new tab and paste the secret URL that is copied in step 5.

Expected result: ‘Page 01’ should be displayed.

[Mahara Bot (dev-mahara)]

Reviewed: https://reviews.mahara.org/8263
Committed: https://git.mahara.org/mahara/mahara/commit/e65ca495e7fc5c7ebffd526ec85becb09e7e5629
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit e65ca495e7fc5c7ebffd526ec85becb09e7e5629
Author: Cecilia Vela Gurovic <email address hidden>
Date: Tue Nov 7 16:15:26 2017 +1300

Bug 1513665: added clipboard lib for 'copy to clipboard' button

and removed ZeroClipboard

behatnotneeded

Change-Id: I1d9a9ceb22ec46ed797d5054b018b657deeaa7f1