pikvm/pikvm#1148: workaround for clipboard on firefox

2 files changed, 47 insertions, 11 deletions

diff --git a/web/share/js/kvm/ocr.js b/web/share/js/kvm/ocr.js
index c08a0ed8..af0b97c7 100644
--- a/web/share/js/kvm/ocr.js
+++ b/web/share/js/kvm/ocr.js
@@ -170,15 +170,10 @@ export function Ocr(__getGeometry) {
 		let http = tools.makeRequest("GET", url, function() {
 			if (http.readyState === 4) {
 				if (http.status === 200) {
-					navigator.clipboard.writeText(http.responseText).then(function() {
-						wm.info("The text is copied to the clipboard");
-					}, function(err) {
-						wm.error("Can't copy text to the clipboard:<br>", err);
-					});
+					wm.copyTextToClipboard(http.responseText);
 				} else {
 					wm.error("OCR error:<br>", http.responseText);
 				}
-
 				tools.el.setEnabled($("stream-ocr-button"), true);
 				tools.el.setEnabled($("stream-ocr-lang-selector"), true);
 				$("stream-ocr-led").className = "led-gray";
diff --git a/web/share/js/wm.js b/web/share/js/wm.js
index 02f08d4b..633ac463 100644
--- a/web/share/js/wm.js
+++ b/web/share/js/wm.js
@@ -144,11 +144,49 @@ function __WindowManager() {
 
 	/************************************************************************/
 
-	self.info = (...args) => __modalDialog("Info", args.join(" "), true, false, null);
-	self.error = (...args) => __modalDialog("Error", args.join(" "), true, false, null);
-	self.confirm = (...args) => __modalDialog("Question", args.join(" "), true, true, null);
+	self.copyTextToClipboard = function(text) {
+		navigator.clipboard.writeText(text).then(function() {
+			wm.info("The text has been copied to the clipboard");
+		}, function(err) {
+			// https://stackoverflow.com/questions/60317969/document-execcommandcopy-not-working-even-though-the-dom-element-is-created
+			let callback = function() {
+				tools.error("copyTextToClipboard(): navigator.clipboard.writeText() is not working:", err);
+				tools.info("copyTextToClipboard(): Trying a workaround...");
+
+				let el = document.createElement("textarea");
+				el.readonly = true;
+				el.contentEditable = true;
+				el.style.position = "absolute";
+				el.style.top = "-1000px";
+				el.value = text;
+				document.body.appendChild(el);
+
+				// Select the content of the textarea
+				el.select(); // Ordinary browsers
+				el.setSelectionRange(0, el.value.length); // iOS
+
+				try {
+					err = (document.execCommand("copy") ? null : "Unknown error");
+				} catch (err) { // eslint-disable-line no-empty
+				}
+
+				// Remove the added textarea again:
+				document.body.removeChild(el);
+
+				if (err) {
+					tools.error("copyTextToClipboard(): Workaround failed:", err);
+					wm.error("Can't copy text to the clipboard:<br>", err);
+				}
+			};
+			__modalDialog("Info", "Press OK to copy the text to the clipboard", true, false, callback);
+		});
+	};
 
-	var __modalDialog = function(header, text, ok, cancel, parent) {
+	self.info = (...args) => __modalDialog("Info", args.join(" "), true, false);
+	self.error = (...args) => __modalDialog("Error", args.join(" "), true, false);
+	self.confirm = (...args) => __modalDialog("Question", args.join(" "), true, true);
+
+	var __modalDialog = function(header, text, ok, cancel, callback=null, parent=null) {
 		let el_active_menu = (document.activeElement && document.activeElement.closest(".menu"));
 
 		let el_modal = document.createElement("div");
@@ -178,6 +216,9 @@ function __WindowManager() {
 				el_window.appendChild(el_buttons);
 
 				function close(retval) {
+					if (callback) {
+						callback(retval);
+					}
 					__closeWindow(el_window);
 					el_modal.outerHTML = "";
 					let index = __windows.indexOf(el_modal);
@@ -577,7 +618,7 @@ function __WindowManager() {
 				+ "In Chrome use HTTPS and enable <i>system-keyboard-lock</i><br>"
 				+ "by putting at URL <i>chrome://flags/#system-keyboard-lock</i>"
 			);
-			__modalDialog("Keyboard lock is unsupported", msg, true, false, el_window);
+			__modalDialog("Keyboard lock is unsupported", msg, true, false, null, el_window);
 		}
 	};