Change suggestion logic for performance

This commit is contained in:
AkiraFukushima 2018-11-12 22:07:13 +09:00
parent 3a0c07cb71
commit e104ac0e6b
2 changed files with 34 additions and 41 deletions

View File

@ -132,35 +132,38 @@ export default {
} }
}, },
methods: { methods: {
startSuggest (e) { async startSuggest (e) {
const currentValue = e.target.value const currentValue = e.target.value
// Start suggest after user stop writing // Start suggest after user stop writing
setTimeout(() => { setTimeout(async () => {
if (currentValue === this.status) { if (currentValue === this.status) {
this.suggest(e) await this.suggest(e)
} }
}, 500) }, 700)
}, },
async suggest (e) { async suggest (e) {
const emoji = this.suggestEmoji(e)
if (emoji) {
return true
}
const ac = await this.suggestAccount(e)
if (ac) {
return true
}
const tag = await this.suggestHashtag(e)
return tag
},
async suggestAccount (e) {
// e.target.sectionStart: Cursor position // e.target.sectionStart: Cursor position
// e.target.value: current value of the textarea // e.target.value: current value of the textarea
const [start, word] = suggestText(e.target.value, e.target.selectionStart, '@') const [start, word] = suggestText(e.target.value, e.target.selectionStart)
if (!start || !word) { if (!start || !word) {
this.closeSuggest() this.closeSuggest()
return false return false
} }
switch (word.charAt(0)) {
case ':':
await this.suggestEmoji(start, word)
return true
case '@':
await this.suggestAccount(start, word)
return true
case '#':
await this.suggestHashtag(start, word)
return true
default:
return false
}
},
async suggestAccount (start, word) {
try { try {
await this.$store.dispatch('TimelineSpace/Modals/NewToot/Status/searchAccount', word) await this.$store.dispatch('TimelineSpace/Modals/NewToot/Status/searchAccount', word)
this.openSuggest = true this.openSuggest = true
@ -173,12 +176,7 @@ export default {
return false return false
} }
}, },
async suggestHashtag (e) { async suggestHashtag (start, word) {
const [start, word] = suggestText(e.target.value, e.target.selectionStart, '#')
if (!start || !word) {
this.closeSuggest()
return false
}
try { try {
await this.$store.dispatch('TimelineSpace/Modals/NewToot/Status/searchHashtag', word) await this.$store.dispatch('TimelineSpace/Modals/NewToot/Status/searchHashtag', word)
this.openSuggest = true this.openSuggest = true
@ -191,14 +189,7 @@ export default {
return false return false
} }
}, },
suggestEmoji (e) { suggestEmoji (start, word) {
// e.target.sectionStart: Cursor position
// e.target.value: current value of the textarea
const [start, word] = suggestText(e.target.value, e.target.selectionStart, ':')
if (!start || !word) {
this.closeSuggest()
return false
}
// Find native emojis // Find native emojis
const filteredEmojiName = emojilib.ordered.filter(emoji => `:${emoji}`.includes(word)) const filteredEmojiName = emojilib.ordered.filter(emoji => `:${emoji}`.includes(word))
const filteredNativeEmoji = filteredEmojiName.map((name) => { const filteredNativeEmoji = filteredEmojiName.map((name) => {
@ -218,18 +209,20 @@ export default {
return (array.findIndex(ar => e.name === ar.name) === i) return (array.findIndex(ar => e.name === ar.name) === i)
}) })
} else { } else {
this.openSuggest = false this.closeSuggest()
} }
return true return true
}, },
closeSuggest () { closeSuggest () {
this.openSuggest = false if (this.openSuggest) {
this.startIndex = null this.openSuggest = false
this.matchWord = null this.startIndex = null
this.highlightedIndex = 0 this.matchWord = null
this.filteredSuggestion = [] this.highlightedIndex = 0
this.$store.commit('TimelineSpace/Modals/NewToot/Status/clearFilteredAccounts') this.filteredSuggestion = []
this.$store.commit('TimelineSpace/Modals/NewToot/Status/clearFilteredHashtags') this.$store.commit('TimelineSpace/Modals/NewToot/Status/clearFilteredAccounts')
this.$store.commit('TimelineSpace/Modals/NewToot/Status/clearFilteredHashtags')
}
}, },
suggestHighlight (index) { suggestHighlight (index) {
if (index < 0) { if (index < 0) {

View File

@ -1,5 +1,5 @@
// https://github.com/tootsuite/mastodon/blob/master/app/javascript/mastodon/components/autosuggest_textarea.js // https://github.com/tootsuite/mastodon/blob/master/app/javascript/mastodon/components/autosuggest_textarea.js
const textAtCursorMatch = (str, cursorPosition, separator = '@') => { const textAtCursorMatch = (str, cursorPosition, separators = ['@', '#', ':']) => {
let word let word
let left = str.slice(0, cursorPosition).search(/\S+$/) let left = str.slice(0, cursorPosition).search(/\S+$/)
@ -11,7 +11,7 @@ const textAtCursorMatch = (str, cursorPosition, separator = '@') => {
word = str.slice(left, right + cursorPosition) word = str.slice(left, right + cursorPosition)
} }
if (!word || word.trim().length < 3 || [separator].indexOf(word[0]) === -1) { if (!word || word.trim().length < 3 || separators.indexOf(word[0]) === -1) {
return [null, null] return [null, null]
} }