diff --git a/public/scripts/ui.js b/public/scripts/ui.js index e399d89..04c70bc 100644 --- a/public/scripts/ui.js +++ b/public/scripts/ui.js @@ -172,31 +172,34 @@ class PeersUI { } _onDrop(e) { - e.preventDefault(); - if (this.shareMode.active || Dialog.anyDialogShown()) return; - if (!$$('x-peer') || !$$('x-peer').contains(e.target)) { - if (e.dataTransfer.files.length > 0) { - Events.fire('activate-share-mode', {files: e.dataTransfer.files}); - } else { - for (let i=0; i { - Events.fire('activate-share-mode', {text: text}); - }); - } - } - } - } + e.preventDefault(); + this._onDragEnd(); + + if ($$('x-peer') || !$$('x-peer').contains(e.target)) return; // dropped on peer + + const files = e.dataTransfer.files; + const text = e.dataTransfer.getData("text"); + + if (files.length > 0) { + Events.fire('activate-share-mode', { + files: files + }); + } + else if(text.length > 0) { + Events.fire('activate-share-mode', { + text: text + }); + } } _onDragOver(e) { - e.preventDefault(); - if (this.shareMode.active || Dialog.anyDialogShown()) return; + e.preventDefault(); + this.$xInstructions.setAttribute('drop-bg', true); this.$xNoPeers.setAttribute('drop-bg', true); } @@ -630,29 +633,28 @@ class PeerUI { } _onDrop(e) { - e.preventDefault(); - if (PeerUI._shareMode.active || Dialog.anyDialogShown()) return; - if (e.dataTransfer.files.length > 0) { - Events.fire('files-selected', { - files: e.dataTransfer.files, - to: this._peer.id - }); - } else { - for (let i=0; i { - Events.fire('send-text', { - text: text, - to: this._peer.id - }); - }); - } - } - } + e.preventDefault(); this._onDragEnd(); + + const peerId = this._peer.id; + const files = e.dataTransfer.files; + const text = e.dataTransfer.getData("text"); + + if (files.length > 0) { + Events.fire('files-selected', { + files: files, + to: peerId + }); + } + else if (text.length > 0) { + Events.fire('send-text', { + text: text, + to: peerId + }); + } } _onDragOver() { @@ -1896,6 +1898,8 @@ class SendTextDialog extends Dialog { this.$submit = this.$el.querySelector('button[type="submit"]'); this.$form.addEventListener('submit', e => this._onSubmit(e)); this.$text.addEventListener('input', _ => this._onInput()); + this.$text.addEventListener('paste', e => this._onPaste(e)); + this.$text.addEventListener('drop', e => this._onDrop(e)); Events.on('text-recipient', e => this._onRecipient(e.detail.peerId, e.detail.deviceName)); Events.on('keydown', e => this._onKeyDown(e)); @@ -1914,6 +1918,40 @@ class SendTextDialog extends Dialog { } } + async _onDrop(e) { + e.preventDefault() + + const text = e.dataTransfer.getData("text"); + const selection = window.getSelection(); + + if (selection.rangeCount) { + selection.deleteFromDocument(); + selection.getRangeAt(0).insertNode(document.createTextNode(text)); + } + + this._onInput(); + } + + async _onPaste(e) { + e.preventDefault() + + const text = (e.clipboardData || window.clipboardData).getData('text'); + const selection = window.getSelection(); + + if (selection.rangeCount) { + selection.deleteFromDocument(); + const textNode = document.createTextNode(text); + const range = document.createRange(); + range.setStart(textNode, textNode.length); + range.collapse(true); + selection.getRangeAt(0).insertNode(textNode); + selection.removeAllRanges(); + selection.addRange(range); + } + + this._onInput(); + } + _textEmpty() { return !this.$text.innerText || this.$text.innerText === "\n"; }