Add emoji completion.

This commit is contained in:
eal 2017-09-19 22:43:20 +03:00
parent 91991e2ac1
commit 2162ef20b0
4 changed files with 31 additions and 5 deletions

View file

@ -50,17 +50,30 @@ const PostStatusForm = {
}, },
computed: { computed: {
candidates () { candidates () {
if (this.textAtCaret.charAt(0) === '@') { const firstchar = this.textAtCaret.charAt(0)
if (firstchar === '@') {
const matchedUsers = filter(this.users, (user) => (String(user.name + user.screen_name)).match(this.textAtCaret.slice(1))) const matchedUsers = filter(this.users, (user) => (String(user.name + user.screen_name)).match(this.textAtCaret.slice(1)))
if (matchedUsers.length <= 0) { if (matchedUsers.length <= 0) {
return false return false
} }
// eslint-disable-next-line camelcase // eslint-disable-next-line camelcase
return map(take(matchedUsers, 5), ({screen_name, name, profile_image_url_original}) => ({ return map(take(matchedUsers, 5), ({screen_name, name, profile_image_url_original}) => ({
screen_name: screen_name, // eslint-disable-next-line camelcase
screen_name: `@${screen_name}`,
name: name, name: name,
img: profile_image_url_original img: profile_image_url_original
})) }))
} else if (firstchar === ':') {
const matchedEmoji = filter(this.emoji, (emoji) => emoji.shortcode.match(this.textAtCaret.slice(1)))
if (matchedEmoji.length <= 0) {
return false
}
return map(take(matchedEmoji, 5), ({shortcode, image_url}) => ({
// eslint-disable-next-line camelcase
screen_name: `:${shortcode}:`,
name: '',
img: image_url
}))
} else { } else {
return false return false
} }
@ -74,6 +87,9 @@ const PostStatusForm = {
}, },
users () { users () {
return this.$store.state.users.users return this.$store.state.users.users
},
emoji () {
return this.$store.state.config.emoji || []
} }
}, },
methods: { methods: {

View file

@ -6,10 +6,10 @@
</div> </div>
<div style="position:relative;" v-if="candidates"> <div style="position:relative;" v-if="candidates">
<div class="autocomplete-panel base05-background"> <div class="autocomplete-panel base05-background">
<div v-for="candidate in candidates" @click="replace('@' + candidate.screen_name + ' ')" class="autocomplete base01"> <div v-for="candidate in candidates" @click="replace(candidate.screen_name + ' ')" class="autocomplete base01">
<img :src="candidate.img"></img> <img :src="candidate.img"></img>
<span> <span>
@{{candidate.screen_name}} {{candidate.screen_name}}
<small class="base02">{{candidate.name}}</small> <small class="base02">{{candidate.name}}</small>
</span> </span>
</div> </div>

View file

@ -102,3 +102,13 @@ window.fetch('/static/terms-of-service.html')
.then((html) => { .then((html) => {
store.dispatch('setOption', { name: 'tos', value: html }) store.dispatch('setOption', { name: 'tos', value: html })
}) })
window.fetch('/static/emoji.txt')
.then((res) => res.text())
.then((csv) => {
const emoji = csv.split('\n').map((row) => {
const values = row.split(', ')
return { shortcode: values[0], url: values[1] }
})
store.dispatch('setOption', { name: 'emoji', value: emoji })
})

View file

@ -37,7 +37,7 @@ export const addPositionToWords = (words) => {
export const splitIntoWords = (str) => { export const splitIntoWords = (str) => {
// Split at word boundaries // Split at word boundaries
const regex = /\b/ const regex = /\b/
const triggers = /[@#]+$/ const triggers = /[@#:]+$/
let split = str.split(regex) let split = str.split(regex)