Alternative method for copying via copyHtml5

jLinux

I was looking at the buttons, and I noticed that the copyHtml5 says:

There is unfortunately no API in HTML5 to provide an immediate copy to clipboard of the table's data when the user clicks the button (unlike the copyFlash button which does provide that ability), so this button shows a message to the end user inviting them to use their keyboard or the Edit menu to copy the table's data

While I agree that there is no API for being able to copy text, I know that theres a rather "Ghetto" work-around, which is to create a text box that is displayed outside of the visible window, populate the data into that, highlight it, then execute copy or cut (If supported by the browser).

Heres a quick version of it I did in a few minutes:

$( document ).ready(function(){
    $( '#copy' ).click(function(e){
        $( '<textarea />' )
            .text( 'DataTables FTW' )
            .attr('id', 'copy-me' )
            .css({
                position: 'absolute',
                left: '-9999px',
                top: (window.pageYOffset || document.documentElement.scrollTop) + 'px'
            })
            .appendTo('body');

        $( "textarea#copy-me" ).select();


        var succeeded = undefined;

        try {
            document.execCommand('copy');
        } catch (err) {
            throw new Error('Didnt work :(')
        }
        finally {
            $( "textarea#copy-me" ).remove();
        }
    });
});
/**
 * Add this to the content somewhere
 * <button id="copy">Copy "DataTables FTW" to clipboard</button>
 */

Theres also plugins that can do it, like this one, however it does exactly what I posted above, only less jQuery, more VanillaJS, just as "ghetto"

this.fakeElem = document.createElement('textarea');
this.fakeElem.style.position = 'absolute';
this.fakeElem.style.left = '-9999px';
this.fakeElem.style.top = (window.pageYOffset || document.documentElement.scrollTop) + 'px';
this.fakeElem.setAttribute('readonly', '');
this.fakeElem.value = this.text;
this.selectedText = this.text;

document.body.appendChild(this.fakeElem);

this.fakeElem.select();
this.copyText();


var succeeded = undefined;

try {
    succeeded = document.execCommand(this.action);
} catch (err) {
    succeeded = false;
}

May I suggest implementing this as an option? And prioritize the copy like so:

1. If browser supports document.execCommand() { use this version
2. } else if browser supports flash { use copyFlash
3. } else { use copyHtml5

Just an idea :-D I hate having to rely on flash for anything

allan

Hi,

Thanks for posting this. Thee is a GitHub issue to track this feature in Buttons.

Allan

jLinux

Ok, I also noticed that in the plugin I linked to above, you could simply use the try/catch to execute the copy command, if it fails, then show the box with selected text to copy, just thought it would be neat

Thanks!

allan

Agreed! Assuming that works (I have a feeling that there is at least one browser which supports execCommand but not the copy action and it just swallows the error - but I need to spend some time looking into it and testing it out) then that is how I'll implement it.

Allan

jLinux

I can tell you spend a lot of time making sure DT works as best as it can in all browsers, lol. Awesome

allan

Little update on this - I've committed the change and it will be in Buttons 1.1.0.

Allan

jLinux

Oh.. very nice! Thats awesome. Nothing against flash, it ahould juat be the very last resort.

Thanks!

jLinux

@allan, what do you use to make youre website? The tag based pages are wild

allan

Custom code. Its an XML format that I parse into static HTML files (using templates for the site's super structure). Did that as part of the work for the 1.10 revamp and really pleased I did - massively more flexible than the old approach of dumping stuff into a database.

Allan

jLinux

I would agree, thats awesome too. In JS i assume? Id be interested in seeing the code

allan

PHP (gulp). It was super fast to script it with...

And I'm not sure you do want to see the code - its a hodge podge of bash and PHP scripts to build the site. I can send you the files if you really want, but it wasn't something I was ever expecting to run outside of my environment, so I'm not sure that it would be much more use than the PHP manual for XML parsing!

Allan