diff options
Diffstat (limited to 'public/js')
| -rw-r--r-- | public/js/api.js | 26 | ||||
| -rw-r--r-- | public/js/chat.js | 240 | ||||
| -rw-r--r-- | public/js/components.js | 201 | ||||
| -rw-r--r-- | public/js/home.js | 21 | ||||
| -rw-r--r-- | public/js/main.js | 10 | ||||
| -rw-r--r-- | public/js/people.js | 15 | ||||
| -rw-r--r-- | public/js/profile.js | 6 |
7 files changed, 477 insertions, 42 deletions
diff --git a/public/js/api.js b/public/js/api.js index 5a55460..9ef5e4c 100644 --- a/public/js/api.js +++ b/public/js/api.js @@ -141,4 +141,28 @@ export const updateavatar = async (file) => { export const updatebanner = async (file) => { return await fileRequest('/users/banner', file, 'PUT') -}
\ No newline at end of file +} + +export const chatlist = async () => { + return await request('/chat/list', {}) +} + +export const chatcreate = async (name) => { + return await request('/chat/create', {name}) +} + +export const chatadd = async (email, room_id) => { + return await request('/chat/add', {email, room_id}, 'PATCH') +} + +export const chatleave = async (room_id) => { + return await request('/chat/leave', {room_id}, 'DELETE') +} + +export const chatsend = async (content, room_id) => { + return await request('/chat/send', {content, room_id}) +} + +export const chatload = async (newest_msg, page, room_id) => { + return await request('/chat/load', {newest_msg, page, room_id}) +} diff --git a/public/js/chat.js b/public/js/chat.js new file mode 100644 index 0000000..ed92bb6 --- /dev/null +++ b/public/js/chat.js @@ -0,0 +1,240 @@ +import { body, div, span, p, parse } from './main.js' +import { loadself, chatlist, chatload, loadusers, chatcreate } from './api.js' +import { createRoomDisplay, header, parseMessage, parseRoom, parseUser, createSingleLineInput } from './components.js' + +async function getUser(user_id) { + if (data.users[user_id]) { + return data.users[user_id] + } else { + let request = (await loadusers([user_id])) + if (request.status != 200) { + location.href = 'login' + } else { + data.users[user_id] = request.json[0] + return request.json[0] + } + } +} + +async function parseMessageImpl(message) { + let user = await getUser(message.user_id) + return parseMessage(message, user) +} + +async function onRoomClick(room) { + for (const room of Object.values(data.rooms)) { + room.display.style.display = 'none' + room.button.classList.remove('current') + } + room.display.style.display = '' + room.button.classList.add('current') +} + +async function render() { + let new_body = + body({}, + ...header(false, false, true, data.self.user_id), + div({id: 'cent'}, + div({id: 'sidebar'}, + span({class: 'ltext'}, + parse("Rooms") + ), + createSingleLineInput( + { + type: 'text', + name: 'addRoom', + class: 'addRoom input', + style: 'flex-grow: 0; width: 80%; margin-left: auto; margin-right: auto;' + }, + async (text) => { + let result = (await chatcreate(text)) + if (result.status != 201) { + alert(result.msg) + return false + } else { + return true + } + } + ), + ), + div({id: 'center'}) + ) + ) + + document.body.replaceWith(new_body) +} + +const data = { + self: {}, + users: [], + rooms: {}, +} + +async function loadRoomPage(room) { + + let request = (await chatload ( + room.newest_msg, + room.page, + room.room_id + )) + + if (request.json == undefined) { + alert(request.msg) + return + } + + let messages = room.display.getElementsByClassName('messages')[0] + for (const msg of request.json) { + room.messages.push(msg) + messages.appendChild(await parseMessageImpl(msg)) + } + + room.page++ + + return request.json.length > 0 +} + +async function loadRoom(room_id) { + let room = data.rooms[room_id] + + let batch = [] + for (const user_id of room.users) { + if (data.users[user_id]) continue + batch.push(user_id) + } + + if (batch.length > 1) { + let request = (await loadusers(batch)) + if (request.status != 200) { + location.href = '/login' + } else { + for (const user of request.json) { + data.users[user.user_id] = user + } + } + } + + room.display = createRoomDisplay(room, loadRoomPage) + + let displays = document.getElementById("center") + displays.appendChild(room.display) + + let button = parseRoom(room, onRoomClick) + + if (displays.children.length > 1) { + room.display.style.display = 'none' + } else { + button.classList.add('current') + } + + room.page = 0 + room.messages = [] + if (room.newest_msg == undefined || room.newest_msg < 0) + room.newest_msg = Number.MAX_SAFE_INTEGER + await loadRoomPage(room) + room.newest_msg = Math.min( + ...room.messages.map(m => m.message_id) + ) + room.page = 0 + + let sidebar = document.getElementById("sidebar") + sidebar.appendChild(button) + room.button = button + + if (!room.people) room.people = room.people = {} + + let people = room.display.getElementsByClassName("roomDisplayPeople")[0] + for (const user_id of room.users) { + if (room.people[user_id]) continue + let user = await getUser(user_id) + let el = parseUser(user) + people.appendChild(el) + room.people[user_id] = el + } + +} + +async function onMessage(message) { + let event = JSON.parse(message.data) + switch (event.type) { + case "message": { + let room = data.rooms[event.room_id] + if (!room) return + let display = room.display + let messages = display.getElementsByClassName('messages')[0] + messages.prepend(await parseMessageImpl(event)) + break; + } + case "add": { + let room = data.rooms[event.room.room_id] + if (!room) { + // we are the user being added + data.rooms[event.room.room_id] = event.room + loadRoom(event.room.room_id) + } else { + let display = room.display + let people = display.getElementsByClassName('roomDisplayPeople')[0] + if (!room.people[event.user_id]) { + let user = await getUser(event.user_id) + let el = parseUser(user) + people.appendChild(el) + room.people[event.user_id] = el + } + } + break; + } + case "leave": { + let room = data.rooms[event.room_id] + if (!room) return + if (room.people[event.user_id]) { + room.people[event.user_id].remove() + delete room.people[event.user_id] + } + if (event.user_id == data.self.user_id) { + room.display.remove() + room.button.remove() + delete data.rooms[event.room_id] + } + break; + } + case "typing": { + break; + } + default: { + console.warn("unhandled event: " + message.data) + break; + } + } +} + +async function init() { + + let request = (await loadself()); + + if (request.json == undefined) { + location.href = '/login' + return + } + + data.self = request.json + data.users[data.self.user_id] = data.self + + render() + + let rooms = (await chatlist()); + if (rooms.json === undefined) { + alert(rooms.msg) + } else { + for (const room of rooms.json) { + data.rooms[room.room_id] = room + loadRoom(room.room_id) + } + } + + let socket = new WebSocket(window.location.protocol.replace("http", "ws") + "//" + location.host + "/api/chat/connect") + socket.addEventListener("message", onMessage); + +} + + +init() diff --git a/public/js/components.js b/public/js/components.js index 7e2a268..88895c1 100644 --- a/public/js/components.js +++ b/public/js/components.js @@ -1,9 +1,9 @@ -import { div, a, pfp, span, i, parse, parseDate, p, form, input, svg, path, parseMonth } from './main.js' -import { postlike, postcomment, loadcommentspage } from './api.js'; +import { div, a, pfp, span, i, parse, parseDate, p, form, input, svg, path, parseMonth, g, button } from './main.js' +import { postlike, postcomment, loadcommentspage, chatsend, chatadd, chatleave } from './api.js'; window.parse = parse; -export function header(home, people, user_id) { +export function header(home, people, chat, user_id) { return [ div({id: 'header'}, span({class: 'logo'}, @@ -21,6 +21,16 @@ export function header(home, people, user_id) { svg({viewBox: '0 0 28 28', fill: 'currentColor', height: '28', width: '28'}, path({d: "M10.5 4.5c-2.272 0-2.75 1.768-2.75 3.25C7.75 9.542 8.983 11 10.5 11s2.75-1.458 2.75-3.25c0-1.482-.478-3.25-2.75-3.25zm0 8c-2.344 0-4.25-2.131-4.25-4.75C6.25 4.776 7.839 3 10.5 3s4.25 1.776 4.25 4.75c0 2.619-1.906 4.75-4.25 4.75zm9.5-6c-1.41 0-2.125.841-2.125 2.5 0 1.378.953 2.5 2.125 2.5 1.172 0 2.125-1.122 2.125-2.5 0-1.659-.715-2.5-2.125-2.5zm0 6.5c-1.999 0-3.625-1.794-3.625-4 0-2.467 1.389-4 3.625-4 2.236 0 3.625 1.533 3.625 4 0 2.206-1.626 4-3.625 4zm4.622 8a.887.887 0 00.878-.894c0-2.54-2.043-4.606-4.555-4.606h-1.86c-.643 0-1.265.148-1.844.413a6.226 6.226 0 011.76 4.336V21h5.621zm-7.122.562v-1.313a4.755 4.755 0 00-4.749-4.749H8.25A4.755 4.755 0 003.5 20.249v1.313c0 .518.421.938.937.938h12.125c.517 0 .938-.42.938-.938zM20.945 14C24.285 14 27 16.739 27 20.106a2.388 2.388 0 01-2.378 2.394h-5.81a2.44 2.44 0 01-2.25 1.5H4.437A2.44 2.44 0 012 21.562v-1.313A6.256 6.256 0 018.25 14h4.501a6.2 6.2 0 013.218.902A5.932 5.932 0 0119.084 14h1.861z"}) ) + ), + a({id: 'chat', class: chat ? 'selected' : '', href: '/chat', 'aria-label': 'xssbook chat page'}, + svg({viewBox: '0 0 512 512', fill: 'currentColor', height: '28', width: '28'}, + g({transform: "translate(0.000000,512.000000) scale(0.100000,-0.100000)", fill: "#fffffff", stroke: "none"}, + path({d: "M1731 4799 c-240 -27 -467 -93 -687 -199 -992 -481 -1340 -1619 -768 -2512 l43 -66 -150 -469 c-82 -257 -149 -481 -149 -496 0 -73 75 -147 150 -147 31 0 215 89 725 350 l230 118 90 -35 c109 -42 279 -87 395 -104 83 -12 86 -14 147 -70 172 -159 313 -256 514 -354 507 -245 1103 -270 1644 -68 l81 30 449 -229 c291 -148 464 -232 491 -235 80 -10 164 63 164 143 0 15 -67 238 -149 496 l-150 469 43 67 c330 511 364 1151 90 1689 -268 524 -818 913 -1421 1003 -43 7 -83 15 -89 18 -7 4 -54 45 -106 92 -143 128 -266 212 -443 299 -215 107 -352 152 -580 191 -139 25 -430 34 -564 19z m407 -300 c123 -13 261 -43 377 -80 100 -33 300 -127 385 -182 l54 -35 -39 -7 c-273 -43 -442 -94 -645 -191 -911 -439 -1295 -1442 -887 -2317 25 -53 41 -97 36 -97 -6 0 -67 22 -136 50 -78 31 -141 50 -166 50 -32 0 -104 -33 -363 -165 -178 -91 -325 -165 -327 -165 -3 0 42 145 100 323 57 177 104 340 105 362 1 47 -6 63 -84 178 -107 157 -180 326 -220 510 -29 135 -31 396 -5 530 119 596 612 1070 1253 1206 186 40 380 50 562 30z m1220 -600 c223 -24 404 -78 607 -179 436 -217 742 -607 832 -1059 24 -119 24 -384 0 -504 -39 -194 -130 -405 -244 -563 -31 -43 -60 -94 -64 -112 -9 -42 -4 -61 114 -429 52 -161 93 -293 91 -293 -2 0 -149 74 -327 165 -263 134 -331 165 -365 165 -26 0 -82 -17 -149 -44 -528 -216 -1130 -170 -1608 124 -163 100 -335 258 -452 417 -115 155 -211 374 -250 570 -24 122 -24 384 0 506 106 530 514 974 1062 1155 239 79 508 108 753 81z"}), + path({d: "M2488 2539 c-43 -22 -78 -81 -78 -129 0 -50 35 -107 80 -130 75 -38 157 -14 198 58 27 49 28 91 2 142 -37 73 -127 99 -202 59z"}), + path({d: "M3088 2539 c-43 -22 -78 -81 -78 -129 0 -50 35 -107 80 -130 75 -38 157 -14 198 58 27 49 28 91 2 142 -37 73 -127 99 -202 59z"}), + path({d: "M3688 2539 c-43 -22 -78 -81 -78 -129 0 -50 35 -107 80 -130 49 -25 90 -25 138 -1 43 22 82 84 82 131 0 47 -39 109 -82 131 -47 24 -93 24 -140 -2z"}) + ) + ) ) ), a({class: 'pfp', id: 'profile', href: '/profile', 'aria-label': 'your xssbook profile'}, @@ -246,7 +256,7 @@ export function parseUser(user) { parse('Joined ' + parseDate(new Date(user.date))) ), span({class: 'gtext'}, - parse('Gender :' + user.gender) + parse('Gender:' + user.gender) ), span({class: 'gtext'}, parse('Birthday: ' + parseMonth(user.month) + ' ' + user.day + ', ' + user.year) @@ -257,4 +267,185 @@ export function parseUser(user) { ) ) ) -}
\ No newline at end of file +} + +const stringToColor = (str) => { + let hash = 0; + str.split('').forEach(char => { + hash = char.charCodeAt(0) + ((hash << 5) - hash) + }) + let color = '#' + for (let i = 0; i < 3; i++) { + const value = (hash >> (i * 8)) & 0xff + color += value.toString(16).padStart(2, '0') + } + return color +} + +export function parseRoom(room, callback) { + + let dspName = room.name[0].toUpperCase() + let color = stringToColor(room.room_id + room.name + room.room_id) + + return ( + div({class: 'room', onclick: () => { + callback(room) + }}, + div({class: 'room-icon ltext', style: `background-color: ${color}`}, + span({}, parse(dspName)) + ), + div({class: 'room-name ltext'}, + span({}, parse(room.name)) + ), + div({ + class: 'close', + onclick: async () => { + let request = (await chatleave(room.room_id)) + + if (request.status != 200) { + alert(request.msg) + } + } + }) + ) + ) +} + +export function parseRooms(rooms, callback) { + let ret = [] + + for (const room of rooms) { + ret.push(parseRoom(room, callback)) + } + + return ret +} + +export function createMultiLineInput(attributes, onSubmit) { + let area = span({ + ...attributes, + role: 'textbox', + contenteditable: '', + onkeydown: async (event) => { + if (event.keyCode == 13 && !event.shiftKey) { + event.preventDefault() + let text = area.innerHTML.trim() + .replaceAll("&", '&') + .replaceAll("<", '<') + .replaceAll(">", '>') + .replaceAll(""", '"') + .replaceAll("'", "'") + + + text = text.replaceAll("\n", "<br>") + if (text.length < 1) return + if (await onSubmit(text)) { + area.textContent = '' + } + } + }, + }) + return area +} + +export function createSingleLineInput(attributes, onSubmit) { + let area = span({ + ...attributes, + role: 'textbox', + contenteditable: '', + onkeydown: async (event) => { + if (event.keyCode == 13 && !event.shiftKey) { + event.preventDefault() + let text = area.innerHTML.trim() + text = text.replaceAll("\n", "<br>") + if (text.length < 1) return + if (await onSubmit(text)) { + area.textContent = '' + } + } else if (event.keyCode == 13) { + event.preventDefault() + } + }, + }) + return area +} + +export function createRoomDisplay(room, loadMessageCallback) { + let buttonEl = button({ + class: 'loadMessages input', + style: 'flex-grow: 0', + onclick: async () => { + if (!await loadMessageCallback(room)) { + buttonEl.remove() + } + } + }, + parse('Load Previous') + ) + + return ( + div({class: 'roomDisplay'}, + div({class: 'roomDisplayCenter'}, + buttonEl, + div({class: 'messages'}), + createMultiLineInput( + { + type: 'text', + name: 'messageContent', + class: 'messageContent input', + }, + async (text) => { + let result = (await chatsend(text, room.room_id)) + + if (result.status != 201) { + alert(result.msg) + return false + } else { + return true + } + } + ), + ), + div({class: 'roomDisplayPeople'}, + span({class: 'ltext'}, + parse("People"), + ), + createSingleLineInput( + { + type: 'text', + name: 'addUser', + class: 'addUser input', + style: 'flex-grow: 0; width: 80%' + }, + async (text) => { + let result = (await chatadd(text, room.room_id)) + if (result.status != 200) { + alert(result.msg) + return false + } else { + return true + } + } + ) + ) + ) + ) +} + +export function parseMessage(message, user) { + return ( + div({class: 'message'}, + a({class: 'message-pfp', href: `/profile?id=${message.user_id}`}, + pfp(message.user_id) + ), + div({class: 'message-content'}, + span({class: 'message-name ltext'}, + parse(user.firstname + ' ' + user.lastname) + ), + p({class: 'message-text ltext'}, + parse(message.content) + ) + ) + ) + ) +} diff --git a/public/js/home.js b/public/js/home.js index 9f0398f..7d64eab 100644 --- a/public/js/home.js +++ b/public/js/home.js @@ -36,7 +36,7 @@ function render() { let new_body = body({}, - ...header(true, false, data.self.user_id), + ...header(true, false, false, data.self.user_id), div({id: 'create'}, div({class: 'create'}, a({class: 'pfp', href: '/profile'}, @@ -44,7 +44,7 @@ function render() { ), button({class: 'pfp'}, p({class: 'gtext', onclick: () => document.getElementById('popup').classList.remove('hidden')}, - parse(`What' on your mind, ${data.self.firstname}`) + parse(`What's on your mind, ${data.self.firstname}`) ) ) ) @@ -113,7 +113,9 @@ async function load() { const posts = (await loadpostspage(page)).json if (posts.length === 0) { - document.getElementById('load').remove() + let load = document.getElementById('load') + if (load) + load.remove() return [] } else { page++ @@ -134,17 +136,6 @@ async function load() { async function init() { let request = (await loadself()); - - if (request.status === 429) { - let new_body = - body({}, - ...header(true, false) - ) - - document.body.replaceWith(new_body) - throw new Error("Rate limited"); - } - data.self = request.json if (request.json == undefined) { @@ -161,4 +152,4 @@ async function init() { } -init()
\ No newline at end of file +init() diff --git a/public/js/main.js b/public/js/main.js index b49474c..a20ef10 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -83,6 +83,10 @@ export function path(attrs, ...children) { return createElementNS("path", attrs, ...children) } +export function g(attrs, ...children) { + return createElementNS("g", attrs, ...children) +} + export function svg(attrs, ...children) { return createElementNS("svg", attrs, ...children) } @@ -99,10 +103,6 @@ export function parse(html) { return document.createRange().createContextualFragment(html); } -export function pfpl(id) { - -} - export function pfp(id) { return img('pfp', {src: `/image/avatar?user_id=${id}`}) } @@ -142,4 +142,4 @@ export function crawl(key, object) { } } return data -}
\ No newline at end of file +} diff --git a/public/js/people.js b/public/js/people.js index 99890d9..431359c 100644 --- a/public/js/people.js +++ b/public/js/people.js @@ -6,7 +6,7 @@ function render() { let new_body = body({}, - ...header(false, true, data.self.user_id), + ...header(false, true, false, data.self.user_id), div({id: 'users'}, ...data.users.map(u => parseUser(u)) ), @@ -49,17 +49,6 @@ async function load() { async function init() { let request = (await loadself()); - - if (request.status === 429) { - let new_body = - body({}, - ...header(true, false, data.self.user_id) - ) - - document.body.replaceWith(new_body) - throw new Error("Rate limited"); - } - if (request.json == undefined) { location.href = '/login' return @@ -73,4 +62,4 @@ async function init() { render() } -init()
\ No newline at end of file +init() diff --git a/public/js/profile.js b/public/js/profile.js index a9990fb..b000425 100644 --- a/public/js/profile.js +++ b/public/js/profile.js @@ -107,7 +107,7 @@ async function render() { let new_body = body({}, - ...header(false, false, data.self.user_id), + ...header(false, false, false, data.self.user_id), div({id: 'top'}, div({id: 'banner'}, div({class: 'bg'}, @@ -223,7 +223,7 @@ async function render() { parse('Email: ' + data.user.email) ), span({class: 'gtext bold'}, - parse('Gender ' + data.user.gender) + parse('Gender: ' + data.user.gender) ), span({class: 'gtext bold'}, parse('Birthday: ' + parseMonth(data.user.month) + ' ' + data.user.day + ', ' + data.user.year) @@ -362,4 +362,4 @@ async function init() { render() } -init()
\ No newline at end of file +init() |