Scroll active tab header into view in emoji picker
This commit is contained in:
parent
d9e428ebab
commit
38861fc6cc
@ -87,8 +87,26 @@ const EmojiPicker = {
|
|||||||
this.activeGroup = group.id
|
this.activeGroup = group.id
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
this.scrollHeader()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
scrollHeader () {
|
||||||
|
// Scroll the active tab's header into view
|
||||||
|
const headerRef = this.$refs['group-header-' + this.activeGroup][0]
|
||||||
|
const left = headerRef.offsetLeft
|
||||||
|
const right = left + headerRef.offsetWidth
|
||||||
|
const headerCont = this.$refs.header
|
||||||
|
const currentScroll = headerCont.scrollLeft
|
||||||
|
const currentScrollRight = currentScroll + headerCont.clientWidth
|
||||||
|
const setScroll = s => { headerCont.scrollLeft = s }
|
||||||
|
|
||||||
|
const margin = 7 // .emoji-tabs-item: padding
|
||||||
|
if (left - margin < currentScroll) {
|
||||||
|
setScroll(left - margin)
|
||||||
|
} else if (right + margin > currentScrollRight) {
|
||||||
|
setScroll(right + margin - headerCont.clientWidth)
|
||||||
|
}
|
||||||
|
},
|
||||||
highlight (key) {
|
highlight (key) {
|
||||||
const ref = this.$refs['group-' + key]
|
const ref = this.$refs['group-' + key]
|
||||||
const top = ref.offsetTop
|
const top = ref.offsetTop
|
||||||
|
@ -3,9 +3,13 @@
|
|||||||
class="emoji-picker panel panel-default panel-body"
|
class="emoji-picker panel panel-default panel-body"
|
||||||
>
|
>
|
||||||
<div class="heading">
|
<div class="heading">
|
||||||
<span class="emoji-tabs">
|
<span
|
||||||
|
ref="header"
|
||||||
|
class="emoji-tabs"
|
||||||
|
>
|
||||||
<span
|
<span
|
||||||
v-for="group in filteredEmojiGroups"
|
v-for="group in filteredEmojiGroups"
|
||||||
|
:ref="'group-header-' + group.id"
|
||||||
:key="group.id"
|
:key="group.id"
|
||||||
class="emoji-tabs-item"
|
class="emoji-tabs-item"
|
||||||
:class="{
|
:class="{
|
||||||
|
Loading…
Reference in New Issue
Block a user