51 lines
1.5 KiB
HTML
51 lines
1.5 KiB
HTML
{#if pinnedStatuses.length }
|
|
<h1 class="sr-only">{intl.pinnedStatuses}</h1>
|
|
<div role="feed" aria-label="{intl.pinnedStatuses}" class="pinned-statuses">
|
|
{#each pinnedStatuses as status, index (status.id)}
|
|
<div class="pinned-status-wrapper">
|
|
<!-- empty div used because we assume the parent of the <article> gets the focus outline -->
|
|
<Status {status}
|
|
timelineType="pinned"
|
|
timelineValue={accountId}
|
|
{index}
|
|
length={pinnedStatuses.length}
|
|
enableShortcuts={true}
|
|
/>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
<style>
|
|
.pinned-status-wrapper:first-child {
|
|
margin: 2px 0; /* gives room for the focus outline */
|
|
}
|
|
</style>
|
|
<script>
|
|
import { store } from '../../_store/store'
|
|
import Status from '../status/Status.html'
|
|
import { updatePinnedStatusesForAccount } from '../../_actions/pinnedStatuses'
|
|
import { on } from '../../_utils/eventBus'
|
|
|
|
export default {
|
|
async oncreate () {
|
|
on('updatePinnedStatuses', this, () => this.updatePinnedStatuses())
|
|
await this.updatePinnedStatuses()
|
|
},
|
|
computed: {
|
|
pinnedStatuses: ({ $pinnedStatuses, $currentInstance, accountId }) => {
|
|
return ($pinnedStatuses[$currentInstance] && $pinnedStatuses[$currentInstance][accountId]) || []
|
|
}
|
|
},
|
|
store: () => store,
|
|
components: {
|
|
Status
|
|
},
|
|
methods: {
|
|
async updatePinnedStatuses () {
|
|
const { accountId } = this.get()
|
|
await updatePinnedStatusesForAccount(accountId)
|
|
}
|
|
}
|
|
}
|
|
</script>
|