apps/BareRTC
1
0
Fork 0
Code Issues 14 Pull Requests Packages Projects Releases Wiki Activity

Emoji picker for text entry box too

Browse Source
This commit is contained in:
Noah 2023-09-09 11:38:36 -07:00
parent 7999ffc6d9
commit ff6e36a142
2 changed files with 49 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/App.vue
View File

@ -3,6 +3,7 @@ import interact from 'interactjs';
import FloatingVue from 'floating-vue';
import 'floating-vue/dist/style.css';
import { Mentionable } from 'vue-mention';
import EmojiPicker from 'vue3-emoji-picker';
import LoginModal from './components/LoginModal.vue';
import ExplicitOpenModal from './components/ExplicitOpenModal.vue';
@ -36,9 +37,12 @@ const FileUploadMaxSize = 1024 * 1024 * 8; // 8 MB
export default {
name: 'BareRTC',
components: {
// Third party components
FloatingVue,
Mentionable,
EmojiPicker,
// My components
LoginModal,
ExplicitOpenModal,
ReportModal,
@ -108,6 +112,9 @@ export default {
typingNotifDebounce: null,
status: "online", // away/idle status
// Emoji picker visible for messages
showEmojiPicker: false,
// Idle detection variables
idleTimeout: null,
idleThreshold: 300, // number of seconds you must be idle
@ -740,6 +747,21 @@ export default {
* Chat API Methods (WebSocket packets sent/received)
*/
onSelectEmoji(e) {
// Callback from EmojiPicker to add an emoji to the user textbox.
let selectionStart = this.messageBox.selectionStart;
this.message = this.message.slice(0, selectionStart) + e.i + this.message.slice(selectionStart);
this.hideEmojiPicker();
},
hideEmojiPicker() {
// Hide the emoji menu (after sending an emoji or clicking the react button again)
if (!this.showEmojiPicker) return;
window.requestAnimationFrame(() => {
this.showEmojiPicker = false;
this.messageBox.focus();
this.messageBox.selectionStart = this.messageBox.selectionEnd = this.messageBox.value.length;
});
},
sendMessage() {
if (!this.message) {
return;
@ -3664,7 +3686,7 @@ export default {
offset="12"
insert-space>
<!-- My text entry box -->
<!-- My text box -->
<input type="text" class="input" id="messageBox" v-model="message"
placeholder="Write a message" @keydown="sendTypingNotification()" autocomplete="off"
:disabled="!ws.connected">
@ -3687,6 +3709,31 @@ export default {
</Mentionable>
</form>
</div>
<div class="column px-1 is-narrow dropdown is-right is-up" :class="{ 'is-active': showEmojiPicker }"
@click="showEmojiPicker=true">
<!-- Emoji picker for messages -->
<div class="dropdown-trigger">
<button type="button" class="button"
aria-haspopup="true"
aria-controls="input-emoji-picker"
@click="hideEmojiPicker()">
<span>
<i class="fa-regular fa-smile"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="input-emoji-picker" role="menu">
<div class="dropdown-content p-0">
<EmojiPicker
:native="false"
:display-recent="true"
:disable-skin-tones="true"
theme="auto"
@select="onSelectEmoji">
</EmojiPicker>
</div>
</div>
</div>
<div class="column pl-1 is-narrow">
<button type="button" class="button" :disabled="message.length === 0"
title="Click to send your message" @click="sendMessage()">

2
src/components/MessageBox.vue
View File

@ -271,7 +271,7 @@ export default {
<!-- Emoji reactions menu -->
<EmojiPicker
v-if="showEmojiPicker"
:native="false"
:native="true"
:display-recent="true"
:disable-skin-tones="true"
theme="auto"