forked from srxl/akkoma-fe
store failed experiment
This commit is contained in:
parent
fa2884a805
commit
dd3c8631bf
4 changed files with 97 additions and 77 deletions
|
@ -114,7 +114,8 @@ const EmojiInput = {
|
||||||
showPicker: false,
|
showPicker: false,
|
||||||
temporarilyHideSuggestions: false,
|
temporarilyHideSuggestions: false,
|
||||||
keepOpen: false,
|
keepOpen: false,
|
||||||
disableClickOutside: false
|
disableClickOutside: false,
|
||||||
|
suggestions: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
@ -124,21 +125,6 @@ const EmojiInput = {
|
||||||
padEmoji () {
|
padEmoji () {
|
||||||
return this.$store.getters.mergedConfig.padEmoji
|
return this.$store.getters.mergedConfig.padEmoji
|
||||||
},
|
},
|
||||||
suggestions () {
|
|
||||||
const firstchar = this.textAtCaret.charAt(0)
|
|
||||||
if (this.textAtCaret === firstchar) { return [] }
|
|
||||||
const matchedSuggestions = this.suggest(this.textAtCaret)
|
|
||||||
if (matchedSuggestions.length <= 0) {
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
return take(matchedSuggestions, 5)
|
|
||||||
.map(({ imageUrl, ...rest }, index) => ({
|
|
||||||
...rest,
|
|
||||||
// eslint-disable-next-line camelcase
|
|
||||||
img: imageUrl || '',
|
|
||||||
highlighted: index === this.highlighted
|
|
||||||
}))
|
|
||||||
},
|
|
||||||
showSuggestions () {
|
showSuggestions () {
|
||||||
return this.focused &&
|
return this.focused &&
|
||||||
this.suggestions &&
|
this.suggestions &&
|
||||||
|
@ -187,7 +173,25 @@ const EmojiInput = {
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
showSuggestions: function (newValue) {
|
showSuggestions: function (newValue) {
|
||||||
|
console.log('showSuggestions watch', newValue, this.suggestions)
|
||||||
this.$emit('shown', newValue)
|
this.$emit('shown', newValue)
|
||||||
|
},
|
||||||
|
textAtCaret: async function (textAtCaret) {
|
||||||
|
const firstchar = textAtCaret.charAt(0)
|
||||||
|
this.suggestions = []
|
||||||
|
if (textAtCaret === firstchar) return
|
||||||
|
const matchedSuggestions = await this.suggest(textAtCaret)
|
||||||
|
// Async, cancel if textAtCaret has been updated while waiting
|
||||||
|
if (this.textAtCaret !== textAtCaret) return
|
||||||
|
if (matchedSuggestions.length <= 0) return
|
||||||
|
this.suggestions = take(matchedSuggestions, 10)
|
||||||
|
.map(({ imageUrl, ...rest }, index) => ({
|
||||||
|
...rest,
|
||||||
|
// eslint-disable-next-line camelcase
|
||||||
|
img: imageUrl || '',
|
||||||
|
highlighted: index === this.highlighted
|
||||||
|
}))
|
||||||
|
this.scrollIntoView()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -341,6 +345,7 @@ const EmojiInput = {
|
||||||
const { offsetHeight } = this.input.elm
|
const { offsetHeight } = this.input.elm
|
||||||
const { picker } = this.$refs
|
const { picker } = this.$refs
|
||||||
const pickerBottom = picker.$el.getBoundingClientRect().bottom
|
const pickerBottom = picker.$el.getBoundingClientRect().bottom
|
||||||
|
console.log('setting bottom', pickerBottom > window.innerHeight)
|
||||||
if (pickerBottom > window.innerHeight) {
|
if (pickerBottom > window.innerHeight) {
|
||||||
picker.$el.style.top = 'auto'
|
picker.$el.style.top = 'auto'
|
||||||
picker.$el.style.bottom = offsetHeight + 'px'
|
picker.$el.style.bottom = offsetHeight + 'px'
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
import { debounce } from 'lodash'
|
|
||||||
/**
|
/**
|
||||||
* suggest - generates a suggestor function to be used by emoji-input
|
* suggest - generates a suggestor function to be used by emoji-input
|
||||||
* data: object providing source information for specific types of suggestions:
|
* data: object providing source information for specific types of suggestions:
|
||||||
|
@ -11,19 +10,19 @@ import { debounce } from 'lodash'
|
||||||
* doesn't support user linking you can just provide only emoji.
|
* doesn't support user linking you can just provide only emoji.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const debounceUserSearch = debounce((data, input) => {
|
export default data => {
|
||||||
data.updateUsersList(input)
|
const emojiCurry = suggestEmoji(data.emoji)
|
||||||
}, 500)
|
const usersCurry = suggestUsers(data.dispatch)
|
||||||
|
return input => {
|
||||||
export default data => input => {
|
const firstChar = input[0]
|
||||||
const firstChar = input[0]
|
if (firstChar === ':' && data.emoji) {
|
||||||
if (firstChar === ':' && data.emoji) {
|
return emojiCurry(input)
|
||||||
return suggestEmoji(data.emoji)(input)
|
}
|
||||||
|
if (firstChar === '@' && data.dispatch) {
|
||||||
|
return usersCurry(input)
|
||||||
|
}
|
||||||
|
return []
|
||||||
}
|
}
|
||||||
if (firstChar === '@' && data.users) {
|
|
||||||
return suggestUsers(data)(input)
|
|
||||||
}
|
|
||||||
return []
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const suggestEmoji = emojis => input => {
|
export const suggestEmoji = emojis => input => {
|
||||||
|
@ -57,50 +56,67 @@ export const suggestEmoji = emojis => input => {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export const suggestUsers = data => input => {
|
export const suggestUsers = (dispatch) => {
|
||||||
const noPrefix = input.toLowerCase().substr(1)
|
let suggestions = []
|
||||||
const users = data.users
|
let previousQuery = ''
|
||||||
|
let timeout = null
|
||||||
|
|
||||||
const newUsers = users.filter(
|
const userSearch = (query) => dispatch('searchUsers', { query, saveUsers: false })
|
||||||
user =>
|
const debounceUserSearch = (query) => {
|
||||||
user.screen_name.toLowerCase().startsWith(noPrefix) ||
|
return new Promise((resolve, reject) => {
|
||||||
user.name.toLowerCase().startsWith(noPrefix)
|
clearTimeout(timeout)
|
||||||
|
timeout = setTimeout(() => {
|
||||||
/* taking only 20 results so that sorting is a bit cheaper, we display
|
userSearch(query).then(resolve).catch(reject)
|
||||||
* only 5 anyway. could be inaccurate, but we ideally we should query
|
}, 300)
|
||||||
* backend anyway
|
})
|
||||||
*/
|
}
|
||||||
).slice(0, 20).sort((a, b) => {
|
|
||||||
let aScore = 0
|
return async input => {
|
||||||
let bScore = 0
|
const noPrefix = input.toLowerCase().substr(1)
|
||||||
|
if (previousQuery === noPrefix) return suggestions
|
||||||
// Matches on screen name (i.e. user@instance) makes a priority
|
|
||||||
aScore += a.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
|
suggestions = []
|
||||||
bScore += b.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
|
previousQuery = noPrefix
|
||||||
|
const users = await debounceUserSearch(noPrefix)
|
||||||
// Matches on name takes second priority
|
|
||||||
aScore += a.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
|
const newUsers = users.filter(
|
||||||
bScore += b.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
|
user =>
|
||||||
|
user.screen_name.toLowerCase().startsWith(noPrefix) ||
|
||||||
const diff = (bScore - aScore) * 10
|
user.name.toLowerCase().startsWith(noPrefix)
|
||||||
|
|
||||||
// Then sort alphabetically
|
/* taking only 20 results so that sorting is a bit cheaper, we display
|
||||||
const nameAlphabetically = a.name > b.name ? 1 : -1
|
* only 5 anyway. could be inaccurate, but we ideally we should query
|
||||||
const screenNameAlphabetically = a.screen_name > b.screen_name ? 1 : -1
|
* backend anyway
|
||||||
|
*/
|
||||||
return diff + nameAlphabetically + screenNameAlphabetically
|
).slice(0, 20).sort((a, b) => {
|
||||||
/* eslint-disable camelcase */
|
let aScore = 0
|
||||||
}).map(({ screen_name, name, profile_image_url_original }) => ({
|
let bScore = 0
|
||||||
displayText: screen_name,
|
|
||||||
detailText: name,
|
// Matches on screen name (i.e. user@instance) makes a priority
|
||||||
imageUrl: profile_image_url_original,
|
aScore += a.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
|
||||||
replacement: '@' + screen_name + ' '
|
bScore += b.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
|
||||||
}))
|
|
||||||
|
// Matches on name takes second priority
|
||||||
// BE search users to get more comprehensive results
|
aScore += a.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
|
||||||
if (data.updateUsersList) {
|
bScore += b.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
|
||||||
debounceUserSearch(data, noPrefix)
|
|
||||||
|
const diff = (bScore - aScore) * 10
|
||||||
|
|
||||||
|
// Then sort alphabetically
|
||||||
|
const nameAlphabetically = a.name > b.name ? 1 : -1
|
||||||
|
const screenNameAlphabetically = a.screen_name > b.screen_name ? 1 : -1
|
||||||
|
|
||||||
|
return diff + nameAlphabetically + screenNameAlphabetically
|
||||||
|
/* eslint-disable camelcase */
|
||||||
|
}).map(({ screen_name, name, profile_image_url_original }) => ({
|
||||||
|
displayText: screen_name,
|
||||||
|
detailText: name,
|
||||||
|
imageUrl: profile_image_url_original,
|
||||||
|
replacement: '@' + screen_name + ' '
|
||||||
|
}))
|
||||||
|
|
||||||
|
suggestions = newUsers || []
|
||||||
|
return suggestions
|
||||||
|
/* eslint-enable camelcase */
|
||||||
}
|
}
|
||||||
return newUsers
|
|
||||||
/* eslint-enable camelcase */
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -159,8 +159,7 @@ const PostStatusForm = {
|
||||||
...this.$store.state.instance.emoji,
|
...this.$store.state.instance.emoji,
|
||||||
...this.$store.state.instance.customEmoji
|
...this.$store.state.instance.customEmoji
|
||||||
],
|
],
|
||||||
users: this.$store.state.users.users,
|
dispatch: this.$store.dispatch
|
||||||
updateUsersList: (query) => this.$store.dispatch('searchUsers', { query })
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
emojiSuggestor () {
|
emojiSuggestor () {
|
||||||
|
|
|
@ -440,10 +440,10 @@ const users = {
|
||||||
store.commit('setUserForNotification', notification)
|
store.commit('setUserForNotification', notification)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
searchUsers ({ rootState, commit }, { query }) {
|
searchUsers ({ rootState, commit }, { query, saveUsers = true }) {
|
||||||
return rootState.api.backendInteractor.searchUsers({ query })
|
return rootState.api.backendInteractor.searchUsers({ query })
|
||||||
.then((users) => {
|
.then((users) => {
|
||||||
commit('addNewUsers', users)
|
if (saveUsers) commit('addNewUsers', users)
|
||||||
return users
|
return users
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in a new issue