pinafore/routes/_components/status/StatusToolbar.html
Nolan Lawson bd0a0bf0be refactor
2018-03-16 00:01:03 -07:00

132 lines
4.4 KiB
HTML

<div class="status-toolbar {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
<IconButton
label="Reply"
href="#fa-reply"
disabled="{{disableReply}}"
delegateKey="{{replyKey}}"
/>
<IconButton
label="{{reblogLabel}}"
pressable="{{!reblogDisabled}}"
pressed="{{reblogged}}"
disabled="{{reblogDisabled}}"
href="{{reblogIcon}}"
delegateKey="{{reblogKey}}"
/>
<IconButton
label="Favorite"
pressable="true"
pressed="{{favorited}}"
href="#fa-star"
delegateKey="{{favoriteKey}}"
/>
<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 { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
import { setFavorited } from '../../_actions/favorite'
import { setReblogged } from '../../_actions/reblog'
import { goto } from 'sapper/runtime.js'
import { importDialogs } from '../../_utils/asyncModules'
import { updateProfileAndRelationship } from '../../_actions/accounts'
export default {
oncreate() {
registerClickDelegate(this.get('favoriteKey'), () => this.onFavoriteClick())
registerClickDelegate(this.get('reblogKey'), () => this.onReblogClick())
registerClickDelegate(this.get('replyKey'), () => this.onReplyClick())
registerClickDelegate(this.get('optionsKey'), () => this.onOptionsClick())
},
ondestroy() {
unregisterClickDelegate(this.get('favoriteKey'))
unregisterClickDelegate(this.get('reblogKey'))
unregisterClickDelegate(this.get('replyKey'))
unregisterClickDelegate(this.get('optionsKey'))
},
components: {
IconButton
},
store: () => store,
methods: {
onFavoriteClick() {
let originalStatusId = this.get('originalStatusId')
let favorited = this.get('favorited')
/* no await */ setFavorited(originalStatusId, !favorited)
},
onReblogClick() {
let originalStatusId = this.get('originalStatusId')
let reblogged = this.get('reblogged')
/* no await */ setReblogged(originalStatusId, !reblogged)
},
onReplyClick() {
let originalStatusId = this.get('originalStatusId')
goto(`/statuses/${originalStatusId}/reply`)
},
async onOptionsClick() {
let originalStatusId = this.get('originalStatusId')
let originalAccountId = this.get('originalAccountId')
let updateRelationshipPromise = updateProfileAndRelationship(originalAccountId)
let dialogs = await importDialogs()
await updateRelationshipPromise
dialogs.showStatusOptionsDialog(originalStatusId)
}
},
computed: {
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>