115 lines
3.5 KiB
HTML
115 lines
3.5 KiB
HTML
<div class="status-toolbar {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
|
|
<IconButton
|
|
label="Reply"
|
|
href="#fa-reply"
|
|
/>
|
|
<IconButton
|
|
label="{{reblogLabel}}"
|
|
pressable="{{!reblogDisabled}}"
|
|
pressed="{{reblogged}}"
|
|
disabled="{{reblogDisabled}}"
|
|
href="{{reblogIcon}}"
|
|
delegateKey="{{reblogKey}}"
|
|
ref:reblogNode
|
|
/>
|
|
<IconButton
|
|
label="Favorite"
|
|
pressable="true"
|
|
pressed="{{favorited}}"
|
|
href="#fa-star"
|
|
delegateKey="{{favoriteKey}}"
|
|
ref:favoriteNode
|
|
/>
|
|
<IconButton
|
|
label="Show more actions"
|
|
href="#fa-ellipsis-h"
|
|
/>
|
|
</div>
|
|
<style>
|
|
.status-toolbar {
|
|
grid-area: toolbar;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.status-toolbar.status-in-own-thread {
|
|
margin-left: 58px;
|
|
}
|
|
</style>
|
|
<script>
|
|
import IconButton from '../IconButton.html'
|
|
import { store } from '../../_store/store'
|
|
import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
|
|
import { setFavorited } from '../../_actions/favorite'
|
|
import { setReblogged } from '../../_actions/reblog'
|
|
|
|
export default {
|
|
oncreate() {
|
|
this.onFavoriteClick = this.onFavoriteClick.bind(this)
|
|
this.onReblogClick = this.onReblogClick.bind(this)
|
|
|
|
registerClickDelegate(this.get('favoriteKey'), this.onFavoriteClick)
|
|
registerClickDelegate(this.get('reblogKey'), this.onReblogClick)
|
|
},
|
|
ondestroy() {
|
|
unregisterClickDelegate(this.get('favoriteKey'))
|
|
unregisterClickDelegate(this.get('reblogKey'))
|
|
},
|
|
components: {
|
|
IconButton
|
|
},
|
|
store: () => store,
|
|
methods: {
|
|
onFavoriteClick() {
|
|
let statusId = this.get('statusId')
|
|
let favorited = this.get('favorited')
|
|
/* no await */ setFavorited(statusId, !favorited)
|
|
},
|
|
onReblogClick() {
|
|
let statusId = this.get('statusId')
|
|
let reblogged = this.get('reblogged')
|
|
/* no await */ setReblogged(statusId, !reblogged)
|
|
}
|
|
},
|
|
computed: {
|
|
visibility: (status) => status.visibility,
|
|
reblogLabel: (visibility) => {
|
|
switch (visibility) {
|
|
case 'private':
|
|
return 'Cannot be boosted because this is followers-only'
|
|
case 'direct':
|
|
return 'Cannot be boosted because this is a direct message'
|
|
default:
|
|
return 'Boost'
|
|
}
|
|
},
|
|
reblogIcon: (visibility) => {
|
|
switch (visibility) {
|
|
case 'private':
|
|
return '#fa-lock'
|
|
case 'direct':
|
|
return '#fa-envelope'
|
|
default:
|
|
return '#fa-retweet'
|
|
}
|
|
},
|
|
reblogDisabled: (visibility) => {
|
|
return visibility === 'private' || visibility === 'direct'
|
|
},
|
|
reblogged: (status, $currentStatusModifications) => {
|
|
if ($currentStatusModifications && status.id in $currentStatusModifications.reblogs) {
|
|
return $currentStatusModifications.reblogs[status.id]
|
|
}
|
|
return status.reblogged
|
|
},
|
|
favorited: (status, $currentStatusModifications) => {
|
|
if ($currentStatusModifications && status.id in $currentStatusModifications.favorites) {
|
|
return $currentStatusModifications.favorites[status.id]
|
|
}
|
|
return status.favourited
|
|
},
|
|
statusId: (status) => status.id,
|
|
favoriteKey: (statusId, timelineType, timelineValue) => `fav-${timelineType}-${timelineValue}-${statusId}`,
|
|
reblogKey: (statusId, timelineType, timelineValue) => `reblog-${timelineType}-${timelineValue}-${statusId}`,
|
|
}
|
|
}
|
|
</script> |