diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/post_status_form/post_status_form.js | 20 | ||||
| -rw-r--r-- | src/components/post_status_form/post_status_form.vue | 4 | ||||
| -rw-r--r-- | src/main.js | 10 | ||||
| -rw-r--r-- | src/services/completion/completion.js | 2 |
4 files changed, 31 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 index 86bf2fa7..6fc84407 100644 --- 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 index b46fbf3a..5a6e02e5 100644 --- 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 index d1f99fa5..a13569d6 100644 --- a/src/main.js +++ b/src/main.js @@ -102,3 +102,13 @@ window.fetch('/static/terms-of-service.html') .then((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 }) + }) diff --git a/src/services/completion/completion.js b/src/services/completion/completion.js index 8788d837..11c45867 100644 --- 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) |