Rubicon/tutu
1
0
Fork 0
Code Issues 18 Pull requests 1 Projects 1 Activity Actions

TootBottomSheet: fix main toot not links profile
All checks were successful
/ depoly (push) Successful in 2m55s
Details

Browse source
This commit is contained in:
thislight 2024-10-30 20:58:36 +08:00
parent 31b27237cd
commit f4c0104d48
No known key found for this signature in database
GPG key ID: FCFE5192241CCD4E
7 changed files with 179 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

160
src/timelines/RegularToot.tsx
View file

@ -6,7 +6,6 @@ import {
Show,
createRenderEffect,
createEffect,
createMemo,
} from "solid-js";
import tootStyle from "./toot.module.css";
import { formatRelative } from "date-fns";
@ -20,7 +19,6 @@ import {
Star,
StarOutline,
Bookmark,
Reply,
Share,
} from "@suid/icons-material";
import { useTimeSource } from "../platform/timesrc.js";
@ -34,100 +32,8 @@ import Color from "colorjs.io";
import { useDateFnLocale } from "../platform/i18n";
import { canShare, share } from "../platform/share";
import { makeAcctText, useDefaultSession } from "../masto/clients";
import { useNavigate } from "@solidjs/router";
function preventDefault(event: Event) {
event.preventDefault();
}
type TootContentViewProps = {
source?: string;
emojis?: mastodon.v1.CustomEmoji[];
mentions: mastodon.v1.StatusMention[];
} & JSX.HTMLAttributes<HTMLDivElement>;
const TootContentView: Component<TootContentViewProps> = (props) => {
const session = useDefaultSession();
const [managed, rest] = splitProps(props, ["source", "emojis", "mentions"]);
const clientFinder = createMemo(() =>
session() ? makeAcctText(session()!) : undefined,
);
return (
<div
ref={(ref) => {
createRenderEffect(() => {
ref.innerHTML = managed.source
? managed.emojis
? resolveCustomEmoji(managed.source, managed.emojis)
: managed.source
: "";
});
createRenderEffect(() => {
const finder = clientFinder();
for (const mention of props.mentions) {
const elements = ref.querySelectorAll<HTMLAnchorElement>(
`a[href='${mention.url}']`,
);
for (const e of elements) {
e.onclick = preventDefault;
e.dataset.rel = "acct";
e.dataset.client = finder;
e.dataset.acctId = mention.id.toString();
}
}
});
}}
{...rest}
></div>
);
};
const RetootIcon: Component<JSX.HTMLElementTags["i"]> = (props) => {
const [managed, rest] = splitProps(props, ["class"]);
css`
.retoot-icon {
padding: 0;
display: inline-block;
border-radius: 2px;
> :global(svg) {
color: green;
font-size: 1rem;
vertical-align: middle;
}
}
`;
return (
<i class={["retoot-icon", managed.class].join(" ")} {...rest}>
<Repeat />
</i>
);
};
const ReplyIcon: Component<JSX.HTMLElementTags["i"]> = (props) => {
const [managed, rest] = splitProps(props, ["class"]);
css`
.retoot-icon {
padding: 0;
display: inline-block;
border-radius: 2px;
> :global(svg) {
color: var(--tutu-color-primary);
font-size: 1rem;
vertical-align: middle;
}
}
`;
return (
<i class={["retoot-icon", managed.class].join(" ")} {...rest}>
<Reply />
</i>
);
};
import TootContent from "./toot-components/TootContent";
import BoostIcon from "./toot-components/BoostIcon";
type TootActionGroupProps<T extends mastodon.v1.Status> = {
onRetoot?: (value: T) => void;
@ -339,12 +245,50 @@ export function TootPreviewCard(props: {
);
}
/**
* find bottom-to-top the element with `data-action`.
*/
export function findElementActionable(
element: HTMLElement,
top: HTMLElement,
): HTMLElement | undefined {
let current = element;
while (!current.dataset.action) {
if (!current.parentElement || current.parentElement === top) {
return undefined;
}
current = current.parentElement;
}
return current;
}
/**
* Component for a toot.
*
* If the session involved is not the first session, you must wrap
* this component under a `<DefaultSessionProvier />` with correct
* session.
*
* **Handling Clicks**
* There are multiple actions supported in the component. Some handlers
* are passed in, some should be handled as the click event.
*
* For those handler directly passed in, see the props starts with "on".
* We are moving to the new method below.
*
* The following actions are handled by the click event:
* - `[data-action="acct"]`: open the profile page of a account
* - `[data-acct-id]` is the account id for the client
* - `[data-client]` is the client perferred
* - `[href]` is the url of the account
*
* Handling the click event for this component, you should use
* {@link findElementActionable} to find out if the click event has
* additional intent. If the event's target is any from
* the subtree of any "actionable" element, the function returns the element.
*
* You can extract the intent from the attributes of the "actionable" element.
* The action type is the dataset's `action`.
*/
const RegularToot: Component<TootCardProps> = (props) => {
let rootRef: HTMLElement;
@ -357,24 +301,6 @@ const RegularToot: Component<TootCardProps> = (props) => {
const status = () => managed.status;
const toot = () => status().reblog ?? status();
const session = useDefaultSession();
const navigate = useNavigate();
const openProfile = (event: MouseEvent) => {
if (!managed.evaluated) return;
event.stopPropagation();
const s = session();
if (!s) {
console.warn("No session is provided");
return;
}
const acct = makeAcctText(s);
navigate(
`/${encodeURIComponent(acct)}/profile/${managed.status.account.id}`,
);
};
css`
.reply-sep {
@ -436,7 +362,7 @@ const RegularToot: Component<TootCardProps> = (props) => {
>
<Show when={!!status().reblog}>
<div class={tootStyle.tootRetootGrp}>
<RetootIcon />
<BoostIcon />
<span>
<Body2
ref={(e: { innerHTML: string }) => {
@ -455,11 +381,11 @@ const RegularToot: Component<TootCardProps> = (props) => {
<TootAuthorGroup
status={toot()}
now={now()}
data-rel="acct"
data-action="acct"
data-client={session() ? makeAcctText(session()!) : undefined}
data-acct-id={toot().account.id}
/>
<TootContentView
<TootContent
source={toot().content}
emojis={toot().emojis}
mentions={toot().mentions}