From 081a4161034ce6d748a11e260b7a9429c65aab9d Mon Sep 17 00:00:00 2001 From: tusooa Date: Mon, 2 Jan 2023 13:42:09 -0500 Subject: [PATCH] Calculate display count from width --- src/components/emoji_picker/emoji_picker.js | 18 +++++++++++++++--- src/components/emoji_picker/emoji_picker.vue | 1 + 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 39a514a7..ca2a3683 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -112,7 +112,8 @@ const EmojiPicker = { contentLoaded: false, groupRefs: {}, emojiRefs: {}, - filteredEmojiGroups: [] + filteredEmojiGroups: [], + width: 0 } }, components: { @@ -155,7 +156,6 @@ const EmojiPicker = { this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen }) }, onScroll (startIndex, endIndex, visibleStartIndex, visibleEndIndex) { - console.log('onScroll', startIndex, endIndex, visibleStartIndex, visibleEndIndex) const target = this.$refs['emoji-groups'].$el this.scrolledGroup(target, visibleStartIndex, visibleEndIndex) }, @@ -221,6 +221,7 @@ const EmojiPicker = { }, onShowing () { const oldContentLoaded = this.contentLoaded + this.recalculateItemPerRow() this.$nextTick(() => { this.$refs.search.focus() }) @@ -241,6 +242,14 @@ const EmojiPicker = { emojis: this.filterByKeyword(group.emojis, trim(this.keyword)) })) .filter(group => group.emojis.length > 0) + }, + recalculateItemPerRow () { + this.$nextTick(() => { + if (!this.$refs['emoji-groups']) { + return + } + this.width = this.$refs['emoji-groups'].$el.offsetWidth + }) } }, watch: { @@ -252,6 +261,9 @@ const EmojiPicker = { this.filteredEmojiGroups = this.getFilteredEmojiGroups() } }, + mounted () { + this.recalculateItemPerRow() + }, computed: { minItemSize () { return this.emojiHeight @@ -263,7 +275,7 @@ const EmojiPicker = { return 32 + 4 }, itemPerRow () { - return 6 + return this.width ? Math.floor(this.width / this.emojiWidth - 1) : 6 }, activeGroupView () { return this.showingStickers ? '' : this.activeGroup diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index 5d8b0431..ae4683f5 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -82,6 +82,7 @@ :items="emojiItems" :emit-update="true" @update="onScroll" + @visible="recalculateItemPerRow" >