diff --git a/web/source/frontend/index.js b/web/source/frontend/index.js index 6d4b1470d..b9de769bd 100644 --- a/web/source/frontend/index.js +++ b/web/source/frontend/index.js @@ -179,19 +179,24 @@ dynamicSpoiler("text-spoiler", (details) => { const summary = details.children[0]; const button = details.querySelector(".button"); - // Use button inside summary to - // toggle post body visibility. + // Use button *instead of summary* + // to toggle post visibility. + summary.tabIndex = "-1"; button.tabIndex = "0"; button.setAttribute("aria-role", "button"); - button.onclick = () => { - details.click(); + button.onclick = (e) => { + e.preventDefault(); + return details.hasAttribute("open") + ? details.removeAttribute("open") + : details.setAttribute("open", ""); }; // Let enter also trigger the button // (for those using keyboard to navigate). button.addEventListener("keydown", (e) => { if (e.key === "Enter") { - summary.click(); + e.preventDefault(); + button.click(); } }); @@ -215,15 +220,19 @@ dynamicSpoiler("media-spoiler", (details) => { summary.tabIndex = "-1"; button.tabIndex = "0"; button.setAttribute("aria-role", "button"); - button.onclick = () => { - details.click(); + button.onclick = (e) => { + e.preventDefault(); + return details.hasAttribute("open") + ? details.removeAttribute("open") + : details.setAttribute("open", ""); }; // Let enter also trigger the button // (for those using keyboard to navigate). button.addEventListener("keydown", (e) => { if (e.key === "Enter") { - summary.click(); + e.preventDefault(); + button.click(); } }); diff --git a/web/source/settings/components/blurhash.tsx b/web/source/settings/components/blurhash.tsx new file mode 100644 index 000000000..25d973d03 --- /dev/null +++ b/web/source/settings/components/blurhash.tsx @@ -0,0 +1,75 @@ +/* + GoToSocial + Copyright (C) GoToSocial Authors admin@gotosocial.org + SPDX-License-Identifier: AGPL-3.0-or-later + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see . +*/ + +import React, { useEffect, useRef } from "react"; +import { MediaAttachment } from "../lib/types/status"; +import { decode } from "blurhash"; + +export default function BlurhashCanvas({ media }: { media: MediaAttachment }) { + const hash = media.blurhash; + const thumbHeight = media.meta.small.height; + const thumbWidth = media.meta.small.width; + const thumbAspect = media.meta.small.aspect; + + /* + It's very expensive to draw big canvases + with blurhashes, so use tiny ones, keeping + aspect ratio of the original thumbnail. + */ + var useWidth = 32; + var useHeight = 32; + switch (true) { + case thumbWidth > thumbHeight: + useHeight = Math.round(useWidth / thumbAspect); + break; + case thumbHeight > thumbWidth: + useWidth = Math.round(useHeight * thumbAspect); + break; + } + + const pixels = decode( + hash, + useWidth, + useHeight, + ); + + const canvasRef = useRef(null); + + useEffect(() => { + const ctx = canvasRef.current?.getContext("2d"); + if (!ctx) { + return; + } + + const imageData = ctx.createImageData( + useWidth, + useHeight, + ); + imageData.data.set(pixels); + ctx.putImageData(imageData, 0, 0); + }, [pixels, useHeight, useWidth]); + + return ( + + ); +} diff --git a/web/source/settings/components/form/inputs.tsx b/web/source/settings/components/form/inputs.tsx index c26b88f6a..1495e18f7 100644 --- a/web/source/settings/components/form/inputs.tsx +++ b/web/source/settings/components/form/inputs.tsx @@ -122,7 +122,8 @@ export function FileInput({ label, field, ...props }: FileInputProps) { const ref = useRef(null); const { onChange, infoComponent } = field; const id = nanoid(); - const onClick = () => { + const onClick = (e) => { + e.preventDefault(); ref.current?.click(); }; @@ -133,7 +134,12 @@ export function FileInput({ label, field, ...props }: FileInputProps) { htmlFor={id} tabIndex={0} onClick={onClick} - onKeyDown={e => e.key === "Enter" && onClick()} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + onClick(e); + } + }} role="button" >
diff --git a/web/source/settings/components/status.tsx b/web/source/settings/components/status.tsx index 04c5933d5..a5b85f214 100644 --- a/web/source/settings/components/status.tsx +++ b/web/source/settings/components/status.tsx @@ -17,10 +17,11 @@ along with this program. If not, see . */ -import React, { useRef } from "react"; +import React, { useState } from "react"; import { useVerifyCredentialsQuery } from "../lib/query/login"; import { MediaAttachment, Status as StatusType } from "../lib/types/status"; import sanitize from "sanitize-html"; +import BlurhashCanvas from "./blurhash"; export function FakeStatus({ children }) { const { data: account = { @@ -122,26 +123,15 @@ function StatusBody({ status }: { status: StatusType }) { content = sanitize(status.content); } - const detailsRef = useRef(null); - const detailsOnClick = () => { - detailsRef.current?.click(); - }; - - const summaryRef = useRef(null); - const summaryOnClick = () => { - summaryRef.current?.click(); - }; + const [ detailsOpen, setDetailsOpen ] = useState(false); return (
- +
e.key === "Enter" && summaryOnClick()} + aria-label={detailsOpen ? "Hide content" : "Show content"} + onClick={(e) => { + e.preventDefault(); + setDetailsOpen(!detailsOpen); + }} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + setDetailsOpen(!detailsOpen); + } + }} > - Toggle content visibility + {detailsOpen ? "Hide content" : "Show content"}
(null); - const detailsOnClick = () => { - detailsRef.current?.click(); - }; - - const summaryRef = useRef(null); - const summaryOnClick = () => { - summaryRef.current?.click(); - }; - + const [ detailsOpen, setDetailsOpen ] = useState(false); return (
-
- +
+ @@ -229,15 +229,27 @@ function StatusMediaEntry({ media }: { media: MediaAttachment }) { className="eye button" role="button" tabIndex={0} - aria-label="Toggle show media" - onClick={detailsOnClick} - onKeyDown={e => e.key === "Enter" && summaryOnClick()} + aria-label={detailsOpen ? "Hide media" : "Show media"} + onClick={(e) => { + e.preventDefault(); + setDetailsOpen(!detailsOpen); + }} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + setDetailsOpen(!detailsOpen); + } + }} > +
+ +
diff --git a/web/source/settings/views/admin/http-header-permissions/overview.tsx b/web/source/settings/views/admin/http-header-permissions/overview.tsx index 0b708aa8c..3509e6617 100644 --- a/web/source/settings/views/admin/http-header-permissions/overview.tsx +++ b/web/source/settings/views/admin/http-header-permissions/overview.tsx @@ -65,7 +65,8 @@ export default function HeaderPermsOverview() { } = useGetHeaderAllowsQuery(NoArg, { skip: permType !== "allow" }); const itemToEntry = (perm: HeaderPermission) => { - const onClick = () => { + const onClick = (e) => { + e.preventDefault(); // When clicking on a header perm, // go to the detail view for perm. setLocation(`/${permType}s/${perm.id}`, { @@ -81,7 +82,12 @@ export default function HeaderPermsOverview() { key={perm.id} className="entry pseudolink" onClick={onClick} - onKeyDown={e => e.key === "Enter" && onClick()} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + onClick(e); + } + }} role="link" tabIndex={0} > diff --git a/web/source/settings/views/moderation/domain-permissions/drafts/index.tsx b/web/source/settings/views/moderation/domain-permissions/drafts/index.tsx index 36bc7ee01..0d6ac23ba 100644 --- a/web/source/settings/views/moderation/domain-permissions/drafts/index.tsx +++ b/web/source/settings/views/moderation/domain-permissions/drafts/index.tsx @@ -211,7 +211,7 @@ function DraftListEntry({ permDraft, linkTo, backLocation }: DraftEntryProps) { const title = `${permTypeUpper} ${domain}`; - const onClick = () => { + const onClick = (_) => { // When clicking on a draft, direct // to the detail view for that draft. setLocation(linkTo, { @@ -228,7 +228,12 @@ function DraftListEntry({ permDraft, linkTo, backLocation }: DraftEntryProps) { aria-label={title} title={title} onClick={onClick} - onKeyDown={e => e.key === "Enter" && onClick()} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + onClick(e); + } + }} role="link" tabIndex={0} > diff --git a/web/source/settings/views/moderation/domain-permissions/excludes/index.tsx b/web/source/settings/views/moderation/domain-permissions/excludes/index.tsx index 207f94d61..adc78ec6d 100644 --- a/web/source/settings/views/moderation/domain-permissions/excludes/index.tsx +++ b/web/source/settings/views/moderation/domain-permissions/excludes/index.tsx @@ -186,7 +186,8 @@ function ExcludeListEntry({ permExclude, linkTo, backLocation }: ExcludeEntryPro return ; } - const onClick = () => { + const onClick = (e) => { + e.preventDefault(); // When clicking on a exclude, direct // to the detail view for that exclude. setLocation(linkTo, { @@ -203,7 +204,12 @@ function ExcludeListEntry({ permExclude, linkTo, backLocation }: ExcludeEntryPro aria-label={`Exclude ${domain}`} title={`Exclude ${domain}`} onClick={onClick} - onKeyDown={e => e.key === "Enter" && onClick()} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + onClick(e); + } + }} role="link" tabIndex={0} > diff --git a/web/source/settings/views/moderation/domain-permissions/form.tsx b/web/source/settings/views/moderation/domain-permissions/form.tsx index cf1447cfd..caa2cbe83 100644 --- a/web/source/settings/views/moderation/domain-permissions/form.tsx +++ b/web/source/settings/views/moderation/domain-permissions/form.tsx @@ -71,7 +71,8 @@ export default function ImportExportForm({ form, submitParse, parseResult }: Imp }, [exportResult]); const importFileRef = useRef(null); - const importFileOnClick = () => { + const importFileOnClick = (e) => { + e.preventDefault(); importFileRef.current?.click(); }; @@ -110,7 +111,12 @@ export default function ImportExportForm({ form, submitParse, parseResult }: Imp className={`button with-icon${form.permType.value === undefined || form.permType.value.length === 0 ? " disabled" : ""}`} tabIndex={0} onClick={importFileOnClick} - onKeyDown={e => e.key === "Enter" && importFileOnClick()} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + importFileOnClick(e); + } + }} role="button" >