Add image support in notes

2022-01-08 14:08:04 +01:00 · 2022-01-08 14:08:04 +01:00 · b15eaff55e
commit b15eaff55e
parent e8d1d5422e
8 changed files with 195 additions and 66 deletions
--- a/UI/Popup/NoteCommentElement.ts
+++ b/UI/Popup/NoteCommentElement.ts
@ -0,0 +1,96 @@
+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 {ImageCarousel} from "../Image/ImageCarousel";
+import {SlideShow} from "../Image/SlideShow";
+import {UIEventSource} from "../../Logic/UIEventSource";
+import {OsmConnection} from "../../Logic/Osm/OsmConnection";
+
+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
+    }) {
+        const t = Translations.t.notes;
+
+        let actionIcon: BaseUIElement = undefined;
+        if (comment.action === "opened" || comment.action === "reopened") {
+            actionIcon = Svg.note_svg()
+        } else if (comment.action === "closed") {
+            actionIcon = Svg.resolved_svg()
+        } else {
+            actionIcon = Svg.addSmall_svg()
+        }
+
+        let user: BaseUIElement
+        if (comment.user === undefined) {
+            user = t.anonymous
+        } else {
+            user = new Link(comment.user, comment.user_url ?? "", true)
+        }
+
+
+        const htmlElement = document.createElement("div")
+        htmlElement.innerHTML = 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")
+                .SetStyle("min-width: 50px; background: grey;"));
+            imagesEl = new SlideShow(new UIEventSource<BaseUIElement[]>(imageEls))
+        }
+
+        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([user.SetClass("mr-2"), comment.date]).SetClass("flex justify-end subtle")
+        ])
+        this.SetClass("flex flex-col")
+
+    }
+
+    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
+        })
+        tags.data["comments"] = JSON.stringify(comments)
+        tags.ping()
+    }
+    
+}