pinafore/routes/_components/status/StatusToolbar.html

169 lines
5.8 KiB
HTML
Raw Normal View History

<div class="status-toolbar {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}" ref:node>
2018-01-28 21:51:48 +01:00
<IconButton
className="status-toolbar-reply-button"
2018-03-30 10:06:17 +02:00
label="{{replyLabel}}"
pressable="true"
pressed="{{replyShown}}"
2018-01-28 21:51:48 +01:00
href="#fa-reply"
2018-03-08 03:04:20 +01:00
delegateKey="{{replyKey}}"
2018-03-17 03:04:48 +01:00
focusKey="{{replyKey}}"
2018-01-28 21:51:48 +01:00
/>
<IconButton
2018-02-25 03:20:33 +01:00
label="{{reblogLabel}}"
pressable="{{!reblogDisabled}}"
pressed="{{reblogged}}"
disabled="{{reblogDisabled}}"
href="{{reblogIcon}}"
delegateKey="{{reblogKey}}"
2018-03-21 17:38:20 +01:00
animation="{{animateReblog && reblogAnimation}}"
2018-01-28 21:51:48 +01:00
/>
<IconButton
label="Favorite"
pressable="true"
2018-02-24 03:23:36 +01:00
pressed="{{favorited}}"
2018-01-28 21:51:48 +01:00
href="#fa-star"
2018-02-24 23:49:28 +01:00
delegateKey="{{favoriteKey}}"
2018-03-21 17:38:20 +01:00
animation="{{animateFavorite && favoriteAnimation}}"
2018-03-12 03:40:32 +01:00
/>
2018-01-28 21:51:48 +01:00
<IconButton
2018-03-12 03:40:32 +01:00
label="Show more options"
2018-01-28 21:51:48 +01:00
href="#fa-ellipsis-h"
2018-03-12 03:40:32 +01:00
delegateKey="{{optionsKey}}"
2018-01-28 21:51:48 +01:00
/>
</div>
<style>
.status-toolbar {
2018-02-10 05:07:48 +01:00
grid-area: toolbar;
display: flex;
justify-content: space-between;
}
.status-toolbar.status-in-own-thread {
margin-left: 58px;
}
</style>
<script>
2018-01-28 21:51:48 +01:00
import IconButton from '../IconButton.html'
2018-02-24 03:23:36 +01:00
import { store } from '../../_store/store'
2018-02-25 01:12:25 +01:00
import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
2018-02-24 23:49:28 +01:00
import { setFavorited } from '../../_actions/favorite'
2018-02-25 03:20:33 +01:00
import { setReblogged } from '../../_actions/reblog'
2018-03-12 03:40:32 +01:00
import { importDialogs } from '../../_utils/asyncModules'
import { updateProfileAndRelationship } from '../../_actions/accounts'
2018-03-21 17:38:20 +01:00
import { FAVORITE_ANIMATION, REBLOG_ANIMATION } from '../../_static/animations'
import { on } from '../../_utils/eventBus'
2018-01-28 21:51:48 +01:00
export default {
2018-02-24 23:49:28 +01:00
oncreate() {
2018-03-30 10:06:17 +02:00
registerClickDelegate(this.get('favoriteKey'), (e) => this.onFavoriteClick(e))
registerClickDelegate(this.get('reblogKey'), (e) => this.onReblogClick(e))
registerClickDelegate(this.get('replyKey'), (e) => this.onReplyClick(e))
registerClickDelegate(this.get('optionsKey'), (e) => this.onOptionsClick(e))
on('postedStatus', this, this.onPostedStatus)
2018-02-24 23:49:28 +01:00
},
ondestroy() {
2018-02-25 03:20:33 +01:00
unregisterClickDelegate(this.get('favoriteKey'))
unregisterClickDelegate(this.get('reblogKey'))
2018-03-08 03:04:20 +01:00
unregisterClickDelegate(this.get('replyKey'))
2018-03-12 03:40:32 +01:00
unregisterClickDelegate(this.get('optionsKey'))
2018-02-24 23:49:28 +01:00
},
2018-01-28 21:51:48 +01:00
components: {
IconButton
2018-02-19 19:34:36 +01:00
},
2018-02-24 03:23:36 +01:00
store: () => store,
2018-02-24 23:49:28 +01:00
methods: {
2018-03-30 10:06:17 +02:00
onFavoriteClick(e) {
e.preventDefault()
e.stopPropagation()
let originalStatusId = this.get('originalStatusId')
2018-02-24 23:49:28 +01:00
let favorited = this.get('favorited')
/* no await */ setFavorited(originalStatusId, !favorited)
2018-03-21 17:38:20 +01:00
this.set({animateFavorite: !favorited})
2018-02-25 03:20:33 +01:00
},
2018-03-30 10:06:17 +02:00
onReblogClick(e) {
e.preventDefault()
e.stopPropagation()
let originalStatusId = this.get('originalStatusId')
2018-02-25 03:20:33 +01:00
let reblogged = this.get('reblogged')
/* no await */ setReblogged(originalStatusId, !reblogged)
2018-03-21 17:38:20 +01:00
this.set({animateReblog: !reblogged})
2018-03-08 03:04:20 +01:00
},
2018-03-30 10:06:17 +02:00
onReplyClick(e) {
e.preventDefault()
e.stopPropagation()
requestAnimationFrame(() => {
let uuid = this.get('uuid')
let $repliesShown = this.store.get('repliesShown')
$repliesShown[uuid] = !$repliesShown[uuid]
this.store.set({'repliesShown': $repliesShown})
this.fire('recalculateHeight')
})
2018-03-12 03:40:32 +01:00
},
2018-03-30 10:06:17 +02:00
async onOptionsClick(e) {
e.preventDefault()
e.stopPropagation()
let originalStatusId = this.get('originalStatusId')
let originalAccountId = this.get('originalAccountId')
let updateRelationshipPromise = updateProfileAndRelationship(originalAccountId)
2018-03-12 03:40:32 +01:00
let dialogs = await importDialogs()
await updateRelationshipPromise
dialogs.showStatusOptionsDialog(originalStatusId)
},
onPostedStatus(realm, inReplyToUuid) {
if (realm !== this.get('originalStatusId') ||
inReplyToUuid !== this.get('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 */ }
2018-02-24 23:49:28 +01:00
}
},
2018-03-21 17:38:20 +01:00
data: () => ({
favoriteAnimation: FAVORITE_ANIMATION,
reblogAnimation: REBLOG_ANIMATION
}),
2018-02-19 19:34:36 +01:00
computed: {
2018-03-30 10:06:17 +02:00
replyLabel: (replyShown) => replyShown ? 'Close reply' : 'Reply',
2018-02-25 03:20:33 +01:00
reblogLabel: (visibility) => {
2018-02-19 19:34:36 +01: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 03:20:33 +01:00
reblogIcon: (visibility) => {
2018-02-19 19:34:36 +01:00
switch (visibility) {
case 'private':
return '#fa-lock'
case 'direct':
return '#fa-envelope'
default:
return '#fa-retweet'
}
},
2018-02-25 03:20:33 +01:00
reblogDisabled: (visibility) => {
2018-02-19 19:34:36 +01:00
return visibility === 'private' || visibility === 'direct'
2018-02-24 03:23:36 +01:00
},
reblogged: (originalStatusId, $currentStatusModifications, originalStatus) => {
if ($currentStatusModifications && originalStatusId in $currentStatusModifications.reblogs) {
return $currentStatusModifications.reblogs[originalStatusId]
2018-02-25 03:20:33 +01:00
}
return originalStatus.reblogged
2018-02-25 03:20:33 +01:00
},
favorited: (originalStatusId, $currentStatusModifications, originalStatus) => {
if ($currentStatusModifications && originalStatusId in $currentStatusModifications.favorites) {
return $currentStatusModifications.favorites[originalStatusId]
2018-02-24 03:23:36 +01:00
}
return originalStatus.favourited
2018-02-24 23:49:28 +01:00
},
favoriteKey: (uuid) => `fav-${uuid}`,
reblogKey: (uuid) => `reblog-${uuid}`,
replyKey: (uuid) => `reply-${uuid}`,
optionsKey: (uuid) => `options-${uuid}`,
2018-01-28 21:51:48 +01:00
}
}
</script>