Notification.html

{#if status}
  <Status {index} {length} {timelineType} {timelineValue} {focusSelector}
          {status} {notification} {enableShortcuts} on:recalculateHeight
  />
{:else}
  <article id={elementId}
           class={className}
           tabindex="0"
           aria-posinset={index + 1}
           aria-setsize={length}
           aria-label={ariaLabel}
  >
    <StatusHeader {notification} {notificationId} {status} {statusId} {timelineType}
                  {account} {accountId} {uuid} isStatusInNotification="true" />
    {#if enableShortcuts}
      <Shortcut scope={shortcutScope} key="p" on:pressed="openAuthorProfile()" />
      <Shortcut scope={shortcutScope} key="m" on:pressed="mentionAuthor()" />
    {/if}
  </article>
{/if}
<style>
  .notification-article {
    padding: var(--status-pad-v) var(--status-pad-h);
    width: 560px;
    max-width: calc(100vw - 40px);
    border-bottom: 1px solid var(--main-border);
  }
  @media (max-width: 767px) {
    .notification-article {
      max-width: calc(100vw - 20px);
      width: 580px;
    }
  }
</style>
<script>
  import Status from './Status.html'
  import StatusHeader from './StatusHeader.html'
  import Shortcut from '../shortcut/Shortcut.html'
  import { store } from '../../_store/store.js'
  import { getAccountAccessibleName } from '../../_a11y/getAccountAccessibleName.js'
  import { goto } from '../../../../__sapper__/client.js'
  import { composeNewStatusMentioning } from '../../_actions/mention.js'
  import { classname } from '../../_utils/classname.js'
  import { createStatusOrNotificationUuid } from '../../_utils/createStatusOrNotificationUuid.js'
  import { formatIntl } from '../../_utils/formatIntl.js'

  export default {
    components: {
      Status,
      StatusHeader,
      Shortcut
    },
    data: () => ({
      enableShortcuts: null
    }),
    store: () => store,
    computed: {
      account: ({ notification }) => notification.account,
      accountId: ({ account }) => account.id,
      notificationId: ({ notification }) => notification.id,
      notificationType: ({ notification }) => notification.type,
      status: ({ notification }) => notification.status,
      statusId: ({ status }) => status && status.id,
      uuid: ({ $currentInstance, timelineType, timelineValue, notificationId, statusId }) => (
        createStatusOrNotificationUuid($currentInstance, timelineType, timelineValue, notificationId, statusId)
      ),
      elementId: ({ uuid }) => uuid,
      shortcutScope: ({ elementId }) => elementId,
      ariaLabel: ({ status, account, $omitEmojiInDisplayNames, notificationType }) => {
        if (status) {
          return undefined // aria-label not needed if there's a status
        }
        const params = {
          name: getAccountAccessibleName(account, $omitEmojiInDisplayNames),
          account: `@${account.acct}`
        }
        if (notificationType === 'admin.sign_up') {
          return formatIntl('intl.accountSignedUp', params)
        } else if (notificationType === 'follow_request') {
          return formatIntl('intl.accountRequestedFollow', params)
        } else if (notificationType === 'admin.report') {
          return formatIntl('intl.accountReported', params)
        } else { // 'follow'
          return formatIntl('intl.accountFollowedYou', params)
        }
      },
      className: ({ $underlineLinks }) => (classname(
        'notification-article',
        'shortcut-list-item',
        'focus-fix',
        $underlineLinks && 'underline-links'
      ))
    },
    methods: {
      openAuthorProfile () {
        const { accountId } = this.get()
        goto(`/accounts/${accountId}`)
      },
      async mentionAuthor () {
        const { account } = this.get()
        await composeNewStatusMentioning(account)
      }
    }
  }
</script>