From 03c2f29b0aa31eb502db29e5a809da8bc1c1af28 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 28 Jul 2019 16:07:01 +0300 Subject: [PATCH] cleanup and appropriation for new emoji-input component API, styles updates --- src/boot/after_store.js | 12 ++-- src/components/emoji-input/emoji-input.js | 30 ++++++++- src/components/emoji-input/emoji-input.vue | 54 ++++++++++++++++- src/components/emoji-picker/emoji-picker.js | 33 +++------- src/components/emoji-picker/emoji-picker.vue | 57 ++++++++---------- .../post_status_form/post_status_form.js | 2 - .../post_status_form/post_status_form.vue | 2 + static/font/LICENSE.txt | 0 static/font/README.txt | 0 static/font/config.json | 4 +- static/font/css/animation.css | 0 static/font/css/fontello-codes.css | 1 + static/font/css/fontello-embedded.css | 13 ++-- static/font/css/fontello-ie7-codes.css | 1 + static/font/css/fontello-ie7.css | 1 + static/font/css/fontello.css | 15 ++--- static/font/demo.html | 15 +++-- static/font/font/fontello.eot | Bin 19060 -> 19376 bytes static/font/font/fontello.svg | 2 + static/font/font/fontello.ttf | Bin 18892 -> 19208 bytes static/font/font/fontello.woff | Bin 11596 -> 11808 bytes static/font/font/fontello.woff2 | Bin 9856 -> 10044 bytes 22 files changed, 153 insertions(+), 89 deletions(-) mode change 100755 => 100644 static/font/LICENSE.txt mode change 100755 => 100644 static/font/README.txt mode change 100755 => 100644 static/font/config.json mode change 100755 => 100644 static/font/css/animation.css mode change 100755 => 100644 static/font/css/fontello-codes.css mode change 100755 => 100644 static/font/css/fontello-embedded.css mode change 100755 => 100644 static/font/css/fontello-ie7-codes.css mode change 100755 => 100644 static/font/css/fontello-ie7.css mode change 100755 => 100644 static/font/css/fontello.css mode change 100755 => 100644 static/font/demo.html mode change 100755 => 100644 static/font/font/fontello.eot mode change 100755 => 100644 static/font/font/fontello.svg mode change 100755 => 100644 static/font/font/fontello.ttf mode change 100755 => 100644 static/font/font/fontello.woff mode change 100755 => 100644 static/font/font/fontello.woff2 diff --git a/src/boot/after_store.js b/src/boot/after_store.js index 3799359f..0e59358b 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -190,7 +190,7 @@ const getStaticEmoji = async ({ store }) => { imageUrl: false, replacement: values[key] } - }) + }).sort((a, b) => a.displayText - b.displayText) store.dispatch('setInstanceOption', { name: 'emoji', value: emoji }) } else { throw (res) @@ -209,14 +209,16 @@ const getCustomEmoji = async ({ store }) => { if (res.ok) { const result = await res.json() const values = Array.isArray(result) ? Object.assign({}, ...result) : result - const emoji = Object.keys(values).map((key) => { - const imageUrl = values[key].image_url + const emoji = Object.entries(values).map(([key, value]) => { + const imageUrl = value.image_url return { displayText: key, - imageUrl: imageUrl ? store.state.instance.server + imageUrl : values[key], + imageUrl: imageUrl ? store.state.instance.server + imageUrl : value, + tags: imageUrl ? value.tags.sort((a, b) => a > b ? 1 : 0) : ['utf'], replacement: `:${key}: ` } - }) + // Technically could use tags but those are kinda useless right now, should have been "pack" field, that would be more useful + }).sort((a, b) => a.displayText.toLowerCase() > b.displayText.toLowerCase() ? 1 : 0) store.dispatch('setInstanceOption', { name: 'customEmoji', value: emoji }) store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: true }) } else { diff --git a/src/components/emoji-input/emoji-input.js b/src/components/emoji-input/emoji-input.js index 62c58446..1c49c710 100644 --- a/src/components/emoji-input/emoji-input.js +++ b/src/components/emoji-input/emoji-input.js @@ -53,6 +53,11 @@ const EmojiInput = { */ required: true, type: String + }, + emojiPicker: { + required: false, + type: Boolean, + default: false } }, data () { @@ -61,7 +66,8 @@ const EmojiInput = { highlighted: 0, caret: 0, focused: false, - blurTimeout: null + blurTimeout: null, + showPicker: false, } }, components: { @@ -83,12 +89,15 @@ const EmojiInput = { highlighted: index === this.highlighted })) }, - showPopup () { + showSuggestions () { return this.focused && this.suggestions && this.suggestions.length > 0 }, textAtCaret () { return (this.wordAtCaret || {}).word || '' }, + pickerIconBottom () { + return this.input && this.input.tag === 'textarea' + }, wordAtCaret () { if (this.value && this.caret) { const word = Completion.wordAtPosition(this.value, this.caret - 1) || {} @@ -124,11 +133,22 @@ const EmojiInput = { } }, methods: { + togglePicker () { + this.showPicker = !this.showPicker + }, replace (replacement) { const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement) this.$emit('input', newValue) this.caret = 0 }, + insert (insertion) { + const newValue = [ + this.value.substring(0, this.caret), + insertion, + this.value.substring(this.caret) + ].join('') + this.$emit('input', newValue) + }, replaceText (e, suggestion) { const len = this.suggestions.length || 0 if (this.textAtCaret.length === 1) { return } @@ -195,6 +215,7 @@ const EmojiInput = { this.blurTimeout = null } + this.showPicker = false this.focused = true this.setCaret(e) this.resize() @@ -231,6 +252,7 @@ const EmojiInput = { } }, onInput (e) { + this.showPicker = false this.setCaret(e) this.$emit('input', e.target.value) }, @@ -239,6 +261,9 @@ const EmojiInput = { this.resize() this.$emit('input', e.target.value) }, + onClickOutside () { + this.showPicker = false + }, setCaret ({ target: { selectionStart } }) { this.caret = selectionStart }, @@ -247,6 +272,7 @@ const EmojiInput = { if (!panel) return const { offsetHeight, offsetTop } = this.input.elm this.$refs.panel.style.top = (offsetTop + offsetHeight) + 'px' + this.$refs.picker.$el.style.top = (offsetTop + offsetHeight) + 'px' } } } diff --git a/src/components/emoji-input/emoji-input.vue b/src/components/emoji-input/emoji-input.vue index 48739ec8..605882e8 100644 --- a/src/components/emoji-input/emoji-input.vue +++ b/src/components/emoji-input/emoji-input.vue @@ -1,10 +1,29 @@