99 lines
3.1 KiB
HTML
99 lines
3.1 KiB
HTML
<div class="account-profile-follow {{shown ? 'shown' : ''}}">
|
|
<IconButton
|
|
label="{{followLabel}}"
|
|
href="{{followIcon}}"
|
|
pressable="true"
|
|
pressed="{{following}}"
|
|
big="true"
|
|
on:click="onFollowButtonClick(event)"
|
|
animation="{{animateFollowButton && followButtonAnimation}}"
|
|
/>
|
|
</div>
|
|
<style>
|
|
.account-profile-follow {
|
|
grid-area: follow;
|
|
align-self: flex-start;
|
|
display: none;
|
|
}
|
|
.account-profile-follow.shown {
|
|
display: block;
|
|
}
|
|
</style>
|
|
<script>
|
|
import IconButton from '../IconButton.html'
|
|
import { FOLLOW_BUTTON_ANIMATION } from '../../_static/animations'
|
|
import { store } from '../../_store/store'
|
|
import { setAccountFollowed } from '../../_actions/follow'
|
|
import { setAccountBlocked } from '../../_actions/block'
|
|
|
|
export default {
|
|
methods: {
|
|
async onFollowButtonClick(e) {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
let account = this.get('account')
|
|
let accountId = this.get('accountId')
|
|
let following = this.get('following')
|
|
let followRequested = this.get('followRequested')
|
|
let blocking = this.get('blocking')
|
|
this.set({animateFollowButton: true}) // TODO: this should be an event, not toggling a boolean
|
|
if (blocking) { // unblock
|
|
await setAccountBlocked(accountId, false)
|
|
} else { // follow/unfollow
|
|
let newFollowingValue = !(following || followRequested)
|
|
if (!account.locked) { // be optimistic, show the user that it succeeded
|
|
this.set({overrideFollowing: newFollowingValue})
|
|
}
|
|
await setAccountFollowed(accountId, newFollowingValue)
|
|
}
|
|
|
|
this.set({animateFollowButton: false}) // let animation play next time
|
|
}
|
|
},
|
|
store: () => store,
|
|
data: () => ({
|
|
followButtonAnimation: FOLLOW_BUTTON_ANIMATION
|
|
}),
|
|
computed: {
|
|
accountId: (account) => account.id,
|
|
following: (relationship, overrideFollowing) => {
|
|
if (typeof overrideFollowing === 'boolean') {
|
|
return overrideFollowing
|
|
}
|
|
return relationship && relationship.following
|
|
},
|
|
blocking: (relationship) => relationship && relationship.blocking,
|
|
followRequested: (relationship, account) => {
|
|
return relationship && relationship.requested && account && account.locked
|
|
},
|
|
followLabel: (blocking, following, followRequested) => {
|
|
if (blocking) {
|
|
return 'Unblock'
|
|
} else if (following) {
|
|
return 'Unfollow'
|
|
} else if (followRequested) {
|
|
return 'Unfollow (follow requested)'
|
|
} else {
|
|
return 'Follow'
|
|
}
|
|
},
|
|
followIcon: (blocking, following, followRequested) => {
|
|
if (blocking) {
|
|
return '#fa-unlock'
|
|
} else if (following) {
|
|
return '#fa-user-times'
|
|
} else if (followRequested) {
|
|
return '#fa-hourglass'
|
|
} else {
|
|
return '#fa-user-plus'
|
|
}
|
|
},
|
|
shown: (verifyCredentials, relationship) => {
|
|
return verifyCredentials && relationship && verifyCredentials.id !== relationship.id
|
|
}
|
|
},
|
|
components: {
|
|
IconButton
|
|
}
|
|
}
|
|
</script> |