mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-20 15:06:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix textarea for sending messages is not editable on some iOS devices (#163)

Browse source
This commit is contained in:
schlagmichdoch 2023-10-09 17:54:26 +02:00 • committed by schlagmichdoch
parent 3c1ef57740
commit 1669fe7d75
6 changed files with 10 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

2
public/index.html
View file

@ -367,7 +367,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="column fw"> <div class="column fw">
<div id="text-input" title="Message" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div> <textarea title="Message" class="textarea" wrap="off" autofocus></textarea>
</div> </div>
</div> </div>
<div class="button-row row-reverse"> <div class="button-row row-reverse">

7
public/scripts/ui.js
View file

@ -1724,7 +1724,7 @@ class SendTextDialog extends Dialog {
constructor() { constructor() {
super('send-text-dialog'); super('send-text-dialog');
Events.on('text-recipient', e => this._onRecipient(e.detail.peerId, e.detail.deviceName)); Events.on('text-recipient', e => this._onRecipient(e.detail.peerId, e.detail.deviceName));
this.$text = this.$el.querySelector('#text-input'); this.$text = this.$el.querySelector('.textarea');
this.$peerDisplayName = this.$el.querySelector('.display-name'); this.$peerDisplayName = this.$el.querySelector('.display-name');
this.$form = this.$el.querySelector('form'); this.$form = this.$el.querySelector('form');
this.$submit = this.$el.querySelector('button[type="submit"]'); this.$submit = this.$el.querySelector('button[type="submit"]');
@ -1745,7 +1745,7 @@ class SendTextDialog extends Dialog {
} }
_textInputEmpty() { _textInputEmpty() {
return !this.$text.innerText || this.$text.innerText === "\n"; return !this.$text.value || this.$text.value === "\n";
} }
_onChange(e) { _onChange(e) {
@ -1767,7 +1767,6 @@ class SendTextDialog extends Dialog {
const range = document.createRange(); const range = document.createRange();
const sel = window.getSelection(); const sel = window.getSelection();
this.$text.focus();
range.selectNodeContents(this.$text); range.selectNodeContents(this.$text);
sel.removeAllRanges(); sel.removeAllRanges();
sel.addRange(range); sel.addRange(range);
@ -1781,7 +1780,7 @@ class SendTextDialog extends Dialog {
_send() { _send() {
Events.fire('send-text', { Events.fire('send-text', {
to: this.correspondingPeerId, to: this.correspondingPeerId,
text: this.$text.innerText text: this.$text.value
}); });
this.$text.value = ""; this.$text.value = "";
this.hide(); this.hide();

2
public/styles.css
View file

@ -1011,7 +1011,7 @@ x-dialog .dialog-subheader {
padding-bottom: 0; padding-bottom: 0;
} }
#text-input { #send-text-dialog .textarea {
min-height: 200px; min-height: 200px;
width: 100%; width: 100%;
} }

2
public_included_ws_fallback/index.html
View file

@ -372,7 +372,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="column fw"> <div class="column fw">
<div id="text-input" title="Message" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div> <textarea title="Message" class="textarea" wrap="off" autofocus></textarea>
</div> </div>
</div> </div>
<div class="button-row row-reverse"> <div class="button-row row-reverse">

7
public_included_ws_fallback/scripts/ui.js
View file

@ -1726,7 +1726,7 @@ class SendTextDialog extends Dialog {
constructor() { constructor() {
super('send-text-dialog'); super('send-text-dialog');
Events.on('text-recipient', e => this._onRecipient(e.detail.peerId, e.detail.deviceName)); Events.on('text-recipient', e => this._onRecipient(e.detail.peerId, e.detail.deviceName));
this.$text = this.$el.querySelector('#text-input'); this.$text = this.$el.querySelector('.textarea');
this.$peerDisplayName = this.$el.querySelector('.display-name'); this.$peerDisplayName = this.$el.querySelector('.display-name');
this.$form = this.$el.querySelector('form'); this.$form = this.$el.querySelector('form');
this.$submit = this.$el.querySelector('button[type="submit"]'); this.$submit = this.$el.querySelector('button[type="submit"]');
@ -1747,7 +1747,7 @@ class SendTextDialog extends Dialog {
} }
_textInputEmpty() { _textInputEmpty() {
return !this.$text.innerText || this.$text.innerText === "\n"; return !this.$text.value || this.$text.value === "\n";
} }
_onChange(e) { _onChange(e) {
@ -1769,7 +1769,6 @@ class SendTextDialog extends Dialog {
const range = document.createRange(); const range = document.createRange();
const sel = window.getSelection(); const sel = window.getSelection();
this.$text.focus();
range.selectNodeContents(this.$text); range.selectNodeContents(this.$text);
sel.removeAllRanges(); sel.removeAllRanges();
sel.addRange(range); sel.addRange(range);
@ -1783,7 +1782,7 @@ class SendTextDialog extends Dialog {
_send() { _send() {
Events.fire('send-text', { Events.fire('send-text', {
to: this.correspondingPeerId, to: this.correspondingPeerId,
text: this.$text.innerText text: this.$text.value
}); });
this.$text.value = ""; this.$text.value = "";
this.hide(); this.hide();

2
public_included_ws_fallback/styles.css
View file

@ -1041,7 +1041,7 @@ x-dialog .dialog-subheader {
padding-bottom: 0; padding-bottom: 0;
} }
#text-input { #send-text-dialog .textarea {
min-height: 200px; min-height: 200px;
width: 100%; width: 100%;
} }