Merge branch 'feature/emoji-completion' into 'develop'

Add emoji completion

See merge request lambadalambda/pleroma-fe!122
This commit is contained in:
lambadalambda 2017-10-25 10:00:28 -04:00
commit 63473964f8
4 changed files with 30 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,12 @@ 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('/api/pleroma/emoji.json')
.then((res) => res.json())
.then((values) => {
const emoji = Object.keys(values).map((key) => {
return { shortcode: key, image_url: values[key] }
})
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)