Clean up legacy code in emoji picker

Ref: grouped-emoji-picker
This commit is contained in:
Tusooa Zhu 2021-10-08 01:02:16 -04:00
parent c70cdbb873
commit 8777b6eadd
No known key found for this signature in database
GPG Key ID: 7B467EDE43A08224
4 changed files with 28 additions and 119 deletions

View File

@ -207,7 +207,6 @@ const EmojiInput = {
}, },
triggerShowPicker () { triggerShowPicker () {
this.showPicker = true this.showPicker = true
this.$refs.picker.startEmojiLoad()
this.$nextTick(() => { this.$nextTick(() => {
this.scrollIntoView() this.scrollIntoView()
this.focusPickerInput() this.focusPickerInput()

View File

@ -1,6 +1,6 @@
import { defineAsyncComponent } from 'vue' import { defineAsyncComponent } from 'vue'
import Checkbox from '../checkbox/checkbox.vue' import Checkbox from '../checkbox/checkbox.vue'
import LazyImageContainer from '../../directives/lazy_image_container' import lozad from 'lozad'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
faBoxOpen, faBoxOpen,
@ -54,7 +54,6 @@ const EmojiPicker = {
showingStickers: false, showingStickers: false,
groupsScrolledClass: 'scrolled-top', groupsScrolledClass: 'scrolled-top',
keepOpen: false, keepOpen: false,
customEmojiBufferSlice: LOAD_EMOJI_BY,
customEmojiTimeout: null, customEmojiTimeout: null,
customEmojiLoadAllConfirmed: false, customEmojiLoadAllConfirmed: false,
groupLoadedCount: {}, groupLoadedCount: {},
@ -65,9 +64,6 @@ const EmojiPicker = {
StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')), StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
Checkbox Checkbox
}, },
directives: {
LazyImageContainer
},
methods: { methods: {
onStickerUploaded (e) { onStickerUploaded (e) {
this.$emit('sticker-uploaded', e) this.$emit('sticker-uploaded', e)
@ -82,10 +78,6 @@ const EmojiPicker = {
onScroll (e) { onScroll (e) {
const target = (e && e.target) || this.$refs['emoji-groups'] const target = (e && e.target) || this.$refs['emoji-groups']
this.updateScrolledClass(target) this.updateScrolledClass(target)
this.scrolledGroup(target)
this.$nextTick(() => {
this.triggerLoadMore(target)
})
}, },
highlight (key) { highlight (key) {
const ref = this.$refs['group-' + key] const ref = this.$refs['group-' + key]
@ -94,7 +86,6 @@ const EmojiPicker = {
this.activeGroup = key this.activeGroup = key
this.$nextTick(() => { this.$nextTick(() => {
this.$refs['emoji-groups'].scrollTop = top + 1 this.$refs['emoji-groups'].scrollTop = top + 1
this.loadEmoji(key)
}) })
}, },
updateScrolledClass (target) { updateScrolledClass (target) {
@ -106,101 +97,48 @@ const EmojiPicker = {
this.groupsScrolledClass = 'scrolled-middle' this.groupsScrolledClass = 'scrolled-middle'
} }
}, },
triggerLoadMore (target) {
Object.keys(this.allCustomGroups)
.filter(id => this.filteredEmojiGroups.filter(group => group.id === id).length > 0)
.map(groupId => {
const ref = this.$refs[`group-end-${groupId}`][0]
if (!ref) return undefined
const bottom = ref.offsetTop + ref.offsetHeight
const group = this.$refs[`group-${groupId}`][0]
const top = group.offsetTop
const scrollerBottom = target.scrollTop + target.clientHeight
const scrollerTop = target.scrollTop
const scrollerMax = target.scrollHeight
// Loads more emoji when they come into view
const approachingBottom = bottom - scrollerBottom < LOAD_EMOJI_MARGIN
// Always load when at the very top in case there's no scroll space yet
const atTop = scrollerTop < top + target.clientHeight / 2 && top < scrollerBottom
const unscrollable = top - bottom < target.clientHeight
// Don't load when looking at unicode category or at the very bottom
const bottomAboveViewport = bottom < scrollerTop || scrollerBottom === scrollerMax
if (!bottomAboveViewport && (approachingBottom || atTop || unscrollable)) {
return groupId
}
return undefined
})
.filter(k => k)
.map(k => {
this.loadEmoji(k)
})
},
scrolledGroup (target) {
const top = target.scrollTop + 5
this.$nextTick(() => {
this.allEmojiGroups.forEach(group => {
const ref = this.$refs['group-' + group.id]
if (ref.offsetTop <= top) {
this.activeGroup = group.id
}
})
})
},
loadEmoji (loadGroup) {
if (!this.allCustomGroups[loadGroup]) {
return
}
const allLoaded = this.loadedCount[loadGroup] >= this.allCustomGroups[loadGroup].emojis.length
if (allLoaded) {
return
}
this.groupLoadedCount = {
...this.groupLoadedCount,
[loadGroup]: this.loadedCount[loadGroup] + LOAD_EMOJI_BY
}
},
startEmojiLoad (forceUpdate = false) {
if (!forceUpdate) {
this.keyword = ''
}
this.$nextTick(() => {
this.$refs['emoji-groups'].scrollTop = 0
this.$nextTick(() => {
if (this.firstLoaded) {
return
}
this.triggerLoadMore(this.$refs['emoji-groups'])
this.firstLoaded = true
})
})
},
toggleStickers () { toggleStickers () {
this.showingStickers = !this.showingStickers this.showingStickers = !this.showingStickers
}, },
setShowStickers (value) { setShowStickers (value) {
this.showingStickers = value this.showingStickers = value
}, },
limitedEmojis (list, groupId) {
return list // list.slice(0, this.loadedCount[groupId])
},
filterByKeyword (list, keyword) { filterByKeyword (list, keyword) {
return filterByKeyword(list, keyword) return filterByKeyword(list, keyword)
},
initializeLazyLoad () {
this.destroyLazyLoad()
this.$lozad = lozad('img', {})
this.$lozad.observe()
},
destroyLazyLoad () {
if (this.$lozad) {
if (this.$lozad.observer) {
this.$lozad.observer.disconnect()
}
if (this.$lozad.mutationObserver) {
this.$lozad.mutationObserver.disconnect()
}
}
} }
}, },
watch: { watch: {
keyword () { keyword () {
this.customEmojiLoadAllConfirmed = false this.customEmojiLoadAllConfirmed = false
this.onScroll() this.onScroll()
this.startEmojiLoad(true) // Wait for the dom to change
this.$nextTick(() => this.initializeLazyLoad())
},
allCustomGroups () {
this.$nextTick(() => this.initializeLazyLoad())
} }
}, },
mounted () {
this.initializeLazyLoad()
},
destroyed () {
this.destroyLazyLoad()
},
computed: { computed: {
activeGroupView () { activeGroupView () {
return this.showingStickers ? '' : this.activeGroup return this.showingStickers ? '' : this.activeGroup
@ -214,10 +152,6 @@ const EmojiPicker = {
allCustomGroups () { allCustomGroups () {
return this.$store.getters.groupedCustomEmojis return this.$store.getters.groupedCustomEmojis
}, },
sensibleInitialAmountForAGroup () {
const groupCount = Object.keys(this.allCustomGroups).length
return Math.max(Math.floor(LOAD_EMOJI_BY / Math.max(groupCount, 1)), 1)
},
allEmojiGroups () { allEmojiGroups () {
const standardEmojis = this.$store.state.instance.emoji || [] const standardEmojis = this.$store.state.instance.emoji || []
return Object.entries(this.allCustomGroups) return Object.entries(this.allCustomGroups)
@ -237,16 +171,6 @@ const EmojiPicker = {
})) }))
.filter(group => group.emojis.length > 0) .filter(group => group.emojis.length > 0)
}, },
loadedCount () {
return Object.keys(this.allCustomGroups)
.reduce((res, groupId) => {
res[groupId] = this.groupLoadedCount[groupId] || this.sensibleInitialAmountForAGroup
return res
}, {})
},
lastNonUnicodeGroupId () {
return this.emojis[this.emojis.length - 2].id
},
stickerPickerEnabled () { stickerPickerEnabled () {
return (this.$store.state.instance.stickers || []).length !== 0 return (this.$store.state.instance.stickers || []).length !== 0
} }

View File

@ -62,7 +62,6 @@
</div> </div>
<div <div
ref="emoji-groups" ref="emoji-groups"
v-lazy-image-container
class="emoji-groups" class="emoji-groups"
:class="groupsScrolledClass" :class="groupsScrolledClass"
@scroll="onScroll" @scroll="onScroll"
@ -79,7 +78,7 @@
{{ group.text }} {{ group.text }}
</h6> </h6>
<span <span
v-for="emoji in limitedEmojis(group.emojis, group.id)" v-for="emoji in group.emojis"
:key="group.id + emoji.displayText" :key="group.id + emoji.displayText"
:title="emoji.displayText" :title="emoji.displayText"
class="emoji-item" class="emoji-item"

View File

@ -1,13 +0,0 @@
import lozad from 'lozad'
const LazyImageContainer = {
inserted (el) {
const images = el.querySelectorAll('img')
console.log(images.length)
el.$observer = lozad(images)
el.$observer.observe()
}
}
export default LazyImageContainer