pinafore/routes/_components/status/StatusToolbar.html

137 lines
4.6 KiB
HTML
Raw Normal View History

<div class="status-toolbar {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
2018-01-28 20:51:48 +00:00
<IconButton
label="Reply"
href="#fa-reply"
2018-03-08 02:04:20 +00:00
disabled="{{disableReply}}"
delegateKey="{{replyKey}}"
2018-01-28 20:51:48 +00:00
/>
<IconButton
2018-02-25 02:20:33 +00:00
label="{{reblogLabel}}"
pressable="{{!reblogDisabled}}"
pressed="{{reblogged}}"
disabled="{{reblogDisabled}}"
href="{{reblogIcon}}"
delegateKey="{{reblogKey}}"
2018-01-28 20:51:48 +00:00
/>
<IconButton
label="Favorite"
pressable="true"
2018-02-24 02:23:36 +00:00
pressed="{{favorited}}"
2018-01-28 20:51:48 +00:00
href="#fa-star"
2018-02-24 22:49:28 +00:00
delegateKey="{{favoriteKey}}"
2018-03-12 02:40:32 +00:00
/>
2018-01-28 20:51:48 +00:00
<IconButton
2018-03-12 02:40:32 +00:00
label="Show more options"
2018-01-28 20:51:48 +00:00
href="#fa-ellipsis-h"
2018-03-12 02:40:32 +00:00
delegateKey="{{optionsKey}}"
2018-01-28 20:51:48 +00:00
/>
</div>
<style>
.status-toolbar {
2018-02-10 04:07:48 +00:00
grid-area: toolbar;
display: flex;
justify-content: space-between;
}
.status-toolbar.status-in-own-thread {
margin-left: 58px;
}
</style>
<script>
2018-01-28 20:51:48 +00:00
import IconButton from '../IconButton.html'
2018-02-24 02:23:36 +00:00
import { store } from '../../_store/store'
2018-02-25 00:12:25 +00:00
import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
2018-02-24 22:49:28 +00:00
import { setFavorited } from '../../_actions/favorite'
2018-02-25 02:20:33 +00:00
import { setReblogged } from '../../_actions/reblog'
2018-03-08 02:04:20 +00:00
import { goto } from 'sapper/runtime.js'
2018-03-12 02:40:32 +00:00
import { importDialogs } from '../../_utils/asyncModules'
import { updateProfileAndRelationship } from '../../_actions/accounts'
2018-01-28 20:51:48 +00:00
export default {
2018-02-24 22:49:28 +00:00
oncreate() {
2018-03-05 01:16:33 +00:00
registerClickDelegate(this.get('favoriteKey'), () => this.onFavoriteClick())
registerClickDelegate(this.get('reblogKey'), () => this.onReblogClick())
2018-03-08 02:04:20 +00:00
registerClickDelegate(this.get('replyKey'), () => this.onReplyClick())
2018-03-12 02:40:32 +00:00
registerClickDelegate(this.get('optionsKey'), () => this.onOptionsClick())
2018-02-24 22:49:28 +00:00
},
ondestroy() {
2018-02-25 02:20:33 +00:00
unregisterClickDelegate(this.get('favoriteKey'))
unregisterClickDelegate(this.get('reblogKey'))
2018-03-08 02:04:20 +00:00
unregisterClickDelegate(this.get('replyKey'))
2018-03-12 02:40:32 +00:00
unregisterClickDelegate(this.get('optionsKey'))
2018-02-24 22:49:28 +00:00
},
2018-01-28 20:51:48 +00:00
components: {
IconButton
2018-02-19 18:34:36 +00:00
},
2018-02-24 02:23:36 +00:00
store: () => store,
2018-02-24 22:49:28 +00:00
methods: {
onFavoriteClick() {
let statusId = this.get('statusId')
let favorited = this.get('favorited')
/* no await */ setFavorited(statusId, !favorited)
2018-02-25 02:20:33 +00:00
},
onReblogClick() {
let statusId = this.get('statusId')
let reblogged = this.get('reblogged')
/* no await */ setReblogged(statusId, !reblogged)
2018-03-08 02:04:20 +00:00
},
onReplyClick() {
let statusId = this.get('statusId')
goto(`/statuses/${statusId}/reply`)
2018-03-12 02:40:32 +00:00
},
async onOptionsClick() {
let statusId = this.get('statusId')
let accountId = this.get('accountId')
let updateRelationshipPromise = updateProfileAndRelationship(accountId)
let dialogs = await importDialogs()
await updateRelationshipPromise
dialogs.showStatusOptionsDialog(statusId)
2018-02-24 22:49:28 +00:00
}
},
2018-02-19 18:34:36 +00:00
computed: {
visibility: (status) => status.visibility,
2018-02-25 02:20:33 +00:00
reblogLabel: (visibility) => {
2018-02-19 18:34:36 +00:00
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'
}
},
2018-02-25 02:20:33 +00:00
reblogIcon: (visibility) => {
2018-02-19 18:34:36 +00:00
switch (visibility) {
case 'private':
return '#fa-lock'
case 'direct':
return '#fa-envelope'
default:
return '#fa-retweet'
}
},
2018-02-25 02:20:33 +00:00
reblogDisabled: (visibility) => {
2018-02-19 18:34:36 +00:00
return visibility === 'private' || visibility === 'direct'
2018-02-24 02:23:36 +00:00
},
2018-02-25 02:20:33 +00:00
reblogged: (status, $currentStatusModifications) => {
if ($currentStatusModifications && status.id in $currentStatusModifications.reblogs) {
return $currentStatusModifications.reblogs[status.id]
}
return status.reblogged
},
2018-02-24 02:23:36 +00:00
favorited: (status, $currentStatusModifications) => {
if ($currentStatusModifications && status.id in $currentStatusModifications.favorites) {
return $currentStatusModifications.favorites[status.id]
}
return status.favourited
2018-02-24 22:49:28 +00:00
},
statusId: (status) => status.id,
2018-03-12 02:40:32 +00:00
accountId: (status) => status.account.id,
2018-03-08 02:04:20 +00:00
disableReply: (statusId, timelineType, timelineValue) => timelineType === 'reply' && statusId === timelineValue,
2018-03-12 02:40:32 +00:00
keyPrefix: (timelineType, timelineValue, statusId) => `${timelineType}-${timelineValue}-${statusId}`,
favoriteKey: (keyPrefix) => `${keyPrefix}-fav`,
reblogKey: (keyPrefix) => `${keyPrefix}-reblog`,
replyKey: (keyPrefix) => `${keyPrefix}-reply`,
optionsKey: (keyPrefix) => `${keyPrefix}-options`,
2018-01-28 20:51:48 +00:00
}
}
</script>