Prevent accidental submission of Tavern/Guild posts after pasting (#10226)

* Temporarily disable ctrl-enter to send Guild messages after paste

Disable Ctrl-Enter after pasting, because some users are experiencing issues with accidentally sending their messages after pasting.

* Code style fixes for "Temporarily disable ctrl-enter to send Guild messages after paste"

* Fix issues with variable location

* Fix variables for accidental chat submission features

Moving vatiables for the chat submit timeout to their own variable so they won't be overwritten

* Fix code formatting issues with accidental chat submission code

* Remove leading space from variables to fix lint issues
This commit is contained in:
siege918 2018-05-11 15:18:41 -05:00 committed by Sabe Jones
parent 41ccd58f8e
commit d4d668f640
2 changed files with 54 additions and 2 deletions

View file

@ -29,7 +29,7 @@
.col-12
h3(v-once) {{ $t('chat') }}
.row.new-message-row
textarea(:placeholder="!isParty ? $t('chatPlaceholder') : $t('partyChatPlaceholder')", v-model='newMessage', @keydown='updateCarretPosition', @keyup.ctrl.enter='sendMessage()')
textarea(:placeholder="!isParty ? $t('chatPlaceholder') : $t('partyChatPlaceholder')", v-model='newMessage', @keydown='updateCarretPosition', @keyup.ctrl.enter='sendMessageShortcut()', @paste='disableMessageSendShortcut()')
autocomplete(:text='newMessage', v-on:select="selectedAutocomplete", :coords='coords', :chat='group.chat')
.row.chat-actions
.col-6.chat-receive-actions
@ -397,6 +397,10 @@ export default {
description: true,
challenges: true,
},
chat: {
submitDisable: false,
submitTimeout: null,
},
newMessage: '',
coords: {
TOP: 0,
@ -552,6 +556,28 @@ export default {
this.$store.state.memberModalOptions.fetchMoreMembers = this.loadMembers;
this.$root.$emit('bv::show::modal', 'members-modal');
},
disableMessageSendShortcut () {
// Some users were experiencing accidental sending of messages after pasting
// So, after pasting, disable the shortcut for a second.
this.chat.submitDisable = true;
if (this.chat.submitTimeout) {
// If someone pastes during the disabled period, prevent early re-enable
clearTimeout(this.chat.submitTimeout);
this.chat.submitTimeout = null;
}
this.chat.submitTimeout = window.setTimeout(() => {
this.chat.submitTimeout = null;
this.chat.submitDisable = false;
}, 500);
},
async sendMessageShortcut () {
// If the user recently pasted in the text field, don't submit
if (!this.chat.submitDisable) {
this.sendMessage();
}
},
async sendMessage () {
if (!this.newMessage) return;

View file

@ -12,7 +12,7 @@
h3(v-once) {{ $t('tavernChat') }}
.row
textarea(:placeholder="$t('tavernCommunityGuidelinesPlaceholder')", v-model='newMessage', :class='{"user-entry": newMessage}', @keydown='updateCarretPosition', @keyup.ctrl.enter='sendMessage()')
textarea(:placeholder="$t('tavernCommunityGuidelinesPlaceholder')", v-model='newMessage', :class='{"user-entry": newMessage}', @keydown='updateCarretPosition', @keyup.ctrl.enter='sendMessageShortcut()', @paste='disableMessageSendShortcut()')
autocomplete(:text='newMessage', v-on:select="selectedAutocomplete", :coords='coords', :chat='group.chat')
.row.chat-actions
@ -603,6 +603,10 @@ export default {
tierStaff,
upIcon,
}),
chat: {
submitDisable: false,
submitTimeout: null,
},
group: {
chat: [],
},
@ -765,6 +769,28 @@ export default {
toggleSleep () {
this.$store.dispatch('user:sleep');
},
disableMessageSendShortcut () {
// Some users were experiencing accidental sending of messages after pasting
// So, after pasting, disable the shortcut for a second.
this.chat.submitDisable = true;
if (this.chat.submitTimeout) {
// If someone pastes during the disabled period, prevent early re-enable
clearTimeout(this.chat.submitTimeout);
this.chat.submitTimeout = null;
}
this.chat.submitTimeout = window.setTimeout(() => {
this.chat.submitTimeout = null;
this.chat.submitDisable = false;
}, 500);
},
async sendMessageShortcut () {
// If the user recently pasted in the text field, don't submit
if (!this.chat.submitDisable) {
this.sendMessage();
}
},
async sendMessage () {
let response = await this.$store.dispatch('chat:postChat', {
group: this.group,