From 84ebada2cc3a7f6f094d249ceae0df49f66e55bc Mon Sep 17 00:00:00 2001 From: WlodekM Date: Sun, 1 Dec 2024 12:32:53 +0200 Subject: wip user popup --- index.html | 51 ++++++++++++++++++++++++++++++++++++++++++++++++++- lib/htmlbuilder.js | 2 +- lib/popups.js | 34 ++++++++++++++++++++++++++++++++++ lib/t.js | 26 ++++++++++++++++++++++++++ pages/main/page.js | 20 +++++++++++++++++--- styles.less | 2 +- 6 files changed, 129 insertions(+), 6 deletions(-) create mode 100644 lib/popups.js create mode 100644 lib/t.js diff --git a/index.html b/index.html index 8c9eccc..0661a50 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -7,9 +8,13 @@ - + + +

SD-WL

@@ -22,4 +27,48 @@

+ + \ 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/markdown-it@14.1.0/+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)} (${deHTML(msg.author.username)})`: 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; -- cgit 1.4.1-2-gfad0