kopia lustrzana https://github.com/nolanlawson/pinafore
373 wiersze
16 KiB
HTML
373 wiersze
16 KiB
HTML
<article id={elementId}
|
|
class={className}
|
|
tabindex="0"
|
|
aria-posinset={index + 1}
|
|
aria-setsize={length}
|
|
aria-label={ariaLabel}
|
|
on:recalculateHeight
|
|
ref:article
|
|
>
|
|
{#if showHeader}
|
|
<StatusHeader {...params} />
|
|
{/if}
|
|
<StatusAuthorName {...params} />
|
|
<StatusAuthorHandle {...params} />
|
|
{#if !isStatusInOwnThread}
|
|
<StatusRelativeDate {...params} {...timestampParams} />
|
|
{/if}
|
|
<StatusSidebar {...params} />
|
|
{#if spoilerText}
|
|
<StatusSpoiler {...params} {spoilerShown} on:recalculateHeight />
|
|
{/if}
|
|
{#if !showContent}
|
|
<StatusMentions {...params} />
|
|
{/if}
|
|
{#if content && (showContent || preloadHiddenContent)}
|
|
<StatusContent {...params} shown={showContent}/>
|
|
{/if}
|
|
<!-- Apparently it's possible for spoilered content to sometimes have embeds, but I can't figure out how.
|
|
Don't bother optimizing this with the preloadHiddenContent. -->
|
|
{#if showCard && showContent}
|
|
<StatusCard {...params} />
|
|
{/if}
|
|
{#if showMedia }
|
|
<StatusMediaAttachments {...params} on:recalculateHeight />
|
|
{/if}
|
|
{#if showPoll && (showContent || preloadHiddenContent)}
|
|
<StatusPoll {...params} shown={showContent} on:recalculateHeight />
|
|
{/if}
|
|
{#if isStatusInOwnThread}
|
|
<StatusDetails {...params} {...timestampParams} />
|
|
{/if}
|
|
{#if !isStatusInNotification}
|
|
<StatusToolbar {...params} {replyShown} on:recalculateHeight on:focusArticle="focusArticle()" />
|
|
{/if}
|
|
{#if replyShown}
|
|
<StatusComposeBox {...params} on:recalculateHeight />
|
|
{/if}
|
|
</article>
|
|
{#if enableShortcuts}
|
|
<Shortcut scope={shortcutScope} key="o" on:pressed="open()" />
|
|
<Shortcut scope={shortcutScope} key="p" on:pressed="openAuthorProfile()" />
|
|
<Shortcut scope={shortcutScope} key="m" on:pressed="mentionAuthor()" />
|
|
{/if}
|
|
|
|
<style>
|
|
.status-article {
|
|
padding: var(--status-pad-v) var(--status-pad-h);
|
|
display: grid;
|
|
grid-template-areas:
|
|
"header header header header"
|
|
"sidebar author-name author-handle relative-date"
|
|
"sidebar spoiler spoiler spoiler"
|
|
"sidebar spoiler-btn spoiler-btn spoiler-btn"
|
|
"sidebar mentions mentions mentions"
|
|
"sidebar content content content"
|
|
"sidebar card card card"
|
|
"sidebar media-grp media-grp media-grp"
|
|
"sidebar poll poll poll"
|
|
"media media media media"
|
|
"....... toolbar toolbar toolbar"
|
|
"compose compose compose compose";
|
|
grid-template-columns: min-content minmax(0, max-content) 1fr min-content;
|
|
grid-template-rows: repeat(8, max-content);
|
|
}
|
|
|
|
.status-article.tap-on-status {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.status-article.status-in-timeline {
|
|
border-bottom: 1px solid var(--main-border);
|
|
}
|
|
|
|
.status-article.status-direct {
|
|
background-color: var(--status-direct-background);
|
|
}
|
|
|
|
.status-article.status-in-own-thread {
|
|
grid-template-areas:
|
|
"sidebar author-name"
|
|
"sidebar author-handle"
|
|
"spoiler spoiler"
|
|
"spoiler-btn spoiler-btn"
|
|
"mentions mentions"
|
|
"content content"
|
|
"card card"
|
|
"media-grp media-grp"
|
|
"media media"
|
|
"poll poll"
|
|
"details details"
|
|
"toolbar toolbar"
|
|
"compose compose";
|
|
grid-template-columns: min-content 1fr;
|
|
grid-template-rows: repeat(7, max-content);
|
|
}
|
|
</style>
|
|
<script>
|
|
import StatusSidebar from './StatusSidebar.html'
|
|
import StatusHeader from './StatusHeader.html'
|
|
import StatusAuthorName from './StatusAuthorName.html'
|
|
import StatusAuthorHandle from './StatusAuthorHandle.html'
|
|
import StatusRelativeDate from './StatusRelativeDate.html'
|
|
import StatusDetails from './StatusDetails.html'
|
|
import StatusCard from './StatusCard.html'
|
|
import StatusToolbar from './StatusToolbar.html'
|
|
import StatusMediaAttachments from './StatusMediaAttachments.html'
|
|
import StatusContent from './StatusContent.html'
|
|
import StatusSpoiler from './StatusSpoiler.html'
|
|
import StatusComposeBox from './StatusComposeBox.html'
|
|
import StatusMentions from './StatusMentions.html'
|
|
import StatusPoll from './StatusPoll.html'
|
|
import Shortcut from '../shortcut/Shortcut.html'
|
|
import { store } from '../../_store/store.js'
|
|
import { goto } from '../../../../__sapper__/client.js'
|
|
import { registerClickDelegate } from '../../_utils/delegate.js'
|
|
import { classname } from '../../_utils/classname.js'
|
|
import { checkDomAncestors } from '../../_utils/checkDomAncestors.js'
|
|
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask.js'
|
|
import { getAccountAccessibleName } from '../../_a11y/getAccountAccessibleName.js'
|
|
import { getAccessibleLabelForStatus } from '../../_a11y/getAccessibleLabelForStatus.js'
|
|
import { formatTimeagoDate } from '../../_intl/formatTimeagoDate.js'
|
|
import { measureText } from '../../_utils/measureText.js'
|
|
import { LONG_POST_LENGTH, LONG_POST_TEXT } from '../../_static/statuses.js'
|
|
import { absoluteDateFormatter, dayOnlyAbsoluteDateFormatter } from '../../_utils/formatters.js'
|
|
import { composeNewStatusMentioning } from '../../_actions/mention.js'
|
|
import { createStatusOrNotificationUuid } from '../../_utils/createStatusOrNotificationUuid.js'
|
|
import { addEmojiTooltips } from '../../_utils/addEmojiTooltips.js'
|
|
import { tryToFocusElement } from '../../_utils/tryToFocusElement.js'
|
|
|
|
const INPUT_TAGS = new Set(['a', 'button', 'input', 'textarea', 'label'])
|
|
const isUserInputElement = node => INPUT_TAGS.has(node.localName)
|
|
const isToolbar = node => node.classList.contains('status-toolbar')
|
|
const isStatusArticle = node => node.classList.contains('status-article')
|
|
|
|
export default {
|
|
oncreate () {
|
|
const { elementId, isStatusInOwnThread, showContent } = this.get()
|
|
const { disableTapOnStatus } = this.store.get()
|
|
if (!isStatusInOwnThread && !disableTapOnStatus) {
|
|
// the whole <article> is clickable in this case
|
|
registerClickDelegate(this, elementId, (e) => this.onClickOrKeydown(e))
|
|
}
|
|
if (!showContent) {
|
|
scheduleIdleTask(() => {
|
|
// Perf optimization: lazily load the StatusContent when the user is idle so that
|
|
// it's fast when they click the "show more" button
|
|
this.set({ preloadHiddenContent: true })
|
|
})
|
|
}
|
|
scheduleIdleTask(() => addEmojiTooltips(this.refs.article))
|
|
},
|
|
components: {
|
|
StatusSidebar,
|
|
StatusHeader,
|
|
StatusAuthorName,
|
|
StatusAuthorHandle,
|
|
StatusRelativeDate,
|
|
StatusDetails,
|
|
StatusToolbar,
|
|
StatusMediaAttachments,
|
|
StatusContent,
|
|
StatusCard,
|
|
StatusPoll,
|
|
StatusSpoiler,
|
|
StatusComposeBox,
|
|
StatusMentions,
|
|
Shortcut
|
|
},
|
|
data: () => ({
|
|
notification: undefined,
|
|
replyVisibility: undefined,
|
|
preloadHiddenContent: false,
|
|
enableShortcuts: null
|
|
}),
|
|
store: () => store,
|
|
methods: {
|
|
onClickOrKeydown (e) {
|
|
const { type, keyCode, target } = e
|
|
|
|
const isClick = type === 'click'
|
|
const isEnter = type === 'keydown' && keyCode === 13
|
|
if (!isClick && !isEnter) {
|
|
return false
|
|
}
|
|
if (checkDomAncestors(target, isUserInputElement, isStatusArticle)) {
|
|
// this element or any ancestors up to the status-article element is
|
|
// a user input element
|
|
return false
|
|
}
|
|
if (checkDomAncestors(target, isToolbar, isStatusArticle)) {
|
|
// this element or any of its ancestors is the toolbar
|
|
return false
|
|
}
|
|
|
|
this.open()
|
|
return true
|
|
},
|
|
open () {
|
|
const { originalStatusId } = this.get()
|
|
goto(`/statuses/${originalStatusId}`)
|
|
},
|
|
openAuthorProfile () {
|
|
const { accountForShortcut } = this.get()
|
|
goto(`/accounts/${accountForShortcut.id}`)
|
|
},
|
|
async mentionAuthor () {
|
|
const { accountForShortcut } = this.get()
|
|
await composeNewStatusMentioning(accountForShortcut)
|
|
},
|
|
focusArticle () {
|
|
const { elementId } = this.get()
|
|
tryToFocusElement(elementId, /* scroll */ true)
|
|
}
|
|
},
|
|
computed: {
|
|
originalStatus: ({ status }) => status.reblog ? status.reblog : status,
|
|
originalStatusId: ({ originalStatus }) => originalStatus.id,
|
|
statusId: ({ status }) => status.id,
|
|
notificationId: ({ notification }) => notification && notification.id,
|
|
account: ({ notification, status }) => (
|
|
(notification && notification.account) || status.account
|
|
),
|
|
accountId: ({ account }) => account.id,
|
|
originalAccount: ({ originalStatus }) => originalStatus.account,
|
|
originalAccountId: ({ originalAccount }) => originalAccount.id,
|
|
accountForShortcut: ({ originalAccount, notification }) => notification ? notification.account : originalAccount,
|
|
visibility: ({ originalStatus }) => originalStatus.visibility,
|
|
plainTextContent: ({ originalStatus }) => originalStatus.plainTextContent || '',
|
|
plainTextContentOverLength: ({ plainTextContent }) => (
|
|
// measureText() is expensive, so avoid doing it when possible.
|
|
// Also measureText() typically only makes text shorter, not longer, so we can measure the raw length
|
|
// as a shortcut. (The only case where it makes text longer is with short URLs which get expanded to a longer
|
|
// placeholder.) This isn't 100% accurate, but we don't need perfect accuracy here because this is just
|
|
// to show a "long post" content warning.
|
|
plainTextContent.length > LONG_POST_LENGTH && measureText(plainTextContent) > LONG_POST_LENGTH
|
|
),
|
|
spoilerText: ({ originalStatus, plainTextContentOverLength }) => (
|
|
originalStatus.spoiler_text || (plainTextContentOverLength && LONG_POST_TEXT)
|
|
),
|
|
inReplyToId: ({ originalStatus }) => originalStatus.in_reply_to_id,
|
|
uuid: ({ $currentInstance, timelineType, timelineValue, notificationId, statusId }) => (
|
|
createStatusOrNotificationUuid($currentInstance, timelineType, timelineValue, notificationId, statusId)
|
|
),
|
|
elementId: ({ uuid }) => uuid,
|
|
shortcutScope: ({ elementId }) => elementId,
|
|
isStatusInOwnThread: ({ timelineType, timelineValue, originalStatusId }) => (
|
|
(timelineType === 'status' || timelineType === 'reply') && timelineValue === originalStatusId
|
|
),
|
|
isStatusInNotification: ({ originalStatusId, notification }) => (
|
|
notification && notification.status &&
|
|
notification.type !== 'mention' && notification.status.id === originalStatusId
|
|
),
|
|
spoilerShown: ({ $spoilersShown, uuid, $showAllSpoilers }) => (typeof $spoilersShown[uuid] === 'undefined' ? !!$showAllSpoilers : !!$spoilersShown[uuid]),
|
|
replyShown: ({ $repliesShown, uuid }) => !!$repliesShown[uuid],
|
|
showCard: ({ originalStatus, isStatusInNotification, showMedia, $hideCards }) => (
|
|
!$hideCards &&
|
|
!isStatusInNotification &&
|
|
!showMedia &&
|
|
originalStatus.card &&
|
|
originalStatus.card.title
|
|
),
|
|
showPoll: ({ originalStatus }) => (
|
|
originalStatus.poll
|
|
),
|
|
showMedia: ({ originalStatus, isStatusInNotification }) => (
|
|
!isStatusInNotification &&
|
|
originalStatus.media_attachments &&
|
|
originalStatus.media_attachments.length
|
|
),
|
|
mediaAttachments: ({ originalStatus }) => (
|
|
originalStatus.media_attachments
|
|
),
|
|
sensitiveShown: ({ $sensitivesShown, uuid }) => !!$sensitivesShown[uuid],
|
|
sensitive: ({ originalStatus, $markMediaAsSensitive, $neverMarkMediaAsSensitive }) => (
|
|
!$neverMarkMediaAsSensitive && ($markMediaAsSensitive || originalStatus.sensitive)
|
|
),
|
|
originalAccountEmojis: ({ originalAccount }) => (originalAccount.emojis || []),
|
|
originalStatusEmojis: ({ originalStatus }) => (originalStatus.emojis || []),
|
|
originalAccountDisplayName: ({ originalAccount }) => (originalAccount.display_name || originalAccount.username),
|
|
originalAccountAccessibleName: ({ originalAccount, $omitEmojiInDisplayNames }) => {
|
|
return getAccountAccessibleName(originalAccount, $omitEmojiInDisplayNames)
|
|
},
|
|
createdAtDate: ({ originalStatus }) => originalStatus.created_at,
|
|
createdAtDateTS: ({ createdAtDate }) => new Date(createdAtDate).getTime(),
|
|
absoluteFormattedDate: ({ createdAtDateTS }) => absoluteDateFormatter().format(createdAtDateTS),
|
|
shortInlineFormattedDate: ({ createdAtDateTS, $now, $disableRelativeTimestamps }) => (
|
|
$disableRelativeTimestamps
|
|
? dayOnlyAbsoluteDateFormatter().format(createdAtDateTS)
|
|
: formatTimeagoDate(createdAtDateTS, $now)
|
|
),
|
|
reblog: ({ status }) => status.reblog,
|
|
ariaLabel: ({
|
|
originalAccount, account, plainTextContent, shortInlineFormattedDate, spoilerText,
|
|
showContent, reblog, notification, visibility, $omitEmojiInDisplayNames, $disableLongAriaLabels,
|
|
showMedia, sensitive, sensitiveShown, mediaAttachments, showPoll
|
|
}) => (
|
|
getAccessibleLabelForStatus(originalAccount, account, plainTextContent,
|
|
shortInlineFormattedDate, spoilerText, showContent,
|
|
reblog, notification, visibility, $omitEmojiInDisplayNames, $disableLongAriaLabels,
|
|
showMedia, sensitive, sensitiveShown, mediaAttachments, showPoll
|
|
)
|
|
),
|
|
showHeader: ({ notification, status, timelineType }) => (
|
|
(notification && ['reblog', 'favourite', 'poll', 'status', 'update'].includes(notification.type)) ||
|
|
status.reblog ||
|
|
timelineType === 'pinned'
|
|
),
|
|
className: ({ visibility, timelineType, isStatusInOwnThread, $underlineLinks, $disableTapOnStatus }) => (classname(
|
|
'status-article',
|
|
'shortcut-list-item',
|
|
'focus-fix',
|
|
timelineType !== 'direct' && visibility === 'direct' && 'status-direct',
|
|
timelineType !== 'search' && 'status-in-timeline',
|
|
isStatusInOwnThread && 'status-in-own-thread',
|
|
$underlineLinks && 'underline-links',
|
|
!$disableTapOnStatus && !isStatusInOwnThread && 'tap-on-status'
|
|
)),
|
|
content: ({ originalStatus }) => originalStatus.content || '',
|
|
showContent: ({ spoilerText, spoilerShown }) => !spoilerText || spoilerShown,
|
|
// These timestamp params may change every 10 seconds due to now() polling, so keep them
|
|
// separate from the generic `params` list to avoid costly recomputes.
|
|
timestampParams: ({ createdAtDate, createdAtDateTS, shortInlineFormattedDate, absoluteFormattedDate }) => ({
|
|
createdAtDate,
|
|
createdAtDateTS,
|
|
shortInlineFormattedDate,
|
|
absoluteFormattedDate
|
|
}),
|
|
// This params list deliberately does *not* include `spoilersShown` or `replyShown`, because these
|
|
// change frequently and would therefore cause costly recomputes if included here.
|
|
// The main goal here is to avoid typing by passing as many params as possible to child components.
|
|
params: ({
|
|
notification, notificationId, status, statusId, timelineType,
|
|
account, accountId, uuid, isStatusInNotification, isStatusInOwnThread,
|
|
originalAccount, originalAccountId, visibility,
|
|
replyVisibility, spoilerText, originalStatus, originalStatusId, inReplyToId,
|
|
enableShortcuts, shortcutScope, originalStatusEmojis
|
|
}) => ({
|
|
notification,
|
|
notificationId,
|
|
status,
|
|
statusId,
|
|
timelineType,
|
|
account,
|
|
accountId,
|
|
uuid,
|
|
isStatusInNotification,
|
|
isStatusInOwnThread,
|
|
originalAccount,
|
|
originalAccountId,
|
|
visibility,
|
|
replyVisibility,
|
|
spoilerText,
|
|
originalStatus,
|
|
originalStatusId,
|
|
inReplyToId,
|
|
enableShortcuts,
|
|
shortcutScope,
|
|
originalStatusEmojis
|
|
})
|
|
}
|
|
}
|
|
</script>
|