wip user popup

author: WlodekM <[email protected]> 2024-12-01 12:32:53 +0200
committer: WlodekM <[email protected]> 2024-12-01 12:32:53 +0200
commit: 84ebada2cc3a7f6f094d249ceae0df49f66e55bc (patch)
tree: 470b9623677e0144d023ae99e6bb564fa89043ba
parent: 18b3dc1aeaeac7114f68ea0eab9ad59c7991b0ae (diff)
6 files changed, 129 insertions, 6 deletions
diff --git a/index.html b/index.html
index 8c9eccc..0661a50 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,9 +8,13 @@
     <!-- original name, ik -->
     <script type="module" src="main.js"></script>
     <link rel="stylesheet/less" type="text/css" href="styles.less" />
-    <script src="https://cdn.jsdelivr.net/npm/less" ></script>
+    <script src="https://cdn.jsdelivr.net/npm/less"></script>
 </head>
+
 <body>
+    <div class="ap-popup-container hidden">
+        <div class="ap-popup"></div>
+    </div>
     <div class="topbar hidden" id="topbar">
         SD-WL
         <div>
@@ -22,4 +27,48 @@
 
     </div>
 </body>
+
 </html>
+<style>
+    .ap-popup-container {
+        position: absolute;
+        width: 100vw;
+        height: 100vh;
+        top: 0;
+        left: 0;
+        background: #0003;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 1;
+    }
+
+    .ap-main,
+    .ap-popup {
+        background: white
+    }
+
+    #ap-btn-close-popup {
+        background: 0 0;
+        border: none;
+        cursor: pointer;
+        padding: .25em
+    }
+
+    .ap-popup-title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center
+    }
+
+    .ap-popup {
+        min-width: 20%;
+        padding: 1em;
+        border: 2px ridge #bbb;
+        height: fit-content
+    }
+
+    .ap-popup-container.hidden {
+        display: none
+    }
+</style>
\ No newline at end of file
diff --git a/lib/htmlbuilder.js b/lib/htmlbuilder.js
index 483b77b..110da39 100644
--- a/lib/htmlbuilder.js
+++ b/lib/htmlbuilder.js
@@ -8,7 +8,7 @@ function makeSigmaHtmlPlusElement(elem) {
         elem.innerHTML = html;
         return elem;
     }
