98 lines
2.8 KiB
HTML
98 lines
2.8 KiB
HTML
<div class="account-profile-follow {{shown ? 'shown' : ''}}">
|
|
<IconButton
|
|
label={{followLabel}}
|
|
href={{followIcon}}
|
|
pressable="true"
|
|
pressed={{following}}
|
|
big="true"
|
|
on:click="onFollowButtonClick(event)"
|
|
ref:icon
|
|
/>
|
|
</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,
|
|
accountId,
|
|
following,
|
|
followRequested,
|
|
blocking
|
|
} = this.get()
|
|
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})
|
|
}
|
|
if (newFollowingValue) {
|
|
this.refs.icon.animate(FOLLOW_BUTTON_ANIMATION)
|
|
}
|
|
await setAccountFollowed(accountId, newFollowingValue)
|
|
}
|
|
}
|
|
},
|
|
store: () => store,
|
|
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> |