* [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
* [pbs-devel] [PATCH proxmox-backup v2 2/2] fix #5188: gui: add copy to clipboard on snapshots 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 ` Gabriel Goller 2024-03-25 15:46 ` [pbs-devel] applied-series: [PATCH proxmox-backup v2 1/2] gui: remove document.execCommand calls Thomas Lamprecht 1 sibling, 0 replies; 3+ messages in thread From: Gabriel Goller @ 2024-03-14 9:32 UTC (permalink / raw) To: pbs-devel When navigating to Datastores -> Content, it is now possible to right-click on a snapshot/group and copy the name to the clipboard. This makes the proxmox-backup-client much easier to use, especially when restoring archives. Signed-off-by: Gabriel Goller <g.goller@proxmox.com> --- v2, thanks @Dominik: - change name to 'copy name to clipboard' to avoid confusion www/datastore/Content.js | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/www/datastore/Content.js b/www/datastore/Content.js index fa0b7d2c..c2403ff9 100644 --- a/www/datastore/Content.js +++ b/www/datastore/Content.js @@ -546,6 +546,10 @@ Ext.define('PBS.DataStoreContent', { }); }, + onCopy: async function(view, rI, cI, item, e, { data }) { + await navigator.clipboard.writeText(data.text); + }, + onNotesEdit: function(view, data) { let me = this; @@ -884,6 +888,7 @@ Ext.define('PBS.DataStoreContent', { if (record.data.ty === 'group') { menu = Ext.create('PBS.datastore.GroupCmdMenu', { title: gettext('Group'), + onCopy: createControllerCallback('onCopy'), onVerify: createControllerCallback('onVerify'), onChangeOwner: createControllerCallback('onChangeOwner'), onPrune: createControllerCallback('onPrune'), @@ -892,6 +897,7 @@ Ext.define('PBS.DataStoreContent', { } else if (record.data.ty === 'dir') { menu = Ext.create('PBS.datastore.SnapshotCmdMenu', { title: gettext('Snapshot'), + onCopy: createControllerCallback('onCopy'), onVerify: createControllerCallback('onVerify'), onProtectionChange: createControllerCallback('onProtectionChange'), onForget: createControllerCallback('onForget'), @@ -1284,12 +1290,21 @@ Ext.define('PBS.datastore.GroupCmdMenu', { extend: 'Ext.menu.Menu', mixins: ['Proxmox.Mixin.CBind'], + onCopy: undefined, onVerify: undefined, onChangeOwner: undefined, onPrune: undefined, onForget: undefined, items: [ + { + text: gettext('Copy name to clipboard'), + iconCls: 'fa fa-clipboard', + handler: function() { this.up('menu').onCopy(); }, + cbind: { + hidden: '{!onCopy}', + }, + }, { text: gettext('Verify'), iconCls: 'pve-icon-verify-lettering', @@ -1330,11 +1345,21 @@ Ext.define('PBS.datastore.SnapshotCmdMenu', { extend: 'Ext.menu.Menu', mixins: ['Proxmox.Mixin.CBind'], + onCopy: undefined, onVerify: undefined, onProtectionChange: undefined, onForget: undefined, items: [ + { + text: gettext('Copy name to clipboard'), + iconCls: 'fa fa-clipboard', + handler: function() { this.up('menu').onCopy(); }, + cbind: { + hidden: '{!onCopy}', + disabled: '{!onCopy}', + }, + }, { text: gettext('Verify'), iconCls: 'pve-icon-verify-lettering', -- 2.43.0 ^ permalink raw reply [flat|nested] 3+ messages in thread
* [pbs-devel] applied-series: [PATCH proxmox-backup v2 1/2] gui: remove document.execCommand calls 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 ` Thomas Lamprecht 1 sibling, 0 replies; 3+ messages in thread From: Thomas Lamprecht @ 2024-03-25 15:46 UTC (permalink / raw) To: Proxmox Backup Server development discussion, Gabriel Goller Am 14/03/2024 um 10:32 schrieb Gabriel Goller: > 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(-) > > applied, thanks! ^ 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 a public inbox, see mirroring instructions for how to clone and mirror all data and code used for this inbox