diff --git a/src/timelines/RegularToot.tsx b/src/timelines/RegularToot.tsx index 3487ae3..5984180 100644 --- a/src/timelines/RegularToot.tsx +++ b/src/timelines/RegularToot.tsx @@ -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; - -const TootContentView: Component = (props) => { - const session = useDefaultSession(); - const [managed, rest] = splitProps(props, ["source", "emojis", "mentions"]); - - const clientFinder = createMemo(() => - session() ? makeAcctText(session()!) : undefined, - ); - - return ( -
{ - 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( - `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} - >
- ); -}; - -const RetootIcon: Component = (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 ( - - - - ); -}; - -const ReplyIcon: Component = (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 ( - - - - ); -}; +import TootContent from "./toot-components/TootContent"; +import BoostIcon from "./toot-components/BoostIcon"; type TootActionGroupProps = { 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 `` 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 = (props) => { let rootRef: HTMLElement; @@ -357,24 +301,6 @@ const RegularToot: Component = (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 = (props) => { >
- + { @@ -455,11 +381,11 @@ const RegularToot: Component = (props) => { - = (props) => { } ` return ( -
+
{(status, index) => { const useThread = props.toots.length > 1; diff --git a/src/timelines/TootBottomSheet.tsx b/src/timelines/TootBottomSheet.tsx index cebd6de..8739366 100644 --- a/src/timelines/TootBottomSheet.tsx +++ b/src/timelines/TootBottomSheet.tsx @@ -4,7 +4,6 @@ import { createRenderEffect, createResource, createSignal, - For, Show, type Component, } from "solid-js"; @@ -17,7 +16,7 @@ import { } from "@suid/icons-material"; import { useSessionForAcctStr } from "../masto/clients"; import { resolveCustomEmoji } from "../masto/toot"; -import RegularToot from "./RegularToot"; +import RegularToot, { findElementActionable } from "./RegularToot"; import type { mastodon } from "masto"; import cards from "../material/cards.module.css"; import { css } from "solid-styled"; @@ -186,6 +185,33 @@ const TootBottomSheet: Component = (props) => { return Array.from(new Set(values).keys()); }; + const handleMainTootClick = ( + event: MouseEvent & { currentTarget: HTMLElement }, + ) => { + const actionableElement = findElementActionable( + event.target as HTMLElement, + event.currentTarget, + ); + + if (actionableElement) { + if (actionableElement.dataset.action === "acct") { + event.stopPropagation(); + + const target = actionableElement as HTMLAnchorElement; + + const acct = encodeURIComponent( + target.dataset.client || `@${new URL(target.href).origin}`, + ); + + navigate(`/${acct}/profile/${target.dataset.acctId}`); + + return; + } else { + console.warn("unknown action", actionableElement.dataset.rel); + } + } + }; + css` .name :global(img) { max-height: 1em; @@ -258,6 +284,7 @@ const TootBottomSheet: Component = (props) => { onBookmark={onBookmark} onRetoot={onBoost} onFavourite={onFav} + onClick={handleMainTootClick} >
diff --git a/src/timelines/TootList.tsx b/src/timelines/TootList.tsx index f62f659..3842d13 100644 --- a/src/timelines/TootList.tsx +++ b/src/timelines/TootList.tsx @@ -9,28 +9,12 @@ import { import { type mastodon } from "masto"; import { vibrate } from "../platform/hardware"; import Thread from "./Thread.jsx"; -import { makeAcctText, useDefaultSession } from "../masto/clients"; +import { useDefaultSession } from "../masto/clients"; import { useHeroSource } from "../platform/anim"; import { HERO as BOTTOM_SHEET_HERO } from "../material/BottomSheet"; import { setCache as setTootBottomSheetCache } from "./TootBottomSheet"; import { useNavigate } from "@solidjs/router"; - -/** - * find bottom-to-top the element with `data-rel`. - */ -function findElementActionable( - element: HTMLElement, - top: HTMLElement, -): HTMLElement | undefined { - let current = element; - while (!current.dataset.rel) { - if (!current.parentElement || current.parentElement === top) { - return undefined; - } - current = current.parentElement; - } - return current; -} +import { findElementActionable } from "./RegularToot"; const TootList: Component<{ ref?: Ref; @@ -116,8 +100,8 @@ const TootList: Component<{ event.currentTarget, ); - if (actionableElement) { - if (actionableElement.dataset.rel === "acct") { + if (actionableElement && checkIsExpended(status)) { + if (actionableElement.dataset.action === "acct") { event.stopPropagation(); const target = actionableElement as HTMLAnchorElement; @@ -127,15 +111,18 @@ const TootList: Component<{ `@${new URL(target.href).origin}`); navigate(`/${acct}/profile/${target.dataset.acctId}`); + + return; } else { console.warn("unknown action", actionableElement.dataset.rel); } + } + + // else if (!actionableElement || !checkIsExpended(status) || ) + if (status.id !== expandedThreadId()) { + setExpandedThreadId((x) => (x ? undefined : status.id)); } else { - if (status.id !== expandedThreadId()) { - setExpandedThreadId((x) => (x ? undefined : status.id)); - } else { - openFullScreenToot(status, event.currentTarget as HTMLElement); - } + openFullScreenToot(status, event.currentTarget as HTMLElement); } }; diff --git a/src/timelines/toot-components/BoostIcon.css b/src/timelines/toot-components/BoostIcon.css new file mode 100644 index 0000000..188011b --- /dev/null +++ b/src/timelines/toot-components/BoostIcon.css @@ -0,0 +1,11 @@ +.icon__boost { + padding: 0; + display: inline-block; + border-radius: 2px; + + > :global(svg) { + color: green; + font-size: 1rem; + vertical-align: middle; + } +} \ No newline at end of file diff --git a/src/timelines/toot-components/BoostIcon.tsx b/src/timelines/toot-components/BoostIcon.tsx new file mode 100644 index 0000000..1087778 --- /dev/null +++ b/src/timelines/toot-components/BoostIcon.tsx @@ -0,0 +1,22 @@ +import { + splitProps, + type Component, + type JSX, +} from "solid-js"; + +import { + Repeat, +} from "@suid/icons-material"; +import "./BoostIcon.css"; + + +const BoostIcon: Component = (props) => { + const [managed, rest] = splitProps(props, ["class"]); + return ( + + + + ); +}; + +export default BoostIcon; \ No newline at end of file diff --git a/src/timelines/toot-components/TootContent.tsx b/src/timelines/toot-components/TootContent.tsx new file mode 100644 index 0000000..8b21cef --- /dev/null +++ b/src/timelines/toot-components/TootContent.tsx @@ -0,0 +1,61 @@ +import type { mastodon } from "masto"; +import { + splitProps, + type Component, + type JSX, + createRenderEffect, + createMemo, +} from "solid-js"; +import { resolveCustomEmoji } from "../../masto/toot.js"; +import { makeAcctText, useDefaultSession } from "../../masto/clients"; + +function preventDefault(event: Event) { + event.preventDefault(); +} + +export type TootContentProps = { + source?: string; + emojis?: mastodon.v1.CustomEmoji[]; + mentions: mastodon.v1.StatusMention[]; +} & JSX.HTMLAttributes; + +const TootContent: Component = (props) => { + const session = useDefaultSession(); + const [managed, rest] = splitProps(props, ["source", "emojis", "mentions"]); + + const clientFinder = createMemo(() => + session() ? makeAcctText(session()!) : undefined, + ); + + return ( +
{ + 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( + `a[href='${mention.url}']`, + ); + for (const e of elements) { + e.onclick = preventDefault; + e.dataset.action = "acct"; + e.dataset.client = finder; + e.dataset.acctId = mention.id.toString(); + } + } + }); + }} + {...rest} + >
+ ); +}; + +export default TootContent; \ No newline at end of file