pinafore/routes/_components/status/StatusToolbar.html

178 lines
5.6 KiB
HTML

<div class="status-toolbar {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}" ref:node>
<IconButton
className="status-toolbar-reply-button"
label={{replyLabel}}
pressable="true"
pressed={{replyShown}}
href="#fa-reply"
delegateKey={{replyKey}}
focusKey={{replyKey}}
/>
<IconButton
label={{reblogLabel}}
pressable={{!reblogDisabled}}
pressed={{reblogged}}
disabled={{reblogDisabled}}
href={{reblogIcon}}
delegateKey={{reblogKey}}
ref:reblogIcon
/>
<IconButton
label="Favorite"
pressable="true"
pressed={{favorited}}
href="#fa-star"
delegateKey={{favoriteKey}}
ref:favoriteIcon
/>
<IconButton
label="Show more options"
href="#fa-ellipsis-h"
delegateKey={{optionsKey}}
/>
</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 { registerClickDelegates } from '../../_utils/delegate'
import { setFavorited } from '../../_actions/favorite'
import { setReblogged } from '../../_actions/reblog'
import { importShowStatusOptionsDialog } from '../dialog/asyncDialogs'
import { updateProfileAndRelationship } from '../../_actions/accounts'
import { FAVORITE_ANIMATION, REBLOG_ANIMATION } from '../../_static/animations'
import { on } from '../../_utils/eventBus'
export default {
oncreate () {
let {
favoriteKey,
reblogKey,
replyKey,
optionsKey
} = this.get()
registerClickDelegates(this, {
[favoriteKey]: (e) => this.onFavoriteClick(e),
[reblogKey]: (e) => this.onReblogClick(e),
[replyKey]: (e) => this.onReplyClick(e),
[optionsKey]: (e) => this.onOptionsClick(e)
})
on('postedStatus', this, this.onPostedStatus)
},
components: {
IconButton
},
store: () => store,
methods: {
onFavoriteClick (e) {
e.preventDefault()
e.stopPropagation()
let { originalStatusId, favorited } = this.get()
let newFavoritedValue = !favorited
/* no await */ setFavorited(originalStatusId, newFavoritedValue)
if (newFavoritedValue) {
this.refs.favoriteIcon.animate(FAVORITE_ANIMATION)
}
},
onReblogClick (e) {
e.preventDefault()
e.stopPropagation()
let { originalStatusId, reblogged } = this.get()
let newRebloggedValue = !reblogged
/* no await */ setReblogged(originalStatusId, newRebloggedValue)
if (newRebloggedValue) {
this.refs.reblogIcon.animate(REBLOG_ANIMATION)
}
},
onReplyClick (e) {
e.preventDefault()
e.stopPropagation()
requestAnimationFrame(() => {
let { uuid } = this.get()
let { repliesShown } = this.store.get()
repliesShown[uuid] = !repliesShown[uuid]
this.store.set({repliesShown})
this.fire('recalculateHeight')
})
},
async onOptionsClick (e) {
e.preventDefault()
e.stopPropagation()
let { originalStatus, originalAccountId } = this.get()
let updateRelationshipPromise = updateProfileAndRelationship(originalAccountId)
let showStatusOptionsDialog = await importShowStatusOptionsDialog()
await updateRelationshipPromise
showStatusOptionsDialog(originalStatus)
},
onPostedStatus (realm, inReplyToUuid) {
let {
originalStatusId,
uuid
} = this.get()
if (realm !== originalStatusId ||
inReplyToUuid !== uuid) {
return
}
try {
// return status to the reply button after posting a reply
this.refs.node.querySelector('.status-toolbar-reply-button').focus()
} catch (e) { /* ignore */ }
}
},
data: () => ({
favoriteAnimation: FAVORITE_ANIMATION,
reblogAnimation: REBLOG_ANIMATION
}),
computed: {
replyLabel: (replyShown) => replyShown ? 'Close reply' : 'Reply',
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: (originalStatusId, $currentStatusModifications, originalStatus) => {
if ($currentStatusModifications && originalStatusId in $currentStatusModifications.reblogs) {
return $currentStatusModifications.reblogs[originalStatusId]
}
return originalStatus.reblogged
},
favorited: (originalStatusId, $currentStatusModifications, originalStatus) => {
if ($currentStatusModifications && originalStatusId in $currentStatusModifications.favorites) {
return $currentStatusModifications.favorites[originalStatusId]
}
return originalStatus.favourited
},
favoriteKey: (uuid) => `fav-${uuid}`,
reblogKey: (uuid) => `reblog-${uuid}`,
replyKey: (uuid) => `reply-${uuid}`,
optionsKey: (uuid) => `options-${uuid}`
}
}
</script>