A11y: move buttons into fields

2023-12-26 22:30:27 +01:00 · 2023-12-26 22:30:27 +01:00 · 1b10f1f64d
commit 1b10f1f64d
parent 30c9034e7b
23 changed files with 529 additions and 414 deletions
--- a/src/UI/Popup/Notes/NoteCommentElement.ts
+++ b/src/UI/Popup/Notes/NoteCommentElement.ts
@ -0,0 +1,140 @@
+import Combine from "../../Base/Combine"
+import BaseUIElement from "../../BaseUIElement"
+import Svg from "../../../Svg"
+import Link from "../../Base/Link"
+import { FixedUiElement } from "../../Base/FixedUiElement"
+import Translations from "../../i18n/Translations"
+import { Utils } from "../../../Utils"
+import Img from "../../Base/Img"
+import { SlideShow } from "../../Image/SlideShow"
+import { Stores, UIEventSource } from "../../../Logic/UIEventSource"
+import { OsmConnection } from "../../../Logic/Osm/OsmConnection"
+import { VariableUiElement } from "../../Base/VariableUIElement"
+import { SpecialVisualizationState } from "../../SpecialVisualization"
+
+export default class NoteCommentElement extends Combine {
+    constructor(
+        comment: {
+            date: string
+            uid: number
+            user: string
+            user_url: string
+            action: "closed" | "opened" | "reopened" | "commented"
+            text: string
+            html: string
+            highlighted: boolean
+        },
+        state?: SpecialVisualizationState,
+        index?: number,
+        totalNumberOfComments?: number
+    ) {
+        const t = Translations.t.notes
+
+        let actionIcon: BaseUIElement
+        if (comment.action === "opened" || comment.action === "reopened") {
+            actionIcon = Svg.note_svg()
+        } else if (comment.action === "closed") {
+            actionIcon = Svg.resolved_svg()
+        } else {
+            actionIcon = Svg.speech_bubble_svg()
+        }
+
+        let user: BaseUIElement
+        if (comment.user === undefined) {
+            user = t.anonymous
+        } else {
+            user = new Link(comment.user, comment.user_url ?? "", true)
+        }
+
+        let userinfo = Stores.FromPromise(
+            Utils.downloadJsonCached(
+                "https://api.openstreetmap.org/api/0.6/user/" + comment.uid,
+                24 * 60 * 60 * 1000
+            )
+        )
+        let userImg = new VariableUiElement(
+            userinfo.map((userinfo) => {
+                const href = userinfo?.user?.img?.href
+                if (href !== undefined) {
+                    return new Img(href).SetClass("rounded-full w-8 h-8 mr-4")
+                }
+                return undefined
+            })
+        )
+
+        const htmlElement = document.createElement("div")
+        htmlElement.innerHTML = Utils.purify(comment.html)
+        const images = Array.from(htmlElement.getElementsByTagName("a"))
+            .map((link) => link.href)
+            .filter((link) => {
+                link = link.toLowerCase()
+                const lastDotIndex = link.lastIndexOf(".")
+                const extension = link.substring(lastDotIndex + 1, link.length)
+                return Utils.imageExtensions.has(extension)
+            })
+        let imagesEl: BaseUIElement = undefined
+        if (images.length > 0) {
+            const imageEls = images.map((i) =>
+                new Img(i)
+                    .SetClass("w-full block cursor-pointer")
+                    .onClick(() =>
+                        state?.previewedImage?.setData(<any>{
+                            url_hd: i,
+                            url: i,
+                        })
+                    )
+                    .SetStyle("min-width: 50px; background: grey;")
+            )
+            imagesEl = new SlideShow(new UIEventSource<BaseUIElement[]>(imageEls)).SetClass("mb-1")
+        }
+
+        super([
+            new Combine([
+                actionIcon.SetClass("mr-4 w-6").SetStyle("flex-shrink: 0"),
+                new FixedUiElement(comment.html).SetClass("flex flex-col").SetStyle("margin: 0"),
+            ]).SetClass("flex"),
+            imagesEl,
+            new Combine([userImg, user.SetClass("mr-2"), comment.date]).SetClass(
+                "flex justify-end items-center subtle"
+            ),
+        ])
+        this.SetClass("flex flex-col pb-2 mb-2 border-gray-500 border-b")
+        if (comment.highlighted) {
+            this.SetClass("glowing-shadow")
+            console.log(">>>", index, totalNumberOfComments)
+            if (index + 2 === totalNumberOfComments) {
+                console.log("Scrolling into view")
+                requestAnimationFrame(() => {
+                    this.ScrollIntoView()
+                })
+            }
+        }
+    }
+
+    public static addCommentTo(
+        txt: string,
+        tags: UIEventSource<any>,
+        state: { osmConnection: OsmConnection }
+    ) {
+        const comments: any[] = JSON.parse(tags.data["comments"])
+        const username = state.osmConnection.userDetails.data.name
+
+        var urlRegex = /(https?:\/\/[^\s]+)/g
+        const html = txt.replace(urlRegex, function (url) {
+            return '<a href="' + url + '">' + url + "</a>"
+        })
+
+        comments.push({
+            date: new Date().toISOString(),
+            uid: state.osmConnection.userDetails.data.uid,
+            user: username,
+            user_url: "https://www.openstreetmap.org/user/" + username,
+            action: "commented",
+            text: txt,
+            html: html,
+            highlighted: true,
+        })
+        tags.data["comments"] = JSON.stringify(comments)
+        tags.ping()
+    }
+}