87 lines
2.9 KiB
JavaScript
87 lines
2.9 KiB
JavaScript
export default class Clipboard {
|
|
constructor(target) {
|
|
this._target = target;
|
|
|
|
this._eventHandlers = {
|
|
'copy': this._handleCopy.bind(this),
|
|
'paste': this._handlePaste.bind(this),
|
|
'pasteOnWindows': this._handlePasteOnWindow.bind(this)
|
|
};
|
|
|
|
// ===== EVENT HANDLERS =====
|
|
|
|
this.onpaste = () => {};
|
|
}
|
|
|
|
// ===== PRIVATE METHODS =====
|
|
|
|
async _handleCopy(e) {
|
|
try {
|
|
if (navigator.permissions && navigator.permissions.query) {
|
|
const permission = await navigator.permissions.query({ name: "clipboard-write", allowWithoutGesture: false });
|
|
if (permission.state === 'denied') return;
|
|
}
|
|
} catch (err) {
|
|
// Some browsers might error due to lack of support, e.g. Firefox.
|
|
}
|
|
|
|
if (navigator.clipboard.writeText) {
|
|
try {
|
|
await navigator.clipboard.writeText(e.clipboardData.getData('text/plain'));
|
|
} catch (e) {
|
|
/* Do nothing */
|
|
}
|
|
}
|
|
}
|
|
|
|
async _handlePaste(e) {
|
|
try {
|
|
if (navigator.permissions && navigator.permissions.query) {
|
|
const permission = await navigator.permissions.query({ name: "clipboard-read", allowWithoutGesture: false });
|
|
if (permission.state === 'denied') return;
|
|
}
|
|
} catch (err) {
|
|
// Some browsers might error due to lack of support, e.g. Firefox.
|
|
}
|
|
|
|
let data;
|
|
if (navigator.clipboard.readText) {
|
|
try {
|
|
data = await navigator.clipboard.readText();
|
|
} catch (e) {
|
|
/* Do nothing */
|
|
return;
|
|
}
|
|
} else if (e.clipboardData) {
|
|
data = e.clipboardData.getData('text/plain');
|
|
}
|
|
this.onpaste(data);
|
|
}
|
|
|
|
// For some reason, the paste event doesn't trigger on the canvas element.
|
|
// As a workaround, we capture it on the window and check if the active
|
|
// element is the canvas.
|
|
async _handlePasteOnWindow(e) {
|
|
if (document.activeElement !== this._target) return;
|
|
this._eventHandlers.paste(e);
|
|
}
|
|
|
|
// ===== PUBLIC METHODS =====
|
|
|
|
grab() {
|
|
if (!Clipboard.isSupported) return;
|
|
this._target.addEventListener('copy', this._eventHandlers.copy);
|
|
// this._target.addEventListener('paste', this._eventHandlers.paste);
|
|
window.addEventListener('paste', this._eventHandlers.pasteOnWindows);
|
|
}
|
|
|
|
ungrab() {
|
|
if (!Clipboard.isSupported) return;
|
|
this._target.removeEventListener('copy', this._eventHandlers.copy);
|
|
// this._target.removeEventListener('paste', this._eventHandlers.paste);
|
|
window.removeEventListener('paste', this._eventHandlers.pasteOnWindows);
|
|
}
|
|
}
|
|
|
|
Clipboard.isSupported = (navigator && navigator.clipboard) ? true : false;
|