parent
8f84ae5a51
commit
ef44c19e8a
|
@ -126,6 +126,7 @@
|
||||||
import { htmlToPlainText } from '../../_utils/htmlToPlainText'
|
import { htmlToPlainText } from '../../_utils/htmlToPlainText'
|
||||||
import { measureText } from '../../_utils/measureText'
|
import { measureText } from '../../_utils/measureText'
|
||||||
import { LONG_POST_LENGTH, LONG_POST_TEXT } from '../../_static/statuses'
|
import { LONG_POST_LENGTH, LONG_POST_TEXT } from '../../_static/statuses'
|
||||||
|
import { absoluteDateFormatter } from '../../_utils/formatters'
|
||||||
|
|
||||||
const INPUT_TAGS = new Set(['a', 'button', 'input', 'textarea'])
|
const INPUT_TAGS = new Set(['a', 'button', 'input', 'textarea'])
|
||||||
const isUserInputElement = node => INPUT_TAGS.has(node.localName)
|
const isUserInputElement = node => INPUT_TAGS.has(node.localName)
|
||||||
|
@ -241,6 +242,7 @@
|
||||||
return getAccountAccessibleName(originalAccount, $omitEmojiInDisplayNames)
|
return getAccountAccessibleName(originalAccount, $omitEmojiInDisplayNames)
|
||||||
},
|
},
|
||||||
createdAtDate: ({ originalStatus }) => originalStatus.created_at,
|
createdAtDate: ({ originalStatus }) => originalStatus.created_at,
|
||||||
|
absoluteFormattedDate: ({ createdAtDate }) => absoluteDateFormatter.format(new Date(createdAtDate)),
|
||||||
timeagoFormattedDate: ({ createdAtDate }) => formatTimeagoDate(createdAtDate),
|
timeagoFormattedDate: ({ createdAtDate }) => formatTimeagoDate(createdAtDate),
|
||||||
reblog: ({ status }) => status.reblog,
|
reblog: ({ status }) => status.reblog,
|
||||||
ariaLabel: ({ originalAccount, account, plainTextContent, timeagoFormattedDate, spoilerText,
|
ariaLabel: ({ originalAccount, account, plainTextContent, timeagoFormattedDate, spoilerText,
|
||||||
|
@ -267,7 +269,7 @@
|
||||||
account, accountId, uuid, isStatusInNotification, isStatusInOwnThread,
|
account, accountId, uuid, isStatusInNotification, isStatusInOwnThread,
|
||||||
originalAccount, originalAccountId, spoilerShown, visibility, replyShown,
|
originalAccount, originalAccountId, spoilerShown, visibility, replyShown,
|
||||||
replyVisibility, spoilerText, originalStatus, originalStatusId, inReplyToId,
|
replyVisibility, spoilerText, originalStatus, originalStatusId, inReplyToId,
|
||||||
createdAtDate, timeagoFormattedDate, shortcutScope }) => ({
|
createdAtDate, timeagoFormattedDate, shortcutScope, absoluteFormattedDate }) => ({
|
||||||
notification,
|
notification,
|
||||||
notificationId,
|
notificationId,
|
||||||
status,
|
status,
|
||||||
|
@ -290,7 +292,8 @@
|
||||||
inReplyToId,
|
inReplyToId,
|
||||||
createdAtDate,
|
createdAtDate,
|
||||||
timeagoFormattedDate,
|
timeagoFormattedDate,
|
||||||
shortcutScope
|
shortcutScope,
|
||||||
|
absoluteFormattedDate
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,9 +2,11 @@
|
||||||
<ExternalLink className="status-absolute-date"
|
<ExternalLink className="status-absolute-date"
|
||||||
href={originalStatus.url}
|
href={originalStatus.url}
|
||||||
showIcon={true}
|
showIcon={true}
|
||||||
ariaLabel="{formattedDate} (opens in new window)"
|
ariaLabel="{displayAbsoluteFormattedDate} (opens in new window)"
|
||||||
>
|
>
|
||||||
<time datetime={createdAtDate} title={formattedDate}>{formattedDate}</time>
|
<time datetime={createdAtDate} title={absoluteFormattedDate}>
|
||||||
|
{displayAbsoluteFormattedDate}
|
||||||
|
</time>
|
||||||
</ExternalLink>
|
</ExternalLink>
|
||||||
{#if applicationName}
|
{#if applicationName}
|
||||||
{#if applicationWebsite}
|
{#if applicationWebsite}
|
||||||
|
@ -132,7 +134,7 @@
|
||||||
<script>
|
<script>
|
||||||
import ExternalLink from '../ExternalLink.html'
|
import ExternalLink from '../ExternalLink.html'
|
||||||
import { store } from '../../_store/store'
|
import { store } from '../../_store/store'
|
||||||
import { getDateFormatter, getShortDateFormatter } from '../../_utils/formatters'
|
import { absoluteDateFormatter, shortAbsoluteDateFormatter } from '../../_utils/formatters'
|
||||||
import { on } from '../../_utils/eventBus'
|
import { on } from '../../_utils/eventBus'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
@ -170,10 +172,9 @@
|
||||||
}
|
}
|
||||||
return originalStatus.favourites_count || 0
|
return originalStatus.favourites_count || 0
|
||||||
},
|
},
|
||||||
formattedDate: ({ createdAtDate, $isMobileSize }) => {
|
displayAbsoluteFormattedDate: ({ createdAtDate, $isMobileSize }) => (
|
||||||
let formatter = $isMobileSize ? getShortDateFormatter() : getDateFormatter()
|
$isMobileSize ? shortAbsoluteDateFormatter : absoluteDateFormatter).format(new Date(createdAtDate)
|
||||||
return formatter.format(new Date(createdAtDate))
|
),
|
||||||
},
|
|
||||||
reblogsLabel: ({ numReblogs }) => {
|
reblogsLabel: ({ numReblogs }) => {
|
||||||
// TODO: intl
|
// TODO: intl
|
||||||
return numReblogs === 1
|
return numReblogs === 1
|
||||||
|
@ -191,4 +192,4 @@
|
||||||
ExternalLink
|
ExternalLink
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
href="/statuses/{originalStatusId}"
|
href="/statuses/{originalStatusId}"
|
||||||
focus-key={focusKey}
|
focus-key={focusKey}
|
||||||
>
|
>
|
||||||
<time datetime={createdAtDate} title={timeagoFormattedDate}
|
<time datetime={createdAtDate} title={absoluteFormattedDate}
|
||||||
aria-label="{timeagoFormattedDate} – click to show thread">
|
aria-label="{timeagoFormattedDate} – click to show thread">
|
||||||
{timeagoFormattedDate}
|
{timeagoFormattedDate}
|
||||||
</time>
|
</time>
|
||||||
|
@ -34,4 +34,4 @@
|
||||||
focusKey: ({ uuid }) => `status-relative-date-${uuid}`
|
focusKey: ({ uuid }) => `status-relative-date-${uuid}`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,29 +1,15 @@
|
||||||
let dateFormatter
|
export const absoluteDateFormatter = new Intl.DateTimeFormat('en-US', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
day: 'numeric',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit'
|
||||||
|
})
|
||||||
|
|
||||||
export function getDateFormatter () {
|
export const shortAbsoluteDateFormatter = new Intl.DateTimeFormat('en-US', {
|
||||||
if (!dateFormatter) {
|
year: 'numeric',
|
||||||
dateFormatter = new Intl.DateTimeFormat('en-US', {
|
month: 'short',
|
||||||
year: 'numeric',
|
day: 'numeric',
|
||||||
month: 'long',
|
hour: '2-digit',
|
||||||
day: 'numeric',
|
minute: '2-digit'
|
||||||
hour: '2-digit',
|
})
|
||||||
minute: '2-digit'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return dateFormatter
|
|
||||||
}
|
|
||||||
|
|
||||||
let shortDateFormatter
|
|
||||||
|
|
||||||
export function getShortDateFormatter () {
|
|
||||||
if (!shortDateFormatter) {
|
|
||||||
shortDateFormatter = new Intl.DateTimeFormat('en-US', {
|
|
||||||
year: 'numeric',
|
|
||||||
month: 'short',
|
|
||||||
day: 'numeric',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return shortDateFormatter
|
|
||||||
}
|
|
||||||
|
|
Loading…
Reference in New Issue