1
Compatibility with Clipboard.js
Problem reported by Alexandre Boucher - 1/16/2017 at 11:45 AM
Submitted
I use FileUltimate API to Copy-Paste a file URL using Clipboard.js (https://clipboardjs.com/). The Clipboard.js script works everywhere in our system, on desktop and touchscreen devices. I even succeeded in using it on a custom ContextMenu item in FIleUltimate. However, it works well on desktop devices but I can't get it to work when a touch event triggers the click on the ContextMenu item, as if the touch event is prevented by FileUltimate. The code is however working great when a mouse is used to trigger the click.
 
How could I get Clipboard.js to work well with FileUltimate for touchscreen devices. Should I wait for a further update from FileUltimate?
 
Here is the working code, for those who are interested:
 
//Triggered when FileUltimate is loading
function fileManagerLoading(sender: any, e: any) {
    var fileManager = sender;

    window["Ext"].override(fileManager, {
        createViewItemContextMenu: function () {
            var me = this;
            var urlToCopy = "";

            var menu = this.callParent();

            menu.add([{
                actionName: "CopyUrl",
                itemId: "CopyUrl",
                text: "Copy URL",
                icon: '/Content/Images/icons/copy-url.png',
                showConditions: {
                    itemTypes: {
                        File: {
                            multiple: false
                        }
                    }
                },
                handler: function () {

                }
            }]);
            window.setTimeout(function () { //Init clipboard
                var clipboardInput = $('<input type="text" style="position: absolute; top: 0; left: -99999px;" />');
                clipboardInput.appendTo(menu.items.map.CopyUrl.el.dom); //Append an input[type=text] containing the URL to copy

                var clipboard = new Clipboard(menu.items.map.CopyUrl.el.dom, {
                    target: () => {
                        var urlToCopy = getFileUrl(); //Simplified code here for better understanding

                        clipboardInput.val(urlToCopy);

                        return clipboardInput[0];
                    }
                });
                clipboard.on("error", e => {
                    alert("Votre navigateur ne supporte pas le copier coller.");
                });
            }, 1);

            return menu;
        }
    });
}
The Clipboard "error" event is not even triggered and the function used in the "target" option of Clipboard.js is not even called on touchscreen devices.

Reply to Thread