feat: date title shows absolute date (#890)

fixes #759

src/routes/_components/status/Status.html

@@ -126,6 +126,7 @@
   import { htmlToPlainText } from '../../_utils/htmlToPlainText'
   import { measureText } from '../../_utils/measureText'
   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 isUserInputElement = node => INPUT_TAGS.has(node.localName)
@@ -241,6 +242,7 @@
         return getAccountAccessibleName(originalAccount, $omitEmojiInDisplayNames)
       },
       createdAtDate: ({ originalStatus }) => originalStatus.created_at,
+      absoluteFormattedDate: ({ createdAtDate }) => absoluteDateFormatter.format(new Date(createdAtDate)),
       timeagoFormattedDate: ({ createdAtDate }) => formatTimeagoDate(createdAtDate),
       reblog: ({ status }) => status.reblog,
       ariaLabel: ({ originalAccount, account, plainTextContent, timeagoFormattedDate, spoilerText,
@@ -267,7 +269,7 @@
         account, accountId, uuid, isStatusInNotification, isStatusInOwnThread,
         originalAccount, originalAccountId, spoilerShown, visibility, replyShown,
         replyVisibility, spoilerText, originalStatus, originalStatusId, inReplyToId,
-        createdAtDate, timeagoFormattedDate, shortcutScope }) => ({
+        createdAtDate, timeagoFormattedDate, shortcutScope, absoluteFormattedDate }) => ({
         notification,
         notificationId,
         status,
@@ -290,7 +292,8 @@
         inReplyToId,
         createdAtDate,
         timeagoFormattedDate,
-        shortcutScope
+        shortcutScope,
+        absoluteFormattedDate
       })
     }
   }

src/routes/_components/status/StatusDetails.html

@@ -2,9 +2,11 @@
   <ExternalLink className="status-absolute-date"
                 href={originalStatus.url}
                 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>
   {#if applicationName}
     {#if applicationWebsite}
@@ -132,7 +134,7 @@
 <script>
   import ExternalLink from '../ExternalLink.html'
   import { store } from '../../_store/store'
-  import { getDateFormatter, getShortDateFormatter } from '../../_utils/formatters'
+  import { absoluteDateFormatter, shortAbsoluteDateFormatter } from '../../_utils/formatters'
   import { on } from '../../_utils/eventBus'
 
   export default {
@@ -170,10 +172,9 @@
         }
         return originalStatus.favourites_count || 0
       },
-      formattedDate: ({ createdAtDate, $isMobileSize }) => {
-        let formatter = $isMobileSize ? getShortDateFormatter() : getDateFormatter()
-        return formatter.format(new Date(createdAtDate))
-      },
+      displayAbsoluteFormattedDate: ({ createdAtDate, $isMobileSize }) => (
+        $isMobileSize ? shortAbsoluteDateFormatter : absoluteDateFormatter).format(new Date(createdAtDate)
+      ),
       reblogsLabel: ({ numReblogs }) => {
         // TODO: intl
         return numReblogs === 1
@@ -191,4 +192,4 @@
       ExternalLink
     }
   }
-</script>
+</script>

src/routes/_components/status/StatusRelativeDate.html

@@ -2,7 +2,7 @@
    href="/statuses/{originalStatusId}"
    focus-key={focusKey}
 >
-  <time datetime={createdAtDate} title={timeagoFormattedDate}
+  <time datetime={createdAtDate} title={absoluteFormattedDate}
         aria-label="{timeagoFormattedDate} – click to show thread">
     {timeagoFormattedDate}
   </time>
@@ -34,4 +34,4 @@
       focusKey: ({ uuid }) => `status-relative-date-${uuid}`
     }
   }
-</script>
+</script>

src/routes/_utils/formatters.js

@@ -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 () {
-  if (!dateFormatter) {
-    dateFormatter = new Intl.DateTimeFormat('en-US', {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-      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
-}
+export const shortAbsoluteDateFormatter = new Intl.DateTimeFormat('en-US', {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+  hour: '2-digit',
+  minute: '2-digit'
+})