<div class="status-toolbar {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}"> <IconButton 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}}" animation="{{animateReblog && reblogAnimation}}" /> <IconButton label="Favorite" pressable="true" pressed="{{favorited}}" href="#fa-star" delegateKey="{{favoriteKey}}" animation="{{animateFavorite && favoriteAnimation}}" /> <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 { importDialogs } from '../../_utils/asyncModules' import { updateProfileAndRelationship } from '../../_actions/accounts' import { FAVORITE_ANIMATION, REBLOG_ANIMATION } from '../../_static/animations' export default { oncreate() { 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)) }, ondestroy() { unregisterClickDelegate(this.get('favoriteKey')) unregisterClickDelegate(this.get('reblogKey')) unregisterClickDelegate(this.get('replyKey')) unregisterClickDelegate(this.get('optionsKey')) }, components: { IconButton }, store: () => store, methods: { onFavoriteClick(e) { e.preventDefault() e.stopPropagation() let originalStatusId = this.get('originalStatusId') let favorited = this.get('favorited') /* no await */ setFavorited(originalStatusId, !favorited) this.set({animateFavorite: !favorited}) }, onReblogClick(e) { e.preventDefault() e.stopPropagation() let originalStatusId = this.get('originalStatusId') let reblogged = this.get('reblogged') /* no await */ setReblogged(originalStatusId, !reblogged) this.set({animateReblog: !reblogged}) }, 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') }) }, async onOptionsClick(e) { e.preventDefault() e.stopPropagation() let originalStatusId = this.get('originalStatusId') let originalAccountId = this.get('originalAccountId') let updateRelationshipPromise = updateProfileAndRelationship(originalAccountId) let dialogs = await importDialogs() await updateRelationshipPromise dialogs.showStatusOptionsDialog(originalStatusId) } }, 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>