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

Enter the verification text