|
|
@ -1,5 +1,9 @@
|
|
|
|
import { set } from 'vue'
|
|
|
|
import { set } from 'vue'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const LOAD_EMOJI_BY = 50
|
|
|
|
|
|
|
|
const LOAD_EMOJI_INTERVAL = 100
|
|
|
|
|
|
|
|
const LOAD_EMOJI_SANE_AMOUNT = 500
|
|
|
|
|
|
|
|
|
|
|
|
const filterByKeyword = (list, keyword = '') => {
|
|
|
|
const filterByKeyword = (list, keyword = '') => {
|
|
|
|
return list.filter(x => x.displayText.includes(keyword))
|
|
|
|
return list.filter(x => x.displayText.includes(keyword))
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -21,13 +25,17 @@ const EmojiPicker = {
|
|
|
|
groupsScrolledClass: 'scrolled-top',
|
|
|
|
groupsScrolledClass: 'scrolled-top',
|
|
|
|
keepOpen: false,
|
|
|
|
keepOpen: false,
|
|
|
|
customEmojiBuffer: [],
|
|
|
|
customEmojiBuffer: [],
|
|
|
|
customEmojiInterval: null,
|
|
|
|
customEmojiTimeout: null,
|
|
|
|
customEmojiCounter: 0
|
|
|
|
customEmojiCounter: 0,
|
|
|
|
|
|
|
|
customEmojiLoadAllConfirmed: false
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
components: {
|
|
|
|
components: {
|
|
|
|
StickerPicker: () => import('../sticker_picker/sticker_picker.vue')
|
|
|
|
StickerPicker: () => import('../sticker_picker/sticker_picker.vue')
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
mounted () {
|
|
|
|
|
|
|
|
this.startEmojiLoad()
|
|
|
|
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
onEmoji (emoji) {
|
|
|
|
onEmoji (emoji) {
|
|
|
|
const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
|
|
|
|
const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
|
|
|
@ -61,35 +69,39 @@ const EmojiPicker = {
|
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
restartInterval () {
|
|
|
|
loadEmojiInsane () {
|
|
|
|
const customEmojis = filterByKeyword(
|
|
|
|
this.customEmojiLoadAllConfirmed = true
|
|
|
|
this.$store.state.instance.customEmoji || [],
|
|
|
|
this.continueEmojiLoad()
|
|
|
|
this.keyword
|
|
|
|
},
|
|
|
|
)
|
|
|
|
loadEmoji () {
|
|
|
|
const amount = 50
|
|
|
|
const allLoaded = this.customEmojiBuffer.length === this.filteredEmoji.length
|
|
|
|
const interval = 100
|
|
|
|
const saneLoaded = this.customEmojiBuffer.length >= LOAD_EMOJI_SANE_AMOUNT &&
|
|
|
|
|
|
|
|
!this.customEmojiLoadAllConfirmed
|
|
|
|
|
|
|
|
|
|
|
|
if (this.customEmojiInterval) {
|
|
|
|
if (allLoaded || saneLoaded) {
|
|
|
|
window.clearInterval(this.customEmojiInterval)
|
|
|
|
return
|
|
|
|
}
|
|
|
|
}
|
|
|
|
window.setTimeout(
|
|
|
|
|
|
|
|
window.clearInterval(this.customEmojiInterval),
|
|
|
|
|
|
|
|
1000
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
set(this, 'customEmojiBuffer', [])
|
|
|
|
|
|
|
|
this.customEmojiCounter = 0
|
|
|
|
|
|
|
|
this.customEmojiInterval = window.setInterval(() => {
|
|
|
|
|
|
|
|
console.log(this.customEmojiBuffer.length)
|
|
|
|
|
|
|
|
console.log(customEmojis.length)
|
|
|
|
|
|
|
|
if (this.customEmojiBuffer.length < customEmojis.length) {
|
|
|
|
|
|
|
|
this.customEmojiBuffer.push(
|
|
|
|
this.customEmojiBuffer.push(
|
|
|
|
...customEmojis.slice(this.customEmojiCounter, this.customEmojiCounter + amount)
|
|
|
|
...this.filteredEmoji.slice(
|
|
|
|
|
|
|
|
this.customEmojiCounter,
|
|
|
|
|
|
|
|
this.customEmojiCounter + LOAD_EMOJI_BY
|
|
|
|
)
|
|
|
|
)
|
|
|
|
} else {
|
|
|
|
)
|
|
|
|
window.clearInterval(this.customEmojiInterval)
|
|
|
|
this.customEmojiTimeout = window.setTimeout(this.loadEmoji, LOAD_EMOJI_INTERVAL)
|
|
|
|
|
|
|
|
this.customEmojiCounter += LOAD_EMOJI_BY
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
startEmojiLoad () {
|
|
|
|
|
|
|
|
if (this.customEmojiTimeout) {
|
|
|
|
|
|
|
|
window.clearTimeout(this.customEmojiTimeout)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.customEmojiCounter += amount
|
|
|
|
|
|
|
|
}, interval)
|
|
|
|
set(this, 'customEmojiBuffer', [])
|
|
|
|
|
|
|
|
this.customEmojiCounter = 0
|
|
|
|
|
|
|
|
this.customEmojiTimeout = window.setTimeout(this.loadEmoji, LOAD_EMOJI_INTERVAL)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
continueEmojiLoad () {
|
|
|
|
|
|
|
|
this.customEmojiTimeout = window.setTimeout(this.loadEmoji, LOAD_EMOJI_INTERVAL)
|
|
|
|
},
|
|
|
|
},
|
|
|
|
toggleStickers () {
|
|
|
|
toggleStickers () {
|
|
|
|
this.showingStickers = !this.showingStickers
|
|
|
|
this.showingStickers = !this.showingStickers
|
|
|
@ -107,7 +119,7 @@ const EmojiPicker = {
|
|
|
|
watch: {
|
|
|
|
watch: {
|
|
|
|
keyword () {
|
|
|
|
keyword () {
|
|
|
|
this.scrolledGroup()
|
|
|
|
this.scrolledGroup()
|
|
|
|
this.restartInterval()
|
|
|
|
this.startEmojiLoad()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
computed: {
|
|
|
@ -120,6 +132,20 @@ const EmojiPicker = {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return 0
|
|
|
|
return 0
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
saneAmount () {
|
|
|
|
|
|
|
|
// for UI
|
|
|
|
|
|
|
|
return LOAD_EMOJI_SANE_AMOUNT
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
filteredEmoji () {
|
|
|
|
|
|
|
|
return filterByKeyword(
|
|
|
|
|
|
|
|
this.$store.state.instance.customEmoji || [],
|
|
|
|
|
|
|
|
this.keyword
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
askForSanity () {
|
|
|
|
|
|
|
|
return this.customEmojiBuffer.length >= LOAD_EMOJI_SANE_AMOUNT &&
|
|
|
|
|
|
|
|
!this.customEmojiLoadAllConfirmed
|
|
|
|
|
|
|
|
},
|
|
|
|
emojis () {
|
|
|
|
emojis () {
|
|
|
|
const standardEmojis = this.$store.state.instance.emoji || []
|
|
|
|
const standardEmojis = this.$store.state.instance.emoji || []
|
|
|
|
const customEmojis = this.customEmojiBuffer
|
|
|
|
const customEmojis = this.customEmojiBuffer
|
|
|
|