diff options
| -rw-r--r-- | src/components/emoji-selector/emoji-selector.js | 17 | ||||
| -rw-r--r-- | src/components/emoji-selector/emoji-selector.vue | 9 |
2 files changed, 21 insertions, 5 deletions
diff --git a/src/components/emoji-selector/emoji-selector.js b/src/components/emoji-selector/emoji-selector.js index 133506b7..6d45df1f 100644 --- a/src/components/emoji-selector/emoji-selector.js +++ b/src/components/emoji-selector/emoji-selector.js @@ -6,7 +6,8 @@ const EmojiSelector = { data () { return { open: false, - keyword: '' + keyword: '', + activeGroup: 'standard' } }, methods: { @@ -17,6 +18,20 @@ const EmojiSelector = { const value = emoji.image_url ? `:${emoji.shortcode}:` : emoji.utf this.$emit('emoji', ` ${value} `) this.open = false + }, + highlight (key) { + const ref = this.$refs['group-' + key] + const top = ref[0].offsetTop + this.$refs['emoji-groups'].scrollTop = top + 1 + this.activeGroup = key + }, + scrolledGroup (e) { + const top = e.target.scrollTop + Object.keys(this.emojis).forEach(key => { + if (this.$refs['group-' + key][0].offsetTop < top) { + this.activeGroup = key + } + }) } }, computed: { diff --git a/src/components/emoji-selector/emoji-selector.vue b/src/components/emoji-selector/emoji-selector.vue index f05ff1e9..ddab2659 100644 --- a/src/components/emoji-selector/emoji-selector.vue +++ b/src/components/emoji-selector/emoji-selector.vue @@ -5,7 +5,7 @@ </span> <div class="emoji-dropdown-menu panel panel-default" v-if="open"> <div class="panel-heading emoji-tabs"> - <span class="emoji-tabs-item" v-for="(value, key) in emojis" :key="key" :title="value.text"> + <span class="emoji-tabs-item" :class="{'active': activeGroup === key}" v-for="(value, key) in emojis" :key="key" :title="value.text" @click.prevent="highlight(key)"> <i :class="value.icon"></i> </span> </div> @@ -13,9 +13,9 @@ <div class="emoji-search"> <input type="text" class="form-control" v-model="keyword" /> </div> - <div class="emoji-groups"> + <div class="emoji-groups" ref="emoji-groups" @scroll="scrolledGroup"> <div v-for="(value, key) in emojis" :key="key" class="emoji-group"> - <h6 class="emoji-group-title">{{value.text}}</h6> + <h6 class="emoji-group-title" :ref="'group-' + key">{{value.text}}</h6> <span v-for="emoji in value.emojis" :key="key + emoji.shortcode" @@ -78,7 +78,7 @@ &-item { padding: 0 5px; - &:first-child, &.active { + &.active { border-bottom: 4px solid; i { @@ -96,6 +96,7 @@ &-groups { flex: 1 1 1px; overflow: auto; + position: relative; } &-group { |