change how status content user popovers work, switching doesnt work right now
This commit is contained in:
parent
7cf6fc32c0
commit
e785fbb3c3
|
@ -23,7 +23,9 @@ const Popover = {
|
|||
// Additional styles you may want for the popover container
|
||||
popoverClass: String,
|
||||
// Time in milliseconds until the popup appears, default is 100ms
|
||||
delay: Number
|
||||
delay: Number,
|
||||
// If disabled, don't show popover even when trigger conditions met
|
||||
disabled: Boolean
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
@ -38,6 +40,13 @@ const Popover = {
|
|||
return this.$store.state.interface.mobileLayout
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
disabled (newValue, oldValue) {
|
||||
if (newValue === true) {
|
||||
this.hidePopover()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
containerBoundingClientRect () {
|
||||
const container = this.boundToSelector ? this.$el.closest(this.boundToSelector) : this.$el.offsetParent
|
||||
|
@ -127,12 +136,19 @@ const Popover = {
|
|||
}
|
||||
},
|
||||
showPopover () {
|
||||
if (this.hidden) this.$emit('show')
|
||||
if (this.disabled) return
|
||||
if (this.hidden) {
|
||||
this.$emit('show')
|
||||
document.addEventListener('click', this.onClickOutside, true)
|
||||
}
|
||||
this.hidden = false
|
||||
this.$nextTick(this.updateStyles)
|
||||
},
|
||||
hidePopover () {
|
||||
if (!this.hidden) this.$emit('close')
|
||||
if (!this.hidden) {
|
||||
this.$emit('close')
|
||||
document.removeEventListener('click', this.onClickOutside, true)
|
||||
}
|
||||
if (this.timeout) {
|
||||
clearTimeout(this.timeout)
|
||||
this.timeout = null
|
||||
|
@ -158,8 +174,7 @@ const Popover = {
|
|||
} else {
|
||||
this.hidePopover()
|
||||
}
|
||||
} else if (this.trigger === 'hover' && this.isMobileLayout) {
|
||||
console.log(this.isMobileLayout)
|
||||
} else if ((this.trigger === 'hover') && this.isMobileLayout) {
|
||||
// This is to enable using hover stuff with mobile:
|
||||
// on first touch it opens the popover, when touching the trigger
|
||||
// again it will do the click action. Can't use touch events as
|
||||
|
@ -169,11 +184,11 @@ const Popover = {
|
|||
this.$emit('enter')
|
||||
this.showPopover()
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
}
|
||||
}
|
||||
},
|
||||
onClickOutside (e) {
|
||||
console.log('onClickOutside')
|
||||
if (this.hidden) return
|
||||
if (this.$el.contains(e.target)) return
|
||||
this.hidePopover()
|
||||
|
@ -192,11 +207,7 @@ const Popover = {
|
|||
this.oldSize = { width: content.offsetWidth, height: content.offsetHeight }
|
||||
}
|
||||
},
|
||||
created () {
|
||||
document.addEventListener('click', this.onClickOutside)
|
||||
},
|
||||
destroyed () {
|
||||
document.removeEventListener('click', this.onClickOutside)
|
||||
this.hidePopover()
|
||||
}
|
||||
}
|
||||
|
|
|
@ -153,6 +153,17 @@ const StatusContent = {
|
|||
})
|
||||
},
|
||||
methods: {
|
||||
setUserPopoverTarget (event, target, attn) {
|
||||
// event.stopPropagation()
|
||||
// event.preventDefault()
|
||||
this.focusedUserId = attn.id
|
||||
// Give the popover an offset to place it over the hovered element
|
||||
const containerWidth = this.$refs.userPopover.$el.offsetWidth
|
||||
const elementWidth = target.offsetWidth
|
||||
const x = -containerWidth / 2 + target.offsetLeft + elementWidth / 2
|
||||
const y = target.offsetTop
|
||||
this.userPopoverOffset = { x, y, h: target.offsetHeight }
|
||||
},
|
||||
linkClicked (event) {
|
||||
const target = event.target.closest('.status-content a')
|
||||
if (target) {
|
||||
|
@ -160,8 +171,10 @@ const StatusContent = {
|
|||
const href = target.href
|
||||
const attn = this.status.attentions.find(attn => mentionMatchesUrl(attn, href))
|
||||
if (attn) {
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
if (this.$store.state.interface.mobileLayout) {
|
||||
this.setUserPopoverTarget(event, target, attn)
|
||||
return
|
||||
}
|
||||
const link = this.generateUserProfileLink(attn.id, attn.screen_name)
|
||||
this.$router.push(link)
|
||||
return
|
||||
|
@ -177,29 +190,23 @@ const StatusContent = {
|
|||
}
|
||||
}
|
||||
window.open(target.href, '_blank')
|
||||
event.preventDefault()
|
||||
}
|
||||
},
|
||||
linkHover (event) {
|
||||
const target = event.target.closest('.status-content a')
|
||||
this.focusedUserId = null
|
||||
console.log('hover first')
|
||||
if (target) {
|
||||
if (target.className.match(/mention/)) {
|
||||
const href = target.href
|
||||
const attn = this.status.attentions.find(attn => mentionMatchesUrl(attn, href))
|
||||
if (attn) {
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
this.focusedUserId = attn.id
|
||||
// Give the popover an offset to place it over the hovered element
|
||||
const containerWidth = this.$refs.userPopover.$el.offsetWidth
|
||||
const elementWidth = target.offsetWidth
|
||||
const x = -containerWidth / 2 + target.offsetLeft + elementWidth / 2
|
||||
const y = target.offsetTop
|
||||
this.userPopoverOffset = { x, y, h: target.offsetHeight }
|
||||
this.setUserPopoverTarget(event, target, attn)
|
||||
}
|
||||
}
|
||||
}
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
},
|
||||
toggleShowMore () {
|
||||
if (this.mightHideBecauseTall) {
|
||||
|
|
|
@ -51,7 +51,7 @@
|
|||
v-if="!hideSubjectStatus"
|
||||
:class="{ 'single-line': singleLine }"
|
||||
class="status-content media-body"
|
||||
@click="linkClicked"
|
||||
@click.prevent="linkClicked"
|
||||
@mouseover="linkHover"
|
||||
v-html="postBodyHtml"
|
||||
/>
|
||||
|
|
|
@ -24,7 +24,10 @@ export default {
|
|||
}
|
||||
},
|
||||
created () {
|
||||
this.$store.dispatch('fetchUserRelationship', this.user.id)
|
||||
const relationship = this.$store.getters.relationship(this.userId)
|
||||
if (!(relationship && !relationship.loading)) {
|
||||
this.$store.dispatch('fetchUserRelationship', this.user.id)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
user () {
|
||||
|
|
|
@ -7,7 +7,8 @@ const UserPopover = {
|
|||
],
|
||||
data () {
|
||||
return {
|
||||
error: false
|
||||
error: false,
|
||||
fetching: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
@ -26,15 +27,20 @@ const UserPopover = {
|
|||
methods: {
|
||||
enter () {
|
||||
if (!this.userId) return
|
||||
if (this.fetching) return
|
||||
const promises = []
|
||||
if (!this.user) {
|
||||
this.$store.dispatch('fetchUser', this.userId)
|
||||
.then(data => (this.error = false))
|
||||
.catch(e => (this.error = true))
|
||||
promises.push(this.$store.dispatch('fetchUser', this.userId))
|
||||
}
|
||||
if (!this.relationship) {
|
||||
this.$store.dispatch('fetchUserRelationship', this.userId)
|
||||
if (!this.relationshipAvailable) {
|
||||
promises.push(this.$store.dispatch('fetchUserRelationship', this.userId))
|
||||
}
|
||||
if (promises.length > 0) {
|
||||
this.fetching = true
|
||||
Promise.all(promises)
|
||||
.then(data => (this.error = false))
|
||||
.catch(e => (this.error = true))
|
||||
.finally(() => (this.fetching = false))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<Popover
|
||||
v-if="userId"
|
||||
class="user-popover-container"
|
||||
trigger="hover"
|
||||
popover-class="user-popover"
|
||||
|
@ -8,6 +7,7 @@
|
|||
:margin="{ left: 5, right: 5 }"
|
||||
:delay="200"
|
||||
:anchor-offset="anchorOffset"
|
||||
:disabled="!userId"
|
||||
@enter="enter"
|
||||
>
|
||||
<template slot="trigger">
|
||||
|
@ -37,12 +37,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</Popover>
|
||||
<div
|
||||
v-else
|
||||
class="user-popover-container"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./user_popover.js" ></script>
|
||||
|
|
Loading…
Reference in New Issue