all lists on lists.proxmox.com
 help / color / mirror / Atom feed
* [pbs-devel] [PATCH proxmox-backup v2 1/2] gui: remove document.execCommand calls
@ 2024-03-14  9:32 Gabriel Goller
  2024-03-14  9:32 ` [pbs-devel] [PATCH proxmox-backup v2 2/2] fix #5188: gui: add copy to clipboard on snapshots Gabriel Goller
  2024-03-25 15:46 ` [pbs-devel] applied-series: [PATCH proxmox-backup v2 1/2] gui: remove document.execCommand calls Thomas Lamprecht
  0 siblings, 2 replies; 3+ messages in thread
From: Gabriel Goller @ 2024-03-14  9:32 UTC (permalink / raw)
  To: pbs-devel

The `document.execCommand` call is deprecated since a few years [0] so I
went ahead and removed it. We only use it to copy stuff to the clipboard
and the recommended way now is to use `navigator.clipboard.writeText`
[1]. `writeText` is kind of new, but I think we'll be alright regarding
compatibility (Compat table is also available at [1]).

Making the handler functions async is okay because extjs executes the
handler and does not expect any result from it, nor does it need to do
some work afterwards.

[0]: https://developer.mozilla.org/en-US/docs/Web/API/document/execCommand
[1]: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText

Signed-off-by: Gabriel Goller <g.goller@proxmox.com>
---

v2, thanks @Dominik:
 - add explanation of why async handlers are ok

 www/ServerStatus.js             | 8 +++-----
 www/panel/NodeInfo.js           | 5 ++---
 www/window/DatastoreRepoInfo.js | 5 ++---
 www/window/TokenEdit.js         | 6 +++---
 4 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/www/ServerStatus.js b/www/ServerStatus.js
index 0c105c63..770deecb 100644
--- a/www/ServerStatus.js
+++ b/www/ServerStatus.js
@@ -76,11 +76,9 @@ Ext.define('PBS.ServerStatus', {
 		{
 		    xtype: 'button',
 		    iconCls: 'fa fa-clipboard',
-		    handler: function(button) {
-			window.getSelection().selectAllChildren(
-			    document.getElementById('pkgversions'),
-			);
-			document.execCommand("copy");
+		    handler: async function(button) {
+			let el = document.getElementById('pkgversions');
+			await navigator.clipboard.writeText(el.textContent);
 		    },
 		    text: gettext('Copy'),
 		},
diff --git a/www/panel/NodeInfo.js b/www/panel/NodeInfo.js
index 454986ef..9d741e45 100644
--- a/www/panel/NodeInfo.js
+++ b/www/panel/NodeInfo.js
@@ -45,10 +45,9 @@ Ext.define('PBS.NodeInfoPanel', {
 		    {
 			xtype: 'button',
 			iconCls: 'fa fa-clipboard',
-			handler: function(b) {
+			handler: async function(b) {
 			    var el = document.getElementById('fingerprintField');
-			    el.select();
-			    document.execCommand("copy");
+			    await navigator.clipboard.writeText(el.value);
 			},
 			text: gettext('Copy'),
 		    },
diff --git a/www/window/DatastoreRepoInfo.js b/www/window/DatastoreRepoInfo.js
index e862d7ad..2f2db477 100644
--- a/www/window/DatastoreRepoInfo.js
+++ b/www/window/DatastoreRepoInfo.js
@@ -113,15 +113,14 @@ Ext.define('PBS.form.CopyField', {
 	    iconCls: 'fa fa-clipboard x-btn-icon-el-default-toolbar-small',
 	    baseCls: 'x-btn',
 	    cls: 'x-btn-default-toolbar-small proxmox-inline-button',
-	    handler: function() {
+	    handler: async function() {
 		let me = this;
 		let field = me.up('pbsCopyField');
 		let el = field.getComponent('inputField')?.inputEl;
 		if (!el?.dom) {
 		    return;
 		}
-		el.dom.select();
-		document.execCommand("copy");
+		await navigator.clipboard.writeText(el.dom.value);
 	    },
 	    text: gettext('Copy'),
 	},
diff --git a/www/window/TokenEdit.js b/www/window/TokenEdit.js
index 80540212..c1856be8 100644
--- a/www/window/TokenEdit.js
+++ b/www/window/TokenEdit.js
@@ -203,9 +203,9 @@ Ext.define('PBS.window.TokenShow', {
     ],
     buttons: [
 	{
-	    handler: function(b) {
-		document.getElementById('token-secret-value').select();
-		document.execCommand("copy");
+	    handler: async function(b) {
+		let el = document.getElementById('token-secret-value');
+		await navigator.clipboard.writeText(el.value);
 	    },
 	    text: gettext('Copy Secret Value'),
 	},
-- 
2.43.0





^ permalink raw reply	[flat|nested] 3+ messages in thread

end of thread, other threads:[~2024-03-25 15:47 UTC | newest]

Thread overview: 3+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2024-03-14  9:32 [pbs-devel] [PATCH proxmox-backup v2 1/2] gui: remove document.execCommand calls Gabriel Goller
2024-03-14  9:32 ` [pbs-devel] [PATCH proxmox-backup v2 2/2] fix #5188: gui: add copy to clipboard on snapshots Gabriel Goller
2024-03-25 15:46 ` [pbs-devel] applied-series: [PATCH proxmox-backup v2 1/2] gui: remove document.execCommand calls Thomas Lamprecht

This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal