commit: 63473964f8bf94a0930f3bf4724a23642ef9a18d
parent: 91991e2ac1765a17bc5cd0038507c577a0d12045
Author: lambadalambda <gitgud@rogerbraun.net>
Date: Wed, 25 Oct 2017 10:00:28 -0400
Merge branch 'feature/emoji-completion' into 'develop'
Add emoji completion
See merge request lambadalambda/pleroma-fe!122
Diffstat:
4 files changed, 30 insertions(+), 5 deletions(-)
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
@@ -50,17 +50,30 @@ const PostStatusForm = {
},
computed: {
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)))
if (matchedUsers.length <= 0) {
return false
}
// eslint-disable-next-line camelcase
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,
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 {
return false
}
@@ -74,6 +87,9 @@ const PostStatusForm = {
},
users () {
return this.$store.state.users.users
+ },
+ emoji () {
+ return this.$store.state.config.emoji || []
}
},
methods: {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
@@ -6,10 +6,10 @@
</div>
<div style="position:relative;" v-if="candidates">
<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>
<span>
- @{{candidate.screen_name}}
+ {{candidate.screen_name}}
<small class="base02">{{candidate.name}}</small>
</span>
</div>
diff --git a/src/main.js b/src/main.js
@@ -102,3 +102,12 @@ window.fetch('/static/terms-of-service.html')
.then((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 })
+ })
diff --git a/src/services/completion/completion.js b/src/services/completion/completion.js
@@ -37,7 +37,7 @@ export const addPositionToWords = (words) => {
export const splitIntoWords = (str) => {
// Split at word boundaries
const regex = /\b/
- const triggers = /[@#]+$/
+ const triggers = /[@#:]+$/
let split = str.split(regex)