diff options
| -rw-r--r-- | index.html | 51 | ||||
| -rw-r--r-- | lib/htmlbuilder.js | 2 | ||||
| -rw-r--r-- | lib/popups.js | 34 | ||||
| -rw-r--r-- | lib/t.js | 26 | ||||
| -rw-r--r-- | pages/main/page.js | 20 | ||||
| -rw-r--r-- | styles.less | 2 |
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; |