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.