-    elem.text = function (text) {
+    elem.text = elem.txt = function (text) {
         elem.innerText = text;
         return elem;
     }
diff --git a/lib/popups.js b/lib/popups.js
new file mode 100644
index 0000000..3d7e592
--- /dev/null
+++ b/lib/popups.js
@@ -0,0 +1,34 @@
+function DocElemListFromHTML(html) {
+    return new DOMParser().parseFromString(html, "text/html").body.childNodes;
+}
+
+/** AboutPad popup system */
+export function openPopup(html) {
+    document.querySelector(".ap-popup-container").classList.remove("hidden")
+    document.querySelector(".ap-popup").innerHTML = ""
+    let popup = document.querySelector(".ap-popup")
+    let elems;
+    console.log(typeof html)
+    if(typeof html == 'string') {
+        let htm = String(html)
+        htm = htm.replace(/\$\((.*?)\)\$/g, (a) => {
+            return eval(a.replace(/\$\((.*?)\)\$/g, "$1"))
+        })
+        elems = DocElemListFromHTML(String(htm))
+    } else elems = [html]
+    let len = elems.length
+    for (let i = 0; i < len; i++) {
+        const element = elems[0];
+        popup.appendChild(element)
+    }
+    let closeBtn = document.querySelector("#ap-btn-close-popup")
+    if(closeBtn) closeBtn.addEventListener('click', (ev) => {
+        document.querySelector(".ap-popup-container").classList.add("hidden")
+    })
+}
+
+document.querySelector(".ap-popup-container").addEventListener("click", function(ev) {
+	if(ev.target != this) return;
+    this.classList.add("hidden")
+	console.log("click!", ev)
+})
\ No newline at end of file
diff --git a/lib/t.js b/lib/t.js
new file mode 100644
index 0000000..77af51f
--- /dev/null
+++ b/lib/t.js
@@ -0,0 +1,26 @@
+export function timeSince(date) {
+    const seconds = Math.floor((new Date() - date) / 1000);
+
+    const interval = seconds / 31536000;
+
+    if (interval > 1) {
+        return Math.floor(interval) + " years";
+    }
+    interval = seconds / 2592000;
+    if (interval > 1) {
+        return Math.floor(interval) + " months";
+    }
+    interval = seconds / 86400;
+    if (interval > 1) {
+        return Math.floor(interval) + " days";
+    }
+    interval = seconds / 3600;
+    if (interval > 1) {
+        return Math.floor(interval) + " hours";
+    }
+    interval = seconds / 60;
+    if (interval > 1) {
+        return Math.floor(interval) + " minutes";
+    }
+    return Math.floor(seconds) + " seconds";
+}
\ No newline at end of file
diff --git a/pages/main/page.js b/pages/main/page.js
index d3357cb..1c20850 100644
--- a/pages/main/page.js
+++ b/pages/main/page.js
@@ -1,6 +1,9 @@
 import { shiftHeld } from "../../lib/key.js"
 import html from "../../lib/htmlbuilder.js"
 import markdwonits from "https://cdn.jsdelivr.net/npm/[email protected]/+esm"
+import { openPopup } from "../../lib/popups.js";
+
+window.html = html // debug
 
 const md = markdwonits()
 
@@ -9,6 +12,13 @@ async function fetchJSON(url, opts) {
     return await resp.json()
 }
 
+function buildUserPopup(userData) {
+    return html('div')
+        .child('pre')
+            .text(JSON.stringify(userData))
+            .up()
+}
+
 function scrollToBottomOfElement(element) {
     element.scrollTo(0, element.scrollHeight);
 }
@@ -25,7 +35,7 @@ function getUsernameHTML(msg) {
     return msg.author.display_name ? `${deHTML(msg.author.display_name)} (<code>${deHTML(msg.author.username)}</code>)`: deHTML(r.author.username)
 }
 
-export function onload() {
+export async function onload() {
     const msgArea = document.getElementById("messages");
 
     handleNewPost = function handleNewPost(post) {
@@ -75,6 +85,8 @@ export function onload() {
                 .class('message-container')
                 .child('img')
                     .attr('src', msg.author.avatar)
+                    .class('avatar')
+                    .ev('click', e => openPopup(buildUserPopup(msg.author)))
                     .up()
                 .child('div')
                     .class('message-content-container')
@@ -115,7 +127,9 @@ export function onload() {
                                         .attr('type', types[i])
                                         .up()
                             } else {
-                                return html('a').attr('href', a).text(`Attachment ${i + 1} (${a})`)
+                                return html('a')
+                                    .txt(`Attachment ${i + 1} (${a})`)
+                                    .attr('href', a)
                             }
                         })
                         .up()
@@ -129,7 +143,7 @@ export function onload() {
     // :+1:
 
     for (const msg of window.stores.sdlib.messages.reverse()) {
-        createMessage(msg)
+        await createMessage(msg)
     }
     scrollToBottomOfElement(msgArea.parentElement);
 
diff --git a/styles.less b/styles.less
index d67b084..807da2a 100644
--- a/styles.less
+++ b/styles.less
@@ -49,7 +49,7 @@ body {
 .message {
 	.message-container {
 		display: flex;
-		img {
+		.avatar {
 			height: 5em;
 			aspect-ratio: 1/1;
 			border: gray inset 2px;
author	WlodekM <[email protected]>	2024-12-01 12:32:53 +0200
committer	WlodekM <[email protected]>	2024-12-01 12:32:53 +0200
commit	84ebada2cc3a7f6f094d249ceae0df49f66e55bc (patch)
tree	470b9623677e0144d023ae99e6bb564fa89043ba
parent	18b3dc1aeaeac7114f68ea0eab9ad59c7991b0ae (diff)