2018-04-13 04:18:14 +00:00
|
|
|
<div class="status-toolbar {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}" ref:node>
|
2018-01-28 20:51:48 +00:00
|
|
|
<IconButton
|
2018-04-13 04:18:14 +00:00
|
|
|
className="status-toolbar-reply-button"
|
2018-03-30 08:06:17 +00:00
|
|
|
label="{{replyLabel}}"
|
|
|
|
pressable="true"
|
|
|
|
pressed="{{replyShown}}"
|
2018-01-28 20:51:48 +00:00
|
|
|
href="#fa-reply"
|
2018-03-08 02:04:20 +00:00
|
|
|
delegateKey="{{replyKey}}"
|
2018-03-17 02:04:48 +00:00
|
|
|
focusKey="{{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-04-21 15:32:40 +00:00
|
|
|
ref:reblogIcon
|
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-04-21 15:32:40 +00:00
|
|
|
ref:favoriteIcon
|
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
|
|
|
/>
|
2018-01-21 05:42:46 +00:00
|
|
|
</div>
|
|
|
|
<style>
|
|
|
|
.status-toolbar {
|
2018-02-10 04:07:48 +00:00
|
|
|
grid-area: toolbar;
|
2018-01-21 05:42:46 +00:00
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
}
|
2018-02-10 06:55:11 +00:00
|
|
|
.status-toolbar.status-in-own-thread {
|
|
|
|
margin-left: 58px;
|
|
|
|
}
|
2018-01-21 05:42:46 +00:00
|
|
|
</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-04-18 04:47:30 +00:00
|
|
|
import { registerClickDelegates } 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-04-21 16:56:53 +00:00
|
|
|
import { importShowStatusOptionsDialog } from '../dialog/asyncDialogs'
|
2018-03-12 02:40:32 +00:00
|
|
|
import { updateProfileAndRelationship } from '../../_actions/accounts'
|
2018-03-21 16:38:20 +00:00
|
|
|
import { FAVORITE_ANIMATION, REBLOG_ANIMATION } from '../../_static/animations'
|
2018-04-13 04:18:14 +00:00
|
|
|
import { on } from '../../_utils/eventBus'
|
2018-01-28 20:51:48 +00:00
|
|
|
|
2018-01-21 05:42:46 +00:00
|
|
|
export default {
|
2018-04-20 04:38:01 +00:00
|
|
|
oncreate () {
|
2018-04-19 16:37:05 +00:00
|
|
|
let {
|
|
|
|
favoriteKey,
|
|
|
|
reblogKey,
|
|
|
|
replyKey,
|
|
|
|
optionsKey
|
|
|
|
} = this.get()
|
2018-04-18 04:47:30 +00:00
|
|
|
registerClickDelegates(this, {
|
2018-04-19 16:37:05 +00:00
|
|
|
[favoriteKey]: (e) => this.onFavoriteClick(e),
|
|
|
|
[reblogKey]: (e) => this.onReblogClick(e),
|
|
|
|
[replyKey]: (e) => this.onReplyClick(e),
|
|
|
|
[optionsKey]: (e) => this.onOptionsClick(e)
|
2018-04-18 04:47:30 +00:00
|
|
|
})
|
2018-04-13 04:18:14 +00:00
|
|
|
on('postedStatus', this, this.onPostedStatus)
|
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: {
|
2018-04-20 04:38:01 +00:00
|
|
|
onFavoriteClick (e) {
|
2018-03-30 08:06:17 +00:00
|
|
|
e.preventDefault()
|
|
|
|
e.stopPropagation()
|
2018-04-19 16:37:05 +00:00
|
|
|
let { originalStatusId, favorited } = this.get()
|
2018-04-21 15:32:40 +00:00
|
|
|
let newFavoritedValue = !favorited
|
|
|
|
/* no await */ setFavorited(originalStatusId, newFavoritedValue)
|
|
|
|
if (newFavoritedValue) {
|
|
|
|
this.refs.favoriteIcon.animate(FAVORITE_ANIMATION)
|
|
|
|
}
|
2018-02-25 02:20:33 +00:00
|
|
|
},
|
2018-04-20 04:38:01 +00:00
|
|
|
onReblogClick (e) {
|
2018-03-30 08:06:17 +00:00
|
|
|
e.preventDefault()
|
|
|
|
e.stopPropagation()
|
2018-04-19 16:37:05 +00:00
|
|
|
let { originalStatusId, reblogged } = this.get()
|
2018-04-21 15:32:40 +00:00
|
|
|
let newRebloggedValue = !reblogged
|
|
|
|
/* no await */ setReblogged(originalStatusId, newRebloggedValue)
|
|
|
|
if (newRebloggedValue) {
|
|
|
|
this.refs.reblogIcon.animate(REBLOG_ANIMATION)
|
|
|
|
}
|
2018-03-08 02:04:20 +00:00
|
|
|
},
|
2018-04-20 04:38:01 +00:00
|
|
|
onReplyClick (e) {
|
2018-03-30 08:06:17 +00:00
|
|
|
e.preventDefault()
|
|
|
|
e.stopPropagation()
|
|
|
|
requestAnimationFrame(() => {
|
2018-04-19 16:37:05 +00:00
|
|
|
let { uuid } = this.get()
|
|
|
|
let { repliesShown } = this.store.get()
|
|
|
|
repliesShown[uuid] = !repliesShown[uuid]
|
|
|
|
this.store.set({repliesShown})
|
2018-03-30 08:06:17 +00:00
|
|
|
this.fire('recalculateHeight')
|
|
|
|
})
|
2018-03-12 02:40:32 +00:00
|
|
|
},
|
2018-04-20 04:38:01 +00:00
|
|
|
async onOptionsClick (e) {
|
2018-03-30 08:06:17 +00:00
|
|
|
e.preventDefault()
|
|
|
|
e.stopPropagation()
|
2018-04-29 19:28:44 +00:00
|
|
|
let { originalStatus, originalAccountId } = this.get()
|
2018-03-16 03:04:24 +00:00
|
|
|
let updateRelationshipPromise = updateProfileAndRelationship(originalAccountId)
|
2018-04-21 16:56:53 +00:00
|
|
|
let showStatusOptionsDialog = await importShowStatusOptionsDialog()
|
2018-03-12 02:40:32 +00:00
|
|
|
await updateRelationshipPromise
|
2018-04-29 19:28:44 +00:00
|
|
|
showStatusOptionsDialog(originalStatus)
|
2018-04-13 04:18:14 +00:00
|
|
|
},
|
2018-04-20 04:38:01 +00:00
|
|
|
onPostedStatus (realm, inReplyToUuid) {
|
2018-04-19 16:37:05 +00:00
|
|
|
let {
|
|
|
|
originalStatusId,
|
|
|
|
uuid
|
|
|
|
} = this.get()
|
|
|
|
if (realm !== originalStatusId ||
|
|
|
|
inReplyToUuid !== uuid) {
|
2018-04-13 04:18:14 +00:00
|
|
|
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 22:49:28 +00:00
|
|
|
}
|
|
|
|
},
|
2018-03-21 16:38:20 +00:00
|
|
|
data: () => ({
|
|
|
|
favoriteAnimation: FAVORITE_ANIMATION,
|
|
|
|
reblogAnimation: REBLOG_ANIMATION
|
|
|
|
}),
|
2018-02-19 18:34:36 +00:00
|
|
|
computed: {
|
2018-03-30 08:06:17 +00:00
|
|
|
replyLabel: (replyShown) => replyShown ? 'Close reply' : 'Reply',
|
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-03-16 03:04:24 +00:00
|
|
|
reblogged: (originalStatusId, $currentStatusModifications, originalStatus) => {
|
|
|
|
if ($currentStatusModifications && originalStatusId in $currentStatusModifications.reblogs) {
|
|
|
|
return $currentStatusModifications.reblogs[originalStatusId]
|
2018-02-25 02:20:33 +00:00
|
|
|
}
|
2018-03-16 03:04:24 +00:00
|
|
|
return originalStatus.reblogged
|
2018-02-25 02:20:33 +00:00
|
|
|
},
|
2018-03-16 03:04:24 +00:00
|
|
|
favorited: (originalStatusId, $currentStatusModifications, originalStatus) => {
|
|
|
|
if ($currentStatusModifications && originalStatusId in $currentStatusModifications.favorites) {
|
|
|
|
return $currentStatusModifications.favorites[originalStatusId]
|
2018-02-24 02:23:36 +00:00
|
|
|
}
|
2018-03-16 03:04:24 +00:00
|
|
|
return originalStatus.favourited
|
2018-02-24 22:49:28 +00:00
|
|
|
},
|
2018-03-16 03:04:24 +00:00
|
|
|
favoriteKey: (uuid) => `fav-${uuid}`,
|
|
|
|
reblogKey: (uuid) => `reblog-${uuid}`,
|
|
|
|
replyKey: (uuid) => `reply-${uuid}`,
|
2018-04-20 04:38:01 +00:00
|
|
|
optionsKey: (uuid) => `options-${uuid}`
|
2018-01-28 20:51:48 +00:00
|
|
|
}
|
2018-01-21 05:42:46 +00:00
|
|
|
}
|
|
|
|
</script>
|