From c132898780c7bd0858301de0f5eabd61127e74a6 Mon Sep 17 00:00:00 2001 From: Tamara Steinwender <tamara.steinwender@tugraz.at> Date: Mon, 29 Mar 2021 12:32:45 +0200 Subject: [PATCH] Add closing message for clipboard files --- packages/file-handling/src/file-source.js | 57 ++++++++++++++++++- .../src/i18n/de/translation.json | 1 + .../src/i18n/en/translation.json | 1 + 3 files changed, 58 insertions(+), 1 deletion(-) diff --git a/packages/file-handling/src/file-source.js b/packages/file-handling/src/file-source.js index b1d1f888..98312f17 100644 --- a/packages/file-handling/src/file-source.js +++ b/packages/file-handling/src/file-source.js @@ -64,6 +64,9 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) { this.initialFileHandlingState = {target: '', path: ''}; this.clipboardFiles = {files: ''}; + + this._onReceiveBeforeUnload = this.onReceiveBeforeUnload.bind(this); + } static get scopedElements() { @@ -225,8 +228,16 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) { } }); }); + + window.addEventListener('beforeunload', this._onReceiveBeforeUnload); + } + + disconnectedCallback() { + // remove event listeners + window.removeEventListener('beforeunload', this._onReceiveBeforeUnload); + + super.disconnectedCallback(); } - /** * Select all files from tabulator table @@ -473,6 +484,10 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) { this.loadWebdavDirectory(); } + if (this.enabledTargets.includes('clipboard')) { + this.generateClipboardTable(); + } + const filePicker = this._('#modal-picker'); // check if element is already^ in the dom (for example if "dialog-open" attribute is set) @@ -533,6 +548,46 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) { this.tabulatorTable.deselectRow(); this.closeDialog(); + } + + /** + * Decides if the "beforeunload" event needs to be canceled + * + * @param event + */ + onReceiveBeforeUnload(event) { + + + // we don't need to stop if there are no signed files + if (!this.showClipboard || !this.hasEnabledSource("clipboard") || this.clipboardFiles.files.length === 0) { + return; + } + + // we need to handle custom events ourselves + if(event.target && event.target.activeElement && event.target.activeElement.nodeName) { + + if (!event.isTrusted) { + // note that this only works with custom event since calls of "confirm" are ignored + // in the non-custom event, see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event + const result = confirm(i18n.t('page-leaving-warn-dialogue')); + // don't stop the page leave if the user wants to leave + if (result) { + return; + } + } + else { + + + } + // Cancel the event as stated by the standard + event.preventDefault(); + + // Chrome requires returnValue to be set + event.returnValue = ''; + } + + + } static get styles() { diff --git a/packages/file-handling/src/i18n/de/translation.json b/packages/file-handling/src/i18n/de/translation.json index 72f749d9..6e9f9b3d 100644 --- a/packages/file-handling/src/i18n/de/translation.json +++ b/packages/file-handling/src/i18n/de/translation.json @@ -10,6 +10,7 @@ "intro": "Laden Sie mehrere Dateien mit dem Auswahldialog oder durch Ziehen und Fallenlassen in diesem Bereich hoch.", "upload-label": "Dateiauswahl", "upload-disabled-title": "Die Dateiauswahl ist während dem Hochladvorgang gesperrt!", + "page-leaving-warn-dialogue": "Vorsicht! Es befinden sich noch ungenutzte Dateien im Clipboard. Wenn Sie auf 'OK' klicken, wird das bestehende Clipboard automatisch verworfen!", "file-source": { "modal-select-files": "Dateien auswählen", "modal-close": "Dialog schließen", diff --git a/packages/file-handling/src/i18n/en/translation.json b/packages/file-handling/src/i18n/en/translation.json index 562300a3..b2d0a2a8 100644 --- a/packages/file-handling/src/i18n/en/translation.json +++ b/packages/file-handling/src/i18n/en/translation.json @@ -10,6 +10,7 @@ "intro": "Upload multiple files with the file dialog or by dragging and dropping images onto the dashed region.", "upload-label": "Select some files", "upload-disabled-title": "The file selection is disabled while uploading!", + "page-leaving-warn-dialogue": "Attention! There are still unused files in the clipboard. If you click on 'OK', the existing clipboard is automatically discarded!", "file-source": { "modal-select-files": "Select files", "modal-close": "Close dialog", -- GitLab