<div class="status-toolbar {isStatusInOwnThread ? 'status-in-own-thread' : ''}" ref:node> <IconButton className="status-toolbar-reply-button" label={replyLabel} pressable="true" pressed={replyShown} href={replyIcon} 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: 63px; /* offset to align all toolbar items: 48px avatar + 15px margin-right */ } @media (max-width: 767px) { .status-toolbar.status-in-own-thread { margin-left: 53px; /* offset to align all toolbar items: 48px avatar + 5px margin-right */ } } </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, inReplyToId }) => ( replyShown ? 'Close reply' : inReplyToId ? 'Reply to thread' : 'Reply' ), replyIcon: ({ inReplyToId }) => inReplyToId ? '#fa-reply-all' : '#fa-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>