From 296a6fa4e3d14f0c8ca091870fd4f7e85bc34df8 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 9 Oct 2022 23:42:36 +0300 Subject: some shitty initial implementation of emoji picker with popover --- src/components/emoji_picker/emoji_picker.js | 32 +++++++++++++++-------------- 1 file changed, 17 insertions(+), 15 deletions(-) (limited to 'src/components/emoji_picker/emoji_picker.js') diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index fafc2af1..d70abf5b 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -1,5 +1,6 @@ import { defineAsyncComponent } from 'vue' import Checkbox from '../checkbox/checkbox.vue' +import Popover from 'src/components/popover/popover.vue' import StillImage from '../still-image/still-image.vue' import { ensureFinalFallback } from '../../i18n/languages.js' import lozad from 'lozad' @@ -87,10 +88,6 @@ const EmojiPicker = { required: false, type: Boolean, default: false - }, - showing: { - required: true, - type: Boolean } }, data () { @@ -111,15 +108,30 @@ const EmojiPicker = { components: { StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')), Checkbox, - StillImage + StillImage, + Popover }, methods: { + showPicker () { + console.log('pick') + this.$refs.popover.showPopover() + this.onShowing() + }, + hidePicker () { + this.$refs.popover.hidePopover() + }, setGroupRef (name) { return el => { this.groupRefs[name] = el } }, setEmojiRef (name) { return el => { this.emojiRefs[name] = el } }, + onPopoverShown () { + this.$emit('show') + }, + onPopoverClosed () { + this.$emit('close') + }, onStickerUploaded (e) { this.$emit('sticker-uploaded', e) }, @@ -251,16 +263,6 @@ const EmojiPicker = { allCustomGroups () { this.waitForDomAndInitializeLazyLoad() this.filteredEmojiGroups = this.getFilteredEmojiGroups() - }, - showing (val) { - if (val) { - this.onShowing() - } - } - }, - mounted () { - if (this.showing) { - this.onShowing() } }, destroyed () { -- cgit v1.2.3-70-g09d2 From 8fa1f0b50dcf51e976330163b819dfaf82d30a53 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 10 Oct 2022 00:33:58 +0300 Subject: move keepOpen to picker --- src/components/emoji_input/emoji_input.js | 2 -- src/components/emoji_picker/emoji_picker.js | 3 +++ 2 files changed, 3 insertions(+), 2 deletions(-) (limited to 'src/components/emoji_picker/emoji_picker.js') diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index 635251be..6532654f 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -116,7 +116,6 @@ const EmojiInput = { focused: false, blurTimeout: null, temporarilyHideSuggestions: false, - keepOpen: false, disableClickOutside: false, suggestions: [], overlayStyle: {}, @@ -344,7 +343,6 @@ const EmojiInput = { spaceAfter, after ].join('') - this.keepOpen = keepOpen this.$emit('update:modelValue', newValue) const position = this.caret + (insertion + spaceAfter + spaceBefore).length if (!keepOpen) { diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index d70abf5b..3fad4601 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -140,6 +140,9 @@ const EmojiPicker = { }, onEmoji (emoji) { const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement + if (!this.keepOpen) { + this.$refs.popover.hidePopover() + } this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen }) }, onScroll (e) { -- cgit v1.2.3-70-g09d2 From d2fabe1a71207f92e10283fc5a881d883cb52ae1 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 10 Oct 2022 00:37:59 +0300 Subject: use anchor for picker --- src/components/emoji_input/emoji_input.js | 2 ++ src/components/emoji_picker/emoji_picker.js | 4 +++- 2 files changed, 5 insertions(+), 1 deletion(-) (limited to 'src/components/emoji_picker/emoji_picker.js') diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index 6532654f..eb64e054 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -141,6 +141,7 @@ const EmojiInput = { return this.focused && this.suggestions && this.suggestions.length > 0 && + !this.pickerShown && !this.temporarilyHideSuggestions }, textAtCaret () { @@ -205,6 +206,7 @@ const EmojiInput = { this.input = input this.caretEl = hiddenOverlayCaret suggestorPopover.setAnchorEl(this.caretEl) + this.$refs.picker.setAnchorEl(this.caretEl) const style = getComputedStyle(this.input) this.overlayStyle.padding = style.padding this.overlayStyle.border = style.border diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 3fad4601..e907def9 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -113,13 +113,15 @@ const EmojiPicker = { }, methods: { showPicker () { - console.log('pick') this.$refs.popover.showPopover() this.onShowing() }, hidePicker () { this.$refs.popover.hidePopover() }, + setAnchorEl (el) { + this.$refs.popover.setAnchorEl(el) + }, setGroupRef (name) { return el => { this.groupRefs[name] = el } }, -- cgit v1.2.3-70-g09d2 From 692342a77f1b91a88a30aadfd20994c293ad65e0 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 10 Oct 2022 20:11:04 +0300 Subject: focus search input when opening emoji picker --- src/components/emoji_input/emoji_input.js | 8 -------- src/components/emoji_picker/emoji_picker.js | 1 + src/components/emoji_picker/emoji_picker.vue | 1 + 3 files changed, 2 insertions(+), 8 deletions(-) (limited to 'src/components/emoji_picker/emoji_picker.js') diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index eb64e054..92c10f09 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -278,17 +278,10 @@ const EmojiInput = { } }, methods: { - focusPickerInput () { - const pickerEl = this.$refs.picker.$el - if (!pickerEl) return - const pickerInput = pickerEl.querySelector('input') - if (pickerInput) pickerInput.focus() - }, triggerShowPicker () { this.$nextTick(() => { this.$refs.picker.showPicker() this.scrollIntoView() - this.focusPickerInput() }) // This temporarily disables "click outside" handler // since external trigger also means click originates @@ -306,7 +299,6 @@ const EmojiInput = { this.scrollIntoView() this.$refs.picker.showPicker() this.$refs.picker.startEmojiLoad() - this.$nextTick(this.focusPickerInput) } else { this.$refs.picker.hidePicker() } diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index e907def9..d1372c4a 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -245,6 +245,7 @@ const EmojiPicker = { this.filteredEmojiGroups = this.getFilteredEmojiGroups() if (!oldContentLoaded) { this.$nextTick(() => { + this.$refs.search.focus() if (this.defaultGroup) { this.highlight(this.defaultGroup) } diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index ccd45bc1..a2c99c16 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -71,6 +71,7 @@ class="form-control" :placeholder="$t('emoji.search_emoji')" @input="$event.target.composing = false" + ref="search" >
Date: Tue, 1 Nov 2022 23:25:34 +0200 Subject: always focus search when opening emoji picker --- src/components/emoji_picker/emoji_picker.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src/components/emoji_picker/emoji_picker.js') diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index d1372c4a..dd5e5217 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -240,12 +240,14 @@ const EmojiPicker = { }, onShowing () { const oldContentLoaded = this.contentLoaded + this.$nextTick(() => { + this.$refs.search.focus() + }) this.contentLoaded = true this.waitForDomAndInitializeLazyLoad() this.filteredEmojiGroups = this.getFilteredEmojiGroups() if (!oldContentLoaded) { this.$nextTick(() => { - this.$refs.search.focus() if (this.defaultGroup) { this.highlight(this.defaultGroup) } -- cgit v1.2.3-70-g09d2